Real-time file tree & multi-file preview panel for non-developer workflows

Summary

The current preview panel is a single-page iframe. For non-developer users who use Claude Code as a productivity tool (creating HTML docs, marketing collateral, decks, multi-file projects), this is the biggest UX bottleneck.

We need an IDE-like persistent file tree + live multi-file preview pane — but with one critical philosophy difference from a developer IDE:

We don't want to see code. We want to see the rendered final output of every file, in real time, and edit while looking at the result.

My use case

I run a yoga/pilates studio and a stretching center. I am NOT a developer. I use Claude Code to:

• Generate Instagram carousel HTMLs (8–12 files per campaign)
• Build promotional landing pages
• Maintain Korean-language planning docs in Markdown
• Convert HTMLs to PNGs for printed POPs
• Manage Google Forms / Apps Script for events

A single campaign easily produces 15–30 files. Right now I can only see ONE of them at a time in the preview panel, and I have to ask Claude to navigate between them. That's a massive context-switching tax.

What I want — "rendered output everywhere"

A non-developer doesn't want syntax highlighting. They want the finished thing.

1. Persistent file tree on the side, scoped to the project working directory
2. Click any file → see the rendered RESULT, not the source:

• HTML → rendered web page
• Markdown → rendered formatted document (not the raw ## headers)
• Apps Script (.gs) → "this script creates a Google Form titled X with these 5 questions" (a generated summary card, not the JS)
• Python / JS scripts → "what this script does and what it produces" — ideally an auto-generated preview of the output
• JSON / YAML config → human-readable interpretation, not the raw braces
• Images → image viewer
• PDF → embedded viewer
• Spreadsheets → rendered table

1. Auto-refresh on edit (already works for HTML, extend to ALL renderable file types)
2. Multi-tab or split view — keep deck.html and the planning .md open side by side
3. Tree should show ALL files Claude has touched in the session

Why this framing matters

A developer-style IDE shows code and treats rendering as secondary. For non-developer Claude Code users, rendering IS the work — code is implementation detail they shouldn't have to look at.

Claude already abstracts the writing of code from us. The preview should abstract the reading of it too. We should be able to see, point at, and ask for changes — entirely in the rendered output layer.

Why this matters at scale

Claude Code is increasingly used by non-developers — designers, marketers, small business owners, ops people. We don't have IDEs open. The preview panel IS our IDE. Right now it's a one-page browser tab, which makes complex multi-file work painful.

This single change would dramatically increase productivity for the non-developer segment. Treat the preview panel as a rendered-output dashboard, not a code viewer.

Comparison

• Cursor / VS Code → has file tree, but built for code-first workflows
• Notion → has page tree with live rendering, but can't run scripts or render local HTML
• Claude Code preview → renders local HTML, but only one file at a time and only HTML

The gap in the middle — a tree of rendered outputs across mixed file types — is a huge opportunity.