File tree
Collapsible project tree with status badges for files the agent has touched.
Included in the single kansho full pack. Components are not offered as separate installs.
Standard tree with badges
Compact density with conflict badges
Component documentation
File Tree
components/sandbox/file-tree.tsxPurpose
Displays a hierarchical file and folder tree with selection, expansion, badges, and hints.
Appropriate use
Use for navigating a supplied workspace tree when the host owns the selected file.
Example
components/sandbox/file-tree.tsx has a representative live example in the "Standard tree with badges" section on /components/file-tree.
States
Nodes are file or folder; badges are modified, added, removed, conflict, or ignored; folders have local open state, while file rows become selectable buttons only when onSelect is supplied.
API and props
FileTree accepts nodes, selectedId, onSelect, density, className, and toolbar; FileNode supplies id, name, kind, children, language, badge, defaultOpen, and hint.
Dependencies
Direct imports are React, Lucide icons, and cn.
Accessibility
Uses tree, treeitem, and group semantics with level, selected/current, and expanded state; folders are disclosure buttons, file rows with onSelect are buttons, and callback-less files remain read-only tree items.
Limitations
It does not load directories, persist expansion, support multi-select, rename files, or infer hierarchy from paths.
Source
Source: components/sandbox/file-tree.tsx.
Full pack
components/sandbox/file-tree.tsx is documented at /components/file-tree and installs only through the single Kansho full pack; no individual component install is offered.