diff --git a/web-admin/src/features/dashboards/listing/DashboardsTable.svelte b/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
index 4cdadbf90a5..b73ca548396 100644
--- a/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
+++ b/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from "$app/stores";
-  import ResourceError from "@rilldata/web-admin/features/projects/ResourceError.svelte";
+  import ResourceError from "@rilldata/web-common/features/resources/ResourceError.svelte";
   import ResourceList from "@rilldata/web-admin/features/resources/ResourceList.svelte";
   import ResourceListEmptyState from "@rilldata/web-admin/features/resources/ResourceListEmptyState.svelte";
   import ExploreIcon from "@rilldata/web-common/components/icons/ExploreIcon.svelte";
diff --git a/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte b/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte
index 337a1b802f6..dccd2535897 100644
--- a/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte
+++ b/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte
@@ -9,7 +9,7 @@
   import {
     PROJECT_ROLES_DESCRIPTION_MAP,
     PROJECT_ROLES_OPTIONS,
-  } from "@rilldata/web-admin/features/projects/constants.ts";
+  } from "@rilldata/web-admin/features/projects/user-management/constants.ts";
   import { Button } from "@rilldata/web-common/components/button";
   import Select from "@rilldata/web-common/components/forms/Select.svelte";
   import * as Dialog from "@rilldata/web-common/components/dialog";
diff --git a/web-admin/src/features/projects/ProjectHeader.svelte b/web-admin/src/features/projects/ProjectHeader.svelte
index b8cefac25b2..5723e4e733c 100644
--- a/web-admin/src/features/projects/ProjectHeader.svelte
+++ b/web-admin/src/features/projects/ProjectHeader.svelte
@@ -4,7 +4,6 @@
   import ExploreBookmarks from "@rilldata/web-admin/features/bookmarks/ExploreBookmarks.svelte";
   import ShareDashboardPopover from "@rilldata/web-admin/features/dashboards/share/ShareDashboardPopover.svelte";
   import ShareProjectPopover from "@rilldata/web-admin/features/projects/user-management/ShareProjectPopover.svelte";
-  import { createAdminServiceGetProjectWithBearerToken } from "@rilldata/web-admin/features/public-urls/get-project-with-bearer-token";
   import Breadcrumbs from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
   import type { PathOption } from "@rilldata/web-common/components/navigation/breadcrumbs/types";
   import { useCanvas } from "@rilldata/web-common/features/canvas/selector";
@@ -18,10 +17,7 @@
   import HeaderLogo from "@rilldata/web-common/layout/header/HeaderLogo.svelte";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import type { V1ProjectPermissions } from "../../client";
-  import {
-    createAdminServiceGetCurrentUser,
-    createAdminServiceGetDeploymentCredentials,
-  } from "../../client";
+  import { createAdminServiceGetCurrentUser } from "../../client";
   import ViewAsUserChip from "../../features/view-as-user/ViewAsUserChip.svelte";
   import { viewAsUserStore } from "../../features/view-as-user/viewAsUserStore";
   import CreateAlert from "../alerts/CreateAlert.svelte";
@@ -72,40 +68,6 @@
   $: onCanvasDashboardPage = isCanvasDashboardPage($page);
   $: onPublicURLPage = isPublicURLPage($page);
 
-  // When "View As" is active, fetch deployment credentials for the mocked user.
-  $: mockedUserId = $viewAsUserStore?.id;
-
-  $: mockedCredentialsQuery = createAdminServiceGetDeploymentCredentials(
-    organization,
-    project,
-    { userId: mockedUserId },
-    {
-      query: {
-        enabled: !!mockedUserId && !!organization && !!project,
-      },
-    },
-  );
-
-  $: mockedProjectQuery = createAdminServiceGetProjectWithBearerToken(
-    organization,
-    project,
-    $mockedCredentialsQuery.data?.accessToken ?? "",
-    undefined,
-    {
-      query: {
-        enabled: !!$mockedCredentialsQuery.data?.accessToken,
-      },
-    },
-  );
-
-  // Use effective permissions when "View As" is active (from server)
-  $: effectiveManageProjectMembers =
-    $mockedProjectQuery.data?.projectPermissions?.manageProjectMembers ??
-    projectPermissions.manageProjectMembers;
-  $: effectiveCreateMagicAuthTokens =
-    $mockedProjectQuery.data?.projectPermissions?.createMagicAuthTokens ??
-    projectPermissions.createMagicAuthTokens;
-
   $: loggedIn = !!$user.data?.user;
   $: rillLogoHref = !loggedIn ? "https://www.rilldata.com" : "/";
 
