Convert file_list to output string format for token savings

- Return formatted tree string in 'output' field instead of recursive JSON 'entries'
- Saves ~50% tokens for typical listings
- Format function handles tree characters (├─, └─, │) and file sizes
- Updated UI to display pre-formatted output string
- Updated all tests to validate string output instead of structured data

Author: ammar-agent

src/components/tools/FileListToolCall.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "@emotion/styled";
 import type { FileListToolArgs, FileListToolResult, FileEntry } from "@/types/tools";
-import { formatSize } from "@/services/tools/fileCommon";
 import {
   ToolContainer,
   ToolHeader,
@@ -52,42 +51,17 @@ const ErrorHint = styled.div`
   font-style: italic;
 `;
 
-const TreeContainer = styled.div`
-  margin-top: 8px;
+const OutputBlock = styled.pre`
+  margin: 0;
+  padding: 8px 12px;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
-  padding: 12px;
+  font-size: 11px;
+  line-height: 1.6;
+  white-space: pre;
   overflow-x: auto;
   font-family: var(--font-monospace);
-  line-height: 1.6;
-`;
-
-const Entry = styled.div`
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  font-size: 11px;
-`;
-
-const Prefix = styled.span`
-  color: var(--color-text-secondary);
-  user-select: none;
-`;
-
-const Icon = styled.span`
-  margin-right: 6px;
-  user-select: none;
-`;
-
-const Name = styled.span`
   color: var(--color-text);
-  font-weight: 500;
-`;
-
-const Size = styled.span`
-  color: var(--color-text-secondary);
-  margin-left: 8px;
-  font-size: 10px;
 `;
 
 const EmptyMessage = styled.div`
@@ -103,41 +77,6 @@ interface FileListToolCallProps {
   status: "pending" | "streaming" | "complete" | "error";
 }
 
-/**
- * Recursively render a file tree with indentation
- */
-function renderFileTree(entries: FileEntry[], depth: number = 0): JSX.Element[] {
-  const elements: JSX.Element[] = [];
-
-  entries.forEach((entry, index) => {
-    const isLast = index === entries.length - 1;
-    const prefix = depth === 0 ? "" : "│  ".repeat(depth - 1) + (isLast ? "└─ " : "├─ ");
-
-    const icon = entry.type === "directory" ? "📁" : entry.type === "file" ? "📄" : "🔗";
-    const suffix = entry.type === "directory" ? "/" : "";
-    const sizeInfo = entry.size !== undefined ? ` (${formatSize(entry.size)})` : "";
-
-    elements.push(
-      <Entry key={`${depth}-${index}-${entry.name}`}>
-        <Prefix>{prefix}</Prefix>
-        <Icon>{icon}</Icon>
-        <Name>
-          {entry.name}
-          {suffix}
-        </Name>
-        {sizeInfo && <Size>{sizeInfo}</Size>}
-      </Entry>
-    );
-
-    // Recursively render children if present
-    if (entry.children && entry.children.length > 0) {
-      elements.push(...renderFileTree(entry.children, depth + 1));
-    }
-  });
-
-  return elements;
-}
-
 export const FileListToolCall: React.FC<FileListToolCallProps> = ({ args, result, status }) => {
   const { expanded, toggleExpanded } = useToolExpansion(false);
   const isError = status === "error" || (result && !result.success);
@@ -206,13 +145,11 @@ export const FileListToolCall: React.FC<FileListToolCallProps> = ({ args, result
           {isComplete && result && result.success && (
             <DetailSection>
               <DetailLabel>Contents ({result.total_count} entries)</DetailLabel>
-              <TreeContainer>
-                {result.entries.length === 0 ? (
-                  <EmptyMessage>Empty directory</EmptyMessage>
-                ) : (
-                  <>{renderFileTree(result.entries)}</>
-                )}
-              </TreeContainer>
+              {result.output === "(empty directory)" ? (
+                <EmptyMessage>Empty directory</EmptyMessage>
+              ) : (
+                <OutputBlock>{result.output}</OutputBlock>
+              )}
             </DetailSection>
           )}
         </ToolDetails>

src/services/tools/file_list.test.ts

@@ -35,16 +35,16 @@ describe("file_list tool", () => {
       )) as Extract<FileListToolResult, { success: true }>;
 
       expect(result.success).toBe(true);
-      expect(result.entries.length).toBe(3);
       expect(result.total_count).toBe(3);
       expect(result.depth_used).toBe(1);
 
-      // Check sorting: directories first
-      expect(result.entries[0].name).toBe("subdir");
-      expect(result.entries[0].type).toBe("directory");
-      expect(result.entries[1].name).toBe("file1.txt");
-      expect(result.entries[1].type).toBe("file");
-      expect(result.entries[2].name).toBe("file2.txt");
+      // Check output contains expected entries
+      expect(result.output).toContain("subdir/");
+      expect(result.output).toContain("file1.txt");
+      expect(result.output).toContain("file2.txt");
+      
+      // Check sorting: directories first (subdir appears before files in output)
+      expect(result.output.indexOf("subdir/")).toBeLessThan(result.output.indexOf("file1.txt"));
     });
 
     test("lists files recursively (depth 2)", async () => {
@@ -65,11 +65,13 @@ describe("file_list tool", () => {
       expect(result.total_count).toBe(3); // dir1, dir1/file1.txt, root.txt
       expect(result.depth_used).toBe(2);
 
-      const dir1 = result.entries.find((e) => e.name === "dir1");
-      expect(dir1).toBeDefined();
-      expect(dir1!.children).toBeDefined();
-      expect(dir1!.children!.length).toBe(1);
-      expect(dir1!.children![0].name).toBe("file1.txt");
+      // Check output shows nested structure
+      expect(result.output).toContain("dir1/");
+      expect(result.output).toContain("file1.txt");
+      expect(result.output).toContain("root.txt");
+      
+      // Check indentation shows nesting (file1.txt should be indented under dir1)
+      expect(result.output).toMatch(/dir1\/\s*\n.*file1\.txt/);
     });
 
     test("shows file sizes", async () => {
@@ -84,7 +86,8 @@ describe("file_list tool", () => {
       )) as Extract<FileListToolResult, { success: true }>;
 
       expect(result.success).toBe(true);
-      expect(result.entries[0].size).toBe(100);
+      // Check output includes file size
+      expect(result.output).toMatch(/file\.txt.*\(100B\)/);
     });
 
     test("empty directory", async () => {
@@ -96,8 +99,8 @@ describe("file_list tool", () => {
       )) as Extract<FileListToolResult, { success: true }>;
 
       expect(result.success).toBe(true);
-      expect(result.entries.length).toBe(0);
       expect(result.total_count).toBe(0);
+      expect(result.output).toBe("(empty directory)");
     });
   });
 
@@ -116,8 +119,10 @@ describe("file_list tool", () => {
       )) as Extract<FileListToolResult, { success: true }>;
 
       expect(result.success).toBe(true);
-      expect(result.entries.length).toBe(2);
-      expect(result.entries.every((e) => e.name.endsWith(".ts"))).toBe(true);
+      expect(result.total_count).toBe(2);
+      expect(result.output).toContain("file1.ts");
+      expect(result.output).toContain("file3.ts");
+      expect(result.output).not.toContain("file2.js");
     });
 
     test("prunes empty directories when using pattern", async () => {
@@ -138,8 +143,10 @@ describe("file_list tool", () => {
 
       expect(result.success).toBe(true);
       // Should only include hasTs directory (not noTs)
-      expect(result.entries.length).toBe(1);
-      expect(result.entries[0].name).toBe("hasTs");
+      expect(result.total_count).toBe(2); // hasTs dir + file.ts inside
+      expect(result.output).toContain("hasTs/");
+      expect(result.output).toContain("file.ts");
+      expect(result.output).not.toContain("noTs");
     });
   });
 
