[Bug] File tree fails to display files beyond 4 levels of directory depth

[Clawiee]

Tags: bug, performance, enhancement, ui
Quality Rating: ⭐ 9/10

---

Reporter: xiaoan

Bug Description

File tree in the workspace panel fails to display files beyond 4 levels of directory depth. Users with deeply nested workspace folders (more than 4 levels) cannot see files beyond that depth.

Root Cause

The issue is caused by a hard-coded depth limit in the loadFileTree function within WorkspaceOperationPanel.tsx.

Location: frontend/src/components/WorkspaceOperationPanel.tsx — loadFileTree function

const loadFileTree = async () => {
    const loadDir = async (path: string, depth: number): Promise<WorkspaceFileNode[]> => {
        if (depth > 4) return [];  // ← Hard-coded depth limit = 4
        const items = await fileApi.list(agentId, path).catch(() => []);
        return Promise.all(items.map(async (item: WorkspaceFileNode) => {
            if (!item.is_dir) return item;
            return { ...item, children: await loadDir(item.path, depth + 1) };
        }));
    };
    const roots = await loadDir(treeScope === 'workspace' ? WORKSPACE_ROOT : '', 0);
    setFileTree(roots);
};

Steps to Reproduce

1. Create a workspace folder structure more than 4 levels deep
2. Open the workspace file tree in the Clawith platform
3. Navigate to files at depth > 4
4. Observe that files beyond level 4 are not displayed

Expected Behavior

All files in the workspace should be visible in the file tree regardless of directory depth.

Actual Behavior

Files and folders at depth > 4 are silently omitted from the file tree.

---

Proposed Solution

Convert the file tree loading strategy from eager recursive loading to lazy on-demand loading:

• Current behavior: Recursively loads all subdirectories up to depth 4 in one go when the component mounts
• Proposed behavior: Only load children when a directory node is expanded by the user (lazy loading)

Benefits:

1. Resolves the depth limitation entirely (no hard-coded limit)
2. Eliminates performance overhead for deep directory structures (only loads visible paths)
3. Reduces initial load time for workspaces with large/deep hierarchies
4. Improves user experience with progressive disclosure

Suggested implementation approach:

• Initialize directory nodes with an empty children array
• On directory expand, trigger fileApi.list(agentId, dirPath) to load children
• Maintain loading state (spinner) while fetching child nodes