Shared file type icons

Design for file browsing in the desktop and web interfaces. Status: Pierre icon migration passes code verification and default App dark-theme visual acceptance.

Verified implementation

The sidebar and central Files page share FileTree. The shared FileTypeIcon resolves filenames through Pierre complete mappings across all listed surfaces. Existing folder expansion, hierarchy guides, searching, opening and mutation behavior remain outside this change.

Reference comparison

Source	Evidence and decision
Installed Codex	The actual file-tree asset matches Pierre Trees built-in SVGs exactly for default files, Markdown and Python. Adopt the public upstream complete icon set, filename mapping and palette; do not extract assets from the Codex distribution.
React Symbols	MIT React SVG library, with file and extension resolution. Previously selected; replaced by Pierre to match the verified reference.
Material Icon Theme	File and folder SVG assets with a manifest; viable alternative, but requires asset integration instead of direct React rendering.
Existing Lucide	Retain for controls and folders. Generic outlines alone do not distinguish language types.

Adopted source

Use the public icon resolver and sprite exports from Pierre Trees with its Apache 2.0 license and NOTICE. Preserve upstream SVG paths and filename mapping, using the complete colored set. The file tree uses the official React renderer from the same installed package; file tabs and related surfaces share its public icon exports. Existing Lucide folder and navigation icons stay unchanged.

Presentation contract

Use 16px icons in file rows and 14px icons in tabs. Preserve row height, indentation and folder controls. Recognizable colors remain visible in light and dark themes. Unknown files use a neutral document icon. Exact filename matching precedes extensions; normalize path separators and case before matching. AGENTS.md uses Markdown; CLAUDE.md uses Claude. Git metadata uses Git. Dotted parent directories do not affect matching.

Data flow and boundaries

Existing filename or path → basename normalization → shared FileTypeIcon → SVG. No file content reads, network lookups, new state, persistence, permissions or mutation APIs are introduced. Filenames and extensions that match inherited object properties use the default icon before entering the library resolver. The renderer is decorative and hidden from accessibility APIs; existing labels and focus behavior stay authoritative. No changes to attachment upload states, file cache, unsaved drafts or review state.

Acceptance

Python, TypeScript, shell, JSON, Markdown and Git examples resolve to distinct expected SVGs.
CLAUDE.md, AGENTS.md, uppercase extensions, Windows paths and unknown types render correctly.
Sidebar and central Files, file tabs, split picker, review list and file suggestions use the shared renderer.
Default installed App at port 18100 displays the icons; expanding a folder and opening a file preserves behavior. The default App theme shows readable filenames and icons; manual verification of additional themes is recorded separately.

Implementation status

Pierre migration passes independent specification and quality review, public component tests, full Web checks, TypeScript, production build, documentation links and repository contracts. Default App dark-theme acceptance confirms filled generic files, green Markdown, orange JSON, purple database icons and unchanged Lucide folders in the real sidebar tree. Light-theme colors are checked against the upstream palette; separate manual light-theme App acceptance is not recorded.