@sentry/junior-dashboard 0.259.0 → 0.261.0

package/src/client/components/ProfileMenu.tsx

@@ -22,6 +22,7 @@ import { formatCostSummary, peoplePath } from "../format";
 import { pluginUserPagePath } from "../pages/user/PluginUserPage";
 import { cn, dashboardInteractiveTextClass } from "../styles";
 import type { Identity } from "../types";
+import { ThemeSwitcher } from "./ThemeSwitcher";
 
 type ProfileMenuProps = {
   identity: Identity;
@@ -302,6 +303,7 @@ export function ProfileMenu({
         >
           Log out
         </button>
+        <ThemeSwitcher className="px-3 py-2" />
       </nav>
     );
   }
@@ -405,6 +407,7 @@ export function ProfileMenu({
           id="profile-popover"
         >
           {identityBlock}
+          <ThemeSwitcher className="border-b border-dashboard-border-strong px-2.5 py-2" />
           {menuLinks(() => setOpen(false))}
         </div>
       ) : null}

package/src/client/components/README.md

@@ -6,8 +6,18 @@ the policy. `pnpm dashboard-style:check` enforces the token rules below.
 
 ## Foundations
 
-Tokens live in the `@theme` block of `src/tailwind.css`. Light mode does not
-exist yet. Keep every color in a token so a second theme can redefine them.
+Tokens live in the `@theme` block of `src/tailwind.css`. Keep every color in a
+token so each theme can redefine it.
+
+- **Themes.** Dark is the default. The light theme redefines every token under
+  `:root[data-theme="light"]`. It also mirrors the light status and chart
+  shades (50-400) to their dark pair, so `text-rose-300` stays readable on the
+  light canvas. The head script in `src/theme.ts` sets `data-theme` before first
+  paint from the saved choice or the system color scheme. `ThemeSwitcher` saves
+  the choice for this browser. Use the `light:` variant only for one-off values
+  that no token covers, such as provider brand colors.
+- **Charts.** Use `var(--color-*)` for series colors in SVG attributes, not hex
+  values, so they follow the theme.
 
 - **Surfaces.** Use the surface ladder, darkest to lightest: `bg`,
   `bg-elevated` (drawers), `surface-panel` (sidebar, cards, bubbles),
@@ -63,7 +73,8 @@ exist yet. Keep every color in a token so a second theme can redefine them.
   and `SearchInput`. Use `TextInput size="comfortable"` for larger mobile
   controls. Use `TextArea prose` for instructions, not code. `Field error`
   renders an error at `<htmlFor>-error`. The owning control must set
-  `aria-invalid` and `aria-describedby`. `Select` matches native text controls.
+  `aria-invalid` and `aria-describedby`. `Select` owns the native control and its
+  inset arrow. Use its `filter` and `sort` variants for compact controls.
 - **Status.** Use `StatusDot` for dense table or list markers. Use `StatusChip`
   when the label must stay visible. `StatusChip` is a small dot and
   sentence-case text, with no border or fill. It is not a control.

package/src/client/components/Select.tsx

@@ -1,18 +1,52 @@
 import type { SelectHTMLAttributes } from "react";
+import { ChevronDown } from "lucide-react";
 import { cn } from "../styles";
 
-/** Match native form choices to the dashboard text controls. */
+const selectClassName = {
+  form: "min-h-11 rounded-md border border-dashboard-border-emphasis bg-dashboard-ink pl-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 sm:min-h-10 sm:text-sm",
+  filter:
+    "h-9 rounded-lg border border-dashboard-border-emphasis bg-dashboard-control pl-2 text-sm text-dashboard-text transition-colors hover:border-dashboard-border-interactive focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25",
+  sort: "h-full bg-dashboard-control pl-2 font-sans text-xs text-dashboard-text-muted outline-none",
+};
+
+/** Keep native choices and position their arrow consistently across the dashboard. */
 export function Select({
   className,
+  variant = "form",
   ...props
-}: SelectHTMLAttributes<HTMLSelectElement>) {
+}: SelectHTMLAttributes<HTMLSelectElement> & {
+  variant?: keyof typeof selectClassName;
+}) {
+  const showArrow = !props.multiple && (props.size ?? 1) <= 1;
+
   return (
-    <select
-      {...props}
+    <span
       className={cn(
-        "block min-h-11 w-full min-w-0 rounded-md border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:text-sm",
-        className,
+        "relative block w-full min-w-0",
+        variant === "sort" && "h-full",
       )}
-    />
+    >
+      <select
+        {...props}
+        className={cn(
+          "block w-full min-w-0 disabled:cursor-not-allowed disabled:opacity-60 [color-scheme:var(--dashboard-color-scheme,dark)]",
+          selectClassName[variant],
+          showArrow
+            ? "appearance-none pr-9 forced-colors:appearance-auto"
+            : "pr-3",
+          className,
+        )}
+      />
+      {showArrow ? (
+        <ChevronDown
+          aria-hidden="true"
+          className={cn(
+            "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-dashboard-text-muted forced-colors:hidden",
+            props.disabled && "opacity-60",
+          )}
+          size={16}
+        />
+      ) : null}
+    </span>
   );
 }

