Tint dev-preview header and polish the breadcrumb visuals

Visual-only changes layered on top of PR-3's dev-preview chrome:

- `Header` gains a `tinted` prop that swaps `bg-surface-base` for
  `bg-surface-active`. `ProjectHeader` passes `tinted={inEditDevPreview}`
  so the dev-preview surface (`/-/edit/{dashboards,status,ai,explore,canvas}`)
  picks up a soft tint that signals "editing-in-progress" at a glance.
- Render a `Tag` of the current mode ("Developer" on the editor side,
  "Preview" on the dev-preview surface) next to the logo, mirroring
  local's mode tag.
- Add a `theme` color variant to `Tag` (`bg-surface-base` /
  `border-border` / `text-fg-secondary`) so the mode pill flips to a
  neutral dark surface in dark mode instead of the light-only gray-100
  fill.
- Replace the active-branch pill with a proper breadcrumb segment
  (`Slash` + `GitBranch` icon + branch name), so the trail reads
  `org / project / branch / resource` like the production header.
- `BreadcrumbItem` renders the resource-kind icon next to the selected
  label, so the resource segment shows its kind glyph
  (e.g. an Explore icon before a dashboard name).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: royendo

web-admin/src/features/projects/ProjectHeader.svelte

@@ -15,14 +15,17 @@
   import { sidebarActions } from "@rilldata/web-common/features/chat/layouts/sidebar/sidebar-store";
   import { skipNextPlatformReset } from "@rilldata/web-common/features/preview-mode/platform-reset";
   import Breadcrumbs from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
+  import Slash from "@rilldata/web-common/components/navigation/breadcrumbs/Slash.svelte";
   import type { PathOption } from "@rilldata/web-common/components/navigation/breadcrumbs/types";
+  import { GitBranch } from "lucide-svelte";
   import { useCanvas } from "@rilldata/web-common/features/canvas/selector";
   import ChatToggle from "@rilldata/web-common/features/chat/layouts/sidebar/ChatToggle.svelte";
   import GlobalDimensionSearch from "@rilldata/web-common/features/dashboards/dimension-search/GlobalDimensionSearch.svelte";
   import StateManagersProvider from "@rilldata/web-common/features/dashboards/state-managers/StateManagersProvider.svelte";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { useExplore } from "@rilldata/web-common/features/explores/selectors";
   import { featureFlags } from "@rilldata/web-common/features/feature-flags";
+  import Tag from "@rilldata/web-common/components/tag/Tag.svelte";
   import Header from "@rilldata/web-common/layout/header/Header.svelte";
   import HeaderLogo from "@rilldata/web-common/layout/header/HeaderLogo.svelte";
   import PreviewModeToggleButton from "@rilldata/web-common/layout/header/PreviewModeToggleButton.svelte";
@@ -264,21 +267,27 @@
   $: currentPath = [organization, project, currentDashboard, report || alert];
 </script>
 
-<Header borderBottom={!onProjectPage && !inEditDevPreview}>
+<Header
+  borderBottom={!onProjectPage && !inEditDevPreview}
+  tinted={inEditDevPreview}
+>
   <HeaderLogo href={rillLogoHref} logoUrl={organizationLogoUrl} />
+  {#if editContext}
+    <Tag text={inEditDevPreview ? "Preview" : "Developer"} color="theme" />
+  {/if}
   {#if onPublicURLPage}
     <PageTitle title={publicURLDashboardTitle} />
   {:else if organization}
     <Breadcrumbs {pathParts} {currentPath}>
       <svelte:fragment slot="after-project">
         {#if editContext && activeBranch}
-          <li class="flex items-center mr-2">
-            <span
-              class="inline-block truncate max-w-[200px] px-2 py-0 rounded-2xl border bg-primary-50 border-primary-200 text-primary-800"
-              title={activeBranch}
-            >
-              {activeBranch}
-            </span>
+          <Slash />
+          <li
+            class="flex items-center gap-x-1 px-2 text-fg-primary text-xs font-medium"
+            title={activeBranch}
+          >
+            <GitBranch size="14" />
+            <span class="truncate max-w-[200px]">{activeBranch}</span>
           </li>
         {:else if !onPublicURLPage && projectPermissions?.manageDev}
           <BranchSelector {organization} {project} {primaryBranch} />

web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte

@@ -18,6 +18,9 @@
 
   $: ({ options, carryOverSearchParams } = pathOptions);
   $: selected = options.get(current.toLowerCase());
+  $: selectedIcon = selected?.resourceKind
+    ? resourceIconMapping[selected.resourceKind]
+    : undefined;
 
   function linkMaker(
     current: (string | undefined)[],
@@ -71,9 +74,12 @@
         href={isCurrentPage
           ? "#top"
           : linkMaker(currentPath, depth, current, selected, "")}
-        class="text-fg-muted hover:text-fg-secondary flex flex-row items-center gap-x-2"
+        class="text-fg-muted hover:text-fg-secondary flex flex-row items-center gap-x-1.5"
         class:current={isCurrentPage}
       >
+        {#if selectedIcon}
+          <svelte:component this={selectedIcon} size="14px" />
+        {/if}
         <span>{selected?.label}</span>
       </a>
       {#if selected?.pill}

web-common/src/components/tag/Tag.svelte

@@ -8,7 +8,8 @@
     | "orange"
     | "amber"
     | "blue"
-    | "purple";
+    | "purple"
+    | "theme";
 </script>
 
 <script lang="ts">
@@ -40,6 +41,8 @@
         return "bg-primary-50 border-primary-300 text-primary-600";
       case "purple":
         return "bg-purple-50 border-purple-300 text-purple-600";
+      case "theme":
+        return "bg-surface-base border-border text-fg-secondary";
       default:
         return "bg-gray-100 border-gray-300 text-fg-secondary";
     }

web-common/src/layout/header/Header.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   export let borderBottom: boolean = false;
+  export let tinted: boolean = false;
 </script>
 
 <header
-  class="flex items-center w-full pr-4 pl-2 py-1 bg-surface-base border-b"
+  class="flex items-center w-full pr-4 pl-2 py-1 border-b"
+  class:bg-surface-base={!tinted}
+  class:bg-surface-active={tinted}
   class:border-transparent={!borderBottom}
 >
   <slot />