From d9bfd8a2fdc279bd080e6bba5c924513f94a6d4e Mon Sep 17 00:00:00 2001
From: Tomas Dvorak <contact.dvorak@gmail.com>
Date: Wed, 23 Sep 2026 18:20:05 +0200
Subject: [PATCH] feat(canvas): fullscreen workspace outside the app shell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move /projects/:id and its service detail route out of PlatformShell —
the project view now owns the entire viewport like Railway's canvas:
no sidebar, no global nav, just the slim project bar over the graph.
Service detail inherits the same chrome-free context with a breadcrumb
back to the canvas, and back/delete navigation preserves ?demo=1.

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

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 app/frontend/src/app/App.tsx                              | 6 ++++--
 .../src/features/service/pages/ServiceDetailPage.tsx      | 2 +-
 .../src/features/workspace/pages/ProjectWorkspacePage.tsx | 8 +++++---
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/frontend/src/app/App.tsx b/app/frontend/src/app/App.tsx
index ef3444c..b73d21c 100644
--- a/app/frontend/src/app/App.tsx
+++ b/app/frontend/src/app/App.tsx
@@ -116,10 +116,12 @@ export default function App() {
         <Route path="/auth/sign-up" element={<SignUpPage />} />
 
         {/* Public browsing — approved projects, templates, docs. */}
+        {/* Project workspace renders outside the shell — fullscreen canvas, no nav chrome */}
+        <Route path="/projects/:projectId" element={<ProjectWorkspacePage />} />
+        <Route path="/projects/:projectId/services/:serviceId" element={<ServiceDetailPage />} />
+
         <Route element={<PlatformShell />}>
           <Route path="/projects" element={<ProjectsPage />} />
-          <Route path="/projects/:projectId" element={<ProjectWorkspacePage />} />
-          <Route path="/projects/:projectId/services/:serviceId" element={<ServiceDetailPage />} />
           <Route path="/templates" element={<TemplatesPage />} />
           <Route path="/databases" element={<DatabasesPage />} />
           <Route path="/ha" element={<HighAvailabilityPage />} />
diff --git a/app/frontend/src/features/service/pages/ServiceDetailPage.tsx b/app/frontend/src/features/service/pages/ServiceDetailPage.tsx
index 797f3f7..26b6570 100644
--- a/app/frontend/src/features/service/pages/ServiceDetailPage.tsx
+++ b/app/frontend/src/features/service/pages/ServiceDetailPage.tsx
@@ -384,7 +384,7 @@ export function ServiceDetailPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['project-services', projectId] });
       queryClient.invalidateQueries({ queryKey: ['projects'] });
-      navigate(`/projects/${projectId}`);
+      navigate(isDemoMode ? `/projects/${projectId}?demo=1` : `/projects/${projectId}`);
     },
   });
 
diff --git a/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx b/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
index 6c3b8e8..126c5bd 100644
--- a/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
+++ b/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
@@ -644,7 +644,7 @@ export function ProjectWorkspacePage() {
             This project may have been deleted or you don't have access.
           </p>
           <button
-            onClick={() => navigate('/projects')}
+            onClick={() => navigate(isDemoMode ? '/projects?demo=1' : '/projects')}
             className="mt-6 px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm font-medium hover:border-[var(--border-default)] transition-colors"
           >
             Back to Projects
@@ -656,12 +656,14 @@ export function ProjectWorkspacePage() {
 
   const canvasView = activeView === 'canvas';
 
+  const projectsHref = isDemoMode ? '/projects?demo=1' : '/projects';
+
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="flex h-dvh min-h-0 flex-col bg-[var(--bg-void)]">
       {/* Slim workspace bar — tabs + project meta, canvas fills everything below */}
       <div className="flex h-12 shrink-0 items-center gap-3 border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/80 px-4 backdrop-blur-sm">
         <button
-          onClick={() => navigate('/projects')}
+          onClick={() => navigate(projectsHref)}
           className="flex items-center gap-1.5 text-xs text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors shrink-0"
         >
           <ArrowLeft size={14} />