From dc945cd3027b6fba8c5594a9eaae3ab5782acfbc Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 1 Jan 2026 13:28:25 -0800
Subject: [PATCH 01/15] Add a story to show all the colors and their names

---
 src/lib/ColorPalette.stories.tsx | 269 +++++++++++++++++++++++++++++++
 1 file changed, 269 insertions(+)
 create mode 100644 src/lib/ColorPalette.stories.tsx

diff --git a/src/lib/ColorPalette.stories.tsx b/src/lib/ColorPalette.stories.tsx
new file mode 100644
index 0000000..e810da1
--- /dev/null
+++ b/src/lib/ColorPalette.stories.tsx
@@ -0,0 +1,269 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import {cx} from 'cva';
+
+// Checkerboard pattern for showing colors against a neutral contrast background
+const checkerboardStyle = {
+  backgroundImage: `
+    linear-gradient(45deg, #808080 25%, transparent 25%),
+    linear-gradient(-45deg, #808080 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #808080 75%),
+    linear-gradient(-45deg, transparent 75%, #808080 75%)
+  `,
+  backgroundSize: '8px 8px',
+  backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',
+  backgroundColor: '#c0c0c0',
+};
+
+interface ColorSwatchProps {
+  name: string;
+  cssVar: string;
+  tailwindClass: string;
+}
+
+function ColorSwatch({name, cssVar, tailwindClass}: ColorSwatchProps) {
+  return (
+    <div className="flex items-center gap-2 py-0.5">
+      {/* Outer container with checkerboard to show transparency/light colors */}
+      <div className="size-[32px] shrink-0 overflow-hidden rounded shadow-md" style={checkerboardStyle}>
+        <div className={cx('size-full', tailwindClass)} title={cssVar} />
+      </div>
+      <div className="flex flex-col">
+        <span className="font-mono text-[12px] text-black">{name}</span>
+        <span className="font-mono text-[10px] text-gray-300">{cssVar}</span>
+      </div>
+    </div>
+  );
+}
+
+interface ColorGroupProps {
+  title: string;
+  colors: ColorSwatchProps[];
+}
+
+function ColorGroup({title, colors}: ColorGroupProps) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <h3 className="mb-0.5 border-b border-gray-300 pb-0.5 text-[14px] font-semibold text-black">{title}</h3>
+      <div className="grid grid-cols-2 gap-x-3 gap-y-0.25">
+        {colors.map(color => (
+          <ColorSwatch key={color.name} {...color} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ColorPalette() {
+  const colorGroups: ColorGroupProps[] = [
+    {
+      title: 'Base',
+      colors: [
+        {name: 'white', cssVar: 'var(--white)', tailwindClass: 'bg-white'},
+        {name: 'black', cssVar: 'var(--black)', tailwindClass: 'bg-black'},
+        {name: 'sentryPurple', cssVar: 'var(--sentry-purple)', tailwindClass: 'bg-sentryPurple'},
+      ],
+    },
+    {
+      title: 'Surface',
+      colors: [
+        {name: 'surface-100', cssVar: 'var(--surface-100)', tailwindClass: 'bg-surface-100'},
+        {name: 'surface-200', cssVar: 'var(--surface-200)', tailwindClass: 'bg-surface-200'},
+        {name: 'surface-300', cssVar: 'var(--surface-300)', tailwindClass: 'bg-surface-300'},
+        {name: 'surface-400', cssVar: 'var(--surface-400)', tailwindClass: 'bg-surface-400'},
+      ],
+    },
+    {
+      title: 'Translucent Gray',
+      colors: [
+        {name: 'translucentGray-100', cssVar: 'var(--translucent-gray-100)', tailwindClass: 'bg-translucentGray-100'},
+        {name: 'translucentGray-200', cssVar: 'var(--translucent-gray-200)', tailwindClass: 'bg-translucentGray-200'},
+      ],
+    },
+    {
+      title: 'Translucent Surface',
+      colors: [
+        {
+          name: 'translucentSurface-100',
+          cssVar: 'var(--translucent-surface-100)',
+          tailwindClass: 'bg-translucentSurface-100',
+        },
+        {
+          name: 'translucentSurface-200',
+          cssVar: 'var(--translucent-surface-200)',
+          tailwindClass: 'bg-translucentSurface-200',
+        },
+      ],
+    },
+    {
+      title: 'Gray',
+      colors: [
+        {name: 'gray-100', cssVar: 'var(--gray-100)', tailwindClass: 'bg-gray-100'},
+        {name: 'gray-200', cssVar: 'var(--gray-200)', tailwindClass: 'bg-gray-200'},
+        {name: 'gray-300', cssVar: 'var(--gray-300)', tailwindClass: 'bg-gray-300'},
+        {name: 'gray-400', cssVar: 'var(--gray-400)', tailwindClass: 'bg-gray-400'},
+        {name: 'gray-500', cssVar: 'var(--gray-500)', tailwindClass: 'bg-gray-500'},
+      ],
+    },
+    {
+      title: 'Purple',
+      colors: [
+        {name: 'purple-100', cssVar: 'var(--purple-100)', tailwindClass: 'bg-purple-100'},
+        {name: 'purple-200', cssVar: 'var(--purple-200)', tailwindClass: 'bg-purple-200'},
+        {name: 'purple-300', cssVar: 'var(--purple-300)', tailwindClass: 'bg-purple-300'},
+        {name: 'purple-400', cssVar: 'var(--purple-400)', tailwindClass: 'bg-purple-400'},
+      ],
+    },
+    {
+      title: 'Blue',
+      colors: [
+        {name: 'blue-100', cssVar: 'var(--blue-100)', tailwindClass: 'bg-blue-100'},
+        {name: 'blue-200', cssVar: 'var(--blue-200)', tailwindClass: 'bg-blue-200'},
+        {name: 'blue-300', cssVar: 'var(--blue-300)', tailwindClass: 'bg-blue-300'},
+        {name: 'blue-400', cssVar: 'var(--blue-400)', tailwindClass: 'bg-blue-400'},
+      ],
+    },
+    {
+      title: 'Green',
+      colors: [
+        {name: 'green-100', cssVar: 'var(--green-100)', tailwindClass: 'bg-green-100'},
+        {name: 'green-200', cssVar: 'var(--green-200)', tailwindClass: 'bg-green-200'},
+        {name: 'green-300', cssVar: 'var(--green-300)', tailwindClass: 'bg-green-300'},
+        {name: 'green-400', cssVar: 'var(--green-400)', tailwindClass: 'bg-green-400'},
+      ],
+    },
+    {
+      title: 'Yellow',
+      colors: [
+        {name: 'yellow-100', cssVar: 'var(--yellow-100)', tailwindClass: 'bg-yellow-100'},
+        {name: 'yellow-200', cssVar: 'var(--yellow-200)', tailwindClass: 'bg-yellow-200'},
+        {name: 'yellow-300', cssVar: 'var(--yellow-300)', tailwindClass: 'bg-yellow-300'},
+        {name: 'yellow-400', cssVar: 'var(--yellow-400)', tailwindClass: 'bg-yellow-400'},
+      ],
+    },
+    {
+      title: 'Red',
+      colors: [
+        {name: 'red-100', cssVar: 'var(--red-100)', tailwindClass: 'bg-red-100'},
+        {name: 'red-200', cssVar: 'var(--red-200)', tailwindClass: 'bg-red-200'},
+        {name: 'red-300', cssVar: 'var(--red-300)', tailwindClass: 'bg-red-300'},
+        {name: 'red-400', cssVar: 'var(--red-400)', tailwindClass: 'bg-red-400'},
+      ],
+    },
+    {
+      title: 'Pink',
+      colors: [
+        {name: 'pink-100', cssVar: 'var(--pink-100)', tailwindClass: 'bg-pink-100'},
+        {name: 'pink-200', cssVar: 'var(--pink-200)', tailwindClass: 'bg-pink-200'},
+        {name: 'pink-300', cssVar: 'var(--pink-300)', tailwindClass: 'bg-pink-300'},
+        {name: 'pink-400', cssVar: 'var(--pink-400)', tailwindClass: 'bg-pink-400'},
+      ],
+    },
+    {
+      title: 'Shadow',
+      colors: [
+        {name: 'shadow-light', cssVar: 'var(--shadow-light)', tailwindClass: 'bg-shadow-light'},
+        {name: 'shadow-medium', cssVar: 'var(--shadow-medium)', tailwindClass: 'bg-shadow-medium'},
+        {name: 'shadow-heavy', cssVar: 'var(--shadow-heavy)', tailwindClass: 'bg-shadow-heavy'},
+      ],
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-3 p-2">
+      <h2 className="text-[18px] font-bold text-black">Color Palette</h2>
+      <p className="text-[12px] text-gray-400">
+        Colors adapt based on the current theme (light/dark). Toggle the theme to see how colors change.
+      </p>
+      <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+        {colorGroups.map(group => (
+          <ColorGroup key={group.title} {...group} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function RawColors() {
+  return (
+    <div className="flex flex-col gap-3 p-2">
+      <h2 className="text-[18px] font-bold text-black">Raw Colors (Theme-Independent)</h2>
+      <p className="text-[12px] text-gray-400">These colors don&apos;t change with the theme.</p>
+      <div className="flex gap-2">
+        <ColorSwatch name="white-raw" cssVar="#fff" tailwindClass="bg-white-raw" />
+        <ColorSwatch name="black-raw" cssVar="#1d1127" tailwindClass="bg-black-raw" />
+      </div>
+    </div>
+  );
+}
+
+function UtilityColors() {
+  return (
+    <div className="flex flex-col gap-3 p-2">
+      <h2 className="text-[18px] font-bold text-black">Utility Colors</h2>
+      <div className="flex gap-2">
+        <div className="flex items-center gap-2">
+          <div className="size-[32px] shrink-0 overflow-hidden rounded shadow-md" style={checkerboardStyle}>
+            <div className="size-full bg-transparent" />
+          </div>
+          <span className="font-mono text-[12px] text-black">transparent</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="size-[32px] shrink-0 overflow-hidden rounded shadow-md" style={checkerboardStyle}>
+            <div className="size-full bg-current" />
+          </div>
+          <span className="font-mono text-[12px] text-black">current</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="size-[32px] shrink-0 overflow-hidden rounded shadow-md" style={checkerboardStyle}>
+            <div className="size-full bg-inherit" />
+          </div>
+          <span className="font-mono text-[12px] text-black">inherit</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface StoryArgs {
+  theme: 'light' | 'dark';
+}
+
+const meta: Meta<typeof ColorPalette> = {
+  title: 'Design System/Color Palette',
+  component: ColorPalette,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    theme: {
+      control: 'radio',
+      options: ['light', 'dark'],
+      description: 'Toggle between light and dark theme',
+    },
+  },
+  args: {
+    theme: 'light',
+  },
+  decorators: [
+    (Story, context) => (
+      <div data-theme={(context.args as StoryArgs).theme} className="min-h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPalette & StoryArgs>;
+
+export const AllColors: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 bg-surface-200 p-3">
+      <ColorPalette />
+      <hr className="border-gray-200" />
+      <RawColors />
+      <hr className="border-gray-200" />
+      <UtilityColors />
+    </div>
+  ),
+};

From f763244462b850457888c91252fe55f8e3b7faad Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 1 Jan 2026 22:07:54 -0800
Subject: [PATCH 02/15] Rewrite the unauth flow so its inside the normal
 EdgeLayout system

Putting the unauth state inside the EdgeLayout system means that it can be drag+dropped, we can use bigger panels to show more infomation about whats configured and and the current state, it can be collapsed in the same way as a logged-in session, and finally we can include the Feature Flags panel even when the user is not logged-in because it uses local state only.
---
 src/lib/components/AppRouter.tsx              |  73 ++---
 src/lib/components/AssignedTo.tsx             |  97 +------
 src/lib/components/InfiniteListItems.tsx      |  42 +--
 src/lib/components/Media.stories.tsx          | 266 ++++++++++++++++++
 src/lib/components/Media.tsx                  |  89 ++++++
 src/lib/components/Navigation.tsx             | 231 ---------------
 src/lib/components/avatar/AvatarIcon.tsx      |  89 ++++++
 src/lib/components/base/Breadcrumbs.tsx       |  33 +++
 src/lib/components/base/Button.stories.tsx    |  52 ++++
 src/lib/components/base/Button.tsx            |  30 ++
 src/lib/components/base/InternalLink.tsx      |  20 ++
 .../{ => base}/LoadingSpinner.stories.tsx     |   2 +-
 .../components/{ => base}/LoadingSpinner.tsx  |   0
 .../components/base/Placeholder.stories.tsx   | 227 +++++++++++++++
 src/lib/components/{ => base}/Placeholder.tsx |  21 +-
 src/lib/components/base/ScrollableList.tsx    |  21 ++
 .../components/{ => base}/SentryAppLink.tsx   |   0
 src/lib/components/icon/IconSlashForward.tsx  |  10 +
 src/lib/components/layouts/CenterLayout.tsx   |  19 --
 .../components/layouts/EdgeLayout.stories.tsx |   8 +-
 src/lib/components/layouts/EdgeLayout.tsx     |   8 +-
 src/lib/components/layouts/UnauthLayout.tsx   |  68 -----
 .../panels/featureFlags/FeatureFlagsPanel.tsx |   7 +-
 .../panels/feedback/FeedbackListItem.tsx      |   2 +-
 .../panels/feedback/FeedbackPanel.tsx         |  13 +-
 .../panels/issues/IssueListItem.tsx           |   2 +-
 .../components/panels/issues/IssuesPanel.tsx  |  13 +-
 .../nav/AuthNavigation.stories.tsx}           |  10 +-
 src/lib/components/panels/nav/NavButton.tsx   |  57 ++++
 src/lib/components/panels/nav/NavGrabber.tsx  |  21 ++
 .../components/panels/nav/NavigationPanel.tsx |  87 ++++++
 .../panels/nav}/useNavigationExpansion.ts     |   0
 .../panels/settings/ConfigPanel.tsx           |  36 +++
 .../panels/settings/CurrentUser.tsx           |  49 ++++
 .../components/panels/settings/ProxyState.tsx |  28 ++
 .../panels/settings/SettingsPanel.tsx         |  80 +++++-
 .../proxyState}/Connecting.stories.tsx        |   2 +-
 .../settings/proxyState}/Connecting.tsx       |   0
 .../proxyState}/Disconnected.stories.tsx      |   2 +-
 .../settings/proxyState}/Disconnected.tsx     |   0
 .../proxyState}/InvalidDomain.stories.tsx     |   2 +-
 .../settings/proxyState}/InvalidDomain.tsx    |   6 +-
 .../settings/proxyState}/Login.stories.tsx    |   2 +-
 .../settings/proxyState}/Login.tsx            |  18 +-
 .../panels/settings/proxyState/Logout.tsx     |  13 +
 .../proxyState}/MissingProject.stories.tsx    |   2 +-
 .../settings/proxyState}/MissingProject.tsx   |   6 +-
 src/lib/components/unauth/UnauthPill.tsx      | 116 --------
 src/lib/context/ApiProxyContext.tsx           |  21 +-
 src/lib/hooks/fetch/useSentryApi.ts           |   2 +-
 .../hooks/useNavigateOnProxyStateChange.ts    |  36 ---
 src/lib/utils/ApiProxy.ts                     |   3 +-
 52 files changed, 1356 insertions(+), 686 deletions(-)
 create mode 100644 src/lib/components/Media.stories.tsx
 create mode 100644 src/lib/components/Media.tsx
 delete mode 100644 src/lib/components/Navigation.tsx
 create mode 100644 src/lib/components/avatar/AvatarIcon.tsx
 create mode 100644 src/lib/components/base/Breadcrumbs.tsx
 create mode 100644 src/lib/components/base/Button.stories.tsx
 create mode 100644 src/lib/components/base/Button.tsx
 create mode 100644 src/lib/components/base/InternalLink.tsx
 rename src/lib/components/{ => base}/LoadingSpinner.stories.tsx (90%)
 rename src/lib/components/{ => base}/LoadingSpinner.tsx (100%)
 create mode 100644 src/lib/components/base/Placeholder.stories.tsx
 rename src/lib/components/{ => base}/Placeholder.tsx (53%)
 create mode 100644 src/lib/components/base/ScrollableList.tsx
 rename src/lib/components/{ => base}/SentryAppLink.tsx (100%)
 create mode 100644 src/lib/components/icon/IconSlashForward.tsx
 delete mode 100644 src/lib/components/layouts/CenterLayout.tsx
 delete mode 100644 src/lib/components/layouts/UnauthLayout.tsx
 rename src/lib/components/{Navigation.stories.tsx => panels/nav/AuthNavigation.stories.tsx} (90%)
 create mode 100644 src/lib/components/panels/nav/NavButton.tsx
 create mode 100644 src/lib/components/panels/nav/NavGrabber.tsx
 create mode 100644 src/lib/components/panels/nav/NavigationPanel.tsx
 rename src/lib/{hooks => components/panels/nav}/useNavigationExpansion.ts (100%)
 create mode 100644 src/lib/components/panels/settings/ConfigPanel.tsx
 create mode 100644 src/lib/components/panels/settings/CurrentUser.tsx
 create mode 100644 src/lib/components/panels/settings/ProxyState.tsx
 rename src/lib/components/{unauth => panels/settings/proxyState}/Connecting.stories.tsx (87%)
 rename src/lib/components/{unauth => panels/settings/proxyState}/Connecting.tsx (100%)
 rename src/lib/components/{unauth => panels/settings/proxyState}/Disconnected.stories.tsx (86%)
 rename src/lib/components/{unauth => panels/settings/proxyState}/Disconnected.tsx (100%)
 rename src/lib/components/{unauth => panels/settings/proxyState}/InvalidDomain.stories.tsx (86%)
 rename src/lib/components/{unauth => panels/settings/proxyState}/InvalidDomain.tsx (79%)
 rename src/lib/components/{unauth => panels/settings/proxyState}/Login.stories.tsx (88%)
 rename src/lib/components/{unauth => panels/settings/proxyState}/Login.tsx (72%)
 create mode 100644 src/lib/components/panels/settings/proxyState/Logout.tsx
 rename src/lib/components/{unauth => panels/settings/proxyState}/MissingProject.stories.tsx (86%)
 rename src/lib/components/{unauth => panels/settings/proxyState}/MissingProject.tsx (76%)
 delete mode 100644 src/lib/components/unauth/UnauthPill.tsx
 delete mode 100644 src/lib/hooks/useNavigateOnProxyStateChange.ts

diff --git a/src/lib/components/AppRouter.tsx b/src/lib/components/AppRouter.tsx
index d6005ce..a98db7c 100644
--- a/src/lib/components/AppRouter.tsx
+++ b/src/lib/components/AppRouter.tsx
@@ -1,69 +1,72 @@
-import {Fragment} from 'react/jsx-runtime';
-import {Routes, Route, Outlet} from 'react-router-dom';
+import {Fragment, useEffect, type ReactNode} from 'react';
+import {Routes, Route, Outlet, useNavigate} from 'react-router-dom';
 import DebugState from 'toolbar/components/DebugState';
-import EdgeLayout, {MainArea, NavArea} from 'toolbar/components/layouts/EdgeLayout';
-import UnauthLayout from 'toolbar/components/layouts/UnauthLayout';
-import Navigation from 'toolbar/components/Navigation';
+import DragDropPositionSurface from 'toolbar/components/DragDropPositionSurface';
+import EdgeLayout, {PanelArea, NavArea} from 'toolbar/components/layouts/EdgeLayout';
 import FeatureFlagsPanel from 'toolbar/components/panels/featureFlags/FeatureFlagsPanel';
 import FeedbackPanel from 'toolbar/components/panels/feedback/FeedbackPanel';
 import IssuesPanel from 'toolbar/components/panels/issues/IssuesPanel';
+import NavigationPanel from 'toolbar/components/panels/nav/NavigationPanel';
+import ConfigPanel from 'toolbar/components/panels/settings/ConfigPanel';
 import SettingsPanel from 'toolbar/components/panels/settings/SettingsPanel';
-import Connecting from 'toolbar/components/unauth/Connecting';
-import Disconnected from 'toolbar/components/unauth/Disconnected';
-import InvalidDomain from 'toolbar/components/unauth/InvalidDomain';
-import Login from 'toolbar/components/unauth/Login';
-import MissingProject from 'toolbar/components/unauth/MissingProject';
+import {useApiProxyState} from 'toolbar/context/ApiProxyContext';
 import useClearQueryCacheOnProxyStateChange from 'toolbar/hooks/useClearQueryCacheOnProxyStateChange';