@@ -213,7 +175,7 @@
     {#if $viewAsUserStore}
       <ViewAsUserChip />
     {/if}
-    {#if onProjectPage && effectiveManageProjectMembers}
+    {#if onProjectPage && projectPermissions.manageProjectMembers}
       <ShareProjectPopover
         {organization}
         {project}
@@ -249,7 +211,7 @@
                 <CreateAlert />
               {/if}
               <ShareDashboardPopover
-                createMagicAuthTokens={effectiveCreateMagicAuthTokens}
+                createMagicAuthTokens={projectPermissions.createMagicAuthTokens}
               />
             {/if}
           </StateManagersProvider>
@@ -263,7 +225,7 @@
       {/if}
       <CanvasBookmarks {organization} {project} canvasName={dashboard} />
       <ShareDashboardPopover
-        createMagicAuthTokens={effectiveCreateMagicAuthTokens}
+        createMagicAuthTokens={projectPermissions.createMagicAuthTokens}
       />
     {/if}
 
diff --git a/web-admin/src/features/projects/ResourceError.svelte b/web-admin/src/features/projects/ResourceError.svelte
deleted file mode 100644
index 5e420fd8cb3..00000000000
--- a/web-admin/src/features/projects/ResourceError.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-  export let kind: string;
-  export let error: Error;
-
-  $: console.error(`error loading ${kind}s:`, error);
-</script>
-
-<div
-  class="m-auto mt-20 pb-10 flex-col justify-center items-center gap-y-4 inline-flex"
->
-  <div
-    class="flex flex-col gap-y-2 justify-center items-center text-center text-sm"
-  >
-    <div class="text-fg-secondary font-semibold">Error loading {kind}s</div>
-    <div class="text-fg-secondary font-normal">
-      If this error persists, please contact support.
-    </div>
-  </div>
-</div>
diff --git a/web-admin/src/features/projects/invalidations.ts b/web-admin/src/features/projects/invalidations.ts
deleted file mode 100644
index 56abbf6d3f9..00000000000
--- a/web-admin/src/features/projects/invalidations.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {
-  getAdminServiceGetGithubUserStatusQueryKey,
-  getAdminServiceGetProjectQueryKey,
-} from "@rilldata/web-admin/client";
-import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
-import { invalidateRuntimeQueries } from "@rilldata/web-common/runtime-client/invalidation";
-
-export function invalidateProjectQueries(
-  instanceId: string,
-  organization: string,
-  project: string,
-) {
-  return Promise.all([
-    queryClient.refetchQueries({
-      queryKey: getAdminServiceGetProjectQueryKey(organization, project),
-
-      // avoid refetching createAdminServiceGetProjectWithBearerToken
-      exact: true,
-    }),
-    queryClient.refetchQueries({
-      queryKey: getAdminServiceGetGithubUserStatusQueryKey(),
-    }),
-    invalidateRuntimeQueries(queryClient, instanceId),
-  ]);
-}
diff --git a/web-admin/src/features/projects/project-query-options.ts b/web-admin/src/features/projects/project-query-options.ts
new file mode 100644
index 00000000000..a7461b6b9af
--- /dev/null
+++ b/web-admin/src/features/projects/project-query-options.ts
@@ -0,0 +1,35 @@
+import {
+  V1DeploymentStatus,
+  type RpcStatus,
+  type V1GetProjectResponse,
+} from "@rilldata/web-admin/client";
+import { RUNTIME_ACCESS_TOKEN_DEFAULT_TTL } from "@rilldata/web-common/runtime-client/constants";
+import type { CreateQueryOptions } from "@tanstack/svelte-query";
+
+const PollTimeWhenProjectDeploymentPending = 1000;
+const PollTimeWhenProjectDeploymentError = 5000;
+const PollTimeWhenProjectDeploymentOk = RUNTIME_ACCESS_TOKEN_DEFAULT_TTL / 2; // Proactively refetch the JWT before it expires
+
+export const baseGetProjectQueryOptions: Partial<
+  CreateQueryOptions<V1GetProjectResponse, RpcStatus>
+> = {
+  gcTime: Math.min(RUNTIME_ACCESS_TOKEN_DEFAULT_TTL, 1000 * 60 * 5), // Make sure we don't keep a stale JWT in the cache
+  refetchInterval: (query) => {
+    const status = query.state.data?.deployment?.status;
+    switch (status) {
+      case V1DeploymentStatus.DEPLOYMENT_STATUS_PENDING:
+      case V1DeploymentStatus.DEPLOYMENT_STATUS_UPDATING:
+        return PollTimeWhenProjectDeploymentPending;
+      case V1DeploymentStatus.DEPLOYMENT_STATUS_ERRORED:
+        return PollTimeWhenProjectDeploymentError;
+      case V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING:
+        return PollTimeWhenProjectDeploymentOk;
+      default:
+        return false;
+    }
+  },
+  refetchIntervalInBackground: true, // Keep polling while the tab is hidden (e.g. deploy loader)
+  refetchOnMount: true,
+  refetchOnReconnect: true,
+  refetchOnWindowFocus: true,
+};
diff --git a/web-admin/src/features/projects/project-runtime.spec.ts b/web-admin/src/features/projects/project-runtime.spec.ts
new file mode 100644
index 00000000000..2af193fa7a5
--- /dev/null
+++ b/web-admin/src/features/projects/project-runtime.spec.ts
@@ -0,0 +1,105 @@
+import type {
+  V1GetDeploymentCredentialsResponse,
+  V1GetProjectResponse,
+  V1ProjectPermissions,
+} from "@rilldata/web-admin/client";
+import { describe, expect, it } from "vitest";
+import { resolveRuntimeConnection } from "./project-runtime";
+
+const fakeProjectData: V1GetProjectResponse = {
+  deployment: {
+    runtimeHost: "https://runtime.example.com",
+    runtimeInstanceId: "inst-123",
+  },
+  jwt: "project-jwt",
+  projectPermissions: {
+    readDev: true,
+    manageDev: false,
+    manageProjectMembers: true,
+    createMagicAuthTokens: true,
+  },
+};
+
+const fakeMockedCredentials: V1GetDeploymentCredentialsResponse = {
+  runtimeHost: "https://mock-runtime.example.com",
+  instanceId: "mock-inst-456",
+  accessToken: "mock-jwt",
+};
+
+const fakeMockedPermissions: V1ProjectPermissions = {
+  readDev: false,
+  manageDev: false,
+  manageProjectMembers: false,
+  createMagicAuthTokens: false,
+};
+
+describe("resolveRuntimeConnection", () => {
+  it("returns cookie auth (user) by default", () => {
+    const result = resolveRuntimeConnection(fakeProjectData, undefined, false);
+    expect(result).toEqual({
+      authContext: "user",
+      host: "https://runtime.example.com",
+      instanceId: "inst-123",
+      jwt: "project-jwt",
+      projectPermissions: fakeProjectData.projectPermissions,
+    });
+  });
+
+  it("returns undefined fields when projectData is undefined", () => {
+    const result = resolveRuntimeConnection(undefined, undefined, false);
+    expect(result).toEqual({
+      authContext: "user",
+      host: undefined,
+      instanceId: undefined,
+      jwt: undefined,
+      projectPermissions: undefined,
+    });
+  });
+
+  it("returns magic auth on public URL pages", () => {
+    const result = resolveRuntimeConnection(fakeProjectData, undefined, true);
+    expect(result.authContext).toBe("magic");
+    expect(result.host).toBe("https://runtime.example.com");
+  });
+
+  it("returns mock auth when View As is active", () => {
+    const result = resolveRuntimeConnection(
+      fakeProjectData,
+      {
+        credentials: fakeMockedCredentials,
+        permissions: fakeMockedPermissions,
+      },
+      false,
+    );
+    expect(result).toEqual({
+      authContext: "mock",
+      host: "https://mock-runtime.example.com",
+      instanceId: "mock-inst-456",
+      jwt: "mock-jwt",
+      projectPermissions: fakeMockedPermissions,
+    });
+  });
+
+  it("mock auth takes priority over public URL", () => {
+    const result = resolveRuntimeConnection(
+      fakeProjectData,
+      {
+        credentials: fakeMockedCredentials,
+        permissions: fakeMockedPermissions,
+      },
+      true,
+    );
+    expect(result.authContext).toBe("mock");
+  });
+
+  it("falls back to project permissions when mock permissions are undefined", () => {
+    const result = resolveRuntimeConnection(
+      fakeProjectData,
+      { credentials: fakeMockedCredentials },
+      false,
+    );
+    expect(result.projectPermissions).toEqual(
+      fakeProjectData.projectPermissions,
+    );
+  });
+});
diff --git a/web-admin/src/features/projects/project-runtime.ts b/web-admin/src/features/projects/project-runtime.ts
new file mode 100644
index 00000000000..7ad3c84fb93
--- /dev/null
+++ b/web-admin/src/features/projects/project-runtime.ts
@@ -0,0 +1,50 @@
+import type {
+  V1GetDeploymentCredentialsResponse,
+  V1GetProjectResponse,
+  V1ProjectPermissions,
+} from "@rilldata/web-admin/client";
+import type { AuthContext } from "@rilldata/web-common/runtime-client/v2/runtime-client";
+
+/**
+ * Resolves the effective runtime connection based on which auth mode is active.
+ *
+ * Three modes, in priority order:
+ *   1. Mock (View As): use mocked user's credentials and permissions
+ *   2. Magic (Public URL): bearer-token auth, project's runtime host/jwt
+ *   3. User (default): cookie auth, project's runtime host/jwt
+ */
+export function resolveRuntimeConnection(
+  projectData: V1GetProjectResponse | undefined,
+  mockUser:
+    | {
+        credentials: V1GetDeploymentCredentialsResponse;
+        permissions?: V1ProjectPermissions;
+      }
+    | undefined,
+  onPublicURLPage: boolean,
+): {
+  authContext: AuthContext;
+  host: string | undefined;
+  instanceId: string | undefined;
+  jwt: string | undefined;
+  projectPermissions: V1ProjectPermissions | undefined;
+} {
+  if (mockUser) {
+    return {
+      authContext: "mock",
+      host: mockUser.credentials.runtimeHost,
+      instanceId: mockUser.credentials.instanceId,
+      jwt: mockUser.credentials.accessToken,
+      projectPermissions:
+        mockUser.permissions ?? projectData?.projectPermissions,
+    };
+  }
+
+  return {
+    authContext: onPublicURLPage ? "magic" : "user",
+    host: projectData?.deployment?.runtimeHost,
+    instanceId: projectData?.deployment?.runtimeInstanceId,
+    jwt: projectData?.jwt,
+    projectPermissions: projectData?.projectPermissions,
+  };
+}
diff --git a/web-admin/src/features/projects/user-management/OrgUserGroupSetRole.svelte b/web-admin/src/features/projects/user-management/OrgUserGroupSetRole.svelte
index 545a6e661b7..4d63e72c5d5 100644
--- a/web-admin/src/features/projects/user-management/OrgUserGroupSetRole.svelte
+++ b/web-admin/src/features/projects/user-management/OrgUserGroupSetRole.svelte
@@ -13,7 +13,7 @@
   import { useQueryClient } from "@tanstack/svelte-query";
   import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import { PROJECT_ROLES_DESCRIPTION_MAP } from "../constants";
+  import { PROJECT_ROLES_DESCRIPTION_MAP } from "./constants";
 
   export let organization: string;
   export let group: V1MemberUsergroup;
diff --git a/web-admin/src/features/projects/user-management/ProjectUserGroupSetRole.svelte b/web-admin/src/features/projects/user-management/ProjectUserGroupSetRole.svelte
index 5d2f6cf7cec..9900d7b2d0c 100644
--- a/web-admin/src/features/projects/user-management/ProjectUserGroupSetRole.svelte
+++ b/web-admin/src/features/projects/user-management/ProjectUserGroupSetRole.svelte
@@ -13,7 +13,7 @@
   import { useQueryClient } from "@tanstack/svelte-query";
   import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import { PROJECT_ROLES_DESCRIPTION_MAP } from "../constants";
+  import { PROJECT_ROLES_DESCRIPTION_MAP } from "./constants";
 
   export let organization: string;
   export let group: V1MemberUsergroup;
diff --git a/web-admin/src/features/projects/user-management/UserRoleSelect.svelte b/web-admin/src/features/projects/user-management/UserRoleSelect.svelte
index cdc9aa1e676..6f80dfef459 100644
--- a/web-admin/src/features/projects/user-management/UserRoleSelect.svelte
+++ b/web-admin/src/features/projects/user-management/UserRoleSelect.svelte
@@ -7,7 +7,7 @@
   } from "@rilldata/web-common/components/dropdown-menu";
   import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import { PROJECT_ROLES_OPTIONS } from "../constants";
+  import { PROJECT_ROLES_OPTIONS } from "./constants";
 
   export let value: string;
   export let width = "w-18";
diff --git a/web-admin/src/features/projects/user-management/UserSetRole.svelte b/web-admin/src/features/projects/user-management/UserSetRole.svelte
index ef6d6f895e5..04bc5c18f6c 100644
--- a/web-admin/src/features/projects/user-management/UserSetRole.svelte
+++ b/web-admin/src/features/projects/user-management/UserSetRole.svelte
@@ -16,7 +16,7 @@
   import { useQueryClient } from "@tanstack/svelte-query";
   import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import { PROJECT_ROLES_DESCRIPTION_MAP } from "../constants";
+  import { PROJECT_ROLES_DESCRIPTION_MAP } from "./constants";
 
   type User = V1ProjectMemberUser | V1ProjectInvite;
 
diff --git a/web-admin/src/features/projects/user-management/UsergroupSetRole.svelte b/web-admin/src/features/projects/user-management/UsergroupSetRole.svelte
index 00128e223bb..04972dbc3aa 100644
--- a/web-admin/src/features/projects/user-management/UsergroupSetRole.svelte
+++ b/web-admin/src/features/projects/user-management/UsergroupSetRole.svelte
@@ -12,7 +12,7 @@
   import { useQueryClient } from "@tanstack/svelte-query";
   import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import { PROJECT_ROLES_DESCRIPTION_MAP } from "../constants";
+  import { PROJECT_ROLES_DESCRIPTION_MAP } from "./constants";
 
   export let organization: string;
   export let project: string;
diff --git a/web-admin/src/features/projects/constants.ts b/web-admin/src/features/projects/user-management/constants.ts
similarity index 100%
rename from web-admin/src/features/projects/constants.ts
rename to web-admin/src/features/projects/user-management/constants.ts
diff --git a/web-admin/src/routes/[organization]/[project]/+layout.svelte b/web-admin/src/routes/[organization]/[project]/+layout.svelte
index 1679a13e62e..7af6f0565a0 100644
--- a/web-admin/src/routes/[organization]/[project]/+layout.svelte
+++ b/web-admin/src/routes/[organization]/[project]/+layout.svelte
@@ -1,44 +1,23 @@
-<script context="module" lang="ts">
-  const PollTimeWhenProjectDeploymentPending = 1000;
-  const PollTimeWhenProjectDeploymentError = 5000;
-  const PollTimeWhenProjectDeploymentOk = RUNTIME_ACCESS_TOKEN_DEFAULT_TTL / 2; // Proactively refetch the JWT before it expires
-
-  const baseGetProjectQueryOptions: Partial<
-    CreateQueryOptions<V1GetProjectResponse, RpcStatus>
-  > = {
-    gcTime: Math.min(RUNTIME_ACCESS_TOKEN_DEFAULT_TTL, 1000 * 60 * 5), // Make sure we don't keep a stale JWT in the cache
-    refetchInterval: (query) => {
-      const status = query.state.data?.deployment?.status;
-      switch (status) {
-        case V1DeploymentStatus.DEPLOYMENT_STATUS_PENDING:
-        case V1DeploymentStatus.DEPLOYMENT_STATUS_UPDATING:
-          return PollTimeWhenProjectDeploymentPending;
-        case V1DeploymentStatus.DEPLOYMENT_STATUS_ERRORED:
-          return PollTimeWhenProjectDeploymentError;
-        case V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING:
-          return PollTimeWhenProjectDeploymentOk;
-        default:
-          return false;
-      }
-    },
-    refetchIntervalInBackground: true, // Keep polling while the tab is hidden (e.g. deploy loader)
-    refetchOnMount: true,
-    refetchOnReconnect: true,
-    refetchOnWindowFocus: true,
-  };
-</script>
+<!--
+  Project layout: connects to the project's runtime when the deployment is running,
+  or shows a status page (building, error, hibernating) when it isn't.
 
+  Four dimensions converge here:
+    1. Auth mode: cookie (logged-in), bearer token (public URL), or mock (View As)
+    2. Deployment lifecycle: running, pending, errored, hibernating
+    3. Runtime connection: host, instanceId, JWT passed to RuntimeProvider
+    4. Navigation chrome: full header + tabs when running, slim header otherwise
+-->
 <script lang="ts">
-  import { onNavigate } from "$app/navigation";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
+  import { untrack } from "svelte";
+  import type { Snippet } from "svelte";
   import {
     V1DeploymentStatus,
     type V1Organization,
     createAdminServiceGetCurrentUser,
     createAdminServiceGetDeploymentCredentials,
     createAdminServiceGetProject,
-    type RpcStatus,
-    type V1GetProjectResponse,
   } from "@rilldata/web-admin/client";
   import {
     isProjectPage,
@@ -49,6 +28,8 @@
   import ProjectBuilding from "@rilldata/web-admin/features/projects/ProjectBuilding.svelte";
   import ProjectHeader from "@rilldata/web-admin/features/projects/ProjectHeader.svelte";
   import ProjectTabs from "@rilldata/web-admin/features/projects/ProjectTabs.svelte";
+  import { baseGetProjectQueryOptions } from "@rilldata/web-admin/features/projects/project-query-options";
+  import { resolveRuntimeConnection } from "@rilldata/web-admin/features/projects/project-runtime";
   import RedeployProjectCta from "@rilldata/web-admin/features/projects/RedeployProjectCTA.svelte";
   import SlimProjectHeader from "@rilldata/web-admin/features/projects/SlimProjectHeader.svelte";
   import { createAdminServiceGetProjectWithBearerToken } from "@rilldata/web-admin/features/public-urls/get-project-with-bearer-token";
@@ -59,192 +40,175 @@
   import { themeControl } from "@rilldata/web-common/features/themes/theme-control";
   import { metricsService } from "@rilldata/web-common/metrics/initMetrics";
   import RuntimeProvider from "@rilldata/web-common/runtime-client/v2/RuntimeProvider.svelte";
-  import { RUNTIME_ACCESS_TOKEN_DEFAULT_TTL } from "@rilldata/web-common/runtime-client/constants";
   import type { HTTPError } from "@rilldata/web-common/lib/errors";
-  import type { AuthContext } from "@rilldata/web-common/runtime-client/v2/runtime-client";
-  import type { CreateQueryOptions } from "@tanstack/svelte-query";
   import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient.ts";
   import { getRuntimeServiceListResourcesQueryKey } from "@rilldata/web-common/runtime-client";
-  import { onDestroy } from "svelte";
 
-  const user = createAdminServiceGetCurrentUser();
+  let { children }: { children: Snippet } = $props();
+
+  // --- Page state ---
+
+  let organization = $derived(page.params.organization);
+  let project = $derived(page.params.project);
+
+  // Token: from route params, or from search params on report/alert pages
+  let token = $derived.by(() => {
+    if (isPublicReportPage(page) || isPublicAlertPage(page)) {
+      return page.url.searchParams.get("token");
+    }
+    return page.params.token;
+  });
 
-  $: ({
-    url: { pathname },
-    params: { organization, project, token },
-    data: pageData,
-  } = $page);
+  let onProjectPage = $derived(isProjectPage(page));
+  let onPublicURLPage = $derived(isPublicURLPage(page));
 
-  // Root layout data used by ProjectHeader / SlimProjectHeader
-  $: organizationPermissions = pageData?.organizationPermissions ?? {};
-  $: planDisplayName = pageData?.planDisplayName;
-  $: organizationLogoUrl = getThemedLogoUrl(
-    $themeControl,
-    pageData?.organization as V1Organization | undefined,
+  // From root layout; passed through to header components
+  let organizationPermissions = $derived(
+    page.data?.organizationPermissions ?? {},
+  );
+  let planDisplayName = $derived(page.data?.planDisplayName);
+  let organizationLogoUrl = $derived(
+    getThemedLogoUrl(
+      $themeControl,
+      page.data?.organization as V1Organization | undefined,
+    ),
   );
 
-  // Initialize view-as store for this project scope (loads from sessionStorage)
-  $: if (organization && project) {
-    viewAsUserStore.initForProject(organization, project);
-  }
+  // --- View As (admin impersonation of another user's permissions) ---
 
-  // Clear view-as state when navigating to a different project
-  onNavigate(({ from, to }) => {
-    const changedProject =
-      !from ||
-      !to ||
-      from.params?.organization !== to.params?.organization ||
-      from.params?.project !== to.params?.project;
-    if (changedProject) {
-      viewAsUserStore.clear();
+  let mockedUserId = $derived($viewAsUserStore?.id);
+
+  // Initialize view-as store for current project scope; clear on scope change or unmount
+  $effect(() => {
+    if (organization && project) {
+      viewAsUserStore.initForProject(organization, project);
     }
+    return () => {
+      viewAsUserStore.clear();
+    };
   });
 
-  // Clear view-as state when unmounting (e.g., navigating to org page)
-  onDestroy(() => {
-    viewAsUserStore.clear();
-  });
+  // --- Queries (three auth strategies; cookie and token are mutually exclusive,
+  //     mock is an overlay that runs in parallel when View As is active) ---
 
-  $: onProjectPage = isProjectPage($page);
-  $: onPublicURLPage = isPublicURLPage($page);
-  $: onPublicReportOrAlertPage =
-    isPublicReportPage($page) || isPublicAlertPage($page);
-  $: if (onPublicReportOrAlertPage) {
-    token = $page.url.searchParams.get("token");
-  }
+  const user = createAdminServiceGetCurrentUser();
 
   /**
    * `GetProject` with default cookie-based auth.
-   * This returns the deployment credentials for the current logged-in user.
    */
-  $: cookieProjectQuery = createAdminServiceGetProject(
-    organization,
-    project,
-    undefined,
-    {
+  let cookieProjectQuery = $derived(
+    createAdminServiceGetProject(organization, project, undefined, {
       query: baseGetProjectQueryOptions,
-    },
+    }),
   );
 
   /**
    * `GetProject` with token-based auth.
-   * This returns the deployment credentials for anonymous users who visit a Public URL.
-   * The token is provided via the `[organization]/[project]/-/share/[token]` URL.
+   * Returns deployment credentials for anonymous users visiting a Public URL.
    */
-  $: tokenProjectQuery = createAdminServiceGetProjectWithBearerToken(
-    organization,
-    project,
-    token,
-    undefined,
-    {
-      query: baseGetProjectQueryOptions,
-    },
+  let tokenProjectQuery = $derived(
+    createAdminServiceGetProjectWithBearerToken(
+      organization,
+      project,
+      token,
+      undefined,
+      { query: baseGetProjectQueryOptions },
+    ),
   );
 
-  $: projectQuery = onPublicURLPage ? tokenProjectQuery : cookieProjectQuery;
+  let projectQuery = $derived(
+    onPublicURLPage ? tokenProjectQuery : cookieProjectQuery,
+  );
 
   /**
-   * `GetDeploymentCredentials`
-   * This returns the deployment credentials for mocked/simulated users (aka the "View As" functionality).
+   * `GetDeploymentCredentials` for "View As" (mocked/simulated user).
    */
-  $: mockedUserId = $viewAsUserStore?.id;
-  $: mockedUserDeploymentCredentialsQuery =
+  let mockedUserDeploymentCredentialsQuery = $derived(
     createAdminServiceGetDeploymentCredentials(
       organization,
       project,
       { userId: mockedUserId },
-      {
-        query: {
-          enabled: !!mockedUserId,
-        },
-      },
-    );
-  $: ({ data: mockedUserDeploymentCredentials } =
-    $mockedUserDeploymentCredentialsQuery);
+      { query: { enabled: !!mockedUserId } },
+    ),
+  );
+  let mockedUserDeploymentCredentials = $derived(
+    $mockedUserDeploymentCredentialsQuery.data,
+  );
 
   /**
    * When "View As" is active, fetch the project using the mocked user's JWT.
-   * This returns the impersonated user's `projectPermissions` from the server.
+   * Returns the impersonated user's `projectPermissions` from the server.
    */
-  $: mockedUserProjectQuery = createAdminServiceGetProjectWithBearerToken(
-    organization,
-    project,
-    mockedUserDeploymentCredentials?.accessToken ?? "",
-    undefined,
-    {
-      query: {
-        enabled: !!mockedUserDeploymentCredentials?.accessToken,
+  let mockedUserProjectQuery = $derived(
+    createAdminServiceGetProjectWithBearerToken(
+      organization,
+      project,
+      mockedUserDeploymentCredentials?.accessToken ?? "",
+      undefined,
+      {
+        query: { enabled: !!mockedUserDeploymentCredentials?.accessToken },
       },
-    },
+    ),
   );
 
-  $: ({ data: projectData, error: projectError } = $projectQuery);
+  // --- Derived state (resolve effective runtime connection from whichever auth mode is active) ---
 
-  /**
-   * Compute effective project permissions.
-   * When "View As" is active, use the impersonated user's permissions (from server).
-   * Otherwise, use the actual user's permissions.
-   */
-  $: effectiveProjectPermissions =
-    mockedUserId && $mockedUserProjectQuery.data?.projectPermissions
-      ? $mockedUserProjectQuery.data.projectPermissions
-      : projectData?.projectPermissions;
+  let projectData = $derived($projectQuery.data);
+  let error = $derived($projectQuery.error as HTTPError);
 
-  $: deploymentStatus = projectData?.deployment?.status;
-  // A re-deploy triggers `DEPLOYMENT_STATUS_UPDATING` status. But we can still show the project UI.
-  $: isProjectAvailable =
+  let deploymentStatus = $derived(projectData?.deployment?.status);
+  let isProjectAvailable = $derived(
     deploymentStatus === V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING ||
-    deploymentStatus === V1DeploymentStatus.DEPLOYMENT_STATUS_UPDATING;
+      deploymentStatus === V1DeploymentStatus.DEPLOYMENT_STATUS_UPDATING,
+  );
+
+  let mockUser = $derived(
+    mockedUserId && mockedUserDeploymentCredentials
+      ? {
+          credentials: mockedUserDeploymentCredentials,
+          permissions: $mockedUserProjectQuery.data?.projectPermissions,
+        }
+      : undefined,
+  );
+
+  let runtime = $derived(
+    resolveRuntimeConnection(projectData, mockUser, onPublicURLPage),
+  );
+
+  // --- Side effects (cache invalidation and telemetry) ---
+
+  // Track previous status so we invalidate only on *transitions*, not on every
+  // render where the status happens to be RUNNING.
+  let prevDeploymentStatus: V1DeploymentStatus | undefined = $state(
+    V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED,
+  );
+  $effect(() => {
+    const currentStatus = deploymentStatus;
+    const prevStatus = untrack(() => prevDeploymentStatus);
+    if (currentStatus === prevStatus) return;
 
-  // Refetch list resource query when project query stops fetching.
-  // This needs to happen when deployment status changes from updating to running after a redeploy.
-  let prevDeploymentStatus: V1DeploymentStatus =
-    V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED;
-  $: if (prevDeploymentStatus !== deploymentStatus) {
-    prevDeploymentStatus = deploymentStatus;
-    if (deploymentStatus === V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING) {
+    prevDeploymentStatus = currentStatus;
+
+    if (currentStatus === V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING) {
       void queryClient.invalidateQueries({
         queryKey: getRuntimeServiceListResourcesQueryKey(
-          projectData.deployment.runtimeInstanceId,
+          projectData?.deployment?.runtimeInstanceId,
         ),
       });
     }
-  }
-
-  $: error = projectError as HTTPError;
-
-  $: authContext = (
-    mockedUserId && mockedUserDeploymentCredentials
-      ? "mock"
-      : onPublicURLPage
-        ? "magic"
-        : "user"
-  ) as AuthContext;
-
-  // Derive effective runtime connection props
-  $: effectiveHost =
-    mockedUserId && mockedUserDeploymentCredentials
-      ? mockedUserDeploymentCredentials.runtimeHost
-      : projectData?.deployment?.runtimeHost;
-  $: effectiveInstanceId =
-    mockedUserId && mockedUserDeploymentCredentials
-      ? mockedUserDeploymentCredentials.instanceId
-      : projectData?.deployment?.runtimeInstanceId;
-  $: effectiveJwt =
-    mockedUserId && mockedUserDeploymentCredentials
-      ? mockedUserDeploymentCredentials.accessToken
-      : projectData?.jwt;
+  });
 
-  // Load telemetry client with relevant context
-  $: if (project && $user.data?.user?.id) {
-    metricsService?.loadCloudFields({
-      isDev: window.location.host.startsWith("localhost"),
-      projectId: project,
-      organizationId: organization,
-      userId: $user.data?.user?.id,
-      version: cloudVersion,
-    });
-  }
+  $effect(() => {
+    if (project && $user.data?.user?.id) {
+      metricsService?.loadCloudFields({
+        isDev: window.location.host.startsWith("localhost"),
+        projectId: project,
+        organizationId: organization,
+        userId: $user.data?.user?.id,
+        version: cloudVersion,
+      });
+    }
+  });
 </script>
 
 {#if error}
@@ -261,18 +225,20 @@
     body={error.response.data?.message}
   />
 {:else if projectData}
-  {#if isProjectAvailable && effectiveHost != null && effectiveInstanceId}
-    {#key `${effectiveHost}::${effectiveInstanceId}`}
+  {#if isProjectAvailable && runtime.host != null && runtime.instanceId}
+    <!-- Re-key on host::instanceId to force RuntimeProvider to tear down and
+         reconnect when the deployment changes (e.g. View As). -->
+    {#key `${runtime.host}::${runtime.instanceId}`}
       <RuntimeProvider
-        host={effectiveHost}
-        instanceId={effectiveInstanceId}
-        jwt={effectiveJwt}
-        {authContext}
+        host={runtime.host}
+        instanceId={runtime.instanceId}
+        jwt={runtime.jwt}
+        authContext={runtime.authContext}
       >
         <ProjectHeader
           {organization}
           {project}
-          projectPermissions={effectiveProjectPermissions}
+          projectPermissions={runtime.projectPermissions}
           manageOrgAdmins={organizationPermissions?.manageOrgAdmins}
           manageOrgMembers={organizationPermissions?.manageOrgMembers}
           readProjects={organizationPermissions?.readProjects}
@@ -281,13 +247,13 @@
         />
         {#if onProjectPage && deploymentStatus === V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING}
           <ProjectTabs
-            projectPermissions={effectiveProjectPermissions}
+            projectPermissions={runtime.projectPermissions}
             {organization}
-            {pathname}
+            pathname={page.url.pathname}
             {project}
           />
         {/if}
-        <slot />
+        {@render children()}
       </RuntimeProvider>
     {/key}
   {:else}