@sentry/junior-dashboard 0.271.0 → 0.273.0

package/src/client/components/JuniorLogo.tsx

@@ -4,7 +4,7 @@ export function JuniorLogo() {
     <div className="relative grid size-10 shrink-0 select-none place-items-center overflow-visible">
       <img
         alt=""
-        className="relative size-11 max-w-none -translate-y-0.5 object-contain opacity-90 drop-shadow-[0_0_7px_rgba(255,255,255,0.16)]"
+        className="relative -m-0.5 size-11 max-w-none object-contain opacity-90 drop-shadow-[0_0_7px_rgba(255,255,255,0.16)]"
         draggable={false}
         src="/_junior/dashboard/avatar.png"
       />

package/src/client/components/ProfileMenu.tsx

@@ -1,11 +1,4 @@
-import {
-  Boxes,
-  ChevronDown,
-  LogOut,
-  Settings,
-  ShieldCheck,
-  UserRound,
-} from "lucide-react";
+import { Boxes, LogOut, Settings, ShieldCheck, UserRound } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router";
 import type { PersonalSpendReport } from "@sentry/junior/api/schema";
@@ -25,7 +18,7 @@ type ProfileMenuProps = {
   spend?: PersonalSpendReport;
   userPages: PluginUserPageLink[];
   /**
-   * `popover` is the desktop header control.
+   * `popover` is the avatar control at the bottom of the desktop nav rail.
    * `sheet-spend` is the vertical spend callout at the top of the mobile sheet.
    * `sheet-links` is plain account destinations for the mobile nav sheet.
    * `sheet-identity` is the quiet signed-in strip at the bottom of that sheet.
@@ -331,48 +324,18 @@ export function ProfileMenu({
       <PopoverTrigger
         aria-label={`${open ? "Close" : "Open"} profile menu for ${name}. Personal model spend: 7 days ${sevenDaySpend}, 30 days ${thirtyDaySpend}.`}
         className={cn(
-          "group flex h-10 cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-1.5 text-dashboard-text transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70",
+          "grid size-10 cursor-pointer place-items-center rounded-lg border-0 bg-transparent text-dashboard-text transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70",
           open && "bg-dashboard-fill-hover text-dashboard-text",
         )}
         closeDelay={HOVER_CLOSE_DELAY_MS}
         delay={HOVER_OPEN_DELAY_MS}
         openOnHover
       >
-        <span className="hidden items-center gap-2 md:flex">
-          <span className="flex items-baseline gap-1 whitespace-nowrap tabular-nums">
-            <span className="text-xs font-medium tracking-[0.08em] text-dashboard-text-muted">
-              7d
-            </span>
-            <span className="text-xs font-semibold text-dashboard-text">
-              <SpendAmount value={spend?.sevenDaysUsd} />
-            </span>
-          </span>
-          <span
-            aria-hidden="true"
-            className="h-3 w-px bg-dashboard-fill-strong"
-          />
-          <span className="flex items-baseline gap-1 whitespace-nowrap tabular-nums">
-            <span className="text-xs font-medium tracking-[0.08em] text-dashboard-text-muted">
-              30d
-            </span>
-            <span className="text-xs font-semibold text-dashboard-text">
-              <SpendAmount value={spend?.thirtyDaysUsd} />
-            </span>
-          </span>
-        </span>
         <ProfileAvatar user={identity.user} />
-        <ChevronDown
-          aria-hidden="true"
-          className={cn(
-            "hidden text-dashboard-text-muted transition-[color,transform] group-hover:text-dashboard-text md:block",
-            open && "rotate-180 text-dashboard-text",
-          )}
-          size={14}
-          strokeWidth={2}
-        />
       </PopoverTrigger>
       <PopoverContent
         align="end"
+        side="right"
         className="w-64 rounded-xl border-0 bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl"
         id="profile-popover"
       >

package/src/client/components/layout/DashboardChrome.tsx

@@ -102,9 +102,10 @@ export function DashboardChromeProvider(props: { children: ReactNode }) {
 }
 
 /**
- * Sticky shell chrome: primary header, secondary navigation slot, and banner.
+ * Sticky shell chrome: mobile header, secondary navigation slot, and banner.
  * One bottom border closes the header and page links, so page link
- * underlines sit on it. Banners render below that border.
+ * underlines sit on it. Banners render below that border. On desktop the
+ * header is hidden, so the border shows only under page links.
  */
 export function DashboardChrome(props: {
   banner?: ReactNode;
@@ -117,9 +118,13 @@ export function DashboardChrome(props: {
 
   return (
     <div className="sticky top-0 z-30 bg-dashboard-bg/95 pt-[env(safe-area-inset-top)]">
-      <div className="border-b border-dashboard-border-strong">
+      <div className="border-b border-dashboard-border-strong md:border-b-0 md:has-[[data-secondary-slot]>*]:border-b">
         {props.header}
-        <div className="hidden md:block" ref={chrome.secondarySlotRef} />
+        <div
+          className="hidden md:block"
+          data-secondary-slot=""
+          ref={chrome.secondarySlotRef}
+        />
       </div>
       {props.banner}
     </div>

package/src/client/components/layout/DashboardHeader.tsx

@@ -3,7 +3,6 @@ import { useEffect, useRef, type ReactNode, type RefObject } from "react";
 import { Link, NavLink } from "react-router";
 
 import { getDashboardAgentName } from "../../agentName";
-import { JuniorLogo } from "../JuniorLogo";
 import { Sheet, SheetClose, SheetContent } from "../ui/sheet";
 import { useSheet } from "../ui/useSheet";
 import {
@@ -31,7 +30,10 @@ function NavCount(props: { count?: number }) {
   );
 }
 
-/** Render the primary dashboard shell header and optional mobile nav sheet. */
+/**
+ * Render the mobile shell header and navigation sheet. Desktop navigation
+ * lives in `NavRail`.
+ */
 export function DashboardHeader(props: {
   /** Back target used on mobile conversation detail. */
   mobileBackTo?: string;
@@ -45,8 +47,6 @@ export function DashboardHeader(props: {
   mobileSpend?: ReactNode;
   navItems: DashboardHeaderNavItem[];
   onMobileNavigationOpenChange(open: boolean): void;
-  /** Compact desktop header control. */
-  profile?: ReactNode;
   version?: string;
   workspaceActive: boolean;
 }) {
@@ -63,13 +63,6 @@ export function DashboardHeader(props: {
     onOpenChangeRef.current(true);
   });
 
-  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
-    cn(
-      "shrink-0 whitespace-nowrap rounded-lg px-3 py-2 font-sans text-sm font-medium tracking-normal no-underline transition-colors",
-      isActive
-        ? "bg-dashboard-accent/[0.1] text-dashboard-accent-text"
-        : cn("hover:bg-dashboard-fill-soft", dashboardInteractiveTextClass),
-    );
   const sheetLinkClass = ({ isActive }: { isActive: boolean }) =>
     cn(
       "rounded-lg px-3 py-3 font-sans text-sm font-medium no-underline transition-colors",
@@ -92,19 +85,12 @@ export function DashboardHeader(props: {
   }, [props.mobileNavigationOpen]);
 
   return (
-    <header className="relative bg-dashboard-bg">
-      <div
-        className={cn(
-          "grid w-full min-w-0 grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center gap-x-2 px-3 py-2 md:gap-x-5 md:gap-y-3 md:px-7 md:py-3",
-          props.profile
-            ? "md:grid-cols-[auto_minmax(0,1fr)_auto]"
-            : "md:grid-cols-[auto_minmax(0,1fr)]",
-        )}
-      >
+    <header className="relative bg-dashboard-bg md:hidden">
+      <div className="grid w-full min-w-0 grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center gap-x-2 px-3 py-2">
         {conversationMode && props.mobileBackTo ? (
           <Link
             aria-label="Back to conversations"
-            className="grid size-10 place-items-center rounded-lg text-dashboard-text no-underline transition-colors hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70 md:hidden"
+            className="grid size-10 place-items-center rounded-lg text-dashboard-text no-underline transition-colors hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70"
             to={props.mobileBackTo}
           >
             <ArrowLeft aria-hidden="true" size={20} strokeWidth={2} />
@@ -115,7 +101,7 @@ export function DashboardHeader(props: {
             aria-expanded={props.mobileNavigationOpen}
             aria-hidden={props.mobileNavigationOpen || undefined}
             aria-label="Open navigation"
-            className="grid size-10 cursor-pointer place-items-center rounded-lg border-0 bg-transparent text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70 md:hidden"
+            className="grid size-10 cursor-pointer place-items-center rounded-lg border-0 bg-transparent text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70"
             onClick={() => props.onMobileNavigationOpenChange(true)}
             tabIndex={props.mobileNavigationOpen ? -1 : undefined}
             type="button"
@@ -124,7 +110,7 @@ export function DashboardHeader(props: {
           </button>
         )}
         {conversationMode ? (
-          <div className="col-start-2 row-start-1 flex min-w-0 items-center gap-2 md:hidden">
+          <div className="col-start-2 row-start-1 flex min-w-0 items-center gap-2">
             {mobileTitle ? (
               <h1 className="m-0 min-w-0 truncate text-left font-display text-sm font-medium text-dashboard-text">
                 {mobileTitle}
@@ -136,42 +122,16 @@ export function DashboardHeader(props: {
         <Link
           aria-label={`${getDashboardAgentName()} home`}
           className={cn(
-            "col-start-2 row-start-1 min-w-0 max-w-full items-center justify-self-center text-inherit no-underline md:col-start-1 md:flex md:justify-self-start",
+            "col-start-2 row-start-1 min-w-0 max-w-full items-center justify-self-center text-inherit no-underline",
             conversationMode ? "hidden" : "flex",
           )}
           to="/"
         >
-          <span className="truncate font-sans text-sm font-semibold md:hidden">
+          <span className="truncate font-sans text-sm font-semibold">
             {getDashboardAgentName()}
           </span>
-          <span className="hidden md:block">
-            <JuniorLogo />
-          </span>
         </Link>
-        <nav
-          aria-label="Primary"
-          className="hidden min-w-0 items-center gap-1 md:col-start-2 md:flex md:justify-self-start"
-        >
-          <Link
-            aria-current={props.workspaceActive ? "page" : undefined}
-            className={navLinkClass({ isActive: props.workspaceActive })}
-            to="/"
-          >
-            Conversations
-          </Link>
-          {props.navItems.map((item) => (
-            <NavLink className={navLinkClass} key={item.key} to={item.to}>
-              {item.label}
-              <NavCount count={item.count} />
-            </NavLink>
-          ))}
-        </nav>
         {conversationMode ? <MobileHeaderActionsSlot /> : null}
-        {props.profile ? (
-          <div className="col-start-3 hidden justify-self-end md:block">
-            {props.profile}
-          </div>
-        ) : null}
       </div>
       {props.mobileNavigationOpen ? (
         <MobileNavigationSheet

package/src/client/components/layout/NavRail.tsx

@@ -0,0 +1,156 @@
+import {
+  Boxes,
+  Brain,
+  CodeXml,
+  Gauge,
+  Inbox,
+  MessagesSquare,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
+import type { CSSProperties, ReactNode } from "react";
+import { Link, useMatch } from "react-router";
+
+import { getDashboardAgentName } from "../../agentName";
+import { JuniorLogo } from "../JuniorLogo";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "../ui/sidebar";
+import type { DashboardHeaderNavItem } from "./DashboardHeader";
+
+// Plugin primary pages without an entry here use the generic plugin icon.
+const NAV_ICONS: Record<string, LucideIcon> = {
+  automations: Zap,
+  code: CodeXml,
+  "memory:memories": Brain,
+  review: Inbox,
+  system: Gauge,
+};
+
+// 56px rail with 40px targets, so the icons keep their size from the top bar.
+const RAIL_STYLE = { "--sidebar-width-icon": "3.5rem" } as CSSProperties;
+
+/**
+ * Lay out the desktop nav rail beside the page. The rail is always the
+ * collapsed (icon) shadcn sidebar, and the provider's spacer keeps page
+ * content clear of it.
+ */
+export function NavRailProvider(props: { children: ReactNode }) {
+  return (
+    <SidebarProvider open={false} style={RAIL_STYLE}>
+      {props.children}
+    </SidebarProvider>
+  );
+}
+
+function RailItem(props: {
+  active: boolean;
+  count?: number;
+  icon: LucideIcon;
+  label: string;
+  to: string;
+}) {
+  const Icon = props.icon;
+  const label = props.count
+    ? `${props.label} ${props.count.toLocaleString("en-US")}`
+    : props.label;
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        aria-label={label}
+        className="justify-center rounded-lg text-dashboard-text-muted group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:p-0! data-active:bg-dashboard-accent/[0.12] data-active:font-normal data-active:text-dashboard-accent-text [&_svg]:size-5"
+        isActive={props.active}
+        render={
+          <Link
+            aria-current={props.active ? "page" : undefined}
+            to={props.to}
+          />
+        }
+        tooltip={{ children: label, size: "compact", sideOffset: 6 }}
+      >
+        <Icon aria-hidden="true" strokeWidth={1.9} />
+      </SidebarMenuButton>
+      {props.count ? (
+        <SidebarMenuBadge
+          aria-hidden="true"
+          className="-top-2 -right-1.5 h-4 min-w-4 rounded-full bg-dashboard-accent px-1 text-2xs font-semibold leading-none normal-nums text-dashboard-text-inverse ring-2 ring-sidebar group-data-[collapsible=icon]:flex peer-data-[size=default]/menu-button:-top-2 peer-data-active/menu-button:text-dashboard-text-inverse peer-hover/menu-button:text-dashboard-text-inverse"
+        >
+          {props.count > 99 ? "99+" : props.count.toLocaleString("en-US")}
+        </SidebarMenuBadge>
+      ) : null}
+    </SidebarMenuItem>
+  );
+}
+
+function RailNavItem(props: { item: DashboardHeaderNavItem }) {
+  const active = useMatch({ end: false, path: props.item.to }) !== null;
+  return (
+    <RailItem
+      active={active}
+      count={props.item.count}
+      icon={NAV_ICONS[props.item.key] ?? Boxes}
+      label={props.item.label}
+      to={props.item.to}
+    />
+  );
+}
+
+/**
+ * Desktop primary navigation as a shadcn icon sidebar. Mobile keeps the top
+ * bar and navigation sheet in `DashboardHeader`.
+ */
+export function NavRail(props: {
+  navItems: DashboardHeaderNavItem[];
+  profile?: ReactNode;
+  workspaceActive: boolean;
+}) {
+  return (
+    <Sidebar
+      className="border-dashboard-border-strong pt-[env(safe-area-inset-top)]"
+      collapsible="icon"
+    >
+      <SidebarHeader className="items-center pt-3 pb-4">
+        <Link
+          aria-label={`${getDashboardAgentName()} home`}
+          className="grid place-items-center text-inherit no-underline"
+          to="/"
+        >
+          <JuniorLogo />
+        </Link>
+      </SidebarHeader>
+      {/* Stock icon mode hides overflow; the rail stays collapsed, so let
+          plugin pages scroll on short windows. */}
+      <SidebarContent className="group-data-[collapsible=icon]:overflow-auto">
+        <SidebarGroup className="items-center py-0">
+          <nav aria-label="Primary" className="w-full">
+            <SidebarMenu className="items-center gap-1.5">
+              <RailItem
+                active={props.workspaceActive}
+                icon={MessagesSquare}
+                label="Conversations"
+                to="/"
+              />
+              {props.navItems.map((item) => (
+                <RailNavItem item={item} key={item.key} />
+              ))}
+            </SidebarMenu>
+          </nav>
+        </SidebarGroup>
+      </SidebarContent>
+      {props.profile ? (
+        <SidebarFooter className="items-center pb-3">
+          {props.profile}
+        </SidebarFooter>
+      ) : null}
+    </Sidebar>
+  );
+}