File Explorer
Reads a repository like a code editor does. Folders come from the paths, files open in tabs with syntax colors, and one search box finds file names and the lines that mention a word.
import { defineTool } from "@tulipfarm/agents";
import { z } from "zod";
/** Reads the latest sensor values for one bed. */
export const readBed = defineTool({
name: "read_bed",
description: "Latest soil moisture, temperature, and light for a bed.",
input: z.object({ bed: z.string().regex(/^[A-H]\d{1,2}$/) }),
async run({ bed }, { sensors }) {
const reading = await sensors.latest(bed);
if (!reading) return { status: "missing", bed } as const;
return {
status: "ok",
bed,
moisture: Math.round(reading.moisture * 100),
celsius: reading.celsius,
lux: reading.lux,
} as const;
},
});
export const tools = [readBed];
Usage
import { FileExplorer } from "@tulipfarm/sprout/file-explorer";
<div className="h-[36rem]">
<FileExplorer
label="Soul"
files={[
{ path: "SOUL.md", content: soulMd },
{ path: "agents/scout/tools.ts", content: toolsTs },
{ path: "assets/map.png", unavailable: "Images cannot be displayed here." },
]}
defaultPath="SOUL.md"
/>
</div>Pass a flat list of files. Each path uses / between folders. A file has content, or unavailable with the reason it has no text. The explorer fills its parent, so give the parent a height.
Search
Search ignores case. It lists matching file names, then every matching line grouped by file, with the line number. Pick a line to open the file there. The line is marked and every match in the file is highlighted. Search stops after 500 lines.
Accessibility
The tree is a tree with one tab stop. Up and Down move, Right opens a folder, Left closes it or goes to the parent, Home and End jump, and Enter opens a file. The search summary is a status message. Each open tab has a Close button named after the file; middle-click also closes a tab. The file text is a focusable region named after its path.