Function FileTreeView

webui/frontend/src/components/ConversationView.tsx:2072–2167

({
  tree, path, expandedFolders, toggleFolder, selectedFile, onSelectFile, depth = 0
})

}

const FileTreeView: React.FC<FileTreeViewProps> = ({
  tree, path, expandedFolders, toggleFolder, selectedFile, onSelectFile, depth = 0
}) => {
  const theme = useTheme();
  const stripProgrammerPrefix = (name: string) => {
    if (!name.startsWith('programmer-')) return name;
    const stripped = name.slice('programmer-'.length);
    return stripped.length > 0 ? stripped : name;
  };
  const hasContent = Object.keys(tree.folders).length > 0 || tree.files.length > 0;

  if (!hasContent && depth === 0) {
    return (
      <Box sx={{ p: 3, textAlign: 'center' }}>
        <Typography color="text.secondary">No files yet</Typography>
      </Box>
    );
  }

  return (
    <>
      {/* Folders */}
      {Object.entries(tree.folders).map(([folderName, subtree]) => {
        const folderPath = path ? `${path}/${folderName}` : folderName;
        const isExpanded = expandedFolders.has(folderPath);

        return (
          <Box key={folderPath}>
            <Box
              onClick={() => toggleFolder(folderPath)}
              sx={{
                py: 0.5,
                pl: depth * 2 + 1,
                pr: 1,
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                gap: 0.5,
                '&:hover': { backgroundColor: alpha(theme.palette.primary.main, 0.05) },
              }}
            >
              {isExpanded ? (
                <ExpandMoreIcon sx={{ fontSize: 18, color: 'text.secondary' }} />
              ) : (
                <ChevronRightIcon sx={{ fontSize: 18, color: 'text.secondary' }} />
              )}
              {isExpanded ? (
                <FolderOpenIcon sx={{ fontSize: 18 }} color="warning" />
              ) : (
                <FolderIcon sx={{ fontSize: 18 }} color="warning" />
              )}
              <Typography variant="body2" sx={{ fontSize: '0.85rem' }}>
                {folderName}
              </Typography>
            </Box>
            {isExpanded && (
              <FileTreeView
                tree={subtree as TreeNode}