From 159e4adf0790f6528198794c715cfe27ed2f257b Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 27 Mar 2026 19:55:07 +0100
Subject: [PATCH] chore: remove /dev/diagram test page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

No longer needed — the ProcessDiagram is now integrated into
ExchangeDetail via the ExecutionDiagram wrapper.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/DevDiagram/DevDiagram.module.css | 131 -----------------
 ui/src/pages/DevDiagram/DevDiagram.tsx        | 138 ------------------
 ui/src/router.tsx                             |   2 -
 3 files changed, 271 deletions(-)
 delete mode 100644 ui/src/pages/DevDiagram/DevDiagram.module.css
 delete mode 100644 ui/src/pages/DevDiagram/DevDiagram.tsx

diff --git a/ui/src/pages/DevDiagram/DevDiagram.module.css b/ui/src/pages/DevDiagram/DevDiagram.module.css
deleted file mode 100644
index aa1ff878..00000000
--- a/ui/src/pages/DevDiagram/DevDiagram.module.css
+++ /dev/null
@@ -1,131 +0,0 @@
-.page {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  gap: 12px;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  flex-shrink: 0;
-}
-
-.header h2 {
-  margin: 0;
-  font-size: 18px;
-  color: var(--text-primary, #1A1612);
-}
-
-.controls {
-  display: flex;
-  gap: 8px;
-}
-
-.controls select {
-  padding: 6px 10px;
-  border: 1px solid var(--border, #E4DFD8);
-  border-radius: var(--radius-sm, 5px);
-  background: var(--bg-surface, #FFFFFF);
-  color: var(--text-primary, #1A1612);
-  font-size: 13px;
-}
-
-.content {
-  display: flex;
-  gap: 12px;
-  flex: 1;
-  min-height: 0;
-}
-
-.diagramPane {
-  flex: 1;
-  min-width: 0;
-}
-
-.placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 400px;
-  border: 1px dashed var(--border, #E4DFD8);
-  border-radius: var(--radius-md, 8px);
-  color: var(--text-muted, #9C9184);
-  font-size: 14px;
-}
-
-.sidePanel {
-  width: 280px;
-  flex-shrink: 0;
-  padding: 12px;
-  border: 1px solid var(--border, #E4DFD8);
-  border-radius: var(--radius-md, 8px);
-  background: var(--bg-surface, #FFFFFF);
-  overflow-y: auto;
-}
-
-.sidePanel h3 {
-  margin: 0 0 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-secondary, #5C5347);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.nodeInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.fieldLabel {
-  font-size: 11px;
-  color: var(--text-muted, #9C9184);
-  text-transform: uppercase;
-}
-
-.field code, .field pre {
-  font-family: var(--font-mono, monospace);
-  font-size: 12px;
-  color: var(--text-primary, #1A1612);
-  background: var(--bg-inset, #F0EDE8);
-  padding: 4px 6px;
-  border-radius: 3px;
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.hint {
-  color: var(--text-muted, #9C9184);
-  font-size: 12px;
-  font-style: italic;
-  margin: 0;
-}
-
-.log {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.logEntry {
-  font-family: var(--font-mono, monospace);
-  font-size: 11px;
-  color: var(--text-secondary, #5C5347);
-  padding: 2px 0;
-  border-bottom: 1px solid var(--border-subtle, #EDE9E3);
-}
diff --git a/ui/src/pages/DevDiagram/DevDiagram.tsx b/ui/src/pages/DevDiagram/DevDiagram.tsx
deleted file mode 100644
index b0901f56..00000000
--- a/ui/src/pages/DevDiagram/DevDiagram.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useGlobalFilters } from '@cameleer/design-system';
-import { ProcessDiagram } from '../../components/ProcessDiagram';
-import type { NodeConfig, NodeAction } from '../../components/ProcessDiagram';
-import { useRouteCatalog } from '../../api/queries/catalog';
-import styles from './DevDiagram.module.css';
-
-export default function DevDiagram() {
-  const { timeRange } = useGlobalFilters();
-  const { data: catalog } = useRouteCatalog(
-    timeRange.start.toISOString(),
-    timeRange.end.toISOString(),
-  );
-
-  const [selectedApp, setSelectedApp] = useState('');
-  const [selectedRoute, setSelectedRoute] = useState('');
-  const [selectedNodeId, setSelectedNodeId] = useState('');
-  const [direction, setDirection] = useState<'LR' | 'TB'>('LR');
-  const [actionLog, setActionLog] = useState<string[]>([]);
-
-  // Extract applications and routes from catalog
-  // Catalog shape: Array<{ appId, routes: [{ routeId }] }>
-  const { apps, routes } = useMemo(() => {
-    if (!catalog) return { apps: [] as string[], routes: [] as string[] };
-    const appArr = (catalog as Array<{ appId: string; routes?: Array<{ routeId: string }> }>)
-      .map(a => a.appId)
-      .sort();
-    const filtered = selectedApp
-      ? (catalog as Array<{ appId: string; routes?: Array<{ routeId: string }> }>)
-          .filter(a => a.appId === selectedApp)
-          .flatMap(a => (a.routes || []).map(r => r.routeId))
-      : [];
-    return { apps: appArr, routes: filtered };
-  }, [catalog, selectedApp]);
-
-  // All route IDs for the selected app (for drill-down resolution)
-  const knownRouteIds = useMemo(() => {
-    if (!catalog || !selectedApp) return new Set<string>();
-    const app = (catalog as Array<{ appId: string; routes?: Array<{ routeId: string }> }>)
-      .find(a => a.appId === selectedApp);
-    return new Set((app?.routes ?? []).map(r => r.routeId));
-  }, [catalog, selectedApp]);
-
-  // Mock node configs for testing
-  const nodeConfigs = useMemo(() => {
-    const map = new Map<string, NodeConfig>();
-    // We'll add some mock configs if we have a route loaded
-    map.set('log1', { traceEnabled: true });
-    map.set('to1', { tapExpression: '${header.orderId}' });
-    return map;
-  }, []);
-
-  const handleNodeAction = (nodeId: string, action: NodeAction) => {
-    const msg = `[${new Date().toLocaleTimeString()}] ${action}: ${nodeId}`;
-    setActionLog(prev => [msg, ...prev.slice(0, 19)]);
-  };
-
-  return (
-    <div className={styles.page}>
-      <div className={styles.header}>
-        <h2>Process Diagram (Dev)</h2>
-        <div className={styles.controls}>
-          <select
-            value={selectedApp}
-            onChange={e => { setSelectedApp(e.target.value); setSelectedRoute(''); }}
-          >
-            <option value="">Select application...</option>
-            {apps.map(app => <option key={app} value={app}>{app}</option>)}
-          </select>
-          <select
-            value={selectedRoute}
-            onChange={e => setSelectedRoute(e.target.value)}
-            disabled={!selectedApp}
-          >
-            <option value="">Select route...</option>
-            {routes.map(r => <option key={r} value={r}>{r}</option>)}
-          </select>
-          <select value={direction} onChange={e => setDirection(e.target.value as 'LR' | 'TB')}>
-            <option value="LR">Left → Right</option>
-            <option value="TB">Top → Bottom</option>
-          </select>
-        </div>
-      </div>
-
-      <div className={styles.content}>
-        <div className={styles.diagramPane}>
-          {selectedApp && selectedRoute ? (
-            <ProcessDiagram
-              application={selectedApp}
-              routeId={selectedRoute}
-              direction={direction}
-              selectedNodeId={selectedNodeId}
-              onNodeSelect={setSelectedNodeId}
-              onNodeAction={handleNodeAction}
-              nodeConfigs={nodeConfigs}
-              knownRouteIds={knownRouteIds}
-            />
-          ) : (
-            <div className={styles.placeholder}>
-              Select an application and route to view the diagram
-            </div>
-          )}
-        </div>
-
-        <div className={styles.sidePanel}>
-          <h3>Selected Node</h3>
-          {selectedNodeId ? (
-            <div className={styles.nodeInfo}>
-              <div className={styles.field}>
-                <span className={styles.fieldLabel}>Node ID</span>
-                <code>{selectedNodeId}</code>
-              </div>
-              {nodeConfigs.has(selectedNodeId) && (
-                <div className={styles.field}>
-                  <span className={styles.fieldLabel}>Config</span>
-                  <pre>{JSON.stringify(nodeConfigs.get(selectedNodeId), null, 2)}</pre>
-                </div>
-              )}
-            </div>
-          ) : (
-            <p className={styles.hint}>Click a node to inspect it</p>
-          )}
-
-          <h3>Action Log</h3>
-          <div className={styles.log}>
-            {actionLog.length === 0 ? (
-              <p className={styles.hint}>Hover a node and use the toolbar</p>
-            ) : (
-              actionLog.map((msg, i) => (
-                <div key={i} className={styles.logEntry}>{msg}</div>
-              ))
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index 3e6cbf1f..48eadc04 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -20,7 +20,6 @@ const DatabaseAdminPage = lazy(() => import('./pages/Admin/DatabaseAdminPage'));
 const OpenSearchAdminPage = lazy(() => import('./pages/Admin/OpenSearchAdminPage'));
 const AppConfigPage = lazy(() => import('./pages/Admin/AppConfigPage'));
 const SwaggerPage = lazy(() => import('./pages/Swagger/SwaggerPage'));
-const DevDiagram = lazy(() => import('./pages/DevDiagram/DevDiagram'));
 
 function SuspenseWrapper({ children }: { children: React.ReactNode }) {
   return (
@@ -64,7 +63,6 @@ export const router = createBrowserRouter([
             ],
           },
           { path: 'api-docs', element: <SuspenseWrapper><SwaggerPage /></SuspenseWrapper> },
-          { path: 'dev/diagram', element: <SuspenseWrapper><DevDiagram /></SuspenseWrapper> },
         ],
       },
     ],