refactor: eliminate RuntimeContextBridge and runtimeClientStore

web-admin/src/features/authentication/AvatarButton.svelte

@@ -1,4 +1,19 @@
+<script context="module" lang="ts">
+  // Navigating between org and project pages swaps OrgHeader for ProjectHeader
+  // (and vice versa). Both headers render an AvatarButton, but the old one
+  // unmounts before the new one mounts. A normal <img> would be destroyed and
+  // recreated, forcing the browser to re-decode the photo — causing a visible
+  // flicker or broken-image flash.
+  //
+  // To avoid this, we keep a single <img> element at module scope. Each
+  // AvatarButton instance adopts it via appendChild on mount and detaches it
+  // on unmount. The browser retains the decoded image data, so it paints
+  // instantly with no flash.
+  let sharedImg: HTMLImageElement | null = null;
+</script>
+
 <script lang="ts">
+  import { onMount } from "svelte";
   import { page } from "$app/stores";
   import { redirectToLogout } from "@rilldata/web-admin/client/redirect-utils";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
@@ -14,9 +29,40 @@
 
   const user = createAdminServiceGetCurrentUser();
 
+  let imgContainer: HTMLElement;
   let primaryMenuOpen = false;
   let subMenuOpen = false;
 
+  onMount(() => {
+    const photoUrl = $user.data?.user?.photoUrl;
+    if (!sharedImg) {
+      sharedImg = document.createElement("img");
+      sharedImg.className = "h-7 w-7 rounded-full";
+      sharedImg.referrerPolicy = "no-referrer";
+      sharedImg.alt = "avatar";
+    }
+    if (photoUrl && sharedImg.src !== photoUrl) {
+      sharedImg.src = photoUrl;
+    }
+    imgContainer.appendChild(sharedImg);
+    return () => {
+      // Only detach if we're still the owner; a newer instance may have
+      // already adopted the element via appendChild.
+      if (sharedImg?.parentNode === imgContainer) {
+        sharedImg.remove();
+      }
+    };
+  });
+
+  // Keep src in sync if the user query resolves or changes after mount
+  $: if (
+    sharedImg &&
+    $user.data?.user?.photoUrl &&
+    sharedImg.src !== $user.data.user.photoUrl
+  ) {
+    sharedImg.src = $user.data.user.photoUrl;
+  }
+
   $: if ($user.data?.user) {
     // Actions to take when the user is known
     posthogIdentify($user.data.user.id, {
@@ -34,12 +80,7 @@
 
 <DropdownMenu.Root bind:open={primaryMenuOpen}>
   <DropdownMenu.Trigger class="flex-none">
-    <img
-      src={$user.data?.user?.photoUrl}
-      alt="avatar"
-      class="h-7 inline-flex items-center rounded-full"
-      referrerpolicy="no-referrer"
-    />
+    <div bind:this={imgContainer} class="h-7 w-7" />
   </DropdownMenu.Trigger>
   <DropdownMenu.Content>
     {#if params.organization && params.project}

web-admin/src/features/authentication/checkUserAccess.ts

@@ -17,6 +17,7 @@ export async function redirectToLoginIfNotLoggedIn() {
   const userQuery = await queryClient.fetchQuery<V1GetCurrentUserResponse>({
     queryKey: getAdminServiceGetCurrentUserQueryKey(),
     queryFn: () => adminServiceGetCurrentUser(),
+    staleTime: 5 * 60 * 1000, // 5 minutes; prevents refetches on every navigation/hover
   });
   const isLoggedIn = !!userQuery.user;
   if (isLoggedIn) {

web-admin/src/features/organizations/OrgHeader.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import Breadcrumbs from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
+  import type { PathOption } from "@rilldata/web-common/components/navigation/breadcrumbs/types";
+  import Header from "@rilldata/web-common/layout/header/Header.svelte";
+  import HeaderLogo from "@rilldata/web-common/layout/header/HeaderLogo.svelte";
+  import {
+    createAdminServiceGetCurrentUser,
+    createAdminServiceListOrganizations as listOrgs,
+    createAdminServiceListProjectsForOrganization as listProjects,
+    type V1Organization,
+  } from "../../client";
+  import AvatarButton from "../authentication/AvatarButton.svelte";
+  import SignIn from "../authentication/SignIn.svelte";
+  import { isOrganizationPage } from "../navigation/nav-utils";
+
+  export let readProjects: boolean;
+  export let planDisplayName: string | undefined;
+  export let organizationLogoUrl: string | undefined;
+
+  const user = createAdminServiceGetCurrentUser();
+
+  $: ({
+    params: { organization, project },
+  } = $page);
+
+  $: onOrgPage = isOrganizationPage($page);
+
+  $: loggedIn = !!$user.data?.user;
+  $: rillLogoHref = !loggedIn ? "https://www.rilldata.com" : "/";
+
+  $: organizationQuery = listOrgs(
+    { pageSize: 100 },
+    {
+      query: {
+        enabled: !!$user.data?.user,
+        retry: 2,
+        refetchOnMount: true,
+      },
+    },
+  );
+
+  $: projectsQuery = listProjects(
+    organization,
+    { pageSize: 100 },
+    {
+      query: {
+        enabled: !!organization && readProjects,
+        retry: 2,
+        refetchOnMount: true,
+      },
+    },
+  );
+
+  $: organizations = $organizationQuery.data?.organizations ?? [];
+  $: projects = $projectsQuery.data?.projects ?? [];
+
+  $: organizationPaths = {
+    options: createOrgPaths(organizations, organization, planDisplayName),
+  };
+
+  function createOrgPaths(
+    organizations: V1Organization[],
+    viewingOrg: string | undefined,
+    planDisplayName: string | undefined,
+  ) {
+    const pathMap = new Map<string, PathOption>();
+
+    organizations.forEach(({ name, displayName }) => {
+      pathMap.set(name.toLowerCase(), {
+        label: displayName || name,
+        pill: planDisplayName,
+      });
+    });
+
+    if (!viewingOrg) return pathMap;
+
+    if (!pathMap.has(viewingOrg.toLowerCase())) {
+      pathMap.set(viewingOrg.toLowerCase(), {
+        label: viewingOrg,
+        pill: planDisplayName,
+      });
+    }
+
+    return pathMap;
+  }
+
+  $: projectPaths = {
+    options: projects.reduce(
+      (map, { name }) =>
+        map.set(name.toLowerCase(), { label: name, preloadData: false }),
+      new Map<string, PathOption>(),
+    ),
+  };
+
+  $: pathParts = [organizationPaths, projectPaths];
+  $: currentPath = [organization, project];
+</script>
+
+<Header borderBottom={!onOrgPage}>
+  <HeaderLogo href={rillLogoHref} logoUrl={organizationLogoUrl} />
+  {#if organization}
+    <Breadcrumbs {pathParts} {currentPath} />
+  {/if}
+
+  <div class="flex gap-x-2 items-center ml-auto">
+    {#if $user.isSuccess}
+      {#if $user.data?.user}
+        <AvatarButton />
+      {:else}
+        <SignIn />
+      {/if}
+    {/if}
+  </div>
+</Header>