PaperClipAI/ui/src/components/FileTree.tsx

import type { CSSProperties, KeyboardEvent, ReactNode } from "react";
import { useMemo, useRef, useState } from "react";
import { cn } from "../lib/utils";
import { describeError } from "../api/errors";
import {
  ChevronDown,
  ChevronRight,
  FileCode2,
  FileText,
  Folder,
  FolderOpen,
} from "lucide-react";
import { statusBadge, statusBadgeDefault } from "../lib/status-colors";
import { Button } from "./ui/button";
import { Skeleton } from "./ui/skeleton";
import { Badge } from "@/components/ui/badge";

// -- Tree types --------------------------------------------------------------

export type FileTreeNode = {
  name: string;
  path: string;
  kind: "dir" | "file";
  children: FileTreeNode[];
  /** Optional per-node metadata (e.g. import action) */
  action?: string | null;
};

export type FileTreeBadgeVariant = "ok" | "warning" | "error" | "info" | "pending";

export type FileTreeBadge = {
  label: string;
  status: FileTreeBadgeVariant;
  tooltip?: string;
};

export type FileTreeTone = "default" | "warning" | "error" | "muted";

export type FileTreeEmptyState = {
  title?: string;
  description?: string;
};

export type FileTreeErrorState = {
  message: string;
  retry?: () => void;
};

type VisibleFileTreeNode = {
  node: FileTreeNode;
  depth: number;
};

const TREE_ROW_HEIGHT_CLASS = "min-h-9";

const fileTreeToneClass: Record<FileTreeTone, string | undefined> = {
  default: undefined,
  warning: "bg-amber-500/5 text-amber-700 dark:text-amber-300",
  error: "bg-destructive/5 text-destructive",
  muted: "opacity-50",
};

// -- Helpers -----------------------------------------------------------------

export function buildFileTree(
  files: Record<string, unknown>,
  actionMap?: Map<string, string>,
): FileTreeNode[] {
  const root: FileTreeNode = { name: "", path: "", kind: "dir", children: [] };

  for (const filePath of Object.keys(files)) {
    const segments = filePath.split("/").filter(Boolean);
    let current = root;
    let currentPath = "";
    for (let i = 0; i < segments.length; i++) {
      const segment = segments[i];
      currentPath = currentPath ? `${currentPath}/${segment}` : segment;
      const isLeaf = i === segments.length - 1;
      let next = current.children.find((c) => c.name === segment);
      if (!next) {
        next = {
          name: segment,
          path: currentPath,
          kind: isLeaf ? "file" : "dir",
          children: [],
          action: isLeaf ? (actionMap?.get(filePath) ?? null) : null,
        };
        current.children.push(next);
      }
      current = next;
    }
  }

  function sortNode(node: FileTreeNode) {
    node.children.sort((a, b) => {
      // Files before directories so PROJECT.md appears above tasks/
      if (a.kind !== b.kind) return a.kind === "file" ? -1 : 1;
      return a.name.localeCompare(b.name);
    });
    node.children.forEach(sortNode);
  }

  sortNode(root);
  return root.children;
}

export function countFiles(nodes: FileTreeNode[]): number {
  let count = 0;
  for (const node of nodes) {
    if (node.kind === "file") count++;
    else count += countFiles(node.children);
  }
  return count;
}

export function collectAllPaths(
  nodes: FileTreeNode[],
  type: "file" | "dir" | "all" = "all",
): Set<string> {
  const paths = new Set<string>();
  for (const node of nodes) {
    if (type === "all" || node.kind === type) paths.add(node.path);
    for (const p of collectAllPaths(node.children, type)) paths.add(p);
  }
  return paths;
}

function fileIcon(name: string) {
  if (name.endsWith(".yaml") || name.endsWith(".yml")) return FileCode2;
  return FileText;
}

function flattenVisibleNodes(
  nodes: FileTreeNode[],
  expandedDirs: Set<string>,
  depth = 0,
): VisibleFileTreeNode[] {
  const flattened: VisibleFileTreeNode[] = [];
  for (const node of nodes) {
    flattened.push({ node, depth });
    if (node.kind === "dir" && expandedDirs.has(node.path)) {
      flattened.push(...flattenVisibleNodes(node.children, expandedDirs, depth + 1));
    }
  }
  return flattened;
}

function checkboxState(node: FileTreeNode, checkedFiles: Set<string>) {
  if (node.kind === "file") {
    return {
      allChecked: checkedFiles.has(node.path),
      someChecked: false,
    };
  }

  const childFiles = collectAllPaths(node.children, "file");
  const childFilePaths = [...childFiles];
  const allChecked = childFilePaths.length > 0 && childFilePaths.every((p) => checkedFiles.has(p));
  const someChecked = childFilePaths.some((p) => checkedFiles.has(p));
  return { allChecked, someChecked: someChecked && !allChecked };
}

