@sentry/junior-dashboard 0.274.0 → 0.276.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.274.0",
+  "version": "0.276.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -23,6 +23,7 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.9.0",
+    "@sentry/browser": "11.10.0",
     "@tanstack/react-query": "^5.100.14",
     "@uidotdev/usehooks": "2.4.1",
     "class-variance-authority": "^0.7.1",
@@ -39,10 +40,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.274.0"
+    "@sentry/junior-plugin-api": "0.276.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.274.0"
+    "@sentry/junior": "0.276.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -63,7 +64,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.274.0"
+    "@sentry/junior": "0.276.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:client && pnpm run build:css && pnpm run build:server",

package/src/app.ts

@@ -11,7 +11,10 @@ import {
   type JuniorApiVariables,
 } from "@sentry/junior/api";
 import { apiErrorSchema } from "@sentry/junior/api/schema";
-import { initSentry } from "@sentry/junior/instrumentation";
+import {
+  getBrowserSentryConfig,
+  initSentry,
+} from "@sentry/junior/instrumentation";
 import { JUNIOR_VERSION } from "@sentry/junior/version";
 import { DASHBOARD_VERSION_HEADER } from "./dashboard-version";
 import { revalidateConversation } from "./conversation-cache";
@@ -527,10 +530,12 @@ export function createDashboardApp(
     }
   }
 
