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/navigation/breadcrumb-selectors.ts

@@ -0,0 +1,103 @@
+import type { PathOption } from "@rilldata/web-common/components/navigation/breadcrumbs/types";
+import {
+  createAdminServiceListOrganizations,
+  createAdminServiceListProjectsForOrganization,
+  type V1Organization,
+} from "../../client";
+
+/**
+ * Query selector for organization breadcrumb paths.
+ *
+ * Uses `select` to transform the raw org list into a PathOption map, and
+ * `placeholderData` so the viewingOrg fallback is available immediately
+ * (before the query resolves or when the user isn't logged in).
+ */
+export function useBreadcrumbOrgPaths(
+  userLoggedIn: boolean,
+  viewingOrg: string | undefined,
+  planDisplayName: string | undefined,
+) {
+  return createAdminServiceListOrganizations(
+    { pageSize: 100 },
+    {
+      query: {
+        enabled: userLoggedIn,
+        retry: 2,
+        refetchOnMount: true,
+        placeholderData: {},
+        select: (data) =>
+          buildOrgPathMap(
+            data.organizations ?? [],
+            viewingOrg,
+            planDisplayName,
+          ),
+      },
+    },
+  );
+}
+
+/**
+ * Query selector for project breadcrumb paths.
+ */
+export function useBreadcrumbProjectPaths(
+  organization: string | undefined,
+  readProjects: boolean,
+) {
+  return createAdminServiceListProjectsForOrganization(
+    organization ?? "",
+    { pageSize: 100 },
+    {
+      query: {
+        enabled: !!organization && readProjects,
+        retry: 2,
+        refetchOnMount: true,
+        placeholderData: {},
+        select: (data) => buildProjectPathMap(data.projects ?? []),
+      },
+    },
+  );
+}
+
+/**
+ * Builds a PathOption map for the organization breadcrumb segment.
+ *
+ * The viewingOrg fallback ensures the active org always appears in the
+ * breadcrumb, even when the list-orgs response hasn't loaded yet or
+ * doesn't include it (e.g. the user has direct project access but
+ * isn't a member of the org).
+ */
+function buildOrgPathMap(
+  organizations: V1Organization[],
+  viewingOrg: string | undefined,
+  planDisplayName: string | undefined,
+): Map<string, PathOption> {
+  const pathMap = new Map<string, PathOption>();
+
+  organizations.forEach(({ name, displayName }) => {
+    if (!name) return;
+    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;
+}
+
+function buildProjectPathMap(
+  projects: { name?: string }[],
+): Map<string, PathOption> {
+  return projects.reduce((map, { name }) => {
+    if (!name) return map;
+    return map.set(name.toLowerCase(), { label: name, preloadData: false });
+  }, new Map<string, PathOption>());
+}

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import Breadcrumbs from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
+  import Header from "@rilldata/web-common/layout/header/Header.svelte";
+  import HeaderLogo from "@rilldata/web-common/layout/header/HeaderLogo.svelte";
+  import { createAdminServiceGetCurrentUser } from "../../client";
+  import {
+    useBreadcrumbOrgPaths,
+    useBreadcrumbProjectPaths,
+  } from "../navigation/breadcrumb-selectors";
+  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" : "/";
+
+  $: orgPathsQuery = useBreadcrumbOrgPaths(
+    loggedIn,
+    organization,
+    planDisplayName,
+  );
+  $: projectPathsQuery = useBreadcrumbProjectPaths(organization, readProjects);
+
+  $: pathParts = [
+    { options: $orgPathsQuery.data ?? new Map() },
+    { options: $projectPathsQuery.data ?? new Map() },
+  ];
+  $: 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>