From 04f04aec62b7b67b1f557fad9c30c1a860903c4c Mon Sep 17 00:00:00 2001
From: Justin Brooks <jsbroks@gmail.com>
Date: Thu, 6 Feb 2025 22:56:13 -0500
Subject: [PATCH 01/14] new ui layouts

---
 .../app/[workspaceSlug]/(appv2)/layout.tsx    | 81 +++++++++++++++++++
 .../(appv2)/resources2/layout.tsx             | 54 +++++++++++++
 .../(appv2)/resources2/page.tsx               |  3 +
 apps/webservice/src/app/globals.css           | 18 ++---
 packages/ui/src/sidebar.tsx                   |  6 +-
 5 files changed, 150 insertions(+), 12 deletions(-)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
new file mode 100644
index 000000000..f9bf0c3ad
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import {
+  IconCategory,
+  IconChartBar,
+  IconCube,
+  IconPlug,
+  IconRocket,
+} from "@tabler/icons-react";
+
+import { cn } from "@ctrlplane/ui";
+
+export const metadata = {
+  title: "Ctrlplane",
+};
+
+const SidebarIconLink: React.FC<{
+  active?: boolean;
+  icon: React.ReactNode;
+  label: string;
+  href: string;
+}> = ({ icon, label, href, active }) => {
+  return (
+    <div className="size-20 text-muted-foreground">
+      <Link
+        href={href}
+        className={cn(
+          "border-r-1 group flex h-full flex-col items-center justify-center gap-1 p-2",
+        )}
+      >
+        <span
+          className={cn(
+            "rounded-lg p-2",
+            active
+              ? "bg-purple-500/10 text-purple-400"
+              : "transition-colors duration-200 group-hover:bg-neutral-400/10",
+          )}
+        >
+          {icon}
+        </span>
+        <span className={cn("text-xs", active && "text-purple-400")}>
+          {label}
+        </span>
+      </Link>
+    </div>
+  );
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen w-full flex-col">
+      <nav className="flex h-14 w-full shrink-0 items-center bg-neutral-900/40 px-4">
+        <Image
+          src="/android-chrome-192x192.png"
+          alt="Ctrlplane"
+          width={24}
+          height={24}
+        />
+      </nav>
+
+      <div className="flex flex-1">
+        <aside className="flex w-20 flex-col bg-neutral-900/40 pt-2">
+          <SidebarIconLink
+            active
+            icon={<IconCube />}
+            label="Resources"
+            href="/"
+          />
+          <SidebarIconLink icon={<IconCategory />} label="Systems" href="/" />
+          <SidebarIconLink icon={<IconRocket />} label="Deploys" href="/" />
+          <SidebarIconLink icon={<IconChartBar />} label="Insights" href="/" />
+          <div className="flex-grow" />
+          <SidebarIconLink icon={<IconPlug />} label="Connect" href="/" />
+        </aside>
+
+        <div className="flex-1 rounded-tl-lg border-l border-t">{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx
new file mode 100644
index 000000000..81c487a01
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx
@@ -0,0 +1,54 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarProvider,
+} from "@ctrlplane/ui/sidebar";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative">
+      <SidebarProvider>
+        <Sidebar className="absolute left-0 top-0 -z-10">
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Resources</SidebarGroupLabel>
+              <SidebarMenu>
+                <SidebarMenuButton>List</SidebarMenuButton>
+                <SidebarMenuButton>Providers</SidebarMenuButton>
+                <SidebarMenuButton>Resources</SidebarMenuButton>
+                <SidebarMenuButton>Views</SidebarMenuButton>
+              </SidebarMenu>
+            </SidebarGroup>
+
+            <SidebarGroup>
+              <SidebarGroupLabel>Common Types</SidebarGroupLabel>
+              <SidebarMenu>
+                <SidebarMenuButton>List</SidebarMenuButton>
+                <SidebarMenuButton>Providers</SidebarMenuButton>
+                <SidebarMenuButton>Resources</SidebarMenuButton>
+                <SidebarMenuButton>Views</SidebarMenuButton>
+              </SidebarMenu>
+            </SidebarGroup>
+
+            <SidebarGroup>
+              <SidebarGroupLabel>Recently Added</SidebarGroupLabel>
+              <SidebarMenu>
+                <SidebarMenuButton>List</SidebarMenuButton>
+                <SidebarMenuButton>Providers</SidebarMenuButton>
+                <SidebarMenuButton>Resources</SidebarMenuButton>
+                <SidebarMenuButton>Views</SidebarMenuButton>
+              </SidebarMenu>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>test</SidebarFooter>
+        </Sidebar>
+        <main className="h-[calc(100vh-56px-1px)]">{children}</main>
+      </SidebarProvider>
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx
new file mode 100644
index 000000000..a31379ed0
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx
@@ -0,0 +1,3 @@
+export default function ResourcesPage() {
+  return <div>Resources Page</div>;
+}
diff --git a/apps/webservice/src/app/globals.css b/apps/webservice/src/app/globals.css
index bd42add2f..cbac91966 100644
--- a/apps/webservice/src/app/globals.css
+++ b/apps/webservice/src/app/globals.css
@@ -42,7 +42,7 @@
   }
 
   .dark {
-    --background: 240 10% 3.9%;
+    --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
@@ -68,14 +68,14 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
 
-    --sidebar-background: 0 0% 0%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 4% 10%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-background: var(--background);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
   }
 }
 
diff --git a/packages/ui/src/sidebar.tsx b/packages/ui/src/sidebar.tsx
index b9b7c0de3..556cafb2a 100644
--- a/packages/ui/src/sidebar.tsx
+++ b/packages/ui/src/sidebar.tsx
@@ -150,7 +150,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+              "group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex w-full",
               className,
             )}
             ref={ref}
@@ -233,7 +233,7 @@ const Sidebar = React.forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
             "group-data-[collapsible=offcanvas]:w-0",
             "group-data-[side=right]:rotate-180",
             variant === "floating" || variant === "inset"
@@ -243,7 +243,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            "fixed inset-y-0 z-10 hidden w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
             side === "left"
               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",

From 9ede8e320b4d546c53efe9db90470968b0c81e1f Mon Sep 17 00:00:00 2001
From: Justin Brooks <justin@wandb.com>
Date: Fri, 7 Feb 2025 00:44:25 -0500
Subject: [PATCH 02/14] add more stuff

---
 .../src/app/[workspaceSlug]/(app)/page.tsx    |  8 ++-
 .../app/[workspaceSlug]/(appv2)/TopNav.tsx    | 50 +++++++++++++++++++
 .../(appv2)/WorkspaceDropdown.tsx             | 39 +++++++++++++++
 .../app/[workspaceSlug]/(appv2)/layout.tsx    | 26 ++++++----
 4 files changed, 107 insertions(+), 16 deletions(-)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/WorkspaceDropdown.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/page.tsx
index a973a2003..5cb2f488b 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/page.tsx
@@ -1,10 +1,8 @@
 import { redirect } from "next/navigation";
 
