Improve breadcrumb readability for external matter pages

[tbrandenburg]

Motivation

• Breadcrumbs showed URL-encoded external file paths (e.g. External ~%2F.config%2Fopencode%2FAGENTS.md) which is hard to read and not user-friendly.
• The UI should present concise, human-friendly labels for external matter routes so users can quickly identify linked files.

Description

• Decode URL-encoded route segments using decodeURIComponent with a safe fallback in decodePathSegment and apply title-casing with toTitleCase in formatBreadcrumb.
• Special-case segments prefixed with external- and render them as External <file stem> by adding extractReadableExternalName which derives a readable file stem from the encoded path.
• Replace the previous generic segment.replace(/-/g, " ") logic with the new decoding and external-matter handling in formatBreadcrumb.
• Add a focused unit test packages/frontend/src/components/TopBar.test.tsx that verifies the external-file breadcrumb and a normal route segment case.

Testing

• Ran the frontend unit test with npm test -- --run src/components/TopBar.test.tsx from packages/frontend, which completed successfully with Test Files 1 passed and Tests 2 passed.
• The changes are covered by the new unit test formatBreadcrumb which asserts the external-matter and normal segment formatting behavior.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
made	Ready	Preview, Comment	Mar 30, 2026 10:57am