-import useNavigateOnProxyStateChange from 'toolbar/hooks/useNavigateOnProxyStateChange';
 
 export default function AppRouter() {
-  useNavigateOnProxyStateChange();
   useClearQueryCacheOnProxyStateChange();
 
   return (
     <Routes>
       <Route
+        // Global layout wrapper
+        path="/"
         element={
           <Fragment>
             <DebugState />
-            <Outlet />
-          </Fragment>
-        }>
-        <Route
-          element={
-            <UnauthLayout>
-              <Outlet />
-            </UnauthLayout>
-          }>
-          <Route path="/disconnected" element={<Disconnected />} />
-          <Route path="/connecting" element={<Connecting />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/missing-project" element={<MissingProject />} />
-          <Route path="/invalid-domain" element={<InvalidDomain />} />
-        </Route>
-        <Route
-          path="/"
-          element={
             <EdgeLayout>
               <NavArea>
-                <Navigation />
+                <NavigationPanel />
               </NavArea>
               <Outlet />
+              <DragDropPositionSurface instanceName="EdgeLayout" />
             </EdgeLayout>
+          </Fragment>
+        }>
+        <Route
+          element={
+            <PanelArea>
+              <Outlet />
+            </PanelArea>
           }>
+          <Route path="/settings">
+            <Route index element={<SettingsPanel />} />
+            <Route path="config" element={<ConfigPanel />} />
+          </Route>
+          <Route path="/featureFlags" element={<FeatureFlagsPanel />} />
           <Route
             element={
-              <MainArea>
+              <RequireAuth>
                 <Outlet />
-              </MainArea>
+              </RequireAuth>
             }>
-            <Route path="/settings" element={<SettingsPanel />} />
             <Route path="/issues" element={<IssuesPanel />} />
             <Route path="/feedback" element={<FeedbackPanel />} />
-            <Route path="/featureFlags" element={<FeatureFlagsPanel />} />
           </Route>
         </Route>
       </Route>
     </Routes>
   );
 }
+
+function RequireAuth({children}: {children: ReactNode}) {
+  const navigate = useNavigate();
+  const proxyState = useApiProxyState();
+
+  useEffect(() => {
+    if (proxyState !== 'logged-in') {
+      navigate('/');
+    }
+  }, [proxyState, navigate]);
+
+  return children;
+}
diff --git a/src/lib/components/AssignedTo.tsx b/src/lib/components/AssignedTo.tsx
index 7ac3d59..51e91dc 100644
--- a/src/lib/components/AssignedTo.tsx
+++ b/src/lib/components/AssignedTo.tsx
@@ -1,20 +1,16 @@
-import {cx} from 'cva';
+import AvatarIcon from 'toolbar/components/avatar/AvatarIcon';
 import {Tooltip, TooltipTrigger, TooltipContent} from 'toolbar/components/base/tooltip/Tooltip';
 import type {GroupAssignedTo} from 'toolbar/sentryApi/types/group';
 import type Member from 'toolbar/sentryApi/types/Member';
 import type {OrganizationTeam} from 'toolbar/sentryApi/types/Organization';
 
-const initialsClassName = cx('flex size-2 items-center justify-center truncate text-[8px] text-white');
-
-export default function AssignedTo({
-  assignedTo,
-  teams: _teams,
-  members,
-}: {
+interface Props {
   assignedTo: GroupAssignedTo | null | undefined;
   teams: OrganizationTeam[] | undefined;
   members: Member[] | undefined;
-}) {
+}
+
+export default function AssignedTo({assignedTo, teams: _teams, members}: Props) {
   if (!assignedTo) {
     return (
       <Tooltip>
@@ -28,87 +24,18 @@ export default function AssignedTo({
 
   if (assignedTo.type === 'user') {
     const userAvatar = members?.filter(m => m.user?.id === assignedTo.id)[0]?.user?.avatar;
-    const displayName = assignedTo.name;
     const userAvatarUrl =
       userAvatar?.avatarType === 'gravatar' || userAvatar?.avatarType === 'upload' ? userAvatar?.avatarUrl : undefined;
 
     return (
-      <Tooltip>
-        <TooltipTrigger>
-          {userAvatarUrl ? (
-            <img className="size-2 rounded-full object-cover" src={userAvatarUrl} />
-          ) : (
-            <span
-              className={cx(initialsClassName, 'rounded-full')}
-              style={{backgroundColor: getAvatarColor(assignedTo.name)}}>
-              {getAvatarInitials(assignedTo.name)}
-            </span>
-          )}
-        </TooltipTrigger>
-        <TooltipContent>Assigned to {displayName}</TooltipContent>
-      </Tooltip>
+      <AvatarIcon
+        name={assignedTo.name}
+        avatarUrl={userAvatarUrl ?? undefined}
+        type="user"
+        tooltip={`Assigned to ${assignedTo.name}`}
+      />
     );
   } else if (assignedTo.type === 'team') {
-    return (
-      <Tooltip>
-        <TooltipTrigger>
-          <span
-            className={cx(initialsClassName, 'rounded-[3px]')}
-            style={{backgroundColor: getAvatarColor(assignedTo.name)}}>
-            {getAvatarInitials(assignedTo.name)}
-          </span>
-        </TooltipTrigger>
-        <TooltipContent>Assigned to {`#${assignedTo.name}`}</TooltipContent>
-      </Tooltip>
-    );
-  }
-}
-
-const COLORS = [
-  '#4674ca', // blue
-  '#315cac', // blue_dark
-  '#57be8c', // green
-  '#3fa372', // green_dark
-  '#f9a66d', // yellow_orange
-  '#ec5e44', // red
-  '#e63717', // red_dark
-  '#f868bc', // pink
-  '#6c5fc7', // purple
-  '#4e3fb4', // purple_dark
-  '#57b1be', // teal
-  '#847a8c', // gray
-] as const;
-
-type Color = (typeof COLORS)[number];
-
-function hashIdentifier(identifier: string) {
-  identifier += '';
-  let hash = 0;
-  for (let i = 0; i < identifier.length; i++) {
-    hash += identifier.charCodeAt(i);
-  }
-  return hash;
-}
-
-function getAvatarColor(identifier: string | undefined): Color {
-  // Gray if the identifier is not set
-  if (identifier === undefined) {
-    return '#847a8c' as Color;
-  }
-
-  const id = hashIdentifier(identifier);
-  return COLORS[id % COLORS.length] || '#847a8c';
-}
-
-function getAvatarInitials(displayName: string | undefined) {
-  // split on spaces for names and '-' for teams
-  const names = (typeof displayName === 'string' && displayName.trim() ? displayName : '?').split(/[-\s]+/);
-
-  // Use Array.from as slicing and substring() work on ucs2 segments which
-  // results in only getting half of any 4+ byte character.
-  let initials = names.at(0)?.charAt(0);
-  if (names.length > 1 && initials) {
-    initials += names[names.length - 1]?.charAt(0);
+    return <AvatarIcon name={assignedTo.name} type="team" tooltip={`Assigned to #${assignedTo.name}`} />;
   }
-  return initials?.toUpperCase() || '?';
 }
diff --git a/src/lib/components/InfiniteListItems.tsx b/src/lib/components/InfiniteListItems.tsx
index 419112e..332bf97 100644
--- a/src/lib/components/InfiniteListItems.tsx
+++ b/src/lib/components/InfiniteListItems.tsx
@@ -1,7 +1,8 @@
 import type {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query';
 import {useVirtualizer, type VirtualItem} from '@tanstack/react-virtual';
 import {useEffect, useRef} from 'react';
-import LoadingSpinner from 'toolbar/components/LoadingSpinner';
+import LoadingSpinner from 'toolbar/components/base/LoadingSpinner';
+import ScrollableList from 'toolbar/components/base/ScrollableList';
 import type {ApiResult} from 'toolbar/types/api';
 
 interface Props<ListItem, Response = ApiResult<ListItem[]>> {
@@ -52,27 +53,26 @@ export default function InfiniteListItems<ListItem, Response = ApiResult<ListIte
   }, [hasNextPage, fetchNextPage, loadedRows.length, isFetchingNextPage, items]);
 
   return (
-    <div ref={parentRef} className="flex size-full flex-col overflow-auto overscroll-contain contain-strict">
-      <div style={{height: rowVirtualizer.getTotalSize()}} className="relative flex w-full flex-col">
-        <ul style={{transform: `translateY(${items[0]?.start ?? 0}px)`}} className="absolute left-0 top-0 w-full">
-          {items.length ? null : emptyMessage()}
-          {items.map(virtualItem => {
-            const isLoaderRow = virtualItem.index > loadedRows.length - 1;
-            const item = loadedRows.at(virtualItem.index);
+    <ScrollableList
+      ref={parentRef}
+      height={rowVirtualizer.getTotalSize()}
+      transform={`translateY(${items[0]?.start ?? 0}px)`}>
+      {items.length ? null : emptyMessage()}
+      {items.map(virtualItem => {
+        const isLoaderRow = virtualItem.index > loadedRows.length - 1;
+        const item = loadedRows.at(virtualItem.index);
 
-            return (
-              <li data-index={virtualItem.index} key={virtualItem.index} ref={rowVirtualizer.measureElement}>
-                {isLoaderRow
-                  ? hasNextPage
-                    ? loadingMoreMessage()
-                    : loadingCompleteMessage()
-                  : item && itemRenderer({item, virtualItem})}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    </div>
+        return (
+          <li data-index={virtualItem.index} key={virtualItem.index} ref={rowVirtualizer.measureElement}>
+            {isLoaderRow
+              ? hasNextPage
+                ? loadingMoreMessage()
+                : loadingCompleteMessage()
+              : item && itemRenderer({item, virtualItem})}
+          </li>
+        );
+      })}
+    </ScrollableList>
   );
 }
 
diff --git a/src/lib/components/Media.stories.tsx b/src/lib/components/Media.stories.tsx
new file mode 100644
index 0000000..fe83e4b
--- /dev/null
+++ b/src/lib/components/Media.stories.tsx
@@ -0,0 +1,266 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import AvatarIcon from 'toolbar/components/avatar/AvatarIcon';
+import Placeholder from 'toolbar/components/base/Placeholder';
+import IconIssues from 'toolbar/components/icon/IconIssues';
+import IconMegaphone from 'toolbar/components/icon/IconMegaphone';
+import IconSettings from 'toolbar/components/icon/IconSettings';
+import PlatformIcon from 'toolbar/components/icon/PlatformIcon';
+import Media from 'toolbar/components/Media';
+
+const meta: Meta<typeof Media> = {
+  title: 'Components/Media',
+  component: Media,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+  decorators: [
+    Story => (
+      <div style={{width: '280px'}}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Media>;
+
+// Basic examples with different media types
+
+export const WithAvatar: Story = {
+  args: {
+    media: <AvatarIcon name="Jane Doe" type="user" tooltip="Jane Doe" size="lg" />,
+    title: 'Jane Doe',
+    description: 'jane.doe@example.com',
+    size: 'md',
+  },
+};
+
+export const WithTeamAvatar: Story = {
+  args: {
+    media: <AvatarIcon name="Platform Team" type="team" tooltip="Platform Team" size="lg" />,
+    title: 'Platform Team',
+    description: '12 members',
+    size: 'md',
+  },
+};
+
+export const WithAvatarUrl: Story = {
+  args: {
+    media: (
+      <AvatarIcon
+        name="Sentry User"
+        avatarUrl="https://avatars.githubusercontent.com/u/1396951"
+        type="user"
+        tooltip="Sentry User"
+        size="lg"
+      />
+    ),
+    title: 'Sentry User',
+    description: 'user@sentry.io',
+    size: 'md',
+  },
+};
+
+export const WithPlatformIcon: Story = {
+  args: {
+    media: <PlatformIcon platform="javascript-react" size="lg" />,
+    title: 'frontend-app',
+    description: 'javascript-react',
+    size: 'md',
+  },
+};
+
+export const WithPlatformIconPython: Story = {
+  args: {
+    media: <PlatformIcon platform="python-django" size="lg" />,
+    title: 'backend-api',
+    description: 'python-django',
+    size: 'md',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    media: <IconSettings size="lg" />,
+    title: 'Settings',
+    description: 'Manage your preferences',
+    size: 'md',
+  },
+};
+
+export const WithIssuesIcon: Story = {
+  args: {
+    media: <IconIssues size="lg" />,
+    title: 'TypeError: Cannot read property',
+    description: 'users/auth.js in handleLogin',
+    size: 'md',
+  },
+};
+
+export const WithFeedbackIcon: Story = {
+  args: {
+    media: <IconMegaphone size="lg" />,
+    title: 'User Feedback',
+    description: 'The page is loading slowly',
+    size: 'md',
+  },
+};
+
+// Size variants
+
+export const SizeSmall: Story = {
+  args: {
+    media: <IconSettings size="sm" />,
+    title: 'Small Size',
+    description: 'Compact layout',
+    size: 'sm',
+  },
+};
+
+export const SizeMedium: Story = {
+  args: {
+    media: <IconSettings size="md" />,
+    title: 'Medium Size',
+    description: 'Default layout',
+    size: 'md',
+  },
+};
+
+export const SizeLarge: Story = {
+  args: {
+    media: <IconSettings size="lg" />,
+    title: 'Large Size',
+    description: 'Spacious layout',
+    size: 'lg',
+  },
+};
+
+// Without description
+
+export const TitleOnly: Story = {
+  args: {
+    media: <PlatformIcon platform="node" size="lg" />,
+    title: 'Node.js Application',
+    size: 'md',
+  },
+};
+
+// All sizes comparison
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Media
+        media={<AvatarIcon name="Small" type="user" tooltip="Small" size="sm" />}
+        title="Small (sm)"
+        description="Compact variant"
+        size="sm"
+      />
+      <Media
+        media={<AvatarIcon name="Medium" type="user" tooltip="Medium" size="md" />}
+        title="Medium (md)"
+        description="Default variant"
+        size="md"
+      />
+      <Media
+        media={<AvatarIcon name="Large" type="user" tooltip="Large" size="lg" />}
+        title="Large (lg)"
+        description="Spacious variant"
+        size="lg"
+      />
+    </div>
+  ),
+};
+
+// Placeholder examples
+
+export const PlaceholderMedia: Story = {
+  args: {
+    media: <div className={Placeholder({height: 'full', width: 'full', shape: 'round'})} />,
+    title: 'Loading...',
+    description: 'Please wait',
+    size: 'md',
+  },
+};
+
+export const AllPlaceholders: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Media
+        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'round'})} />}
+        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '120px'}} />}
+        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '80px'}} />}
+        size="sm"
+      />
+      <Media
+        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'round'})} />}
+        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '140px'}} />}
+        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '100px'}} />}
+        size="md"
+      />
+      <Media
+        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'round'})} />}
+        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '160px'}} />}
+        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '120px'}} />}
+        size="lg"
+      />
+    </div>
+  ),
+};
+
+export const PlaceholderSquareMedia: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Media
+        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'square'})} />}
+        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '100px'}} />}
+        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '70px'}} />}
+        size="sm"
+      />
+      <Media
+        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'square'})} />}
+        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '130px'}} />}
+        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '90px'}} />}
+        size="md"
+      />
+      <Media
+        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'square'})} />}
+        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '150px'}} />}
+        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '110px'}} />}
+        size="lg"
+      />
+    </div>
+  ),
+};
+
+// Mixed content showcase
+
+export const Showcase: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Media
+        media={<AvatarIcon name="John Smith" type="user" tooltip="John Smith" size="lg" />}
+        title="John Smith"
+        description="john@example.com"
+        size="md"
+      />
+      <Media
+        media={<PlatformIcon platform="javascript-nextjs" size="lg" />}
+        title="my-nextjs-app"
+        description="javascript-nextjs"
+        size="md"
+      />
+      <Media media={<IconIssues size="lg" />} title="ReferenceError" description="index.js:42" size="md" />
+      <Media
+        media={<AvatarIcon name="Backend Team" type="team" tooltip="Backend Team" size="lg" />}
+        title="Backend Team"
+        description="8 members"
+        size="md"
+      />
+    </div>
+  ),
+};
diff --git a/src/lib/components/Media.tsx b/src/lib/components/Media.tsx
new file mode 100644
index 0000000..0c59281
--- /dev/null
+++ b/src/lib/components/Media.tsx
@@ -0,0 +1,89 @@
+import {cva, cx} from 'cva';
+import type {ReactNode} from 'react';
+
+const containerClassName = cva('flex items-center', {
+  variants: {
+    size: {
+      sm: 'gap-0.75',
+      md: 'gap-1',
+      lg: 'gap-1.5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+const mediaClassName = cva('flex shrink-0 items-center justify-center', {
+  variants: {
+    size: {
+      sm: 'size-2',
+      md: 'size-3',
+      lg: 'size-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+const titleClassName = cva('truncate font-medium', {
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+const descriptionClassName = cva('truncate text-gray-300', {
+  variants: {
+    size: {
+      sm: 'text-[10px]',
+      md: 'text-xs',
+      lg: 'text-sm',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+interface Props {
+  /**
+   * Content rendered in the square left section (icon, avatar, image, etc.)
+   */
+  media: ReactNode;
+  /**
+   * Primary text shown in the first row
+   */
+  title: ReactNode;
+  /**
+   * Secondary text shown in the second row
+   */
+  description?: ReactNode;
+  /**
+   * Size variant affecting spacing and typography
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Additional className applied to the container
+   */
+  className?: string;
+}
+
+export default function Media({media, title, description, size = 'md', className}: Props) {
+  return (
+    <div className={cx(containerClassName({size}), className)}>
+      <div className={mediaClassName({size})}>{media}</div>
+      <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.25">
+        <div className={titleClassName({size})}>{title}</div>
+        {description !== undefined && <div className={descriptionClassName({size})}>{description}</div>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/lib/components/Navigation.tsx b/src/lib/components/Navigation.tsx
deleted file mode 100644
index ff29517..0000000
--- a/src/lib/components/Navigation.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import type {Placement} from '@floating-ui/react';
-import {Transition} from '@headlessui/react';
-import {cva, cx} from 'cva';
-import {Fragment} from 'react';
-import type {MouseEvent} from 'react';
-import {NavLink, useLocation, useNavigate} from 'react-router-dom';
-import type {To} from 'react-router-dom';
-import ExternalLink from 'toolbar/components/base/ExternalLink';
-import Indicator from 'toolbar/components/base/Indicator';
-import {Menu, MenuItem} from 'toolbar/components/base/menu/Menu';
-import {Tooltip, TooltipTrigger, TooltipContent} from 'toolbar/components/base/tooltip/Tooltip';
-import IconClose from 'toolbar/components/icon/IconClose';
-import IconFlag from 'toolbar/components/icon/IconFlag';
-import IconIssues from 'toolbar/components/icon/IconIssues';
-import IconLock from 'toolbar/components/icon/IconLock';
-import IconMegaphone from 'toolbar/components/icon/IconMegaphone';
-import IconOpen from 'toolbar/components/icon/IconOpen';
-import IconPin from 'toolbar/components/icon/IconPin';
-import IconSentry from 'toolbar/components/icon/IconSentry';
-import IconSettings from 'toolbar/components/icon/IconSettings';
-import {useApiProxyInstance} from 'toolbar/context/ApiProxyContext';
-import {useConfigContext} from 'toolbar/context/ConfigContext';
-import {useFeatureFlagAdapterContext} from 'toolbar/context/FeatureFlagAdapterContext';
-import {useHiddenAppContext} from 'toolbar/context/HiddenAppContext';
-import {useMousePositionContext} from 'toolbar/context/MousePositionContext';
-import useNavigationExpansion from 'toolbar/hooks/useNavigationExpansion';
-import {DebugTarget} from 'toolbar/types/Configuration';
-import parsePlacement from 'toolbar/utils/parsePlacement';
-
-const navClassName = cva('flex items-center gap-1', {
-  variants: {
-    isHorizontal: {
-      false: ['flex-col'],
-      true: ['flex-row'],
-    },
-  },
-});
-
-const navGrabber = cva(
-  'relative cursor-grab border-transparent after:absolute after:bg-translucentGray-200 after:hover:bg-gray-300',
-  {
-    variants: {
-      isHorizontal: {
-        false: ['-my-1 w-full py-1 after:top-1/2 after:h-px after:w-full'],
-        true: ['-mx-1 h-[34px] w-px px-1 after:left-1/2 after:h-full after:w-px'],
-      },
-    },
-  }
-);
-
-const menuSeparator = cx('mx-1 my-0.5');
-
-const navItemClassName = cx([
-  'relative',
-  'flex',
-  'flex-col',
-  'rounded-md',
-  'p-1',
-  'text-gray-400',
-  'border',
-  'border-solid',
-  'border-transparent',
-  'outline-none',
-  'hover:text-purple-400',
-  'hover:bg-purple-100',
-  'hover:border-current',
-  'hover:disabled:border-transparent',
-  'aria-currentPage:text-purple-400',
-  'aria-currentPage:bg-purple-100',
-  'aria-currentPage:border-current',
-]);
-
-const menuItemClass = cx('flex grow gap-1 whitespace-nowrap');
-
-export default function Navigation() {
-  const [{placement}] = useConfigContext();
-  const [mousePosition] = useMousePositionContext();
-  const isMoving = Boolean(mousePosition);
-  const {isExpanded, isPinned, setIsHovered, setIsPinned} = useNavigationExpansion();
-  const {pathname} = useLocation();
-  const navigate = useNavigate();
-
-  const {overrides} = useFeatureFlagAdapterContext();
-
-  const toPathOrHome = (to: To) => ({
-    to,
-    onClick: (e: MouseEvent) => {
-      if (pathname === to) {
-        e.preventDefault();
-        navigate('/');
-      }
-    },
-  });
-
-  const [major] = parsePlacement(placement);
-  const isHorizontal = ['top', 'bottom'].includes(major);
-
-  return (
-    <div
-      className={cx(navClassName({isHorizontal}), 'p-1')}
-      onMouseOver={() => setIsHovered(true)}
-      onMouseOut={() => setIsHovered(false)}>
-      <OptionsMenu isPinned={isPinned} setIsPinned={setIsPinned} />
-
-      <Transition show={isMoving || isExpanded}>
-        <div
-          className={cx(navClassName({isHorizontal}), 'p-0 transition duration-300 ease-in data-[closed]:opacity-0')}>
-          <hr className={navGrabber({isHorizontal})} data-grabber />
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <NavLink {...toPathOrHome('/issues')} className={navItemClassName}>
-                <IconIssues size="sm" />
-              </NavLink>
-            </TooltipTrigger>
-            <TooltipContent>Issues</TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <NavLink {...toPathOrHome('/feedback')} className={navItemClassName}>
-                <IconMegaphone size="sm" />
-              </NavLink>
-            </TooltipTrigger>
-            <TooltipContent>User Feedback</TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <NavLink {...toPathOrHome('/featureFlags')} className={navItemClassName}>
-                {Object.keys(overrides).length ? <Indicator position="top-right" variant="red" /> : null}
-                <IconFlag size="sm" />
-              </NavLink>
-            </TooltipTrigger>
-            <TooltipContent>Feature Flags</TooltipContent>
-          </Tooltip>
-        </div>
-      </Transition>
-    </div>
-  );
-}
-
-const optionsMenuTriggerPlacement: Record<ReturnType<typeof parsePlacement>[0], Placement> = {
-  top: 'bottom-end',
-  bottom: 'top-end',
-  left: 'right-start',
-  right: 'left-start',
-};
-
-function OptionsMenu({isPinned, setIsPinned}: {isPinned: boolean; setIsPinned: (isPinned: boolean) => void}) {
-  const [{debug, placement}] = useConfigContext();
-  const {pathname} = useLocation();
-  const navigate = useNavigate();
-  const apiProxy = useApiProxyInstance();
-  const [, setIsHidden] = useHiddenAppContext();
-
-  const [major] = parsePlacement(placement);
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Menu
-          className={cx(navItemClassName, 'p-1')}
-          menuClassName="border-translucentGray-200 border"
-          trigger={<IconSentry size="sm" />}
-          placement={optionsMenuTriggerPlacement[major]}>
-          {debug.includes(DebugTarget.SETTINGS) ? (
-            <Fragment>
-              <MenuItem
-                className={menuItemClass}
-                label="settings"
-                onClick={() => navigate(pathname === '/settings' ? '/' : '/settings')}>
-                <IconSettings size="sm" />
-                Init Config
-              </MenuItem>
-              <hr className={menuSeparator} />
-            </Fragment>
-          ) : null}
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <MenuItem className={menuItemClass} label="pin" onClick={() => setIsPinned(!isPinned)}>
-                <IconPin isSolid={isPinned} size="sm" />
-                {isPinned ? 'Pinned' : 'Un-Pinned'}
-              </MenuItem>
-            </TooltipTrigger>
-            <TooltipContent>
-              {isPinned ? 'This panel will stay expanded' : 'This panel will shrink when not in use'}
-            </TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <MenuItem className={menuItemClass} label="help">
-                <ExternalLink
-                  to={{url: 'https://docs.sentry.io/product/sentry-toolbar/'}}
-                  className="contents text-inherit">
-                  <IconOpen size="sm" />
-                  Help
-                </ExternalLink>
-              </MenuItem>
-            </TooltipTrigger>
-            <TooltipContent className="whitespace-nowrap">Read the docs</TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <MenuItem className={menuItemClass} label="hide" onClick={() => setIsHidden(true)}>
-                <IconClose size="sm" />
-                Hide Toolbar
-              </MenuItem>
-            </TooltipTrigger>
-            <TooltipContent className="whitespace-nowrap">
-              Hide the toolbar for the session.
-              <br />
-              Open a new tab to see it again.
-            </TooltipContent>
-          </Tooltip>
-
-          <hr className={menuSeparator} />
-
-          <MenuItem className={menuItemClass} label="logout" onClick={() => apiProxy.logout()}>
-            <IconLock size="sm" isLocked={false} />
-            Logout
-          </MenuItem>
-        </Menu>
-      </TooltipTrigger>
-      <TooltipContent>More options</TooltipContent>
-    </Tooltip>
-  );
-}
diff --git a/src/lib/components/avatar/AvatarIcon.tsx b/src/lib/components/avatar/AvatarIcon.tsx
new file mode 100644
index 0000000..2f7663f
--- /dev/null
+++ b/src/lib/components/avatar/AvatarIcon.tsx
@@ -0,0 +1,89 @@
+import {cva, cx} from 'cva';
+import {Tooltip, TooltipTrigger, TooltipContent} from 'toolbar/components/base/tooltip/Tooltip';
+
+const imageClassName = cva('flex items-center justify-center truncate object-cover text-white', {
+  variants: {
+    size: {
+      sm: 'size-2 text-[8px]',
+      md: 'size-3 text-[8px]',
+      lg: 'size-4 text-[8px]',
+    },
+    type: {
+      user: 'rounded-full',
+      team: 'rounded-[3px]',
+    },
+  },
+});
+
+interface Props {
+  name: string;
+  avatarUrl?: string;
+  type: 'user' | 'team';
+  tooltip: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * Avatars represent Orgs, People, & Teams in Sentry.
+ */
+export default function AvatarIcon({name, avatarUrl, type, tooltip, size = 'sm'}: Props) {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        {avatarUrl ? (
+          <img className={cx(imageClassName({size, type}))} src={avatarUrl} />
+        ) : (
+          <span className={cx(imageClassName({size, type}))} style={{backgroundColor: getAvatarColor(name)}}>
+            {getAvatarInitials(name)}
+          </span>
+        )}
+      </TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+const COLORS = [
+  '#4674ca', // blue
+  '#315cac', // blue_dark
+  '#57be8c', // green
+  '#3fa372', // green_dark
+  '#f9a66d', // yellow_orange
+  '#ec5e44', // red
+  '#e63717', // red_dark
+  '#f868bc', // pink
+  '#6c5fc7', // purple
+  '#4e3fb4', // purple_dark
+  '#57b1be', // teal
+  '#847a8c', // gray
+] as const;
+
+type Color = (typeof COLORS)[number];
+
+function hashIdentifier(identifier: string) {
+  identifier += '';
+  let hash = 0;
+  for (let i = 0; i < identifier.length; i++) {
+    hash += identifier.charCodeAt(i);
+  }
+  return hash;
+}
+
+function getAvatarColor(identifier: string | undefined): Color {
+  if (identifier === undefined) {
+    return '#847a8c' as Color;
+  }
+
+  const id = hashIdentifier(identifier);
+  return COLORS[id % COLORS.length] || '#847a8c';
+}
+
+function getAvatarInitials(displayName: string | undefined) {
+  const names = (typeof displayName === 'string' && displayName.trim() ? displayName : '?').split(/[-\s]+/);
+
+  let initials = names.at(0)?.charAt(0);
+  if (names.length > 1 && initials) {
+    initials += names[names.length - 1]?.charAt(0);
+  }
+  return initials?.toUpperCase() || '?';
+}
diff --git a/src/lib/components/base/Breadcrumbs.tsx b/src/lib/components/base/Breadcrumbs.tsx
new file mode 100644
index 0000000..00166e1
--- /dev/null
+++ b/src/lib/components/base/Breadcrumbs.tsx
@@ -0,0 +1,33 @@
+import {Fragment, type ReactNode} from 'react';
+import InternalLink from 'toolbar/components/base/InternalLink';
+import IconSlashForward from 'toolbar/components/icon/IconSlashForward';
+
+interface TextItem {
+  label: ReactNode;
+}
+
+interface LinkItem {
+  label: ReactNode;
+  to: string;
+}
+
+export type BreadcrumbItem = TextItem | LinkItem;
+
+interface Props {
+  items: BreadcrumbItem[];
+}
+
+export default function Breadcrumbs({items}: Props) {
+  return (
+    <nav aria-label="Breadcrumb" className="flex items-center gap-0.5">
+      {items.map((item, index) => (
+        <Fragment key={index}>
+          {index > 0 && (
+            <IconSlashForward direction="right" size="xs" className="shrink-0 text-gray-400" aria-hidden="true" />
+          )}
+          {'to' in item && item.to ? <InternalLink to={item.to}>{item.label}</InternalLink> : <span>{item.label}</span>}
+        </Fragment>
+      ))}
+    </nav>
+  );
+}
diff --git a/src/lib/components/base/Button.stories.tsx b/src/lib/components/base/Button.stories.tsx
new file mode 100644
index 0000000..1cdf5d2
--- /dev/null
+++ b/src/lib/components/base/Button.stories.tsx
@@ -0,0 +1,52 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import Button from 'toolbar/components/base/Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'components/base/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary'],
+    },
+    children: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: 'Click me',
+    variant: 'default',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    children: 'Click me',
+    variant: 'primary',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    variant: 'default',
+    disabled: true,
+  },
+};
+
+export const PrimaryDisabled: Story = {
+  args: {
+    children: 'Disabled',
+    variant: 'primary',
+    disabled: true,
+  },
+};
diff --git a/src/lib/components/base/Button.tsx b/src/lib/components/base/Button.tsx
new file mode 100644
index 0000000..ee7f8eb
--- /dev/null
+++ b/src/lib/components/base/Button.tsx
@@ -0,0 +1,30 @@
+import {cva, cx} from 'cva';
+import type {ComponentProps} from 'react';
+
+const buttonVariants = cva(
+  'flex cursor-pointer items-center justify-center gap-1 rounded-md border px-0.75 text-sm disabled:cursor-default disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'border-gray-200 hover:bg-gray-100  disabled:hover:bg-transparent',
+        primary:
+          'border-purple-300 bg-purple-300 text-white hover:border-purple-400 hover:bg-purple-400 disabled:hover:border-purple-300',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type Props = ComponentProps<'button'> & {
+  variant?: 'default' | 'primary';
+};
+
+export default function Button({className, children, variant, ...props}: Props) {
+  return (
+    <button className={cx(buttonVariants({variant}), className)} {...props}>
+      {children}
+    </button>
+  );
+}
diff --git a/src/lib/components/base/InternalLink.tsx b/src/lib/components/base/InternalLink.tsx
new file mode 100644
index 0000000..2d63721
--- /dev/null
+++ b/src/lib/components/base/InternalLink.tsx
@@ -0,0 +1,20 @@
+import {cx} from 'cva';
+import type {ComponentProps} from 'react';
+import {Link} from 'react-router-dom';
+import {twMerge} from 'tailwind-merge';
+
+interface Props extends Omit<ComponentProps<typeof Link>, 'to'> {
+  children: React.ReactNode;
+  to: string;
+  className?: string;
+}
+
+const linkClass = cx('text-blue-400 hover:underline');
+
+export default function InternalLink({children, className, to, ...props}: Props) {
+  return (
+    <Link {...props} to={to} className={twMerge(linkClass, className)}>
+      {children}
+    </Link>
+  );
+}
diff --git a/src/lib/components/LoadingSpinner.stories.tsx b/src/lib/components/base/LoadingSpinner.stories.tsx
similarity index 90%
rename from src/lib/components/LoadingSpinner.stories.tsx
rename to src/lib/components/base/LoadingSpinner.stories.tsx
index a0da229..78d3671 100644
--- a/src/lib/components/LoadingSpinner.stories.tsx
+++ b/src/lib/components/base/LoadingSpinner.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
-import LoadingSpinner from 'toolbar/components/LoadingSpinner';
+import LoadingSpinner from 'toolbar/components/base/LoadingSpinner';
 
 const meta: Meta<typeof LoadingSpinner> = {
   title: 'Components/LoadingSpinner',
diff --git a/src/lib/components/LoadingSpinner.tsx b/src/lib/components/base/LoadingSpinner.tsx
similarity index 100%
rename from src/lib/components/LoadingSpinner.tsx
rename to src/lib/components/base/LoadingSpinner.tsx
diff --git a/src/lib/components/base/Placeholder.stories.tsx b/src/lib/components/base/Placeholder.stories.tsx
new file mode 100644
index 0000000..23ae13a
--- /dev/null
+++ b/src/lib/components/base/Placeholder.stories.tsx
@@ -0,0 +1,227 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import type {VariantProps} from 'cva';
+import Placeholder from 'toolbar/components/base/Placeholder';
+
+type PlaceholderProps = VariantProps<typeof Placeholder> & {
+  children?: React.ReactNode;
+};
+
+function PlaceholderDemo({children, ...props}: PlaceholderProps) {
+  return <div className={Placeholder(props)}>{children}</div>;
+}
+
+const meta: Meta<typeof PlaceholderDemo> = {
+  title: 'components/base/Placeholder',
+  component: PlaceholderDemo,
+  argTypes: {
+    height: {
+      control: 'select',
+      options: ['full', 'auto', 'text', 'small', 'medium'],
+    },
+    width: {
+      control: 'select',
+      options: ['full', 'auto'],
+    },
+    shape: {
+      control: 'select',
+      options: ['square', 'round'],
+    },
+    state: {
+      control: 'select',
+      options: ['normal', 'error'],
+    },
+    children: {
+      control: 'text',
+    },
+  },
+  decorators: [
+    Story => (
+      <div style={{width: '300px', height: '200px'}}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof PlaceholderDemo>;
+
+// Playground with all controls
+export const Playground: Story = {
+  args: {
+    height: 'medium',
+    width: 'full',
+    shape: 'square',
+    state: 'normal',
+  },
+};
+
+// Height variants
+export const HeightText: Story = {
+  args: {
+    height: 'text',
+    width: 'full',
+  },
+};
+
+export const HeightSmall: Story = {
+  args: {
+    height: 'small',
+    width: 'full',
+  },
+};
+
+export const HeightMedium: Story = {
+  args: {
+    height: 'medium',
+    width: 'full',
+  },
+};
+
+export const HeightFull: Story = {
+  args: {
+    height: 'full',
+    width: 'full',
+  },
+};
+
+export const HeightAuto: Story = {
+  args: {
+    height: 'auto',
+    width: 'full',
+    children: 'Content determines height',
+  },
+};
+
+// Width variants
+export const WidthFull: Story = {
+  args: {
+    height: 'medium',
+    width: 'full',
+  },
+};
+
+export const WidthAuto: Story = {
+  args: {
+    height: 'medium',
+    width: 'auto',
+    children: 'Auto width',
+  },
+};
+
+// Shape variants
+export const ShapeSquare: Story = {
+  args: {
+    height: 'medium',
+    width: 'auto',
+    shape: 'square',
+  },
+  decorators: [
+    Story => (
+      <div style={{width: '100px', height: '100px'}}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const ShapeRound: Story = {
+  args: {
+    height: 'full',
+    width: 'auto',
+    shape: 'round',
+  },
+  decorators: [
+    Story => (
+      <div style={{width: '80px', height: '80px'}}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// State variants
+export const StateNormal: Story = {
+  args: {
+    height: 'medium',
+    width: 'full',
+    state: 'normal',
+  },
+};
+
+export const StateError: Story = {
+  args: {
+    height: 'medium',
+    width: 'full',
+    state: 'error',
+    children: 'Error state',
+  },
+};
+
+// Combined examples
+export const RoundAvatar: Story = {
+  name: 'Avatar Placeholder',
+  args: {
+    height: 'full',
+    width: 'auto',
+    shape: 'round',
+    state: 'normal',
+  },
+  decorators: [
+    Story => (
+      <div style={{width: '48px', height: '48px'}}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const TextLinePlaceholder: Story = {
+  name: 'Text Line Placeholder',
+  args: {
+    height: 'text',
+    width: 'full',
+    shape: 'square',
+    state: 'normal',
+  },
+};
+
+export const CardPlaceholder: Story = {
+  name: 'Card Placeholder',
+  args: {
+    height: 'full',
+    width: 'full',
+    shape: 'square',
+    state: 'normal',
+  },
+};
+
+export const ErrorCardPlaceholder: Story = {
+  name: 'Error Card Placeholder',
+  args: {
+    height: 'full',
+    width: 'full',
+    shape: 'square',
+    state: 'error',
+    children: 'Something went wrong',
+  },
+};
+
+// Multiple placeholders to simulate a loading skeleton
+export const SkeletonExample: Story = {
+  name: 'Skeleton Loading Example',
+  render: () => (
+    <div className="flex flex-col gap-2 p-4">
+      <div className="flex items-center gap-3">
+        <div className={Placeholder({height: 'full', width: 'auto', shape: 'round'})} style={{width: 40, height: 40}} />
+        <div className="flex flex-1 flex-col gap-1">
+          <div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '60%'}} />
+          <div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '40%'}} />
+        </div>
+      </div>
+      <div className={Placeholder({height: 'small', width: 'full'})} />
+      <div className={Placeholder({height: 'text', width: 'full'})} />
+      <div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '80%'}} />
+    </div>
+  ),
+};
diff --git a/src/lib/components/Placeholder.tsx b/src/lib/components/base/Placeholder.tsx
similarity index 53%
rename from src/lib/components/Placeholder.tsx
rename to src/lib/components/base/Placeholder.tsx
index ebf03d4..3f038f5 100644
--- a/src/lib/components/Placeholder.tsx
+++ b/src/lib/components/base/Placeholder.tsx
@@ -2,20 +2,33 @@ import {cva} from 'cva';
 
 const Placeholder = cva('flex shrink-0 flex-col items-center justify-center rounded-md', {
   variants: {
-    base: {
-      true: 'h-14 w-full',
+    height: {
+      full: 'h-full',
+      auto: 'h-auto',
+      text: 'h-[1rem]',
+      small: 'h-2',
+      medium: 'h-3',
+      large: 'h-4',
+    },
+    width: {
+      full: 'w-full',
+      auto: 'w-auto',
+      small: 'w-2',
+      medium: 'w-3',
+      large: 'w-4',
     },
     shape: {
       square: 'rounded-md',
       round: 'rounded-full',
     },
     state: {
-      normal: 'bg-surface-100',
+      normal: 'bg-gray-100',
       error: 'bg-red-100 text-red-200',
     },
   },
   defaultVariants: {
-    base: true,
+    height: 'text',
+    width: 'full',
     shape: 'square',
     state: 'normal',
   },
diff --git a/src/lib/components/base/ScrollableList.tsx b/src/lib/components/base/ScrollableList.tsx
new file mode 100644
index 0000000..20479b4
--- /dev/null
+++ b/src/lib/components/base/ScrollableList.tsx
@@ -0,0 +1,21 @@
+import {cx} from 'cva';
+import type {CSSProperties} from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  ref?: React.RefObject<HTMLDivElement | null> | undefined;
+  height?: number | undefined;
+  transform?: CSSProperties['transform'] | undefined;
+}
+
+export default function ScrollableList({children, ref, height, transform}: Props) {
+  return (
+    <div ref={ref} className="flex size-full flex-col overflow-auto overscroll-contain contain-strict">
+      <div style={{height}} className="relative flex w-full flex-col">
+        <ul style={{transform}} className={cx('w-full', {'absolute left-0 top-0': transform})}>
+          {children}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/src/lib/components/SentryAppLink.tsx b/src/lib/components/base/SentryAppLink.tsx
similarity index 100%
rename from src/lib/components/SentryAppLink.tsx
rename to src/lib/components/base/SentryAppLink.tsx
diff --git a/src/lib/components/icon/IconSlashForward.tsx b/src/lib/components/icon/IconSlashForward.tsx
new file mode 100644
index 0000000..cdcb7d7
--- /dev/null
+++ b/src/lib/components/icon/IconSlashForward.tsx
@@ -0,0 +1,10 @@
+import type {SVGIconProps} from 'toolbar/components/icon/SVGIconBase';
+import SVGIconBase from 'toolbar/components/icon/SVGIconBase';
+
+export default function IconSlashForward(props: SVGIconProps) {
+  return (
+    <SVGIconBase {...props}>
+      <path d="M9.544 1.496a.751.751 0 0 1 1.412.508l-4.5 12.5a.75.75 0 0 1-1.412-.508z" />
+    </SVGIconBase>
+  );
+}
diff --git a/src/lib/components/layouts/CenterLayout.tsx b/src/lib/components/layouts/CenterLayout.tsx
deleted file mode 100644
index 1623e69..0000000
--- a/src/lib/components/layouts/CenterLayout.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type {ReactNode} from 'react';
-
-interface Props {
-  children: ReactNode;
-}
-
-export default function CenterLayout({children}: Props) {
-  return (
-    <div className="pointer-events-none fixed inset-0 z-debug flex place-items-center justify-center">{children}</div>
-  );
-}
-
-CenterLayout.MainArea = function MainArea({children}: Props) {
-  return (
-    <div role="dialog" className="pointer-events-auto flex  translate-y-[30vh] overscroll-contain contain-layout">
-      {children}
-    </div>
-  );
-};
diff --git a/src/lib/components/layouts/EdgeLayout.stories.tsx b/src/lib/components/layouts/EdgeLayout.stories.tsx
index 0a346c4..678efff 100644
--- a/src/lib/components/layouts/EdgeLayout.stories.tsx
+++ b/src/lib/components/layouts/EdgeLayout.stories.tsx
@@ -1,6 +1,6 @@
 import type {Meta} from '@storybook/react-vite';
-import EdgeLayout, {MainArea, NavArea} from 'toolbar/components/layouts/EdgeLayout';
-import Navigation from 'toolbar/components/Navigation';
+import EdgeLayout, {PanelArea, NavArea} from 'toolbar/components/layouts/EdgeLayout';
+import NavigationPanel from 'toolbar/components/panels/nav/NavigationPanel';
 import {StaticConfigProvider, useConfigContext} from 'toolbar/context/ConfigContext';
 import type {Configuration} from 'toolbar/types/Configuration';
 
@@ -54,9 +54,9 @@ const Template = ({placement}: {placement: Configuration['placement']}) => {
     <StaticConfigProvider key={key++} config={{...baseConfig, placement}}>
       <EdgeLayout>
         <NavArea>
-          <Navigation />
+          <NavigationPanel />
         </NavArea>
-        <MainArea>Empty Panel</MainArea>
+        <PanelArea>Empty Panel</PanelArea>
       </EdgeLayout>
     </StaticConfigProvider>
   );
diff --git a/src/lib/components/layouts/EdgeLayout.tsx b/src/lib/components/layouts/EdgeLayout.tsx
index f89a564..ac607fe 100644
--- a/src/lib/components/layouts/EdgeLayout.tsx
+++ b/src/lib/components/layouts/EdgeLayout.tsx
@@ -1,7 +1,6 @@
 import {cva, cx} from 'cva';
 import type {ReactNode} from 'react';
 import {Fragment} from 'react/jsx-runtime';
-import DragDropPositionSurface from 'toolbar/components/DragDropPositionSurface';
 import {useConfigContext} from 'toolbar/context/ConfigContext';
 import type {Configuration} from 'toolbar/types/Configuration';
 
@@ -47,7 +46,7 @@ const navAreaClass = cva('pointer-events-auto contain-layout [grid-area:nav]', {
   },
 });
 
-const mainAreaClass = cva('pointer-events-auto contain-layout [grid-area:main]', {
+const panelAreaClass = cva('pointer-events-auto contain-layout [grid-area:main]', {
   variants: {
     placement: {
       'top-left-corner': ['justify-self-start', 'self-start'],
@@ -72,7 +71,6 @@ export default function EdgeLayout({children}: Props) {
   return (
     <Fragment>
       <div className={layoutClass({placement})}>{children}</div>
-      <DragDropPositionSurface instanceName="EdgeLayout" />
     </Fragment>
   );
 }
@@ -91,10 +89,10 @@ export function NavArea({children}: Props) {
   );
 }
 
-export function MainArea({children}: Props) {
+export function PanelArea({children}: Props) {
   const [{placement}] = useConfigContext();
   return (
-    <div role="dialog" className={mainAreaClass({placement})}>
+    <div role="dialog" className={panelAreaClass({placement})}>
       <div className={cx('h-[90vh] max-h-[560px] w-[320px] max-w-[320px] contain-size', areaCss)}>{children}</div>
     </div>
   );
diff --git a/src/lib/components/layouts/UnauthLayout.tsx b/src/lib/components/layouts/UnauthLayout.tsx
deleted file mode 100644
index 46bc18d..0000000
--- a/src/lib/components/layouts/UnauthLayout.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type {ReactNode} from 'react';
-import {useEffect, useContext, useCallback, useRef} from 'react';
-import {Tooltip, TooltipContent, TooltipTrigger} from 'toolbar/components/base/tooltip/Tooltip';
-import IconSentry from 'toolbar/components/icon/IconSentry';
-import CenterLayout from 'toolbar/components/layouts/CenterLayout';
-import UnauthPill from 'toolbar/components/unauth/UnauthPill';
-import ShadowRootContext from 'toolbar/context/ShadowRootContext';
-import useClicksOutside from 'toolbar/hooks/useClicksOutside';
-import {useSessionStorage} from 'toolbar/hooks/useStorage';
-import useTimeout from 'toolbar/hooks/useTimeout';
-
-interface Props {
-  children: ReactNode;
-}
-
-export default function UnauthLayout({children}: Props) {
-  const shadowRoot = useContext(ShadowRootContext);
-  const [isCollapsed, setIsCollapsed] = useSessionStorage('isUnauthCollapsed', false);
-
-  const {start, cancel} = useTimeout({
-    timeMs: 5_000,
-    onTimeout: useCallback(() => setIsCollapsed(true), [setIsCollapsed]),
-  });
-  useEffect(start, [start]);
-
-  const clicksRef = useRef(0);
-  useClicksOutside({
-    node: shadowRoot.host,
-    onClickInside: useCallback(() => {
-      clicksRef.current = 0;
-      cancel();
-      setIsCollapsed(false);
-    }, [cancel, setIsCollapsed]),
-    onClickOutside: useCallback(() => {
-      clicksRef.current++;
-      if (clicksRef.current >= 3) {
-        clicksRef.current = 0;
-        setIsCollapsed(true);
-      }
-    }, [setIsCollapsed]),
-  });
-
-  if (isCollapsed) {
-    return (
-      <div role="dialog" className="pointer-events-none fixed inset-0 flex h-full items-center justify-end">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              className="pointer-events-auto flex flex-row place-items-center gap-1 rounded-l-full border border-r-0 border-black-raw bg-black-raw p-1 pr-0.5 text-sm text-white-raw hover:bg-white-raw hover:text-black-raw"
-              aria-label="Expand toolbar and login"
-              onClick={() => setIsCollapsed(false)}>
-              <IconSentry size="sm" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent className="whitespace-nowrap">Expand Sentry Toolbar and Login</TooltipContent>
-        </Tooltip>
-      </div>
-    );
-  }
-
-  return (
-    <CenterLayout>
-      <CenterLayout.MainArea>
-        <UnauthPill>{children}</UnauthPill>
-      </CenterLayout.MainArea>
-    </CenterLayout>
-  );
-}
diff --git a/src/lib/components/panels/featureFlags/FeatureFlagsPanel.tsx b/src/lib/components/panels/featureFlags/FeatureFlagsPanel.tsx
index 249d2bf..8c72126 100644
--- a/src/lib/components/panels/featureFlags/FeatureFlagsPanel.tsx
+++ b/src/lib/components/panels/featureFlags/FeatureFlagsPanel.tsx
@@ -1,5 +1,6 @@
 import {cx} from 'cva';
 import {useMemo, useState} from 'react';
+import Button from 'toolbar/components/base/Button';
 import ExternalLink from 'toolbar/components/base/ExternalLink';
 import IconChevron from 'toolbar/components/icon/IconChevron';
 import IconClose from 'toolbar/components/icon/IconClose';
@@ -111,12 +112,10 @@ function FeatureFlagEditor() {
 
         {prefilter === 'overrides' ? (
           <div className={cx(sectionPadding, 'flex flex-col items-stretch')}>
-            <button
-              className="flex items-center justify-center gap-1 self-stretch rounded-md border border-gray-200 p-0.75 text-sm hover:bg-gray-100 hover:underline"
-              onClick={clearOverrides}>
+            <Button onClick={clearOverrides} aria-label="Reset All Overrides" title="Reset All Overrides">
               <IconClose isCircled size="xs" />
               <span>Reset All Overrides</span>
-            </button>
+            </Button>
           </div>
         ) : null}
       </div>
diff --git a/src/lib/components/panels/feedback/FeedbackListItem.tsx b/src/lib/components/panels/feedback/FeedbackListItem.tsx
index b1fb33e..04c4b30 100644
--- a/src/lib/components/panels/feedback/FeedbackListItem.tsx
+++ b/src/lib/components/panels/feedback/FeedbackListItem.tsx
@@ -2,6 +2,7 @@ import {cx} from 'cva';
 import type {ReactElement} from 'react';
 import {useMemo} from 'react';
 import AssignedTo from 'toolbar/components/AssignedTo';
+import SentryAppLink from 'toolbar/components/base/SentryAppLink';
 import {Tooltip, TooltipTrigger, TooltipContent} from 'toolbar/components/base/tooltip/Tooltip';
 import RelativeDateTime from 'toolbar/components/datetime/RelativeDateTime';
 import IconChat from 'toolbar/components/icon/IconChat';
@@ -9,7 +10,6 @@ import IconFatal from 'toolbar/components/icon/IconFatal';
 import IconImage from 'toolbar/components/icon/IconImage';
 import IconPlay from 'toolbar/components/icon/IconPlay';
 import ProjectIcon from 'toolbar/components/project/ProjectIcon';
-import SentryAppLink from 'toolbar/components/SentryAppLink';
 import {useConfigContext} from 'toolbar/context/ConfigContext';
 import useReplayCount from 'toolbar/hooks/useReplayCount';
 import type {FeedbackIssueListItem} from 'toolbar/sentryApi/types/group';
diff --git a/src/lib/components/panels/feedback/FeedbackPanel.tsx b/src/lib/components/panels/feedback/FeedbackPanel.tsx
index d1faddb..fa9aac3 100644
--- a/src/lib/components/panels/feedback/FeedbackPanel.tsx
+++ b/src/lib/components/panels/feedback/FeedbackPanel.tsx
@@ -1,11 +1,12 @@
+import {cx} from 'cva';
+import Placeholder from 'toolbar/components/base/Placeholder';
+import SentryAppLink from 'toolbar/components/base/SentryAppLink';
 import {Tooltip, TooltipContent, TooltipTrigger} from 'toolbar/components/base/tooltip/Tooltip';
 import InfiniteListItems from 'toolbar/components/InfiniteListItems';
 import InfiniteListState from 'toolbar/components/InfiniteListState';
 import FeedbackListItem from 'toolbar/components/panels/feedback/FeedbackListItem';
 import useInfiniteFeedbackList from 'toolbar/components/panels/feedback/useInfiniteFeedbackList';
-import Placeholder from 'toolbar/components/Placeholder';
 import ProjectIcon from 'toolbar/components/project/ProjectIcon';
-import SentryAppLink from 'toolbar/components/SentryAppLink';
 import {useConfigContext} from 'toolbar/context/ConfigContext';
 import useFetchSentryData from 'toolbar/hooks/fetch/useFetchSentryData';
 import useCurrentSentryTransactionName from 'toolbar/hooks/useCurrentSentryTransactionName';
@@ -54,10 +55,10 @@ export default function FeedbackPanel() {
           backgroundUpdatingMessage={() => null}
           loadingMessage={() => (
             <div className="flex flex-col gap-1 px-1 pt-1">
-              <div className={Placeholder()} />
-              <div className={Placeholder()} />
-              <div className={Placeholder()} />
-              <div className={Placeholder()} />
+              <div className={cx(Placeholder(), 'h-[56px]')} />
+              <div className={cx(Placeholder(), 'h-[56px]')} />
+              <div className={cx(Placeholder(), 'h-[56px]')} />
+              <div className={cx(Placeholder(), 'h-[56px]')} />
             </div>
           )}>
           <InfiniteListItems<FeedbackIssueListItem, ApiResult<FeedbackIssueListItem[]>>
diff --git a/src/lib/components/panels/issues/IssueListItem.tsx b/src/lib/components/panels/issues/IssueListItem.tsx
index 9687208..dcf702f 100644
--- a/src/lib/components/panels/issues/IssueListItem.tsx
+++ b/src/lib/components/panels/issues/IssueListItem.tsx
@@ -1,8 +1,8 @@
 import {cx} from 'cva';
 import AssignedTo from 'toolbar/components/AssignedTo';
+import SentryAppLink from 'toolbar/components/base/SentryAppLink';
 import RelativeDateTime from 'toolbar/components/datetime/RelativeDateTime';
 import ProjectIcon from 'toolbar/components/project/ProjectIcon';
-import SentryAppLink from 'toolbar/components/SentryAppLink';
 import {useConfigContext} from 'toolbar/context/ConfigContext';
 import type {Group} from 'toolbar/sentryApi/types/group';
 import type Member from 'toolbar/sentryApi/types/Member';
diff --git a/src/lib/components/panels/issues/IssuesPanel.tsx b/src/lib/components/panels/issues/IssuesPanel.tsx
index 3159e41..0feddcc 100644
--- a/src/lib/components/panels/issues/IssuesPanel.tsx
+++ b/src/lib/components/panels/issues/IssuesPanel.tsx
@@ -1,11 +1,12 @@
+import {cx} from 'cva';
+import Placeholder from 'toolbar/components/base/Placeholder';
+import SentryAppLink from 'toolbar/components/base/SentryAppLink';
 import {Tooltip, TooltipContent, TooltipTrigger} from 'toolbar/components/base/tooltip/Tooltip';
 import InfiniteListItems from 'toolbar/components/InfiniteListItems';
 import InfiniteListState from 'toolbar/components/InfiniteListState';
 import IssueListItem from 'toolbar/components/panels/issues/IssueListItem';
 import useInfiniteIssuesList from 'toolbar/components/panels/issues/useInfiniteIssuesList';
-import Placeholder from 'toolbar/components/Placeholder';
 import ProjectIcon from 'toolbar/components/project/ProjectIcon';
-import SentryAppLink from 'toolbar/components/SentryAppLink';
 import {useConfigContext} from 'toolbar/context/ConfigContext';
 import useFetchSentryData from 'toolbar/hooks/fetch/useFetchSentryData';
 import useCurrentSentryTransactionName from 'toolbar/hooks/useCurrentSentryTransactionName';
@@ -56,10 +57,10 @@ export default function IssuesPanel() {
           backgroundUpdatingMessage={() => null}
           loadingMessage={() => (
             <div className="flex flex-col gap-1 px-1 pt-1">
-              <div className={Placeholder()} />
-              <div className={Placeholder()} />
-              <div className={Placeholder()} />
-              <div className={Placeholder()} />
+              <div className={cx(Placeholder(), 'h-[56px]')} />
+              <div className={cx(Placeholder(), 'h-[56px]')} />
+              <div className={cx(Placeholder(), 'h-[56px]')} />
+              <div className={cx(Placeholder(), 'h-[56px]')} />
             </div>
           )}>
           <InfiniteListItems<Group, ApiResult<Group[]>>
diff --git a/src/lib/components/Navigation.stories.tsx b/src/lib/components/panels/nav/AuthNavigation.stories.tsx
similarity index 90%
rename from src/lib/components/Navigation.stories.tsx
rename to src/lib/components/panels/nav/AuthNavigation.stories.tsx
index f44329e..06e7f21 100644
--- a/src/lib/components/Navigation.stories.tsx
+++ b/src/lib/components/panels/nav/AuthNavigation.stories.tsx
@@ -1,12 +1,12 @@
 import type {Meta} from '@storybook/react-vite';
 import EdgeLayout, {NavArea} from 'toolbar/components/layouts/EdgeLayout';
-import Navigation from 'toolbar/components/Navigation';
+import NavigationPanel from 'toolbar/components/panels/nav/NavigationPanel';
 import {useConfigContext, StaticConfigProvider} from 'toolbar/context/ConfigContext';
 import type {Configuration} from 'toolbar/types/Configuration';
 
 const meta = {
-  title: 'components/Navigation',
-  component: Navigation,
+  title: 'components/panels/nav/NavigationPanel',
+  component: NavigationPanel,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'centered',
@@ -34,7 +34,7 @@ const meta = {
       ],
     },
   },
-} as Meta<typeof Navigation>;
+} as Meta<typeof NavigationPanel>;
 
 export default meta;
 
@@ -45,7 +45,7 @@ const Template = ({placement}: {placement: Configuration['placement']}) => {
     <StaticConfigProvider key={key++} config={{...baseConfig, placement}}>
       <EdgeLayout>
         <NavArea>
-          <Navigation />
+          <NavigationPanel />
         </NavArea>
       </EdgeLayout>
     </StaticConfigProvider>
diff --git a/src/lib/components/panels/nav/NavButton.tsx b/src/lib/components/panels/nav/NavButton.tsx
new file mode 100644
index 0000000..e069e2b
--- /dev/null
+++ b/src/lib/components/panels/nav/NavButton.tsx
@@ -0,0 +1,57 @@
+import {cx} from 'cva';
+import type {MouseEvent, ReactNode} from 'react';
+import {NavLink, useLocation, useNavigate} from 'react-router-dom';
+import type {To} from 'react-router-dom';
+import {Tooltip, TooltipTrigger, TooltipContent} from 'toolbar/components/base/tooltip/Tooltip';
+
+interface Props {
+  to: To;
+  tooltip: string;
+  children: ReactNode;
+}
+
+const navItemClassName = cx([
+  'relative',
+  'flex',
+  'flex-col',
+  'rounded-md',
+  'p-1',
+  'text-gray-400',
+  'border',
+  'border-solid',
+  'border-transparent',
+  'outline-none',
+  'hover:text-purple-400',
+  'hover:bg-purple-100',
+  'hover:border-current',
+  'hover:disabled:border-transparent',
+  'aria-currentPage:text-purple-400',
+  'aria-currentPage:bg-purple-100',
+  'aria-currentPage:border-current',
+]);
+
+export default function NavButton({to, tooltip, children}: Props) {
+  const {pathname} = useLocation();
+  const navigate = useNavigate();
+
+  const toPathOrHome = (to: To) => ({
+    to,
+    onClick: (e: MouseEvent) => {
+      if (pathname === to) {
+        e.preventDefault();
+        navigate('/');
+      }
+    },
+  });
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <NavLink {...toPathOrHome(to)} className={navItemClassName}>
+          {children}
+        </NavLink>
+      </TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/src/lib/components/panels/nav/NavGrabber.tsx b/src/lib/components/panels/nav/NavGrabber.tsx
new file mode 100644
index 0000000..43cc0be
--- /dev/null
+++ b/src/lib/components/panels/nav/NavGrabber.tsx
@@ -0,0 +1,21 @@
+import {cva} from 'cva';
+
+const navGrabber = cva(
+  'relative cursor-grab border-transparent after:absolute after:bg-translucentGray-200 after:hover:bg-gray-300',
+  {
+    variants: {
+      isHorizontal: {
+        false: ['-my-1 w-full py-1 after:top-1/2 after:h-px after:w-full'],
+        true: ['-mx-1 h-[34px] w-px px-1 after:left-1/2 after:h-full after:w-px'],
+      },
+    },
+  }
+);
+
+interface Props {
+  isHorizontal: boolean;
+}
+
+export default function NavGrabber({isHorizontal}: Props) {
+  return <hr className={navGrabber({isHorizontal})} data-grabber />;
+}
diff --git a/src/lib/components/panels/nav/NavigationPanel.tsx b/src/lib/components/panels/nav/NavigationPanel.tsx
new file mode 100644
index 0000000..3e9b2af
--- /dev/null
+++ b/src/lib/components/panels/nav/NavigationPanel.tsx
@@ -0,0 +1,87 @@
+import {Transition} from '@headlessui/react';
+import {cva, cx} from 'cva';
+import type {MouseEvent} from 'react';
+import {useLocation, useNavigate} from 'react-router-dom';
+import type {To} from 'react-router-dom';
+import Indicator from 'toolbar/components/base/Indicator';
+import IconFlag from 'toolbar/components/icon/IconFlag';
+import IconIssues from 'toolbar/components/icon/IconIssues';
+import IconMegaphone from 'toolbar/components/icon/IconMegaphone';
+import IconSentry from 'toolbar/components/icon/IconSentry';
+import NavButton from 'toolbar/components/panels/nav/NavButton';
+import NavGrabber from 'toolbar/components/panels/nav/NavGrabber';
+import useNavigationExpansion from 'toolbar/components/panels/nav/useNavigationExpansion';
+import {useApiProxyState} from 'toolbar/context/ApiProxyContext';
+import {useConfigContext} from 'toolbar/context/ConfigContext';
+import {useFeatureFlagAdapterContext} from 'toolbar/context/FeatureFlagAdapterContext';
+import {useMousePositionContext} from 'toolbar/context/MousePositionContext';
+import parsePlacement from 'toolbar/utils/parsePlacement';
+
+const navClassName = cva('flex items-center gap-1', {
+  variants: {
+    isHorizontal: {
+      false: ['flex-col'],
+      true: ['flex-row'],
+    },
+  },
+});
+
+export default function NavigationPanel() {
+  const [{placement}] = useConfigContext();
+  const [mousePosition] = useMousePositionContext();
+  const isMoving = Boolean(mousePosition);
+  const {isExpanded, setIsHovered} = useNavigationExpansion();
+  const {pathname} = useLocation();
+  const navigate = useNavigate();
+
+  const proxyState = useApiProxyState();
+  const {overrides} = useFeatureFlagAdapterContext();
+
+  const toPathOrHome = (to: To) => ({
+    to,
+    onClick: (e: MouseEvent) => {
+      if (pathname === to) {
+        e.preventDefault();
+        navigate('/');
+      }
+    },
+  });
+
+  const [major] = parsePlacement(placement);
+  const isHorizontal = ['top', 'bottom'].includes(major);
+
+  return (
+    <div
+      className={cx(navClassName({isHorizontal}), 'p-1')}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseOut={() => setIsHovered(false)}>
+      <NavButton {...toPathOrHome('/settings')} tooltip="More options">
+        <IconSentry size="sm" />
+      </NavButton>
+
+      <Transition show={isMoving || isExpanded}>
+        <div
+          className={cx(navClassName({isHorizontal}), 'p-0 transition duration-300 ease-in data-[closed]:opacity-0')}>
+          <NavGrabber isHorizontal={isHorizontal} />
+
+          {proxyState === 'logged-in' ? (
+            <NavButton to="/issues" tooltip="Issues">
+              <IconIssues size="sm" />
+            </NavButton>
+          ) : null}
+
+          {proxyState === 'logged-in' ? (
+            <NavButton to="/feedback" tooltip="User Feedback">
+              <IconMegaphone size="sm" />
+            </NavButton>
+          ) : null}
+
+          <NavButton to="/featureFlags" tooltip="Feature Flags">
+            {Object.keys(overrides).length ? <Indicator position="top-right" variant="red" /> : null}
+            <IconFlag size="sm" />
+          </NavButton>
+        </div>
+      </Transition>
+    </div>
+  );
+}
diff --git a/src/lib/hooks/useNavigationExpansion.ts b/src/lib/components/panels/nav/useNavigationExpansion.ts
similarity index 100%
rename from src/lib/hooks/useNavigationExpansion.ts
rename to src/lib/components/panels/nav/useNavigationExpansion.ts
diff --git a/src/lib/components/panels/settings/ConfigPanel.tsx b/src/lib/components/panels/settings/ConfigPanel.tsx
new file mode 100644
index 0000000..2192270
--- /dev/null
+++ b/src/lib/components/panels/settings/ConfigPanel.tsx
@@ -0,0 +1,36 @@
+import {cx} from 'cva';
+import Breadcrumbs from 'toolbar/components/base/Breadcrumbs';
+import ScrollableList from 'toolbar/components/base/ScrollableList';
+import IconSettings from 'toolbar/components/icon/IconSettings';
+import {useConfigContext} from 'toolbar/context/ConfigContext';
+
+const sectionPadding = cx('px-2 py-1');
+const sectionBorder = cx('border-b border-b-translucentGray-200');
+
+export default function ConfigPanel() {
+  const [config] = useConfigContext();
+
+  return (
+    <section className="flex grow flex-col">
+      <h1 className={cx(sectionBorder, sectionPadding, 'flex flex-row items-center gap-1 font-medium')}>
+        <IconSettings size="sm" />
+        <Breadcrumbs items={[{label: 'Settings', to: '/settings'}, {label: 'Config'}]} />
+      </h1>
+
+      <ScrollableList>
+        {Object.entries(config).map(([key, value]) => (
+          <li key={key} className="flex flex-col gap-0.5 px-2">
+            <span className="text-sm text-gray-500">{key}</span>
+            <span className="break-all ps-1 text-xs">
+              {typeof value === 'function'
+                ? '[Function]' + String(value)
+                : typeof value === 'object' && value !== null
+                  ? JSON.stringify(value)
+                  : String(value)}
+            </span>
+          </li>
+        ))}
+      </ScrollableList>
+    </section>
+  );
+}
diff --git a/src/lib/components/panels/settings/CurrentUser.tsx b/src/lib/components/panels/settings/CurrentUser.tsx
new file mode 100644
index 0000000..3b587da
--- /dev/null
+++ b/src/lib/components/panels/settings/CurrentUser.tsx
@@ -0,0 +1,49 @@
+import {cx} from 'cva';
+import AvatarIcon from 'toolbar/components/avatar/AvatarIcon';
+import Placeholder from 'toolbar/components/base/Placeholder';
+import Media from 'toolbar/components/Media';
+import useFetchSentryData from 'toolbar/hooks/fetch/useFetchSentryData';
+import {useUserQuery} from 'toolbar/sentryApi/queryKeys';
+
+export default function CurrentUser() {
+  const {data, isError, isPending} = useFetchSentryData({
+    ...useUserQuery('me'),
+  });
+
+  if (isPending || isError) {
+    const redPlaceholderClass = Placeholder({
+      height: 'text',
+      width: 'auto',
+      state: isError ? 'normal' : 'error',
+    });
+    return (
+      <Media
+        media={
+          <div
+            className={Placeholder({
+              height: 'full',
+              width: 'full',
+              shape: 'round',
+              state: isError ? 'normal' : 'error',
+            })}
+          />
+        }
+        title={<div className={cx(redPlaceholderClass, 'w-160px')} />}
+        description={<div className={cx(redPlaceholderClass, 'w-120px')} />}
+        size="lg"
+      />
+    );
+  }
+
+  const user = data.json;
+  return (
+    <Media
+      media={
+        <AvatarIcon name={user.name} avatarUrl={user.avatar.avatarUrl} type="user" tooltip={user.name} size="lg" />
+      }
+      title={user.name}
+      description={user.email}
+      size="lg"
+    />
+  );
+}
diff --git a/src/lib/components/panels/settings/ProxyState.tsx b/src/lib/components/panels/settings/ProxyState.tsx
new file mode 100644
index 0000000..ddc1d20
--- /dev/null
+++ b/src/lib/components/panels/settings/ProxyState.tsx
@@ -0,0 +1,28 @@
+import Connecting from 'toolbar/components/panels/settings/proxyState/Connecting';
+import Disconnected from 'toolbar/components/panels/settings/proxyState/Disconnected';
+import InvalidDomain from 'toolbar/components/panels/settings/proxyState/InvalidDomain';
+import Login from 'toolbar/components/panels/settings/proxyState/Login';
+import Logout from 'toolbar/components/panels/settings/proxyState/Logout';
+import MissingProject from 'toolbar/components/panels/settings/proxyState/MissingProject';
+import {useApiProxyState} from 'toolbar/context/ApiProxyContext';
+import type {ProxyState} from 'toolbar/utils/ApiProxy';
+
+export default function ProxyState() {
+  const proxyState = useApiProxyState();
+
+  switch (proxyState) {
+    case 'disconnected':
+      return <Disconnected />;
+    case 'connecting':
+    case 'stale': // Fallthrough
+      return <Connecting />;
+    case 'logged-out':
+      return <Login />;
+    case 'missing-project':
+      return <MissingProject />;
+    case 'invalid-domain':
+      return <InvalidDomain />;
+    case 'logged-in':
+      return <Logout />;
+  }
+}
diff --git a/src/lib/components/panels/settings/SettingsPanel.tsx b/src/lib/components/panels/settings/SettingsPanel.tsx
index 82116d2..c4749c7 100644
--- a/src/lib/components/panels/settings/SettingsPanel.tsx
+++ b/src/lib/components/panels/settings/SettingsPanel.tsx
@@ -1,15 +1,79 @@
-import {useConfigContext} from 'toolbar/context/ConfigContext';
+import {cx} from 'cva';
+import {twMerge} from 'tailwind-merge';
+import Button from 'toolbar/components/base/Button';
+import ExternalLink from 'toolbar/components/base/ExternalLink';
+import InternalLink from 'toolbar/components/base/InternalLink';
+import ScrollableList from 'toolbar/components/base/ScrollableList';
+import SwitchButton from 'toolbar/components/base/SwitchButton';
+import IconChevron from 'toolbar/components/icon/IconChevron';
+import IconOpen from 'toolbar/components/icon/IconOpen';
+import IconPin from 'toolbar/components/icon/IconPin';
+import IconSettings from 'toolbar/components/icon/IconSettings';
+import IconShow from 'toolbar/components/icon/IconShow';
+import useNavigationExpansion from 'toolbar/components/panels/nav/useNavigationExpansion';
+import CurrentUser from 'toolbar/components/panels/settings/CurrentUser';
+import ProxyState from 'toolbar/components/panels/settings/ProxyState';
+import {useApiProxyState} from 'toolbar/context/ApiProxyContext';
+import {useHiddenAppContext} from 'toolbar/context/HiddenAppContext';
+
+const sectionPadding = cx('px-2 py-1');
+const sectionBorder = cx('border-b border-b-translucentGray-200');
+const rowClass = cx('flex items-center justify-between gap-1');
 
 export default function SettingsPanel() {
-  const [config] = useConfigContext();
+  const proxyState = useApiProxyState();
+  const [, setIsHidden] = useHiddenAppContext();
+  const {isPinned, setIsPinned} = useNavigationExpansion();
 
   return (
-    <section className="h-full overflow-y-auto">
-      <div>
-        <code>
-          <pre>{JSON.stringify(config, null, '\t')}</pre>
-        </code>
-      </div>
+    <section className="flex grow flex-col">
+      <h1 className={cx(sectionBorder, sectionPadding, 'flex flex-row items-center gap-1 font-medium')}>
+        <IconSettings size="sm" />
+        <span>Settings</span>
+      </h1>
+
+      <ScrollableList>
+        <li className={twMerge(cx(rowClass, sectionPadding, sectionBorder), 'flex-col items-stretch')}>
+          {proxyState === 'logged-in' ? <CurrentUser /> : null}
+          <ProxyState />
+        </li>
+
+        <li className={cx(rowClass, sectionPadding)}>
+          <label htmlFor="toggle-pinned" className="flex w-full items-center justify-between">
+            <span className="flex items-center gap-1 text-sm">
+              <IconPin isSolid={isPinned} size="sm" />
+              {isPinned ? 'Un-Pin Toolbar' : 'Pin Toolbar'}
+            </span>
+            <SwitchButton id="toggle-pinned" size="sm" isActive={isPinned} onClick={() => setIsPinned(!isPinned)} />
+          </label>
+        </li>
+
+        <li className={cx(rowClass, sectionPadding, sectionBorder)}>
+          <span className="flex items-center gap-1 text-sm">
+            <IconShow size="sm" />
+            Hide for Session
+          </span>
+          <Button onClick={() => setIsHidden(true)} aria-label="Hide for Session" title="Hide for Session">
+            Hide
+          </Button>
+        </li>
+
+        <li className={cx(rowClass, sectionPadding)}>
+          <InternalLink to="/settings/config" className="flex w-full items-center justify-between gap-1 text-sm">
+            Show Toolbar Config
+            <IconChevron direction="right" size="sm" />
+          </InternalLink>
+        </li>
+
+        <li className={cx(rowClass, sectionPadding, sectionBorder)}>
+          <ExternalLink
+            to={{url: 'https://docs.sentry.io/product/sentry-toolbar/'}}
+            className="flex items-center gap-1 text-sm ">
+            <IconOpen size="sm" />
+            Read the Docs
+          </ExternalLink>
+        </li>
+      </ScrollableList>
     </section>
   );
 }
diff --git a/src/lib/components/unauth/Connecting.stories.tsx b/src/lib/components/panels/settings/proxyState/Connecting.stories.tsx
similarity index 87%
rename from src/lib/components/unauth/Connecting.stories.tsx
rename to src/lib/components/panels/settings/proxyState/Connecting.stories.tsx
index 38ca81e..50f8f24 100644
--- a/src/lib/components/unauth/Connecting.stories.tsx
+++ b/src/lib/components/panels/settings/proxyState/Connecting.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
-import Connecting from 'toolbar/components/unauth/Connecting';
+import Connecting from 'toolbar/components/panels/settings/proxyState/Connecting';
 
 const meta = {
   title: 'components/unauth/Connecting',
diff --git a/src/lib/components/unauth/Connecting.tsx b/src/lib/components/panels/settings/proxyState/Connecting.tsx
similarity index 100%
rename from src/lib/components/unauth/Connecting.tsx
rename to src/lib/components/panels/settings/proxyState/Connecting.tsx
diff --git a/src/lib/components/unauth/Disconnected.stories.tsx b/src/lib/components/panels/settings/proxyState/Disconnected.stories.tsx
similarity index 86%
rename from src/lib/components/unauth/Disconnected.stories.tsx
rename to src/lib/components/panels/settings/proxyState/Disconnected.stories.tsx
index 4a2934c..9e0cfb3 100644
--- a/src/lib/components/unauth/Disconnected.stories.tsx
+++ b/src/lib/components/panels/settings/proxyState/Disconnected.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
-import Disconnected from 'toolbar/components/unauth/Disconnected';
+import Disconnected from 'toolbar/components/panels/settings/proxyState/Disconnected';
 
 const meta = {
   title: 'components/unauth/Disconnected',
diff --git a/src/lib/components/unauth/Disconnected.tsx b/src/lib/components/panels/settings/proxyState/Disconnected.tsx
similarity index 100%
rename from src/lib/components/unauth/Disconnected.tsx
rename to src/lib/components/panels/settings/proxyState/Disconnected.tsx
diff --git a/src/lib/components/unauth/InvalidDomain.stories.tsx b/src/lib/components/panels/settings/proxyState/InvalidDomain.stories.tsx
similarity index 86%
rename from src/lib/components/unauth/InvalidDomain.stories.tsx
rename to src/lib/components/panels/settings/proxyState/InvalidDomain.stories.tsx
index 0e37271..3ada5ff 100644
--- a/src/lib/components/unauth/InvalidDomain.stories.tsx
+++ b/src/lib/components/panels/settings/proxyState/InvalidDomain.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
-import InvalidDomain from 'toolbar/components/unauth/InvalidDomain';
+import InvalidDomain from 'toolbar/components/panels/settings/proxyState/InvalidDomain';
 
 const meta = {
   title: 'components/unauth/InvalidDomain',
diff --git a/src/lib/components/unauth/InvalidDomain.tsx b/src/lib/components/panels/settings/proxyState/InvalidDomain.tsx
similarity index 79%
rename from src/lib/components/unauth/InvalidDomain.tsx
rename to src/lib/components/panels/settings/proxyState/InvalidDomain.tsx
index 0452d81..6f7b23a 100644
--- a/src/lib/components/unauth/InvalidDomain.tsx
+++ b/src/lib/components/panels/settings/proxyState/InvalidDomain.tsx
@@ -1,4 +1,4 @@
-import {UnauthPillAppLink} from 'toolbar/components/unauth/UnauthPill';
+import SentryAppLink from 'toolbar/components/base/SentryAppLink';
 import {useConfigContext} from 'toolbar/context/ConfigContext';
 
 export default function InvalidDomain() {
@@ -7,7 +7,7 @@ export default function InvalidDomain() {
   return (
     <div className="flex gap-0.25">
       <span className="py-1">The domain is invalid or not configured</span>
-      <UnauthPillAppLink
+      <SentryAppLink
         to={{
           url: `/settings/projects/${projectIdOrSlug}/toolbar/`,
           query: {
@@ -15,7 +15,7 @@ export default function InvalidDomain() {
           },
         }}>
         Configure project
-      </UnauthPillAppLink>
+      </SentryAppLink>
     </div>
   );
 }
diff --git a/src/lib/components/unauth/Login.stories.tsx b/src/lib/components/panels/settings/proxyState/Login.stories.tsx
similarity index 88%
rename from src/lib/components/unauth/Login.stories.tsx
rename to src/lib/components/panels/settings/proxyState/Login.stories.tsx
index 2c5dda0..b81b081 100644
--- a/src/lib/components/unauth/Login.stories.tsx
+++ b/src/lib/components/panels/settings/proxyState/Login.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
-import Login from 'toolbar/components/unauth/Login';
+import Login from 'toolbar/components/panels/settings/proxyState/Login';
 
 const meta = {
   title: 'components/unauth/Login',
diff --git a/src/lib/components/unauth/Login.tsx b/src/lib/components/panels/settings/proxyState/Login.tsx
similarity index 72%
rename from src/lib/components/unauth/Login.tsx
rename to src/lib/components/panels/settings/proxyState/Login.tsx
index 6068004..3a79fe7 100644
--- a/src/lib/components/unauth/Login.tsx
+++ b/src/lib/components/panels/settings/proxyState/Login.tsx
@@ -1,5 +1,6 @@
 import {useCallback, useRef, useState} from 'react';
-import {UnauthPillButton} from 'toolbar/components/unauth/UnauthPill';
+import Button from 'toolbar/components/base/Button';
+import IconLock from 'toolbar/components/icon/IconLock';
 import {useApiProxyInstance} from 'toolbar/context/ApiProxyContext';
 import {useConfigContext} from 'toolbar/context/ConfigContext';
 import {DebugTarget} from 'toolbar/types/Configuration';
@@ -28,7 +29,7 @@ export default function Login() {
   const openPopup = useCallback(() => {
     setIsLoggingIn(true);
 
-    apiProxy.login(debugLoginSuccess ? undefined : 3000);
+    apiProxy.login(debugLoginSuccess ? undefined : POPUP_MESSAGE_DELAY_MS);
 
     // start timer, after a sec ask about popups
     if (timeoutRef.current) {
@@ -40,14 +41,19 @@ export default function Login() {
   }, [apiProxy, debugLoginSuccess]);
 
   return (
-    <div className="flex-col">
+    <div className="flex flex-col">
       {isLoggingIn ? (
-        <div className="flex gap-0.25">
+        <div className="flex items-center justify-between gap-0.25">
           <span className="py-1">Logging in...</span>
-          <UnauthPillButton onClick={resetState}>reset</UnauthPillButton>
+          <Button onClick={resetState} className="py-0">
+            Reset
+          </Button>
         </div>
       ) : (
-        <UnauthPillButton onClick={openPopup}>Login to Sentry</UnauthPillButton>
+        <Button variant="primary" onClick={openPopup} className="flex w-full items-center gap-1 py-1">
+          <IconLock size="sm" isLocked />
+          Login
+        </Button>
       )}
       {showPopupBlockerMessage ? (
         <div className="py-1">Don&apos;t see the login popup? Check your popup blocker</div>
diff --git a/src/lib/components/panels/settings/proxyState/Logout.tsx b/src/lib/components/panels/settings/proxyState/Logout.tsx
new file mode 100644
index 0000000..61577e7
--- /dev/null
+++ b/src/lib/components/panels/settings/proxyState/Logout.tsx
@@ -0,0 +1,13 @@
+import Button from 'toolbar/components/base/Button';
+import IconLock from 'toolbar/components/icon/IconLock';
+import {useApiProxyInstance} from 'toolbar/context/ApiProxyContext';
+
+export default function Logout() {
+  const apiProxy = useApiProxyInstance();
+  return (
+    <Button onClick={() => apiProxy.logout()} className="flex w-full items-center gap-1 py-0.25">
+      <IconLock size="sm" isLocked={false} />
+      Sign Out
+    </Button>
+  );
+}
diff --git a/src/lib/components/unauth/MissingProject.stories.tsx b/src/lib/components/panels/settings/proxyState/MissingProject.stories.tsx
similarity index 86%
rename from src/lib/components/unauth/MissingProject.stories.tsx
rename to src/lib/components/panels/settings/proxyState/MissingProject.stories.tsx
index 52dcc5b..4f7ae72 100644
--- a/src/lib/components/unauth/MissingProject.stories.tsx
+++ b/src/lib/components/panels/settings/proxyState/MissingProject.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
-import MissingProject from 'toolbar/components/unauth/MissingProject';
+import MissingProject from 'toolbar/components/panels/settings/proxyState/MissingProject';
 
 const meta = {
   title: 'components/unauth/MissingProject',
diff --git a/src/lib/components/unauth/MissingProject.tsx b/src/lib/components/panels/settings/proxyState/MissingProject.tsx
similarity index 76%
rename from src/lib/components/unauth/MissingProject.tsx
rename to src/lib/components/panels/settings/proxyState/MissingProject.tsx
index cc089d6..0cc4e9f 100644
--- a/src/lib/components/unauth/MissingProject.tsx
+++ b/src/lib/components/panels/settings/proxyState/MissingProject.tsx
@@ -1,4 +1,4 @@
-import {UnauthPillAppLink} from 'toolbar/components/unauth/UnauthPill';
+import SentryAppLink from 'toolbar/components/base/SentryAppLink';
 import {useConfigContext} from 'toolbar/context/ConfigContext';
 
 export default function MissingProject() {
@@ -7,13 +7,13 @@ export default function MissingProject() {
   return (
     <div className="flex gap-0.25">
       <span className="py-1">Missing Project</span>
-      <UnauthPillAppLink
+      <SentryAppLink
         to={{
           url: '/settings/projects/',
           query: {query: projectIdOrSlug},
         }}>
         Open project list
-      </UnauthPillAppLink>
+      </SentryAppLink>
     </div>
   );
 }
diff --git a/src/lib/components/unauth/UnauthPill.tsx b/src/lib/components/unauth/UnauthPill.tsx
deleted file mode 100644
index b8538ec..0000000
--- a/src/lib/components/unauth/UnauthPill.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import {cx} from 'cva';
-import {Fragment} from 'react';
-import {twMerge} from 'tailwind-merge';
-import ExternalLink from 'toolbar/components/base/ExternalLink';
-import {Menu, MenuItem} from 'toolbar/components/base/menu/Menu';
-import {Tooltip, TooltipTrigger, TooltipContent} from 'toolbar/components/base/tooltip/Tooltip';
-import IconChevron from 'toolbar/components/icon/IconChevron';
-import IconClose from 'toolbar/components/icon/IconClose';
-import IconLock from 'toolbar/components/icon/IconLock';
-import IconOpen from 'toolbar/components/icon/IconOpen';
-import IconSentry from 'toolbar/components/icon/IconSentry';
-import SentryAppLink, {type Props as SentryAppLinkProps} from 'toolbar/components/SentryAppLink';
-import {useApiProxyInstance, useApiProxyState} from 'toolbar/context/ApiProxyContext';
-import {useHiddenAppContext} from 'toolbar/context/HiddenAppContext';
-
-interface Props {
-  children: React.ReactNode;
-}
-
-const menuSeparator = cx('mx-1 my-0.5');
-
-const buttonClass = cx(
-  'rounded-full transition-all text-white-raw p-1 hover:text-black-raw hover:bg-white-raw hover:underline'
-);
-
-const menuItemClass = cx('flex grow gap-1 whitespace-nowrap focus:bg-white-raw focus:text-black-raw');
-
-export default function UnauthPill({children}: Props) {
-  const [, setIsHidden] = useHiddenAppContext();
-  const apiProxy = useApiProxyInstance();
-  const proxyState = useApiProxyState();
-
-  return (
-    <div className="flex flex-row place-items-center gap-1 rounded-full bg-black-raw px-2 py-px text-sm text-white-raw">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <UnauthPillAppLink to={{url: '/'}}>
-            <IconSentry size="md" />
-          </UnauthPillAppLink>
-        </TooltipTrigger>
-        <TooltipContent>Visit Sentry</TooltipContent>
-      </Tooltip>
-
-      {children}
-
-      <Menu
-        className={twMerge(buttonClass, 'p-1')}
-        menuClassName="bg-black-raw"
-        trigger={({isOpen}) => <IconChevron direction={isOpen ? 'right' : 'down'} size="xs" />}
-        placement="right-start">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <MenuItem className={twMerge(menuItemClass, 'text-white-raw p-0')} label="help">
-              <ExternalLink
-                className={twMerge(menuItemClass, 'text-inherit p-1')}
-                to={{url: 'https://docs.sentry.io/product/sentry-toolbar/'}}>
-                <IconOpen size="sm" />
-                Help
-              </ExternalLink>
-            </MenuItem>
-          </TooltipTrigger>
-          <TooltipContent className="whitespace-nowrap">Read the docs</TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <MenuItem
-              className={twMerge(menuItemClass, 'text-white-raw p-1')}
-              label="hide"
-              onClick={() => setIsHidden(true)}>
-              <IconClose size="sm" />
-              Hide Toolbar
-            </MenuItem>
-          </TooltipTrigger>
-          <TooltipContent className="whitespace-nowrap">
-            Hide the toolbar for the session.
-            <br />
-            Open a new tab to see it again.
-          </TooltipContent>
-        </Tooltip>
-
-        {['missing-project', 'invalid-domain', 'logged-in'].includes(proxyState) ? (
-          <Fragment>
-            <hr className={menuSeparator} />
-
-            <MenuItem
-              className={twMerge(menuItemClass, 'text-white-raw p-1')}
-              label="hide"
-              onClick={() => apiProxy.logout()}>
-              <IconLock size="sm" />
-              Logout
-            </MenuItem>
-          </Fragment>
-        ) : null}
-      </Menu>
-    </div>
-  );
-}
-
-const UnauthPillButton = function UnauthPillButton({children, ...props}: React.ComponentProps<'button'>) {
-  return (
-    <button {...props} className={twMerge(buttonClass, props.className)}>
-      {children}
-    </button>
-  );
-};
-
-const UnauthPillAppLink = function UnauthPillAppLink({children, ...props}: SentryAppLinkProps) {
-  return (
-    <SentryAppLink {...props} className={twMerge(buttonClass, props.className)}>
-      {children}
-    </SentryAppLink>
-  );
-};
-
-export {UnauthPillButton, UnauthPillAppLink};
diff --git a/src/lib/context/ApiProxyContext.tsx b/src/lib/context/ApiProxyContext.tsx
index b500a78..054700e 100644
--- a/src/lib/context/ApiProxyContext.tsx
+++ b/src/lib/context/ApiProxyContext.tsx
@@ -55,20 +55,19 @@ export function ApiProxyContextProvider({children}: Props) {
 
   const frameSrc = `${getSentryIFrameOrigin(config)}/toolbar/${organizationSlug}/${projectIdOrSlug}/iframe/?logging=${enableLogging ? '1' : ''}`;
 
-  log('Render with state', {proxyState});
   return (
     // eslint-disable-next-line react-hooks/refs
     <ApiProxyContext.Provider value={proxyRef.current}>
-      <ApiProxyStateContext.Provider value={proxyState}>
-        <iframe
-          key={proxyState}
-          referrerPolicy="origin"
-          height="0"
-          width="0"
-          src={frameSrc}
-          className="hidden"
-          ref={iframeRef}
-        />
+      <iframe
+        key={proxyState}
+        referrerPolicy="origin"
+        height="0"
+        width="0"
+        src={frameSrc}
+        className="hidden"
+        ref={iframeRef}
+      />
+      <ApiProxyStateContext.Provider key={proxyState} value={proxyState}>
         {children}
       </ApiProxyStateContext.Provider>
     </ApiProxyContext.Provider>
diff --git a/src/lib/hooks/fetch/useSentryApi.ts b/src/lib/hooks/fetch/useSentryApi.ts
index d503ecd..0fcada5 100644
--- a/src/lib/hooks/fetch/useSentryApi.ts
+++ b/src/lib/hooks/fetch/useSentryApi.ts
@@ -54,7 +54,7 @@ export default function useSentryApi<Data>() {
           if (apiResult.status === 401) {
             apiProxy.setState('logged-out');
           }
-          if (apiResult.status === 502 || apiResult.status === 503 || apiResult.status === 504) {
+          if ([502, 503, 504].includes(apiResult.status)) {
             apiProxy.setState('disconnected');
           }
           throw apiResult;
diff --git a/src/lib/hooks/useNavigateOnProxyStateChange.ts b/src/lib/hooks/useNavigateOnProxyStateChange.ts
deleted file mode 100644
index dc0be3d..0000000
--- a/src/lib/hooks/useNavigateOnProxyStateChange.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import {useEffect} from 'react';
-import {useNavigate, useMatch, useLocation} from 'react-router-dom';
-import {useApiProxyState} from 'toolbar/context/ApiProxyContext';
-
-const unauthPaths = ['/disconnected', '/connecting', '/login', '/missing-project', '/invalid-domain'];
-
-export default function useNavigateOnProxyStateChange() {
-  const proxyState = useApiProxyState();
-  const location = useLocation();
-  const match = useMatch(location.pathname);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    switch (proxyState) {
-      case 'disconnected':
-        navigate('/disconnected');
-        break;
-      case 'connecting':
-        navigate('/connecting');
-        break;
-      case 'logged-out':
-        navigate('/login');
-        break;
-      case 'missing-project':
-        navigate('/missing-project');
-        break;
-      case 'invalid-domain':
-        navigate('/invalid-domain');
-        break;
-      case 'logged-in':
-        if (match && unauthPaths.includes(match.pathname)) {
-          navigate('/');
-        }
-    }
-  }, [proxyState, navigate, match]);
-}
diff --git a/src/lib/utils/ApiProxy.ts b/src/lib/utils/ApiProxy.ts
index 92fec56..461e2b5 100644
--- a/src/lib/utils/ApiProxy.ts
+++ b/src/lib/utils/ApiProxy.ts
@@ -12,7 +12,8 @@ export type ProxyState =
   | 'logged-out'
   | 'missing-project'
   | 'invalid-domain'
-  | 'logged-in';
+  | 'logged-in'
+  | 'stale';
 
 let _SINGLETON: null | ApiProxy = null;
 

From 0c757dbaaaa8d69a15b0d791c9872e5cad4b352d Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 10:25:49 -0800
Subject: [PATCH 03/15] add info and links to the current org/project

---
 src/lib/components/avatar/AvatarIcon.tsx      |  3 +-
 .../panels/settings/ConfigPanel.tsx           | 32 ++++++++++--
 .../components/panels/settings/CurrentOrg.tsx | 49 +++++++++++++++++++
 .../panels/settings/SettingsPanel.tsx         | 24 ++++++++-
 4 files changed, 102 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/panels/settings/CurrentOrg.tsx

diff --git a/src/lib/components/avatar/AvatarIcon.tsx b/src/lib/components/avatar/AvatarIcon.tsx
index 2f7663f..94fa54e 100644
--- a/src/lib/components/avatar/AvatarIcon.tsx
+++ b/src/lib/components/avatar/AvatarIcon.tsx
@@ -11,6 +11,7 @@ const imageClassName = cva('flex items-center justify-center truncate object-cov
     type: {
       user: 'rounded-full',
       team: 'rounded-[3px]',
+      org: 'rounded-[3px]',
     },
   },
 });
@@ -18,7 +19,7 @@ const imageClassName = cva('flex items-center justify-center truncate object-cov
 interface Props {
   name: string;
   avatarUrl?: string;
-  type: 'user' | 'team';
+  type: 'user' | 'team' | 'org';
   tooltip: string;
   size?: 'sm' | 'md' | 'lg';
 }
diff --git a/src/lib/components/panels/settings/ConfigPanel.tsx b/src/lib/components/panels/settings/ConfigPanel.tsx
index 2192270..946aefe 100644
--- a/src/lib/components/panels/settings/ConfigPanel.tsx
+++ b/src/lib/components/panels/settings/ConfigPanel.tsx
@@ -1,7 +1,11 @@
 import {cx} from 'cva';
+import {Fragment} from 'react';
 import Breadcrumbs from 'toolbar/components/base/Breadcrumbs';
+import InternalLink from 'toolbar/components/base/InternalLink';
 import ScrollableList from 'toolbar/components/base/ScrollableList';
-import IconSettings from 'toolbar/components/icon/IconSettings';
+import IconOpen from 'toolbar/components/icon/IconOpen';
+import CurrentOrg from 'toolbar/components/panels/settings/CurrentOrg';
+import {useApiProxyState} from 'toolbar/context/ApiProxyContext';
 import {useConfigContext} from 'toolbar/context/ConfigContext';
 
 const sectionPadding = cx('px-2 py-1');
@@ -9,12 +13,34 @@ const sectionBorder = cx('border-b border-b-translucentGray-200');
 
 export default function ConfigPanel() {
   const [config] = useConfigContext();
+  const proxyState = useApiProxyState();
+
+  const organizationSlug = config.organizationSlug;
 
   return (
     <section className="flex grow flex-col">
       <h1 className={cx(sectionBorder, sectionPadding, 'flex flex-row items-center gap-1 font-medium')}>
-        <IconSettings size="sm" />
-        <Breadcrumbs items={[{label: 'Settings', to: '/settings'}, {label: 'Config'}]} />
+        <Breadcrumbs
+          items={[
+            {
+              label: (
+                <InternalLink to="/settings" className="flex items-center gap-1">
+                  {proxyState === 'logged-in' ? (
+                    <CurrentOrg size="md" link={false} />
+                  ) : (
+                    <Fragment>
+                      <IconOpen size="md" />
+                      {organizationSlug}
+                    </Fragment>
+                  )}
+                </InternalLink>
+              ),
+            },
+            {label: 'Config'},
+          ]}
+        />
+
+        {}
       </h1>
 
       <ScrollableList>
diff --git a/src/lib/components/panels/settings/CurrentOrg.tsx b/src/lib/components/panels/settings/CurrentOrg.tsx
new file mode 100644
index 0000000..ebcd7a2
--- /dev/null
+++ b/src/lib/components/panels/settings/CurrentOrg.tsx
@@ -0,0 +1,49 @@
+import {cx} from 'cva';
+import AvatarIcon from 'toolbar/components/avatar/AvatarIcon';
+import Placeholder from 'toolbar/components/base/Placeholder';
+import SentryAppLink from 'toolbar/components/base/SentryAppLink';
+import {useConfigContext} from 'toolbar/context/ConfigContext';
+import useFetchSentryData from 'toolbar/hooks/fetch/useFetchSentryData';
+import {useOrganizationQuery} from 'toolbar/sentryApi/queryKeys';
+
+interface Props {
+  size?: 'sm' | 'md' | 'lg';
+  link?: boolean;
+}
+
+export default function CurrentOrg({size = 'md', link = true}: Props) {
+  const [{organizationSlug}] = useConfigContext();
+  const {data, isPending, isError} = useFetchSentryData({
+    ...useOrganizationQuery(organizationSlug),
+  });
+
+  if (isPending || isError) {
+    const redPlaceholderClass = Placeholder({
+      height: 'text',
+      width: 'auto',
+      state: isError ? 'normal' : 'error',
+    });
+    return (
+      <div className="flex items-center gap-1">
+        <div
+          className={Placeholder({
+            height: 'full',
+            width: 'full',
+            shape: 'round',
+            state: isError ? 'normal' : 'error',
+          })}
+        />
+        <div className={cx(redPlaceholderClass, 'w-160px')} />
+      </div>
+    );
+  }
+
+  const org = data.json;
+
+  return (
+    <div className="flex items-center gap-1">
+      <AvatarIcon name={org.name} avatarUrl={org.avatar.avatarUrl} type="org" tooltip={org.name} size={size} />
+      {link ? <SentryAppLink to={{url: `/organizations/${organizationSlug}/`}}>{org.name}</SentryAppLink> : org.name}
+    </div>
+  );
+}
diff --git a/src/lib/components/panels/settings/SettingsPanel.tsx b/src/lib/components/panels/settings/SettingsPanel.tsx
index c4749c7..14907f6 100644
--- a/src/lib/components/panels/settings/SettingsPanel.tsx
+++ b/src/lib/components/panels/settings/SettingsPanel.tsx
@@ -4,6 +4,7 @@ import Button from 'toolbar/components/base/Button';
 import ExternalLink from 'toolbar/components/base/ExternalLink';
 import InternalLink from 'toolbar/components/base/InternalLink';
 import ScrollableList from 'toolbar/components/base/ScrollableList';
+import SentryAppLink from 'toolbar/components/base/SentryAppLink';
 import SwitchButton from 'toolbar/components/base/SwitchButton';
 import IconChevron from 'toolbar/components/icon/IconChevron';
 import IconOpen from 'toolbar/components/icon/IconOpen';
@@ -11,9 +12,11 @@ import IconPin from 'toolbar/components/icon/IconPin';
 import IconSettings from 'toolbar/components/icon/IconSettings';
 import IconShow from 'toolbar/components/icon/IconShow';
 import useNavigationExpansion from 'toolbar/components/panels/nav/useNavigationExpansion';
+import CurrentOrg from 'toolbar/components/panels/settings/CurrentOrg';
 import CurrentUser from 'toolbar/components/panels/settings/CurrentUser';
 import ProxyState from 'toolbar/components/panels/settings/ProxyState';
 import {useApiProxyState} from 'toolbar/context/ApiProxyContext';
+import {useConfigContext} from 'toolbar/context/ConfigContext';
 import {useHiddenAppContext} from 'toolbar/context/HiddenAppContext';
 
 const sectionPadding = cx('px-2 py-1');
@@ -25,14 +28,31 @@ export default function SettingsPanel() {
   const [, setIsHidden] = useHiddenAppContext();
   const {isPinned, setIsPinned} = useNavigationExpansion();
 
+  const [{organizationSlug, projectIdOrSlug}] = useConfigContext();
+
   return (
     <section className="flex grow flex-col">
       <h1 className={cx(sectionBorder, sectionPadding, 'flex flex-row items-center gap-1 font-medium')}>
-        <IconSettings size="sm" />
-        <span>Settings</span>
+        {proxyState === 'logged-in' ? (
+          <CurrentOrg size="md" link={false} />
+        ) : (
+          <div className="flex items-center gap-1">
+            <IconSettings size="md" />
+            {organizationSlug}
+          </div>
+        )}
       </h1>
 
       <ScrollableList>
+        <li className={twMerge(cx(rowClass, sectionPadding, sectionBorder), 'flex-col items-stretch')}>
+          <SentryAppLink
+            className="flex items-center gap-1 text-sm "
+            to={{url: `/organizations/${organizationSlug}/projects/${projectIdOrSlug}/`}}>
+            <IconOpen size="sm" />
+            {organizationSlug}/{projectIdOrSlug}
+          </SentryAppLink>
+        </li>
+
         <li className={twMerge(cx(rowClass, sectionPadding, sectionBorder), 'flex-col items-stretch')}>
           {proxyState === 'logged-in' ? <CurrentUser /> : null}
           <ProxyState />

From eed21464d687072ee7901ec01a50f15bbefd4276 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 11:03:38 -0800
Subject: [PATCH 04/15] do not render auth-only routes until logged in

---
 src/lib/components/AppRouter.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/components/AppRouter.tsx b/src/lib/components/AppRouter.tsx
index a98db7c..e4f7604 100644
--- a/src/lib/components/AppRouter.tsx
+++ b/src/lib/components/AppRouter.tsx
@@ -68,5 +68,9 @@ function RequireAuth({children}: {children: ReactNode}) {
     }
   }, [proxyState, navigate]);
 
+  if (proxyState !== 'logged-in') {
+    return null;
+  }
+
   return children;
 }

From d59ca1b98046977b90073da941ffc28d843b7aec Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 11:04:29 -0800
Subject: [PATCH 05/15] fix placehlder ternary

---
 src/lib/components/panels/settings/CurrentOrg.tsx  | 4 ++--
 src/lib/components/panels/settings/CurrentUser.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/panels/settings/CurrentOrg.tsx b/src/lib/components/panels/settings/CurrentOrg.tsx
index ebcd7a2..846b6b5 100644
--- a/src/lib/components/panels/settings/CurrentOrg.tsx
+++ b/src/lib/components/panels/settings/CurrentOrg.tsx
@@ -21,7 +21,7 @@ export default function CurrentOrg({size = 'md', link = true}: Props) {
     const redPlaceholderClass = Placeholder({
       height: 'text',
       width: 'auto',
-      state: isError ? 'normal' : 'error',
+      state: isError ? 'error' : 'normal',
     });
     return (
       <div className="flex items-center gap-1">
@@ -30,7 +30,7 @@ export default function CurrentOrg({size = 'md', link = true}: Props) {
             height: 'full',
             width: 'full',
             shape: 'round',
-            state: isError ? 'normal' : 'error',
+            state: isError ? 'error' : 'normal',
           })}
         />
         <div className={cx(redPlaceholderClass, 'w-160px')} />
diff --git a/src/lib/components/panels/settings/CurrentUser.tsx b/src/lib/components/panels/settings/CurrentUser.tsx
index 3b587da..dafe4b4 100644
--- a/src/lib/components/panels/settings/CurrentUser.tsx
+++ b/src/lib/components/panels/settings/CurrentUser.tsx
@@ -14,7 +14,7 @@ export default function CurrentUser() {
     const redPlaceholderClass = Placeholder({
       height: 'text',
       width: 'auto',
-      state: isError ? 'normal' : 'error',
+      state: isError ? 'error' : 'normal',
     });
     return (
       <Media
@@ -24,7 +24,7 @@ export default function CurrentUser() {
               height: 'full',
               width: 'full',
               shape: 'round',
-              state: isError ? 'normal' : 'error',
+              state: isError ? 'error' : 'normal',
             })}
           />
         }

From f7d46d3801ca21f6f292bb473c58e7673aaa4aad Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 11:22:15 -0800
Subject: [PATCH 06/15] make Placeholder a real react component

---
 src/lib/components/Media.stories.tsx          | 38 +++++++++----------
 .../components/base/Placeholder.stories.tsx   | 27 +++++--------
 src/lib/components/base/Placeholder.tsx       | 12 ++++--
 .../panels/feedback/FeedbackPanel.tsx         |  9 ++---
 .../components/panels/issues/IssuesPanel.tsx  |  9 ++---
 .../components/panels/settings/CurrentOrg.tsx | 17 +--------
 .../panels/settings/CurrentUser.tsx           | 21 ++--------
 7 files changed, 50 insertions(+), 83 deletions(-)

diff --git a/src/lib/components/Media.stories.tsx b/src/lib/components/Media.stories.tsx
index fe83e4b..d1862a5 100644
--- a/src/lib/components/Media.stories.tsx
+++ b/src/lib/components/Media.stories.tsx
@@ -180,7 +180,7 @@ export const AllSizes: Story = {
 
 export const PlaceholderMedia: Story = {
   args: {
-    media: <div className={Placeholder({height: 'full', width: 'full', shape: 'round'})} />,
+    media: <Placeholder height="full" width="full" shape="round" />,
     title: 'Loading...',
     description: 'Please wait',
     size: 'md',
@@ -191,21 +191,21 @@ export const AllPlaceholders: Story = {
   render: () => (
     <div className="flex flex-col gap-3">
       <Media
-        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'round'})} />}
-        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '120px'}} />}
-        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '80px'}} />}
+        media={<Placeholder height="full" width="full" shape="round" />}
+        title={<Placeholder height="text" style={{width: '120px'}} />}
+        description={<Placeholder height="text" style={{width: '80px'}} />}
         size="sm"
       />
       <Media
-        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'round'})} />}
-        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '140px'}} />}
-        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '100px'}} />}
+        media={<Placeholder height="full" width="full" shape="round" />}
+        title={<Placeholder height="text" style={{width: '140px'}} />}
+        description={<Placeholder height="text" style={{width: '100px'}} />}
         size="md"
       />
       <Media
-        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'round'})} />}
-        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '160px'}} />}
-        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '120px'}} />}
+        media={<Placeholder height="full" width="full" shape="round" />}
+        title={<Placeholder height="text" style={{width: '160px'}} />}
+        description={<Placeholder height="text" style={{width: '120px'}} />}
         size="lg"
       />
     </div>
@@ -216,21 +216,21 @@ export const PlaceholderSquareMedia: Story = {
   render: () => (
     <div className="flex flex-col gap-3">
       <Media
-        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'square'})} />}
-        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '100px'}} />}
-        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '70px'}} />}
+        media={<Placeholder height="full" width="full" shape="square" />}
+        title={<Placeholder height="text" style={{width: '100px'}} />}
+        description={<Placeholder height="text" style={{width: '70px'}} />}
         size="sm"
       />
       <Media
-        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'square'})} />}
-        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '130px'}} />}
-        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '90px'}} />}
+        media={<Placeholder height="full" width="full" shape="square" />}
+        title={<Placeholder height="text" style={{width: '130px'}} />}
+        description={<Placeholder height="text" style={{width: '90px'}} />}
         size="md"
       />
       <Media
-        media={<div className={Placeholder({height: 'full', width: 'full', shape: 'square'})} />}
-        title={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '150px'}} />}
-        description={<div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '110px'}} />}
+        media={<Placeholder height="full" width="full" shape="square" />}
+        title={<Placeholder height="text" style={{width: '150px'}} />}
+        description={<Placeholder height="text" style={{width: '110px'}} />}
         size="lg"
       />
     </div>
