@sentry/junior-dashboard 0.279.0 → 0.280.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.279.0",
+  "version": "0.280.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -25,6 +25,7 @@
     "@base-ui/react": "^1.9.0",
     "@sentry/browser": "11.10.0",
     "@tanstack/react-query": "^5.100.14",
+    "@tanstack/react-virtual": "^3.14.26",
     "@uidotdev/usehooks": "2.4.1",
     "class-variance-authority": "^0.7.1",
     "cn": "^0.5.0",
@@ -41,10 +42,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.279.0"
+    "@sentry/junior-plugin-api": "0.280.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.279.0"
+    "@sentry/junior": "0.280.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -65,7 +66,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.279.0"
+    "@sentry/junior": "0.280.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/api/schema.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import * as z from "zod";
 
 const dashboardSessionUserSchema = z
   .object({

package/src/assets.ts

@@ -1,4 +1,7 @@
-export const dashboardClientFile = "";
+import type { DashboardClientManifest } from "./public-assets";
+
+export const dashboardClientManifest: DashboardClientManifest | undefined =
+  undefined;
 export const dashboardPublicAssets: Readonly<Record<string, string>> = {};
 export const dashboardTailwindAsset = "";
 export const dashboardAvatarHeaderAsset = "";

package/src/client/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { lazy, useEffect, useMemo, useState, type ReactNode } from "react";
 import { Navigate, Route, useLocation, useParams } from "react-router";
 
 import {
@@ -36,41 +36,20 @@ import { ConversationWorkspaceLoading } from "./conversations/ConversationWorksp
 import { useConversationData } from "./conversations/queries";
 import { readConversationStartPosition } from "./conversations/transcriptReadPosition";
 import { codeRepositoryTabs } from "./pages/code/codeRepositoryRoutes";
-import { RepositoryPage } from "./pages/code/RepositoryPage";
-import { CodePage } from "./pages/code/CodePage";
-import { LocationDetailPage } from "./pages/locations/LocationDetailPage";
-import { LocationsPage } from "./pages/locations/LocationsPage";
-import { PeoplePage } from "./pages/people/PeoplePage";
-import { PersonProfilePage } from "./pages/people/PersonProfilePage";
-import { ConnectionsPage } from "./pages/settings/ConnectionsPage";
-import { McpSettingsPage } from "./pages/settings/McpSettingsPage";
-import { PersonalTokensPage } from "./pages/settings/PersonalTokensPage";
-import { SettingsPage } from "./pages/settings/SettingsPage";
 import { SettingsPageLayout } from "./pages/settings/SettingsPageLayout";
-import { SystemPage } from "./pages/system/SystemPage";
 import {
   SystemPageLayout,
   SystemRouteLoading,
 } from "./pages/system/SystemPageLayout";
-import { WorkspaceFormPage } from "./pages/system/WorkspaceFormPage";
-import { WorkspacesPage } from "./pages/system/WorkspacesPage";
 import {
   isMemoryLibraryPath,
   MemoryRouteLoading,
 } from "./pages/memory/MemoryPageLayout";
-import { AutomationPage } from "./pages/automations/AutomationPage";
-import { AutomationRunsPage } from "./pages/automations/AutomationRunsPage";
-import { AutomationsPage } from "./pages/automations/AutomationsPage";
 import {
   AutomationsPageLayout,
   hasAutomationDetailsFrame,
   AutomationsRouteLoading,
 } from "./pages/automations/AutomationsPageLayout";
-import {
-  MemoryPermalinkRoute,
-  PluginUserPageRoute,
-} from "./pages/user/PluginUserPage";
-import { AdminPage } from "./pages/admin/AdminPage";
 import { buildPrimaryNavItems } from "./primaryNav";
 import { TracedRoutes } from "./TracedRoutes";
 import {
@@ -80,6 +59,104 @@ import {
 import { useReviewItemCountData } from "./review-desk/queries";
 import type { DashboardCoreData } from "./types";
 
+// Pages outside the conversation workspace load on first visit, so the
+// workspace's first paint skips their code and the chart library.
+const RepositoryPage = lazy(() =>
+  import("./pages/code/RepositoryPage").then((module) => ({
+    default: module.RepositoryPage,
+  })),
+);
+const CodePage = lazy(() =>
+  import("./pages/code/CodePage").then((module) => ({
+    default: module.CodePage,
+  })),
+);
+const LocationDetailPage = lazy(() =>
+  import("./pages/locations/LocationDetailPage").then((module) => ({
+    default: module.LocationDetailPage,
+  })),
+);
+const LocationsPage = lazy(() =>
+  import("./pages/locations/LocationsPage").then((module) => ({
+    default: module.LocationsPage,
+  })),
+);
+const PeoplePage = lazy(() =>
+  import("./pages/people/PeoplePage").then((module) => ({
+    default: module.PeoplePage,
+  })),
+);
+const PersonProfilePage = lazy(() =>
+  import("./pages/people/PersonProfilePage").then((module) => ({
+    default: module.PersonProfilePage,
+  })),
+);
+const ConnectionsPage = lazy(() =>
+  import("./pages/settings/ConnectionsPage").then((module) => ({
+    default: module.ConnectionsPage,
+  })),
+);
+const McpSettingsPage = lazy(() =>
+  import("./pages/settings/McpSettingsPage").then((module) => ({
+    default: module.McpSettingsPage,
+  })),
+);
+const PersonalTokensPage = lazy(() =>
+  import("./pages/settings/PersonalTokensPage").then((module) => ({
+    default: module.PersonalTokensPage,
+  })),
+);
+const SettingsPage = lazy(() =>
+  import("./pages/settings/SettingsPage").then((module) => ({
+    default: module.SettingsPage,
+  })),
+);
+const SystemPage = lazy(() =>
+  import("./pages/system/SystemPage").then((module) => ({
+    default: module.SystemPage,
+  })),
+);
+const WorkspaceFormPage = lazy(() =>
+  import("./pages/system/WorkspaceFormPage").then((module) => ({
+    default: module.WorkspaceFormPage,
+  })),
+);
+const WorkspacesPage = lazy(() =>
+  import("./pages/system/WorkspacesPage").then((module) => ({
+    default: module.WorkspacesPage,
+  })),
+);
+const AutomationPage = lazy(() =>
+  import("./pages/automations/AutomationPage").then((module) => ({
+    default: module.AutomationPage,
+  })),
+);
+const AutomationRunsPage = lazy(() =>
+  import("./pages/automations/AutomationRunsPage").then((module) => ({
+    default: module.AutomationRunsPage,
+  })),
+);
+const AutomationsPage = lazy(() =>
+  import("./pages/automations/AutomationsPage").then((module) => ({
+    default: module.AutomationsPage,
+  })),
+);
+const MemoryPermalinkRoute = lazy(() =>
+  import("./pages/user/PluginUserPage").then((module) => ({
+    default: module.MemoryPermalinkRoute,
+  })),
+);
+const PluginUserPageRoute = lazy(() =>
+  import("./pages/user/PluginUserPage").then((module) => ({
+    default: module.PluginUserPageRoute,
+  })),
+);
+const AdminPage = lazy(() =>
+  import("./pages/admin/AdminPage").then((module) => ({
+    default: module.AdminPage,
+  })),
+);
+
 const dashboardNoise = {
   backgroundImage:
     "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.7'/%3E%3C/svg%3E\")",
@@ -295,7 +372,7 @@ export function DashboardShell() {
               />
             }
           />
-          <TracedRoutes>
+          <TracedRoutes fallback={<LoadingView label="Loading page" />}>
             <Route element={<LegacyAutomationsRedirect />} path="/tasks" />
             <Route element={<LegacyAutomationsRedirect />} path="/tasks/*" />
             <Route

package/src/client/TracedRoutes.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, type ReactNode } from "react";
+import { Suspense, useLayoutEffect, type ReactNode } from "react";
 import {
   createRoutesFromChildren,
   matchRoutes,
@@ -23,9 +23,13 @@ function routePattern(matches: RouteMatch[]): string {
 /**
  * Render `<Route>` children like `<Routes>`, and name the open pageload or
  * navigation span after the route pattern that matched, such as
- * `/conversations/:conversationId`.
+ * `/conversations/:conversationId`. Lazy pages show `fallback` while their
+ * code loads.
  */
-export function TracedRoutes(props: { children: ReactNode }) {
+export function TracedRoutes(props: {
+  children: ReactNode;
+  fallback: ReactNode;
+}) {
   const location = useLocation();
   const routes = createRoutesFromChildren(props.children);
   const element = useRoutes(routes, location);
@@ -36,5 +40,5 @@ export function TracedRoutes(props: { children: ReactNode }) {
   useLayoutEffect(() => {
     if (pattern) nameRouteSpan(pattern);
   }, [location.key, pattern]);
-  return element;
+  return <Suspense fallback={props.fallback}>{element}</Suspense>;
 }

package/src/client/code-highlighter.ts

@@ -0,0 +1,26 @@
+import {
+  createBundledHighlighter,
+  createSingletonShorthands,
+  guessEmbeddedLanguages,
+} from "shiki/core";
+
+import { dashboardCodeLanguages } from "./code-languages";
+
+/**
+ * Highlight code with the dashboard languages and themes. Themes, grammars,
+ * and the engine load in on-demand chunks.
+ */
+export const { codeToHtml } = createSingletonShorthands(
+  createBundledHighlighter({
+    langs: dashboardCodeLanguages,
+    themes: {
+      "github-dark": () => import("shiki/themes/github-dark.mjs"),
+      "github-light": () => import("shiki/themes/github-light.mjs"),
+    },
+    engine: async () => {
+      const { createOnigurumaEngine } = await import("shiki/engine/oniguruma");
+      return createOnigurumaEngine(import("shiki/wasm"));
+    },
+  }),
+  { guessEmbeddedLanguages },
+);

package/src/client/code.tsx

@@ -1,35 +1,13 @@
 import type { ReactNode } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { BundledLanguage } from "shiki/bundle/web";
-import {
-  createBundledHighlighter,
-  createSingletonShorthands,
-  guessEmbeddedLanguages,
-} from "shiki/core";
 
 import { cn } from "./styles";
-import { dashboardCodeLanguages } from "./code-languages";
 import {
   buildSearchDecorations,
   useTranscriptSearch,
 } from "./conversations/transcriptSearch";
 
-// Split themes, language grammars, and the engine into on-demand chunks.
-const { codeToHtml } = createSingletonShorthands(
-  createBundledHighlighter({
-    langs: dashboardCodeLanguages,
-    themes: {
-      "github-dark": () => import("shiki/themes/github-dark.mjs"),
-      "github-light": () => import("shiki/themes/github-light.mjs"),
-    },
-    engine: async () => {
-      const { createOnigurumaEngine } = await import("shiki/engine/oniguruma");
-      return createOnigurumaEngine(import("shiki/wasm"));
-    },
-  }),
-  { guessEmbeddedLanguages },
-);
-
 declare const shikiHtmlBrand: unique symbol;
 
 /** HTML generated by Shiki and safe to pass to the highlighted code shell. */
@@ -51,6 +29,8 @@ export function HighlightedCode(props: {
       const decorations = normalizedQuery
         ? buildSearchDecorations(props.code, normalizedQuery)
         : [];
+      // Shiki loads on the first code block, not with the dashboard entry.
+      const { codeToHtml } = await import("./code-highlighter");
       return (await codeToHtml(props.code, {
         decorations: decorations.length ? decorations : undefined,
         lang: props.language,

package/src/client/components/Drawer.tsx

@@ -1,82 +1,23 @@
-import { X } from "lucide-react";
-import { useRef, type ReactNode } from "react";
+import { lazy, Suspense } from "react";
 
-import { cn } from "../styles";
-import { Button } from "./ui/button";
-import {
-  Drawer as DrawerRoot,
-  DrawerClose,
-  DrawerContent as DrawerPopup,
-} from "./ui/drawer";
-import { useSheet } from "./ui/useSheet";
+import type { DrawerProps } from "./DrawerContent";
 
-type DrawerProps = {
-  actions?: ReactNode;
-  children: ReactNode;
-  closeLabel: string;
-  /** Remove the body inset, so content such as the event log meets the edges. */
-  flush?: boolean;
-  header: ReactNode;
-  onClose(): void;
-  openKey: string;
-  width?: "default" | "wide" | "narrow";
-} & ({ titleId: string; label?: never } | { label: string; titleId?: never });
+// A drawer opens only after a click, so base-ui's drawer loads with the first
+// open instead of with the page.
+const DrawerContent = lazy(() =>
+  import("./DrawerContent").then((module) => ({
+    default: module.DrawerContent,
+  })),
+);
 
 /**
  * Render a side drawer with shared modal focus and dismissal behavior.
  * A drawer opened from inside another drawer stacks in front of it.
  */
 export function Drawer(props: DrawerProps) {
-  return <DrawerContent key={props.openKey} {...props} />;
-}
-
-function DrawerContent(props: DrawerProps) {
-  const closeRef = useRef<HTMLButtonElement>(null);
-  const sheet = useSheet(props.onClose, closeRef);
   return (
-    <DrawerRoot {...sheet.rootProps} swipeDirection="right">
-      <DrawerPopup
-        {...sheet.contentProps}
-        aria-label={props.label}
-        aria-labelledby={props.titleId}
-        data-dashboard-modal=""
-        className={cn(
-          "data-[swipe-axis=x]:[--drawer-content-width:100%] data-[swipe-axis=x]:sm:[--drawer-content-width:100%]",
-          props.width === "wide"
-            ? "data-[swipe-axis=x]:md:[--drawer-content-width:min(760px,94vw)]"
-            : props.width === "narrow"
-              ? "data-[swipe-axis=x]:md:[--drawer-content-width:min(440px,94vw)]"
-              : "data-[swipe-axis=x]:md:[--drawer-content-width:min(560px,94vw)]",
-        )}
-      >
-        <header className="flex shrink-0 items-start gap-3 border-b border-dashboard-border bg-dashboard-bg-elevated px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] md:px-5">
-          <div className="min-w-0 flex-1">{props.header}</div>
-          <div className="flex shrink-0 items-start gap-1.5">
-            {props.actions}
-            <DrawerClose
-              render={
-                <Button
-                  ref={closeRef}
-                  aria-label={props.closeLabel}
-                  size="icon"
-                />
-              }
-            >
-              <X aria-hidden="true" size={15} strokeWidth={2.25} />
-            </DrawerClose>
-          </div>
-        </header>
-        <div
-          className={cn(
-            "min-h-0 flex-1 overflow-auto",
-            props.flush
-              ? "pb-[env(safe-area-inset-bottom)]"
-              : "px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5",
-          )}
-        >
-          {props.children}
-        </div>
-      </DrawerPopup>
-    </DrawerRoot>
+    <Suspense fallback={null}>
+      <DrawerContent key={props.openKey} {...props} />
+    </Suspense>
   );
 }

package/src/client/components/DrawerContent.tsx

@@ -0,0 +1,76 @@
+import { X } from "lucide-react";
+import { useRef, type ReactNode } from "react";
+
+import { cn } from "../styles";
+import { Button } from "./ui/button";
+import {
+  Drawer as DrawerRoot,
+  DrawerClose,
+  DrawerContent as DrawerPopup,
+} from "./ui/drawer";
+import { useSheet } from "./ui/useSheet";
+
+/** Props of a side drawer. */
+export type DrawerProps = {
+  actions?: ReactNode;
+  children: ReactNode;
+  closeLabel: string;
+  /** Remove the body inset, so content such as the event log meets the edges. */
+  flush?: boolean;
+  header: ReactNode;
+  onClose(): void;
+  openKey: string;
+  width?: "default" | "wide" | "narrow";
+} & ({ titleId: string; label?: never } | { label: string; titleId?: never });
+
+/** Render the open side drawer. `Drawer` loads this module on demand. */
+export function DrawerContent(props: DrawerProps) {
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const sheet = useSheet(props.onClose, closeRef);
+  return (
+    <DrawerRoot {...sheet.rootProps} swipeDirection="right">
+      <DrawerPopup
+        {...sheet.contentProps}
+        aria-label={props.label}
+        aria-labelledby={props.titleId}
+        data-dashboard-modal=""
+        className={cn(
+          "data-[swipe-axis=x]:[--drawer-content-width:100%] data-[swipe-axis=x]:sm:[--drawer-content-width:100%]",
+          props.width === "wide"
+            ? "data-[swipe-axis=x]:md:[--drawer-content-width:min(760px,94vw)]"
+            : props.width === "narrow"
+              ? "data-[swipe-axis=x]:md:[--drawer-content-width:min(440px,94vw)]"
+              : "data-[swipe-axis=x]:md:[--drawer-content-width:min(560px,94vw)]",
+        )}
+      >
+        <header className="flex shrink-0 items-start gap-3 border-b border-dashboard-border bg-dashboard-bg-elevated px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] md:px-5">
+          <div className="min-w-0 flex-1">{props.header}</div>
+          <div className="flex shrink-0 items-start gap-1.5">
+            {props.actions}
+            <DrawerClose
+              render={
+                <Button
+                  ref={closeRef}
+                  aria-label={props.closeLabel}
+                  size="icon"
+                />
+              }
+            >
+              <X aria-hidden="true" size={15} strokeWidth={2.25} />
+            </DrawerClose>
+          </div>
+        </header>
+        <div
+          className={cn(
+            "min-h-0 flex-1 overflow-auto",
+            props.flush
+              ? "pb-[env(safe-area-inset-bottom)]"
+              : "px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5",
+          )}
+        >
+          {props.children}
+        </div>
+      </DrawerPopup>
+    </DrawerRoot>
+  );
+}

package/src/client/components/ProfileMenu.tsx

@@ -12,7 +12,7 @@ import type { PersonalSpendReport } from "@sentry/junior/api/schema";
 import type { PluginUserPageLink } from "@sentry/junior-plugin-api";
 
 import { formatCostSummary, peoplePath } from "../format";
-import { pluginUserPagePath } from "../pages/user/PluginUserPage";
+import { pluginUserPagePath } from "../pages/user/pluginUserPageRoutes";
 import { cn, dashboardInteractiveTextClass } from "../styles";
 import type { Identity } from "../types";
 import { ThemeSwitcher } from "./ThemeSwitcher";
@@ -170,7 +170,11 @@ export function ProfileMenu({
           ) : null}
         </div>
       </div>
-      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-sans text-xs tabular-nums text-dashboard-text-muted">
+      <div
+        aria-label="Personal model spend"
+        className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-sans text-xs tabular-nums text-dashboard-text-muted"
+        role="group"
+      >
         <span>
           7d{" "}
           <span className="font-semibold text-dashboard-text">
@@ -320,6 +324,7 @@ export function ProfileMenu({
   }
 
   const topBar = variant === "top-bar";
+  const menuLabel = `${open ? "Close" : "Open"} profile menu for ${name}`;
   return (
     <Popover
       onOpenChange={(nextOpen, details) => {
@@ -335,7 +340,11 @@ export function ProfileMenu({
       open={open}
     >
       <PopoverTrigger
-        aria-label={`${open ? "Close" : "Open"} profile menu for ${name}. Personal model spend: 7 days ${sevenDaySpend}, 30 days ${thirtyDaySpend}.`}
+        aria-label={
+          topBar
+            ? `${menuLabel}. Personal model spend: 7 days ${sevenDaySpend}, 30 days ${thirtyDaySpend}.`
+            : menuLabel
+        }
         className={cn(
           "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

package/src/client/components/UserInputForm.tsx

@@ -6,6 +6,7 @@ import {
   useState,
   type FormEvent,
   type ReactNode,
+  type Ref,
 } from "react";
 import {
   buttonUserInputField,
@@ -161,6 +162,7 @@ function TextField(props: {
   disabled: boolean;
   label: string;
   onChange(value: string): void;
+  ref?: Ref<HTMLTextAreaElement>;
   value: string;
 }) {
   const id = useId();
@@ -178,6 +180,7 @@ function TextField(props: {
         disabled={props.disabled}
         id={id}
         onChange={(event) => props.onChange(event.target.value)}
+        ref={props.ref}
         value={props.value}
       />
     </Field>
@@ -188,7 +191,9 @@ function TextField(props: {
  * Render the answer controls of an action item request. A request with
  * one short choice field shows one button per choice, and a click is the
  * answer. Choices with descriptions stack as rows, so each description stays
- * with its choice. Other requests show a form that the reader submits once.
+ * with its choice. Other… turns the buttons into the form, so the reader can
+ * add a note or answer in their own words. Other requests show a form that
+ * the reader submits once.
  * A failed `onSubmit` lets the reader try again. `secondaryActions`, such as
  * Dismiss, sit after the answer controls. `onUnsentChange` reports whether
  * the form has picks or text that the reader has not sent.
@@ -206,7 +211,15 @@ export function UserInputForm(props: {
   const choicesId = useId();
   const [values, setValues] = useState<Record<string, string[]>>({});
   const [other, setOther] = useState("");
-  const buttonField = buttonUserInputField(props.request);
+  const [writeOther, setWriteOther] = useState(false);
+  const buttonField = writeOther
+    ? undefined
+    : buttonUserInputField(props.request);
+  // Other… unmounts the button that had focus, so move focus to the note.
+  const noteRef = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    if (writeOther) noteRef.current?.focus();
+  }, [writeOther]);
 
   // A ref blocks a second click before React renders the disabled controls.
   // The lock stays after a sent answer; only a failed send can retry.
@@ -260,6 +273,13 @@ export function UserInputForm(props: {
       {props.secondaryActions}
     </div>
   ) : null;
+  // Slack cards show the same button, so both surfaces take a free-text
+  // answer when no choice fits.
+  const otherButton = (
+    <Button disabled={sending} onClick={() => setWriteOther(true)}>
+      Other…
+    </Button>
+  );
 
   return (
     <>
@@ -308,9 +328,10 @@ export function UserInputForm(props: {
               </button>
             ))}
           </div>
-          {secondary ? (
-            <div className="mt-3 flex flex-wrap items-center">{secondary}</div>
-          ) : null}
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            {otherButton}
+            {secondary}
+          </div>
         </>
       ) : buttonField ? (
         <div className="mt-3 flex flex-wrap items-center gap-2">
@@ -325,6 +346,7 @@ export function UserInputForm(props: {
               {option.recommended ? <SuggestedLabel className="ml-0" /> : null}
             </Button>
           ))}
+          {otherButton}
           {secondary}
         </div>
       ) : (
@@ -359,6 +381,7 @@ export function UserInputForm(props: {
             disabled={sending}
             label={USER_INPUT_NOTE.label}
             onChange={setOther}
+            ref={noteRef}
             value={other}
           />
           <div className="flex flex-wrap items-center gap-2">