-export default async function WorkspacePage(
-  props: {
-    params: Promise<{ workspaceSlug: string }>;
-  }
-) {
+export default async function WorkspacePage(props: {
+  params: Promise<{ workspaceSlug: string }>;
+}) {
   const params = await props.params;
   redirect(`/${params.workspaceSlug}/systems`);
 }
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx
new file mode 100644
index 000000000..363a4f562
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx
@@ -0,0 +1,50 @@
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import { IconUser } from "@tabler/icons-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@ctrlplane/ui/avatar";
+import { Input } from "@ctrlplane/ui/input";
+
+import { api } from "~/trpc/server";
+import { WorkspaceDropdown } from "./WorkspaceDropdown";
+
+export const TopNav: React.FC<{ workspaceSlug: string }> = async ({
+  workspaceSlug,
+}) => {
+  const workspace = await api.workspace.bySlug(workspaceSlug).catch(() => null);
+  if (workspace == null) notFound();
+  const viewer = await api.user.viewer();
+  const workspaces = await api.workspace.list();
+  return (
+    <nav className="flex h-14 w-full shrink-0 items-center gap-4 bg-neutral-900/40 px-4">
+      <div className="ml-3 flex shrink-0 items-center gap-7">
+        <Image
+          src="/android-chrome-192x192.png"
+          alt="Ctrlplane"
+          width={24}
+          height={24}
+        />
+
+        <WorkspaceDropdown workspace={workspace} workspaces={workspaces} />
+      </div>
+
+      <div className="mx-auto flex flex-1 justify-center">
+        <div className="w-[450px]">
+          <Input
+            placeholder="Search for resources, systems, deployments, etc."
+            className="bg-transparent"
+          />
+        </div>
+      </div>
+
+      <div>
+        <Avatar className="size-7">
+          <AvatarImage src={viewer.image ?? undefined} />
+          <AvatarFallback>
+            <IconUser />
+          </AvatarFallback>
+        </Avatar>
+      </div>
+    </nav>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/WorkspaceDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/WorkspaceDropdown.tsx
new file mode 100644
index 000000000..ec56bde8f
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/WorkspaceDropdown.tsx
@@ -0,0 +1,39 @@
+import type { Workspace } from "@ctrlplane/db/schema";
+import Link from "next/link";
+import { IconChevronDown } from "@tabler/icons-react";
+
+import { Button } from "@ctrlplane/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+
+export const WorkspaceDropdown: React.FC<{
+  workspace: Workspace;
+  workspaces: Workspace[];
+}> = ({ workspace }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex w-56  items-center justify-between gap-2 px-3 py-0 text-left text-base"
+        >
+          <span className="flex-grow truncate">{workspace.name}</span>
+          <IconChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56 bg-neutral-900">
+        <Link href={`/${workspace.slug}/settings/workspace/overview`}>
+          <DropdownMenuItem>Workspace settings</DropdownMenuItem>
+        </Link>
+        <Link href={`/${workspace.slug}/settings/workspace/members`}>
+          <DropdownMenuItem>Invite and manage users</DropdownMenuItem>
+        </Link>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
index f9bf0c3ad..fb7a57861 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
@@ -1,16 +1,19 @@
 import React from "react";
-import Image from "next/image";
 import Link from "next/link";
 import {
+  IconBook,
   IconCategory,
   IconChartBar,
   IconCube,
   IconPlug,
   IconRocket,
+  IconSettings,
 } from "@tabler/icons-react";
 
 import { cn } from "@ctrlplane/ui";
 
+import { TopNav } from "./TopNav";
+
 export const metadata = {
   title: "Ctrlplane",
 };
@@ -47,17 +50,14 @@ const SidebarIconLink: React.FC<{
   );
 };
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default async function Layout(props: {
+  params: Promise<{ workspaceSlug: string }>;
+  children: React.ReactNode;
+}) {
+  const params = await props.params;
   return (
     <div className="flex h-screen w-full flex-col">
-      <nav className="flex h-14 w-full shrink-0 items-center bg-neutral-900/40 px-4">
-        <Image
-          src="/android-chrome-192x192.png"
-          alt="Ctrlplane"
-          width={24}
-          height={24}
-        />
-      </nav>
+      <TopNav workspaceSlug={params.workspaceSlug} />
 
       <div className="flex flex-1">
         <aside className="flex w-20 flex-col bg-neutral-900/40 pt-2">
@@ -69,12 +69,16 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           />
           <SidebarIconLink icon={<IconCategory />} label="Systems" href="/" />
           <SidebarIconLink icon={<IconRocket />} label="Deploys" href="/" />
+          <SidebarIconLink icon={<IconBook />} label="Runbooks" href="/" />
           <SidebarIconLink icon={<IconChartBar />} label="Insights" href="/" />
           <div className="flex-grow" />
           <SidebarIconLink icon={<IconPlug />} label="Connect" href="/" />
+          <SidebarIconLink icon={<IconSettings />} label="Settings" href="/" />
         </aside>
 
-        <div className="flex-1 rounded-tl-lg border-l border-t">{children}</div>
+        <div className="flex-1 rounded-tl-lg border-l border-t">
+          {props.children}
+        </div>
       </div>
     </div>
   );

From 914be8812ddab178c0e186ae424a00aa73c00921 Mon Sep 17 00:00:00 2001
From: Justin Brooks <justin@wandb.com>
Date: Fri, 7 Feb 2025 11:27:16 -0500
Subject: [PATCH 03/14] Init

---
 .../resources/ResourcePageContent.tsx         |  4 +-
 .../resource-condition/useResourceFilter.ts   | 33 ++++++-
 .../app/[workspaceSlug]/(appv2)/TopNav.tsx    |  8 +-
 .../(appv2)/TopSidebarIcon.tsx                | 40 ++++++++
 .../(appv2)/WorkspaceDropdown.tsx             | 52 ++++++++++-
 .../(appv2)/_components/PageHeader.tsx        |  9 ++
 .../(appv2)/deployments2/page.tsx             | 34 +++++++
 .../app/[workspaceSlug]/(appv2)/layout.tsx    | 91 +++++++++----------
 .../(appv2)/resources2/SidebarKinds.tsx       | 70 ++++++++++++++
 .../(appv2)/resources2/layout.tsx             | 43 ++++-----
 .../(appv2)/resources2/page.tsx               | 47 +++++++++-
 packages/ui/src/sidebar.tsx                   |  2 +-
 12 files changed, 347 insertions(+), 86 deletions(-)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/TopSidebarIcon.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/PageHeader.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/deployments2/page.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/SidebarKinds.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/ResourcePageContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/ResourcePageContent.tsx
index 41899d4be..7bebd99b2 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/ResourcePageContent.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/ResourcePageContent.tsx
@@ -131,7 +131,7 @@ export const ResourcePageContent: React.FC<{
     return <ResourceGettingStarted workspace={workspace} />;
 
   return (
-    <div className="h-full text-sm">
+    <div className="text-sm">
       <div className="flex h-[41px] items-center justify-between border-b border-neutral-800 p-1 px-2">
         <div className="flex items-center gap-1 pl-1">
           <SearchInput value={search} onChange={setSearch} />
@@ -224,7 +224,7 @@ export const ResourcePageContent: React.FC<{
         />
       )}
       {resources.data != null && resources.data.total > 0 && (
-        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-90px)] overflow-auto">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 overflow-auto">
           <ResourcesTable
             resources={resources.data.items}
             activeResourceIds={resourceId ? [resourceId] : []}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/resource-condition/useResourceFilter.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/resource-condition/useResourceFilter.ts
index 4ee59453a..b62ee7dc4 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/resource-condition/useResourceFilter.ts
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/resource-condition/useResourceFilter.ts
@@ -1,10 +1,14 @@
 import type { ResourceCondition } from "@ctrlplane/validators/resources";
-import { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import LZString from "lz-string";
+import { useDebounce } from "react-use";
+
+import { ColumnOperator } from "@ctrlplane/validators/conditions";
 
 import { useQueryParams } from "../useQueryParams";
 
 export const useResourceFilter = () => {
+  const [search, setSearch] = React.useState("");
   const { getParam, setParams } = useQueryParams();
 
   const filterHash = getParam("filter");
@@ -34,5 +38,30 @@ export const useResourceFilter = () => {
     [setParams],
   );
 
-  return { filter, setFilter, viewId };
+  useDebounce(
+    () => {
+      if (search === "") return;
+      setFilter({
+        type: "comparison",
+        operator: "and",
+        conditions: [
+          // Keep any non-name conditions from existing filter
+          ...(filter && "conditions" in filter
+            ? filter.conditions.filter(
+                (c: ResourceCondition) => c.type !== "name",
+              )
+            : []),
+          {
+            type: "name",
+            operator: ColumnOperator.Contains,
+            value: search,
+          },
+        ],
+      });
+    },
+    500,
+    [search],
+  );
+
+  return { filter, setFilter, viewId, search, setSearch };
 };
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx
index 363a4f562..aa3e791b2 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx
@@ -16,7 +16,7 @@ export const TopNav: React.FC<{ workspaceSlug: string }> = async ({
   const viewer = await api.user.viewer();
   const workspaces = await api.workspace.list();
   return (
-    <nav className="flex h-14 w-full shrink-0 items-center gap-4 bg-neutral-900/40 px-4">
+    <nav className="flex h-14 w-full shrink-0 items-center gap-4 bg-neutral-900/50 px-4">
       <div className="ml-3 flex shrink-0 items-center gap-7">
         <Image
           src="/android-chrome-192x192.png"
@@ -25,7 +25,11 @@ export const TopNav: React.FC<{ workspaceSlug: string }> = async ({
           height={24}
         />
 
-        <WorkspaceDropdown workspace={workspace} workspaces={workspaces} />
+        <WorkspaceDropdown
+          viewer={viewer}
+          workspace={workspace}
+          workspaces={workspaces}
+        />
       </div>
 
       <div className="mx-auto flex flex-1 justify-center">
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopSidebarIcon.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopSidebarIcon.tsx
new file mode 100644
index 000000000..5f4a52a05
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopSidebarIcon.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { cn } from "@ctrlplane/ui";
+
+export const TopSidebarIcon: React.FC<{
+  icon: React.ReactNode;
+  label: string;
+  href: string;
+}> = ({ icon, label, href }) => {
+  const pathname = usePathname();
+  const active = pathname.startsWith(href);
+
+  return (
+    <div className="size-20 text-muted-foreground">
+      <Link
+        href={href}
+        className={cn(
+          "border-r-1 group flex h-full flex-col items-center justify-center gap-1 p-2",
+        )}
+      >
+        <span
+          className={cn(
+            "rounded-lg p-2",
+            active
+              ? "bg-purple-500/10 text-purple-400"
+              : "transition-colors duration-200 group-hover:bg-neutral-400/10",
+          )}
+        >
+          {icon}
+        </span>
+        <span className={cn("text-xs", active && "text-purple-400")}>
+          {label}
+        </span>
+      </Link>
+    </div>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/WorkspaceDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/WorkspaceDropdown.tsx
index ec56bde8f..1d6e002be 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/WorkspaceDropdown.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/WorkspaceDropdown.tsx
@@ -1,19 +1,32 @@
+"use client";
+
 import type { Workspace } from "@ctrlplane/db/schema";
 import Link from "next/link";
-import { IconChevronDown } from "@tabler/icons-react";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
 
 import { Button } from "@ctrlplane/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@ctrlplane/ui/dropdown-menu";
 
+import { api } from "~/trpc/react";
+
 export const WorkspaceDropdown: React.FC<{
   workspace: Workspace;
   workspaces: Workspace[];
-}> = ({ workspace }) => {
+  viewer: { email: string };
+}> = ({ workspace, workspaces, viewer }) => {
+  const update = api.profile.update.useMutation();
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -33,6 +46,41 @@ export const WorkspaceDropdown: React.FC<{
         <Link href={`/${workspace.slug}/settings/workspace/members`}>
           <DropdownMenuItem>Invite and manage users</DropdownMenuItem>
         </Link>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>Switch workspaces</DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent className="w-[200px] bg-neutral-900">
+              <DropdownMenuLabel className="font-normal text-muted-foreground">
+                {viewer.email}
+              </DropdownMenuLabel>
+              {workspaces.map((ws) => (
+                <Link
+                  key={ws.id}
+                  href={`/${ws.slug}`}
+                  passHref
+                  onClick={() => update.mutate({ activeWorkspaceId: ws.id })}
+                >
+                  <DropdownMenuItem>
+                    {ws.name}
+                    {ws.id === workspace.id && (
+                      <DropdownMenuShortcut>
+                        <IconCheck className="h-4 w-4" />
+                      </DropdownMenuShortcut>
+                    )}
+                  </DropdownMenuItem>
+                </Link>
+              ))}
+
+              <DropdownMenuSeparator />
+              <Link href={`/workspaces/create`} passHref>
+                <DropdownMenuItem>Create or join workspace</DropdownMenuItem>
+              </Link>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/PageHeader.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/PageHeader.tsx
new file mode 100644
index 000000000..ba9d8b397
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/PageHeader.tsx
@@ -0,0 +1,9 @@
+export const PageHeader: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+      <div className="flex items-center gap-2 px-4">{children}</div>
+    </header>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/deployments2/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/deployments2/page.tsx
new file mode 100644
index 000000000..8d3d6328a
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/deployments2/page.tsx
@@ -0,0 +1,34 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@ctrlplane/ui/breadcrumb";
+import { Separator } from "@ctrlplane/ui/separator";
+import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
+
+import { PageHeader } from "../_components/PageHeader";
+
+export default function DeploymentsPage() {
+  return (
+    <div>
+      <PageHeader>
+        <SidebarTrigger className="-ml-1" />
+        <Separator orientation="vertical" className="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem className="hidden md:block">
+              <BreadcrumbLink href="#">Deployments</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator className="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
index fb7a57861..c99c19bc1 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Link from "next/link";
 import {
   IconBook,
   IconCategory,
@@ -10,46 +9,13 @@ import {
   IconSettings,
 } from "@tabler/icons-react";
 
-import { cn } from "@ctrlplane/ui";
-
 import { TopNav } from "./TopNav";
+import { TopSidebarIcon } from "./TopSidebarIcon";
 
 export const metadata = {
   title: "Ctrlplane",
 };
 
-const SidebarIconLink: React.FC<{
-  active?: boolean;
-  icon: React.ReactNode;
-  label: string;
-  href: string;
-}> = ({ icon, label, href, active }) => {
-  return (
-    <div className="size-20 text-muted-foreground">
-      <Link
-        href={href}
-        className={cn(
-          "border-r-1 group flex h-full flex-col items-center justify-center gap-1 p-2",
-        )}
-      >
-        <span
-          className={cn(
-            "rounded-lg p-2",
-            active
-              ? "bg-purple-500/10 text-purple-400"
-              : "transition-colors duration-200 group-hover:bg-neutral-400/10",
-          )}
-        >
-          {icon}
-        </span>
-        <span className={cn("text-xs", active && "text-purple-400")}>
-          {label}
-        </span>
-      </Link>
-    </div>
-  );
-};
-
 export default async function Layout(props: {
   params: Promise<{ workspaceSlug: string }>;
   children: React.ReactNode;
@@ -60,21 +26,46 @@ export default async function Layout(props: {
       <TopNav workspaceSlug={params.workspaceSlug} />
 
       <div className="flex flex-1">
-        <aside className="flex w-20 flex-col bg-neutral-900/40 pt-2">
-          <SidebarIconLink
-            active
-            icon={<IconCube />}
-            label="Resources"
-            href="/"
-          />
-          <SidebarIconLink icon={<IconCategory />} label="Systems" href="/" />
-          <SidebarIconLink icon={<IconRocket />} label="Deploys" href="/" />
-          <SidebarIconLink icon={<IconBook />} label="Runbooks" href="/" />
-          <SidebarIconLink icon={<IconChartBar />} label="Insights" href="/" />
-          <div className="flex-grow" />
-          <SidebarIconLink icon={<IconPlug />} label="Connect" href="/" />
-          <SidebarIconLink icon={<IconSettings />} label="Settings" href="/" />
-        </aside>
+        <div className="flex bg-neutral-950">
+          <aside className="flex flex-col bg-neutral-900/50 pt-2">
+            <TopSidebarIcon
+              icon={<IconCube />}
+              label="Resources"
+              href={`/${params.workspaceSlug}/resources2`}
+            />
+            <TopSidebarIcon
+              icon={<IconCategory />}
+              label="Systems"
+              href={`/${params.workspaceSlug}/systems2`}
+            />
+            <TopSidebarIcon
+              icon={<IconRocket />}
+              label="Deploys"
+              href={`/${params.workspaceSlug}/deployments2`}
+            />
+            <TopSidebarIcon
+              icon={<IconBook />}
+              label="Runbooks"
+              href={`/${params.workspaceSlug}/runbooks`}
+            />
+            <TopSidebarIcon
+              icon={<IconChartBar />}
+              label="Insights"
+              href={`/${params.workspaceSlug}/insights`}
+            />
+            <div className="flex-grow" />
+            <TopSidebarIcon
+              icon={<IconPlug />}
+              label="Connect"
+              href={`/${params.workspaceSlug}/systems2`}
+            />
+            <TopSidebarIcon
+              icon={<IconSettings />}
+              label="Settings"
+              href={`/${params.workspaceSlug}/systems2`}
+            />
+          </aside>
+        </div>
 
         <div className="flex-1 rounded-tl-lg border-l border-t">
           {props.children}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/SidebarKinds.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/SidebarKinds.tsx
new file mode 100644
index 000000000..ced907dd9
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/SidebarKinds.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import type { Workspace } from "@ctrlplane/db/schema";
+import React from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import LZString from "lz-string";
+
+import { Badge } from "@ctrlplane/ui/badge";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+} from "@ctrlplane/ui/sidebar";
+import {
+  ComparisonOperator,
+  FilterType,
+} from "@ctrlplane/validators/conditions";
+import { ResourceFilterType } from "@ctrlplane/validators/resources";
+
+import { api } from "~/trpc/react";
+import { ResourceIcon } from "../../(app)/_components/ResourceIcon";
+
+export const SidebarGroupKinds: React.FC<{ workspace: Workspace }> = ({
+  workspace,
+}) => {
+  const pathname = usePathname();
+  const kinds = api.workspace.resourceKinds.useQuery(workspace.id);
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Kinds</SidebarGroupLabel>
+      <SidebarMenu>
+        {kinds.data?.map(({ version, kind, count }) => {
+          const url = `/${workspace.slug}/resources?filter=${LZString.compressToEncodedURIComponent(
+            JSON.stringify({
+              type: FilterType.Comparison,
+              operator: ComparisonOperator.And,
+              conditions: [
+                {
+                  type: ResourceFilterType.Kind,
+                  value: kind,
+                  operator: "equals",
+                },
+              ],
+            }),
+          )}`;
+          return (
+            <SidebarMenuButton
+              asChild
+              key={`${version}/${kind}`}
+              isActive={pathname.includes(url)}
+            >
+              <Link href={url}>
+                <ResourceIcon version={version} kind={kind} />
+                <span className="flex-grow">{kind}</span>
+                <Badge
+                  variant="secondary"
+                  className="rounded-full bg-neutral-500/10 text-xs text-muted-foreground"
+                >
+                  {count}
+                </Badge>
+              </Link>
+            </SidebarMenuButton>
+          );
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx
index 81c487a01..ff68fcb81 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx
@@ -1,32 +1,32 @@
+import { notFound } from "next/navigation";
+
 import {
   Sidebar,
   SidebarContent,
-  SidebarFooter,
   SidebarGroup,
-  SidebarGroupLabel,
+  SidebarInset,
   SidebarMenu,
   SidebarMenuButton,
   SidebarProvider,
 } from "@ctrlplane/ui/sidebar";
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+import { api } from "~/trpc/server";
+import { SidebarGroupKinds } from "./SidebarKinds";
+
+export default async function Layout(props: {
+  children: React.ReactNode;
+  params: Promise<{ workspaceSlug: string }>;
+}) {
+  const params = await props.params;
+  const workspace = await api.workspace.bySlug(params.workspaceSlug);
+  if (workspace == null) notFound();
+
   return (
     <div className="relative">
       <SidebarProvider>
         <Sidebar className="absolute left-0 top-0 -z-10">
           <SidebarContent>
             <SidebarGroup>
-              <SidebarGroupLabel>Resources</SidebarGroupLabel>
-              <SidebarMenu>
-                <SidebarMenuButton>List</SidebarMenuButton>
-                <SidebarMenuButton>Providers</SidebarMenuButton>
-                <SidebarMenuButton>Resources</SidebarMenuButton>
-                <SidebarMenuButton>Views</SidebarMenuButton>
-              </SidebarMenu>
-            </SidebarGroup>
-
-            <SidebarGroup>
-              <SidebarGroupLabel>Common Types</SidebarGroupLabel>
               <SidebarMenu>
                 <SidebarMenuButton>List</SidebarMenuButton>
                 <SidebarMenuButton>Providers</SidebarMenuButton>
@@ -35,19 +35,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
               </SidebarMenu>
             </SidebarGroup>
 
-            <SidebarGroup>
-              <SidebarGroupLabel>Recently Added</SidebarGroupLabel>
-              <SidebarMenu>
-                <SidebarMenuButton>List</SidebarMenuButton>
-                <SidebarMenuButton>Providers</SidebarMenuButton>
-                <SidebarMenuButton>Resources</SidebarMenuButton>
-                <SidebarMenuButton>Views</SidebarMenuButton>
-              </SidebarMenu>
-            </SidebarGroup>
+            <SidebarGroupKinds workspace={workspace} />
           </SidebarContent>
-          <SidebarFooter>test</SidebarFooter>
         </Sidebar>
-        <main className="h-[calc(100vh-56px-1px)]">{children}</main>
+        <SidebarInset className="h-[calc(100vh-56px-1px)]">
+          {props.children}
+        </SidebarInset>
       </SidebarProvider>
     </div>
   );
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx
index a31379ed0..7a716fc05 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx
@@ -1,3 +1,46 @@
-export default function ResourcesPage() {
-  return <div>Resources Page</div>;
+import { notFound } from "next/navigation";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@ctrlplane/ui/breadcrumb";
+import { Separator } from "@ctrlplane/ui/separator";
+import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
+
+import { api } from "~/trpc/server";
+import { PageHeader } from "../_components/PageHeader";
+import { ResourcePageContent } from "../../(app)/(resources)/resources/ResourcePageContent";
+
+export default async function ResourcesPage(props: {
+  params: Promise<{ workspaceSlug: string }>;
+  searchParams: Promise<{ view?: string }>;
+}) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
+  const workspace = await api.workspace.bySlug(params.workspaceSlug);
+  if (workspace == null) notFound();
+
+  const view =
+    searchParams.view != null
+      ? await api.resource.view.byId(searchParams.view)
+      : null;
+
+  return (
+    <div>
+      <PageHeader>
+        <SidebarTrigger className="-ml-1" />
+        <Separator orientation="vertical" className="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem className="hidden md:block">
+              <BreadcrumbPage>Resources</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
+      <ResourcePageContent workspace={workspace} view={view} />
+    </div>
+  );
 }
diff --git a/packages/ui/src/sidebar.tsx b/packages/ui/src/sidebar.tsx
index 556cafb2a..4467e9ca2 100644
--- a/packages/ui/src/sidebar.tsx
+++ b/packages/ui/src/sidebar.tsx
@@ -331,7 +331,7 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "relative flex flex-1 flex-col bg-background",
         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className,
       )}

From cebea35b928064dded18224f619383cd343f4e21 Mon Sep 17 00:00:00 2001
From: Justin Brooks <jsbroks@gmail.com>
Date: Fri, 7 Feb 2025 13:10:42 -0500
Subject: [PATCH 04/14] resource view

---
 .../{ => _}/[resourceId]/ReleaseCell.tsx      |   0
 .../resources/{ => _}/[resourceId]/layout.tsx |   0
 .../resources/{ => _}/[resourceId]/page.tsx   |   0
 .../{ => _}/[resourceId]/variables/page.tsx   |   0
 .../[resourceId]/visualize/DepEdge.tsx        |   0
 .../ResourceVisualizationDiagram.tsx          |   0
 .../{ => _}/[resourceId]/visualize/edges.ts   |   0
 .../visualize/nodes/DeploymentNode.tsx        |   0
 .../visualize/nodes/EnvironmentNode.tsx       |   0
 .../visualize/nodes/ProviderNode.tsx          |   0
 .../visualize/nodes/ResourceNode.tsx          |   0
 .../[resourceId]/visualize/nodes/nodes.ts     |   0
 .../{ => _}/[resourceId]/visualize/page.tsx   |   0
 .../(app)/(resources)/resources/page.tsx      |  28 --
 .../(appv2)/TopSidebarIcon.tsx                |   2 +-
 .../(appv2)/_components/ConfigEditor.tsx      |  40 +++
 .../(appv2)/_components/CreateResource.tsx    | 255 ++++++++++++++++++
 .../(appv2)/_components/PageHeader.tsx        |  18 +-
 .../app/[workspaceSlug]/(appv2)/layout.tsx    |   2 +-
 .../SidebarKinds.tsx                          |   0
 .../(appv2)/resources/SidebarLink.tsx         |  30 +++
 .../(appv2)/resources/[resourceId]/layout.tsx |  84 ++++++
 .../(appv2)/resources/[resourceId]/page.tsx   |   3 +
 .../resources/list/ResourceGettingStarted.tsx |  49 ++++
 .../resources/list/ResourcePageContent.tsx    | 238 ++++++++++++++++
 .../(appv2)/resources/list/ResourcesTable.tsx | 249 +++++++++++++++++
 .../resources/list/export-resources.ts        |  65 +++++
 .../{resources2 => resources/list}/layout.tsx |  27 +-
 .../{resources2 => resources/list}/page.tsx   |   4 +-
 .../(appv2)/resources/page.tsx                |   8 +
 turbo.json                                    |   1 -
 31 files changed, 1059 insertions(+), 44 deletions(-)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/ReleaseCell.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/variables/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/visualize/DepEdge.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/visualize/ResourceVisualizationDiagram.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/visualize/edges.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/visualize/nodes/DeploymentNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/visualize/nodes/EnvironmentNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/visualize/nodes/ProviderNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/visualize/nodes/ResourceNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/visualize/nodes/nodes.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/{ => _}/[resourceId]/visualize/page.tsx (100%)
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/page.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/ConfigEditor.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/CreateResource.tsx
 rename apps/webservice/src/app/[workspaceSlug]/(appv2)/{resources2 => resources}/SidebarKinds.tsx (100%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarLink.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/page.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourceGettingStarted.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourcePageContent.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourcesTable.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/export-resources.ts
 rename apps/webservice/src/app/[workspaceSlug]/(appv2)/{resources2 => resources/list}/layout.tsx (54%)
 rename apps/webservice/src/app/[workspaceSlug]/(appv2)/{resources2 => resources/list}/page.tsx (89%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/page.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/ReleaseCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/ReleaseCell.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/ReleaseCell.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/ReleaseCell.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/variables/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/variables/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/variables/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/variables/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/DepEdge.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/DepEdge.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/DepEdge.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/DepEdge.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/ResourceVisualizationDiagram.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/ResourceVisualizationDiagram.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/ResourceVisualizationDiagram.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/ResourceVisualizationDiagram.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/edges.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/edges.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/edges.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/edges.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/DeploymentNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/DeploymentNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/DeploymentNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/DeploymentNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/EnvironmentNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/EnvironmentNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/EnvironmentNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/EnvironmentNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/ProviderNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/ProviderNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/ProviderNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/ProviderNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/ResourceNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/ResourceNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/ResourceNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/ResourceNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/nodes.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/nodes.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/nodes/nodes.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/nodes/nodes.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/[resourceId]/visualize/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/_/[resourceId]/visualize/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/page.tsx
deleted file mode 100644
index 79c5dca18..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-
-import { api } from "~/trpc/server";
-import { ResourcePageContent } from "./ResourcePageContent";
-
-export const metadata: Metadata = {
-  title: "Resources | Ctrlplane",
-};
-
-export default async function ResourcesPage(
-  props: {
-    params: Promise<{ workspaceSlug: string }>;
-    searchParams: Promise<{ view?: string }>;
-  }
-) {
-  const searchParams = await props.searchParams;
-  const params = await props.params;
-  const workspace = await api.workspace.bySlug(params.workspaceSlug);
-  if (workspace == null) notFound();
-
-  const view =
-    searchParams.view != null
-      ? await api.resource.view.byId(searchParams.view)
-      : null;
-
-  return <ResourcePageContent workspace={workspace} view={view} />;
-}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopSidebarIcon.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopSidebarIcon.tsx
index 5f4a52a05..6eba2f54e 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopSidebarIcon.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopSidebarIcon.tsx
@@ -25,7 +25,7 @@ export const TopSidebarIcon: React.FC<{
           className={cn(
             "rounded-lg p-2",
             active
-              ? "bg-purple-500/10 text-purple-400"
+              ? "bg-purple-500/20 text-purple-400"
               : "transition-colors duration-200 group-hover:bg-neutral-400/10",
           )}
         >
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/ConfigEditor.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/ConfigEditor.tsx
new file mode 100644
index 000000000..ea60c1ea9
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/ConfigEditor.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import React, { useEffect } from "react";
+import Editor, { loader } from "@monaco-editor/react";
+import colors from "tailwindcss/colors";
+
+import { Card } from "@ctrlplane/ui/card";
+
+export const ConfigEditor: React.FC<{
+  value: string;
+  onChange?: (v: string) => void;
+  readOnly?: boolean;
+}> = ({ readOnly, value, onChange }) => {
+  useEffect(() => {
+    loader.init().then((monaco) => {
+      monaco.editor.defineTheme("vs-dark-custom", {
+        base: "vs-dark",
+        inherit: true,
+        rules: [],
+        colors: {
+          "editor.background": colors.neutral[950],
+        },
+      });
+    });
+  }, []);
+  return (
+    <Card>
+      <div className="p-2">
+        <Editor
+          height="200px"
+          defaultLanguage="yaml"
+          value={value}
+          theme="vs-dark-custom"
+          onChange={(v) => onChange?.(v ?? "")}
+          options={{ readOnly, minimap: { enabled: false } }}
+        />
+      </div>
+    </Card>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/CreateResource.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/CreateResource.tsx
new file mode 100644
index 000000000..c7bacafd7
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/CreateResource.tsx
@@ -0,0 +1,255 @@
+"use client";
+
+import type { Workspace } from "@ctrlplane/db/schema";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { IconX } from "@tabler/icons-react";
+import yaml from "js-yaml";
+import { z } from "zod";
+
+import { Button } from "@ctrlplane/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@ctrlplane/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormRootError,
+  useFieldArray,
+  useForm,
+} from "@ctrlplane/ui/form";
+import { Input } from "@ctrlplane/ui/input";
+import { Label } from "@ctrlplane/ui/label";
+
+import { api } from "~/trpc/react";
+import { ConfigEditor } from "./ConfigEditor";
+
+const createResourceSchema = z.object({
+  name: z.string(),
+  kind: z.string(),
+  identifier: z.string().min(4),
+  version: z.string(),
+  config: z.string().refine((val) => {
+    try {
+      const output = yaml.load(val);
+      const isValidRecord = z.record(z.any()).safeParse(output).success;
+      return isValidRecord;
+    } catch {
+      return false;
+    }
+  }, "Config must be valid YAML Object"),
+  metadata: z.array(z.object({ key: z.string(), value: z.string() })),
+});
+
+const defaultValues = {
+  name: "",
+  identifier: "",
+  kind: "",
+  version: "",
+  metadata: [{ key: "", value: "" }],
+  config: "",
+};
+
+export const CreateResourceDialog: React.FC<{
+  children: React.ReactNode;
+  workspace: Workspace;
+  onSuccess?: () => void;
+}> = ({ children, workspace, onSuccess }) => {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    schema: createResourceSchema,
+    defaultValues,
+    mode: "onSubmit",
+  });
+
+  useEffect(() => {
+    if (!open) form.reset();
+  }, [form, open]);
+
+  const router = useRouter();
+  const create = api.resource.create.useMutation();
+  const onSubmit = form.handleSubmit(async (data) => {
+    const config = yaml.load(data.config) as Record<string, any>;
+    const resource = await create.mutateAsync({
+      ...data,
+      config,
+      metadata: Object.fromEntries(
+        data.metadata.map(({ key, value }) => [key, value]),
+      ),
+      workspaceId: workspace.id,
+    });
+
+    const query = new URLSearchParams(window.location.search);
+    query.set("resource_id", resource.id);
+    router.replace(`?${query.toString()}`);
+    router.refresh();
+    setOpen(false);
+    onSuccess?.();
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    name: "metadata",
+    control: form.control,
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-3">
+            <DialogHeader>
+              <DialogTitle>Bootstrap Resource</DialogTitle>
+              <DialogDescription>
+                Resources are typically created automatically through scanners
+                that discover and register new resources in your infrastructure.
+                However, you can manually bootstrap a resource if needed.
+              </DialogDescription>
+            </DialogHeader>
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="my-resource" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="identifier"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Identifier</FormLabel>
+                  <FormControl>
+                    <Input placeholder="mycompany-my-resource" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="version"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Version</FormLabel>
+                    <FormControl>
+                      <Input placeholder="mycompany/v1" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="kind"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Kind</FormLabel>
+                    <FormControl>
+                      <Input placeholder="MyCustomResource" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="config"
+              render={({ field: { onChange, value } }) => (
+                <FormItem>
+                  <FormLabel>Config</FormLabel>
+                  <FormControl>
+                    <ConfigEditor value={value} onChange={onChange} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div>
+              <div className="pb-2">
+                <Label>Metadata</Label>
+              </div>
+              {fields.map((field, index) => (
+                <FormField
+                  key={field.id}
+                  control={form.control}
+                  name={`metadata.${index}`}
+                  render={({ field: { onChange, value } }) => (
+                    <FormItem>
+                      <FormControl>
+                        <div className="flex items-center gap-4">
+                          <Input
+                            value={value.key}
+                            onChange={(e) =>
+                              onChange({ ...value, key: `${e.target.value}` })
+                            }
+                          />
+                          <Input
+                            value={value.value}
+                            onChange={(e) =>
+                              onChange({ ...value, value: `${e.target.value}` })
+                            }
+                          />
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-4 w-4"
+                            onClick={() => remove(index)}
+                          >
+                            <IconX />
+                          </Button>
+                        </div>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              ))}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="mt-4"
+                onClick={() => append({ key: "", value: "" })}
+              >
+                Add Metadata
+              </Button>
+            </div>
+
+            <FormRootError />
+            <DialogFooter>
+              <Button type="submit" disabled={create.isPending}>
+                Create Resource
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/PageHeader.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/PageHeader.tsx
index ba9d8b397..3d79f7ef2 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/PageHeader.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/PageHeader.tsx
@@ -1,9 +1,17 @@
-export const PageHeader: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+import { cn } from "@ctrlplane/ui";
+
+export const PageHeader: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className }) => {
   return (
-    <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
-      <div className="flex items-center gap-2 px-4">{children}</div>
+    <header
+      className={cn(
+        "sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background  px-4",
+        className,
+      )}
+    >
+      {children}
     </header>
   );
 };
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
index c99c19bc1..a2578d674 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
@@ -31,7 +31,7 @@ export default async function Layout(props: {
             <TopSidebarIcon
               icon={<IconCube />}
               label="Resources"
-              href={`/${params.workspaceSlug}/resources2`}
+              href={`/${params.workspaceSlug}/resources`}
             />
             <TopSidebarIcon
               icon={<IconCategory />}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/SidebarKinds.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarKinds.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/SidebarKinds.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarKinds.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarLink.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarLink.tsx
new file mode 100644
index 000000000..c4b4395a2
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarLink.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { cn } from "@ctrlplane/ui";
+import { SidebarMenuButton } from "@ctrlplane/ui/sidebar";
+
+export const SidebarLink: React.FC<{
+  icon?: React.ReactNode;
+  href: string;
+  children: React.ReactNode;
+}> = ({ icon, href, children }) => {
+  const pathname = usePathname();
+  const active = pathname.startsWith(href);
+  return (
+    <SidebarMenuButton asChild>
+      <Link
+        href={href}
+        className={cn(
+          "flex items-center gap-2 text-muted-foreground",
+          active && "bg-purple-500/10 text-purple-300",
+        )}
+      >
+        {icon}
+        {children}
+      </Link>
+    </SidebarMenuButton>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
new file mode 100644
index 000000000..ea7756aae
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
@@ -0,0 +1,84 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { IconArrowLeft, IconEdit, IconLock } from "@tabler/icons-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@ctrlplane/ui/breadcrumb";
+import { Button } from "@ctrlplane/ui/button";
+import { Separator } from "@ctrlplane/ui/separator";
+
+import { api } from "~/trpc/server";
+import { PageHeader } from "../../_components/PageHeader";
+
+const TabLink: React.FC<{
+  href: string;
+  isActive?: boolean;
+  children: React.ReactNode;
+}> = ({ href, isActive, children }) => {
+  return (
+    <Link
+      href={href}
+      data-state={isActive ? "active" : undefined}
+      className="relative border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 text-sm text-muted-foreground shadow-none transition-none focus-visible:ring-0 data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default async function Layout(props: {
+  children: React.ReactNode;
+  params: Promise<{ resourceId: string; workspaceSlug: string }>;
+}) {
+  const params = await props.params;
+  const resource = await api.resource.byId(params.resourceId);
+  if (resource == null) notFound();
+  return (
+    <div>
+      <PageHeader className="justify-between">
+        <div className="flex shrink-0 items-center gap-4">
+          <Link href={`/${params.workspaceSlug}/resources`}>
+            <IconArrowLeft className="size-5" />
+          </Link>
+          <Separator orientation="vertical" className="h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbPage>Resource List</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+
+        <div className="flex shrink-0 items-center gap-2">
+          <Button variant="outline">
+            <IconLock className="size-4" /> Lock
+          </Button>
+          <Button variant="outline">
+            <IconEdit className="size-4" /> Edit
+          </Button>
+        </div>
+      </PageHeader>
+
+      <div className="mx-6 mt-4 space-y-4">
+        <h1 className="text-2xl font-bold">{resource.name}</h1>
+        <div className="relative mb-6 mr-auto w-full border-b">
+          <div className="flex w-full justify-start">
+            <TabLink href="?tab=deployments" isActive>
+              Deployments
+            </TabLink>
+            <TabLink href="?tab=properties">Visualize</TabLink>
+            <TabLink href="?tab=logs">Logs</TabLink>
+            <TabLink href="?tab=logs">Audit Logs</TabLink>
+            <TabLink href="?tab=logs">Variables</TabLink>
+          </div>
+        </div>
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/page.tsx
new file mode 100644
index 000000000..0e6dc4c19
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/page.tsx
@@ -0,0 +1,3 @@
+export default function ResourcePage() {
+  return <div>Hello</div>;
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourceGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourceGettingStarted.tsx
new file mode 100644
index 000000000..2e7b127ff
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourceGettingStarted.tsx
@@ -0,0 +1,49 @@
+import type { Workspace } from "@ctrlplane/db/schema";
+import Link from "next/link";
+import { IconTopologyComplex } from "@tabler/icons-react";
+
+import { Button, buttonVariants } from "@ctrlplane/ui/button";
+
+import { CreateResourceDialog } from "../../_components/CreateResource";
+
+export const ResourceGettingStarted: React.FC<{ workspace: Workspace }> = ({
+  workspace,
+}) => {
+  return (
+    <div className="h-full w-full p-20">
+      <div className="container m-auto max-w-xl space-y-6 p-20">
+        <div className="relative -ml-1 text-neutral-500">
+          <IconTopologyComplex className="h-10 w-10" strokeWidth={0.5} />
+        </div>
+        <div className="font-semibold">Resources</div>
+        <div className="prose prose-invert text-sm text-muted-foreground">
+          <p>
+            Resources are the destinations where your jobs are executed. They
+            can represent a wide range of entities, from a traditional
+            infrastructure resource like an EKS cluster to a more abstract
+            resource like a Salesforce account.
+          </p>
+          <p>
+            To keep the status of resources up-to-date, they should be created
+            by providers. You can then attach metadata to these resources,
+            allowing Environments to easily filter and include them in specific
+            workflows.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <CreateResourceDialog workspace={workspace}>
+            <Button size="sm">Register Resource</Button>
+          </CreateResourceDialog>
+          <Link
+            href="https://docs.ctrlplane.dev/core-concepts/resources"
+            target="_blank"
+            passHref
+            className={buttonVariants({ variant: "secondary", size: "sm" })}
+          >
+            Documentation
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourcePageContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourcePageContent.tsx
new file mode 100644
index 000000000..d51c3d61c
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourcePageContent.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import type * as schema from "@ctrlplane/db/schema";
+import type { ResourceCondition } from "@ctrlplane/validators/resources";
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import {
+  IconDots,
+  IconDownload,
+  IconFilter,
+  IconLoader2,
+  IconSearch,
+} from "@tabler/icons-react";
+import range from "lodash/range";
+import { useDebounce, useKey } from "react-use";
+
+import { Badge } from "@ctrlplane/ui/badge";
+import { Button } from "@ctrlplane/ui/button";
+import { Skeleton } from "@ctrlplane/ui/skeleton";
+import { ColumnOperator } from "@ctrlplane/validators/conditions";
+import {
+  defaultCondition,
+  isEmptyCondition,
+} from "@ctrlplane/validators/resources";
+
+import { NoFilterMatch } from "~/app/[workspaceSlug]/(app)/_components/filter/NoFilterMatch";
+import { ResourceConditionBadge } from "~/app/[workspaceSlug]/(app)/_components/resource-condition/ResourceConditionBadge";
+import {
+  CreateResourceViewDialog,
+  ResourceConditionDialog,
+} from "~/app/[workspaceSlug]/(app)/_components/resource-condition/ResourceConditionDialog";
+import { ResourceViewActionsDropdown } from "~/app/[workspaceSlug]/(app)/_components/resource-condition/ResourceViewActionsDropdown";
+import { useResourceFilter } from "~/app/[workspaceSlug]/(app)/_components/resource-condition/useResourceFilter";
+import { api } from "~/trpc/react";
+import { exportResources } from "./export-resources";
+import { ResourceGettingStarted } from "./ResourceGettingStarted";
+import { ResourcesTable } from "./ResourcesTable";
+
+export const SearchInput: React.FC<{
+  value: string;
+  onChange: (v: string) => void;
+}> = ({ value, onChange }) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  useKey("Escape", () => setIsExpanded(false));
+
+  useEffect(() => {
+    if (isExpanded) inputRef.current?.focus();
+  }, [isExpanded]);
+
+  return (
+    <div className="flex items-center">
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setIsExpanded((e) => !e)}
+        className="flex h-7 w-7 flex-shrink-0 items-center gap-1 text-xs"
+      >
+        <IconSearch className="h-4 w-4" />
+      </Button>
+
+      <input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        ref={inputRef}
+        type="text"
+        className={`bg-transparent outline-none transition-all duration-200 ${
+          isExpanded ? "w-[150px] pl-1" : "w-0"
+        }`}
+        placeholder="Search..."
+        onBlur={() => setIsExpanded(false)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") setIsExpanded(false);
+        }}
+      />
+    </div>
+  );
+};
+
+export const ResourcePageContent: React.FC<{
+  workspace: schema.Workspace;
+  view: schema.ResourceView | null;
+}> = ({ workspace, view }) => {
+  const [search, setSearch] = React.useState("");
+  const { filter, setFilter } = useResourceFilter();
+
+  useDebounce(
+    () => {
+      if (search === "") return;
+      setFilter({
+        type: "comparison",
+        operator: "and",
+        conditions: [
+          // Keep any non-name conditions from existing filter
+          ...(filter && "conditions" in filter
+            ? filter.conditions.filter(
+                (c: ResourceCondition) => c.type !== "name",
+              )
+            : []),
+          {
+            type: "name",
+            operator: ColumnOperator.Contains,
+            value: search,
+          },
+        ],
+      });
+    },
+    500,
+    [search],
+  );
+
+  const workspaceId = workspace.id;
+  const resourcesAll = api.resource.byWorkspaceId.list.useQuery({
+    workspaceId,
+    limit: 0,
+  });
+  const resources = api.resource.byWorkspaceId.list.useQuery(
+    { workspaceId, filter: filter ?? undefined, limit: 500 },
+    { placeholderData: (prev) => prev },
+  );
+
+  const onFilterChange = (condition: ResourceCondition | null) => {
+    const cond = condition ?? defaultCondition;
+    if (isEmptyCondition(cond)) setFilter(null);
+    if (!isEmptyCondition(cond)) setFilter(cond);
+  };
+
+  const router = useRouter();
+
+  if (resourcesAll.isSuccess && resourcesAll.data.total === 0)
+    return <ResourceGettingStarted workspace={workspace} />;
+
+  return (
+    <div className="text-sm">
+      <div className="flex h-[41px] items-center justify-between border-b border-neutral-800 p-1 px-2">
+        <div className="flex items-center gap-1 pl-1">
+          <SearchInput value={search} onChange={setSearch} />
+          <ResourceConditionDialog condition={filter} onChange={onFilterChange}>
+            <div className="flex items-center gap-2">
+              {view == null && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="flex h-7 w-7 flex-shrink-0 items-center gap-1 text-xs"
+                >
+                  <IconFilter className="h-4 w-4" />
+                </Button>
+              )}
+
+              {filter != null && view == null && (
+                <ResourceConditionBadge condition={filter} />
+              )}
+              {view != null && (
+                <>
+                  <span>{view.name}</span>
+                  <ResourceViewActionsDropdown view={view}>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="flex h-7 w-7 flex-shrink-0 items-center gap-1 text-xs"
+                    >
+                      <IconDots className="h-4 w-4" />
+                    </Button>
+                  </ResourceViewActionsDropdown>
+                </>
+              )}
+            </div>
+          </ResourceConditionDialog>
+          {!resources.isLoading && resources.isFetching && (
+            <IconLoader2 className="h-4 w-4 animate-spin" />
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {filter != null && view == null && (
+            <CreateResourceViewDialog
+              workspaceId={workspace.id}
+              filter={filter}
+              onSubmit={(v) => setFilter(v.filter, v.id)}
+            >
+              <Button className="h-7">Save view</Button>
+            </CreateResourceViewDialog>
+          )}
+          {resources.data?.total != null && (
+            <div className="flex items-center gap-2 rounded-lg border border-neutral-800/50 px-2 py-1 text-sm text-muted-foreground">
+              Total:
+              <Badge
+                variant="outline"
+                className="rounded-full border-neutral-800 text-inherit"
+              >
+                {resources.data.total}
+              </Badge>
+            </div>
+          )}
+          {resources.data != null && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => exportResources(resources.data.items)}
+              className="flex items-center gap-2"
+            >
+              Export CSV
+              <IconDownload className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {resources.isLoading && (
+        <div className="space-y-2 p-4">
+          {range(10).map((i) => (
+            <Skeleton
+              key={i}
+              className="h-9 w-full"
+              style={{ opacity: 1 * (1 - i / 10) }}
+            />
+          ))}
+        </div>
+      )}
+      {resources.isSuccess && resources.data.total === 0 && (
+        <NoFilterMatch
+          numItems={resourcesAll.data?.total ?? 0}
+          itemType="resource"
+          onClear={() => setFilter(null)}
+        />
+      )}
+      {resources.data != null && resources.data.total > 0 && (
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 overflow-auto">
+          <ResourcesTable
+            resources={resources.data.items}
+            onTableRowClick={(r) =>
+              router.push(`/${workspace.slug}/resources/${r.id}`)
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourcesTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourcesTable.tsx
new file mode 100644
index 000000000..f724ce58f
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/ResourcesTable.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import type { Resource } from "@ctrlplane/db/schema";
+import type { ColumnDef } from "@tanstack/react-table";
+import { IconLock, IconX } from "@tabler/icons-react";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { formatDistanceToNowStrict } from "date-fns";
+
+import { cn } from "@ctrlplane/ui";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@ctrlplane/ui/alert-dialog";
+import { Button, buttonVariants } from "@ctrlplane/ui/button";
+import { Checkbox } from "@ctrlplane/ui/checkbox";
+import { Separator } from "@ctrlplane/ui/separator";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ctrlplane/ui/table";
+
+import { ResourceIcon } from "~/app/[workspaceSlug]/(app)/_components/ResourceIcon";
+import { api } from "~/trpc/react";
+
+const columns: ColumnDef<Resource>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsSomePageRowsSelected()
+            ? "indeterminate"
+            : table.getIsAllPageRowsSelected()
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className={cn(
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          (table.getIsAllPageRowsSelected() ||
+            table.getIsSomePageRowsSelected()) &&
+            "opacity-100",
+        )}
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        onClick={(e) => e.stopPropagation()}
+        aria-label="Select row"
+        className={cn(
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          row.getIsSelected() && "opacity-100",
+        )}
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    size: 10,
+    enableResizing: false,
+  },
+  {
+    id: "name",
+    header: "Name",
+    accessorKey: "name",
+    cell: (info) => {
+      const isLocked = info.row.original.lockedAt != null;
+      return (
+        <div className="flex items-center gap-2 px-2 py-1">
+          {isLocked && <IconLock className="h-4 w-4 shrink-0 text-red-300" />}
+          {!isLocked && (
+            <ResourceIcon
+              version={info.row.original.version}
+              kind={info.row.original.kind}
+            />
+          )}
+          {info.getValue<string>()}
+        </div>
+      );
+    },
+  },
+  {
+    id: "kind",
+    header: "Kind",
+    accessorKey: "kind",
+    cell: (info) => info.getValue(),
+  },
+  {
+    id: "updatedAt",
+    header: "Last Sync",
+    accessorKey: "updatedAt",
+    cell: (info) =>
+      info.getValue() != null
+        ? formatDistanceToNowStrict(info.getValue<Date>())
+        : "",
+  },
+];
+
+export const ResourcesTable: React.FC<{
+  activeResourceIds?: string[];
+  resources: Resource[];
+  onTableRowClick?: (resource: Resource) => void;
+}> = ({ resources, onTableRowClick, activeResourceIds }) => {
+  const deleteResourcesMutation = api.resource.delete.useMutation();
+
+  const table = useReactTable({
+    data: resources,
+    columns,
+    defaultColumn: {
+      minSize: 0,
+      size: Number.MAX_SAFE_INTEGER,
+      maxSize: Number.MAX_SAFE_INTEGER,
+    },
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const utils = api.useUtils();
+  const handleDeleteResources = async () => {
+    const selectedResources = table
+      .getSelectedRowModel()
+      .rows.map((row) => row.original.id);
+    await deleteResourcesMutation.mutateAsync(selectedResources);
+    await utils.resource.byWorkspaceId.invalidate();
+    table.toggleAllRowsSelected(false);
+  };
+
+  return (
+    <div className="relative">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="group">
+              {headerGroup.headers.map((header) => (
+                <TableHead
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  style={{
+                    width:
+                      header.getSize() === Number.MAX_SAFE_INTEGER
+                        ? "auto"
+                        : header.getSize(),
+                  }}
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow
+              className={cn(
+                "group cursor-pointer border-b-neutral-800/50",
+                activeResourceIds?.includes(row.original.id) &&
+                  "bg-neutral-800/50",
+                row.getIsSelected() && "bg-blue-500/20",
+                row.getIsSelected() && "hover:bg-blue-500/30",
+              )}
+              key={row.id}
+              onClick={() => onTableRowClick?.(row.original)}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <TableCell
+                  key={cell.id}
+                  style={{
+                    width:
+                      cell.column.getSize() === Number.MAX_SAFE_INTEGER
+                        ? "auto"
+                        : cell.column.getSize(),
+                  }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {table.getSelectedRowModel().rows.length > 0 && (
+        <div className="sticky bottom-4 left-0 right-0 flex justify-center">
+          <div className="flex items-center gap-2 rounded-md bg-neutral-900 p-2 shadow-lg">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.toggleAllRowsSelected(false)}
+              className="flex items-center gap-2 bg-transparent"
+            >
+              <span className="text-sm text-muted-foreground">
+                {table.getSelectedRowModel().rows.length} selected
+              </span>
+              <IconX className="h-4 w-4" />
+            </Button>
+            <Separator orientation="vertical" className="h-6" />
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="flex items-center gap-2 bg-transparent"
+                >
+                  Delete
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This action cannot be undone. This will permanently delete
+                    the selected resources.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction
+                    className={buttonVariants({ variant: "destructive" })}
+                    onClick={handleDeleteResources}
+                  >
+                    Delete
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/export-resources.ts b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/export-resources.ts
new file mode 100644
index 000000000..14ee672ba
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/export-resources.ts
@@ -0,0 +1,65 @@
+import type { RouterOutputs } from "@ctrlplane/api";
+import _ from "lodash";
+
+type Resource =
+  RouterOutputs["resource"]["byWorkspaceId"]["list"]["items"][number];
+
+const baseFields = [
+  "id",
+  "resourceName",
+  "kind",
+  "identifier",
+  "version",
+  "provider",
+  "createdAt",
+  "updatedAt",
+];
+
+const resourceArrayToCsv = (
+  resourceData: Record<string, string>[],
+  metadataKeys: string[],
+) => {
+  const headers = [...baseFields, ...metadataKeys];
+  const headerRow = headers
+    .map((v) => v.replaceAll('"', '""'))
+    .map((v) => `"${v}"`)
+    .join(",");
+
+  const dataRows = resourceData.map((row) =>
+    headers
+      .map((key) => row[key] ?? "")
+      .map((v) => v.replaceAll('"', '""'))
+      .map((v) => `"${v}"`)
+      .join(","),
+  );
+
+  return [headerRow, ...dataRows].join("\r\n");
+};
+
+export const exportResources = (resources: Resource[]) => {
+  const metadataKeys = Array.from(
+    new Set(resources.flatMap((r) => Object.keys(r.metadata))),
+  );
+  const rows: Record<string, string>[] = resources.map((resource) => ({
+    id: resource.id,
+    resourceName: resource.name,
+    kind: resource.kind,
+    identifier: resource.identifier,
+    version: resource.version,
+    provider: resource.provider?.name ?? "",
+    createdAt: resource.createdAt.toISOString(),
+    updatedAt: resource.updatedAt?.toISOString() ?? "",
+    ..._.zipObject(
+      metadataKeys,
+      metadataKeys.map((key) => resource.metadata[key] ?? ""),
+    ),
+  }));
+
+  const csv = resourceArrayToCsv(rows, metadataKeys);
+
+  const blob = new Blob([csv], { type: "text/csv" });
+  const url = URL.createObjectURL(blob);
+  const link = Object.assign(document.createElement("a"), { href: url });
+  link.setAttribute("download", "resources.csv");
+  link.click();
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx
similarity index 54%
rename from apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx
index ff68fcb81..b3a6890b3 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx
@@ -1,4 +1,5 @@
 import { notFound } from "next/navigation";
+import { IconList, IconPlug } from "@tabler/icons-react";
 
 import {
   Sidebar,
@@ -6,12 +7,12 @@ import {
   SidebarGroup,
   SidebarInset,
   SidebarMenu,
-  SidebarMenuButton,
   SidebarProvider,
 } from "@ctrlplane/ui/sidebar";
 
 import { api } from "~/trpc/server";
-import { SidebarGroupKinds } from "./SidebarKinds";
+import { SidebarGroupKinds } from "../SidebarKinds";
+import { SidebarLink } from "../SidebarLink";
 
 export default async function Layout(props: {
   children: React.ReactNode;
@@ -28,10 +29,24 @@ export default async function Layout(props: {
           <SidebarContent>
             <SidebarGroup>
               <SidebarMenu>
-                <SidebarMenuButton>List</SidebarMenuButton>
-                <SidebarMenuButton>Providers</SidebarMenuButton>
-                <SidebarMenuButton>Resources</SidebarMenuButton>
-                <SidebarMenuButton>Views</SidebarMenuButton>
+                <SidebarLink
+                  icon={<IconList />}
+                  href={`/${workspace.slug}/resources/list`}
+                >
+                  List
+                </SidebarLink>
+                <SidebarLink
+                  icon={<IconPlug />}
+                  href={`/${workspace.slug}/resources/providers`}
+                >
+                  Providers
+                </SidebarLink>
+                <SidebarLink href={`/${workspace.slug}/resources/groupings`}>
+                  Groupings
+                </SidebarLink>
+                <SidebarLink href={`/${workspace.slug}/resources/views`}>
+                  Views
+                </SidebarLink>
               </SidebarMenu>
             </SidebarGroup>
 
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/page.tsx
similarity index 89%
rename from apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/page.tsx
index 7a716fc05..0ef311dbe 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources2/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/page.tsx
@@ -10,8 +10,8 @@ import { Separator } from "@ctrlplane/ui/separator";
 import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 
 import { api } from "~/trpc/server";
-import { PageHeader } from "../_components/PageHeader";
-import { ResourcePageContent } from "../../(app)/(resources)/resources/ResourcePageContent";
+import { PageHeader } from "../../_components/PageHeader";
+import { ResourcePageContent } from "./ResourcePageContent";
 
 export default async function ResourcesPage(props: {
   params: Promise<{ workspaceSlug: string }>;
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/page.tsx
new file mode 100644
index 000000000..16eec1853
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/page.tsx
@@ -0,0 +1,8 @@
+import { redirect } from "next/navigation";
+
+export default async function ResourcesPage(props: {
+  params: Promise<{ workspaceSlug: string }>;
+}) {
+  const params = await props.params;
+  redirect(`/${params.workspaceSlug}/resources/list`);
+}
diff --git a/turbo.json b/turbo.json
index dc695943a..d46e2a3ed 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,7 +1,6 @@
 {
   "$schema": "https://turborepo.org/schema.json",
   "globalDependencies": ["**/.env"],
-  "ui": "stream",
   "globalEnv": ["DATABASE_URL", "AUTH_SECRET"],
   "tasks": {
     "topo": {

From 62c0453b70548f88b070a15a06a3256ae8a5e2b5 Mon Sep 17 00:00:00 2001
From: Justin Brooks <jsbroks@gmail.com>
Date: Fri, 7 Feb 2025 17:19:01 -0500
Subject: [PATCH 05/14] add systems view

---
 .../(appv2)/systems2/SystemSelector.tsx       | 73 ++++++++++++++++
 .../(appv2)/systems2/[systemSlug]/layout.tsx  | 84 +++++++++++++++++++
 .../(appv2)/systems2/[systemSlug]/page.tsx    | 13 +++
 .../[workspaceSlug]/(appv2)/systems2/page.tsx | 21 +++++
 4 files changed, 191 insertions(+)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/page.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx
new file mode 100644
index 000000000..51d6639cb
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import type { System } from "@ctrlplane/db/schema";
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+
+import { cn } from "@ctrlplane/ui";
+import { Button } from "@ctrlplane/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@ctrlplane/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@ctrlplane/ui/popover";
+
+export const SystemSelector: React.FC<{
+  workspaceSlug: string;
+  selectedSystem: System | null;
+  systems: System[];
+}> = ({ workspaceSlug, selectedSystem, systems }) => {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  console.log(systems, selectedSystem);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {selectedSystem?.name ?? "Select system..."}
+          <IconChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search system..." />
+          <CommandList>
+            <CommandEmpty>No Systems found.</CommandEmpty>
+            <CommandGroup>
+              {systems.map((system) => (
+                <CommandItem
+                  key={system.id}
+                  value={system.slug}
+                  onSelect={() => {
+                    router.push(`/${workspaceSlug}/systems2/${system.slug}`);
+                    router.refresh();
+                  }}
+                >
+                  <IconCheck
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      selectedSystem?.id === system.id
+                        ? "opacity-100"
+                        : "opacity-0",
+                    )}
+                  />
+                  {system.name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx
new file mode 100644
index 000000000..44f02210b
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx
@@ -0,0 +1,84 @@
+import { notFound } from "next/navigation";
+import {
+  IconBook,
+  IconPlant,
+  IconShip,
+  IconVariable,
+} from "@tabler/icons-react";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarProvider,
+} from "@ctrlplane/ui/sidebar";
+
+import { api } from "~/trpc/server";
+import { SidebarLink } from "../../resources/SidebarLink";
+import { SystemSelector } from "../SystemSelector";
+
+export default async function SystemsLayout(props: {
+  children: React.ReactNode;
+  params: Promise<{ workspaceSlug: string; systemSlug: string }>;
+}) {
+  const params = await props.params;
+  const workspace = await api.workspace.bySlug(params.workspaceSlug);
+  if (workspace == null) notFound();
+
+  const systems = await api.system.list({ workspaceId: workspace.id });
+  const selectedSystem = systems.items.find(
+    (system) => system.slug === params.systemSlug,
+  );
+
+  return (
+    <div className="relative">
+      <SidebarProvider>
+        <Sidebar className="absolute left-0 top-0 -z-10">
+          <SidebarHeader>
+            <SystemSelector
+              workspaceSlug={workspace.slug}
+              selectedSystem={selectedSystem ?? null}
+              systems={systems.items}
+            />
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarMenu>
+                <SidebarLink
+                  icon={<IconPlant />}
+                  href={`/${workspace.slug}/systems/list`}
+                >
+                  Environments
+                </SidebarLink>
+                <SidebarLink
+                  icon={<IconShip />}
+                  href={`/${workspace.slug}/resources/providers`}
+                >
+                  Deployments
+                </SidebarLink>
+                <SidebarLink
+                  icon={<IconBook />}
+                  href={`/${workspace.slug}/resources/groupings`}
+                >
+                  Runbooks
+                </SidebarLink>
+                <SidebarLink
+                  icon={<IconVariable />}
+                  href={`/${workspace.slug}/resources/views`}
+                >
+                  Variables Sets
+                </SidebarLink>
+              </SidebarMenu>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+        <SidebarInset className="h-[calc(100vh-56px-1px)]">
+          {props.children}
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx
new file mode 100644
index 000000000..d9672a5a6
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx
@@ -0,0 +1,13 @@
+import { notFound } from "next/navigation";
+
+import { api } from "~/trpc/server";
+
+export default async function SystemsPage(props: {
+  params: Promise<{ workspaceSlug: string }>;
+}) {
+  const params = await props.params;
+  const workspace = await api.workspace.bySlug(params.workspaceSlug);
+  if (workspace == null) notFound();
+
+  return <></>;
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/page.tsx
new file mode 100644
index 000000000..d894b660d
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/page.tsx
@@ -0,0 +1,21 @@
+import { notFound, redirect } from "next/navigation";
+
+import { api } from "~/trpc/server";
+
+export default async function SystemsPage(props: {
+  params: Promise<{ workspaceSlug: string }>;
+}) {
+  const params = await props.params;
+  const workspace = await api.workspace.bySlug(params.workspaceSlug);
+  if (workspace == null) notFound();
+
+  const systems = await api.system.list({
+    workspaceId: workspace.id,
+    limit: 1,
+  });
+  const [firstSystem] = systems.items;
+  if (firstSystem == null) notFound();
+  const system = firstSystem;
+
+  return redirect(`/${workspace.slug}/systems/${system.slug}`);
+}

From 24674ff3c53b54094a6245afb494aeadb66504c2 Mon Sep 17 00:00:00 2001
From: Justin Brooks <jsbroks@gmail.com>
Date: Fri, 7 Feb 2025 17:50:14 -0500
Subject: [PATCH 06/14] fix overlay

---
 .../app/[workspaceSlug]/(appv2)/TopNav.tsx    |  2 +-
 .../app/[workspaceSlug]/(appv2)/layout.tsx    | 82 +++++++++----------
 .../(appv2)/resources/list/layout.tsx         |  2 +-
 .../(appv2)/systems2/SystemSelector.tsx       |  2 -
 .../(appv2)/systems2/[systemSlug]/layout.tsx  |  6 +-
 .../(appv2)/systems2/[systemSlug]/page.tsx    | 29 ++++++-
 6 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx
index aa3e791b2..f65ac076a 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx
@@ -16,7 +16,7 @@ export const TopNav: React.FC<{ workspaceSlug: string }> = async ({
   const viewer = await api.user.viewer();
   const workspaces = await api.workspace.list();
   return (
-    <nav className="flex h-14 w-full shrink-0 items-center gap-4 bg-neutral-900/50 px-4">
+    <nav className="flex h-14 w-full shrink-0 items-center gap-4 px-4">
       <div className="ml-3 flex shrink-0 items-center gap-7">
         <Image
           src="/android-chrome-192x192.png"
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
index a2578d674..38c8ce50b 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
@@ -22,52 +22,50 @@ export default async function Layout(props: {
 }) {
   const params = await props.params;
   return (
-    <div className="flex h-screen w-full flex-col">
+    <div className="flex h-screen w-full flex-col bg-[#111111]">
       <TopNav workspaceSlug={params.workspaceSlug} />
 
       <div className="flex flex-1">
-        <div className="flex bg-neutral-950">
-          <aside className="flex flex-col bg-neutral-900/50 pt-2">
-            <TopSidebarIcon
-              icon={<IconCube />}
-              label="Resources"
-              href={`/${params.workspaceSlug}/resources`}
-            />
-            <TopSidebarIcon
-              icon={<IconCategory />}
-              label="Systems"
-              href={`/${params.workspaceSlug}/systems2`}
-            />
-            <TopSidebarIcon
-              icon={<IconRocket />}
-              label="Deploys"
-              href={`/${params.workspaceSlug}/deployments2`}
-            />
-            <TopSidebarIcon
-              icon={<IconBook />}
-              label="Runbooks"
-              href={`/${params.workspaceSlug}/runbooks`}
-            />
-            <TopSidebarIcon
-              icon={<IconChartBar />}
-              label="Insights"
-              href={`/${params.workspaceSlug}/insights`}
-            />
-            <div className="flex-grow" />
-            <TopSidebarIcon
-              icon={<IconPlug />}
-              label="Connect"
-              href={`/${params.workspaceSlug}/systems2`}
-            />
-            <TopSidebarIcon
-              icon={<IconSettings />}
-              label="Settings"
-              href={`/${params.workspaceSlug}/systems2`}
-            />
-          </aside>
-        </div>
+        <aside className="flex flex-col bg-[#111111] pt-2">
+          <TopSidebarIcon
+            icon={<IconCube />}
+            label="Resources"
+            href={`/${params.workspaceSlug}/resources`}
+          />
+          <TopSidebarIcon
+            icon={<IconCategory />}
+            label="Systems"
+            href={`/${params.workspaceSlug}/systems2`}
+          />
+          <TopSidebarIcon
+            icon={<IconRocket />}
+            label="Deploys"
+            href={`/${params.workspaceSlug}/deployments2`}
+          />
+          <TopSidebarIcon
+            icon={<IconBook />}
+            label="Runbooks"
+            href={`/${params.workspaceSlug}/runbooks`}
+          />
+          <TopSidebarIcon
+            icon={<IconChartBar />}
+            label="Insights"
+            href={`/${params.workspaceSlug}/insights`}
+          />
+          <div className="flex-grow" />
+          <TopSidebarIcon
+            icon={<IconPlug />}
+            label="Connect"
+            href={`/${params.workspaceSlug}/systems2`}
+          />
+          <TopSidebarIcon
+            icon={<IconSettings />}
+            label="Settings"
+            href={`/${params.workspaceSlug}/systems2`}
+          />
+        </aside>
 
-        <div className="flex-1 rounded-tl-lg border-l border-t">
+        <div className="flex-1 overflow-auto rounded-tl-lg border-l border-t bg-neutral-950">
           {props.children}
         </div>
       </div>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx
index b3a6890b3..32b148d99 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx
@@ -25,7 +25,7 @@ export default async function Layout(props: {
   return (
     <div className="relative">
       <SidebarProvider>
-        <Sidebar className="absolute left-0 top-0 -z-10">
+        <Sidebar className="absolute left-0 top-0">
           <SidebarContent>
             <SidebarGroup>
               <SidebarMenu>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx
index 51d6639cb..341485bc1 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx
@@ -24,7 +24,6 @@ export const SystemSelector: React.FC<{
 }> = ({ workspaceSlug, selectedSystem, systems }) => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
-  console.log(systems, selectedSystem);
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -47,7 +46,6 @@ export const SystemSelector: React.FC<{
               {systems.map((system) => (
                 <CommandItem
                   key={system.id}
-                  value={system.slug}
                   onSelect={() => {
                     router.push(`/${workspaceSlug}/systems2/${system.slug}`);
                     router.refresh();
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx
index 44f02210b..1ef838205 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx
@@ -34,10 +34,10 @@ export default async function SystemsLayout(props: {
   );
 
   return (
-    <div className="relative">
+    <div className="relative rounded-tl-lg">
       <SidebarProvider>
-        <Sidebar className="absolute left-0 top-0 -z-10">
-          <SidebarHeader>
+        <Sidebar className="absolute left-0 top-0 rounded-tl-lg">
+          <SidebarHeader className="rounded-tl-lg">
             <SystemSelector
               workspaceSlug={workspace.slug}
               selectedSystem={selectedSystem ?? null}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx
index d9672a5a6..8180057d5 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx
@@ -1,5 +1,8 @@
 import { notFound } from "next/navigation";
 
+import { Button } from "@ctrlplane/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@ctrlplane/ui/popover";
+
 import { api } from "~/trpc/server";
 
 export default async function SystemsPage(props: {
@@ -9,5 +12,29 @@ export default async function SystemsPage(props: {
   const workspace = await api.workspace.bySlug(params.workspaceSlug);
   if (workspace == null) notFound();
 
-  return <></>;
+  return (
+    <>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Open popover</Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80">
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <h2 className="font-medium leading-none">Dimensions</h2>
+              <p className="text-sm text-muted-foreground">
+                Set the dimensions for the layer.
+              </p>
+            </div>
+            <div className="grid gap-2">
+              <div className="grid grid-cols-3 items-center gap-4"></div>
+              <div className="grid grid-cols-3 items-center gap-4"></div>
+              <div className="grid grid-cols-3 items-center gap-4"></div>
+              <div className="grid grid-cols-3 items-center gap-4"></div>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
 }

From 8cadc4cb3969f9f577e160737290e6ca06fb0dfa Mon Sep 17 00:00:00 2001
From: Justin Brooks <jsbroks@gmail.com>
Date: Fri, 7 Feb 2025 21:13:05 -0500
Subject: [PATCH 07/14] fix accent

---
 .../src/app/[workspaceSlug]/(appv2)/layout.tsx         | 10 +++++-----
 apps/webservice/src/app/globals.css                    |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
index 38c8ce50b..be7666330 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
@@ -27,6 +27,11 @@ export default async function Layout(props: {
 
       <div className="flex flex-1">
         <aside className="flex flex-col bg-[#111111] pt-2">
+          <TopSidebarIcon
+            icon={<IconRocket />}
+            label="Deploys"
+            href={`/${params.workspaceSlug}/deployments2`}
+          />
           <TopSidebarIcon
             icon={<IconCube />}
             label="Resources"
@@ -37,11 +42,6 @@ export default async function Layout(props: {
             label="Systems"
             href={`/${params.workspaceSlug}/systems2`}
           />
-          <TopSidebarIcon
-            icon={<IconRocket />}
-            label="Deploys"
-            href={`/${params.workspaceSlug}/deployments2`}
-          />
           <TopSidebarIcon
             icon={<IconBook />}
             label="Runbooks"
diff --git a/apps/webservice/src/app/globals.css b/apps/webservice/src/app/globals.css
index cbac91966..01552ef44 100644
--- a/apps/webservice/src/app/globals.css
+++ b/apps/webservice/src/app/globals.css
@@ -54,7 +54,7 @@
     --secondary-foreground: 0 0% 98%;
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
+    --accent: 0 0% 3.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;

From 2f40eedfbb49029701e4677f3ca4d49370c28057 Mon Sep 17 00:00:00 2001
From: Justin Brooks <justin@wandb.com>
Date: Sat, 8 Feb 2025 01:14:34 -0500
Subject: [PATCH 08/14] clean up more

---
 .../(app)/(job)/jobs/JobTable.tsx             |  2 +-
 .../(app)/_components/MetadataInfo.tsx        |  2 +-
 .../deployment-resource-drawer/TableRow.tsx   |  4 +-
 .../_components/job-drawer/JobDrawer.tsx      |  4 +-
 .../[workspaceSlug]/(app)/dashboard/page.tsx  | 10 +--
 .../JobHistoryChart.tsx                       |  0
 .../SystemActionsDropdown.tsx                 |  0
 .../SystemGettingStarted.tsx                  |  0
 .../SystemsBreadcrumb.tsx                     |  2 +-
 .../{systems => systems-old}/SystemsList.tsx  |  0
 .../{systems => systems-old}/SystemsTable.tsx |  0
 .../(app)/{systems => systems-old}/TopNav.tsx |  0
 .../_components/DeleteSystemDialog.tsx        |  0
 .../_components/EditSystemDialog.tsx          |  0
 .../[systemSlug]/_components/nFormatter.ts    |  0
 .../_components/variables/ConfigFields.tsx    |  0
 .../variables/VariableDeploymentInput.tsx     |  0
 .../variables/VariableEnvironmentInput.tsx    |  0
 .../_components/variables/VariableInputs.tsx  |  0
 .../variables/VariableResourceInput.tsx       |  0
 .../[systemSlug]/deployments/DeployButton.tsx |  0
 .../deployments/DeploymentBarChart.tsx        |  0
 .../deployments/DeploymentGettingStarted.tsx  |  0
 .../deployments/ReleaseDropdownMenu.tsx       |  0
 .../deployments/ReleaseEnvironmentCell.tsx    |  0
 .../[systemSlug]/deployments/TableCells.tsx   |  0
 .../deployments/TableDeployments.tsx          |  0
 .../[deploymentSlug]/DeploymentNavBar.tsx     |  2 +-
 .../DeploymentResourcesDialog.tsx             |  0
 .../EditDeploymentSection.tsx                 |  0
 .../[deploymentSlug]/JobAgentSection.tsx      |  0
 .../[deploymentSlug]/NavigationMenuAction.tsx |  0
 .../[deploymentSlug]/NavigationMenuTab.tsx    |  0
 .../[deploymentSlug]/SettingsSidebar.tsx      |  0
 .../job-agent/JobAgentConfigForm.tsx          |  0
 .../configure/job-agent/page.tsx              |  0
 .../hooks/CreateHookDialog.tsx                |  0
 .../hooks/DeleteHookDialog.tsx                |  0
 .../[deploymentSlug]/hooks/EditHookDialog.tsx |  0
 .../hooks/HookActionsDropdown.tsx             |  0
 .../[deploymentSlug]/hooks/HooksTable.tsx     |  0
 .../[deploymentSlug]/hooks/page.tsx           |  0
 .../deployments/[deploymentSlug]/layout.tsx   |  0
 .../deployments/[deploymentSlug]/page.tsx     |  0
 .../CreateReleaseChannelDialog.tsx            |  0
 .../release-channels/ReleaseChannelsTable.tsx |  0
 .../release-channels/page.tsx                 |  0
 .../releases/CreateVariableDialog.tsx         |  2 +-
 .../releases/DeploymentPageContent.tsx        |  0
 .../releases/JobHistoryPopover.tsx            |  0
 .../releases/ReleaseDistributionBarChart.tsx  |  0
 .../releases/ReleaseDistributionPopover.tsx   |  0
 .../releases/[versionId]/ApprovalCheck.tsx    |  0
 .../[versionId]/EnvironmentApprovalRow.tsx    |  0
 .../releases/[versionId]/EnvironmentNode.tsx  |  0
 .../releases/[versionId]/FlowDiagram.tsx      |  0
 .../releases/[versionId]/FlowNode.tsx         |  0
 .../releases/[versionId]/FlowPolicyNode.tsx   |  0
 .../releases/[versionId]/JobDropdownMenu.tsx  |  0
 .../releases/[versionId]/JobsTable.tsx        |  0
 .../[versionId]/ResourceReleaseTable.tsx      |  0
 .../releases/[versionId]/StatusIcons.tsx      |  0
 .../releases/[versionId]/TriggerNode.tsx      |  0
 .../releases/[versionId]/page.tsx             |  0
 .../releases/[versionId]/useReleaseChannel.ts |  0
 .../[deploymentSlug]/releases/page.tsx        |  0
 .../resources/[resourceId]/page.tsx           |  0
 .../[deploymentSlug]/resources/page.tsx       |  0
 .../variables/AddVariableValueDialog.tsx      |  2 +-
 .../variables/EditVariableDialog.tsx          |  0
 .../variables/VariableDropdown.tsx            |  0
 .../variables/VariableTable.tsx               |  0
 .../variables/VariableValueDropdown.tsx       |  2 +-
 .../[deploymentSlug]/variables/page.tsx       |  0
 .../variables/variable-data.ts                |  0
 .../[systemSlug]/deployments/page.tsx         |  0
 .../[systemSlug]/deployments/status-color.tsx |  0
 .../environments/DeleteNodeDialog.tsx         |  0
 .../environments/EnvFlowBuilder.tsx           |  0
 .../environments/EnvFlowPanel.tsx             |  0
 .../environments/FlowNodeTypes.tsx            |  0
 .../environments/SidepanelContext.tsx         |  0
 .../TargetFilterUniquenessIndicator.tsx       |  0
 .../[environmentId]/ResourceCharts.tsx        |  0
 .../environments/[environmentId]/page.tsx     |  0
 .../[systemSlug]/environments/edges.ts        |  0
 .../[systemSlug]/environments/layout.tsx      |  0
 .../[systemSlug]/environments/page.tsx        |  0
 .../environments/useMatchSorter.ts            |  0
 .../[systemSlug]/page.tsx                     |  0
 .../runbooks/DeleteRunbookDialog.tsx          |  0
 .../runbooks/EditRunbookDialog.tsx            |  0
 .../[systemSlug]/runbooks/EditRunbookForm.tsx |  0
 .../runbooks/RunbookGettingStarted.tsx        |  0
 .../[systemSlug]/runbooks/RunbookRow.tsx      |  0
 .../[systemSlug]/runbooks/TriggerRunbook.tsx  |  0
 .../runbooks/[runbookId]/RunbookNavBar.tsx    |  0
 .../runbooks/[runbookId]/layout.tsx           |  0
 .../runbooks/[runbookId]/page.tsx             |  0
 .../[runbookId]/settings/EditRunbook.tsx      |  0
 .../runbooks/[runbookId]/settings/page.tsx    |  0
 .../runbooks/create/CreateRunbookForm.tsx     |  0
 .../runbooks/create/RunbookVariableEditor.tsx |  2 +-
 .../[systemSlug]/runbooks/create/page.tsx     |  0
 .../[systemSlug]/runbooks/page.tsx            |  0
 .../variable-sets/CreateVariableSetDialog.tsx |  0
 .../GettingStartedVariableSets.tsx            |  0
 .../variable-sets/VariableSetsTable.tsx       |  0
 .../variable-sets/[variableSetId]/page.tsx    |  0
 .../[systemSlug]/variable-sets/page.tsx       |  0
 .../(app)/{systems => systems-old}/page.tsx   |  0
 .../(appv2)/_components/navigation/Tabs.tsx   | 31 +++++++
 .../app/[workspaceSlug]/(appv2)/layout.tsx    |  8 +-
 .../(appv2)/resources/[resourceId]/layout.tsx | 25 ++----
 .../(appv2)/resources/list/page.tsx           |  2 +-
 .../{systems2 => systems}/SystemSelector.tsx  |  2 +-
 .../deployments/[deploymentSlug]/layout.tsx   | 68 +++++++++++++++
 .../deployments/[deploymentSlug]/page.tsx     |  3 +
 .../environments/[environmentId]/layout.tsx   | 67 ++++++++++++++
 .../environments/[environmentId]/page.tsx     |  3 +
 .../(sidebar)/deployments/page.tsx            | 87 +++++++++++++++++++
 .../(sidebar)/environments/page.tsx           | 87 +++++++++++++++++++
 .../[systemSlug]/(sidebar)}/layout.tsx        | 12 +--
 .../systems/[systemSlug]/(sidebar)/page.tsx   | 13 +++
 .../(appv2)/{systems2 => systems}/page.tsx    |  0
 .../(appv2)/systems2/[systemSlug]/page.tsx    | 40 ---------
 apps/webservice/src/app/globals.css           |  2 +-
 docker-compose.dev.yaml                       |  2 -
 docker-compose.yaml                           |  2 -
 129 files changed, 393 insertions(+), 95 deletions(-)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/JobHistoryChart.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/SystemActionsDropdown.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/SystemGettingStarted.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/SystemsBreadcrumb.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/SystemsList.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/SystemsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/TopNav.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/_components/DeleteSystemDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/_components/EditSystemDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/_components/nFormatter.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/_components/variables/ConfigFields.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/_components/variables/VariableDeploymentInput.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/_components/variables/VariableEnvironmentInput.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/_components/variables/VariableInputs.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/_components/variables/VariableResourceInput.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/DeployButton.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/DeploymentBarChart.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/DeploymentGettingStarted.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/ReleaseDropdownMenu.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/ReleaseEnvironmentCell.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/TableCells.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/TableDeployments.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/DeploymentResourcesDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/JobHistoryPopover.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ApprovalCheck.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentApprovalRow.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ResourceReleaseTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/StatusIcons.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/resources/[resourceId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/resources/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/deployments/status-color.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/DeleteNodeDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/EnvFlowBuilder.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/EnvFlowPanel.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/FlowNodeTypes.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/SidepanelContext.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/[environmentId]/ResourceCharts.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/[environmentId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/edges.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/environments/useMatchSorter.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/DeleteRunbookDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/EditRunbookDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/EditRunbookForm.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/RunbookGettingStarted.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/RunbookRow.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/TriggerRunbook.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/[runbookId]/RunbookNavBar.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/[runbookId]/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/[runbookId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/[runbookId]/settings/EditRunbook.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/[runbookId]/settings/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/create/CreateRunbookForm.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/create/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/runbooks/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/variable-sets/VariableSetsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/variable-sets/[variableSetId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/[systemSlug]/variable-sets/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/(app)/{systems => systems-old}/page.tsx (100%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/navigation/Tabs.tsx
 rename apps/webservice/src/app/[workspaceSlug]/(appv2)/{systems2 => systems}/SystemSelector.tsx (97%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/layout.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/page.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/layout.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/page.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/deployments/page.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/environments/page.tsx
 rename apps/webservice/src/app/[workspaceSlug]/(appv2)/{systems2/[systemSlug] => systems/[systemSlug]/(sidebar)}/layout.tsx (82%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/page.tsx
 rename apps/webservice/src/app/[workspaceSlug]/(appv2)/{systems2 => systems}/page.tsx (100%)
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobTable.tsx
index deb583e27..bf710a515 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobTable.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobTable.tsx
@@ -27,7 +27,7 @@ import { VariableCell } from "~/app/[workspaceSlug]/(app)/_components/job-table/
 import { JobTableStatusIcon } from "~/app/[workspaceSlug]/(app)/_components/JobTableStatusIcon";
 import { useFilter } from "~/app/[workspaceSlug]/(app)/_components/useFilter";
 import { api } from "~/trpc/react";
-import { nFormatter } from "../../systems/[systemSlug]/_components/nFormatter";
+import { nFormatter } from "../../systems-old/[systemSlug]/_components/nFormatter";
 
 type JobTableProps = {
   workspaceId: string;
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/MetadataInfo.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/MetadataInfo.tsx
index a8fe32080..95cc31ca0 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/MetadataInfo.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/MetadataInfo.tsx
@@ -3,7 +3,7 @@ import { IconSparkles } from "@tabler/icons-react";
 import { Input } from "@ctrlplane/ui/input";
 import { ReservedMetadataKey } from "@ctrlplane/validators/conditions";
 
-import { useMatchSorterWithSearch } from "../systems/[systemSlug]/environments/useMatchSorter";
+import { useMatchSorterWithSearch } from "../systems-old/[systemSlug]/environments/useMatchSorter";
 
 export const MetadataInfo: React.FC<{ metadata: Record<string, string> }> = (
   props,
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/TableRow.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/TableRow.tsx
index 97d520270..0d72288e1 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/TableRow.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/TableRow.tsx
@@ -23,8 +23,8 @@ import {
 import { JobFilterType, JobStatusReadable } from "@ctrlplane/validators/jobs";
 
 import { api } from "~/trpc/react";
-import { JobDropdownMenu } from "../../systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
-import { DeployButton } from "../../systems/[systemSlug]/deployments/DeployButton";
+import { JobDropdownMenu } from "../../systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
+import { DeployButton } from "../../systems-old/[systemSlug]/deployments/DeployButton";
 import { JobLinksCell } from "../job-table/JobLinksCell";
 import { JobTableStatusIcon } from "../JobTableStatusIcon";
 
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobDrawer.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobDrawer.tsx
index 9de37c364..099359a80 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobDrawer.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobDrawer.tsx
@@ -13,8 +13,8 @@ import { Button, buttonVariants } from "@ctrlplane/ui/button";
 import { Drawer, DrawerContent, DrawerTitle } from "@ctrlplane/ui/drawer";
 import { ReservedMetadataKey } from "@ctrlplane/validators/conditions";
 
-import { JobDropdownMenu } from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
-import { useReleaseChannel } from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel";
+import { JobDropdownMenu } from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
+import { useReleaseChannel } from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel";
 import { api } from "~/trpc/react";
 import { MetadataInfo } from "../MetadataInfo";
 import { JobAgent } from "./JobAgent";
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/page.tsx
index 45b1ee574..66ed756da 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/page.tsx
@@ -4,7 +4,7 @@ import { notFound } from "next/navigation";
 import { Card } from "@ctrlplane/ui/card";
 
 import { api } from "../../../../trpc/server";
-import { JobHistoryChart } from "../systems/JobHistoryChart";
+import { JobHistoryChart } from "../systems-old/JobHistoryChart";
 import { ResourceAnnotationPieChart } from "./ResourceAnnotationPieChart";
 
 type PageProps = {
@@ -18,11 +18,9 @@ export async function generateMetadata(props: PageProps): Promise<Metadata> {
   };
 }
 
-export default async function Dashboard(
-  props: {
-    params: Promise<{ workspaceSlug: string }>;
-  }
-) {
+export default async function Dashboard(props: {
+  params: Promise<{ workspaceSlug: string }>;
+}) {
   const params = await props.params;
   const { workspaceSlug } = params;
   const workspace = await api.workspace.bySlug(workspaceSlug).catch(() => null);
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/JobHistoryChart.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/JobHistoryChart.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/JobHistoryChart.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/JobHistoryChart.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemActionsDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemActionsDropdown.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemActionsDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemActionsDropdown.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemGettingStarted.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemGettingStarted.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsBreadcrumb.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemsBreadcrumb.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsBreadcrumb.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemsBreadcrumb.tsx
index 9e721a954..61c729fd7 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsBreadcrumb.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemsBreadcrumb.tsx
@@ -18,7 +18,7 @@ import {
 } from "@ctrlplane/ui/breadcrumb";
 import { Button } from "@ctrlplane/ui/button";
 
-import { SystemActionsDropdown } from "~/app/[workspaceSlug]/(app)/systems/SystemActionsDropdown";
+import { SystemActionsDropdown } from "~/app/[workspaceSlug]/(app)/systems-old/SystemActionsDropdown";
 import { api } from "~/trpc/server";
 
 export const SystemBreadcrumbNavbar = async ({
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemsList.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemsList.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/TopNav.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/TopNav.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/TopNav.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/TopNav.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/DeleteSystemDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/DeleteSystemDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/DeleteSystemDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/DeleteSystemDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/EditSystemDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/EditSystemDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/EditSystemDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/EditSystemDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/nFormatter.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/nFormatter.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/nFormatter.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/nFormatter.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/ConfigFields.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/ConfigFields.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableDeploymentInput.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableDeploymentInput.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableDeploymentInput.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableDeploymentInput.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableEnvironmentInput.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableEnvironmentInput.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableEnvironmentInput.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableEnvironmentInput.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableInputs.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableInputs.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableResourceInput.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableResourceInput.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableResourceInput.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableResourceInput.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeployButton.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/DeployButton.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeployButton.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/DeployButton.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeploymentBarChart.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/DeploymentBarChart.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeploymentBarChart.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/DeploymentBarChart.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeploymentGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/DeploymentGettingStarted.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeploymentGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/DeploymentGettingStarted.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/ReleaseDropdownMenu.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/ReleaseDropdownMenu.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/ReleaseDropdownMenu.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/ReleaseDropdownMenu.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/ReleaseEnvironmentCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/ReleaseEnvironmentCell.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/ReleaseEnvironmentCell.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/ReleaseEnvironmentCell.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/TableCells.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/TableCells.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/TableCells.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/TableCells.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/TableDeployments.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/TableDeployments.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/TableDeployments.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/TableDeployments.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx
index f4de6e7b5..453ce7042 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx
@@ -11,7 +11,7 @@ import {
   NavigationMenuList,
 } from "@ctrlplane/ui/navigation-menu";
 
-import { nFormatter } from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/nFormatter";
+import { nFormatter } from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/nFormatter";
 import { NavigationMenuAction } from "./NavigationMenuAction";
 
 type DeploymentNavBarProps = {
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentResourcesDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/DeploymentResourcesDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentResourcesDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/DeploymentResourcesDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
index 5e40557b4..a4b109174 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
@@ -34,7 +34,7 @@ import {
   ConfigTypeSelector,
   NumberConfigFields,
   StringConfigFields,
-} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields";
+} from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/ConfigFields";
 import { api } from "~/trpc/react";
 
 const schema = z.object({
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/JobHistoryPopover.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/JobHistoryPopover.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/JobHistoryPopover.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/JobHistoryPopover.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ApprovalCheck.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ApprovalCheck.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ApprovalCheck.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ApprovalCheck.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentApprovalRow.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentApprovalRow.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentApprovalRow.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentApprovalRow.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/EnvironmentNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ResourceReleaseTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ResourceReleaseTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ResourceReleaseTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ResourceReleaseTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/StatusIcons.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/StatusIcons.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/StatusIcons.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/StatusIcons.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/resources/[resourceId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/resources/[resourceId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/resources/[resourceId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/resources/[resourceId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/resources/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/resources/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/resources/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/resources/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
index 1a8d8648d..b9373b7bd 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
@@ -36,7 +36,7 @@ import {
   VariableBooleanInput,
   VariableChoiceSelect,
   VariableStringInput,
-} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs";
+} from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableInputs";
 import { api } from "~/trpc/react";
 
 const schema = z.object({
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
index a24525569..4b61e7442 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
@@ -53,7 +53,7 @@ import {
   VariableBooleanInput,
   VariableChoiceSelect,
   VariableStringInput,
-} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs";
+} from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableInputs";
 import { api } from "~/trpc/react";
 
 const editVariableValueFormSchema = z.object({
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/status-color.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/status-color.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/status-color.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/status-color.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/DeleteNodeDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/DeleteNodeDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/DeleteNodeDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/DeleteNodeDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/EnvFlowBuilder.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/EnvFlowBuilder.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/EnvFlowBuilder.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/EnvFlowBuilder.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/EnvFlowPanel.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/EnvFlowPanel.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/EnvFlowPanel.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/EnvFlowPanel.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/FlowNodeTypes.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/FlowNodeTypes.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/FlowNodeTypes.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/FlowNodeTypes.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/SidepanelContext.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/SidepanelContext.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/SidepanelContext.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/SidepanelContext.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/[environmentId]/ResourceCharts.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/[environmentId]/ResourceCharts.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/[environmentId]/ResourceCharts.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/[environmentId]/ResourceCharts.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/[environmentId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/[environmentId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/[environmentId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/[environmentId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/edges.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/edges.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/edges.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/edges.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/useMatchSorter.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/useMatchSorter.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/useMatchSorter.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/environments/useMatchSorter.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/DeleteRunbookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/DeleteRunbookDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/DeleteRunbookDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/DeleteRunbookDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/EditRunbookDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/EditRunbookDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/EditRunbookForm.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/EditRunbookForm.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/EditRunbookForm.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/EditRunbookForm.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/RunbookGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/RunbookGettingStarted.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/RunbookGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/RunbookGettingStarted.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/RunbookRow.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/RunbookRow.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/RunbookRow.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/RunbookRow.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/TriggerRunbook.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/TriggerRunbook.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/TriggerRunbook.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/TriggerRunbook.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/RunbookNavBar.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/RunbookNavBar.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/RunbookNavBar.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/RunbookNavBar.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/settings/EditRunbook.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/settings/EditRunbook.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/settings/EditRunbook.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/settings/EditRunbook.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/settings/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/settings/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/settings/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/[runbookId]/settings/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/CreateRunbookForm.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/create/CreateRunbookForm.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/CreateRunbookForm.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/create/CreateRunbookForm.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
index c6d1bc029..590867a1c 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
@@ -32,7 +32,7 @@ import {
   ResourceConfigFields,
   RunbookConfigTypeSelector,
   StringConfigFields,
-} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields";
+} from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/ConfigFields";
 
 type RunbookVariableEditorProps = {
   value: InsertRunbookVariable;
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/create/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/create/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/VariableSetsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/VariableSetsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/VariableSetsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/VariableSetsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/[variableSetId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/[variableSetId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/[variableSetId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/[variableSetId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/variable-sets/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(app)/systems/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/navigation/Tabs.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/navigation/Tabs.tsx
new file mode 100644
index 000000000..e3b41a759
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/navigation/Tabs.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+export const Tabs: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  return (
+    <div className="relative mb-6 mr-auto w-full border-b">{children}</div>
+  );
+};
+
+export const TabsList: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  return <div className="flex w-full justify-start">{children}</div>;
+};
+
+export const TabLink: React.FC<{
+  href: string;
+  isActive?: boolean;
+  children: React.ReactNode;
+}> = ({ href, isActive, children }) => {
+  return (
+    <Link
+      href={href}
+      data-state={isActive ? "active" : undefined}
+      className="relative border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 text-sm text-muted-foreground shadow-none transition-none focus-visible:ring-0 data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+    >
+      {children}
+    </Link>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
index be7666330..c5ee05ce8 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/layout.tsx
@@ -30,7 +30,7 @@ export default async function Layout(props: {
           <TopSidebarIcon
             icon={<IconRocket />}
             label="Deploys"
-            href={`/${params.workspaceSlug}/deployments2`}
+            href={`/${params.workspaceSlug}/deployments`}
           />
           <TopSidebarIcon
             icon={<IconCube />}
@@ -40,7 +40,7 @@ export default async function Layout(props: {
           <TopSidebarIcon
             icon={<IconCategory />}
             label="Systems"
-            href={`/${params.workspaceSlug}/systems2`}
+            href={`/${params.workspaceSlug}/systems`}
           />
           <TopSidebarIcon
             icon={<IconBook />}
@@ -56,12 +56,12 @@ export default async function Layout(props: {
           <TopSidebarIcon
             icon={<IconPlug />}
             label="Connect"
-            href={`/${params.workspaceSlug}/systems2`}
+            href={`/${params.workspaceSlug}/systems`}
           />
           <TopSidebarIcon
             icon={<IconSettings />}
             label="Settings"
-            href={`/${params.workspaceSlug}/systems2`}
+            href={`/${params.workspaceSlug}/systems`}
           />
         </aside>
 
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
index ea7756aae..9142b8dde 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
@@ -12,24 +12,9 @@ import { Button } from "@ctrlplane/ui/button";
 import { Separator } from "@ctrlplane/ui/separator";
 
 import { api } from "~/trpc/server";
+import { TabLink, Tabs, TabsList } from "../../_components/navigation/Tabs";
 import { PageHeader } from "../../_components/PageHeader";
 
-const TabLink: React.FC<{
-  href: string;
-  isActive?: boolean;
-  children: React.ReactNode;
-}> = ({ href, isActive, children }) => {
-  return (
-    <Link
-      href={href}
-      data-state={isActive ? "active" : undefined}
-      className="relative border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 text-sm text-muted-foreground shadow-none transition-none focus-visible:ring-0 data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-    >
-      {children}
-    </Link>
-  );
-};
-
 export default async function Layout(props: {
   children: React.ReactNode;
   params: Promise<{ resourceId: string; workspaceSlug: string }>;
@@ -66,8 +51,8 @@ export default async function Layout(props: {
 
       <div className="mx-6 mt-4 space-y-4">
         <h1 className="text-2xl font-bold">{resource.name}</h1>
-        <div className="relative mb-6 mr-auto w-full border-b">
-          <div className="flex w-full justify-start">
+        <Tabs>
+          <TabsList>
             <TabLink href="?tab=deployments" isActive>
               Deployments
             </TabLink>
@@ -75,8 +60,8 @@ export default async function Layout(props: {
             <TabLink href="?tab=logs">Logs</TabLink>
             <TabLink href="?tab=logs">Audit Logs</TabLink>
             <TabLink href="?tab=logs">Variables</TabLink>
-          </div>
-        </div>
+          </TabsList>
+        </Tabs>
         {props.children}
       </div>
     </div>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/page.tsx
index 0ef311dbe..6cb72383c 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/page.tsx
@@ -30,7 +30,7 @@ export default async function ResourcesPage(props: {
   return (
     <div>
       <PageHeader>
-        <SidebarTrigger className="-ml-1" />
+        <SidebarTrigger />
         <Separator orientation="vertical" className="mr-2 h-4" />
         <Breadcrumb>
           <BreadcrumbList>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/SystemSelector.tsx
similarity index 97%
rename from apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/SystemSelector.tsx
index 341485bc1..af99e6531 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/SystemSelector.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/SystemSelector.tsx
@@ -37,7 +37,7 @@ export const SystemSelector: React.FC<{
           <IconChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
+      <PopoverContent className="w-[240px] p-0">
         <Command>
           <CommandInput placeholder="Search system..." />
           <CommandList>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/layout.tsx
new file mode 100644
index 000000000..b4f9b595d
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/layout.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { IconArrowLeft } from "@tabler/icons-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@ctrlplane/ui/breadcrumb";
+import { Separator } from "@ctrlplane/ui/separator";
+
+import {
+  TabLink,
+  Tabs,
+  TabsList,
+} from "~/app/[workspaceSlug]/(appv2)/_components/navigation/Tabs";
+import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
+import { api } from "~/trpc/server";
+
+export default async function DeploymentLayout(props: {
+  children: React.ReactNode;
+  params: Promise<{
+    workspaceSlug: string;
+    systemSlug: string;
+    deploymentSlug: string;
+  }>;
+}) {
+  const params = await props.params;
+  const deployment = await api.deployment.bySlug(params);
+  if (deployment == null) notFound();
+
+  return (
+    <div>
+      <PageHeader className="justify-between">
+        <div className="flex shrink-0 items-center gap-4">
+          <Link
+            href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
+          >
+            <IconArrowLeft className="size-5" />
+          </Link>
+          <Separator orientation="vertical" className="h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbPage>Environments List</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </PageHeader>
+      <div className="mx-6 mt-4 space-y-2">
+        <h1 className="text-2xl font-bold">{deployment.name}</h1>
+        <Tabs>
+          <TabsList>
+            <TabLink href="?tab=resources" isActive>
+              Deployment Targets
+            </TabLink>
+            <TabLink href="?tab=deployments">Deployments</TabLink>
+            <TabLink href="?tab=policies">Policies</TabLink>
+            <TabLink href="?tab=variables">Variables</TabLink>
+          </TabsList>
+        </Tabs>
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/page.tsx
new file mode 100644
index 000000000..5a24b9038
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/page.tsx
@@ -0,0 +1,3 @@
+export default function DeploymentPage() {
+  return <div>Deployment</div>;
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/layout.tsx
new file mode 100644
index 000000000..c4e16d601
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/layout.tsx
@@ -0,0 +1,67 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { IconArrowLeft } from "@tabler/icons-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@ctrlplane/ui/breadcrumb";
+import { Separator } from "@ctrlplane/ui/separator";
+
+import {
+  TabLink,
+  Tabs,
+  TabsList,
+} from "~/app/[workspaceSlug]/(appv2)/_components/navigation/Tabs";
+import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
+import { api } from "~/trpc/server";
+
+export default async function EnvironmentLayout(props: {
+  children: React.ReactNode;
+  params: Promise<{
+    workspaceSlug: string;
+    systemSlug: string;
+    environmentId: string;
+  }>;
+}) {
+  const params = await props.params;
+  const environment = await api.environment.byId(params.environmentId);
+  if (environment == null) notFound();
+  return (
+    <div>
+      <PageHeader className="justify-between">
+        <div className="flex shrink-0 items-center gap-4">
+          <Link
+            href={`/${params.workspaceSlug}/systems/${params.systemSlug}/environments`}
+          >
+            <IconArrowLeft className="size-5" />
+          </Link>
+          <Separator orientation="vertical" className="h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbPage>Environments List</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </PageHeader>
+      <div className="mx-6 mt-4 space-y-2">
+        <h1 className="text-2xl font-bold">{environment.name}</h1>
+        <Tabs>
+          <TabsList>
+            <TabLink href="?tab=resources" isActive>
+              Deployment Targets
+            </TabLink>
+            <TabLink href="?tab=deployments">Deployments</TabLink>
+            <TabLink href="?tab=policies">Policies</TabLink>
+            <TabLink href="?tab=variables">Variables</TabLink>
+          </TabsList>
+        </Tabs>
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/page.tsx
new file mode 100644
index 000000000..4cda5bf1d
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/page.tsx
@@ -0,0 +1,3 @@
+export default function EnvironmentPage() {
+  return <div>Environment</div>;
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/deployments/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/deployments/page.tsx
new file mode 100644
index 000000000..a835bcd5f
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/deployments/page.tsx
@@ -0,0 +1,87 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { IconDots } from "@tabler/icons-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@ctrlplane/ui/breadcrumb";
+import { Button } from "@ctrlplane/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+import { Separator } from "@ctrlplane/ui/separator";
+import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
+
+import { api } from "~/trpc/server";
+import { PageHeader } from "../../../../_components/PageHeader";
+
+export default async function EnvironmentsPage(props: {
+  params: Promise<{ workspaceSlug: string; systemSlug: string }>;
+}) {
+  const params = await props.params;
+  const system = await api.system.bySlug(params).catch(() => null);
+  if (system == null) notFound();
+
+  const environments = await api.environment.bySystemId(system.id);
+
+  return (
+    <div>
+      <PageHeader>
+        <SidebarTrigger />
+        <Separator orientation="vertical" className="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem className="hidden md:block">
+              <BreadcrumbPage>Deployments</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
+
+      {environments.map((environment) => (
+        <div key={environment.id} className="flex items-center border-b p-4">
+          <div className="flex-1">{environment.name}</div>
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 rounded-full bg-green-500" />
+              <span>1/5 Healthy</span>
+            </div>
+          </div>
+          <div className="flex-1">
+            <div className="text-sm text-muted-foreground">Latest: v1.0.0</div>
+          </div>
+          <div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon">
+                  <IconDots className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>Add Resources</DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link
+                    href={`/${params.workspaceSlug}/systems/${params.systemSlug}/environments/${environment.id}`}
+                  >
+                    Edit
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive">
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/environments/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/environments/page.tsx
new file mode 100644
index 000000000..9b86da501
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/environments/page.tsx
@@ -0,0 +1,87 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { IconDots } from "@tabler/icons-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@ctrlplane/ui/breadcrumb";
+import { Button } from "@ctrlplane/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+import { Separator } from "@ctrlplane/ui/separator";
+import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
+
+import { api } from "~/trpc/server";
+import { PageHeader } from "../../../../_components/PageHeader";
+
+export default async function EnvironmentsPage(props: {
+  params: Promise<{ workspaceSlug: string; systemSlug: string }>;
+}) {
+  const params = await props.params;
+  const system = await api.system.bySlug(params).catch(() => null);
+  if (system == null) notFound();
+
+  const environments = await api.environment.bySystemId(system.id);
+
+  return (
+    <div>
+      <PageHeader>
+        <SidebarTrigger />
+        <Separator orientation="vertical" className="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem className="hidden md:block">
+              <BreadcrumbPage>Environments</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
+
+      {environments.map((environment) => (
+        <div key={environment.id} className="flex items-center border-b p-4">
+          <div className="flex-1">{environment.name}</div>
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 rounded-full bg-green-500" />
+              <span>1/5 Healthy</span>
+            </div>
+          </div>
+          <div className="flex-1">
+            <div className="text-sm text-muted-foreground">Latest: v1.0.0</div>
+          </div>
+          <div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon">
+                  <IconDots className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>Add Resources</DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link
+                    href={`/${params.workspaceSlug}/systems/${params.systemSlug}/environments/${environment.id}`}
+                  >
+                    Edit
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive">
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
similarity index 82%
rename from apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
index 1ef838205..5b5aabd4d 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
@@ -17,8 +17,8 @@ import {
 } from "@ctrlplane/ui/sidebar";
 
 import { api } from "~/trpc/server";
-import { SidebarLink } from "../../resources/SidebarLink";
-import { SystemSelector } from "../SystemSelector";
+import { SidebarLink } from "../../../resources/SidebarLink";
+import { SystemSelector } from "../../SystemSelector";
 
 export default async function SystemsLayout(props: {
   children: React.ReactNode;
@@ -49,25 +49,25 @@ export default async function SystemsLayout(props: {
               <SidebarMenu>
                 <SidebarLink
                   icon={<IconPlant />}
-                  href={`/${workspace.slug}/systems/list`}
+                  href={`/${workspace.slug}/systems/${params.systemSlug}/environments`}
                 >
                   Environments
                 </SidebarLink>
                 <SidebarLink
                   icon={<IconShip />}
-                  href={`/${workspace.slug}/resources/providers`}
+                  href={`/${workspace.slug}/systems/${params.systemSlug}/deployments`}
                 >
                   Deployments
                 </SidebarLink>
                 <SidebarLink
                   icon={<IconBook />}
-                  href={`/${workspace.slug}/resources/groupings`}
+                  href={`/${workspace.slug}/systems/${params.systemSlug}/runbooks`}
                 >
                   Runbooks
                 </SidebarLink>
                 <SidebarLink
                   icon={<IconVariable />}
-                  href={`/${workspace.slug}/resources/views`}
+                  href={`/${workspace.slug}/systems/${params.systemSlug}/variables`}
                 >
                   Variables Sets
                 </SidebarLink>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/page.tsx
new file mode 100644
index 000000000..d9672a5a6
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/page.tsx
@@ -0,0 +1,13 @@
+import { notFound } from "next/navigation";
+
+import { api } from "~/trpc/server";
+
+export default async function SystemsPage(props: {
+  params: Promise<{ workspaceSlug: string }>;
+}) {
+  const params = await props.params;
+  const workspace = await api.workspace.bySlug(params.workspaceSlug);
+  if (workspace == null) notFound();
+
+  return <></>;
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx
deleted file mode 100644
index 8180057d5..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems2/[systemSlug]/page.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { notFound } from "next/navigation";
-
-import { Button } from "@ctrlplane/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@ctrlplane/ui/popover";
-
-import { api } from "~/trpc/server";
-
-export default async function SystemsPage(props: {
-  params: Promise<{ workspaceSlug: string }>;
-}) {
-  const params = await props.params;
-  const workspace = await api.workspace.bySlug(params.workspaceSlug);
-  if (workspace == null) notFound();
-
-  return (
-    <>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">Open popover</Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-80">
-          <div className="grid gap-4">
-            <div className="space-y-2">
-              <h2 className="font-medium leading-none">Dimensions</h2>
-              <p className="text-sm text-muted-foreground">
-                Set the dimensions for the layer.
-              </p>
-            </div>
-            <div className="grid gap-2">
-              <div className="grid grid-cols-3 items-center gap-4"></div>
-              <div className="grid grid-cols-3 items-center gap-4"></div>
-              <div className="grid grid-cols-3 items-center gap-4"></div>
-              <div className="grid grid-cols-3 items-center gap-4"></div>
-            </div>
-          </div>
-        </PopoverContent>
-      </Popover>
-    </>
-  );
-}
diff --git a/apps/webservice/src/app/globals.css b/apps/webservice/src/app/globals.css
index 01552ef44..cbac91966 100644
--- a/apps/webservice/src/app/globals.css
+++ b/apps/webservice/src/app/globals.css
@@ -54,7 +54,7 @@
     --secondary-foreground: 0 0% 98%;
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
-    --accent: 0 0% 3.9%;
+    --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
diff --git a/docker-compose.dev.yaml b/docker-compose.dev.yaml
index e02c0e414..fa237aeed 100644
--- a/docker-compose.dev.yaml
+++ b/docker-compose.dev.yaml
@@ -1,5 +1,3 @@
-version: "3.8"
-
 services:
   database:
     container_name: ctrlplane-database
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 5e45e2ed6..17884252f 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,5 +1,3 @@
-version: "3.9"
-
 services:
   postgres:
     platform: linux/amd64

From 0d4f78a1b3f195db6335fee448dd5a33016153db Mon Sep 17 00:00:00 2001
From: Justin Brooks <justin@wandb.com>
Date: Sun, 9 Feb 2025 01:45:04 -0500
Subject: [PATCH 09/14] add pages

---
 .../systems/[systemSlug]/(sidebar)/layout.tsx |  2 +-
 .../[systemSlug]/(sidebar)/runbooks/page.tsx  | 26 +++++++++++++++++++
 .../[systemSlug]/(sidebar)/variables/page.tsx | 26 +++++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/variables/page.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
index 5b5aabd4d..82c91aa1e 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
@@ -69,7 +69,7 @@ export default async function SystemsLayout(props: {
                   icon={<IconVariable />}
                   href={`/${workspace.slug}/systems/${params.systemSlug}/variables`}
                 >
-                  Variables Sets
+                  Variables
                 </SidebarLink>
               </SidebarMenu>
             </SidebarGroup>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx
new file mode 100644
index 000000000..c55385cd0
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx
@@ -0,0 +1,26 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@ctrlplane/ui/breadcrumb";
+import { Separator } from "@ctrlplane/ui/separator";
+
+import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
+
+export default function RunbooksPage() {
+  return (
+    <div>
+      <PageHeader>
+        <Separator orientation="vertical" className="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem className="hidden md:block">
+              <BreadcrumbPage>Runbooks</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/variables/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/variables/page.tsx
new file mode 100644
index 000000000..1ef61df68
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/variables/page.tsx
@@ -0,0 +1,26 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@ctrlplane/ui/breadcrumb";
+import { Separator } from "@ctrlplane/ui/separator";
+
+import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
+
+export default function VariablesPage() {
+  return (
+    <div>
+      <PageHeader>
+        <Separator orientation="vertical" className="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem className="hidden md:block">
+              <BreadcrumbPage>Variables</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
+    </div>
+  );
+}

From 438fedfb9b44a5314089c0b74b2ed6543c64f187 Mon Sep 17 00:00:00 2001
From: Justin Brooks <justin@wandb.com>
Date: Sun, 9 Feb 2025 02:23:17 -0500
Subject: [PATCH 10/14] clean up more

---
 .../(appv2)/resources/SidebarKinds.tsx        |  7 ++++++-
 .../(appv2)/resources/[resourceId]/layout.tsx | 13 ++++++------
 .../(appv2)/resources/list/layout.tsx         | 17 ++++++++++++---
 .../systems/[systemSlug]/(sidebar)/layout.tsx | 21 +++++++++++++++++++
 .../[systemSlug]/(sidebar)/runbooks/page.tsx  |  2 ++
 .../[systemSlug]/(sidebar)/variables/page.tsx |  2 ++
 6 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarKinds.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarKinds.tsx
index ced907dd9..10ac37450 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarKinds.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/SidebarKinds.tsx
@@ -29,8 +29,13 @@ export const SidebarGroupKinds: React.FC<{ workspace: Workspace }> = ({
   const kinds = api.workspace.resourceKinds.useQuery(workspace.id);
   return (
     <SidebarGroup>
-      <SidebarGroupLabel>Kinds</SidebarGroupLabel>
+      <SidebarGroupLabel>Types</SidebarGroupLabel>
       <SidebarMenu>
+        {kinds.data?.length === 0 && (
+          <div className="rounded  border-neutral-800 px-2 text-xs text-muted-foreground text-neutral-700">
+            No resources found
+          </div>
+        )}
         {kinds.data?.map(({ version, kind, count }) => {
           const url = `/${workspace.slug}/resources?filter=${LZString.compressToEncodedURIComponent(
             JSON.stringify({
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
index 9142b8dde..91dbe27d2 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
@@ -53,13 +53,12 @@ export default async function Layout(props: {
         <h1 className="text-2xl font-bold">{resource.name}</h1>
         <Tabs>
           <TabsList>
-            <TabLink href="?tab=deployments" isActive>
-              Deployments
-            </TabLink>
-            <TabLink href="?tab=properties">Visualize</TabLink>
-            <TabLink href="?tab=logs">Logs</TabLink>
-            <TabLink href="?tab=logs">Audit Logs</TabLink>
-            <TabLink href="?tab=logs">Variables</TabLink>
+            <TabLink href="?tab=properties">Properties</TabLink>
+            <TabLink href="?tab=variables">Variables</TabLink>
+            <TabLink href="?tab=visualize">Visualize</TabLink>
+            <TabLink href="?tab=deployments">Deployments</TabLink>
+            <TabLink href="?tab=connectivity">Connectivity</TabLink>
+            <TabLink href="?tab=events">Events</TabLink>
           </TabsList>
         </Tabs>
         {props.children}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx
index 32b148d99..6ffa73123 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/list/layout.tsx
@@ -1,5 +1,10 @@
 import { notFound } from "next/navigation";
-import { IconList, IconPlug } from "@tabler/icons-react";
+import {
+  IconList,
+  IconPlug,
+  IconTable,
+  IconView360Arrow,
+} from "@tabler/icons-react";
 
 import {
   Sidebar,
@@ -41,10 +46,16 @@ export default async function Layout(props: {
                 >
                   Providers
                 </SidebarLink>
-                <SidebarLink href={`/${workspace.slug}/resources/groupings`}>
+                <SidebarLink
+                  icon={<IconTable />}
+                  href={`/${workspace.slug}/resources/groupings`}
+                >
                   Groupings
                 </SidebarLink>
-                <SidebarLink href={`/${workspace.slug}/resources/views`}>
+                <SidebarLink
+                  icon={<IconView360Arrow />}
+                  href={`/${workspace.slug}/resources/views`}
+                >
                   Views
                 </SidebarLink>
               </SidebarMenu>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
index 82c91aa1e..ca838f7bb 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
@@ -2,6 +2,8 @@ import { notFound } from "next/navigation";
 import {
   IconBook,
   IconPlant,
+  IconSettings,
+  IconShield,
   IconShip,
   IconVariable,
 } from "@tabler/icons-react";
@@ -10,6 +12,7 @@ import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
+  SidebarGroupLabel,
   SidebarHeader,
   SidebarInset,
   SidebarMenu,
@@ -73,6 +76,24 @@ export default async function SystemsLayout(props: {
                 </SidebarLink>
               </SidebarMenu>
             </SidebarGroup>
+
+            <SidebarGroup>
+              <SidebarGroupLabel>Advanced</SidebarGroupLabel>
+              <SidebarMenu>
+                <SidebarLink
+                  icon={<IconShield />}
+                  href={`/${workspace.slug}/systems/${params.systemSlug}/policies`}
+                >
+                  Policies
+                </SidebarLink>
+                <SidebarLink
+                  icon={<IconSettings />}
+                  href={`/${workspace.slug}/systems/${params.systemSlug}/settings`}
+                >
+                  Settings
+                </SidebarLink>
+              </SidebarMenu>
+            </SidebarGroup>
           </SidebarContent>
         </Sidebar>
         <SidebarInset className="h-[calc(100vh-56px-1px)]">
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx
index c55385cd0..63a9fef18 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx
@@ -5,6 +5,7 @@ import {
   BreadcrumbPage,
 } from "@ctrlplane/ui/breadcrumb";
 import { Separator } from "@ctrlplane/ui/separator";
+import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 
 import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
 
@@ -12,6 +13,7 @@ export default function RunbooksPage() {
   return (
     <div>
       <PageHeader>
+        <SidebarTrigger />
         <Separator orientation="vertical" className="mr-2 h-4" />
         <Breadcrumb>
           <BreadcrumbList>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/variables/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/variables/page.tsx
index 1ef61df68..9eed566bb 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/variables/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/variables/page.tsx
@@ -5,6 +5,7 @@ import {
   BreadcrumbPage,
 } from "@ctrlplane/ui/breadcrumb";
 import { Separator } from "@ctrlplane/ui/separator";
+import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 
 import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
 
@@ -12,6 +13,7 @@ export default function VariablesPage() {
   return (
     <div>
       <PageHeader>
+        <SidebarTrigger />
         <Separator orientation="vertical" className="mr-2 h-4" />
         <Breadcrumb>
           <BreadcrumbList>

From 42e95021294e48feb8ebec30c14341511ff51896 Mon Sep 17 00:00:00 2001
From: Justin Brooks <justin@wandb.com>
Date: Sun, 9 Feb 2025 02:38:19 -0500
Subject: [PATCH 11/14] add more to env view

---
 .../[environmentId]/config/page.tsx           | 50 +++++++++++++++++++
 .../environments/[environmentId]/layout.tsx   | 14 +++---
 2 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/config/page.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/config/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/config/page.tsx
new file mode 100644
index 000000000..edef19628
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/config/page.tsx
@@ -0,0 +1,50 @@
+export default function EnvironmentConfigPage() {
+  return (
+    <div className="pt-4">
+      <div className="flex gap-10">
+        <div className="w-[200px] shrink-0 space-y-2 text-sm text-muted-foreground">
+          <div>
+            <a href="#deployment-controls">Deployment Controls</a>
+          </div>
+          <div>
+            <a href="#approval-governance">Approval & Governance</a>
+          </div>
+          <div>
+            <a href="#release-management">Release Management</a>
+          </div>
+          <div>
+            <a href="#release-channels">Release Channels</a>
+          </div>
+          <div>Rollout & Timing</div>
+        </div>
+        <div className="max-w-[600px] space-y-6">
+          <div>
+            <h2 id="approval-governance" className="font-bold">
+              Approval & Governance
+            </h2>
+          </div>
+          <div>
+            <h2 id="deployment-controls" className="font-bold">
+              Deployment Controls
+            </h2>
+          </div>
+          <div>
+            <h2 id="release-management" className="font-bold">
+              Release Management
+            </h2>
+          </div>
+          <div>
+            <h2 id="release-channels" className="font-bold">
+              Release Channels
+            </h2>
+          </div>
+          <div>
+            <h2 id="rollout-timing" className="font-bold">
+              Rollout & Timing
+            </h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/layout.tsx
index c4e16d601..5aa88149f 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/environments/[environmentId]/layout.tsx
@@ -29,6 +29,9 @@ export default async function EnvironmentLayout(props: {
   const params = await props.params;
   const environment = await api.environment.byId(params.environmentId);
   if (environment == null) notFound();
+
+  const url = (tab: string) =>
+    `/${params.workspaceSlug}/systems/${params.systemSlug}/environments/${params.environmentId}/${tab}`;
   return (
     <div>
       <PageHeader className="justify-between">
@@ -52,12 +55,11 @@ export default async function EnvironmentLayout(props: {
         <h1 className="text-2xl font-bold">{environment.name}</h1>
         <Tabs>
           <TabsList>
-            <TabLink href="?tab=resources" isActive>
-              Deployment Targets
-            </TabLink>
-            <TabLink href="?tab=deployments">Deployments</TabLink>
-            <TabLink href="?tab=policies">Policies</TabLink>
-            <TabLink href="?tab=variables">Variables</TabLink>
+            <TabLink href={url("resources")}>Targets</TabLink>
+            <TabLink href={url("config")}>Configuration</TabLink>
+            <TabLink href={url("deployments")}>Deployments</TabLink>
+            <TabLink href={url("policies")}>Policies</TabLink>
+            <TabLink href={url("variables")}>Variables</TabLink>
           </TabsList>
         </Tabs>
         {props.children}

From dd3f0804ec4297f607bcd3385421ac925d7cee1c Mon Sep 17 00:00:00 2001
From: Justin Brooks <justin@wandb.com>
Date: Sun, 9 Feb 2025 17:29:09 -0500
Subject: [PATCH 12/14] reorg sizebar

---
 .../systems/[systemSlug]/(sidebar)/layout.tsx | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
index ca838f7bb..796abbe06 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx
@@ -49,6 +49,7 @@ export default async function SystemsLayout(props: {
           </SidebarHeader>
           <SidebarContent>
             <SidebarGroup>
+              <SidebarGroupLabel>Release Management</SidebarGroupLabel>
               <SidebarMenu>
                 <SidebarLink
                   icon={<IconPlant />}
@@ -62,30 +63,35 @@ export default async function SystemsLayout(props: {
                 >
                   Deployments
                 </SidebarLink>
-                <SidebarLink
-                  icon={<IconBook />}
-                  href={`/${workspace.slug}/systems/${params.systemSlug}/runbooks`}
-                >
-                  Runbooks
-                </SidebarLink>
                 <SidebarLink
                   icon={<IconVariable />}
                   href={`/${workspace.slug}/systems/${params.systemSlug}/variables`}
                 >
                   Variables
                 </SidebarLink>
+                <SidebarLink
+                  icon={<IconShield />}
+                  href={`/${workspace.slug}/systems/${params.systemSlug}/policies`}
+                >
+                  Policies
+                </SidebarLink>
               </SidebarMenu>
             </SidebarGroup>
-
             <SidebarGroup>
-              <SidebarGroupLabel>Advanced</SidebarGroupLabel>
+              <SidebarGroupLabel>Operations</SidebarGroupLabel>
               <SidebarMenu>
                 <SidebarLink
-                  icon={<IconShield />}
-                  href={`/${workspace.slug}/systems/${params.systemSlug}/policies`}
+                  icon={<IconBook />}
+                  href={`/${workspace.slug}/systems/${params.systemSlug}/runbooks`}
                 >
-                  Policies
+                  Runbooks
                 </SidebarLink>
+              </SidebarMenu>
+            </SidebarGroup>
+
+            <SidebarGroup>
+              <SidebarGroupLabel>System</SidebarGroupLabel>
+              <SidebarMenu>
                 <SidebarLink
                   icon={<IconSettings />}
                   href={`/${workspace.slug}/systems/${params.systemSlug}/settings`}

From 8159be6dc716d94a88686f4567efdcf9025474bb Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <48932219+adityachoudhari26@users.noreply.github.com>
Date: Sun, 9 Feb 2025 17:36:38 -0800
Subject: [PATCH 13/14] fix: Add resource visualize (#303)

---
 .../_components/reactflow/ArrowEdge.tsx       |  20 +++
 .../reactflow/ReactFlowProvider.tsx           |   3 +
 .../(appv2)/_components/reactflow/edges.ts    |  58 +++++++
 .../(appv2)/_components/reactflow/layout.ts   | 150 ++++++++++++++++++
 .../_components/resources/ReleaseCell.tsx     | 107 +++++++++++++
 .../resources/[resourceId]/DeploymentTabs.tsx |  52 ++++++
 .../(appv2)/resources/[resourceId]/layout.tsx |  19 +--
 .../[resourceId]/visualize/DepEdge.tsx        |  49 ++++++
 .../ResourceVisualizationDiagram.tsx          |  86 ++++++++++
 .../resources/[resourceId]/visualize/edges.ts | 140 ++++++++++++++++
 .../visualize/nodes/DeploymentNode.tsx        | 102 ++++++++++++
 .../visualize/nodes/EnvironmentNode.tsx       |  47 ++++++
 .../visualize/nodes/ProviderNode.tsx          |  53 +++++++
 .../visualize/nodes/ResourceNode.tsx          |  48 ++++++
 .../[resourceId]/visualize/nodes/nodes.ts     |  88 ++++++++++
 .../resources/[resourceId]/visualize/page.tsx |  10 ++
 16 files changed, 1018 insertions(+), 14 deletions(-)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/ArrowEdge.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/ReactFlowProvider.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/edges.ts
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/layout.ts
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/resources/ReleaseCell.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/DeploymentTabs.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/DepEdge.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/ResourceVisualizationDiagram.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/edges.ts
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/DeploymentNode.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/EnvironmentNode.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/ProviderNode.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/ResourceNode.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/nodes.ts
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/page.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/ArrowEdge.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/ArrowEdge.tsx
new file mode 100644
index 000000000..b416a43f0
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/ArrowEdge.tsx
@@ -0,0 +1,20 @@
+import type { EdgeProps } from "reactflow";
+import { BaseEdge, getSmoothStepPath, MarkerType } from "reactflow";
+import colors from "tailwindcss/colors";
+
+export const ArrowEdge: React.FC<EdgeProps> = (edge) => {
+  const { markerEnd, style } = edge;
+  const [edgePath] = getSmoothStepPath(edge);
+
+  return (
+    <BaseEdge
+      path={edgePath}
+      markerEnd={markerEnd ?? MarkerType.ArrowClosed}
+      style={{
+        strokeWidth: 2,
+        stroke: colors.neutral[700],
+        ...style,
+      }}
+    />
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/ReactFlowProvider.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/ReactFlowProvider.tsx
new file mode 100644
index 000000000..3cd4d0b36
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/ReactFlowProvider.tsx
@@ -0,0 +1,3 @@
+"use client";
+// Make sure we wrap this in use client
+export { ReactFlowProvider } from "reactflow";
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/edges.ts b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/edges.ts
new file mode 100644
index 000000000..b5d683380
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/edges.ts
@@ -0,0 +1,58 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import { MarkerType } from "reactflow";
+import colors from "tailwindcss/colors";
+
+const markerEnd = {
+  type: MarkerType.Arrow,
+  color: colors.neutral[700],
+};
+
+export const createEdgesWhereEnvironmentHasNoPolicy = (
+  envs: SCHEMA.Environment[],
+  standalonePolicies: SCHEMA.EnvironmentPolicy[],
+) =>
+  envs.map((e) => {
+    const isUsingStandalonePolicy = standalonePolicies.some(
+      (p) => p.id === e.policyId,
+    );
+    const source = isUsingStandalonePolicy ? e.policyId : "trigger";
+    return {
+      id: source + "-" + e.id,
+      source,
+      target: e.id,
+      markerEnd,
+    };
+  });
+
+export const createEdgesFromPolicyToEnvironment = (
+  envs: Array<{ id: string; policyId?: string | null }>,
+) =>
+  envs.map((e) => ({
+    id: `${e.policyId ?? "trigger"}-${e.id}`,
+    source: e.policyId ?? "trigger",
+    target: e.id,
+    markerEnd,
+  }));
+
+export const createEdgesFromPolicyDeployment = (
+  policyDeployments: Array<SCHEMA.EnvironmentPolicyDeployment>,
+) =>
+  policyDeployments.map((p) => ({
+    id: p.id,
+    source: p.environmentId,
+    target: p.policyId,
+    markerEnd,
+  }));
+
+export const createEdgesWherePolicyHasNoEnvironment = (
+  policies: Array<SCHEMA.EnvironmentPolicy>,
+  policyDeployments: Array<SCHEMA.EnvironmentPolicyDeployment>,
+) =>
+  policies
+    .filter((t) => !policyDeployments.some((p) => p.policyId === t.id))
+    .map((e) => ({
+      id: "trigger-" + e.id,
+      source: "trigger",
+      target: e.id,
+      markerEnd,
+    }));
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/layout.ts b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/layout.ts
new file mode 100644
index 000000000..bcf875d96
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/reactflow/layout.ts
@@ -0,0 +1,150 @@
+"use client";
+
+import type { Edge, Node, ReactFlowInstance } from "reactflow";
+import { useCallback, useEffect, useState } from "react";
+import dagre from "dagre";
+import { useReactFlow } from "reactflow";
+
+const generateLevels = (nodes: Node[], edges: Edge[]) => {
+  const levels: Record<string, number> = {};
+  const edgeMap: Record<string, string[]> = {};
+
+  edges.forEach((edge) => {
+    if (!edgeMap[edge.target]) edgeMap[edge.target] = [];
+    edgeMap[edge.target]!.push(edge.source);
+  });
+
+  const calculateLevel = (nodeId: string): number => {
+    if (levels[nodeId] !== undefined) return levels[nodeId];
+
+    const sources = edgeMap[nodeId] ?? [];
+    if (sources.length === 0) {
+      levels[nodeId] = 0;
+      return 0;
+    }
+    const maxSourceLevel = Math.max(...sources.map(calculateLevel));
+    levels[nodeId] = maxSourceLevel + 1;
+
+    return levels[nodeId];
+  };
+
+  nodes.forEach((node) => calculateLevel(node.id));
+
+  return levels;
+};
+
+export const getLayoutedElementsDagre = (
+  nodes: Node[],
+  edges: Edge[],
+  direction = "TB",
+  extraEdgeLength = 0,
+  nodesep = 50,
+) => {
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({ rankdir: direction, nodesep });
+
+  nodes.forEach((node) => dagreGraph.setNode(node.id, node));
+  edges.forEach((edge) => dagreGraph.setEdge(edge.source, edge.target));
+  dagre.layout(dagreGraph);
+  const levels = generateLevels(nodes, edges);
+
+  return {
+    nodes: nodes.map((node) => {
+      const position = dagreGraph.node(node.id);
+      // We are shifting the dagre node position (anchor=center center) to the top left
+      // so it matches the React Flow node anchor point (top left).
+      const x =
+        position.x - (node.width ?? 0) / 2 + extraEdgeLength * levels[node.id]!;
+      const y = position.y - (node.height ?? 0) / 2;
+
+      return { ...node, position: { x, y } };
+    }),
+    edges,
+  };
+};
+
+type LayoutConfig = {
+  direction?: "TB" | "LR" | "BT" | "RL";
+  extraEdgeLength?: number;
+  nodesep?: number;
+  padding?: number;
+  maxZoom?: number;
+  focusedNodeId?: string;
+};
+
+export const useLayoutAndFitView = (nodes: Node[], config?: LayoutConfig) => {
+  const [isLayouted, setIsLayouted] = useState(false);
+  const [isViewFitted, setIsViewFitted] = useState(false);
+
+  const { getNodes, setNodes, setEdges, getEdges } = useReactFlow();
+
+  const onLayout = useCallback(() => {
+    const layouted = getLayoutedElementsDagre(
+      getNodes(),
+      getEdges(),
+      config?.direction,
+      config?.extraEdgeLength,
+      config?.nodesep,
+    );
+    setNodes(layouted.nodes);
+    setEdges(layouted.edges);
+    setIsLayouted(true);
+  }, [getNodes, getEdges, setNodes, setEdges, setIsLayouted, config]);
+
+  const [reactFlowInstance, setReactFlowInstance] =
+    useState<ReactFlowInstance | null>(null);
+
+  useEffect(() => {
+    if (reactFlowInstance != null) onLayout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reactFlowInstance]);
+
+  const setDefaultView = useCallback(() => {
+    reactFlowInstance?.fitView({
+      padding: config?.padding ?? 0.12,
+      maxZoom: config?.maxZoom ?? 1,
+    });
+    setIsViewFitted(true);
+  }, [reactFlowInstance, config]);
+
+  useEffect(() => {
+    if (
+      reactFlowInstance != null &&
+      nodes.length &&
+      isLayouted &&
+      !isViewFitted
+    ) {
+      if (config?.focusedNodeId == null) {
+        setDefaultView();
+        return;
+      }
+
+      const focusedNode = nodes.find((n) => n.id === config.focusedNodeId);
+      if (focusedNode == null) {
+        setDefaultView();
+        return;
+      }
+
+      reactFlowInstance.fitView({
+        padding: config.padding ?? 0.12,
+        maxZoom: config.maxZoom ?? 2,
+      });
+      reactFlowInstance.setCenter(
+        focusedNode.position.x + 100,
+        focusedNode.position.y + 100,
+        { zoom: 1.5, duration: 500 },
+      );
+      setIsViewFitted(true);
+    }
+  }, [
+    reactFlowInstance,
+    nodes,
+    isLayouted,
+    isViewFitted,
+    config,
+    setDefaultView,
+  ]);
+
+  return { setReactFlowInstance, onLayout };
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/resources/ReleaseCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/resources/ReleaseCell.tsx
new file mode 100644
index 000000000..5268cac59
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/resources/ReleaseCell.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import type {
+  Deployment,
+  Job,
+  Release,
+  ReleaseJobTrigger,
+} from "@ctrlplane/db/schema";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import {
+  IconAlertCircle,
+  IconCircleCheck,
+  IconCircleDashed,
+  IconCircleX,
+  IconClock,
+  IconLoader2,
+} from "@tabler/icons-react";
+import { format } from "date-fns";
+
+import { JobStatus } from "@ctrlplane/validators/jobs";
+
+export const ReleaseIcon: React.FC<{
+  job?: Job;
+}> = ({ job }) => {
+  if (job?.status === JobStatus.Pending)
+    return (
+      <div className="rounded-full bg-blue-400 p-1 dark:text-black">
+        <IconClock strokeWidth={2} />
+      </div>
+    );
+
+  if (job?.status === JobStatus.InProgress)
+    return (
+      <div className="animate-spin rounded-full bg-blue-400 p-1 dark:text-black">
+        <IconLoader2 strokeWidth={2} />
+      </div>
+    );
+
+  if (job?.status === JobStatus.Successful)
+    return (
+      <div className="rounded-full bg-green-400 p-1 dark:text-black">
+        <IconCircleCheck strokeWidth={2} />
+      </div>
+    );
+
+  if (job?.status === JobStatus.Cancelled)
+    return (
+      <div className="rounded-full bg-neutral-400 p-1 dark:text-black">
+        <IconCircleX strokeWidth={2} />
+      </div>
+    );
+
+  if (job?.status === JobStatus.Failure)
+    return (
+      <div className="rounded-full bg-red-400 p-1 dark:text-black">
+        <IconCircleX strokeWidth={2} />
+      </div>
+    );
+
+  if (job?.status === JobStatus.Skipped)
+    return (
+      <div className="rounded-full bg-neutral-400 p-1 dark:text-black">
+        <IconCircleDashed strokeWidth={2} />
+      </div>
+    );
+
+  if (
+    job?.status === JobStatus.InvalidJobAgent ||
+    job?.status === JobStatus.InvalidIntegration
+  )
+    return (
+      <div className="rounded-full bg-orange-500 p-1 dark:text-black">
+        <IconAlertCircle strokeWidth={2} />
+      </div>
+    );
+
+  return null;
+};
+
+export const ReleaseCell: React.FC<{
+  deployment: Deployment;
+  releaseJobTrigger: ReleaseJobTrigger & {
+    release?: Partial<Release>;
+    job?: Job;
+  };
+}> = ({ deployment, releaseJobTrigger }) => {
+  const params = useParams<{ workspaceSlug: string; systemSlug: string }>();
+  return (
+    <Link
+      href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments/${deployment.slug}/releases/${releaseJobTrigger.releaseId}`}
+      className="flex items-center gap-2"
+    >
+      <ReleaseIcon job={releaseJobTrigger.job} />
+      <div className="w-full text-sm">
+        <div className="flex items-center justify-between">
+          <span className="font-semibold">
+            {releaseJobTrigger.release?.version}
+          </span>
+        </div>
+        <div className="text-left text-muted-foreground">
+          {format(releaseJobTrigger.createdAt, "MMM d, hh:mm aa")}
+        </div>
+      </div>
+    </Link>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/DeploymentTabs.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/DeploymentTabs.tsx
new file mode 100644
index 000000000..578f8181c
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/DeploymentTabs.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+import { useParams, usePathname } from "next/navigation";
+
+import { TabLink, Tabs, TabsList } from "../../_components/navigation/Tabs";
+
+const getActiveTab = (url: string) => {
+  if (url.endsWith("/visualize")) return "visualize";
+  if (url.endsWith("/variables")) return "variables";
+  if (url.endsWith("/properties")) return "properties";
+  return "deployments";
+};
+
+export const DeploymentTabs: React.FC = () => {
+  const { workspaceSlug, resourceId } = useParams<{
+    workspaceSlug: string;
+    resourceId: string;
+  }>();
+
+  const pathname = usePathname();
+  const activeTab = getActiveTab(pathname);
+  const baseUrl = `/${workspaceSlug}/resources/${resourceId}`;
+
+  return (
+    <Tabs>
+      <TabsList>
+        <TabLink href={baseUrl} isActive={activeTab === "deployments"}>
+          Deployments
+        </TabLink>
+        <TabLink
+          href={`${baseUrl}/visualize`}
+          isActive={activeTab === "visualize"}
+        >
+          Visualize
+        </TabLink>
+        <TabLink
+          href={`${baseUrl}/variables`}
+          isActive={activeTab === "variables"}
+        >
+          Variables
+        </TabLink>
+        <TabLink
+          href={`${baseUrl}/properties`}
+          isActive={activeTab === "properties"}
+        >
+          Properties
+        </TabLink>
+      </TabsList>
+    </Tabs>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
index 91dbe27d2..96e74a96c 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/layout.tsx
@@ -12,8 +12,8 @@ import { Button } from "@ctrlplane/ui/button";
 import { Separator } from "@ctrlplane/ui/separator";
 
 import { api } from "~/trpc/server";
-import { TabLink, Tabs, TabsList } from "../../_components/navigation/Tabs";
 import { PageHeader } from "../../_components/PageHeader";
+import { DeploymentTabs } from "./DeploymentTabs";
 
 export default async function Layout(props: {
   children: React.ReactNode;
@@ -23,7 +23,7 @@ export default async function Layout(props: {
   const resource = await api.resource.byId(params.resourceId);
   if (resource == null) notFound();
   return (
-    <div>
+    <div className="flex h-full flex-col">
       <PageHeader className="justify-between">
         <div className="flex shrink-0 items-center gap-4">
           <Link href={`/${params.workspaceSlug}/resources`}>
@@ -49,19 +49,10 @@ export default async function Layout(props: {
         </div>
       </PageHeader>
 
-      <div className="mx-6 mt-4 space-y-4">
+      <div className="flex h-full flex-col gap-4 p-4">
         <h1 className="text-2xl font-bold">{resource.name}</h1>
-        <Tabs>
-          <TabsList>
-            <TabLink href="?tab=properties">Properties</TabLink>
-            <TabLink href="?tab=variables">Variables</TabLink>
-            <TabLink href="?tab=visualize">Visualize</TabLink>
-            <TabLink href="?tab=deployments">Deployments</TabLink>
-            <TabLink href="?tab=connectivity">Connectivity</TabLink>
-            <TabLink href="?tab=events">Events</TabLink>
-          </TabsList>
-        </Tabs>
-        {props.children}
+        <DeploymentTabs />
+        <div className="h-full p-4">{props.children}</div>
       </div>
     </div>
   );
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/DepEdge.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/DepEdge.tsx
new file mode 100644
index 000000000..fe0b3b3d3
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/DepEdge.tsx
@@ -0,0 +1,49 @@
+import type { EdgeProps } from "reactflow";
+import { capitalCase } from "change-case";
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "reactflow";
+
+export const DepEdge: React.FC<EdgeProps> = ({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  label,
+  style = {},
+  markerEnd,
+}) => {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const edgeLabel = capitalCase(String(label).replace(/_/g, " "));
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{ strokeWidth: 2, ...style }}
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            // everything inside EdgeLabelRenderer has no pointer events by default
+            // if you have an interactive element, set pointer-events: all
+            pointerEvents: "all",
+          }}
+          className="nodrag nopan absolute z-10 text-sm"
+        >
+          {edgeLabel}
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/ResourceVisualizationDiagram.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/ResourceVisualizationDiagram.tsx
new file mode 100644
index 000000000..5817aaa31
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/ResourceVisualizationDiagram.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import type { RouterOutputs } from "@ctrlplane/api";
+import React from "react";
+import { IconLoader2, IconNetworkOff } from "@tabler/icons-react";
+import ReactFlow, {
+  ReactFlowProvider,
+  useEdgesState,
+  useNodesState,
+} from "reactflow";
+
+import { useLayoutAndFitView } from "~/app/[workspaceSlug]/(appv2)/_components/reactflow/layout";
+import { api } from "~/trpc/react";
+import { edgeTypes, getEdges } from "./edges";
+import { getNodes, nodeTypes } from "./nodes/nodes";
+
+type Relationships = NonNullable<RouterOutputs["resource"]["relationships"]>;
+
+type ResourceVisualizationDiagramProps = {
+  relationships: Relationships;
+};
+
+export const ResourceVisualizationDiagram: React.FC<
+  ResourceVisualizationDiagramProps
+> = ({ relationships }) => {
+  const [nodes, _, onNodesChange] = useNodesState<{ label: string }>(
+    getNodes(relationships),
+  );
+
+  const [edges, __, onEdgesChange] = useEdgesState(getEdges(relationships));
+
+  const { setReactFlowInstance } = useLayoutAndFitView(nodes, {
+    direction: "LR",
+    extraEdgeLength: 50,
+    focusedNodeId: relationships.resource.id,
+  });
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      fitView
+      proOptions={{ hideAttribution: true }}
+      deleteKeyCode={[]}
+      onInit={setReactFlowInstance}
+      nodesDraggable
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+    />
+  );
+};
+
+type ResourceVisualizationDiagramProviderProps = {
+  resourceId: string;
+};
+
+export const ResourceVisualizationDiagramProvider: React.FC<
+  ResourceVisualizationDiagramProviderProps
+> = ({ resourceId }) => {
+  const { data: relationships, isLoading } =
+    api.resource.relationships.useQuery(resourceId, {
+      refetchInterval: 60_000,
+    });
+
+  if (isLoading)
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <IconLoader2 className="animate-spin" />
+      </div>
+    );
+
+  if (!relationships)
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <IconNetworkOff className="h-4 w-4" /> No relationships found
+      </div>
+    );
+
+  return (
+    <ReactFlowProvider>
+      <ResourceVisualizationDiagram relationships={relationships} />
+    </ReactFlowProvider>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/edges.ts b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/edges.ts
new file mode 100644
index 000000000..dd06d497c
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/edges.ts
@@ -0,0 +1,140 @@
+import type { RouterOutputs } from "@ctrlplane/api";
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import type { EdgeTypes } from "reactflow";
+import { MarkerType } from "reactflow";
+import colors from "tailwindcss/colors";
+import { isPresent } from "ts-is-present";
+
+import { DepEdge } from "./DepEdge";
+
+type Provider = SCHEMA.ResourceProvider & {
+  google: SCHEMA.ResourceProviderGoogle | null;
+};
+
+const markerEnd = {
+  type: MarkerType.Arrow,
+  color: colors.neutral[800],
+};
+
+export const edgeTypes: EdgeTypes = { default: DepEdge };
+
+const createEdgesFromResourceToEnvironments = (
+  resource: SCHEMA.Resource,
+  environments: SCHEMA.Environment[],
+) =>
+  environments.map((environment) => ({
+    id: `${resource.id}-${environment.id}`,
+    source: resource.id,
+    target: environment.id,
+    style: { stroke: colors.neutral[800] },
+    markerEnd,
+    label: "in",
+  }));
+
+const createEdgeFromProviderToResource = (
+  provider: Provider | null,
+  resource: SCHEMA.Resource,
+) =>
+  provider != null
+    ? {
+        id: `${provider.id}-${resource.id}`,
+        source: `${provider.id}-${resource.id}`,
+        target: resource.id,
+        style: { stroke: colors.neutral[800] },
+        markerEnd,
+        label: "discovered",
+      }
+    : null;
+
+type Relationships = NonNullable<RouterOutputs["resource"]["relationships"]>;
+
+const createEdgesFromEnvironmentToDeployments = (
+  environments: SCHEMA.Environment[],
+  deployments: SCHEMA.Deployment[],
+) =>
+  environments
+    .flatMap((e) => deployments.map((d) => ({ e, d })))
+    .map(({ e, d }) => ({
+      id: `${e.id}-${d.id}`,
+      source: e.id,
+      target: `${e.id}-${d.id}`,
+      label: "deploys",
+      style: { stroke: colors.neutral[800] },
+      markerEnd,
+    }));
+
+const createEdgesFromDeploymentsToResources = (relationships: Relationships) =>
+  relationships.nodes.map((resource) => {
+    const { parent } = resource;
+    if (parent == null) return null;
+
+    const allReleaseJobTriggers = relationships.nodes
+      .flatMap((r) => r.workspace.systems)
+      .flatMap((s) => s.environments)
+      .flatMap((e) => e.latestActiveReleases)
+      .map((rel) => rel.releaseJobTrigger);
+
+    const releaseJobTrigger = allReleaseJobTriggers.find(
+      (j) => j.jobId === parent.jobId,
+    );
+    if (releaseJobTrigger == null) return null;
+
+    const { deploymentId } = releaseJobTrigger.release;
+    const { environmentId } = releaseJobTrigger;
+
+    return {
+      id: `${releaseJobTrigger.jobId}-${resource.id}`,
+      source: `${environmentId}-${deploymentId}`,
+      target: resource.id,
+      style: { stroke: colors.neutral[800] },
+      markerEnd,
+      label: "created",
+    };
+  });
+
+export const getEdges = (relationships: Relationships) => {
+  const resourceToEnvEdges = relationships.nodes.flatMap((r) =>
+    createEdgesFromResourceToEnvironments(
+      r,
+      r.workspace.systems.flatMap((s) => s.environments),
+    ),
+  );
+  const environmentToDeploymentEdges = relationships.nodes.flatMap((r) =>
+    r.workspace.systems.flatMap((s) =>
+      createEdgesFromEnvironmentToDeployments(s.environments, s.deployments),
+    ),
+  );
+  const providerEdges = relationships.nodes.flatMap((r) =>
+    r.provider != null ? [createEdgeFromProviderToResource(r.provider, r)] : [],
+  );
+  const deploymentEdges = createEdgesFromDeploymentsToResources(relationships);
+
+  const { resource } = relationships;
+
+  const fromEdges = relationships.associations.from.map((r) => ({
+    id: `${r.resource.id}-${resource.id}`,
+    source: r.resource.id,
+    target: resource.id,
+    style: { stroke: colors.neutral[800] },
+    markerEnd,
+    label: r.type,
+  }));
+
+  const toEdges = relationships.associations.to.map((r) => ({
+    id: `${resource.id}-${r.resource.id}`,
+    source: resource.id,
+    target: r.resource.id,
+    style: { stroke: colors.neutral[800] },
+    markerEnd,
+    label: r.type,
+  }));
+
+  return [
+    ...resourceToEnvEdges,
+    ...environmentToDeploymentEdges,
+    ...providerEdges,
+    ...deploymentEdges,
+    ...fromEdges,
+    ...toEdges,
+  ].filter(isPresent);
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/DeploymentNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/DeploymentNode.tsx
new file mode 100644
index 000000000..99cf54b6b
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/DeploymentNode.tsx
@@ -0,0 +1,102 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import type { NodeProps } from "reactflow";
+import React from "react";
+import { Handle, Position } from "reactflow";
+
+import { cn } from "@ctrlplane/ui";
+import { JobStatus, JobStatusReadable } from "@ctrlplane/validators/jobs";
+
+import { useDeploymentEnvResourceDrawer } from "~/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/useDeploymentResourceDrawer";
+import { ReleaseIcon } from "~/app/[workspaceSlug]/(appv2)/_components/resources/ReleaseCell";
+import { api } from "~/trpc/react";
+
+type DeploymentNodeProps = NodeProps<{
+  label: string;
+  deployment: SCHEMA.Deployment;
+  environment: SCHEMA.Environment;
+  resource: SCHEMA.Resource;
+}>;
+
+export const DeploymentNode: React.FC<DeploymentNodeProps> = ({ data }) => {
+  const { deployment, environment, resource } = data;
+  const { setDeploymentEnvResourceId } = useDeploymentEnvResourceDrawer();
+
+  const resourceId = resource.id;
+  const environmentId = environment.id;
+  const latestActiveReleasesQ =
+    api.resource.activeReleases.byResourceAndEnvironmentId.useQuery(
+      { resourceId, environmentId },
+      { refetchInterval: 5_000 },
+    );
+  const latestActiveReleases = latestActiveReleasesQ.data ?? [];
+  const activeRelease = latestActiveReleases.find(
+    (r) => r.releaseJobTrigger.release.deploymentId === deployment.id,
+  );
+
+  const isInProgress = latestActiveReleases.some(
+    (r) => r.releaseJobTrigger.job.status === JobStatus.InProgress,
+  );
+  const isPending = latestActiveReleases.some(
+    (r) => r.releaseJobTrigger.job.status === JobStatus.Pending,
+  );
+  const isSuccess = latestActiveReleases.every(
+    (r) => r.releaseJobTrigger.job.status === JobStatus.Successful,
+  );
+
+  const releaseJobTrigger = activeRelease?.releaseJobTrigger;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "relative flex h-[70px] w-[250px] cursor-pointer items-center gap-2 rounded-md border border-neutral-800 bg-neutral-900/30 px-4",
+          isInProgress && "border-blue-500",
+          isPending && "border-neutral-500",
+          isSuccess && "border-green-500",
+          releaseJobTrigger == null && "border-neutral-800",
+        )}
+        onClick={() =>
+          setDeploymentEnvResourceId(deployment.id, environment.id, resource.id)
+        }
+      >
+        <ReleaseIcon job={releaseJobTrigger?.job} />
+        <div className="flex min-w-0 flex-1 flex-col items-start">
+          <span className="w-full truncate">{deployment.name}</span>
+          {releaseJobTrigger != null && (
+            <span className="w-full truncate text-sm">
+              {releaseJobTrigger.release.name} -{" "}
+              {JobStatusReadable[releaseJobTrigger.job.status]}
+            </span>
+          )}
+          {releaseJobTrigger == null && (
+            <span className="w-full truncate text-sm text-muted-foreground">
+              No active release
+            </span>
+          )}
+        </div>
+      </div>
+      <Handle
+        type="target"
+        className={cn(
+          "h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800",
+          isInProgress && "border-blue-500",
+          isPending && "border-neutral-500",
+          isSuccess && "border-green-500",
+          releaseJobTrigger == null && "border-neutral-800",
+        )}
+        position={Position.Left}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        className={cn(
+          "h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800",
+          isInProgress && "border-blue-500",
+          isPending && "border-neutral-500",
+          isSuccess && "border-green-500",
+          releaseJobTrigger == null && "border-neutral-800",
+        )}
+      />
+    </>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/EnvironmentNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/EnvironmentNode.tsx
new file mode 100644
index 000000000..6b7517352
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/EnvironmentNode.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import type { RouterOutputs } from "@ctrlplane/api";
+import type { NodeProps } from "reactflow";
+import React from "react";
+import { IconPlant } from "@tabler/icons-react";
+import { Handle, Position } from "reactflow";
+
+import { useEnvironmentDrawer } from "~/app/[workspaceSlug]/(app)/_components/environment-drawer/EnvironmentDrawer";
+
+type Environment = NonNullable<
+  RouterOutputs["resource"]["relationships"]
+>["nodes"][number]["workspace"]["systems"][number]["environments"][number];
+
+type EnvironmentNodeProps = NodeProps<{
+  label: string;
+  environment: Environment;
+}>;
+
+export const EnvironmentNode: React.FC<EnvironmentNodeProps> = (node) => {
+  const { data } = node;
+  const { setEnvironmentId } = useEnvironmentDrawer();
+  return (
+    <>
+      <div
+        className="relative flex w-[250px] cursor-pointer flex-col gap-2 rounded-md border border-neutral-800 bg-neutral-900/30 px-4 py-3"
+        onClick={() => setEnvironmentId(data.environment.id)}
+      >
+        <div className="flex items-center gap-2">
+          <IconPlant className="h-4 w-4 text-green-500" />
+          <span className="text-xs">Environment</span>
+        </div>
+        <span className="truncate text-sm">{data.label}</span>
+      </div>
+      <Handle
+        type="target"
+        className="h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800"
+        position={Position.Left}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800"
+      />
+    </>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/ProviderNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/ProviderNode.tsx
new file mode 100644
index 000000000..f194704a9
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/ProviderNode.tsx
@@ -0,0 +1,53 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import type { NodeProps } from "reactflow";
+import React from "react";
+import { IconBrandGoogleFilled, IconCube } from "@tabler/icons-react";
+import { Handle, Position } from "reactflow";
+
+type ProviderNodeProps = NodeProps<{
+  id: string;
+  name: string;
+  label: string;
+  workspaceId: string;
+  google: SCHEMA.ResourceProviderGoogle | null;
+}>;
+
+export const ProviderIcon: React.FC<{ node: ProviderNodeProps }> = ({
+  node,
+}) => {
+  const { google } = node.data;
+  if (google != null)
+    return <IconBrandGoogleFilled className="h-4 w-4 text-red-500" />;
+  return <IconCube className="h-4 w-4 text-neutral-500" />;
+};
+
+const ProviderLabel: React.FC<{ node: ProviderNodeProps }> = ({ node }) => {
+  const { google } = node.data;
+  if (google != null) return <span className="text-xs ">Google Provider</span>;
+  return <span className="text-xs">Resource Provider</span>;
+};
+
+export const ProviderNode: React.FC<ProviderNodeProps> = (node) => {
+  const { data } = node;
+  return (
+    <>
+      <div className="relative flex w-[250px] flex-col gap-2 rounded-md border border-neutral-800 bg-neutral-900/30 px-4 py-3">
+        <div className="flex items-center gap-2">
+          <ProviderIcon node={node} />
+          <ProviderLabel node={node} />
+        </div>
+        <span className="truncate text-sm">{data.label}</span>
+      </div>
+      <Handle
+        type="target"
+        className="h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800"
+        position={Position.Left}
+      />
+      <Handle
+        type="source"
+        className="h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800"
+        position={Position.Right}
+      />
+    </>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/ResourceNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/ResourceNode.tsx
new file mode 100644
index 000000000..fc1008e4b
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/ResourceNode.tsx
@@ -0,0 +1,48 @@
+import type { NodeProps } from "reactflow";
+import { Handle, Position } from "reactflow";
+
+import { cn } from "@ctrlplane/ui";
+
+import { useResourceDrawer } from "~/app/[workspaceSlug]/(app)/_components/resource-drawer/useResourceDrawer";
+import { ResourceIcon } from "~/app/[workspaceSlug]/(app)/_components/ResourceIcon";
+
+type ResourceNodeProps = NodeProps<{
+  name: string;
+  label: string;
+  id: string;
+  kind: string;
+  version: string;
+  isBaseNode: boolean;
+}>;
+export const ResourceNode: React.FC<ResourceNodeProps> = (node) => {
+  const { data } = node;
+  const { setResourceId } = useResourceDrawer();
+  return (
+    <>
+      <div
+        className={cn(
+          "flex w-[250px] cursor-pointer flex-col gap-2 rounded-md border bg-neutral-900/30 px-4 py-3",
+          data.isBaseNode && "bg-neutral-800/60",
+        )}
+        onClick={() => setResourceId(data.id)}
+      >
+        <div className="flex items-center gap-2">
+          <ResourceIcon version={data.version} kind={data.kind} />
+          <span className="text-xs">{data.kind}</span>
+        </div>
+        <span className="truncate text-sm">{data.name}</span>
+      </div>
+
+      <Handle
+        type="target"
+        className="h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800"
+        position={Position.Left}
+      />
+      <Handle
+        type="source"
+        className="h-2 w-2 rounded-full border border-neutral-800 bg-neutral-800"
+        position={Position.Right}
+      />
+    </>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/nodes.ts b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/nodes.ts
new file mode 100644
index 000000000..7e08b4d9a
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/nodes/nodes.ts
@@ -0,0 +1,88 @@
+import type { RouterOutputs } from "@ctrlplane/api";
+import type { NodeTypes } from "reactflow";
+import { isPresent } from "ts-is-present";
+
+import { DeploymentNode } from "./DeploymentNode";
+import { EnvironmentNode } from "./EnvironmentNode";
+import { ProviderNode } from "./ProviderNode";
+import { ResourceNode } from "./ResourceNode";
+
+type Relationships = NonNullable<RouterOutputs["resource"]["relationships"]>;
+
+enum NodeType {
+  Resource = "resource",
+  Environment = "environment",
+  Provider = "provider",
+  Deployment = "deployment",
+}
+
+export const nodeTypes: NodeTypes = {
+  [NodeType.Resource]: ResourceNode,
+  [NodeType.Environment]: EnvironmentNode,
+  [NodeType.Provider]: ProviderNode,
+  [NodeType.Deployment]: DeploymentNode,
+};
+
+const getResourceNodes = (relationships: Relationships) =>
+  relationships.nodes.map((r) => ({
+    id: r.id,
+    type: NodeType.Resource,
+    data: {
+      ...r,
+      label: r.identifier,
+      isBaseNode: r.id === relationships.resource.id,
+    },
+    position: { x: 0, y: 0 },
+  }));
+
+const getProviderNodes = (relationships: Relationships) =>
+  relationships.nodes
+    .map((r) =>
+      r.provider != null
+        ? {
+            id: `${r.provider.id}-${r.id}`,
+            type: NodeType.Provider,
+            data: { ...r.provider, label: r.provider.name },
+            position: { x: 0, y: 0 },
+          }
+        : null,
+    )
+    .filter(isPresent);
+
+const getEnvironmentNodes = (relationships: Relationships) =>
+  relationships.nodes
+    .flatMap((r) => r.workspace.systems)
+    .flatMap((s) => s.environments.map((e) => ({ s, e })))
+    .map(({ s, e }) => ({
+      id: e.id,
+      type: NodeType.Environment,
+      data: { environment: e, label: `${s.name}/${e.name}` },
+      position: { x: 0, y: 0 },
+    }));
+
+const getDeploymentNodes = (relationships: Relationships) =>
+  relationships.nodes.flatMap((r) =>
+    r.workspace.systems.flatMap((system) =>
+      system.environments.flatMap((environment) =>
+        system.deployments.map((deployment) => ({
+          id: `${environment.id}-${deployment.id}`,
+          type: NodeType.Deployment,
+          data: {
+            deployment,
+            environment,
+            resource: r,
+            label: deployment.name,
+          },
+          position: { x: 0, y: 0 },
+        })),
+      ),
+    ),
+  );
+
+export const getNodes = (relationships: Relationships) =>
+  [
+    ...getResourceNodes(relationships),
+    ...getProviderNodes(relationships),
+    ...getEnvironmentNodes(relationships),
+    ...getDeploymentNodes(relationships),
+  ].filter(isPresent);
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/page.tsx
new file mode 100644
index 000000000..27a2b16bf
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/visualize/page.tsx
@@ -0,0 +1,10 @@
+import { ResourceVisualizationDiagramProvider } from "./ResourceVisualizationDiagram";
+
+export default async function VisualizePage(props: {
+  params: Promise<{ resourceId: string }>;
+}) {
+  const params = await props.params;
+  const { resourceId } = params;
+
+  return <ResourceVisualizationDiagramProvider resourceId={resourceId} />;
+}

From 4a6cfc9290d5d5b21611e50a961cb02ada942606 Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <aditya.choudhari@wandb.com>
Date: Sun, 9 Feb 2025 19:21:07 -0700
Subject: [PATCH 14/14] fix: Add resource deployments table

---
 .../(appv2)/_components/TableSortHeader.tsx   |  61 +++++++
 .../deployments/DeploymentHistoryGraph.tsx    |  71 ++++++++
 .../deployments/ResourceDeploymentRow.tsx     | 102 +++++++++++
 .../ResourceDeploymentRowSkeleton.tsx         |  41 +++++
 .../deployments/ResourceDeploymentTable.tsx   | 172 ++++++++++++++++++
 .../(appv2)/resources/[resourceId]/page.tsx   |  21 ++-
 packages/api/src/router/deployment-stats.ts   |  18 +-
 7 files changed, 482 insertions(+), 4 deletions(-)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/TableSortHeader.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/deployments/DeploymentHistoryGraph.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentRow.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentRowSkeleton.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentTable.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/TableSortHeader.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/TableSortHeader.tsx
new file mode 100644
index 000000000..b5a0bb2de
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/TableSortHeader.tsx
@@ -0,0 +1,61 @@
+import type { StatsColumn } from "@ctrlplane/validators/deployments";
+import { useRouter, useSearchParams } from "next/navigation";
+import { IconChevronDown } from "@tabler/icons-react";
+
+import { cn } from "@ctrlplane/ui";
+import { StatsOrder } from "@ctrlplane/validators/deployments";
+
+const useTableSortHeader = () => {
+  const router = useRouter();
+  const params = useSearchParams();
+
+  const orderByParam = params.get("order-by");
+  const orderParam = params.get("order");
+
+  const setOrderBy = (orderBy: StatsColumn) => {
+    const url = new URL(window.location.href);
+    if (orderByParam !== orderBy) {
+      url.searchParams.set("order-by", orderBy);
+      url.searchParams.set("order", StatsOrder.Asc);
+      router.replace(`${url.pathname}?${url.searchParams.toString()}`);
+      return;
+    }
+
+    const newOrder =
+      orderParam === StatsOrder.Asc ? StatsOrder.Desc : StatsOrder.Asc;
+    url.searchParams.set("order", newOrder);
+    router.replace(`${url.pathname}?${url.searchParams.toString()}`);
+  };
+
+  return { orderByParam, orderParam, setOrderBy };
+};
+
+export const TableSortHeader: React.FC<{
+  children: React.ReactNode;
+  orderByKey: StatsColumn;
+}> = ({ children, orderByKey }) => {
+  const { orderByParam, orderParam, setOrderBy } = useTableSortHeader();
+
+  const isActive = orderByParam === orderByKey;
+
+  return (
+    <div
+      className={cn(
+        "flex cursor-pointer select-none items-center gap-1 text-nowrap",
+        isActive && "font-semibold text-white",
+      )}
+      onClick={() => setOrderBy(orderByKey)}
+    >
+      {children}
+      {isActive && (
+        <IconChevronDown
+          className={cn(
+            orderParam === StatsOrder.Asc && "rotate-180",
+            "h-4 w-4 transition-transform",
+          )}
+          strokeWidth={1.5}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/deployments/DeploymentHistoryGraph.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/deployments/DeploymentHistoryGraph.tsx
new file mode 100644
index 000000000..8a02490e1
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/deployments/DeploymentHistoryGraph.tsx
@@ -0,0 +1,71 @@
+import { useInView } from "react-intersection-observer";
+
+import { Skeleton } from "@ctrlplane/ui/skeleton";
+
+import { api } from "~/trpc/react";
+
+export const HistorySkeleton: React.FC = () => (
+  <div className="flex h-[30px] items-center gap-1">
+    {Array.from({ length: 30 }).map((_, i) => (
+      <Skeleton
+        key={i}
+        className="h-full w-1.5 rounded-sm"
+        style={{ opacity: 1 * (1 - i / 30) }}
+      />
+    ))}
+  </div>
+);
+
+type DeploymentHistoryGraphProps = {
+  deploymentId: string;
+  resourceId?: string;
+};
+
+const DeploymentHistoryGraph: React.FC<DeploymentHistoryGraphProps> = ({
+  deploymentId,
+  resourceId,
+}) => {
+  const { timeZone } = Intl.DateTimeFormat().resolvedOptions();
+  const { data, isLoading } = api.deployment.stats.history.useQuery({
+    deploymentId,
+    resourceId,
+    timeZone,
+  });
+
+  if (isLoading) return <HistorySkeleton />;
+
+  return (
+    <div className="flex h-[30px] items-center gap-1">
+      {data?.map(({ successRate }, j) => (
+        <div
+          key={j}
+          className="relative h-full w-1.5 overflow-hidden rounded-sm"
+        >
+          {successRate == null ? (
+            <div className="absolute bottom-0 h-full w-full bg-neutral-700" />
+          ) : (
+            <>
+              <div className="absolute bottom-0 h-full w-full bg-red-500" />
+              <div
+                className="absolute bottom-0 w-full bg-green-500"
+                style={{ height: `${successRate}%` }}
+              />
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const LazyDeploymentHistoryGraph: React.FC<
+  DeploymentHistoryGraphProps
+> = (props) => {
+  const { ref, inView } = useInView();
+  return (
+    <div ref={ref}>
+      {!inView && <HistorySkeleton />}
+      {inView && <DeploymentHistoryGraph {...props} />}
+    </div>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentRow.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentRow.tsx
new file mode 100644
index 000000000..c32bb1e6f
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentRow.tsx
@@ -0,0 +1,102 @@
+import type { RouterOutputs } from "@ctrlplane/api";
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import { useParams, useRouter } from "next/navigation";
+import { formatDistanceToNowStrict } from "date-fns";
+import prettyMilliseconds from "pretty-ms";
+
+import { cn } from "@ctrlplane/ui";
+import { TableCell, TableRow } from "@ctrlplane/ui/table";
+
+import { LazyDeploymentHistoryGraph } from "~/app/[workspaceSlug]/(appv2)/_components/deployments/DeploymentHistoryGraph";
+
+type DeploymentStats =
+  RouterOutputs["deployment"]["stats"]["byWorkspaceId"][number] & {
+    latestTrigger?: RouterOutputs["job"]["config"]["byWorkspaceId"]["list"][number];
+    resource: SCHEMA.Resource;
+  };
+
+type ResourceDeploymentRowProps = { stats: DeploymentStats };
+
+export const ResourceDeploymentRow: React.FC<ResourceDeploymentRowProps> = ({
+  stats,
+}) => {
+  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
+  const router = useRouter();
+
+  const successRate = stats.successRate ?? 0;
+
+  return (
+    <TableRow
+      key={stats.id}
+      className={cn(
+        "h-16 border-b",
+        stats.latestTrigger == null && "hover:bg-transparent",
+        stats.latestTrigger != null && "cursor-pointer",
+      )}
+      onClick={() => {
+        router.push(
+          `/${workspaceSlug}/systems/${stats.systemSlug}/deployments/${stats.id}/releases`,
+        );
+      }}
+    >
+      <TableCell>
+        <div className="flex w-60 flex-col px-4">
+          <span className="truncate">{stats.name}</span>
+          <span className="truncate text-xs text-muted-foreground">
+            {stats.systemName} / {stats.name}
+          </span>
+        </div>
+      </TableCell>
+
+      <TableCell className="p-4">
+        <span>{stats.latestTrigger?.release.version ?? "No release"}</span>
+      </TableCell>
+
+      <TableCell className="p-4 align-middle">
+        <LazyDeploymentHistoryGraph
+          deploymentId={stats.id}
+          resourceId={stats.resource.id}
+        />
+      </TableCell>
+
+      <TableCell className="p-4 ">
+        {stats.p50 != null
+          ? prettyMilliseconds(Math.round(stats.p50 * 1000), {
+              unitCount: 2,
+              secondsDecimalDigits: 0,
+            })
+          : "N/A"}
+      </TableCell>
+      <TableCell className="p-4 ">
+        {stats.p90 != null
+          ? prettyMilliseconds(Math.round(stats.p90 * 1000), {
+              unitCount: 2,
+              secondsDecimalDigits: 0,
+            })
+          : "N/A"}
+      </TableCell>
+
+      <TableCell className="p-4">
+        <div className="flex items-center gap-2">
+          <div className="h-2 w-full rounded-full bg-neutral-800">
+            <div
+              className="h-full rounded-full bg-white transition-all"
+              style={{ width: `${successRate.toFixed(0)}%` }}
+            />
+          </div>
+          <div className="w-[75px] text-right">{successRate.toFixed(0)}%</div>
+        </div>
+      </TableCell>
+
+      <TableCell className="hidden p-4 align-middle xl:table-cell">
+        <div>
+          {stats.lastRunAt
+            ? formatDistanceToNowStrict(stats.lastRunAt, {
+                addSuffix: false,
+              })
+            : "No runs"}
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentRowSkeleton.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentRowSkeleton.tsx
new file mode 100644
index 000000000..9fb5eb49b
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentRowSkeleton.tsx
@@ -0,0 +1,41 @@
+import { Skeleton } from "@ctrlplane/ui/skeleton";
+
+import { HistorySkeleton } from "~/app/[workspaceSlug]/(appv2)/_components/deployments/DeploymentHistoryGraph";
+
+export const ResourceDeploymentRowSkeleton: React.FC<{ opacity: number }> = ({
+  opacity,
+}) => (
+  <tr className="h-16 border-b">
+    <td>
+      {/* hardcode so that the skeleton doesn't cause visual shift of the table header */}
+      <div className="w-[254px] space-y-3 px-4 align-middle">
+        <Skeleton className="h-3 w-14" style={{ opacity }} />
+        <Skeleton className="h-3 w-20" style={{ opacity }} />
+      </div>
+    </td>
+
+    <td className="p-4 align-middle">
+      <Skeleton className="h-3 w-8" style={{ opacity }} />
+    </td>
+
+    <td className="p-4 align-middle">
+      <HistorySkeleton />
+    </td>
+
+    <td className="p-4 align-middle">
+      <Skeleton className="h-3 w-8" style={{ opacity }} />
+    </td>
+
+    <td className="p-4 align-middle">
+      <Skeleton className="h-3 w-8" style={{ opacity }} />
+    </td>
+
+    <td className="p-4 align-middle">
+      <Skeleton className="h-3 w-14" style={{ opacity }} />
+    </td>
+
+    <td className="hidden p-4 align-middle xl:table-cell">
+      <Skeleton className="h-3 w-14" style={{ opacity }} />
+    </td>
+  </tr>
+);
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentTable.tsx
new file mode 100644
index 000000000..7cbe8ede2
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/deployments/ResourceDeploymentTable.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import type { StatsOrder } from "@ctrlplane/validators/deployments";
+import type { JobCondition } from "@ctrlplane/validators/jobs";
+import { useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import { subDays } from "date-fns";
+import _ from "lodash";
+
+import { Card } from "@ctrlplane/ui/card";
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ctrlplane/ui/table";
+import {
+  ColumnOperator,
+  ComparisonOperator,
+  DateOperator,
+  FilterType,
+} from "@ctrlplane/validators/conditions";
+import { StatsColumn } from "@ctrlplane/validators/deployments";
+import { JobFilterType } from "@ctrlplane/validators/jobs";
+
+import { TableSortHeader } from "~/app/[workspaceSlug]/(appv2)/_components/TableSortHeader";
+import { api } from "~/trpc/react";
+import { ResourceDeploymentRow } from "./ResourceDeploymentRow";
+import { ResourceDeploymentRowSkeleton } from "./ResourceDeploymentRowSkeleton";
+
+type ResourceDeploymentsTableProps = { resource: SCHEMA.Resource };
+
+const getFilter = (
+  resourceId: string,
+  startDate: Date,
+  endDate: Date,
+): JobCondition => {
+  const resourceFilter: JobCondition = {
+    type: JobFilterType.JobResource,
+    operator: ColumnOperator.Equals,
+    value: resourceId,
+  };
+
+  const startDateFilter: JobCondition = {
+    type: FilterType.CreatedAt,
+    operator: DateOperator.AfterOrOn,
+    value: startDate.toISOString(),
+  };
+
+  const endDateFilter: JobCondition = {
+    type: FilterType.CreatedAt,
+    operator: DateOperator.BeforeOrOn,
+    value: endDate.toISOString(),
+  };
+
+  return {
+    type: FilterType.Comparison,
+    operator: ComparisonOperator.And,
+    conditions: [resourceFilter, startDateFilter, endDateFilter],
+  };
+};
+
+export const ResourceDeploymentsTable: React.FC<
+  ResourceDeploymentsTableProps
+> = ({ resource }) => {
+  const { workspaceId } = resource;
+
+  const params = useSearchParams();
+  const orderByParam = params.get("order-by");
+  const orderParam = params.get("order");
+
+  const endDate = useMemo(() => new Date(), []);
+  const startDate = subDays(endDate, 14);
+  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  const filter = getFilter(resource.id, startDate, endDate);
+
+  const triggersQ = api.job.config.byWorkspaceId.list.useQuery({
+    workspaceId,
+    filter,
+    limit: 100,
+  });
+
+  const triggers = triggersQ.data ?? [];
+
+  const latestTriggersByDeployment = _.chain(triggers)
+    .groupBy((t) => t.release.deploymentId)
+    .map((groupedTriggers) => _.maxBy(groupedTriggers, (t) => t.job.startedAt))
+    .filter((t) => t != null)
+    .value();
+
+  const statsQ = api.deployment.stats.byWorkspaceId.useQuery({
+    workspaceId,
+    resourceId: resource.id,
+    startDate,
+    endDate,
+    timezone,
+    orderBy: orderByParam != null ? (orderByParam as StatsColumn) : undefined,
+    order: orderParam != null ? (orderParam as StatsOrder) : undefined,
+  });
+
+  const stats = statsQ.data ?? [];
+
+  const statsWithLatestTrigger = stats.map((stat) => {
+    const latestTrigger = latestTriggersByDeployment.find(
+      (t) => t.release.deploymentId === stat.id,
+    );
+    return { ...stat, latestTrigger, resource };
+  });
+
+  const isLoading = triggersQ.isLoading || statsQ.isLoading;
+
+  return (
+    <Card className="rounded-md">
+      <Table>
+        <TableHeader>
+          <TableRow className="h-16 hover:bg-transparent">
+            <TableHead className="p-4">
+              <TableSortHeader orderByKey={StatsColumn.Name}>
+                Deployment
+              </TableSortHeader>
+            </TableHead>
+
+            <TableHead className="w-20 p-4 xl:w-40">Version</TableHead>
+
+            <TableHead className="p-4">History</TableHead>
+
+            <TableHead className="p-4">
+              <TableSortHeader orderByKey={StatsColumn.P50}>
+                P50 Duration
+              </TableSortHeader>
+            </TableHead>
+
+            <TableHead className="p-4">
+              <TableSortHeader orderByKey={StatsColumn.P90}>
+                P90 Duration
+              </TableSortHeader>
+            </TableHead>
+
+            <TableHead className="p-4">
+              <TableSortHeader orderByKey={StatsColumn.SuccessRate}>
+                Success Rate
+              </TableSortHeader>
+            </TableHead>
+
+            <TableHead className="hidden p-4 xl:table-cell xl:w-[120px]">
+              <TableSortHeader orderByKey={StatsColumn.LastRunAt}>
+                Last Run
+              </TableSortHeader>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          {!isLoading &&
+            statsWithLatestTrigger.map((stat) => (
+              <ResourceDeploymentRow key={stat.id} stats={stat} />
+            ))}
+          {isLoading &&
+            Array.from({ length: 3 }).map((_, index) => (
+              <ResourceDeploymentRowSkeleton
+                key={index}
+                opacity={1 * (1 - index / 3)}
+              />
+            ))}
+        </TableBody>
+      </Table>
+    </Card>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/page.tsx
index 0e6dc4c19..7059085ed 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/resources/[resourceId]/page.tsx
@@ -1,3 +1,20 @@
-export default function ResourcePage() {
-  return <div>Hello</div>;
+import { notFound } from "next/navigation";
+
+import { api } from "~/trpc/server";
+import { ResourceDeploymentsTable } from "./deployments/ResourceDeploymentTable";
+
+type Params = Promise<{ resourceId: string }>;
+type SearchParams = Promise<{ tab?: string }>;
+
+export default async function ResourcePage(props: {
+  params: Params;
+  searchParams: SearchParams;
+}) {
+  const params = await props.params;
+  const { resourceId } = params;
+
+  const resource = await api.resource.byId(resourceId);
+  if (resource == null) notFound();
+
+  return <ResourceDeploymentsTable resource={resource} />;
 }
diff --git a/packages/api/src/router/deployment-stats.ts b/packages/api/src/router/deployment-stats.ts
index 5f9a9e9ed..bcb19f918 100644
--- a/packages/api/src/router/deployment-stats.ts
+++ b/packages/api/src/router/deployment-stats.ts
@@ -39,6 +39,7 @@ export const deploymentStatsRouter = createTRPCRouter({
     .input(
       z.object({
         workspaceId: z.string().uuid(),
+        resourceId: z.string().uuid().optional(),
         startDate: z.date(),
         endDate: z.date(),
         timezone: z.string(),
@@ -48,7 +49,15 @@ export const deploymentStatsRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
-      const { workspaceId, startDate, endDate, orderBy, order, search } = input;
+      const {
+        workspaceId,
+        resourceId,
+        startDate,
+        endDate,
+        orderBy,
+        order,
+        search,
+      } = input;
       const orderFunc = (field: unknown) =>
         order === StatsOrder.Asc
           ? sql`${field} ASC NULLS LAST`
@@ -147,6 +156,7 @@ export const deploymentStatsRouter = createTRPCRouter({
             lte(schema.job.createdAt, endDate),
             isNull(schema.resource.deletedAt),
             search ? ilike(schema.deployment.name, `%${search}%`) : undefined,
+            resourceId ? eq(schema.resource.id, resourceId) : undefined,
           ),
         )
         .orderBy(orderFunc(getOrderBy()))
@@ -168,10 +178,11 @@ export const deploymentStatsRouter = createTRPCRouter({
       z.object({
         deploymentId: z.string().uuid(),
         timeZone: z.string(),
+        resourceId: z.string().uuid().optional(),
       }),
     )
     .query(async ({ ctx, input }) => {
-      const { deploymentId, timeZone } = input;
+      const { deploymentId, timeZone, resourceId } = input;
       const endDate = new Date();
       const startDate = subDays(new Date(), 29);
       const dates = eachDayOfInterval({ start: startDate, end: endDate }).map(
@@ -203,6 +214,9 @@ export const deploymentStatsRouter = createTRPCRouter({
             inArray(schema.job.status, analyticsStatuses),
             gte(schema.job.completedAt, startDate),
             lt(schema.job.completedAt, endDate),
+            resourceId
+              ? eq(schema.releaseJobTrigger.resourceId, resourceId)
+              : undefined,
           ),
         )
         .as("base");