diff --git a/src/lib/components/base/Placeholder.stories.tsx b/src/lib/components/base/Placeholder.stories.tsx
index 23ae13a..32099e6 100644
--- a/src/lib/components/base/Placeholder.stories.tsx
+++ b/src/lib/components/base/Placeholder.stories.tsx
@@ -1,18 +1,9 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
-import type {VariantProps} from 'cva';
 import Placeholder from 'toolbar/components/base/Placeholder';
 
-type PlaceholderProps = VariantProps<typeof Placeholder> & {
-  children?: React.ReactNode;
-};
-
-function PlaceholderDemo({children, ...props}: PlaceholderProps) {
-  return <div className={Placeholder(props)}>{children}</div>;
-}
-
-const meta: Meta<typeof PlaceholderDemo> = {
+const meta: Meta<typeof Placeholder> = {
   title: 'components/base/Placeholder',
-  component: PlaceholderDemo,
+  component: Placeholder,
   argTypes: {
     height: {
       control: 'select',
@@ -44,7 +35,7 @@ const meta: Meta<typeof PlaceholderDemo> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof PlaceholderDemo>;
+type Story = StoryObj<typeof Placeholder>;
 
 // Playground with all controls
 export const Playground: Story = {
@@ -213,15 +204,15 @@ export const SkeletonExample: Story = {
   render: () => (
     <div className="flex flex-col gap-2 p-4">
       <div className="flex items-center gap-3">
-        <div className={Placeholder({height: 'full', width: 'auto', shape: 'round'})} style={{width: 40, height: 40}} />
+        <Placeholder shape="round" className="size-[40px]" />
         <div className="flex flex-1 flex-col gap-1">
-          <div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '60%'}} />
-          <div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '40%'}} />
+          <Placeholder height="text" className="w-3/5" />
+          <Placeholder height="text" className="w-2/5" />
         </div>
       </div>
-      <div className={Placeholder({height: 'small', width: 'full'})} />
-      <div className={Placeholder({height: 'text', width: 'full'})} />
-      <div className={Placeholder({height: 'text', width: 'auto'})} style={{width: '80%'}} />
+      <Placeholder height="small" width="full" />
+      <Placeholder height="text" width="full" />
+      <Placeholder height="text" className="w-4/5" />
     </div>
   ),
 };
diff --git a/src/lib/components/base/Placeholder.tsx b/src/lib/components/base/Placeholder.tsx
index 3f038f5..69e1c20 100644
--- a/src/lib/components/base/Placeholder.tsx
+++ b/src/lib/components/base/Placeholder.tsx
@@ -1,6 +1,7 @@
-import {cva} from 'cva';
+import {cva, type VariantProps} from 'cva';
+import {twMerge} from 'tailwind-merge';
 
-const Placeholder = cva('flex shrink-0 flex-col items-center justify-center rounded-md', {
+const placeholderClass = cva('flex shrink-0 flex-col items-center justify-center rounded-md', {
   variants: {
     height: {
       full: 'h-full',
@@ -34,4 +35,9 @@ const Placeholder = cva('flex shrink-0 flex-col items-center justify-center roun
   },
 });
 
-export default Placeholder;
+export default function Placeholder({
+  className,
+  ...props
+}: VariantProps<typeof placeholderClass> & React.ComponentProps<'div'>) {
+  return <div className={twMerge(placeholderClass(), className)} {...props} />;
+}
diff --git a/src/lib/components/panels/feedback/FeedbackPanel.tsx b/src/lib/components/panels/feedback/FeedbackPanel.tsx
index fa9aac3..f6fdd60 100644
--- a/src/lib/components/panels/feedback/FeedbackPanel.tsx
+++ b/src/lib/components/panels/feedback/FeedbackPanel.tsx
@@ -1,4 +1,3 @@
-import {cx} from 'cva';
 import Placeholder from 'toolbar/components/base/Placeholder';
 import SentryAppLink from 'toolbar/components/base/SentryAppLink';
 import {Tooltip, TooltipContent, TooltipTrigger} from 'toolbar/components/base/tooltip/Tooltip';
@@ -55,10 +54,10 @@ export default function FeedbackPanel() {
           backgroundUpdatingMessage={() => null}
           loadingMessage={() => (
             <div className="flex flex-col gap-1 px-1 pt-1">
-              <div className={cx(Placeholder(), 'h-[56px]')} />
-              <div className={cx(Placeholder(), 'h-[56px]')} />
-              <div className={cx(Placeholder(), 'h-[56px]')} />
-              <div className={cx(Placeholder(), 'h-[56px]')} />
+              <Placeholder className={'h-[56px]'} />
+              <Placeholder className={'h-[56px]'} />
+              <Placeholder className={'h-[56px]'} />
+              <Placeholder className={'h-[56px]'} />
             </div>
           )}>
           <InfiniteListItems<FeedbackIssueListItem, ApiResult<FeedbackIssueListItem[]>>
diff --git a/src/lib/components/panels/issues/IssuesPanel.tsx b/src/lib/components/panels/issues/IssuesPanel.tsx
index 0feddcc..ada69c3 100644
--- a/src/lib/components/panels/issues/IssuesPanel.tsx
+++ b/src/lib/components/panels/issues/IssuesPanel.tsx
@@ -1,4 +1,3 @@
-import {cx} from 'cva';
 import Placeholder from 'toolbar/components/base/Placeholder';
 import SentryAppLink from 'toolbar/components/base/SentryAppLink';
 import {Tooltip, TooltipContent, TooltipTrigger} from 'toolbar/components/base/tooltip/Tooltip';
@@ -57,10 +56,10 @@ export default function IssuesPanel() {
           backgroundUpdatingMessage={() => null}
           loadingMessage={() => (
             <div className="flex flex-col gap-1 px-1 pt-1">
-              <div className={cx(Placeholder(), 'h-[56px]')} />
-              <div className={cx(Placeholder(), 'h-[56px]')} />
-              <div className={cx(Placeholder(), 'h-[56px]')} />
-              <div className={cx(Placeholder(), 'h-[56px]')} />
+              <Placeholder className={'h-[56px]'} />
+              <Placeholder className={'h-[56px]'} />
+              <Placeholder className={'h-[56px]'} />
+              <Placeholder className={'h-[56px]'} />
             </div>
           )}>
           <InfiniteListItems<Group, ApiResult<Group[]>>
diff --git a/src/lib/components/panels/settings/CurrentOrg.tsx b/src/lib/components/panels/settings/CurrentOrg.tsx
index 846b6b5..78313c4 100644
--- a/src/lib/components/panels/settings/CurrentOrg.tsx
+++ b/src/lib/components/panels/settings/CurrentOrg.tsx
@@ -1,4 +1,3 @@
-import {cx} from 'cva';
 import AvatarIcon from 'toolbar/components/avatar/AvatarIcon';
 import Placeholder from 'toolbar/components/base/Placeholder';
 import SentryAppLink from 'toolbar/components/base/SentryAppLink';
@@ -18,22 +17,10 @@ export default function CurrentOrg({size = 'md', link = true}: Props) {
   });
 
   if (isPending || isError) {
-    const redPlaceholderClass = Placeholder({
-      height: 'text',
-      width: 'auto',
-      state: isError ? 'error' : 'normal',
-    });
     return (
       <div className="flex items-center gap-1">
-        <div
-          className={Placeholder({
-            height: 'full',
-            width: 'full',
-            shape: 'round',
-            state: isError ? 'error' : 'normal',
-          })}
-        />
-        <div className={cx(redPlaceholderClass, 'w-160px')} />
+        <Placeholder height="full" width="full" shape="round" state={isError ? 'error' : 'normal'} />
+        <Placeholder height="text" state={isError ? 'error' : 'normal'} className="w-[160px]" />
       </div>
     );
   }
diff --git a/src/lib/components/panels/settings/CurrentUser.tsx b/src/lib/components/panels/settings/CurrentUser.tsx
index dafe4b4..fc5df87 100644
--- a/src/lib/components/panels/settings/CurrentUser.tsx
+++ b/src/lib/components/panels/settings/CurrentUser.tsx
@@ -1,4 +1,3 @@
-import {cx} from 'cva';
 import AvatarIcon from 'toolbar/components/avatar/AvatarIcon';
 import Placeholder from 'toolbar/components/base/Placeholder';
 import Media from 'toolbar/components/Media';
@@ -11,25 +10,11 @@ export default function CurrentUser() {
   });
 
   if (isPending || isError) {
-    const redPlaceholderClass = Placeholder({
-      height: 'text',
-      width: 'auto',
-      state: isError ? 'error' : 'normal',
-    });
     return (
       <Media
-        media={
-          <div
-            className={Placeholder({
-              height: 'full',
-              width: 'full',
-              shape: 'round',
-              state: isError ? 'error' : 'normal',
-            })}
-          />
-        }
-        title={<div className={cx(redPlaceholderClass, 'w-160px')} />}
-        description={<div className={cx(redPlaceholderClass, 'w-120px')} />}
+        media={<Placeholder height="full" width="full" shape="round" state={isError ? 'error' : 'normal'} />}
+        title={<Placeholder height="text" state={isError ? 'error' : 'normal'} className="w-[160px]" />}
+        description={<Placeholder height="text" state={isError ? 'error' : 'normal'} className="w-[120px]" />}
         size="lg"
       />
     );

From baeca325f2c9f9e23ceb7a26b70b8c4c00ec267f Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 11:25:30 -0800
Subject: [PATCH 07/15] tweak widths

---
 src/lib/components/panels/settings/CurrentOrg.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/panels/settings/CurrentOrg.tsx b/src/lib/components/panels/settings/CurrentOrg.tsx
index 78313c4..e4d6bd5 100644
--- a/src/lib/components/panels/settings/CurrentOrg.tsx
+++ b/src/lib/components/panels/settings/CurrentOrg.tsx
@@ -19,14 +19,13 @@ export default function CurrentOrg({size = 'md', link = true}: Props) {
   if (isPending || isError) {
     return (
       <div className="flex items-center gap-1">
-        <Placeholder height="full" width="full" shape="round" state={isError ? 'error' : 'normal'} />
+        <Placeholder shape="round" state={isError ? 'error' : 'normal'} className="size-3" />
         <Placeholder height="text" state={isError ? 'error' : 'normal'} className="w-[160px]" />
       </div>
     );
   }
 
   const org = data.json;
-
   return (
     <div className="flex items-center gap-1">
       <AvatarIcon name={org.name} avatarUrl={org.avatar.avatarUrl} type="org" tooltip={org.name} size={size} />

From e37ea38d92c11b4d92999cfc6f4a3fb2a3b7d624 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 11:37:54 -0800
Subject: [PATCH 08/15] add missing props

---
 src/lib/components/base/Placeholder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/base/Placeholder.tsx b/src/lib/components/base/Placeholder.tsx
index 69e1c20..ca8e495 100644
--- a/src/lib/components/base/Placeholder.tsx
+++ b/src/lib/components/base/Placeholder.tsx
@@ -39,5 +39,5 @@ export default function Placeholder({
   className,
   ...props
 }: VariantProps<typeof placeholderClass> & React.ComponentProps<'div'>) {
-  return <div className={twMerge(placeholderClass(), className)} {...props} />;
+  return <div className={twMerge(placeholderClass(props), className)} {...props} />;
 }

From fb13191fedfefaf59f646fb025770b1edbf96ebf Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 16:28:38 -0800
Subject: [PATCH 09/15] bring in useSyncedStorage from sentry

This will make it better when we have multiple callers of useNavigationExpansion() at different layers
---
 .../panels/settings/ConfigPanel.tsx           |  2 -
 src/lib/hooks/useStorage.ts                   | 95 ++++++++++++++++---
 2 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/panels/settings/ConfigPanel.tsx b/src/lib/components/panels/settings/ConfigPanel.tsx
index 946aefe..b151f8f 100644
--- a/src/lib/components/panels/settings/ConfigPanel.tsx
+++ b/src/lib/components/panels/settings/ConfigPanel.tsx
@@ -39,8 +39,6 @@ export default function ConfigPanel() {
             {label: 'Config'},
           ]}
         />
-
-        {}
       </h1>
 
       <ScrollableList>
diff --git a/src/lib/hooks/useStorage.ts b/src/lib/hooks/useStorage.ts
index 4ba7673..6abd94e 100644
--- a/src/lib/hooks/useStorage.ts
+++ b/src/lib/hooks/useStorage.ts
@@ -1,8 +1,9 @@
-import {useCallback} from 'react';
+import type {SetStateAction} from 'react';
+import {useCallback, useEffect} from 'react';
 import {useState} from 'react';
 import {localStorage, sessionStorage} from 'toolbar/utils/storage';
 
-function getStorageValue<Data>(storage: Storage, key: string, initialValue: Data) {
+function deserialize<Data>(storage: Storage, key: string, initialValue: Data) {
   try {
     const item = storage.getItem(key);
     return item ? JSON.parse(item) : initialValue;
@@ -12,31 +13,95 @@ function getStorageValue<Data>(storage: Storage, key: string, initialValue: Data
   }
 }
 
-export default function useStorage<Data>(
+function serialize<Data>(storage: Storage, key: string, value: Data) {
+  try {
+    storage.setItem(key, JSON.stringify(value));
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/**
+ * Serilizes and deserializes data to and from storage (session or local)
+ * Use this to persist data in the browser.
+ */
+function useSerializedStorage<Data>(
   storage: Storage,
   key: string,
-  initialValue: Data
+  initialValue: SetStateAction<Data>
 ): [Data, (value: Data) => void] {
-  const [storedValue, setStoredValue] = useState(() => getStorageValue(storage, key, initialValue));
+  // @ts-expect-error TS(2349): This expression is not callable.
+  const value = typeof initialValue === 'function' ? initialValue(undefined) : initialValue;
+  const [storedValue, setStoredValue] = useState(() => deserialize(storage, key, value));
 
   const setValue = useCallback(
     (value: Data) => {
-      try {
-        setStoredValue(value);
-        storage.setItem(key, JSON.stringify(value));
-      } catch (error) {
-        console.error(error);
-      }
+      setStoredValue(value);
+      serialize(storage, key, value);
     },
     [key, storage]
   );
   return [storedValue, setValue];
 }
 
-export function useLocalStorage<Data>(key: string, initialValue: Data): [Data, (value: Data) => void] {
-  return useStorage<Data>(localStorage, key, initialValue);
+type SyncedLocalStorageEvent<S> = CustomEvent<{key: string; value: S}>;
+
+const SYNCED_STORAGE_EVENT = 'synced-local-storage';
+
+function isCustomEvent(event: Event): event is CustomEvent {
+  return 'detail' in event;
+}
+
+function isSyncedLocalStorageEvent<S>(event: Event, key: string): event is SyncedLocalStorageEvent<S> {
+  return isCustomEvent(event) && event.type === SYNCED_STORAGE_EVENT && event.detail.key === key;
+}
+
+/**
+ * Notifies and reacts to state changes.
+ * Use this you want to access local storage state from multiple components
+ * on the same page.
+ */
+function useSyncedStorage<Data>(
+  localStorage: Storage,
+  key: string,
+  initialValue: SetStateAction<Data>
+): [Data, (value: Data) => void] {
+  const [value, setValue] = useSerializedStorage(localStorage, key, initialValue);
+
+  const setValueAndNotify = useCallback(
+    (newValue: Data) => {
+      setValue(newValue);
+
+      // We use a custom event to notify all consumers of this hook
+      window.dispatchEvent(new CustomEvent(SYNCED_STORAGE_EVENT, {detail: {key, value: newValue}}));
+    },
+    [key, setValue]
+  );
+
+  useEffect(() => {
+    const handleNewSyncedLocalStorageEvent = (event: Event) => {
+      if (isSyncedLocalStorageEvent<Data>(event, key)) {
+        setValue(event.detail.value);
+      }
+    };
+
+    window.addEventListener(SYNCED_STORAGE_EVENT, handleNewSyncedLocalStorageEvent);
+
+    return () => {
+      window.removeEventListener(SYNCED_STORAGE_EVENT, handleNewSyncedLocalStorageEvent);
+    };
+  }, [key, setValue, value]);
+
+  return [value, setValueAndNotify];
+}
+
+export function useLocalStorage<Data>(key: string, initialValue: SetStateAction<Data>): [Data, (value: Data) => void] {
+  return useSyncedStorage<Data>(localStorage, key, initialValue);
 }
 
-export function useSessionStorage<Data>(key: string, initialValue: Data): [Data, (value: Data) => void] {
-  return useStorage<Data>(sessionStorage, key, initialValue);
+export function useSessionStorage<Data>(
+  key: string,
+  initialValue: SetStateAction<Data>
+): [Data, (value: Data) => void] {
+  return useSyncedStorage<Data>(sessionStorage, key, initialValue);
 }

From e8eae5092a5efc4db149cd7a265cfcebe77ed4aa Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 16:49:59 -0800
Subject: [PATCH 10/15] golf down the sync storage code

---
 src/lib/hooks/useStorage.ts            | 72 +++++---------------------
 src/lib/hooks/useWindowKeyValueSync.ts | 36 +++++++++++++
 2 files changed, 49 insertions(+), 59 deletions(-)
 create mode 100644 src/lib/hooks/useWindowKeyValueSync.ts

diff --git a/src/lib/hooks/useStorage.ts b/src/lib/hooks/useStorage.ts
index 6abd94e..3dfe805 100644
--- a/src/lib/hooks/useStorage.ts
+++ b/src/lib/hooks/useStorage.ts
@@ -1,6 +1,7 @@
 import type {SetStateAction} from 'react';
-import {useCallback, useEffect} from 'react';
+import {useCallback} from 'react';
 import {useState} from 'react';
+import useWindowKeyValueSync from 'toolbar/hooks/useWindowKeyValueSync';
 import {localStorage, sessionStorage} from 'toolbar/utils/storage';
 
 function deserialize<Data>(storage: Storage, key: string, initialValue: Data) {
@@ -21,87 +22,40 @@ function serialize<Data>(storage: Storage, key: string, value: Data) {
   }
 }
 
-/**
- * Serilizes and deserializes data to and from storage (session or local)
- * Use this to persist data in the browser.
- */
-function useSerializedStorage<Data>(
-  storage: Storage,
-  key: string,
-  initialValue: SetStateAction<Data>
-): [Data, (value: Data) => void] {
-  // @ts-expect-error TS(2349): This expression is not callable.
-  const value = typeof initialValue === 'function' ? initialValue(undefined) : initialValue;
-  const [storedValue, setStoredValue] = useState(() => deserialize(storage, key, value));
-
-  const setValue = useCallback(
-    (value: Data) => {
-      setStoredValue(value);
-      serialize(storage, key, value);
-    },
-    [key, storage]
-  );
-  return [storedValue, setValue];
-}
-
-type SyncedLocalStorageEvent<S> = CustomEvent<{key: string; value: S}>;
-
-const SYNCED_STORAGE_EVENT = 'synced-local-storage';
-
-function isCustomEvent(event: Event): event is CustomEvent {
-  return 'detail' in event;
-}
-
-function isSyncedLocalStorageEvent<S>(event: Event, key: string): event is SyncedLocalStorageEvent<S> {
-  return isCustomEvent(event) && event.type === SYNCED_STORAGE_EVENT && event.detail.key === key;
-}
-
 /**
  * Notifies and reacts to state changes.
  * Use this you want to access local storage state from multiple components
  * on the same page.
  */
-function useSyncedStorage<Data>(
-  localStorage: Storage,
+function useStorage<Data>(
+  storage: Storage,
   key: string,
   initialValue: SetStateAction<Data>
 ): [Data, (value: Data) => void] {
-  const [value, setValue] = useSerializedStorage(localStorage, key, initialValue);
+  // @ts-expect-error TS(2349): This expression is not callable.
+  const init = typeof initialValue === 'function' ? initialValue(undefined) : initialValue;
+  const [value, setValue] = useState(() => deserialize(storage, key, init));
+  const {dispatch} = useWindowKeyValueSync({key, callback: setValue});
 
   const setValueAndNotify = useCallback(
     (newValue: Data) => {
       setValue(newValue);
-
-      // We use a custom event to notify all consumers of this hook
-      window.dispatchEvent(new CustomEvent(SYNCED_STORAGE_EVENT, {detail: {key, value: newValue}}));
+      serialize(storage, key, newValue);
+      dispatch(newValue);
     },
-    [key, setValue]
+    [key, dispatch, setValue, storage]
   );
 
-  useEffect(() => {
-    const handleNewSyncedLocalStorageEvent = (event: Event) => {
-      if (isSyncedLocalStorageEvent<Data>(event, key)) {
-        setValue(event.detail.value);
-      }
-    };
-
-    window.addEventListener(SYNCED_STORAGE_EVENT, handleNewSyncedLocalStorageEvent);
-
-    return () => {
-      window.removeEventListener(SYNCED_STORAGE_EVENT, handleNewSyncedLocalStorageEvent);
-    };
-  }, [key, setValue, value]);
-
   return [value, setValueAndNotify];
 }
 
 export function useLocalStorage<Data>(key: string, initialValue: SetStateAction<Data>): [Data, (value: Data) => void] {
-  return useSyncedStorage<Data>(localStorage, key, initialValue);
+  return useStorage<Data>(localStorage, key, initialValue);
 }
 
 export function useSessionStorage<Data>(
   key: string,
   initialValue: SetStateAction<Data>
 ): [Data, (value: Data) => void] {
-  return useSyncedStorage<Data>(sessionStorage, key, initialValue);
+  return useStorage<Data>(sessionStorage, key, initialValue);
 }
diff --git a/src/lib/hooks/useWindowKeyValueSync.ts b/src/lib/hooks/useWindowKeyValueSync.ts
new file mode 100644
index 0000000..50bd0e5
--- /dev/null
+++ b/src/lib/hooks/useWindowKeyValueSync.ts
@@ -0,0 +1,36 @@
+import {useCallback, useEffect} from 'react';
+
+type WindowKeyValueSyncEvent<S> = CustomEvent<{key: string; value: S}>;
+
+export default function useWindowKeyValueSync<Value>({key, callback}: {key: string; callback: (value: Value) => void}) {
+  const SYNCED_STORAGE_EVENT = 'synced-key-value';
+
+  function isCustomEvent(event: Event): event is CustomEvent {
+    return 'detail' in event;
+  }
+
+  function isSyncedEvent<S>(event: Event, key: string): event is WindowKeyValueSyncEvent<S> {
+    return isCustomEvent(event) && event.type === SYNCED_STORAGE_EVENT && event.detail.key === key;
+  }
+
+  useEffect(() => {
+    const handler = (event: Event) => {
+      if (isSyncedEvent<Value>(event, key)) {
+        callback(event.detail.value);
+      }
+    };
+    window.addEventListener(SYNCED_STORAGE_EVENT, handler);
+    return () => {
+      window.removeEventListener(SYNCED_STORAGE_EVENT, handler);
+    };
+  });
+
+  return {
+    dispatch: useCallback(
+      (value: Value) => {
+        window.dispatchEvent(new CustomEvent(SYNCED_STORAGE_EVENT, {detail: {key, value}}));
+      },
+      [key]
+    ),
+  };
+}

From 48ba1adaae112da6132c9b5bb54d0d4358b78ce8 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 16:57:56 -0800
Subject: [PATCH 11/15] hoist static function out of hook

---
 src/lib/hooks/useWindowKeyValueSync.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/hooks/useWindowKeyValueSync.ts b/src/lib/hooks/useWindowKeyValueSync.ts
index 50bd0e5..a83895a 100644
--- a/src/lib/hooks/useWindowKeyValueSync.ts
+++ b/src/lib/hooks/useWindowKeyValueSync.ts
@@ -2,17 +2,17 @@ import {useCallback, useEffect} from 'react';
 
 type WindowKeyValueSyncEvent<S> = CustomEvent<{key: string; value: S}>;
 
-export default function useWindowKeyValueSync<Value>({key, callback}: {key: string; callback: (value: Value) => void}) {
-  const SYNCED_STORAGE_EVENT = 'synced-key-value';
+const SYNCED_STORAGE_EVENT = 'synced-key-value';
 
-  function isCustomEvent(event: Event): event is CustomEvent {
-    return 'detail' in event;
-  }
+function isCustomEvent(event: Event): event is CustomEvent {
+  return 'detail' in event;
+}
 
-  function isSyncedEvent<S>(event: Event, key: string): event is WindowKeyValueSyncEvent<S> {
-    return isCustomEvent(event) && event.type === SYNCED_STORAGE_EVENT && event.detail.key === key;
-  }
+function isSyncedEvent<S>(event: Event, key: string): event is WindowKeyValueSyncEvent<S> {
+  return isCustomEvent(event) && event.type === SYNCED_STORAGE_EVENT && event.detail.key === key;
+}
 
+export default function useWindowKeyValueSync<Value>({key, callback}: {key: string; callback: (value: Value) => void}) {
   useEffect(() => {
     const handler = (event: Event) => {
       if (isSyncedEvent<Value>(event, key)) {

From 1cdb3985b5b67445b7de6778af0f6e681ee14679 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 17:02:33 -0800
Subject: [PATCH 12/15] iterate on types

---
 src/lib/hooks/useStorage.ts            | 12 ++++++------
 src/lib/hooks/useWindowKeyValueSync.ts | 23 ++++++++++++++---------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/lib/hooks/useStorage.ts b/src/lib/hooks/useStorage.ts
index 3dfe805..44a0b49 100644
--- a/src/lib/hooks/useStorage.ts
+++ b/src/lib/hooks/useStorage.ts
@@ -4,10 +4,10 @@ import {useState} from 'react';
 import useWindowKeyValueSync from 'toolbar/hooks/useWindowKeyValueSync';
 import {localStorage, sessionStorage} from 'toolbar/utils/storage';
 
-function deserialize<Data>(storage: Storage, key: string, initialValue: Data) {
+function deserialize<Data>(storage: Storage, key: string, initialValue: Data): Data {
   try {
     const item = storage.getItem(key);
-    return item ? JSON.parse(item) : initialValue;
+    return item ? (JSON.parse(item) as Data) : initialValue;
   } catch (error) {
     console.error(error);
     return initialValue;
@@ -33,9 +33,9 @@ function useStorage<Data>(
   initialValue: SetStateAction<Data>
 ): [Data, (value: Data) => void] {
   // @ts-expect-error TS(2349): This expression is not callable.
-  const init = typeof initialValue === 'function' ? initialValue(undefined) : initialValue;
+  const init = typeof initialValue === 'function' ? (initialValue(undefined) as Data) : initialValue;
   const [value, setValue] = useState(() => deserialize(storage, key, init));
-  const {dispatch} = useWindowKeyValueSync({key, callback: setValue});
+  const dispatch = useWindowKeyValueSync({key, callback: setValue});
 
   const setValueAndNotify = useCallback(
     (newValue: Data) => {
@@ -50,12 +50,12 @@ function useStorage<Data>(
 }
 
 export function useLocalStorage<Data>(key: string, initialValue: SetStateAction<Data>): [Data, (value: Data) => void] {
-  return useStorage<Data>(localStorage, key, initialValue);
+  return useStorage(localStorage, key, initialValue);
 }
 
 export function useSessionStorage<Data>(
   key: string,
   initialValue: SetStateAction<Data>
 ): [Data, (value: Data) => void] {
-  return useStorage<Data>(sessionStorage, key, initialValue);
+  return useStorage(sessionStorage, key, initialValue);
 }
diff --git a/src/lib/hooks/useWindowKeyValueSync.ts b/src/lib/hooks/useWindowKeyValueSync.ts
index a83895a..37f10ca 100644
--- a/src/lib/hooks/useWindowKeyValueSync.ts
+++ b/src/lib/hooks/useWindowKeyValueSync.ts
@@ -12,7 +12,14 @@ function isSyncedEvent<S>(event: Event, key: string): event is WindowKeyValueSyn
   return isCustomEvent(event) && event.type === SYNCED_STORAGE_EVENT && event.detail.key === key;
 }
 
-export default function useWindowKeyValueSync<Value>({key, callback}: {key: string; callback: (value: Value) => void}) {
+interface Props<Value> {
+  key: string;
+  callback: (value: Value) => void;
+}
+
+type Dispatch<Value> = (value: Value) => void;
+
+export default function useWindowKeyValueSync<Value>({key, callback}: Props<Value>): Dispatch<Value> {
   useEffect(() => {
     const handler = (event: Event) => {
       if (isSyncedEvent<Value>(event, key)) {
@@ -25,12 +32,10 @@ export default function useWindowKeyValueSync<Value>({key, callback}: {key: stri
     };
   });
 
-  return {
-    dispatch: useCallback(
-      (value: Value) => {
-        window.dispatchEvent(new CustomEvent(SYNCED_STORAGE_EVENT, {detail: {key, value}}));
-      },
-      [key]
-    ),
-  };
+  return useCallback(
+    (value: Value) => {
+      window.dispatchEvent(new CustomEvent(SYNCED_STORAGE_EVENT, {detail: {key, value}}));
+    },
+    [key]
+  );
 }

From bc17e863fda20deae0077ca1766e3b41fddbe9df Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 17:04:23 -0800
Subject: [PATCH 13/15] use simpler props when calling <NavButton>

---
 .../components/panels/nav/NavigationPanel.tsx   | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/lib/components/panels/nav/NavigationPanel.tsx b/src/lib/components/panels/nav/NavigationPanel.tsx
index 3e9b2af..3f5493a 100644
--- a/src/lib/components/panels/nav/NavigationPanel.tsx
+++ b/src/lib/components/panels/nav/NavigationPanel.tsx
@@ -1,8 +1,5 @@
 import {Transition} from '@headlessui/react';
 import {cva, cx} from 'cva';
-import type {MouseEvent} from 'react';
-import {useLocation, useNavigate} from 'react-router-dom';
-import type {To} from 'react-router-dom';
 import Indicator from 'toolbar/components/base/Indicator';
 import IconFlag from 'toolbar/components/icon/IconFlag';
 import IconIssues from 'toolbar/components/icon/IconIssues';
@@ -31,22 +28,10 @@ export default function NavigationPanel() {
   const [mousePosition] = useMousePositionContext();
   const isMoving = Boolean(mousePosition);
   const {isExpanded, setIsHovered} = useNavigationExpansion();
-  const {pathname} = useLocation();
-  const navigate = useNavigate();
 
   const proxyState = useApiProxyState();
   const {overrides} = useFeatureFlagAdapterContext();
 
-  const toPathOrHome = (to: To) => ({
-    to,
-    onClick: (e: MouseEvent) => {
-      if (pathname === to) {
-        e.preventDefault();
-        navigate('/');
-      }
-    },
-  });
-
   const [major] = parsePlacement(placement);
   const isHorizontal = ['top', 'bottom'].includes(major);
 
@@ -55,7 +40,7 @@ export default function NavigationPanel() {
       className={cx(navClassName({isHorizontal}), 'p-1')}
       onMouseOver={() => setIsHovered(true)}
       onMouseOut={() => setIsHovered(false)}>
-      <NavButton {...toPathOrHome('/settings')} tooltip="More options">
+      <NavButton to="/settings" tooltip="More options">
         <IconSentry size="sm" />
       </NavButton>
 

From b524090da3308b611389757a93ff8813b877d18e Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 21:30:22 -0800
Subject: [PATCH 14/15] missing useEffect dep

---
 src/lib/hooks/useWindowKeyValueSync.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/hooks/useWindowKeyValueSync.ts b/src/lib/hooks/useWindowKeyValueSync.ts
index 37f10ca..4c0723a 100644
--- a/src/lib/hooks/useWindowKeyValueSync.ts
+++ b/src/lib/hooks/useWindowKeyValueSync.ts
@@ -30,7 +30,7 @@ export default function useWindowKeyValueSync<Value>({key, callback}: Props<Valu
     return () => {
       window.removeEventListener(SYNCED_STORAGE_EVENT, handler);
     };
-  });
+  }, [callback, key]);
 
   return useCallback(
     (value: Value) => {

From 00d4b85438c3446be5c58770a87208c3bc9f7e1b Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 2 Jan 2026 21:59:10 -0800
Subject: [PATCH 15/15] generate some tests

---
 .../panels/nav/useNavigationExpansion.spec.ts | 226 +++++++++++++++++
 src/lib/hooks/useClicksOutside.spec.ts        | 224 +++++++++++++++++
 src/lib/hooks/useSentryClientAndScope.spec.ts | 238 ++++++++++++++++++
 src/lib/hooks/useStorage.spec.ts              | 192 ++++++++++++++
 src/lib/hooks/useWindowKeyValueSync.spec.ts   | 146 +++++++++++
 5 files changed, 1026 insertions(+)
 create mode 100644 src/lib/components/panels/nav/useNavigationExpansion.spec.ts
 create mode 100644 src/lib/hooks/useClicksOutside.spec.ts
 create mode 100644 src/lib/hooks/useSentryClientAndScope.spec.ts
 create mode 100644 src/lib/hooks/useStorage.spec.ts
 create mode 100644 src/lib/hooks/useWindowKeyValueSync.spec.ts

diff --git a/src/lib/components/panels/nav/useNavigationExpansion.spec.ts b/src/lib/components/panels/nav/useNavigationExpansion.spec.ts
new file mode 100644
index 0000000..23ef6a5
--- /dev/null
+++ b/src/lib/components/panels/nav/useNavigationExpansion.spec.ts
@@ -0,0 +1,226 @@
+import {renderHook, act} from '@testing-library/react';
+import useNavigationExpansion from 'toolbar/components/panels/nav/useNavigationExpansion';
+import {localStorage} from 'toolbar/utils/storage';
+
+const STORAGE_KEY = 'useNavigationExpansion_isPinned';
+
+const mockUseLocation = jest.fn();
+jest.mock('react-router-dom', () => ({
+  useLocation: () => mockUseLocation(),
+}));
+
+describe('useNavigationExpansion', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    localStorage.removeItem(STORAGE_KEY);
+    mockUseLocation.mockReturnValue({pathname: '/'});
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.clearAllMocks();
+  });
+
+  describe('isExpanded', () => {
+    it('returns false when on root path and not pinned, hovered, or delayed open', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      expect(result.current.isExpanded).toBe(false);
+    });
+
+    it('returns true when pathname is not root', () => {
+      mockUseLocation.mockReturnValue({pathname: '/issues'});
+
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      expect(result.current.isExpanded).toBe(true);
+    });
+
+    it('returns true when isPinned is true', () => {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(true));
+
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      expect(result.current.isExpanded).toBe(true);
+    });
+
+    it('returns true when isHovered is true', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      act(() => {
+        result.current.setIsHovered(true);
+      });
+
+      expect(result.current.isExpanded).toBe(true);
+    });
+
+    it('returns true when isDelayedOpen is true (after hover ends)', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      // Hover then unhover sets isDelayedOpen to true
+      act(() => {
+        result.current.setIsHovered(true);
+      });
+      act(() => {
+        result.current.setIsHovered(false);
+      });
+
+      expect(result.current.isExpanded).toBe(true);
+    });
+  });
+
+  describe('isPinned', () => {
+    it('defaults to false', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      expect(result.current.isPinned).toBe(false);
+    });
+
+    it('reads initial value from localStorage', () => {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(true));
+
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      expect(result.current.isPinned).toBe(true);
+    });
+
+    it('persists value to localStorage when set', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      act(() => {
+        result.current.setIsPinned(true);
+      });
+
+      expect(result.current.isPinned).toBe(true);
+      expect(JSON.parse(localStorage.getItem(STORAGE_KEY) ?? 'null')).toBe(true);
+    });
+  });
+
+  describe('setIsHovered', () => {
+    it('sets isExpanded to true when hovered', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      expect(result.current.isExpanded).toBe(false);
+
+      act(() => {
+        result.current.setIsHovered(true);
+      });
+
+      expect(result.current.isExpanded).toBe(true);
+    });
+
+    it('sets isDelayedOpen to true when unhovered', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      act(() => {
+        result.current.setIsHovered(true);
+      });
+      act(() => {
+        result.current.setIsHovered(false);
+      });
+
+      // isExpanded should still be true because of isDelayedOpen
+      expect(result.current.isExpanded).toBe(true);
+    });
+  });
+
+  describe('delayed close behavior', () => {
+    it('closes after 2 seconds when not pinned and not hovered', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      // Hover then unhover to trigger delayed close
+      act(() => {
+        result.current.setIsHovered(true);
+      });
+      act(() => {
+        result.current.setIsHovered(false);
+      });
+
+      expect(result.current.isExpanded).toBe(true);
+
+      // Advance time by 2 seconds
+      act(() => {
+        jest.advanceTimersByTime(2000);
+      });
+
+      expect(result.current.isExpanded).toBe(false);
+    });
+
+    it('does not close if hovered again before timeout', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      // Hover then unhover
+      act(() => {
+        result.current.setIsHovered(true);
+      });
+      act(() => {
+        result.current.setIsHovered(false);
+      });
+
+      // Advance partway through timeout
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+
+      // Hover again
+      act(() => {
+        result.current.setIsHovered(true);
+      });
+
+      // Advance past original timeout
+      act(() => {
+        jest.advanceTimersByTime(2000);
+      });
+
+      // Should still be expanded because we're hovering
+      expect(result.current.isExpanded).toBe(true);
+    });
+
+    it('does not close if pinned', () => {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(true));
+
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      // Hover then unhover
+      act(() => {
+        result.current.setIsHovered(true);
+      });
+      act(() => {
+        result.current.setIsHovered(false);
+      });
+
+      // Advance past timeout
+      act(() => {
+        jest.advanceTimersByTime(3000);
+      });
+
+      // Should still be expanded because isPinned
+      expect(result.current.isExpanded).toBe(true);
+    });
+
+    it('clears timeout when pinned while waiting to close', () => {
+      const {result} = renderHook(() => useNavigationExpansion());
+
+      // Hover then unhover to start timeout
+      act(() => {
+        result.current.setIsHovered(true);
+      });
+      act(() => {
+        result.current.setIsHovered(false);
+      });
+
+      // Pin before timeout
+      act(() => {
+        result.current.setIsPinned(true);
+      });
+
+      // Advance past timeout
+      act(() => {
+        jest.advanceTimersByTime(3000);
+      });
+
+      // Should still be expanded
+      expect(result.current.isExpanded).toBe(true);
+    });
+  });
+});
diff --git a/src/lib/hooks/useClicksOutside.spec.ts b/src/lib/hooks/useClicksOutside.spec.ts
new file mode 100644
index 0000000..02fb4e4
--- /dev/null
+++ b/src/lib/hooks/useClicksOutside.spec.ts
@@ -0,0 +1,224 @@
+import {renderHook} from '@testing-library/react';
+import useClicksOutside from 'toolbar/hooks/useClicksOutside';
+
+describe('useClicksOutside', () => {
+  let container: HTMLDivElement;
+  let outsideElement: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    container.setAttribute('data-testid', 'container');
+    document.body.appendChild(container);
+
+    outsideElement = document.createElement('div');
+    outsideElement.setAttribute('data-testid', 'outside');
+    document.body.appendChild(outsideElement);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(outsideElement);
+  });
+
+  it('calls onClickInside when clicking on the node itself', () => {
+    const onClickInside = jest.fn();
+    const onClickOutside = jest.fn();
+
+    renderHook(() =>
+      useClicksOutside({
+        node: container,
+        onClickInside,
+        onClickOutside,
+      })
+    );
+
+    container.click();
+
+    expect(onClickInside).toHaveBeenCalledTimes(1);
+    expect(onClickOutside).not.toHaveBeenCalled();
+  });
+
+  it('calls onClickInside when clicking on a child of the node', () => {
+    const child = document.createElement('button');
+    container.appendChild(child);
+
+    const onClickInside = jest.fn();
+    const onClickOutside = jest.fn();
+
+    renderHook(() =>
+      useClicksOutside({
+        node: container,
+        onClickInside,
+        onClickOutside,
+      })
+    );
+
+    child.click();
+
+    expect(onClickInside).toHaveBeenCalledTimes(1);
+    expect(onClickOutside).not.toHaveBeenCalled();
+  });
+
+  it('calls onClickOutside when clicking outside the node', () => {
+    const onClickInside = jest.fn();
+    const onClickOutside = jest.fn();
+
+    renderHook(() =>
+      useClicksOutside({
+        node: container,
+        onClickInside,
+        onClickOutside,
+      })
+    );
+
+    outsideElement.click();
+
+    expect(onClickOutside).toHaveBeenCalledTimes(1);
+    expect(onClickInside).not.toHaveBeenCalled();
+  });
+
+  it('calls onClickOutside when clicking on document body', () => {
+    const onClickInside = jest.fn();
+    const onClickOutside = jest.fn();
+
+    renderHook(() =>
+      useClicksOutside({
+        node: container,
+        onClickInside,
+        onClickOutside,
+      })
+    );
+
+    document.body.click();
+
+    expect(onClickOutside).toHaveBeenCalledTimes(1);
+    expect(onClickInside).not.toHaveBeenCalled();
+  });
+
+  it('removes event listener on unmount', () => {
+    const onClickInside = jest.fn();
+    const onClickOutside = jest.fn();
+
+    const {unmount} = renderHook(() =>
+      useClicksOutside({
+        node: container,
+        onClickInside,
+        onClickOutside,
+      })
+    );
+
+    unmount();
+
+    container.click();
+    outsideElement.click();
+
+    expect(onClickInside).not.toHaveBeenCalled();
+    expect(onClickOutside).not.toHaveBeenCalled();
+  });
+
+  it('handles multiple clicks correctly', () => {
+    const onClickInside = jest.fn();
+    const onClickOutside = jest.fn();
+
+    renderHook(() =>
+      useClicksOutside({
+        node: container,
+        onClickInside,
+        onClickOutside,
+      })
+    );
+
+    container.click();
+    outsideElement.click();
+    container.click();
+    outsideElement.click();
+    outsideElement.click();
+
+    expect(onClickInside).toHaveBeenCalledTimes(2);
+    expect(onClickOutside).toHaveBeenCalledTimes(3);
+  });
+
+  it('updates callbacks when props change', () => {
+    const onClickInside1 = jest.fn();
+    const onClickOutside1 = jest.fn();
+    const onClickInside2 = jest.fn();
+    const onClickOutside2 = jest.fn();
+
+    const {rerender} = renderHook(
+      ({onClickInside, onClickOutside}) =>
+        useClicksOutside({
+          node: container,
+          onClickInside,
+          onClickOutside,
+        }),
+      {
+        initialProps: {
+          onClickInside: onClickInside1,
+          onClickOutside: onClickOutside1,
+        },
+      }
+    );
+
+    container.click();
+    expect(onClickInside1).toHaveBeenCalledTimes(1);
+
+    rerender({
+      onClickInside: onClickInside2,
+      onClickOutside: onClickOutside2,
+    });
+
+    container.click();
+    expect(onClickInside1).toHaveBeenCalledTimes(1);
+    expect(onClickInside2).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles deeply nested child clicks as inside', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('div');
+    const grandchild = document.createElement('span');
+
+    container.appendChild(parent);
+    parent.appendChild(child);
+    child.appendChild(grandchild);
+
+    const onClickInside = jest.fn();
+    const onClickOutside = jest.fn();
+
+    renderHook(() =>
+      useClicksOutside({
+        node: container,
+        onClickInside,
+        onClickOutside,
+      })
+    );
+
+    grandchild.click();
+
+    expect(onClickInside).toHaveBeenCalledTimes(1);
+    expect(onClickOutside).not.toHaveBeenCalled();
+  });
+
+  it('works with different node types', () => {
+    const button = document.createElement('button');
+    document.body.appendChild(button);
+
+    const onClickInside = jest.fn();
+    const onClickOutside = jest.fn();
+
+    renderHook(() =>
+      useClicksOutside({
+        node: button,
+        onClickInside,
+        onClickOutside,
+      })
+    );
+
+    button.click();
+    expect(onClickInside).toHaveBeenCalledTimes(1);
+
+    container.click();
+    expect(onClickOutside).toHaveBeenCalledTimes(1);
+
+    document.body.removeChild(button);
+  });
+});
diff --git a/src/lib/hooks/useSentryClientAndScope.spec.ts b/src/lib/hooks/useSentryClientAndScope.spec.ts
new file mode 100644
index 0000000..6198aff
--- /dev/null
+++ b/src/lib/hooks/useSentryClientAndScope.spec.ts
@@ -0,0 +1,238 @@
+import {renderHook} from '@testing-library/react';
+import useSentryClientAndScope from 'toolbar/hooks/useSentryClientAndScope';
+
+describe('useSentryClientAndScope', () => {
+  const originalSentry = (window as unknown as {__SENTRY__?: unknown}).__SENTRY__;
+
+  afterEach(() => {
+    if (originalSentry !== undefined) {
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = originalSentry;
+    } else {
+      delete (window as unknown as {__SENTRY__?: unknown}).__SENTRY__;
+    }
+  });
+
+  describe('when window.__SENTRY__ is not defined', () => {
+    it('returns undefined for both scope and client', () => {
+      delete (window as unknown as {__SENTRY__?: unknown}).__SENTRY__;
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBeUndefined();
+      expect(result.current.client).toBeUndefined();
+    });
+  });
+
+  describe('v8.6.0+ carrier structure', () => {
+    it('returns scope from versioned carrier', () => {
+      const mockScope = {id: 'mock-scope'};
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        version: '8.6.0',
+        '8.6.0': {
+          stack: {
+            getScope: () => mockScope,
+          },
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBe(mockScope);
+    });
+
+    it('returns client from versioned carrier scope', () => {
+      const mockClient = {id: 'mock-client'};
+      const mockScope = {
+        id: 'mock-scope',
+        getClient: () => mockClient,
+      };
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        version: '8.6.0',
+        '8.6.0': {
+          stack: {
+            getScope: () => mockScope,
+          },
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.client).toBe(mockClient);
+    });
+
+    it('returns undefined client when scope has no getClient method', () => {
+      const mockScope = {id: 'mock-scope'};
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        version: '8.6.0',
+        '8.6.0': {
+          stack: {
+            getScope: () => mockScope,
+          },
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBe(mockScope);
+      expect(result.current.client).toBeUndefined();
+    });
+
+    it('handles missing getScope function in versioned carrier', () => {
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        version: '8.6.0',
+        '8.6.0': {
+          stack: {},
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBeUndefined();
+      expect(result.current.client).toBeUndefined();
+    });
+
+    it('handles missing stack in versioned carrier', () => {
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        version: '8.6.0',
+        '8.6.0': {},
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBeUndefined();
+      expect(result.current.client).toBeUndefined();
+    });
+
+    it('handles missing versioned carrier object', () => {
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        version: '8.6.0',
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBeUndefined();
+      expect(result.current.client).toBeUndefined();
+    });
+
+    it('works with different version strings', () => {
+      const mockScope = {id: 'mock-scope'};
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        version: '8.10.0',
+        '8.10.0': {
+          stack: {
+            getScope: () => mockScope,
+          },
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBe(mockScope);
+    });
+  });
+
+  describe('pre-8.6.0 (v7) carrier structure', () => {
+    it('returns scope from hub', () => {
+      const mockScope = {id: 'mock-scope'};
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        hub: {
+          getScope: () => mockScope,
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBe(mockScope);
+    });
+
+    it('returns client from hub', () => {
+      const mockClient = {id: 'mock-client'};
+      const mockScope = {id: 'mock-scope'};
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        hub: {
+          getScope: () => mockScope,
+          getClient: () => mockClient,
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.client).toBe(mockClient);
+    });
+
+    it('handles hub with missing getScope', () => {
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        hub: {},
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBeUndefined();
+    });
+
+    it('handles hub with missing getClient', () => {
+      const mockScope = {id: 'mock-scope'};
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        hub: {
+          getScope: () => mockScope,
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBe(mockScope);
+      expect(result.current.client).toBeUndefined();
+    });
+  });
+
+  describe('priority between v8 and legacy carrier', () => {
+    it('prefers v8 carrier when both are present', () => {
+      const v8Scope = {id: 'v8-scope'};
+      const legacyScope = {id: 'legacy-scope'};
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        version: '8.6.0',
+        '8.6.0': {
+          stack: {
+            getScope: () => v8Scope,
+          },
+        },
+        hub: {
+          getScope: () => legacyScope,
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBe(v8Scope);
+    });
+
+    it('falls back to legacy when v8 version exists but versioned carrier is empty', () => {
+      const legacyScope = {id: 'legacy-scope'};
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {
+        version: '8.6.0',
+        '8.6.0': {
+          stack: {},
+        },
+        hub: {
+          getScope: () => legacyScope,
+        },
+      };
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      // v8 path returns undefined, but doesn't fall back to legacy
+      expect(result.current.scope).toBeUndefined();
+    });
+  });
+
+  describe('empty carrier object', () => {
+    it('returns undefined for both when carrier is empty object', () => {
+      (window as unknown as {__SENTRY__: unknown}).__SENTRY__ = {};
+
+      const {result} = renderHook(() => useSentryClientAndScope());
+
+      expect(result.current.scope).toBeUndefined();
+      expect(result.current.client).toBeUndefined();
+    });
+  });
+});
diff --git a/src/lib/hooks/useStorage.spec.ts b/src/lib/hooks/useStorage.spec.ts
new file mode 100644
index 0000000..024a8fa
--- /dev/null
+++ b/src/lib/hooks/useStorage.spec.ts
@@ -0,0 +1,192 @@
+import {renderHook, act} from '@testing-library/react';
+import {useLocalStorage, useSessionStorage} from 'toolbar/hooks/useStorage';
+import {localStorage, sessionStorage} from 'toolbar/utils/storage';
+
+describe('useLocalStorage', () => {
+  beforeEach(() => {
+    localStorage.removeItem('test-key');
+  });
+
+  it('returns initial value when storage is empty', () => {
+    const {result} = renderHook(() => useLocalStorage('test-key', 'initial'));
+
+    expect(result.current[0]).toBe('initial');
+  });
+
+  it('returns stored value when storage has data', () => {
+    localStorage.setItem('test-key', JSON.stringify('stored-value'));
+
+    const {result} = renderHook(() => useLocalStorage('test-key', 'initial'));
+
+    expect(result.current[0]).toBe('stored-value');
+  });
+
+  it('supports initial value as a function', () => {
+    const initializer = jest.fn(() => 'computed-initial');
+
+    const {result} = renderHook(() => useLocalStorage('test-key', initializer));
+
+    expect(result.current[0]).toBe('computed-initial');
+    expect(initializer).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates state and persists to storage', () => {
+    const {result} = renderHook(() => useLocalStorage('test-key', 'initial'));
+
+    act(() => {
+      result.current[1]('new-value');
+    });
+
+    expect(result.current[0]).toBe('new-value');
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toBe('new-value');
+  });
+
+  it('handles complex object values', () => {
+    const initialValue = {name: 'test', count: 0};
+    const {result} = renderHook(() => useLocalStorage('test-key', initialValue));
+
+    const newValue = {name: 'updated', count: 42};
+    act(() => {
+      result.current[1](newValue);
+    });
+
+    expect(result.current[0]).toEqual(newValue);
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toEqual(newValue);
+  });
+
+  it('handles array values', () => {
+    const {result} = renderHook(() => useLocalStorage<string[]>('test-key', []));
+
+    act(() => {
+      result.current[1](['a', 'b', 'c']);
+    });
+
+    expect(result.current[0]).toEqual(['a', 'b', 'c']);
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toEqual(['a', 'b', 'c']);
+  });
+
+  it('returns initial value when storage contains invalid JSON', () => {
+    localStorage.setItem('test-key', 'not-valid-json');
+
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const {result} = renderHook(() => useLocalStorage('test-key', 'fallback'));
+
+    expect(result.current[0]).toBe('fallback');
+    expect(consoleError).toHaveBeenCalled();
+
+    consoleError.mockRestore();
+  });
+
+  it('syncs value across multiple hook instances via window events', () => {
+    const {result: result1} = renderHook(() => useLocalStorage('test-key', 'initial'));
+    const {result: result2} = renderHook(() => useLocalStorage('test-key', 'initial'));
+
+    act(() => {
+      result1.current[1]('synced-value');
+    });
+
+    expect(result1.current[0]).toBe('synced-value');
+    expect(result2.current[0]).toBe('synced-value');
+  });
+
+  it('does not sync values between different keys', () => {
+    const {result: resultA} = renderHook(() => useLocalStorage('key-a', 'initial-a'));
+    const {result: resultB} = renderHook(() => useLocalStorage('key-b', 'initial-b'));
+
+    act(() => {
+      resultA.current[1]('new-a');
+    });
+
+    expect(resultA.current[0]).toBe('new-a');
+    expect(resultB.current[0]).toBe('initial-b');
+  });
+
+  it('returns stable setter function', () => {
+    const {result, rerender} = renderHook(() => useLocalStorage('test-key', 'initial'));
+
+    const firstSetter = result.current[1];
+    rerender();
+    const secondSetter = result.current[1];
+
+    expect(firstSetter).toBe(secondSetter);
+  });
+
+  it('handles boolean values', () => {
+    const {result} = renderHook(() => useLocalStorage('test-key', false));
+
+    expect(result.current[0]).toBe(false);
+
+    act(() => {
+      result.current[1](true);
+    });
+
+    expect(result.current[0]).toBe(true);
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toBe(true);
+  });
+
+  it('handles null values', () => {
+    const {result} = renderHook(() => useLocalStorage<string | null>('test-key', 'initial'));
+
+    act(() => {
+      result.current[1](null);
+    });
+
+    expect(result.current[0]).toBe(null);
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toBe(null);
+  });
+
+  it('handles numeric values', () => {
+    const {result} = renderHook(() => useLocalStorage('test-key', 0));
+
+    act(() => {
+      result.current[1](42);
+    });
+
+    expect(result.current[0]).toBe(42);
+    expect(JSON.parse(localStorage.getItem('test-key')!)).toBe(42);
+  });
+});
+
+describe('useSessionStorage', () => {
+  beforeEach(() => {
+    sessionStorage.removeItem('test-key');
+  });
+
+  it('returns initial value when storage is empty', () => {
+    const {result} = renderHook(() => useSessionStorage('test-key', 'initial'));
+
+    expect(result.current[0]).toBe('initial');
+  });
+
+  it('returns stored value when storage has data', () => {
+    sessionStorage.setItem('test-key', JSON.stringify('stored-value'));
+
+    const {result} = renderHook(() => useSessionStorage('test-key', 'initial'));
+
+    expect(result.current[0]).toBe('stored-value');
+  });
+
+  it('updates state and persists to storage', () => {
+    const {result} = renderHook(() => useSessionStorage('test-key', 'initial'));
+
+    act(() => {
+      result.current[1]('new-value');
+    });
+
+    expect(result.current[0]).toBe('new-value');
+    expect(JSON.parse(sessionStorage.getItem('test-key')!)).toBe('new-value');
+  });
+
+  it('syncs value across multiple hook instances via window events', () => {
+    const {result: result1} = renderHook(() => useSessionStorage('test-key', 'initial'));
+    const {result: result2} = renderHook(() => useSessionStorage('test-key', 'initial'));
+
+    act(() => {
+      result1.current[1]('synced-value');
+    });
+
+    expect(result1.current[0]).toBe('synced-value');
+    expect(result2.current[0]).toBe('synced-value');
+  });
+});
diff --git a/src/lib/hooks/useWindowKeyValueSync.spec.ts b/src/lib/hooks/useWindowKeyValueSync.spec.ts
new file mode 100644
index 0000000..1d6bab7
--- /dev/null
+++ b/src/lib/hooks/useWindowKeyValueSync.spec.ts
@@ -0,0 +1,146 @@
+import {renderHook, act} from '@testing-library/react';
+import useWindowKeyValueSync from 'toolbar/hooks/useWindowKeyValueSync';
+
+describe('useWindowKeyValueSync', () => {
+  it('calls callback when an event with matching key is dispatched', () => {
+    const callback = jest.fn();
+    const {result} = renderHook(() => useWindowKeyValueSync({key: 'test-key', callback}));
+
+    act(() => {
+      result.current('test-value');
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith('test-value');
+  });
+
+  it('does not call callback when an event with a different key is dispatched', () => {
+    const callback = jest.fn();
+    renderHook(() => useWindowKeyValueSync({key: 'my-key', callback}));
+
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent('synced-key-value', {
+          detail: {key: 'other-key', value: 'some-value'},
+        })
+      );
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('does not call callback for unrelated events', () => {
+    const callback = jest.fn();
+    renderHook(() => useWindowKeyValueSync({key: 'my-key', callback}));
+
+    act(() => {
+      window.dispatchEvent(new CustomEvent('unrelated-event', {detail: {}}));
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('handles complex object values', () => {
+    const callback = jest.fn();
+    const {result} = renderHook(() =>
+      useWindowKeyValueSync<{name: string; count: number}>({
+        key: 'object-key',
+        callback,
+      })
+    );
+
+    const complexValue = {name: 'test', count: 42};
+    act(() => {
+      result.current(complexValue);
+    });
+
+    expect(callback).toHaveBeenCalledWith(complexValue);
+  });
+
+  it('allows multiple hooks with different keys to work independently', () => {
+    const callbackA = jest.fn();
+    const callbackB = jest.fn();
+
+    const {result: resultA} = renderHook(() => useWindowKeyValueSync({key: 'key-a', callback: callbackA}));
+    renderHook(() => useWindowKeyValueSync({key: 'key-b', callback: callbackB}));
+
+    act(() => {
+      resultA.current('value-for-a');
+    });
+
+    expect(callbackA).toHaveBeenCalledWith('value-for-a');
+    expect(callbackB).not.toHaveBeenCalled();
+  });
+
+  it('cleans up event listener on unmount', () => {
+    const callback = jest.fn();
+    const {unmount} = renderHook(() => useWindowKeyValueSync({key: 'cleanup-key', callback}));
+
+    unmount();
+
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent('synced-key-value', {
+          detail: {key: 'cleanup-key', value: 'after-unmount'},
+        })
+      );
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('returns a stable dispatch function when key does not change', () => {
+    const callback = jest.fn();
+    const {result, rerender} = renderHook(() => useWindowKeyValueSync({key: 'stable-key', callback}));
+
+    const firstDispatch = result.current;
+    rerender();
+    const secondDispatch = result.current;
+
+    expect(firstDispatch).toBe(secondDispatch);
+  });
+
+  it('updates event listener when callback changes', () => {
+    const callbackA = jest.fn();
+    const callbackB = jest.fn();
+
+    const {result, rerender} = renderHook(({callback}) => useWindowKeyValueSync({key: 'update-key', callback}), {
+      initialProps: {callback: callbackA},
+    });
+
+    rerender({callback: callbackB});
+
+    act(() => {
+      result.current('new-value');
+    });
+
+    expect(callbackA).not.toHaveBeenCalled();
+    expect(callbackB).toHaveBeenCalledWith('new-value');
+  });
+
+  it('updates event listener when key changes', () => {
+    const callback = jest.fn();
+
+    const {result, rerender} = renderHook(({key}) => useWindowKeyValueSync({key, callback}), {
+      initialProps: {key: 'old-key'},
+    });
+
+    rerender({key: 'new-key'});
+
+    // Dispatch to old key should not trigger callback
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent('synced-key-value', {
+          detail: {key: 'old-key', value: 'old-value'},
+        })
+      );
+    });
+    expect(callback).not.toHaveBeenCalled();
+
+    // Dispatch to new key should trigger callback
+    act(() => {
+      result.current('new-value');
+    });
+    expect(callback).toHaveBeenCalledWith('new-value');
+  });
+});