singularity-forge/web/components/gsd/files-view.tsx

"use client"

import { useState, useEffect, useCallback, useRef, useMemo } from "react"
import {
  FileText,
  ChevronRight,
  ChevronDown,
  Folder,
  FolderOpen,
  FileCode,
  File,
  Loader2,
  AlertCircle,
  X,
  FilePlus,
  FolderPlus,
  Pencil,
  Trash2,
  Copy,
  ClipboardCopy,
  Bot,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { useGSDWorkspaceState, buildProjectUrl } from "@/lib/gsd-workspace-store"
import { authFetch } from "@/lib/auth"
import { FileContentViewer } from "@/components/gsd/file-content-viewer"
import { ChatPane } from "@/components/gsd/chat-mode"

type RootMode = "gsd" | "project"

// Global pending file request — survives across component mount/unmount cycles.
// Set by the custom event, consumed by FilesView on mount or when already mounted.
let pendingFileRequest: { root: RootMode; path: string } | null = null

// Set up the global event listener once (module-level, not component-level)
if (typeof window !== "undefined") {
  window.addEventListener("gsd:open-file", (e: Event) => {
    const detail = (e as CustomEvent<{ root: RootMode; path: string }>).detail
    if (detail?.root && detail?.path) {
      pendingFileRequest = { root: detail.root, path: detail.path }
    }
  })
}

interface FileNode {
  name: string
  type: "file" | "directory"
  children?: FileNode[]
}

/* ── Persistence helpers ── */

function storageKey(projectCwd: string, root: RootMode): string {
  return `gsd-files-expanded:${root}:${projectCwd}`
}

function loadExpanded(projectCwd: string | undefined, root: RootMode): Set<string> {
  if (!projectCwd) return new Set()
  try {
    const raw = sessionStorage.getItem(storageKey(projectCwd, root))
    if (raw) return new Set(JSON.parse(raw) as string[])
  } catch { /* ignore */ }
  return new Set()
}

function saveExpanded(projectCwd: string | undefined, root: RootMode, expanded: Set<string>): void {
  if (!projectCwd) return
  try {
    sessionStorage.setItem(storageKey(projectCwd, root), JSON.stringify([...expanded]))
  } catch { /* ignore */ }
}

/* ── Icons ── */

function FileIcon({ name, isFolder, isOpen }: { name: string; isFolder: boolean; isOpen?: boolean }) {
  if (isFolder) {
    return isOpen ? (
      <FolderOpen className="h-4 w-4 text-muted-foreground" />
    ) : (
      <Folder className="h-4 w-4 text-muted-foreground" />
    )
  }
  if (name.endsWith(".md")) {
    return <FileText className="h-4 w-4 text-muted-foreground" />
  }
  if (name.endsWith(".json") || name.endsWith(".ts") || name.endsWith(".tsx") || name.endsWith(".js") || name.endsWith(".jsx")) {
    return <FileCode className="h-4 w-4 text-muted-foreground" />
  }
  return <File className="h-4 w-4 text-muted-foreground" />
}

/* ── Context menu ── */

interface ContextMenuState {
  x: number
  y: number
  path: string
  type: "file" | "directory"
  /** parent directory path (empty string = root) */
  parentPath: string
}

interface ContextMenuProps {
  menu: ContextMenuState
  onClose: () => void
  onNewFile: (parentDir: string) => void
  onNewFolder: (parentDir: string) => void
  onRename: (path: string) => void
  onDelete: (path: string, type: "file" | "directory") => void
  onCopyPath: (path: string) => void
  onDuplicate: (path: string) => void
}

function TreeContextMenu({ menu, onClose, onNewFile, onNewFolder, onRename, onDelete, onCopyPath, onDuplicate }: ContextMenuProps) {
  const menuRef = useRef<HTMLDivElement>(null)

  // Close on click outside or escape
  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        onClose()
      }
    }
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose()
    }
    document.addEventListener("mousedown", handleClick)
    document.addEventListener("keydown", handleKey)
    return () => {
      document.removeEventListener("mousedown", handleClick)
      document.removeEventListener("keydown", handleKey)
    }
  }, [onClose])

  // Keep menu within viewport
  const [pos, setPos] = useState({ x: menu.x, y: menu.y })
  useEffect(() => {
    if (!menuRef.current) return
    const rect = menuRef.current.getBoundingClientRect()
    let { x, y } = menu
    if (x + rect.width > window.innerWidth) x = window.innerWidth - rect.width - 8
    if (y + rect.height > window.innerHeight) y = window.innerHeight - rect.height - 8
    if (x < 0) x = 8
    if (y < 0) y = 8
    setPos({ x, y })
  }, [menu])

  const parentDir = menu.type === "directory" ? menu.path : menu.parentPath

  const items: { label: string; icon: React.ReactNode; action: () => void; destructive?: boolean; separator?: boolean }[] = [
    {
      label: "New File",
      icon: <FilePlus className="h-3.5 w-3.5" />,
      action: () => { onNewFile(parentDir); onClose() },
    },
    {
      label: "New Folder",
      icon: <FolderPlus className="h-3.5 w-3.5" />,
      action: () => { onNewFolder(parentDir); onClose() },
    },
    {
      label: "Rename",
      icon: <Pencil className="h-3.5 w-3.5" />,
      action: () => { onRename(menu.path); onClose() },
      separator: true,
    },
    {
      label: "Duplicate",
      icon: <Copy className="h-3.5 w-3.5" />,
      action: () => { onDuplicate(menu.path); onClose() },
    },
    {
      label: "Copy Path",
      icon: <ClipboardCopy className="h-3.5 w-3.5" />,
      action: () => { onCopyPath(menu.path); onClose() },
      separator: true,
    },
    {
      label: "Delete",
      icon: <Trash2 className="h-3.5 w-3.5" />,
      action: () => { onDelete(menu.path, menu.type); onClose() },
      destructive: true,
    },
  ]

  return (
    <div
      ref={menuRef}
      className="fixed z-50 min-w-[160px] rounded-md border border-border bg-popover py-1 shadow-lg animate-in fade-in-0 zoom-in-95"
      style={{ left: pos.x, top: pos.y }}
    >
      {items.map((item, i) => (
        <div key={i}>
          {item.separator && i > 0 && <div className="my-1 h-px bg-border" />}
          <button
            onClick={item.action}
            className={cn(
              "flex w-full items-center gap-2 px-3 py-1.5 text-xs transition-colors",
              item.destructive
                ? "text-destructive hover:bg-destructive/10"
                : "text-popover-foreground hover:bg-accent",
            )}
          >
            {item.icon}
            {item.label}
          </button>
        </div>
      ))}
    </div>
  )
}

