feat: drill-down into sub-routes with breadcrumb navigation

Double-click a DIRECT or SEDA node to navigate into that route's
diagram. Breadcrumbs show the route stack and allow clicking back
to any level. Escape key goes back one level.

Route ID resolution handles camelCase endpoint URIs mapping to
kebab-case route IDs (e.g. direct:callGetProduct → call-get-product)
using the catalog's known route IDs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/components/ProcessDiagram/ProcessDiagram.module.css

@@ -78,6 +78,50 @@
   font-variant-numeric: tabular-nums;
 }
 
+.breadcrumbs {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: flex;
+  align-items: center;
+  padding: 4px 10px;
+  background: var(--bg-surface, #FFFFFF);
+  border: 1px solid var(--border, #E4DFD8);
+  border-radius: var(--radius-sm, 5px);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(44, 37, 32, 0.06));
+  z-index: 10;
+  font-size: 12px;
+}
+
+.breadcrumbItem {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumbSep {
+  margin: 0 6px;
+  color: var(--text-muted, #9C9184);
+}
+
+.breadcrumbLink {
+  background: none;
+  border: none;
+  color: var(--running, #1A7F8E);
+  cursor: pointer;
+  padding: 0;
+  font-size: 12px;
+  font-family: inherit;
+}
+
+.breadcrumbLink:hover {
+  text-decoration: underline;
+}
+
+.breadcrumbCurrent {
+  color: var(--text-primary, #1A1612);
+  font-weight: 600;
+}
+
 .nodeToolbar {
   position: absolute;
   display: flex;