+  const renderPage = () =>
+    renderDashboard(basePath, agentName, getBrowserSentryConfig());
   for (const { nested, path } of dashboardPagePaths(basePath)) {
-    app.get(path, () => renderDashboard(basePath, agentName));
+    app.get(path, renderPage);
     if (nested) {
-      app.get(`${path}/*`, () => renderDashboard(basePath, agentName));
+      app.get(`${path}/*`, renderPage);
     }
   }
   for (const route of options.pluginRoutes ?? []) {

package/src/client/App.tsx

@@ -240,6 +240,17 @@ export function DashboardShell() {
                 mobileNavigationOpen={mobileNavigationOpen}
                 navItems={primaryNavItems}
                 onMobileNavigationOpenChange={setMobileNavigationOpen}
+                profile={
+                  loggedIn ? (
+                    <ProfileMenu
+                      identity={data!.me}
+                      onSignOut={signOut}
+                      spend={personalSpendQuery.data}
+                      userPages={userPages}
+                      variant="top-bar"
+                    />
+                  ) : undefined
+                }
                 mobileIdentity={
                   loggedIn ? (
                     <ProfileMenu

package/src/client/components/Metric.tsx

@@ -12,11 +12,6 @@ export type MetricTooltipLine = {
   valueStyle?: "heading";
 };
 
-export type MetricListItem = {
-  content: ReactNode;
-  key: string;
-};
-
 function TooltipLines(props: { lines: MetricTooltipLine[] }) {
   return (
     <span className="grid min-w-0 self-start grid-cols-[minmax(0,1fr)_auto] content-start gap-x-3 gap-y-1.5">
@@ -126,30 +121,3 @@ export function MetricValue(props: {
     </Tooltip>
   );
 }
-
-/** Render inline metadata with consistent dot spacing across dashboard headers. */
-export function MetricList(props: {
-  className?: string;
-  items: MetricListItem[];
-}) {
-  return (
-    <div
-      className={cn(
-        "flex flex-wrap items-center gap-x-1.5 gap-y-1",
-        props.className,
-      )}
-    >
-      {props.items.map((item, index) => (
-        <span
-          className="inline-flex min-w-0 items-center gap-x-1.5"
-          key={item.key}
-        >
-          {index > 0 ? (
-            <span className="text-dashboard-text-muted">·</span>
-          ) : null}
-          <span className="min-w-0">{item.content}</span>
-        </span>
-      ))}
-    </div>
-  );
-}

package/src/client/components/ProfileMenu.tsx

@@ -1,4 +1,11 @@
-import { Boxes, LogOut, Settings, ShieldCheck, UserRound } from "lucide-react";
+import {
+  Boxes,
+  ChevronDown,
+  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";
@@ -19,11 +26,17 @@ type ProfileMenuProps = {
   userPages: PluginUserPageLink[];
   /**
    * `popover` is the avatar control at the bottom of the desktop nav rail.
+   * `top-bar` is the spend and avatar control in the tall desktop top bar.
    * `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.
    */
-  variant?: "popover" | "sheet-spend" | "sheet-links" | "sheet-identity";
+  variant?:
+    | "popover"
+    | "top-bar"
+    | "sheet-spend"
+    | "sheet-links"
+    | "sheet-identity";
 };
 
 const HOVER_OPEN_DELAY_MS = 80;
@@ -307,6 +320,7 @@ export function ProfileMenu({
     );
   }
 
+  const topBar = variant === "top-bar";
   return (
     <Popover
       onOpenChange={(nextOpen, details) => {
@@ -324,18 +338,56 @@ export function ProfileMenu({
       <PopoverTrigger
         aria-label={`${open ? "Close" : "Open"} profile menu for ${name}. Personal model spend: 7 days ${sevenDaySpend}, 30 days ${thirtyDaySpend}.`}
         className={cn(
-          "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",
+          "cursor-pointer 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",
+          topBar
+            ? "group flex h-10 items-center gap-2 px-1.5"
+            : "grid size-10 place-items-center",
           open && "bg-dashboard-fill-hover text-dashboard-text",
         )}
         closeDelay={HOVER_CLOSE_DELAY_MS}
         delay={HOVER_OPEN_DELAY_MS}
         openOnHover
       >
+        {topBar ? (
+          <span className="flex items-center gap-2">
+            <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>
+        ) : null}
         <ProfileAvatar user={identity.user} />
+        {topBar ? (
+          <ChevronDown
+            aria-hidden="true"
+            className={cn(
+              "text-dashboard-text-muted transition-[color,transform] group-hover:text-dashboard-text",
+              open && "rotate-180 text-dashboard-text",
+            )}
+            size={14}
+            strokeWidth={2}
+          />
+        ) : null}
       </PopoverTrigger>
       <PopoverContent
         align="end"
-        side="right"
+        side={topBar ? "bottom" : "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

@@ -104,8 +104,8 @@ export function DashboardChromeProvider(props: { children: ReactNode }) {
 /**
  * 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. On desktop the
- * header is hidden, so the border shows only under page links.
+ * underlines sit on it. Banners render below that border. Short desktop
+ * windows hide the header, so the border shows only under page links.
  */
 export function DashboardChrome(props: {
   banner?: ReactNode;
@@ -118,7 +118,7 @@ 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 md:border-b-0 md:has-[[data-secondary-slot]>*]:border-b">
+      <div className="border-b border-dashboard-border-strong md:border-b-0 md:has-[[data-secondary-slot]>*]:border-b md:tall:border-b">
         {props.header}
         <div
           className="hidden md:block"

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

@@ -3,6 +3,7 @@ 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,8 +32,8 @@ function NavCount(props: { count?: number }) {
 }
 
 /**
- * Render the mobile shell header and navigation sheet. Desktop navigation
- * lives in `NavRail`.
+ * Render the shell header: the mobile bar and navigation sheet, and the
+ * desktop top bar on tall windows. Short desktop windows use `NavRail`.
  */
 export function DashboardHeader(props: {
   /** Back target used on mobile conversation detail. */
@@ -47,6 +48,8 @@ export function DashboardHeader(props: {
   mobileSpend?: ReactNode;
   navItems: DashboardHeaderNavItem[];
   onMobileNavigationOpenChange(open: boolean): void;
+  /** Spend and account control at the right of the tall desktop top bar. */
+  profile?: ReactNode;
   version?: string;
   workspaceActive: boolean;
 }) {
@@ -63,6 +66,13 @@ 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",
@@ -85,8 +95,35 @@ export function DashboardHeader(props: {
   }, [props.mobileNavigationOpen]);
 
   return (
-    <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">
+    <header className="relative bg-dashboard-bg md:hidden md:tall:block">
+      <div className="hidden w-full min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-5 px-7 py-3 md:tall:grid">
+        <Link
+          aria-label={`${getDashboardAgentName()} home`}
+          className="flex items-center text-inherit no-underline"
+          to="/"
+        >
+          <JuniorLogo />
+        </Link>
+        <nav aria-label="Primary" className="flex min-w-0 items-center gap-1">
+          <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>
+        {props.profile ? (
+          <div className="justify-self-end">{props.profile}</div>
+        ) : null}
+      </div>
+      <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 md:hidden">
         {conversationMode && props.mobileBackTo ? (
           <Link
             aria-label="Back to conversations"

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

@@ -82,7 +82,7 @@ function RailItem(props: {
       {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"
+          className="top-0 right-0 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-0 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>
@@ -105,8 +105,8 @@ function RailNavItem(props: { item: DashboardHeaderNavItem }) {
 }
 
 /**
- * Desktop primary navigation as a shadcn icon sidebar. Mobile keeps the top
- * bar and navigation sheet in `DashboardHeader`.
+ * Desktop primary navigation as a shadcn icon sidebar on short windows. Tall
+ * desktop windows and mobile use `DashboardHeader`.
  */
 export function NavRail(props: {
   navItems: DashboardHeaderNavItem[];
@@ -114,43 +114,46 @@ export function NavRail(props: {
   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
+    // Tall windows use the top bar in `DashboardHeader` instead.
+    <div className="contents md:tall:hidden">
+      <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>
+        <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>
+    </div>
   );
 }

package/src/client/conversations/ConversationComposer.tsx

@@ -81,7 +81,10 @@ type ConversationComposerProps = {
    * crushed beside the mobile send button.
    */
   footerStart?: ReactNode;
+  /** Text only, for a narrow panel: no images, no key hint, icon-only send. */
+  compact?: boolean;
   label: string;
+  placeholder?: string;
   /**
    * Restore the submitted text after a failed accept when there is no mailbox
    * outbox (new conversation create). Existing conversations keep failures in
@@ -433,7 +436,12 @@ export const ConversationComposer = memo(function ConversationComposer(
         )}
         onDragOver={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
+          // Always cancel a file drop, or the browser opens the file.
           event.preventDefault();
+          if (props.compact) {
+            event.dataTransfer.dropEffect = "none";
+            return;
+          }
           event.dataTransfer.dropEffect = "copy";
           setDragging(true);
         }}
@@ -444,12 +452,13 @@ export const ConversationComposer = memo(function ConversationComposer(
         onDrop={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
           event.preventDefault();
+          if (props.compact) return;
           setDragging(false);
           void addImages(Array.from(event.dataTransfer.files));
         }}
         onPaste={(event) => {
           const files = Array.from(event.clipboardData.files);
-          if (!files.length) return;
+          if (props.compact || !files.length) return;
           event.preventDefault();
           void addImages(files);
         }}
@@ -510,7 +519,7 @@ export const ConversationComposer = memo(function ConversationComposer(
           }}
           onFocus={props.onFocus}
           onKeyDown={handleKeyDown}
-          placeholder="Message Junior…"
+          placeholder={props.placeholder ?? "Message Junior…"}
           ref={textareaRef}
           rows={1}
           spellCheck={autocorrect}
@@ -524,27 +533,29 @@ export const ConversationComposer = memo(function ConversationComposer(
           )}
         >
           <div className="flex min-w-0 items-center gap-3">
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button
-                    focusableWhenDisabled
-                    aria-label="Attach images"
-                    disabled={sendLocked || readingImages}
-                    onClick={() => fileInputRef.current?.click()}
-                    size="icon"
-                    type="button"
-                  >
-                    <ImagePlus aria-hidden="true" size={16} />
-                  </Button>
-                }
-              />
-              <TooltipContent size="compact">
-                Attach images (up to 3 MB total)
-              </TooltipContent>
-            </Tooltip>
+            {props.compact ? null : (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      focusableWhenDisabled
+                      aria-label="Attach images"
+                      disabled={sendLocked || readingImages}
+                      onClick={() => fileInputRef.current?.click()}
+                      size="icon"
+                      type="button"
+                    >
+                      <ImagePlus aria-hidden="true" size={16} />
+                    </Button>
+                  }
+                />
+                <TooltipContent size="compact">
+                  Attach images (up to 3 MB total)
+                </TooltipContent>
+              </Tooltip>
+            )}
             {props.footerStart}
-            {props.footerStart ? null : (
+            {props.footerStart || props.compact ? null : (
               <div className="hidden min-w-0 font-sans text-xs leading-relaxed text-dashboard-text-muted md:block">
                 Enter to send · Shift+Enter for a new line
               </div>
@@ -565,7 +576,10 @@ export const ConversationComposer = memo(function ConversationComposer(
             ) : null}
             <Button
               aria-label={sendLocked ? "Sending message" : props.submitLabel}
-              className="disabled:!border-transparent disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted disabled:!opacity-100"
+              className={cn(
+                "disabled:!border-transparent disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted disabled:!opacity-100",
+                props.compact && "w-9 px-0",
+              )}
               disabled={
                 (!canSend && !images.length) ||
                 !online ||
@@ -576,9 +590,11 @@ export const ConversationComposer = memo(function ConversationComposer(
               type="submit"
             >
               <Send aria-hidden="true" size={14} />
-              <span className="hidden md:inline">
-                {sendLocked ? "Sending…" : props.submitLabel}
-              </span>
+              {props.compact ? null : (
+                <span className="hidden md:inline">
+                  {sendLocked ? "Sending…" : props.submitLabel}
+                </span>
+              )}
             </Button>
           </div>
         </div>