// -- Frontmatter helpers -----------------------------------------------------

export type FrontmatterData = Record<string, string | string[]>;

export function parseFrontmatter(content: string): { data: FrontmatterData; body: string } | null {
  const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/);
  if (!match) return null;

  const data: FrontmatterData = {};
  const rawYaml = match[1];
  const body = match[2];

  let currentKey: string | null = null;
  let currentList: string[] | null = null;

  for (const line of rawYaml.split("\n")) {
    const trimmed = line.trim();
    if (!trimmed || trimmed.startsWith("#")) continue;

    if (trimmed.startsWith("- ") && currentKey) {
      if (!currentList) currentList = [];
      currentList.push(trimmed.slice(2).trim().replace(/^["']|["']$/g, ""));
      continue;
    }

    if (currentKey && currentList) {
      data[currentKey] = currentList;
      currentList = null;
      currentKey = null;
    }

    const kvMatch = trimmed.match(/^([a-zA-Z_][\w-]*)\s*:\s*(.*)$/);
    if (kvMatch) {
      const key = kvMatch[1];
      const val = kvMatch[2].trim().replace(/^["']|["']$/g, "");
      if (val === "null") {
        currentKey = null;
        continue;
      }
      if (val) {
        data[key] = val;
        currentKey = null;
      } else {
        currentKey = key;
      }
    }
  }

  if (currentKey && currentList) {
    data[currentKey] = currentList;
  }

  return Object.keys(data).length > 0 ? { data, body } : null;
}

export const FRONTMATTER_FIELD_LABELS: Record<string, string> = {
  name: "Name",
  title: "Title",
  kind: "Kind",
  reportsTo: "Reports to",
  skills: "Skills",
  status: "Status",
  description: "Description",
  priority: "Priority",
  assignee: "Responsible",
  project: "Project",
  recurring: "Recurring",
  targetDate: "Target date",
};

// -- File tree component -----------------------------------------------------

export type FileTreeProps = {
  nodes: FileTreeNode[];
  selectedFile: string | null;
  expandedDirs: Set<string>;
  checkedFiles?: Set<string>;
  onToggleDir: (path: string) => void;
  onSelectFile: (path: string) => void;
  onToggleCheck?: (path: string, kind: "file" | "dir") => void;
  /** Serializable badge metadata keyed by path. This is safe to expose through plugin UI contracts. */
  fileBadges?: Record<string, FileTreeBadge | undefined>;
  /** Closed row tone metadata keyed by path. This avoids raw host class names in public contracts. */
  fileTones?: Record<string, FileTreeTone | undefined>;
  /** Internal-only escape hatch for current host call sites that need richer row content. */
  renderFileExtra?: (node: FileTreeNode, checked: boolean) => ReactNode;
  /** Rich labels reuse the tree's icons, spacing, focus, and selection controls. */
  renderLabel?: (node: FileTreeNode) => ReactNode;
  checkboxLabel?: (node: FileTreeNode) => string;
  /** Override selection for package nodes; null leaves an aligned, non-selectable row. */
  getCheckboxState?: (node: FileTreeNode) => 'checked' | 'mixed' | 'unchecked' | null;
  renderNodeExtra?: (node: FileTreeNode) => ReactNode;
  /** Search hides rows, while folder check states still include all descendants. */
  visiblePaths?: ReadonlySet<string>;
  disabled?: boolean;
  /** @deprecated Use fileTones for public surfaces. Kept for compatibility with host-only callers. */
  fileRowClassName?: (node: FileTreeNode, checked: boolean) => string | undefined;
  /** Compact explorer rows place disclosure controls before the checkbox and icon. */
  layout?: "default" | "explorer";
  showCheckboxes?: boolean;
  /** Allow long file and directory names to wrap instead of forcing horizontal overflow. */
  wrapLabels?: boolean;
  loading?: boolean;
  error?: FileTreeErrorState | null;
  empty?: FileTreeEmptyState;
  ariaLabel?: string;
};

export function FileTree({
  nodes,
  selectedFile,
  expandedDirs,
  checkedFiles,
  onToggleDir,
  onSelectFile,
  onToggleCheck,
  fileBadges,
  fileTones,
  renderFileExtra,
  renderLabel,
  checkboxLabel,
  getCheckboxState,
  renderNodeExtra,
  visiblePaths,
  disabled = false,
  fileRowClassName,
  layout = "default",
  showCheckboxes = true,
  wrapLabels = true,
  loading = false,
  error,
  empty,
  ariaLabel = "Files",
}: FileTreeProps) {
  const effectiveCheckedFiles = checkedFiles ?? new Set<string>();
  const visibleNodes = useMemo(
    () => flattenVisibleNodes(nodes, expandedDirs).filter(({ node }) => !visiblePaths || visiblePaths.has(node.path)),
    [expandedDirs, nodes, visiblePaths],
  );
  const [focusedPath, setFocusedPath] = useState<string | null>(null);
  const rowRefs = useRef(new Map<string, HTMLDivElement>());
  const tabStop = visibleNodes.some(({ node }) => node.path === focusedPath) ? focusedPath : visibleNodes[0]?.node.path;

  function focusPath(path: string) {
    setFocusedPath(path);
    window.requestAnimationFrame(() => {
      rowRefs.current.get(path)?.focus();
    });
  }

  function toggleNode(node: FileTreeNode) {
    if (disabled) return;
    if (node.kind === "dir") onToggleDir(node.path);
    else onSelectFile(node.path);
  }

  function handleRowKeyDown(event: KeyboardEvent<HTMLDivElement>, index: number, node: FileTreeNode) {
    if (disabled) return;
    switch (event.key) {
      case "ArrowDown": {
        event.preventDefault();
        const next = visibleNodes[Math.min(index + 1, visibleNodes.length - 1)];
        if (next) focusPath(next.node.path);
        break;
      }
      case "ArrowUp": {
        event.preventDefault();
        const previous = visibleNodes[Math.max(index - 1, 0)];
        if (previous) focusPath(previous.node.path);
        break;
      }
      case "ArrowRight":
        if (node.kind === "dir" && !expandedDirs.has(node.path)) {
          event.preventDefault();
          onToggleDir(node.path);
        }
        break;
      case "ArrowLeft":
        if (node.kind === "dir" && expandedDirs.has(node.path)) {
          event.preventDefault();
          onToggleDir(node.path);
        }
        break;
      case "Enter":
        event.preventDefault();
        toggleNode(node);
        break;
      case " ":
        if (showCheckboxes && onToggleCheck && getCheckboxState?.(node) !== null) {
          event.preventDefault();
          onToggleCheck(node.path, node.kind);
        }
        break;
    }
  }

  if (loading) {
    return (
      <div aria-busy="true" aria-label={ariaLabel} role="tree" className="py-1">
        {[0, 1, 2, 3].map((row) => (
          <div key={row} className={cn("flex items-center gap-2 px-4", TREE_ROW_HEIGHT_CLASS)}>
            <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
            <Skeleton className={cn("h-3.5", row === 1 ? "w-3/5" : "w-4/5")} />
          </div>
        ))}
      </div>
    );
  }

  if (error) {
    return (
      <div aria-label={ariaLabel} role="tree" className="p-3">
        <div
          role="treeitem"
          aria-level={1}
          className="flex min-h-9 items-center justify-between gap-3 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm"
        >
          <div className="flex min-w-0 items-center gap-2">
            <Badge variant="ghost"
              className={cn(
                "px-2.5",
                statusBadge.error ?? statusBadgeDefault,
              )}
            >
              error
            </Badge>
            <span className="min-w-0 text-destructive">{describeError(new Error(error.message)).body}</span>
          </div>
          {error.retry && (
            <Button type="button" size="xs" variant="outline" onClick={error.retry}>
              Retry
            </Button>
          )}
        </div>
      </div>
    );
  }

  if (visibleNodes.length === 0) {
    return (
      <div aria-label={ariaLabel} role="tree" className="p-3">
        <div className="rounded-md border border-dashed border-border px-4 py-8 text-center">
          <div className="text-sm font-medium">{empty?.title ?? "No files"}</div>
          <div className="mt-1 text-xs text-muted-foreground">
            {empty?.description ?? "Files will appear here when they are available."}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div aria-label={ariaLabel} role="tree">
      {visibleNodes.map(({ node, depth }, index) => {
        const expanded = node.kind === "dir" && expandedDirs.has(node.path);
        const customCheck = getCheckboxState?.(node);
        const hasCheckbox = showCheckboxes && customCheck !== null;
        const { allChecked, someChecked } = customCheck === undefined || customCheck === null
          ? checkboxState(node, effectiveCheckedFiles)
          : { allChecked: customCheck === 'checked', someChecked: customCheck === 'mixed' };
        const badge = fileBadges?.[node.path];
        const tone = fileTones?.[node.path] ?? "default";
        const extraClassName = node.kind === "file" ? fileRowClassName?.(node, allChecked) : undefined;
        const FileIcon = node.kind === "file" ? fileIcon(node.name) : null;
        const isSelected = node.kind === "file" && node.path === selectedFile;

        return (
          <div
            key={node.path}
            ref={(element) => {
              if (element) rowRefs.current.set(node.path, element);
              else rowRefs.current.delete(node.path);
            }}
            role="treeitem"
            aria-level={depth + 1}
            aria-expanded={node.kind === "dir" ? expanded : undefined}
            aria-selected={node.kind === "file" ? isSelected : undefined}
            aria-checked={hasCheckbox ? (someChecked ? "mixed" : allChecked) : undefined}
            aria-disabled={disabled || undefined}
            tabIndex={tabStop === node.path ? 0 : -1}
            className={cn(
              layout === "explorer"
                ? "group flex w-full items-center gap-2 pr-3 text-left text-sm text-muted-foreground hover:bg-accent/30 cursor-pointer"
                : node.kind === "dir"
                ? showCheckboxes
                  ? "group grid w-full grid-cols-(--gtc-2) items-center gap-x-1 pr-3 text-left text-sm text-muted-foreground hover:bg-accent/30 hover:text-foreground"
                  : "group grid w-full grid-cols-(--gtc-3) items-center gap-x-1 pr-3 text-left text-sm text-muted-foreground hover:bg-accent/30 hover:text-foreground max-[480px]:grid-cols-(--gtc-4)"
                : "group flex w-full items-center gap-1 pr-3 text-left text-sm text-muted-foreground hover:bg-accent/30 hover:text-foreground cursor-pointer",
              layout === "explorer" ? "h-8" : TREE_ROW_HEIGHT_CLASS,
              layout === "explorer" && "file-tree-row-explorer",
              isSelected && "text-foreground bg-accent/20",
              fileTreeToneClass[tone],
              extraClassName,
              disabled && "opacity-50",
              "file-tree-row",
              "outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset",
            )}
            style={{ "--file-tree-depth": depth } as CSSProperties}
            onFocus={() => setFocusedPath(node.path)}
            onClick={() => toggleNode(node)}
            onKeyDown={(event) => handleRowKeyDown(event, index, node)}
            data-file-tree-path={node.path}
          >
            {layout === "explorer" && (node.kind === "dir" ? (
              <button type="button" disabled={disabled} className="flex size-4 shrink-0 items-center justify-center rounded-sm hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
                onClick={event => { event.stopPropagation(); onToggleDir(node.path); }}
                aria-label={expanded ? `Collapse ${node.name}` : `Expand ${node.name}`}>
                {expanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
              </button>
            ) : <span className="size-4 shrink-0" aria-hidden="true" />)}
            {hasCheckbox ? (
              <label className={cn("flex items-center", layout === "explorer" ? "size-4 shrink-0 justify-center" : "pl-2")} onClick={(event) => event.stopPropagation()}>
                <input
                  type="checkbox"
                  aria-label={checkboxLabel?.(node) ?? `Select ${node.path}`}
                  disabled={disabled}
                  checked={allChecked}
                  ref={(element) => {
                    if (element) element.indeterminate = someChecked;
                  }}
                  onChange={() => onToggleCheck?.(node.path, node.kind)}
                  className={layout === "explorer" ? "size-3.5 shrink-0 accent-foreground" : "mr-2 accent-foreground"}
                />
              </label>
            ) : showCheckboxes && layout === "explorer" ? <span className="size-4 shrink-0" aria-hidden="true" /> : null}
            <span className="flex min-w-0 flex-1 items-center gap-2 py-1 text-left">
              <span className="flex h-4 w-4 shrink-0 items-center justify-center">
                {node.kind === "dir" ? (
                  expanded ? (
                    <FolderOpen className="h-3.5 w-3.5" />
                  ) : (
                    <Folder className="h-3.5 w-3.5" />
                  )
                ) : FileIcon ? (
                  <FileIcon className="h-3.5 w-3.5" />
                ) : null}
              </span>
              <span className={cn("min-w-0", layout === "explorer" && "flex-1", wrapLabels ? "break-all leading-4" : "truncate")}>
                {renderLabel ? renderLabel(node) : node.name}
              </span>
            </span>
            {badge && (
              <Badge variant="ghost"
                className={cn(
                  "ml-3 text-(length:--text-nano) uppercase tracking-wide",
                  statusBadge[badge.status] ?? statusBadgeDefault,
                )}
                title={badge.tooltip}
              >
                {badge.label}
              </Badge>
            )}
            {renderNodeExtra?.(node)}
            {node.kind === "file" && renderFileExtra?.(node, allChecked)}
            {node.kind === "dir" && layout === "default" && (
              <button
                type="button"
                disabled={disabled}
                className="flex h-9 w-9 items-center justify-center self-center rounded-sm text-muted-foreground opacity-70 transition-(--tp-background-color-color-opacity) hover:bg-accent hover:text-foreground group-hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50 max-[480px]:hidden"
                onClick={(event) => {
                  event.stopPropagation();
                  onToggleDir(node.path);
                }}
                aria-label={expanded ? `Collapse ${node.name}` : `Expand ${node.name}`}
              >
                {expanded ? (
                  <ChevronDown className="h-3.5 w-3.5" />
                ) : (
                  <ChevronRight className="h-3.5 w-3.5" />
                )}
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}