/* ── Inline input (for rename / new file / new folder) ── */

function InlineInput({
  defaultValue,
  onCommit,
  onCancel,
  depth,
  icon,
}: {
  defaultValue: string
  onCommit: (value: string) => void
  onCancel: () => void
  depth: number
  icon: React.ReactNode
}) {
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    // Focus and select just the filename (not extension) on mount
    const input = inputRef.current
    if (!input) return
    input.focus()
    const dotIndex = defaultValue.lastIndexOf(".")
    if (dotIndex > 0) {
      input.setSelectionRange(0, dotIndex)
    } else {
      input.select()
    }
  }, [defaultValue])

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault()
      const val = inputRef.current?.value.trim()
      if (val && val.length > 0) onCommit(val)
      else onCancel()
    }
    if (e.key === "Escape") {
      e.preventDefault()
      onCancel()
    }
  }

  return (
    <div
      className="flex items-center gap-1.5 px-2 py-0.5"
      style={{ paddingLeft: `${depth * 12 + 8}px` }}
    >
      {icon}
      <input
        ref={inputRef}
        defaultValue={defaultValue}
        onKeyDown={handleKeyDown}
        onBlur={() => {
          const val = inputRef.current?.value.trim()
          if (val && val.length > 0) onCommit(val)
          else onCancel()
        }}
        className="flex-1 bg-transparent text-sm outline-none border border-ring rounded px-1 py-0.5 text-foreground"
        spellCheck={false}
      />
    </div>
  )
}

/* ── Tree item ── */

interface FileTreeItemProps {
  node: FileNode
  depth: number
  parentPath: string
  selectedPath: string | null
  expandedPaths: Set<string>
  renamingPath: string | null
  creatingIn: { parentDir: string; type: "file" | "directory" } | null
  onToggleDir: (path: string) => void
  onSelectFile: (path: string) => void
  onMoveFile: (fromPath: string, toDir: string) => void
  onContextMenu: (e: React.MouseEvent, path: string, type: "file" | "directory", parentPath: string) => void
  onRenameCommit: (oldPath: string, newName: string) => void
  onRenameCancel: () => void
  onCreateCommit: (parentDir: string, name: string, type: "file" | "directory") => void
  onCreateCancel: () => void
}

function FileTreeItem({
  node, depth, parentPath, selectedPath, expandedPaths,
  renamingPath, creatingIn,
  onToggleDir, onSelectFile, onMoveFile,
  onContextMenu, onRenameCommit, onRenameCancel,
  onCreateCommit, onCreateCancel,
}: FileTreeItemProps) {
  const fullPath = parentPath ? `${parentPath}/${node.name}` : node.name
  const isOpen = node.type === "directory" && expandedPaths.has(fullPath)
  const [dragOver, setDragOver] = useState(false)
  const isRenaming = renamingPath === fullPath

  // Should we show the "create new" input inside this directory?
  const showCreateInput = creatingIn && creatingIn.parentDir === fullPath && node.type === "directory" && isOpen

  const handleClick = () => {
    if (node.type === "directory") {
      onToggleDir(fullPath)
    } else {
      onSelectFile(fullPath)
    }
  }

  const handleContextMenu = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    onContextMenu(e, fullPath, node.type, parentPath)
  }

  // ── Drag source ──
  const handleDragStart = (e: React.DragEvent) => {
    e.dataTransfer.setData("text/x-tree-path", fullPath)
    e.dataTransfer.effectAllowed = "move"
  }

  // ── Drop target (directories only) ──
  const handleDragOver = (e: React.DragEvent) => {
    if (node.type !== "directory") return
    const srcPath = e.dataTransfer.types.includes("text/x-tree-path") ? "pending" : null
    if (!srcPath) return
    e.preventDefault()
    e.dataTransfer.dropEffect = "move"
    setDragOver(true)
  }

  const handleDragLeave = () => {
    setDragOver(false)
  }

  const handleDrop = (e: React.DragEvent) => {
    setDragOver(false)
    if (node.type !== "directory") return
    e.preventDefault()
    const srcPath = e.dataTransfer.getData("text/x-tree-path")
    if (!srcPath || srcPath === fullPath) return
    if (fullPath.startsWith(srcPath + "/")) return
    const srcParent = srcPath.includes("/") ? srcPath.substring(0, srcPath.lastIndexOf("/")) : ""
    if (srcParent === fullPath) return
    onMoveFile(srcPath, fullPath)
  }

  // Inline rename mode
  if (isRenaming) {
    return (
      <div data-tree-item>
        <InlineInput
          defaultValue={node.name}
          onCommit={(newName) => onRenameCommit(fullPath, newName)}
          onCancel={onRenameCancel}
          depth={depth}
          icon={<FileIcon name={node.name} isFolder={node.type === "directory"} isOpen={isOpen} />}
        />
      </div>
    )
  }

  return (
    <div data-tree-item>
      <button
        onClick={handleClick}
        onContextMenu={handleContextMenu}
        draggable
        onDragStart={handleDragStart}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        className={cn(
          "flex w-full items-center gap-1.5 px-2 py-1 text-sm hover:bg-accent/50 transition-colors",
          selectedPath === fullPath && node.type === "file" && "bg-accent",
          dragOver && "bg-accent/70 outline outline-1 outline-ring",
        )}
        style={{ paddingLeft: `${depth * 12 + 8}px` }}
      >
        {node.type === "directory" && (
          isOpen ? (
            <ChevronDown className="h-3 w-3 text-muted-foreground" />
          ) : (
            <ChevronRight className="h-3 w-3 text-muted-foreground" />
          )
        )}
        <FileIcon name={node.name} isFolder={node.type === "directory"} isOpen={isOpen} />
        <span className="truncate">{node.name}</span>
      </button>
      {isOpen && node.children && (
        <div>
          {/* Create new item input at the top of the directory */}
          {showCreateInput && (
            <InlineInput
              defaultValue={creatingIn!.type === "directory" ? "new-folder" : "new-file"}
              onCommit={(name) => onCreateCommit(fullPath, name, creatingIn!.type)}
              onCancel={onCreateCancel}
              depth={depth + 1}
              icon={creatingIn!.type === "directory"
                ? <Folder className="h-4 w-4 text-muted-foreground" />
                : <File className="h-4 w-4 text-muted-foreground" />
              }
            />
          )}
          {node.children.map((child, i) => (
            <FileTreeItem
              key={i}
              node={child}
              depth={depth + 1}
              parentPath={fullPath}
              selectedPath={selectedPath}
              expandedPaths={expandedPaths}
              renamingPath={renamingPath}
              creatingIn={creatingIn}
              onToggleDir={onToggleDir}
              onSelectFile={onSelectFile}
              onMoveFile={onMoveFile}
              onContextMenu={onContextMenu}
              onRenameCommit={onRenameCommit}
              onRenameCancel={onRenameCancel}
              onCreateCommit={onCreateCommit}
              onCreateCancel={onCreateCancel}
            />
          ))}
        </div>
      )}
    </div>
  )
}