@@ -163,10 +170,10 @@ describe("file_list tool", () => {
 
       expect(result.success).toBe(true);
       // Should include .gitignore and included.txt, but not ignored.txt or node_modules
-      expect(result.entries.some((e) => e.name === ".gitignore")).toBe(true);
-      expect(result.entries.some((e) => e.name === "included.txt")).toBe(true);
-      expect(result.entries.some((e) => e.name === "ignored.txt")).toBe(false);
-      expect(result.entries.some((e) => e.name === "node_modules")).toBe(false);
+      expect(result.output).toContain(".gitignore");
+      expect(result.output).toContain("included.txt");
+      expect(result.output).not.toContain("ignored.txt");
+      expect(result.output).not.toContain("node_modules");
     });
 
     test("shows all files when gitignore=false", async () => {
@@ -183,7 +190,7 @@ describe("file_list tool", () => {
       )) as Extract<FileListToolResult, { success: true }>;
 
       expect(result.success).toBe(true);
-      expect(result.entries.some((e) => e.name === "ignored.txt")).toBe(true);
+      expect(result.output).toContain("ignored.txt");
     });
 
     test("always hides .git directory", async () => {
@@ -200,7 +207,7 @@ describe("file_list tool", () => {
       )) as Extract<FileListToolResult, { success: true }>;
 
       expect(result.success).toBe(true);
-      expect(result.entries.some((e) => e.name === ".git")).toBe(false);
+      expect(result.output).not.toContain(".git");
     });
 
     test("shows hidden files (dotfiles)", async () => {
@@ -216,8 +223,8 @@ describe("file_list tool", () => {
       )) as Extract<FileListToolResult, { success: true }>;
 
       expect(result.success).toBe(true);
-      expect(result.entries.some((e) => e.name === ".env")).toBe(true);
-      expect(result.entries.some((e) => e.name === ".gitignore")).toBe(true);
+      expect(result.output).toContain(".env");
+      expect(result.output).toContain(".gitignore");
     });
   });
 