package/src/client/components/ThemeSwitcher.tsx

@@ -0,0 +1,48 @@
+import { Monitor, Moon, Sun, type LucideIcon } from "lucide-react";
+
+import type { DashboardThemeChoice } from "../../theme";
+import { cn } from "../styles";
+import { useDashboardThemeChoice } from "../theme";
+import { ToggleButton } from "./Button";
+
+const themeChoices = [
+  { Icon: Monitor, label: "System", value: "system" },
+  { Icon: Sun, label: "Light", value: "light" },
+  { Icon: Moon, label: "Dark", value: "dark" },
+] as const satisfies ReadonlyArray<{
+  Icon: LucideIcon;
+  label: string;
+  value: DashboardThemeChoice;
+}>;
+
+/** Choose the dashboard theme for this browser: system, light, or dark. */
+export function ThemeSwitcher(props: { className?: string }) {
+  const [choice, setChoice] = useDashboardThemeChoice();
+  return (
+    <div
+      className={cn("flex items-center justify-between gap-3", props.className)}
+    >
+      <span className="font-sans text-sm font-semibold text-dashboard-text">
+        Theme
+      </span>
+      <div
+        aria-label="Theme"
+        className="flex gap-0.5 rounded-lg border border-dashboard-border p-0.5"
+        role="group"
+      >
+        {themeChoices.map(({ Icon, label, value }) => (
+          <ToggleButton
+            aria-label={`${label} theme`}
+            key={value}
+            onClick={() => setChoice(value)}
+            pressed={choice === value}
+            title={label}
+            variant="segment"
+          >
+            <Icon aria-hidden="true" size={14} strokeWidth={2} />
+          </ToggleButton>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/client/components/charts/ActivityChart.tsx

@@ -248,7 +248,7 @@ export function ActivityChartGrid(props: {
     return (
       <g key={ratio}>
         <line
-          stroke="rgba(255,255,255,0.07)"
+          stroke="var(--color-dashboard-border-subtle)"
           strokeDasharray="3 5"
           x1={props.layout.left}
           x2={props.layout.width - props.layout.right}
@@ -332,9 +332,6 @@ export function activityChartAverage(values: readonly number[]): number {
 export const chartAverageLabelClassName =
   "fill-dashboard-text-solid font-sans tabular-nums leading-none";
 
-/** Solid chip behind average labels so series colors never wash out the text. */
-const chartAverageLabelChip = "rgba(9, 12, 14, 0.92)";
-
 /**
  * Opt-in horizontal average across the plotted buckets.
  * Renders a dashed guide plus a compact "value / day" label on the right.
@@ -380,7 +377,7 @@ export function ActivityChartAverageLine(props: {
   return (
     <g aria-label={`average ${label}`} pointerEvents="none">
       <line
-        stroke={props.stroke ?? "rgba(255,255,255,0.55)"}
+        stroke={props.stroke ?? "var(--color-dashboard-text-faint)"}
         strokeDasharray="4 4"
         strokeOpacity={0.85}
         strokeWidth={1.25}
@@ -389,8 +386,10 @@ export function ActivityChartAverageLine(props: {
         y1={y}
         y2={y}
       />
+      {/* Solid chip so series colors never wash out the label text. */}
       <rect
-        fill={chartAverageLabelChip}
+        fill="var(--color-dashboard-bg-elevated)"
+        fillOpacity={0.92}
         height={chipHeight}
         rx={3}
         width={chipWidth}
@@ -399,7 +398,7 @@ export function ActivityChartAverageLine(props: {
       />
       <text
         className={chartAverageLabelClassName}
-        fill="#ffffff"
+        fill="var(--color-dashboard-text-solid)"
         fontSize={fontSize}
         textAnchor="middle"
         x={chipX + chipWidth / 2}

package/src/client/components/charts/InputCacheChart.tsx

@@ -164,7 +164,7 @@ export function InputCacheChart(props: {
                   {bars}
                   {incomplete ? (
                     <rect
-                      fill="#94a3b8"
+                      fill="var(--color-slate-400)"
                       x={x(index) - barWidth / 2}
                       y={layout.top + layout.plotHeight - 3}
                       width={barWidth}

package/src/client/components/charts/SystemMetricCharts.tsx

@@ -49,7 +49,7 @@ function compactDuration(value: number): string {
 function tokenChart(): ChartConfig {
   return {
     axisFormat: formatCompactNumber,
-    color: "#22d3ee",
+    color: "var(--color-cyan-400)",
     format: formatCompactNumber,
     metric: "tokens",
     title: "Token usage",
@@ -61,7 +61,7 @@ function supportingCharts(): ChartConfig[] {
   return [
     {
       axisFormat: compactCurrency,
-      color: "#fbbf24",
+      color: "var(--color-amber-400)",
       format: (value) => formatCostSummary({ total: value }),
       metric: "costUsd",
       title: "Model spend",
@@ -69,7 +69,7 @@ function supportingCharts(): ChartConfig[] {
     },
     {
       axisFormat: compactDuration,
-      color: "#a78bfa",
+      color: "var(--color-violet-400)",
       format: formatDuration,
       metric: "durationMs",
       title: "Runtime",

package/src/client/components/charts/WorkspaceUsageChart.tsx

@@ -14,7 +14,7 @@ import { Card } from "../layout/Card";
 import { formatActivityChartAverage, formatCompactNumber } from "../../format";
 import type { WorkspaceUsageDay } from "./workspaceUsage";
 
-const USAGE_COLOR = "#a78bfa";
+const USAGE_COLOR = "var(--color-violet-400)";
 
 /** Plot successful Workspace switches for one recipe over a trailing window. */
 export function WorkspaceUsageChart(props: {

package/src/client/components/charts/cache-input.ts

@@ -1,9 +1,17 @@
 import type { ConversationMetricDay } from "@sentry/junior/api/schema";
 
 export const CACHE_INPUT_SERIES = [
-  { key: "cachedInputTokens", label: "From cache", color: "#22d3ee" },
-  { key: "cacheCreationTokens", label: "Written to cache", color: "#fbbf24" },
-  { key: "inputTokens", label: "Uncached", color: "#a78bfa" },
+  {
+    key: "cachedInputTokens",
+    label: "From cache",
+    color: "var(--color-cyan-400)",
+  },
+  {
+    key: "cacheCreationTokens",
+    label: "Written to cache",
+    color: "var(--color-amber-400)",
+  },
+  { key: "inputTokens", label: "Uncached", color: "var(--color-violet-400)" },
 ] as const;
 
 export type CacheInput = Pick<

package/src/client/components/controls/DirectorySortSelect.tsx

@@ -1,9 +1,11 @@
+import { Select } from "../Select";
+
 export type DirectorySortOption = {
   label: string;
   value: string;
 };
 
-/** Render a native directory sort control with an explicit dark color scheme. */
+/** Keep directory sorting consistent with the dashboard's shared select. */
 export function DirectorySortSelect(props: {
   ariaLabel: string;
   onChange(value: string): void;
@@ -15,9 +17,9 @@ export function DirectorySortSelect(props: {
       <span className="flex h-full items-center border-r border-dashboard-border-subtle px-2 font-sans font-medium text-xs text-dashboard-text-muted">
         Sort
       </span>
-      <select
+      <Select
         aria-label={props.ariaLabel}
-        className="h-full min-w-0 bg-dashboard-control px-2 font-sans text-xs text-dashboard-text-muted outline-none [color-scheme:var(--dashboard-color-scheme,dark)]"
+        variant="sort"
         value={props.value}
         onChange={(event) => props.onChange(event.currentTarget.value)}
       >
@@ -30,7 +32,7 @@ export function DirectorySortSelect(props: {
             {option.label}
           </option>
         ))}
-      </select>
+      </Select>
     </label>
   );
 }

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

@@ -14,11 +14,7 @@ import {
   MobileSecondaryNavigationSlot,
   useRegisterOpenMobileNavigation,
 } from "./DashboardChrome";
-import {
-  cn,
-  dashboardContainerClass,
-  dashboardInteractiveTextClass,
-} from "../../styles";
+import { cn, dashboardInteractiveTextClass } from "../../styles";
 
 export type DashboardHeaderNavItem = {
   key: string;
@@ -37,7 +33,6 @@ const focusableSelector = [
 
 /** Render the primary dashboard shell header and optional mobile nav sheet. */
 export function DashboardHeader(props: {
-  compact?: boolean;
   /** Back target used on mobile conversation detail. */
   mobileBackTo?: string;
   mobileNavigationOpen: boolean;
@@ -151,12 +146,10 @@ export function DashboardHeader(props: {
     <header className="relative bg-dashboard-bg">
       <div
         className={cn(
-          props.compact ? "w-full min-w-0" : dashboardContainerClass,
-          "grid 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-4 md:py-4",
+          "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)]",
-          props.compact ? "md:px-7 md:py-3" : "md:px-8",
         )}
       >
         {conversationMode && props.mobileBackTo ? (

package/src/client/conversations/ConversationBrief.tsx

@@ -5,6 +5,7 @@ import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 import { Detail, DetailList } from "../components/DetailList";
 import { StatusChip, type StatusChipTone } from "../components/StatusChip";
 import { formatTime } from "../format";
+import { MentionPeopleProvider, renderMentionText } from "./transcriptMentions";
 
 type ConversationBriefReport = NonNullable<ConversationDetailReport["brief"]>;
 
@@ -24,13 +25,24 @@ const outcomeTones: Record<BriefContent["outcome"]["status"], StatusChipTone> =
 export function ConversationBrief(props: {
   brief: ConversationBriefReport;
   variant?: "summary" | "full";
+}) {
+  return (
+    <MentionPeopleProvider mentions={props.brief.mentions ?? []}>
+      <BriefContentView brief={props.brief} variant={props.variant} />
+    </MentionPeopleProvider>
+  );
+}
+
+function BriefContentView(props: {
+  brief: ConversationBriefReport;
+  variant?: "summary" | "full";
 }) {
   const { content } = props.brief;
   if (props.variant === "summary") {
     return (
       <div className="grid min-w-0 gap-4">
         <p className="m-0 text-sm leading-relaxed text-dashboard-text">
-          {content.summary}
+          <BriefText text={content.summary} />
         </p>
         {content.openDecisions.length > 0 ? (
           <div className="grid gap-2">
@@ -58,12 +70,16 @@ export function ConversationBrief(props: {
         </span>
       </div>
       <p className="m-0 text-sm leading-relaxed text-dashboard-text">
-        {content.summary}
+        <BriefText text={content.summary} />
       </p>
       <BriefSection title="Intent & outcome">
         <DetailList>
-          <Detail label="Intent">{content.intent}</Detail>
-          <Detail label="Outcome">{content.outcome.text}</Detail>
+          <Detail label="Intent">
+            <BriefText text={content.intent} />
+          </Detail>
+          <Detail label="Outcome">
+            <BriefText text={content.outcome.text} />
+          </Detail>
         </DetailList>
       </BriefSection>
       {content.decisions.length || content.openDecisions.length ? (
@@ -169,11 +185,13 @@ function BriefDecisions(props: { decisions: BriefContent["decisions"] }) {
             >
               {decision.kind}
             </StatusChip>
-            <span className="min-w-0">{decision.text}</span>
+            <span className="min-w-0">
+              <BriefText text={decision.text} />
+            </span>
           </div>
           {decision.by ? (
             <div className="mt-0.5 text-xs text-dashboard-text-muted">
-              by · {decision.by}
+              by · <BriefText text={decision.by} />
             </div>
           ) : null}
         </li>
@@ -189,10 +207,12 @@ function BriefOpenDecisions(props: {
     <ul className="m-0 grid list-none gap-2 p-0">
       {props.decisions.map((decision, index) => (
         <li key={`${decision.text}:${index}`}>
-          <div>{decision.text}</div>
+          <div>
+            <BriefText text={decision.text} />
+          </div>
           {decision.owner ? (
             <div className="mt-1 text-xs text-dashboard-text-muted">
-              Owner: {decision.owner}
+              Owner: <BriefText text={decision.owner} />
             </div>
           ) : null}
         </li>
@@ -205,12 +225,18 @@ function BriefList(props: { items: string[] }) {
   return (
     <ul className="my-0 grid gap-1.5 pl-4">
       {props.items.map((item, index) => (
-        <li key={`${item}:${index}`}>{item}</li>
+        <li key={`${item}:${index}`}>
+          <BriefText text={item} />
+        </li>
       ))}
     </ul>
   );
 }
 
+function BriefText(props: { text: string }) {
+  return <>{renderMentionText(props.text, "brief")}</>;
+}
+
 function displayLabel(value: string): string {
   return value.replaceAll("_", " ");
 }

package/src/client/conversations/ConversationHomeList.tsx

@@ -22,6 +22,7 @@ import { ConversationArchiveNotices } from "./ConversationArchiveNotices";
 import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
 import { conversationPath } from "./conversationRoutes";
 import { useArchiveConversation } from "./queries";
+import { MentionText } from "./transcriptMentions";
 import {
   buildConversationSections,
   type ConversationSection,
@@ -265,7 +266,12 @@ function ConversationCard(props: {
       </div>
       {conversation.activityPreview ? (
         <p className="relative z-[1] m-0 line-clamp-2 font-sans text-sm leading-relaxed text-dashboard-text-subtle pointer-events-none">
-          {formatConversationActivityPreview(conversation.activityPreview.text)}
+          <MentionText
+            mentions={conversation.activityPreview.mentions ?? []}
+            text={formatConversationActivityPreview(
+              conversation.activityPreview.text,
+            )}
+          />
         </p>
       ) : (
         <p className="relative z-[1] m-0 font-sans text-sm leading-relaxed text-dashboard-text-muted pointer-events-none">

package/src/client/conversations/ConversationMeta.tsx

@@ -167,7 +167,7 @@ export function ConversationSidebarAnnotations(props: {
         {useMobileFacepile ? (
           <SidebarAnnotationIconFacepile
             annotations={mobileFacepileAnnotations}
-            // Discs sit on the sidebar panel / row surface (#09090b).
+            // Discs sit on the sidebar panel / row surface.
             cutoutColor="var(--color-dashboard-surface-panel)"
           />
         ) : (
@@ -343,21 +343,33 @@ type SidebarAnnotationIconName = NonNullable<
 >;
 
 const SIDEBAR_ICON_PRESENTATION = {
-  "circle-dot": { className: "text-[#3fb950]", Icon: CircleDot, label: "Open" },
+  "circle-dot": {
+    className: "text-[#3fb950] light:text-[#1a7f37]",
+    Icon: CircleDot,
+    label: "Open",
+  },
   "circle-dashed": {
-    className: "text-[#8c959f]",
+    className: "text-[#8c959f] light:text-[#59636e]",
     Icon: CircleDashed,
     label: "Draft",
   },
-  "circle-x": { className: "text-[#f85149]", Icon: CircleX, label: "Closed" },
-  "git-merge": { className: "text-[#a371f7]", Icon: GitMerge, label: "Merged" },
+  "circle-x": {
+    className: "text-[#f85149] light:text-[#cf222e]",
+    Icon: CircleX,
+    label: "Closed",
+  },
+  "git-merge": {
+    className: "text-[#a371f7] light:text-[#8250df]",
+    Icon: GitMerge,
+    label: "Merged",
+  },
   "git-pull-request": {
-    className: "text-[#3fb950]",
+    className: "text-[#3fb950] light:text-[#1a7f37]",
     Icon: GitPullRequest,
     label: "Open pull request",
   },
   "triangle-alert": {
-    className: "text-[#d29922]",
+    className: "text-[#d29922] light:text-[#9a6700]",
     Icon: TriangleAlert,
     label: "Needs attention",
   },

package/src/client/conversations/ConversationTranscript.tsx

@@ -43,7 +43,6 @@ import { transcriptEmptyClass } from "./transcriptStyles";
 import { entryMatchesSearch, useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptRow, TranscriptRows } from "./TranscriptRows";
 import { TranscriptTimestampProvider } from "./TranscriptTimestamp";
-import { TranscriptMentionPeopleProvider } from "./transcriptMentions";
 
 type TranscriptEntry = ReturnType<typeof groupTranscriptMessages>[number];
 type TranscriptContextEntry = Extract<TranscriptEntry, { kind: "context" }>;
@@ -86,16 +85,14 @@ export const ConversationTranscriptView = memo(
 
     return (
       <TranscriptTimestampProvider>
-        <TranscriptMentionPeopleProvider messages={messages}>
-          <section className="min-w-0 pt-1">
-            <SegmentEvents
-              onOpenSubagentTranscript={props.onOpenSubagentTranscript}
-              conversation={props.conversation}
-              messages={messages}
-              responding={props.responding}
-            />
-          </section>
-        </TranscriptMentionPeopleProvider>
+        <section className="min-w-0 pt-1">
+          <SegmentEvents
+            onOpenSubagentTranscript={props.onOpenSubagentTranscript}
+            conversation={props.conversation}
+            messages={messages}
+            responding={props.responding}
+          />
+        </section>
       </TranscriptTimestampProvider>
     );
   },

package/src/client/conversations/ConversationWorkspace.tsx

@@ -1,5 +1,5 @@
 import type { InputImage } from "@sentry/junior/api/schema";
-import { useDeferredValue, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Globe2, LockKeyhole } from "lucide-react";
 import { useNavigate, useParams } from "react-router";
 
@@ -17,8 +17,8 @@ import {
 } from "./queries";
 import { conversationPath, NEW_CONVERSATION_PATH } from "./conversationRoutes";
 import { buildConversations, getDashboardTimeZone } from "../format";
+import { useDebouncedValue } from "../debouncedValue";
 import type { Conversation } from "../types";
-import { cn, dashboardContainerClass } from "../styles";
 import { ConversationPage } from "./ConversationPage";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
@@ -28,7 +28,7 @@ const CONVERSATION_PAGE_SIZE = 20;
 export function ConversationWorkspace() {
   const [page, setPage] = useState(1);
   const [query, setQuery] = useState("");
-  const search = useDeferredValue(query.trim());
+  const search = useDebouncedValue(query.trim());
   const params = useParams();
   const navigate = useNavigate();
   const selectedId = params.conversationId;
@@ -90,12 +90,7 @@ export function ConversationWorkspace() {
 
   if (home) {
     return (
-      <main
-        className={cn(
-          dashboardContainerClass,
-          "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
-        )}
-      >
+      <main className="h-full min-h-0 w-full overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6">
         <div className="mx-auto grid w-full max-w-6xl gap-8">
           {createView}
           <section aria-label="Conversations" className="grid gap-3">
@@ -192,25 +187,27 @@ function NewConversationView(props: {
         footerStart={
           <div
             aria-label="Conversation visibility"
-            className="inline-flex items-center gap-1"
+            className="inline-flex shrink-0 items-center gap-0.5 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-0.5"
             role="group"
           >
             <ToggleButton
+              className="min-w-20 gap-1.5"
               onClick={() => setVisibility("public")}
               pressed={isPublic}
               type="button"
               variant="segment"
             >
-              <Globe2 aria-hidden="true" className="mr-1 inline size-3" />
+              <Globe2 aria-hidden="true" className="size-3" />
               Public
             </ToggleButton>
             <ToggleButton
+              className="min-w-20 gap-1.5"
               onClick={() => setVisibility("private")}
               pressed={!isPublic}
               type="button"
               variant="segment"
             >
-              <LockKeyhole aria-hidden="true" className="mr-1 inline size-3" />
+              <LockKeyhole aria-hidden="true" className="size-3" />
               Private
             </ToggleButton>
           </div>

package/src/client/conversations/ConversationWorkspaceLoading.tsx

@@ -58,10 +58,7 @@ function ConversationHomeLoading() {
     <main
       aria-busy="true"
       aria-live="polite"
-      className={cn(
-        dashboardContainerClass,
-        "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
-      )}
+      className="h-full min-h-0 w-full overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6"
       role="status"
     >
       <span className="sr-only">Loading conversations</span>