Add virtualized flat-list TreeView component and preview sandbox

[Copilot]

This PR introduces a new frontend TreeView widget intended for VSCode-style explorer use cases, without backend wiring yet. It provides a reusable, backend-agnostic API with virtualization, flat visible-row projection, and preview coverage under frontend/preview.

• What this adds

  • New TreeView component in frontend/app/treeview/treeview.tsx designed around:
    • flat visibleRows projection with depth (not recursive render)
    • TanStack Virtual row virtualization
    • responsive width constraints + horizontal/vertical scrolling
    • single-selection, expand/collapse, and basic keyboard navigation
  • New preview: frontend/preview/previews/treeview.preview.tsx with async mocked directory loading and width controls.
  • Focused tests: frontend/app/treeview/treeview.test.ts for projection/sorting/synthetic-row behavior.

• Tree model + projection behavior

  • Defines a canonical TreeNodeData wrapper (separate from direct FileInfo coupling) with:
    • id, parentId, isDirectory, mimeType, flags, childrenStatus, childrenIds, capInfo
  • Builds visibleRows from nodesById + expandedIds and injects synthetic rows for:
    • loading
    • error
    • capped (“Showing first N entries”)

• Interaction model implemented

  • Click: select row
  • Double-click directory (or chevron click): expand/collapse
  • Double-click file: emits onOpenFile
  • Keyboard:
    • Up/Down: move visible selection
    • Left: collapse selected dir or move to parent
    • Right: expand selected dir or move to first child

• Sorting + icon strategy

  • Child sorting is deterministic and stable:
    • directories first
    • case-insensitive label order
    • id/path tie-breaker
  • Icon resolution supports directory/file/error states and simple mimetype/extension fallbacks.

• Example usage

<TreeView
    rootIds={["workspace:/"]}
    initialNodes={{ "workspace:/": { id: "workspace:/", isDirectory: true, childrenStatus: "unloaded" } }}
    fetchDir={async (id, limit) => ({ nodes: data[id].slice(0, limit), capped: data[id].length > limit })}
    maxDirEntries={120}
    minWidth={100}
    maxWidth={400}
    height={420}
    onSelectionChange={(id) => setSelection(id)}
/>

• • https://github.com/user-attachments/assets/6f8b8a2a-f9a1-454d-bf4f-1d4a97b6e123

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[cloudflare-workers-and-pages]

Deploying waveterm with    Cloudflare Pages

Latest commit:	874b1a0
Status:	✅  Deploy successful!
Preview URL:	https://3c9f9206.waveterm.pages.dev
Branch Preview URL:	https://copilot-add-virtual-file-exp.waveterm.pages.dev

View logs

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (4 files)

• frontend/app/treeview/treeview.tsx - Well-structured TreeView component with proper error handling and defensive programming
• frontend/app/treeview/treeview.test.ts - Good test coverage for sorting and synthetic row rendering
• frontend/preview/previews/treeview.preview.tsx - Comprehensive preview with async loading simulation
• package.json / package-lock.json - Added @tanstack/react-virtual dependency

---

Review Notes

The TreeView implementation is solid with:

• ✅ Proper null/undefined checks throughout
• ✅ Defensive programming (e.g., line 441 filters null nodes before rendering)
• ✅ Good error handling in async operations
• ✅ Comprehensive keyboard navigation
• ✅ Virtualization for performance
• ✅ Test coverage for core functionality

The code follows the project's conventions and handles edge cases appropriately.