---
title: "Deliverables Folder Browser"
section: "04-core-features"
extraction_round: 2
source_files:
  - src/x_ipe/static/js/features/folder-browser-modal.js
---

# Deliverables Folder Browser

## Overview

The Deliverables Folder Browser is a two-panel modal for navigating and previewing files generated by workflow actions. It opens when you click a folder in the deliverables section.

## How to Access

1. Expand a workflow card → scroll to **Deliverables** section
2. Click on any **📁 folder** entry (e.g., "📁 FEATURE-050-A/")
3. The Folder Browser modal opens

## Two-Panel Layout

### Left Panel — File Tree
- **Breadcrumb navigation** at top for quick directory traversal
- **Expandable folder tree** showing directory structure
- Click folder → expand/collapse
- Click file → select for preview in right panel
- **Search box** at top filters files by name (debounced input)

### Right Panel — File Preview
Files are previewed based on their type:

| File Type | Preview |
|-----------|---------|
| Images (`.png`, `.jpg`, `.svg`) | Displayed as `<img>` with responsive sizing |
| Code files (`.md`, `.js`, `.py`) | Rendered with syntax highlighting |
| Large files (>1MB text) | Truncation warning shown |
| Binary files | File icon + "Cannot preview" message |

- **Download button** available for all files to save locally

## Navigation

| Action | Result |
|--------|--------|
| Click file | Preview in right panel |
| Click folder | Expand/collapse in tree |
| Click breadcrumb | Navigate back up directory |
| Search box | Filter files by name |
| **Escape** key | Close modal |
| Arrow keys | Navigate file list (keyboard a11y) |

## API

```
GET /api/workflow/{name}/folder-contents?path={folderPath}
```

Returns directory listing for the given path within the workflow's deliverables.

## Error Handling

- Load error → shows error message with **Retry** button
- On retry → re-fetches folder contents
- On close → destroys renderer, clears abort controller, removes event listeners
