@sentry/junior-dashboard 0.273.0 → 0.275.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.273.0",
+  "version": "0.275.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -39,10 +39,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.273.0"
+    "@sentry/junior-plugin-api": "0.275.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.273.0"
+    "@sentry/junior": "0.275.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -63,7 +63,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.273.0"
+    "@sentry/junior": "0.275.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/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

@@ -26,6 +26,7 @@ import {
 } from "../components/ui/tooltip";
 import { useDashboardOnline } from "../connection";
 import { cn, dashboardComposerSurfaceClass } from "../styles";
+import { useComposerAutocorrect } from "./composerAutocorrect";
 
 const DRAFT_STORAGE_PREFIX = "junior:dashboard:conversation-draft:";
 // Keep keystrokes off the storage path. Mobile Safari pays for every write.
@@ -132,6 +133,7 @@ export const ConversationComposer = memo(function ConversationComposer(
   const [dragging, setDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const online = useDashboardOnline();
+  const [autocorrect] = useComposerAutocorrect();
   const id = useId();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const draftRef = useRef(initialDraft);
@@ -490,10 +492,11 @@ export const ConversationComposer = memo(function ConversationComposer(
         </label>
         <textarea
           // Chat is technical: ids, paths, code. Keep the keyboard chat-like
-          // (Send) and suppress browser IME assist that fights identifiers.
-          autoCapitalize="off"
+          // (Send) and suppress browser IME assist that fights identifiers,
+          // unless the user turns autocorrect on in settings.
+          autoCapitalize={autocorrect ? "sentences" : "off"}
           autoComplete="off"
-          autoCorrect="off"
+          autoCorrect={autocorrect ? "on" : "off"}
           className="min-h-12 max-h-28 w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 font-sans text-base leading-relaxed text-dashboard-text outline-none placeholder:text-dashboard-text-muted/65 md:min-h-14 md:max-h-[min(calc(12lh_+_1.5rem),40dvh)] md:px-4 md:py-3"
           disabled={Boolean(props.restoreDraftOnError && createPending)}
           enterKeyHint="send"
@@ -510,7 +513,7 @@ export const ConversationComposer = memo(function ConversationComposer(
           placeholder="Message Junior…"
           ref={textareaRef}
           rows={1}
-          spellCheck={false}
+          spellCheck={autocorrect}
         />
         <div
           className={cn(