first claude draft

2025-12-29 14:40:06 -03:00
commit 116d4032e2
69 changed files with 5020 additions and 0 deletions
--- a/docs/architecture/graph.html
+++ b/docs/architecture/graph.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Graph Viewer - System Monitor</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body class="graph-viewer">
+    <header class="graph-header">
+        <a href="index.html" class="back-link">← Index</a>
+        <div class="nav-controls">
+            <button onclick="navigate(-1)" id="btn-prev" title="Previous (←)">◀</button>
+            <span id="nav-position">1 / 4</span>
+            <button onclick="navigate(1)" id="btn-next" title="Next (→)">▶</button>
+        </div>
+        <h1 id="graph-title">Loading...</h1>
+        <div class="graph-controls">
+            <button onclick="setMode('fit')">Fit</button>
+            <button onclick="setMode('fit-width')">Width</button>
+            <button onclick="setMode('fit-height')">Height</button>
+            <button onclick="setMode('actual-size')">100%</button>
+            <button onclick="downloadSvg()">↓ SVG</button>
+        </div>
+    </header>
+
+    <div class="graph-container" id="graph-container">
+        <img id="graph-img" src="" alt="Graph">
+    </div>
+
+    <script>
+        const graphOrder = [
+            '01-system-overview',
+            '02-data-flow',
+            '03-deployment',
+            '04-grpc-services'
+        ];
+
+        const graphs = {
+            '01-system-overview': {
+                title: 'System Overview',
+                file: '01-system-overview.svg'
+            },
+            '02-data-flow': {
+                title: 'Data Flow Pipeline',
+                file: '02-data-flow.svg'
+            },
+            '03-deployment': {
+                title: 'Deployment Architecture',
+                file: '03-deployment.svg'
+            },
+            '04-grpc-services': {
+                title: 'gRPC Service Definitions',
+                file: '04-grpc-services.svg'
+            }
+        };
+
+        const params = new URLSearchParams(window.location.search);
+        let graphKey = params.get('g') || '01-system-overview';
+        let currentIndex = graphOrder.indexOf(graphKey);
+        if (currentIndex === -1) currentIndex = 0;
+
+        function loadGraph(key) {
+            const graph = graphs[key];
+            document.getElementById('graph-title').textContent = graph.title;
+            document.getElementById('graph-img').src = graph.file;
+            document.title = graph.title + ' - System Monitor';
+            history.replaceState(null, '', '?g=' + key);
+            graphKey = key;
+            updateNavHints();
+        }
+
+        function updateNavHints() {
+            const idx = graphOrder.indexOf(graphKey);
+            const prevBtn = document.getElementById('btn-prev');
+            const nextBtn = document.getElementById('btn-next');
+            prevBtn.disabled = idx === 0;
+            nextBtn.disabled = idx === graphOrder.length - 1;
+            document.getElementById('nav-position').textContent = (idx + 1) + ' / ' + graphOrder.length;
+        }
+
+        function navigate(direction) {
+            const idx = graphOrder.indexOf(graphKey);
+            const newIdx = idx + direction;
+            if (newIdx >= 0 && newIdx < graphOrder.length) {
+                currentIndex = newIdx;
+                loadGraph(graphOrder[newIdx]);
+            }
+        }
+
+        function setMode(mode) {
+            const container = document.getElementById('graph-container');
+            container.className = 'graph-container ' + mode;
+        }
+
+        function downloadSvg() {
+            const graph = graphs[graphKey];
+            const link = document.createElement('a');
+            link.href = graph.file;
+            link.download = graph.file;
+            link.click();
+        }
+
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') {
+                navigate(-1);
+            } else if (e.key === 'ArrowRight') {
+                navigate(1);
+            } else if (e.key === 'Escape') {
+                window.location.href = 'index.html';
+            }
+        });
+
+        // Initialize
+        loadGraph(graphOrder[currentIndex]);
+        setMode('fit');
+    </script>
+</body>
+</html>