Prototype: Compose live application canvas

ui/index.css

@@ -296,3 +296,17 @@
     opacity: 0;
   }
 }
+
+/* Compose canvas (prototype): smooth live-traffic transitions. Edge width
+   and color track the simulated per-boundary rps/error figures, so they
+   ease between ticks instead of snapping. */
+.compose-canvas .react-flow__edge-path {
+  transition:
+    stroke 700ms ease,
+    stroke-width 700ms ease,
+    opacity 700ms ease;
+}
+
+.compose-canvas .react-flow__node {
+  transition: transform 500ms cubic-bezier(0.33, 1, 0.68, 1);
+}

ui/studio/Navigation.tsx

@@ -595,6 +595,22 @@ export function Navigation({ className }: NavigationProps) {
                 </a>
               </Navigation.Item>
             )}
+            <Navigation.Item
+              asChild
+              isActive={viewParam === "compose"}
+              className={navigationItemClasses}
+            >
+              <a
+                href={createUrl({
+                  schemaParam,
+                  viewParam: "compose",
+                })}
+                className="w-full"
+                data-testid="navigation-compose-item"
+              >
+                Compose
+              </a>
+            </Navigation.Item>
           </Navigation.Block>
 
           <Navigation.SearchableBlock

ui/studio/Studio.tsx

@@ -13,6 +13,7 @@ import { StudioContextProvider, useStudio } from "./context";
 import { IntrospectionStatusNotice } from "./IntrospectionStatusNotice";
 import { Navigation } from "./Navigation";
 import { StudioHeader } from "./StudioHeader";
+import { ComposeView } from "./views/compose/ComposeView";
 import { ConsoleView } from "./views/console/ConsoleView";
 import { MigrationsView } from "./views/migrations/MigrationsView";
 import { QueriesView } from "./views/queries/QueriesView";
@@ -118,6 +119,7 @@ const views: Record<string, (props: ViewProps) => JSX.Element | null> = {
   console: ConsoleView,
   sql: SqlView,
   migrations: MigrationsView,
+  compose: ComposeView,
   default: BasicView,
 };