@@ -352,9 +359,10 @@ describe("file_list tool", () => {
       )) as Extract<FileListToolResult, { success: true }>;
 
       expect(result.success).toBe(true);
-      const dir = result.entries.find((e) => e.name === "dir1");
-      expect(dir).toBeDefined();
-      expect(dir!.children).toBeUndefined(); // No children at depth 1
+      expect(result.output).toContain("dir1/");
+      expect(result.output).toContain("root.txt");
+      // At depth 1, nested.txt should NOT appear (not traversed)
+      expect(result.output).not.toContain("nested.txt");
     });
   });
 });

src/services/tools/file_list.ts

@@ -24,6 +24,43 @@ interface TraversalResult {
   exceeded: boolean;
 }
 
+/**
+ * Format a file tree as a string with tree characters (├─, └─, │)
+ * Recursively formats the tree structure for display to LLM
+ */
+function formatTreeAsString(entries: FileEntry[], indent = "", isLast: boolean[] = []): string {
+  const lines: string[] = [];
+
+  entries.forEach((entry, i) => {
+    const isLastEntry = i === entries.length - 1;
+    const prefix = isLast.length > 0 ? indent + (isLastEntry ? "└─ " : "├─ ") : "";
+
+    const suffix = entry.type === "directory" ? "/" : "";
+    const sizeInfo = entry.size !== undefined ? ` (${formatSize(entry.size)})` : "";
+
+    lines.push(`${prefix}${entry.name}${suffix}${sizeInfo}`);
+
+    // Recursively render children if present
+    if (entry.children && entry.children.length > 0) {
+      const newIndent = indent + (isLastEntry ? "   " : "│  ");
+      lines.push(
+        ...formatTreeAsString(entry.children, newIndent, [...isLast, isLastEntry]).split("\n")
+      );
+    }
+  });
+
+  return lines.join("\n");
+}
+
+/**
+ * Format a file size in bytes to a human-readable string
+ */
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+
 /**
  * Load and parse .gitignore file if it exists
  */
@@ -267,10 +304,14 @@ export function createFileListTool(config: { cwd: string }) {
         };
       }
 
+      // Format tree as string for LLM (token efficient)
+      const output =
+        result.entries.length === 0 ? "(empty directory)" : formatTreeAsString(result.entries);
+
       return {
         success: true,
         path: resolvedPath,
-        entries: result.entries,
+        output: output,
         total_count: result.totalCount,
         depth_used: effectiveDepth,
       };

src/types/tools.ts

@@ -176,7 +176,7 @@ export type FileListToolResult =
   | {
       success: true;
       path: string; // Resolved absolute path that was listed
-      entries: FileEntry[]; // Top-level entries (recursive structure)
+      output: string; // Formatted tree structure as string
       total_count: number; // Total entries across all levels
       depth_used: number; // Maximum depth traversed
     }