/* ── Open tab model ── */

interface OpenTab {
  /** Unique key: "root:path" */
  key: string
  root: RootMode
  path: string
  content: string | null
  loading: boolean
  error: string | null
  /** When set, the viewer shows an inline diff overlay */
  diff?: { before: string; after: string } | null
  /** Set when the agent just opened/edited this file — causes MD files to default to Edit tab */
  agentOpened?: boolean
}

function tabKey(root: RootMode, path: string): string {
  return `${root}:${path}`
}

function tabDisplayPath(tab: OpenTab): string {
  return tab.root === "gsd" ? `.gsd/${tab.path}` : tab.path
}

function tabLabel(tab: OpenTab): string {
  return tab.path.split("/").pop() ?? tab.path
}

/* ── Main view ── */

type LeftPanel = "tree" | "agent"

export function FilesView() {
  const workspace = useGSDWorkspaceState()
  const projectCwd = workspace.boot?.project.cwd

  const [activeRoot, setActiveRoot] = useState<RootMode>("gsd")
  const [leftPanel, setLeftPanel] = useState<LeftPanel>("tree")
  const [gsdTree, setGsdTree] = useState<FileNode[] | null>(null)
  const [projectTree, setProjectTree] = useState<FileNode[] | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // ── Resizable tree panel ──
  const [treeWidth, setTreeWidth] = useState(256)
  const isDraggingTree = useRef(false)
  const dragStartX = useRef(0)
  const dragStartWidth = useRef(0)

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!isDraggingTree.current) return
      const delta = e.clientX - dragStartX.current
      const newWidth = Math.max(180, Math.min(480, dragStartWidth.current + delta))
      setTreeWidth(newWidth)
    }
    const handleMouseUp = () => {
      if (isDraggingTree.current) {
        isDraggingTree.current = false
        document.body.style.cursor = ""
        document.body.style.userSelect = ""
      }
    }
    document.addEventListener("mousemove", handleMouseMove)
    document.addEventListener("mouseup", handleMouseUp)
    return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [])

  const handleTreeDragStart = useCallback(
    (e: React.MouseEvent) => {
      isDraggingTree.current = true
      dragStartX.current = e.clientX
      dragStartWidth.current = treeWidth
      document.body.style.cursor = "col-resize"
      document.body.style.userSelect = "none"
    },
    [treeWidth],
  )

  // Expanded paths per root, restored from sessionStorage
  const [gsdExpanded, setGsdExpanded] = useState<Set<string>>(() => loadExpanded(projectCwd, "gsd"))
  const [projectExpanded, setProjectExpanded] = useState<Set<string>>(() => loadExpanded(projectCwd, "project"))

  // Re-hydrate from storage once projectCwd is available (boot may arrive after first render)
  const hydratedRef = useRef(false)
  useEffect(() => {
    if (!projectCwd || hydratedRef.current) return
    hydratedRef.current = true
    setGsdExpanded(loadExpanded(projectCwd, "gsd"))
    setProjectExpanded(loadExpanded(projectCwd, "project"))
  }, [projectCwd])

  const expandedPaths = activeRoot === "gsd" ? gsdExpanded : projectExpanded
  const setExpandedPaths = activeRoot === "gsd" ? setGsdExpanded : setProjectExpanded

  // ── Multi-tab state ──
  const [openTabs, setOpenTabs] = useState<OpenTab[]>([])
  const [activeTabKey, setActiveTabKey] = useState<string | null>(null)
  const [treeRootDragOver, setTreeRootDragOver] = useState(false)

  // ── Context menu state ──
  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null)
  const [renamingPath, setRenamingPath] = useState<string | null>(null)
  const [creatingIn, setCreatingIn] = useState<{ parentDir: string; type: "file" | "directory" } | null>(null)
  const [deleteConfirm, setDeleteConfirm] = useState<{ path: string; type: "file" | "directory" } | null>(null)

  const activeTab = openTabs.find((t) => t.key === activeTabKey) ?? null

  // The selected path in the tree corresponds to the active tab
  const selectedPath = activeTab?.path ?? null

  const tree = activeRoot === "gsd" ? gsdTree : projectTree
  const treeLoaded = activeRoot === "gsd" ? gsdTree !== null : projectTree !== null

  const fetchTree = useCallback(async (root: RootMode) => {
    try {
      setLoading(true)
      setError(null)
      const res = await authFetch(buildProjectUrl(`/api/files?root=${root}`, projectCwd))
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.error || `Failed to fetch files (${res.status})`)
      }
      const data = await res.json()
      const nodes = data.tree ?? []
      if (root === "gsd") {
        setGsdTree(nodes)
      } else {
        setProjectTree(nodes)
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to fetch files")
    } finally {
      setLoading(false)
    }
  }, [projectCwd])

  // Fetch tree when tab changes and data isn't cached
  useEffect(() => {
    if (!treeLoaded) {
      fetchTree(activeRoot)
    }
  }, [activeRoot, treeLoaded, fetchTree])

  // Initial load
  useEffect(() => {
    fetchTree("gsd")
  }, [fetchTree])

  // ── Open or focus a file tab and fetch its content ──
  const openFileTab = useCallback(async (root: RootMode, path: string) => {
    const key = tabKey(root, path)

    // If already open, just focus it
    setOpenTabs((prev) => {
      const existing = prev.find((t) => t.key === key)
      if (existing) return prev
      // Add new tab
      return [...prev, { key, root, path, content: null, loading: true, error: null }]
    })
    setActiveTabKey(key)

    // Switch tree root to match
    setActiveRoot(root)

    // Auto-expand parent dirs
    const parts = path.split("/")
    const setExpanded = root === "gsd" ? setGsdExpanded : setProjectExpanded
    setExpanded((prev) => {
      const next = new Set(prev)
      for (let i = 1; i < parts.length; i++) {
        next.add(parts.slice(0, i).join("/"))
      }
      saveExpanded(projectCwd, root, next)
      return next
    })

    // Check if we already have the content cached
    setOpenTabs((prev) => {
      const existing = prev.find((t) => t.key === key)
      if (existing && existing.content !== null) return prev // already loaded
      return prev // will fetch below
    })

    // Fetch content
    try {
      const res = await authFetch(buildProjectUrl(`/api/files?root=${root}&path=${encodeURIComponent(path)}`, projectCwd))
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        const errMsg = data.error || `Failed to fetch file (${res.status})`
        setOpenTabs((prev) =>
          prev.map((t) => (t.key === key ? { ...t, loading: false, error: errMsg } : t)),
        )
        return
      }
      const data = await res.json()
      setOpenTabs((prev) =>
        prev.map((t) =>
          t.key === key ? { ...t, content: data.content ?? null, loading: false, error: null } : t,
        ),
      )
    } catch (err) {
      const errMsg = err instanceof Error ? err.message : "Failed to fetch file content"
      setOpenTabs((prev) =>
        prev.map((t) => (t.key === key ? { ...t, loading: false, error: errMsg } : t)),
      )
    }
  }, [projectCwd])

  // ── Close a tab ──
  const closeTab = useCallback((key: string, e?: React.MouseEvent) => {
    e?.stopPropagation()
    setOpenTabs((prev) => {
      const idx = prev.findIndex((t) => t.key === key)
      const next = prev.filter((t) => t.key !== key)

      // If we're closing the active tab, switch to an adjacent one
      if (key === activeTabKey) {
        if (next.length === 0) {
          setActiveTabKey(null)
        } else {
          // Prefer the tab to the right, then left
          const newIdx = Math.min(idx, next.length - 1)
          setActiveTabKey(next[newIdx].key)
        }
      }

      return next
    })
  }, [activeTabKey])

  // Process a file open request (used both on mount and on event)
  const processFileOpen = useCallback(async (root: RootMode, path: string) => {
    // Ensure tree is loaded for this root
    if (root === "gsd" && !gsdTree) {
      fetchTree("gsd")
    } else if (root === "project" && !projectTree) {
      fetchTree("project")
    }

    await openFileTab(root, path)
  }, [gsdTree, projectTree, fetchTree, openFileTab])

  // On mount: consume any pending file request that arrived before this component mounted
  const consumedPendingRef = useRef(false)
  useEffect(() => {
    if (consumedPendingRef.current) return
    if (pendingFileRequest) {
      consumedPendingRef.current = true
      const { root, path } = pendingFileRequest
      pendingFileRequest = null
      void processFileOpen(root, path)
    }
  }, [processFileOpen])

  // Listen for file open events while mounted
  useEffect(() => {
    const handler = (e: Event) => {
      const detail = (e as CustomEvent<{ root: RootMode; path: string }>).detail
      if (!detail?.root || !detail?.path) return
      pendingFileRequest = null // clear since we're handling it directly
      void processFileOpen(detail.root, detail.path)
    }
    window.addEventListener("gsd:open-file", handler)
    return () => window.removeEventListener("gsd:open-file", handler)
  }, [processFileOpen])

  const handleToggleDir = useCallback((path: string) => {
    setExpandedPaths((prev) => {
      const next = new Set(prev)
      if (next.has(path)) {
        next.delete(path)
      } else {
        next.add(path)
      }
      saveExpanded(projectCwd, activeRoot, next)
      return next
    })
  }, [setExpandedPaths, projectCwd, activeRoot])

  const handleTreeRootChange = (root: RootMode) => {
    setActiveRoot(root)
  }

  const handleSelectFile = useCallback(async (path: string) => {
    await openFileTab(activeRoot, path)
  }, [activeRoot, openFileTab])

  // ── Move file/directory via drag-and-drop ──
  const handleMoveFile = useCallback(async (fromPath: string, toDir: string) => {
    const fileName = fromPath.split("/").pop() ?? fromPath
    const toPath = toDir ? `${toDir}/${fileName}` : fileName

    try {
      const res = await authFetch(buildProjectUrl("/api/files", projectCwd), {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ from: fromPath, to: toPath, root: activeRoot }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        console.error("Move failed:", data.error || res.statusText)
        return
      }

      // Update any open tabs that referenced the moved path
      const oldKey = tabKey(activeRoot, fromPath)
      setOpenTabs((prev) =>
        prev.map((t) => {
          if (t.key === oldKey) {
            const newKey = tabKey(activeRoot, toPath)
            return { ...t, key: newKey, path: toPath }
          }
          // Also update tabs for files inside a moved directory
          if (t.root === activeRoot && t.path.startsWith(fromPath + "/")) {
            const newTabPath = toPath + t.path.slice(fromPath.length)
            return { ...t, key: tabKey(activeRoot, newTabPath), path: newTabPath }
          }
          return t
        }),
      )
      if (activeTabKey?.startsWith(`${activeRoot}:${fromPath}`)) {
        if (activeTabKey === `${activeRoot}:${fromPath}`) {
          setActiveTabKey(tabKey(activeRoot, toPath))
        } else {
          const suffix = activeTabKey.slice(`${activeRoot}:${fromPath}`.length)
          setActiveTabKey(tabKey(activeRoot, toPath + suffix))
        }
      }

      // Refresh tree
      await fetchTree(activeRoot)
    } catch (err) {
      console.error("Move failed:", err)
    }
  }, [activeRoot, activeTabKey, fetchTree, projectCwd])

  // ── Context menu handlers ──

  const handleContextMenu = useCallback((e: React.MouseEvent, path: string, type: "file" | "directory", parentPath: string) => {
    setContextMenu({ x: e.clientX, y: e.clientY, path, type, parentPath })
  }, [])

  const handleContextMenuClose = useCallback(() => {
    setContextMenu(null)
  }, [])

  const handleNewFile = useCallback((parentDir: string) => {
    // Ensure parent directory is expanded
    if (parentDir) {
      const setExpanded = activeRoot === "gsd" ? setGsdExpanded : setProjectExpanded
      setExpanded((prev) => {
        const next = new Set(prev)
        const parts = parentDir.split("/")
        for (let i = 1; i <= parts.length; i++) {
          next.add(parts.slice(0, i).join("/"))
        }
        saveExpanded(projectCwd, activeRoot, next)
        return next
      })
    }
    setCreatingIn({ parentDir, type: "file" })
  }, [activeRoot, projectCwd])

  const handleNewFolder = useCallback((parentDir: string) => {
    if (parentDir) {
      const setExpanded = activeRoot === "gsd" ? setGsdExpanded : setProjectExpanded
      setExpanded((prev) => {
        const next = new Set(prev)
        const parts = parentDir.split("/")
        for (let i = 1; i <= parts.length; i++) {
          next.add(parts.slice(0, i).join("/"))
        }
        saveExpanded(projectCwd, activeRoot, next)
        return next
      })
    }
    setCreatingIn({ parentDir, type: "directory" })
  }, [activeRoot, projectCwd])

  const handleCreateCommit = useCallback(async (parentDir: string, name: string, type: "file" | "directory") => {
    const newPath = parentDir ? `${parentDir}/${name}` : name
    try {
      const res = await authFetch(buildProjectUrl("/api/files", projectCwd), {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ path: newPath, type, root: activeRoot }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        console.error("Create failed:", data.error || res.statusText)
        return
      }
      await fetchTree(activeRoot)
      // Open the file if it's a file
      if (type === "file") {
        await openFileTab(activeRoot, newPath)
      }
    } catch (err) {
      console.error("Create failed:", err)
    } finally {
      setCreatingIn(null)
    }
  }, [activeRoot, fetchTree, openFileTab, projectCwd])

  const handleCreateCancel = useCallback(() => {
    setCreatingIn(null)
  }, [])

  const handleRenameStart = useCallback((path: string) => {
    setRenamingPath(path)
  }, [])

  const handleRenameCommit = useCallback(async (oldPath: string, newName: string) => {
    const parentDir = oldPath.includes("/") ? oldPath.substring(0, oldPath.lastIndexOf("/")) : ""
    const newPath = parentDir ? `${parentDir}/${newName}` : newName

    if (newPath === oldPath) {
      setRenamingPath(null)
      return
    }

    try {
      const res = await authFetch(buildProjectUrl("/api/files", projectCwd), {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ from: oldPath, to: newPath, root: activeRoot }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        console.error("Rename failed:", data.error || res.statusText)
        return
      }

      // Update open tabs
      const oldKey = tabKey(activeRoot, oldPath)
      setOpenTabs((prev) =>
        prev.map((t) => {
          if (t.key === oldKey) {
            return { ...t, key: tabKey(activeRoot, newPath), path: newPath }
          }
          if (t.root === activeRoot && t.path.startsWith(oldPath + "/")) {
            const newTabPath = newPath + t.path.slice(oldPath.length)
            return { ...t, key: tabKey(activeRoot, newTabPath), path: newTabPath }
          }
          return t
        }),
      )
      if (activeTabKey === `${activeRoot}:${oldPath}`) {
        setActiveTabKey(tabKey(activeRoot, newPath))
      } else if (activeTabKey?.startsWith(`${activeRoot}:${oldPath}/`)) {
        const suffix = activeTabKey.slice(`${activeRoot}:${oldPath}`.length)
        setActiveTabKey(tabKey(activeRoot, newPath + suffix))
      }

      await fetchTree(activeRoot)
    } catch (err) {
      console.error("Rename failed:", err)
    } finally {
      setRenamingPath(null)
    }
  }, [activeRoot, activeTabKey, fetchTree, projectCwd])

  const handleRenameCancel = useCallback(() => {
    setRenamingPath(null)
  }, [])

  const handleDelete = useCallback((path: string, type: "file" | "directory") => {
    setDeleteConfirm({ path, type })
  }, [])

  const handleDeleteConfirm = useCallback(async () => {
    if (!deleteConfirm) return
    const { path, type } = deleteConfirm
    try {
      const res = await fetch(
        buildProjectUrl(`/api/files?root=${activeRoot}&path=${encodeURIComponent(path)}`, projectCwd),
        { method: "DELETE" },
      )
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        console.error("Delete failed:", data.error || res.statusText)
        return
      }

      // Close any tabs for the deleted path
      setOpenTabs((prev) => {
        const next = prev.filter((t) => {
          if (t.root !== activeRoot) return true
          if (t.path === path) return false
          if (t.path.startsWith(path + "/")) return false
          return true
        })
        // If active tab was removed, switch to adjacent
        if (activeTabKey) {
          const wasRemoved = !next.some((t) => t.key === activeTabKey)
          if (wasRemoved) {
            setActiveTabKey(next.length > 0 ? next[next.length - 1].key : null)
          }
        }
        return next
      })

      await fetchTree(activeRoot)
    } catch (err) {
      console.error("Delete failed:", err)
    } finally {
      setDeleteConfirm(null)
    }
  }, [deleteConfirm, activeRoot, activeTabKey, fetchTree, projectCwd])

  const handleDeleteCancel = useCallback(() => {
    setDeleteConfirm(null)
  }, [])

  const handleCopyPath = useCallback((path: string) => {
    const displayPath = activeRoot === "gsd" ? `.gsd/${path}` : path
    void navigator.clipboard.writeText(displayPath)
  }, [activeRoot])

  const handleDuplicate = useCallback(async (path: string) => {
    // Read original content
    try {
      const res = await authFetch(buildProjectUrl(`/api/files?root=${activeRoot}&path=${encodeURIComponent(path)}`, projectCwd))
      if (!res.ok) return
      const data = await res.json()
      if (typeof data.content !== "string") return

      // Compute duplicate name: file.ts -> file-copy.ts, folder -> folder-copy
      const fileName = path.split("/").pop() ?? path
      const parentDir = path.includes("/") ? path.substring(0, path.lastIndexOf("/")) : ""
      const dotIndex = fileName.lastIndexOf(".")
      let newName: string
      if (dotIndex > 0) {
        newName = `${fileName.substring(0, dotIndex)}-copy${fileName.substring(dotIndex)}`
      } else {
        newName = `${fileName}-copy`
      }
      const newPath = parentDir ? `${parentDir}/${newName}` : newName

      // Create with content
      const createRes = await authFetch(buildProjectUrl("/api/files", projectCwd), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ path: newPath, content: data.content, root: activeRoot }),
      })
      if (!createRes.ok) {
        const errData = await createRes.json().catch(() => ({}))
        console.error("Duplicate failed:", errData.error || createRes.statusText)
        return
      }
      await fetchTree(activeRoot)
      await openFileTab(activeRoot, newPath)
    } catch (err) {
      console.error("Duplicate failed:", err)
    }
  }, [activeRoot, fetchTree, openFileTab, projectCwd])

  // Save handler: POST to /api/files, then re-fetch content
  const handleSave = useCallback(async (newContent: string) => {
    if (!activeTab) return
    const { root, path, key } = activeTab
    const res = await authFetch(buildProjectUrl("/api/files", projectCwd), {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ path, content: newContent, root }),
    })
    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      throw new Error(data.error || `Save failed (${res.status})`)
    }
    // Re-fetch to sync the view tab
    const refetch = await authFetch(buildProjectUrl(`/api/files?root=${root}&path=${encodeURIComponent(path)}`, projectCwd))
    if (refetch.ok) {
      const data = await refetch.json()
      setOpenTabs((prev) =>
        prev.map((t) =>
          t.key === key ? { ...t, content: data.content ?? null } : t,
        ),
      )
    }
  }, [activeTab, projectCwd])

  // Auto-select STATE.md on initial load if no tabs are open
  const autoSelectedRef = useRef(false)
  useEffect(() => {
    if (autoSelectedRef.current) return
    if (!gsdTree || openTabs.length > 0 || consumedPendingRef.current) return
    const hasStateMd = gsdTree.some((n) => n.name === "STATE.md" && n.type === "file")
    if (hasStateMd) {
      autoSelectedRef.current = true
      void openFileTab("gsd", "STATE.md")
    }
  }, [gsdTree, openTabs.length, openFileTab])

  // ── Agent file-edit auto-open: watch tool executions for edit/write tools ──
  const lastSeenToolCountRef = useRef(0)
  const completedTools = workspace.completedToolExecutions
  const activeToolExec = workspace.activeToolExecution
  const diffTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  useEffect(() => {
    if (completedTools.length <= lastSeenToolCountRef.current) return
    const newTools = completedTools.slice(lastSeenToolCountRef.current)
    lastSeenToolCountRef.current = completedTools.length

    for (const tool of newTools) {
      if (tool.name !== "edit" && tool.name !== "write") continue
      const filePath = typeof tool.args?.path === "string" ? tool.args.path : null
      if (!filePath) continue

      // Determine root and relative path
      const gsdPrefix = ".gsd/"
      let root: RootMode = "project"
      let relativePath = filePath

      // Strip leading project cwd if present
      if (projectCwd && relativePath.startsWith(projectCwd)) {
        relativePath = relativePath.slice(projectCwd.length)
        if (relativePath.startsWith("/")) relativePath = relativePath.slice(1)
      }

      if (relativePath.startsWith(gsdPrefix)) {
        root = "gsd"
        relativePath = relativePath.slice(gsdPrefix.length)
      }

      const key = tabKey(root, relativePath)

      // Capture old content before re-fetching (for diff)
      const existingTab = openTabs.find((t) => t.key === key)
      const oldContent = existingTab?.content ?? null

      // Fetch new content, then store diff
      ;(async () => {
        try {
          const res = await authFetch(buildProjectUrl(`/api/files?root=${root}&path=${encodeURIComponent(relativePath)}`, projectCwd))
          if (!res.ok) return
          const data = await res.json()
          const newContent: string | null = data.content ?? null

          if (newContent !== null) {
            const diffData = oldContent !== null && oldContent !== newContent
              ? { before: oldContent, after: newContent }
              : null

            setOpenTabs((prev) => {
              const exists = prev.find((t) => t.key === key)
              if (exists) {
                return prev.map((t) =>
                  t.key === key ? { ...t, content: newContent, loading: false, error: null, diff: diffData, agentOpened: true } : t,
                )
              }
              // New tab
              return [...prev, { key, root, path: relativePath, content: newContent, loading: false, error: null, diff: diffData, agentOpened: true }]
            })
            setActiveTabKey(key)

            // Auto-clear diff after 8 seconds
            if (diffData) {
              if (diffTimerRef.current) clearTimeout(diffTimerRef.current)
              diffTimerRef.current = setTimeout(() => {
                setOpenTabs((prev) =>
                  prev.map((t) => t.key === key ? { ...t, diff: null } : t),
                )
              }, 8000)
            }
          }
        } catch { /* ignore */ }
      })()
    }
  }, [completedTools, projectCwd, openTabs])

  // While a file-modifying tool is active, show which file is being worked on
  const activeEditFile = useMemo(() => {
    if (!activeToolExec) return null
    if (activeToolExec.name !== "edit" && activeToolExec.name !== "write") return null
    return typeof activeToolExec.args?.path === "string" ? activeToolExec.args.path : null
  }, [activeToolExec])

  return (
    <div className="flex h-full">
      {/* Left panel (file tree or agent chat) */}
      <div className="flex-shrink-0 border-r border-border overflow-hidden flex flex-col" style={{ width: treeWidth }}>
        {/* Tab bar */}
        <div className="flex border-b border-border flex-shrink-0">
          <button
            onClick={() => { setLeftPanel("tree"); handleTreeRootChange("gsd") }}
            className={cn(
              "flex-1 px-3 py-2 text-xs font-medium transition-colors",
              leftPanel === "tree" && activeRoot === "gsd"
                ? "border-b-2 border-foreground text-foreground"
                : "text-muted-foreground hover:text-foreground",
            )}
          >
            GSD
          </button>
          <button
            onClick={() => { setLeftPanel("tree"); handleTreeRootChange("project") }}
            className={cn(
              "flex-1 px-3 py-2 text-xs font-medium transition-colors",
              leftPanel === "tree" && activeRoot === "project"
                ? "border-b-2 border-foreground text-foreground"
                : "text-muted-foreground hover:text-foreground",
            )}
          >
            Project
          </button>
          <button
            onClick={() => setLeftPanel("agent")}
            className={cn(
              "flex-1 px-3 py-2 text-xs font-medium transition-colors flex items-center justify-center gap-1.5",
              leftPanel === "agent"
                ? "border-b-2 border-foreground text-foreground"
                : "text-muted-foreground hover:text-foreground",
            )}
          >
            <Bot className="h-3 w-3" />
            Agent
          </button>
        </div>

        {/* Panel content */}
        {leftPanel === "agent" ? (
          <div className="flex-1 overflow-hidden flex flex-col min-h-0">
            <ChatPane className="flex-1 min-h-0" />
          </div>
        ) : (
          /* Tree content */
          <div
            className={cn("flex-1 overflow-y-auto py-2", treeRootDragOver && "bg-accent/30")}
          onDragOver={(e) => {
            // Only highlight if dragging directly over the root area, not a folder
            if ((e.target as HTMLElement).closest("[data-tree-item]")) return
            if (!e.dataTransfer.types.includes("text/x-tree-path")) return
            e.preventDefault()
            e.dataTransfer.dropEffect = "move"
            setTreeRootDragOver(true)
          }}
          onDragLeave={(e) => {
            // Only clear if leaving the root container entirely
            if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
              setTreeRootDragOver(false)
            }
          }}
          onDrop={(e) => {
            setTreeRootDragOver(false)
            if ((e.target as HTMLElement).closest("[data-tree-item]")) return
            e.preventDefault()
            const srcPath = e.dataTransfer.getData("text/x-tree-path")
            if (!srcPath) return
            // Already at root level?
            if (!srcPath.includes("/")) return
            handleMoveFile(srcPath, "")
          }}
          onContextMenu={(e) => {
            // Right-click on empty space in tree — offer New File/Folder at root
            if ((e.target as HTMLElement).closest("[data-tree-item]")) return
            e.preventDefault()
            setContextMenu({ x: e.clientX, y: e.clientY, path: "", type: "directory", parentPath: "" })
          }}
        >
          {loading && !treeLoaded ? (
            <div className="flex items-center justify-center py-8 text-muted-foreground">
              <Loader2 className="h-4 w-4 animate-spin mr-2" />
              Loading…
            </div>
          ) : error && !treeLoaded ? (
            <div className="flex items-center justify-center py-8 text-destructive text-xs px-3">
              <AlertCircle className="h-4 w-4 mr-2 shrink-0" />
              {error}
            </div>
          ) : tree && tree.length === 0 ? (
            <div className="flex items-center justify-center py-8 text-muted-foreground text-xs">
              {activeRoot === "gsd" ? "No .gsd/ files found" : "No files found"}
            </div>
          ) : tree ? (
            <>
              {/* Root-level create input */}
              {creatingIn && creatingIn.parentDir === "" && (
                <InlineInput
                  defaultValue={creatingIn.type === "directory" ? "new-folder" : "new-file"}
                  onCommit={(name) => handleCreateCommit("", name, creatingIn.type)}
                  onCancel={handleCreateCancel}
                  depth={0}
                  icon={creatingIn.type === "directory"
                    ? <Folder className="h-4 w-4 text-muted-foreground" />
                    : <File className="h-4 w-4 text-muted-foreground" />
                  }
                />
              )}
              {tree.map((node, i) => (
                <FileTreeItem
                  key={`${activeRoot}-${i}`}
                  node={node}
                  depth={0}
                  parentPath=""
                  selectedPath={selectedPath}
                  expandedPaths={expandedPaths}
                  renamingPath={renamingPath}
                  creatingIn={creatingIn}
                  onToggleDir={handleToggleDir}
                  onSelectFile={handleSelectFile}
                  onMoveFile={handleMoveFile}
                  onContextMenu={handleContextMenu}
                  onRenameCommit={handleRenameCommit}
                  onRenameCancel={handleRenameCancel}
                  onCreateCommit={handleCreateCommit}
                  onCreateCancel={handleCreateCancel}
                />
              ))}
            </>
          ) : null}
        </div>
        )}
      </div>

      {/* Resize drag handle */}
      <div className="relative flex items-stretch" style={{ flexShrink: 0 }}>
        <div
          className="absolute left-[-3px] top-0 bottom-0 w-[7px] cursor-col-resize z-10 hover:bg-muted-foreground/20 transition-colors"
          onMouseDown={handleTreeDragStart}
        />
      </div>

      {/* File content panel */}
      <div className="flex-1 overflow-hidden flex flex-col min-h-0">
        {/* Open file tabs */}
        {openTabs.length > 0 && (
          <div className="flex border-b border-border flex-shrink-0 overflow-x-auto bg-background">
            {openTabs.map((tab) => (
              <button
                key={tab.key}
                onClick={() => {
                  setActiveTabKey(tab.key)
                  setActiveRoot(tab.root)
                }}
                className={cn(
                  "group flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-r border-border transition-colors shrink-0 max-w-[180px]",
                  tab.key === activeTabKey
                    ? "bg-accent/50 text-foreground"
                    : "text-muted-foreground hover:text-foreground hover:bg-accent/20",
                )}
              >
                <span className="truncate" title={tabDisplayPath(tab)}>
                  {tabLabel(tab)}
                </span>
                <span
                  role="button"
                  tabIndex={0}
                  onClick={(e) => closeTab(tab.key, e)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" || e.key === " ") {
                      e.preventDefault()
                      closeTab(tab.key)
                    }
                  }}
                  className="ml-0.5 rounded p-0.5 opacity-0 group-hover:opacity-100 hover:bg-accent transition-opacity"
                >
                  <X className="h-3 w-3" />
                </span>
              </button>
            ))}
          </div>
        )}

        {/* Active tab content */}
        {activeTab ? (
          <>
            {activeTab.loading ? (
              <div className="flex flex-1 items-center justify-center text-muted-foreground">
                <Loader2 className="h-4 w-4 animate-spin mr-2" />
                Loading…
              </div>
            ) : activeTab.error ? (
              <div className="flex flex-1 items-center justify-center text-destructive">
                <AlertCircle className="h-4 w-4 mr-2" />
                {activeTab.error}
              </div>
            ) : activeTab.content !== null ? (
              <FileContentViewer
                content={activeTab.content}
                filepath={tabDisplayPath(activeTab)}
                root={activeTab.root}
                path={activeTab.path}
                onSave={handleSave}
                diff={activeTab.diff ?? undefined}
                agentOpened={activeTab.agentOpened}
                onDismissDiff={() => {
                  setOpenTabs((prev) =>
                    prev.map((t) => t.key === activeTab.key ? { ...t, diff: null, agentOpened: false } : t),
                  )
                }}
              />
            ) : (
              <div className="flex flex-1 items-center justify-center text-muted-foreground italic">
                No preview available
              </div>
            )}
          </>
        ) : (
          <div className="flex h-full items-center justify-center text-muted-foreground">
            Select a file to view
          </div>
        )}
      </div>

      {/* Context menu */}
      {contextMenu && (
        <TreeContextMenu
          menu={contextMenu}
          onClose={handleContextMenuClose}
          onNewFile={handleNewFile}
          onNewFolder={handleNewFolder}
          onRename={handleRenameStart}
          onDelete={handleDelete}
          onCopyPath={handleCopyPath}
          onDuplicate={handleDuplicate}
        />
      )}

      {/* Delete confirmation dialog */}
      {deleteConfirm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 animate-in fade-in-0">
          <div className="w-full max-w-sm rounded-lg border border-border bg-popover p-4 shadow-lg animate-in zoom-in-95">
            <h3 className="text-sm font-medium text-popover-foreground">
              Delete {deleteConfirm.type === "directory" ? "folder" : "file"}?
            </h3>
            <p className="mt-2 text-xs text-muted-foreground">
              Are you sure you want to delete{" "}
              <span className="font-mono font-medium text-popover-foreground">
                {deleteConfirm.path.split("/").pop()}
              </span>
              ?{deleteConfirm.type === "directory" && " This will delete all contents."}
              {" "}This cannot be undone.
            </p>
            <div className="mt-4 flex justify-end gap-2">
              <button
                onClick={handleDeleteCancel}
                className="rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleDeleteConfirm}
                className="rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground hover:bg-destructive/90 transition-colors"
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}