feat(canvas): fullscreen Railway-style workspace canvas

Rebuild the project canvas as a full-viewport graph instead of a boxed
66vh panel. Slim workspace top bar now holds the view tabs, project meta
and actions; the canvas fills all remaining space.

- Floating glass controls: env filter + group pill (top-left), zoom out /
  live zoom % / zoom in / fit / tidy pill (bottom-left), dark MiniMap
  (bottom-right), hint chip, demo badge.
- Inspector panel: selecting a node opens a right-side glass panel with
  status, image, address, inferred connections incl. variable reasons,
  and deploy/restart/stop/delete actions. Esc or pane click closes.
- Auto-layout: dependency-depth layered layout (consumers left,
  datastores right) for first-visit placement and the Tidy action.
  Unpositioned services park right of existing bounds, not at (0,0).
- Nodes: fixed 240px width (was 210 vs 220-280 CSS mismatch), per-type
  icons/colors incl. cron, spinner icon while deploying, hover lift.
- Edges: lime bezier strokes, animated dashes while either endpoint is
  deploying, hover glow updated from stale purple to accent.
- Groups: off-brand crimson replaced with accent tokens, double-click
  title to rename inline.
- Keyboard: F fit, 0 reset zoom, +/- zoom, Esc deselect. Marquee select
  on Shift-drag. Double-click zoom disabled, dead connection drags off.
- Mobile: icon-only tabs, minimap/hint hidden under md.
- Retake docs/screenshots/canvas.png + site copy (1600x900 demo).

Authored By: TDvorak <[email protected]>

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

app/frontend/src/index.css

@@ -634,13 +634,13 @@ textarea {
 .edge-premium .react-flow__edge-path {
   stroke-linecap: round;
   stroke-linejoin: round;
-  filter: drop-shadow(0 0 4px rgba(156, 126, 240, 0.3));
+  filter: drop-shadow(0 0 4px rgba(180, 227, 74, 0.25));
   transition: filter 0.2s ease, stroke-width 0.2s ease;
 }
 
 .edge-premium:hover .react-flow__edge-path {
-  filter: drop-shadow(0 0 8px rgba(156, 126, 240, 0.5));
-  stroke-width: 3px;
+  filter: drop-shadow(0 0 8px rgba(180, 227, 74, 0.45));
+  stroke-width: 2.6px;
 }
 
 /* ============================================
@@ -1685,3 +1685,86 @@ textarea {
   margin: 24px 0;
 }
 .docs-article img { max-width: 100%; border-radius: var(--radius-md); }
+
+/* ============================================
+   CANVAS — fullscreen workspace graph
+   ============================================ */
+
+/* Floating glass pills (zoom controls, env filter, hints) */
+.canvas-pill {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(19, 21, 24, 0.82);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--border-default);
+  border-radius: 999px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.canvas-pill-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 6px;
+  border-radius: 999px;
+  color: var(--text-tertiary);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.canvas-pill-btn:hover {
+  color: var(--text-primary);
+  background: var(--surface-muted);
+}
+
+/* React Flow pane affordances */
+.react-flow__pane {
+  cursor: grab;
+}
+.react-flow__pane.dragging {
+  cursor: grabbing;
+}
+.react-flow__node.selectable:focus {
+  outline: none;
+}
+
+/* Marquee selection tint */
+.react-flow__selection {
+  background: var(--accent-primary-soft);
+  border: 1px solid var(--border-strong);
+}
+
+/* MiniMap — match surface card, dimmed nodes */
+.react-flow__minimap {
+  border-radius: var(--radius-md) !important;
+  border: 1px solid var(--border-default);
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+.react-flow__minimap-svg {
+  display: block;
+}
+
+/* Inspector panel entrance */
+.canvas-inspector {
+  animation: canvas-panel-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes canvas-panel-in {
+  from {
+    opacity: 0;
+    transform: translateX(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .canvas-inspector {
+    animation: none;
+  }
+}