small fix, don't worry about it

docs/archive/research/dashboard.md

@@ -0,0 +1,385 @@
+1️⃣ What the Railway Dashboard Is
+
+Railway is a PaaS (Platform as a Service).
+
+The dashboard is where you:
+
+Create services (apps, APIs, workers)
+
+Add databases
+
+Connect GitHub repos
+
+Configure env variables
+
+View logs & metrics
+
+Define networking between services
+
+Instead of showing raw Kubernetes or Docker Compose, Railway abstracts everything into a visual canvas.
+
+2️⃣ What This “Canvas” Actually Is
+
+The key part in your HTML:
+
+<div class="react-flow ...">
+
+
+That tells us immediately:
+
+👉 They’re using React Flow — a React library for building node-based editors.
+
+React Flow powers:
+
+Node graphs
+
+Drag & drop canvases
+
+Visual connections
+
+Zoom/pan
+
+Edges with arrows
+
+So this canvas = a React Flow graph editor customized to represent infrastructure.
+
+3️⃣ Architecture of the Canvas
+
+Here’s what’s happening internally:
+
+A) Root Layout
+stack-container
+nested-canvas
+canvas-container
+
+
+This is:
+
+Grid layout
+
+Responsive behavior
+
+Sidebar + center canvas layout
+
+Mobile floating button
+
+They’re using:
+
+Tailwind CSS
+
+CSS Grid
+
+Dark mode variants
+
+Utility classes
+
+Very modern stack.
+
+B) The Graph Engine (React Flow)
+
+This part:
+
+<div class="react-flow__viewport"
+     style="transform: translate(306px, 279px) scale(1);">
+
+
+This means:
+
+The canvas supports panning (translate X/Y)
+
+It supports zooming (scale)
+
+Entire graph is rendered inside a transform container
+
+So when you drag around → it updates the transform.
+When you zoom → scale changes.
+
+Classic infinite canvas technique.
+
+C) Nodes
+
+Example:
+
+<div class="react-flow__node react-flow__node-empty">
+
+
+Nodes represent:
+
+GitHub repo
+
+Database
+
+Docker image
+
+Function
+
+Bucket
+
+Empty service
+
+Each node = React component.
+
+Internally Railway likely stores something like:
+
+{
+  id: "service_123",
+  type: "github",
+  position: { x: 120, y: 400 },
+  data: {
+    repo: "...",
+    env: {...}
+  }
+}
+
+
+React Flow renders this declaratively.
+
+D) Edges (Connections)
+
+This part:
+
+Edges are rendered in SVG.
+
+You also saw:
+
+<marker id="arrowhead">
+
+
+That defines arrowheads for:
+
+Normal connection
+
+Staged
+
+Selected
+
+Network
+
+Alternative
+
+So edges are dynamic SVG paths with markers attached.
+
+4️⃣ What the Command Palette Is
+
+This section:
+
+<input placeholder="What would you like to create?" cmdk-input>
+
+
+This is a command palette UI.
+
+Looks like they use:
+
+👉 cmdk (a React command menu library)
+
+So when you type:
+
+“github”
+
+“database”
+
+“docker”
+
+It filters options.
+
+Selecting one → creates a new node in the graph.
+
+This is very similar to:
+
+Linear
+
+Vercel
+
+Raycast UI pattern
+
+5️⃣ How the Dashboard Works Conceptually
+
+The visual canvas is just a frontend representation of backend state.
+
+Behind the scenes:
+
+Step 1 — You Add a Service
+
+→ Frontend sends API request:
+
+POST /services
+
+Step 2 — Railway Backend
+
+Likely:
+
+Creates container definition
+
+Assigns internal network
+
+Stores graph structure in DB
+
+Triggers deployment pipeline
+
+Step 3 — Infra Layer
+
+Under the hood Railway probably uses:
+
+Containers (Docker)
+
+Orchestration (likely Kubernetes or custom scheduler)
+
+Internal networking mesh
+
+Volume storage
+
+Load balancing
+
+The canvas is just a visual abstraction over:
+
+Containers + Networks + Volumes + Environment Variables
+
+6️⃣ What “Stack Container” Means
+id="stack-container-root"
+
+
+A “stack” in Railway terms =
+
+A collection of services that form one project.
+
+Like:
+
+API
+
+Database
+
+Redis
+
+Worker
+
+Cron
+
+All connected together.
+
+This is similar to:
+
+Docker Compose stack
+
+Kubernetes namespace
+
+Vercel project
+
+7️⃣ The Networking Animation
+
+You saw:
+
+@keyframes networkFlowEgress
+@keyframes networkFlowIngress
+
+
+That’s animated edge flow.
+
+Meaning:
+
+When traffic flows between services
+
+They animate dots moving across edges
+
+This gives visual feedback like:
+“API → Database”
+
+Very clean UX detail.
+
+8️⃣ What the Floating Button Is
+<button class="sm:hidden fixed right-4 bottom-4">
+
+
+That’s the mobile "Add Service" button.
+
+On small screens:
+
+Canvas hides
+
+Floating action button appears
+
+Material-inspired design pattern.
+
+9️⃣ So What Is This Canvas Technically?
+
+It is:
+
+A React Flow–powered infrastructure graph editor that maps frontend node/edge state to backend service configuration.
+
+Or simpler:
+
+👉 A visual Docker/Kubernetes orchestrator UI.
+
+🔟 If You Built This Yourself
+
+Given your experience (Go backend + Railway + infra + React):
+
+You’d need:
+
+Frontend:
+
+React
+
+React Flow
+
+Tailwind
+
+Command palette (cmdk)
+
+State manager (Zustand likely)
+
+Backend:
+
+Service registry
+
+Deployment engine
+
+Container runtime control
+
+Network layer
+
+Logs streaming
+
+Optional:
+
+WebSocket for real-time deployment status
+
+Event-driven state updates
+
+⚙️ Why This Design Is Smart
+
+Non-dev friendly
+
+Infrastructure becomes visual
+
+Encourages service-based architecture
+
+Makes networking intuitive
+
+Looks “modern infra SaaS”
+
+Railway basically turned:
+
+docker-compose.yml
+
+
+into:
+
+a draggable visual graph
+
+🚀 Big Picture
+
+Railway dashboard =
+
+React app
+
+React Flow canvas
+
+Command palette-driven node creation
+
+SVG-based edge system
+
+Tailwind-based design
+
+Backend infra orchestration API
+
+It’s a visual abstraction over cloud container orchestration.