@opengeni/react 0.45.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "0.45.0",
+  "version": "0.48.0",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,9 @@
     "styles"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -49,10 +51,22 @@
     },
     "./styles.css": {
       "types": "./styles/index.d.ts",
+      "style": "./styles/index.css",
       "import": "./styles/index.css"
     },
+    "./compiled.css": {
+      "types": "./styles/compiled.d.ts",
+      "style": "./styles/compiled.css",
+      "import": "./styles/compiled.css"
+    },
+    "./responsive.css": {
+      "types": "./styles/responsive.d.ts",
+      "style": "./styles/responsive.css",
+      "import": "./styles/responsive.css"
+    },
     "./tokens.css": {
       "types": "./styles/tokens.d.ts",
+      "style": "./styles/tokens.css",
       "import": "./styles/tokens.css"
     }
   },
@@ -62,7 +76,9 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "bun ../../scripts/build-typescript-package.ts",
+    "build": "bun run build:css && bun ../../scripts/build-typescript-package.ts",
+    "build:css": "bun scripts/build-compiled-css.ts",
+    "check:css": "bun scripts/build-compiled-css.ts --check",
     "demo": "vite dev demo --port 3100",
     "demo:build": "vite build demo",
     "demo:build:deployed": "OPENGENI_REACT_DEMO_BASE=/react-demo/ OPENGENI_REACT_DEMO_OUT_DIR=../../../apps/web/dist/react-demo vite build demo",
@@ -75,7 +91,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/sdk": "^0.44.6",
+    "@opengeni/sdk": "^0.48.0",
     "clsx": "^2.1.1",
     "lucide-react": "^1.8.0",
     "motion": "^12.0.0",

package/src/client.ts

@@ -50,6 +50,7 @@ export type SessionClientLike = Pick<
   | "createFileDownloadUrl"
   // VariableSets
   | "listVariableSets"
+  | "getVariableSetVariable"
   | "createVariableSet"
   | "updateVariableSet"
   | "deleteVariableSet"
@@ -99,6 +100,7 @@ export type SessionClientLike = Pick<
   | "detachViewer"
   // Channel-A structured services (terminal-as-events feed via fs/git/terminal)
   | "fsList"
+  | "fsListBatch"
   | "fsRead"
   | "fsWrite"
   | "fsDelete"
@@ -106,6 +108,7 @@ export type SessionClientLike = Pick<
   | "fsMkdir"
   | "gitStatus"
   | "gitDiff"
+  | "gitReadBatch"
   // Workbench v2 turn-end capture reads (the cold-paint source; M3 consumes these)
   | "getWorkspaceCapture"
   | "getWorkspaceCaptureFile"

package/src/components/chat-composer.tsx

@@ -29,6 +29,7 @@ import {
   useChatComposerController,
   type ChatComposerMessages,
   type ComposerControlLinks,
+  type ResponsiveBasis,
 } from "./composer";
 import {
   ComposerTranscriptionControl,
@@ -39,6 +40,11 @@ export { OPEN_WORKSTREAM_CONTROL_EVENT };
 
 export type ChatComposerProps = {
   composer: ComposerState;
+  /**
+   * Measurement surface for responsive chrome. Defaults to the historical
+   * viewport breakpoints; opt into `container` for narrow embedded panels.
+   */
+  responsiveBasis?: ResponsiveBasis | undefined;
   /** Canonical workstream control, separate from lifecycle status. */
   effectiveControl?: EffectiveSessionControl | null | undefined;
   /** Waiting prompts already ahead of a normal Send. */
@@ -91,6 +97,7 @@ export type ChatComposerProps = {
  */
 export function ChatComposer({
   composer,
+  responsiveBasis,
   effectiveControl,
   queuedAheadCount,
   canControlWorkspace,
@@ -140,7 +147,7 @@ export function ChatComposer({
   const stackActions = hasControls && Boolean(actionsStart);
 
   return (
-    <Root controller={controller} className={className}>
+    <Root controller={controller} responsiveBasis={responsiveBasis} className={className}>
       <Frame>
         <CommandPalette />
         <Surface>
@@ -152,7 +159,10 @@ export function ChatComposer({
           {controller.confirmState ? (
             <Confirmation />
           ) : (
-            <Footer className={stackActions ? "max-sm:flex-nowrap sm:flex-wrap" : undefined}>
+            <Footer
+              data-og-stack-actions={stackActions ? "" : undefined}
+              className={stackActions ? "max-sm:flex-nowrap sm:flex-wrap" : undefined}
+            >
               <LayoutGroup id="og-composer-footer">
                 {hasControls ? (
                   <Controls

package/src/components/code-editor.tsx

@@ -458,7 +458,7 @@ function PlainTextarea({
         }
       }}
       aria-label="Plain text file editor"
-      className="h-full w-full resize-none bg-transparent p-2 font-og-mono text-og-sm text-og-fg outline-none"
+      className="h-full w-full resize-none bg-transparent p-2 font-og-mono text-og-sm text-og-fg outline-hidden"
     />
   );
 }

package/src/components/command-palette.tsx

@@ -101,7 +101,7 @@ export function CommandPalette({
                         {dangerLabel}
                       </span>
                     ) : null}
-                    <span className="truncate text-[12px] text-og-fg-subtle max-sm:hidden">
+                    <span className="og-command-description truncate text-[12px] text-og-fg-subtle max-sm:hidden">
                       {command.description}
                     </span>
                   </span>

package/src/components/composer-transcription-control.tsx

@@ -35,10 +35,12 @@ export type ComposerTranscriptionMessages = {
   stop: string;
   cancel: string;
   retry: string;
+  pauseRetrying: string;
   requestingPermission: string;
   recording: string;
   saving: string;
   transcribing: string;
+  retrying: string;
   recovered: string;
   recoveredTranscript: string;
   insertRecoveredTranscript: string;
@@ -61,10 +63,12 @@ const defaultMessages: ComposerTranscriptionMessages = {
   stop: "Stop and transcribe",
   cancel: "Cancel recording",
   retry: "Retry voice input",
+  pauseRetrying: "Pause automatic retry",
   requestingPermission: "Requesting microphone…",
   recording: "Recording. Press Escape to cancel.",
   saving: "Saving audio locally…",
   transcribing: "Transcribing…",
+  retrying: "Recording saved. Retrying automatically…",
   recovered: "Recording recovered and saved locally.",
   recoveredTranscript: "Transcript saved locally. Check your draft before inserting.",
   insertRecoveredTranscript: "Insert saved transcript",
@@ -138,6 +142,7 @@ export function ComposerTranscriptionControl({
     createOwnerId,
   });
   const { status } = transcription;
+  const retrying = status === "retrying";
 
   const cancelTranscription = transcription.cancel;
   useEffect(() => {
@@ -153,7 +158,7 @@ export function ComposerTranscriptionControl({
     status === "transcribing";
   const recoverable =
     transcription.hasRecoverableRecording &&
-    (status === "recovered" || status === "transcript-ready" || status === "error");
+    (retrying || status === "recovered" || status === "transcript-ready" || status === "error");
   const savedTranscript = status === "transcript-ready" && transcription.savedTranscript !== null;
   const unavailableMessage = composer.disabled
     ? messages.unavailableDisabled
@@ -175,13 +180,15 @@ export function ComposerTranscriptionControl({
           ? messages.saving
           : status === "transcribing"
             ? messages.transcribing
-            : status === "recovered"
-              ? messages.recovered
-              : status === "transcript-ready"
-                ? messages.recoveredTranscript
-                : status === "error"
-                  ? (errorMessage ?? messages.errorUnknown)
-                  : unavailableMessage;
+            : retrying
+              ? messages.retrying
+              : status === "recovered"
+                ? messages.recovered
+                : status === "transcript-ready"
+                  ? messages.recoveredTranscript
+                  : status === "error"
+                    ? (errorMessage ?? messages.errorUnknown)
+                    : unavailableMessage;
 
   function start(event: MouseEvent<HTMLButtonElement>) {
     if (unavailableMessage) {
@@ -217,23 +224,39 @@ export function ComposerTranscriptionControl({
                     "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-11",
                   )}
                 >
-                  <span className="max-w-44 truncate text-og-xs text-og-fg-muted max-sm:max-w-28">
+                  <span className="og-transcription-recovered-label max-w-44 truncate text-og-xs text-og-fg-muted max-sm:max-w-28">
                     {savedTranscript
                       ? (errorMessage ?? messages.recoveredTranscript)
-                      : status === "error"
-                        ? (errorMessage ?? messages.errorRetryable)
-                        : messages.recovered}
+                      : retrying
+                        ? messages.retrying
+                        : status === "error"
+                          ? (errorMessage ?? messages.errorRetryable)
+                          : messages.recovered}
                   </span>
-                  <Tip tip={savedTranscript ? messages.insertRecoveredTranscript : messages.retry}>
+                  <Tip
+                    tip={
+                      savedTranscript
+                        ? messages.insertRecoveredTranscript
+                        : retrying
+                          ? messages.pauseRetrying
+                          : messages.retry
+                    }
+                  >
                     <button
                       type="button"
                       onClick={() =>
                         savedTranscript
                           ? void transcription.insertSavedTranscript()
-                          : transcription.retry()
+                          : retrying
+                            ? transcription.cancel()
+                            : transcription.retry()
                       }
                       aria-label={
-                        savedTranscript ? messages.insertRecoveredTranscript : messages.retry
+                        savedTranscript
+                          ? messages.insertRecoveredTranscript
+                          : retrying
+                            ? messages.pauseRetrying
+                            : messages.retry
                       }
                       className={cn(
                         "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
@@ -243,6 +266,8 @@ export function ComposerTranscriptionControl({
                     >
                       {savedTranscript ? (
                         <ClipboardPasteIcon className="size-3.5" />
+                      ) : retrying ? (
+                        <SquareIcon className="size-3.5" />
                       ) : (
                         <RefreshCwIcon className="size-3.5" />
                       )}
@@ -366,7 +391,7 @@ export function ComposerTranscriptionControl({
               <Tip tip={errorMessage}>
                 <span
                   aria-hidden="true"
-                  className="max-w-40 truncate text-og-xs text-og-status-failed max-sm:max-w-24"
+                  className="og-transcription-error-label max-w-40 truncate text-og-xs text-og-status-failed max-sm:max-w-24"
                 >
                   {errorMessage}
                 </span>

package/src/components/composer.tsx

@@ -45,6 +45,10 @@ import {
   type SlashCommandContext,
 } from "../hooks/use-slash-commands";
 import { cn } from "../lib/cn";
+import {
+  ComposerResponsiveContext,
+  type ResponsiveBasis,
+} from "../lib/composer-responsive-context";
 import { composerSubmissionErrorMessage, formatBytes, formatRelativeTime } from "../lib/format";
 import type { PickerModelRow } from "../model-policy";
 import { OPEN_WORKSTREAM_CONTROL_EVENT } from "../workstream-control-event";
@@ -53,6 +57,7 @@ import { ModelPicker as ModelPickerView } from "./model-picker";
 import { TooltipProvider } from "./tooltip";
 
 export { OPEN_WORKSTREAM_CONTROL_EVENT };
+export type { ResponsiveBasis } from "../lib/composer-responsive-context";
 
 function ComposerTip({
   tip,
@@ -743,29 +748,43 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 export type ComposerRootProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
   controller: ChatComposerController;
   children: ReactNode;
+  /**
+   * Measurement surface for responsive composer chrome. `viewport` preserves
+   * the existing breakpoint behavior; `container` responds to this root's
+   * inline size and also bounds composer-owned portalled menus to it.
+   */
+  responsiveBasis?: ResponsiveBasis | undefined;
 };
 
 export const Root = forwardRef<HTMLDivElement, ComposerRootProps>(function ComposerRoot(
-  { controller, children, className, style, ...props },
+  { controller, children, className, style, responsiveBasis = "viewport", ...props },
   forwardedRef,
 ) {
+  const responsiveRootRef = useRef<HTMLDivElement | null>(null);
+  const responsiveContext = useMemo(
+    () => ({ responsiveBasis, rootRef: responsiveRootRef }),
+    [responsiveBasis],
+  );
   // Provider stays on Root so optional Radix tip surfaces (voice input) work.
   // Ordinary composer actions use native `title` via ComposerTip to avoid
   // pulling Popper into every tip hotspot.
   return (
     <ComposerContext.Provider value={controller}>
-      <TooltipProvider delayDuration={300}>
-        <div
-          {...props}
-          ref={mergeRefs(controller.rootRef, forwardedRef)}
-          data-og-composer-id={controller.id}
-          className={cn("og-root", className)}
-          style={{ paddingBottom: "env(safe-area-inset-bottom)", ...style }}
-        >
-          {children}
-          <ComposerAnnouncements />
-        </div>
-      </TooltipProvider>
+      <ComposerResponsiveContext.Provider value={responsiveContext}>
+        <TooltipProvider delayDuration={300}>
+          <div
+            {...props}
+            ref={mergeRefs(controller.rootRef, responsiveRootRef, forwardedRef)}
+            data-og-composer-id={controller.id}
+            data-og-responsive-basis={responsiveBasis}
+            className={cn("og-root og-composer", className)}
+            style={{ paddingBottom: "env(safe-area-inset-bottom)", ...style }}
+          >
+            {children}
+            <ComposerAnnouncements />
+          </div>
+        </TooltipProvider>
+      </ComposerResponsiveContext.Provider>
     </ComposerContext.Provider>
   );
 });
@@ -957,8 +976,8 @@ export const Input = forwardRef<HTMLTextAreaElement, ComposerInputProps>(functio
         paletteOpen ? `${controller.listboxId}-option-${controller.palette.highlight}` : undefined
       }
       className={cn(
-        "block w-full resize-none bg-transparent px-3.5 pt-3 pb-1 text-og-composer md:px-4 md:text-og-composer-wide",
-        "text-og-fg placeholder:text-og-fg-subtle focus:outline-none focus-visible:outline-none",
+        "og-composer-input block w-full resize-none bg-transparent px-3.5 pt-3 pb-1 text-og-composer md:px-4 md:text-og-composer-wide pointer-coarse:min-h-11",
+        "text-og-fg placeholder:text-og-fg-subtle focus:outline-hidden focus-visible:outline-hidden",
         "disabled:cursor-not-allowed disabled:opacity-60",
         className,
       )}
@@ -992,7 +1011,7 @@ export const Footer = forwardRef<HTMLDivElement, ComposerFooterProps>(function C
       {...props}
       ref={ref}
       className={cn(
-        "flex items-end gap-1.5 px-2 pb-2 pt-0.5 sm:px-2.5 sm:pb-2.5",
+        "og-composer-footer flex items-end gap-1.5 px-2 pb-2 pt-0.5 sm:px-2.5 sm:pb-2.5",
         // Mobile: one control row — never wrap into a second toolbar line.
         "max-sm:flex-nowrap max-sm:items-center max-sm:gap-1",
         className,
@@ -1010,7 +1029,7 @@ export const Controls = forwardRef<HTMLSpanElement, ComposerControlsProps>(
         {...props}
         ref={ref}
         className={cn(
-          "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
+          "og-composer-controls flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
           "max-sm:flex-nowrap max-sm:gap-1",
           className,
         )}
@@ -1030,7 +1049,10 @@ export const Hint = forwardRef<HTMLSpanElement, ComposerHintProps>(function Comp
     <span
       {...props}
       ref={ref}
-      className={cn("min-w-0 flex-1 px-1.5 text-og-xs text-og-fg-subtle max-sm:hidden", className)}
+      className={cn(
+        "og-composer-hint min-w-0 flex-1 px-1.5 text-og-xs text-og-fg-subtle max-sm:hidden",
+        className,
+      )}
     >
       {children ?? controller.messages.keyboardHint}
     </span>
@@ -1048,7 +1070,7 @@ export const Actions = forwardRef<HTMLSpanElement, ComposerActionsProps>(functio
       {...props}
       ref={ref}
       className={cn(
-        "ml-auto flex shrink-0 items-center gap-1.5",
+        "og-composer-actions ml-auto flex shrink-0 items-center gap-1.5",
         "max-sm:flex-nowrap max-sm:gap-1",
         className,
       )}
@@ -1095,7 +1117,7 @@ export const AttachButton = forwardRef<HTMLButtonElement, ComposerAttachButtonPr
             className={cn(
               "inline-flex size-8 items-center justify-center rounded-og-md",
               "text-og-fg-muted transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
-              "disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-9",
+              "disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-11",
               className,
             )}
           >
@@ -1167,7 +1189,7 @@ export const PauseButton = forwardRef<HTMLButtonElement, ComposerPauseButtonProp
           disabled={busy}
           aria-label={ariaLabel ?? controller.messages.pauseAriaLabel}
           className={cn(
-            "inline-flex size-8 items-center justify-center rounded-og-md border border-og-border pointer-coarse:size-9",
+            "inline-flex size-8 items-center justify-center rounded-og-md border border-og-border pointer-coarse:size-11",
             "bg-og-surface-2 text-og-fg-muted transition-colors duration-150",
             "hover:border-og-status-waiting/50 hover:text-og-status-waiting",
             "disabled:opacity-50",
@@ -1216,7 +1238,7 @@ export const SendButton = forwardRef<HTMLButtonElement, ComposerSendButtonProps>
               : controller.messages.sendMessageAriaLabel)
           }
           className={cn(
-            "inline-flex size-8 items-center justify-center rounded-og-md pointer-coarse:size-9",
+            "inline-flex size-8 items-center justify-center rounded-og-md pointer-coarse:size-11",
             "bg-og-accent text-og-accent-fg shadow-og-sm",
             "transition-[background-color,transform,opacity] duration-150 ease-og-spring",
             "hover:bg-og-accent-strong active:scale-95",
@@ -1386,8 +1408,12 @@ function WorkstreamPausedStrip({
           ) : (
             <PlayIcon className="size-3.5 fill-current" />
           )}
-          <span className="hidden min-[400px]:inline">{messages.resumeThisWorkstream}</span>
-          <span className="min-[400px]:hidden">{messages.resumeShort}</span>
+          <span className="og-composer-resume-label-long hidden min-[400px]:inline">
+            {messages.resumeThisWorkstream}
+          </span>
+          <span className="og-composer-resume-label-short min-[400px]:hidden">
+            {messages.resumeShort}
+          </span>
         </button>
         <button
           type="button"
@@ -1412,7 +1438,7 @@ function WorkstreamPausedStrip({
                 {blockerHref(entry, controlLinks) ? (
                   <a
                     href={blockerHref(entry, controlLinks)}
-                    className="font-medium text-og-fg underline decoration-og-border-strong underline-offset-2 hover:text-og-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-ring/40"
+                    className="font-medium text-og-fg underline decoration-og-border-strong underline-offset-2 hover:text-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-ring/40"
                   >
                     {entry.displayName}
                   </a>
@@ -1582,7 +1608,7 @@ function AttachmentChips({
   onRetry?: ((id: string) => void) | undefined;
 }) {
   return (
-    <div className="flex flex-wrap gap-2 border-b border-og-border px-3 py-2">
+    <div className="flex flex-wrap gap-2 px-3 py-2">
       {attachments.map((attachment) => {
         const failed = attachment.status === "failed";
         const statusText =

package/src/components/copy-button.tsx

@@ -93,10 +93,10 @@ export function CopyButton({
           aria-label={tip}
           onClick={onClick}
           className={cn(
-            "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
+            "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm pointer-coarse:size-11",
             "text-og-fg-subtle transition-[opacity,color,background-color] duration-150",
             "hover:bg-og-surface-2/80 hover:text-og-fg",
-            "focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent/40",
+            "focus-visible:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40",
             reveal === "group-hover" &&
               "opacity-0 group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 pointer-coarse:opacity-70",
             copied && "opacity-100 text-og-accent",

package/src/components/desktop-viewer.tsx

@@ -507,7 +507,7 @@ function TakeControlCallToAction({
           "border-og-border",
           "bg-og-bg/85 backdrop-blur-md",
           "shadow-og-lg",
-          "outline-none transition-all duration-150 ease-out",
+          "outline-hidden transition-all duration-150 ease-out",
           "focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg",
           disabled
             ? "cursor-not-allowed opacity-60"
@@ -568,7 +568,7 @@ function InControlBar({ shared, onRelease }: { shared: boolean; onRelease: () =>
           className={cn(
             "inline-flex items-center gap-1.5 rounded-og-sm border px-2.5 py-1 text-og-xs font-semibold shadow-og-md transition-colors",
             "border-og-accent bg-og-bg/90 text-og-fg backdrop-blur-sm",
-            "outline-none hover:bg-og-accent hover:text-og-accent-fg focus-visible:ring-2 focus-visible:ring-og-accent",
+            "outline-hidden hover:bg-og-accent hover:text-og-accent-fg focus-visible:ring-2 focus-visible:ring-og-accent",
           )}
         >
           <MonitorIcon className="size-3.5" strokeWidth={2} aria-hidden />

package/src/components/file-browser.tsx

@@ -24,7 +24,11 @@ import {
 import { AlertDialog } from "radix-ui";
 import { VList, type VListHandle } from "virtua";
 import { cn } from "../lib/cn";
-import { type PortalTokenStyle, usePortalTokenStyle } from "../lib/use-portal-token-style";
+import {
+  type PortalTokenStyle,
+  usePortalTokenSource,
+  usePortalTokenStyle,
+} from "../lib/use-portal-token-style";
 import { useUnicodeFallbackFonts } from "../lib/use-unicode-fonts";
 import type { FileTreeNode, UseSandboxFilesResult } from "../hooks/use-sandbox-files";
 
@@ -155,10 +159,11 @@ export function FileBrowser({
   const [busy, setBusy] = useState(false);
   const [coarsePointer, setCoarsePointer] = useState(false);
   const treeId = useId();
-  const containerRef = useRef<HTMLDivElement | null>(null);
+  const container = usePortalTokenSource<HTMLDivElement>();
+  const containerRef = container.currentRef;
   const deleteReturnFocusRef = useRef<HTMLElement | null>(null);
   const vlistRef = useRef<VListHandle>(null);
-  const portalTokenStyle = usePortalTokenStyle(containerRef);
+  const portalTokenStyle = usePortalTokenStyle(container.source);
   const getTreeElement = useCallback(
     () => (typeof document === "undefined" ? null : document.getElementById(treeId)),
     [treeId],
@@ -569,6 +574,7 @@ export function FileBrowser({
       runDelete,
       supportsMutation,
       coarsePointer,
+      containerRef,
       rowIndexByPath,
       treeId,
     ],
@@ -594,7 +600,13 @@ export function FileBrowser({
   // Retry lives next to the state it explains (the degraded/empty notice), so do
   // not render a second toolbar retry for the same failure.
   const showToolbar = supportsMutation || result.loading;
-  const usesVirtualTree = !showErrorEmpty && !showEmpty;
+  // Virtua caches the previous visible range when a lazy-expanded subtree is
+  // inserted in the middle of a short list. The spacer grows but later root
+  // siblings can remain unmounted until a scroll/resize (for example,
+  // `.bash_history` vanished after expanding `repositories/<repo>`). Small
+  // trees do not benefit from virtualization, so render them directly and keep
+  // Virtua only for genuinely large workspaces.
+  const usesVirtualTree = !showErrorEmpty && !showEmpty && renderItems.length > 500;
 
   // Render a SINGLE node row (no recursion — children are separate flat items the
   // virtualizer renders). Returns the row element; the caller assigns the key.
@@ -854,7 +866,7 @@ export function FileBrowser({
             type="button"
             onClick={() => void result.refresh()}
             disabled={result.loading}
-            className="inline-flex min-h-7 shrink-0 items-center gap-1 rounded-og-sm border border-og-border bg-og-surface-1 px-2 font-medium text-og-fg transition-colors hover:border-og-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11"
+            className="inline-flex min-h-7 shrink-0 items-center gap-1 rounded-og-sm border border-og-border bg-og-surface-1 px-2 font-medium text-og-fg transition-colors hover:border-og-border-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11"
           >
             <RefreshCwIcon
               className={cn("size-3", result.loading && "animate-spin motion-reduce:animate-none")}
@@ -868,13 +880,7 @@ export function FileBrowser({
       {/* The tree itself. The root is a drop target so a node can be moved to "". */}
       {/* biome-ignore lint/a11y/noNoninteractiveTabindex: the tree owns keyboard nav */}
       <div
-        ref={containerRef}
-        id={usesVirtualTree ? undefined : treeId}
-        role={usesVirtualTree ? undefined : "tree"}
-        aria-label={usesVirtualTree ? undefined : "Workspace files"}
-        aria-activedescendant={usesVirtualTree ? undefined : activeDescendantId}
-        tabIndex={usesVirtualTree ? undefined : 0}
-        aria-multiselectable={usesVirtualTree ? undefined : false}
+        ref={container.ref}
         onFocus={(event) => {
           if ((event.target as HTMLElement).id === treeId && cursorIndex < 0) {
             const first = flatRows[0];
@@ -901,7 +907,7 @@ export function FileBrowser({
             : undefined
         }
         className={cn(
-          "flex min-h-0 min-w-0 flex-1 flex-col p-1 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent",
+          "flex min-h-0 min-w-0 flex-1 flex-col p-1",
           dragOver === "" && "ring-1 ring-inset ring-og-accent",
         )}
         data-opengeni-file-tree
@@ -929,6 +935,22 @@ export function FileBrowser({
           <div className="p-2 text-og-sm text-og-fg-subtle">
             {emptyState ?? "This directory is empty"}
           </div>
+        ) : !usesVirtualTree ? (
+          <div
+            id={treeId}
+            role="tree"
+            aria-label="Workspace files"
+            aria-activedescendant={activeDescendantId}
+            aria-multiselectable={false}
+            tabIndex={0}
+            className="min-h-0 min-w-0 flex-1 overflow-auto outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
+          >
+            {renderItems.map((item) => (
+              <div key={itemKey(item)} className="min-w-0">
+                {renderItem(item)}
+              </div>
+            ))}
+          </div>
         ) : (
           // Virtualized: only the rows in/near the viewport mount, so a 3k-node
           // tree stays responsive. The flat item list already carries the
@@ -941,7 +963,7 @@ export function FileBrowser({
             aria-activedescendant={activeDescendantId}
             aria-multiselectable={false}
             tabIndex={0}
-            className="min-h-0 flex-1 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
+            className="min-h-0 flex-1 outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
             itemSize={coarsePointer ? 44 : 28}
             ssrCount={Math.min(32, renderItems.length)}
           >
@@ -1041,9 +1063,9 @@ function DeleteDialog({
       }}
     >
       <AlertDialog.Portal container={typeof document === "undefined" ? null : document.body}>
-        <AlertDialog.Overlay className="fixed inset-0 z-[100] bg-black/45 backdrop-blur-[2px]" />
+        <AlertDialog.Overlay className="og-root fixed inset-0 z-[100] bg-black/45 backdrop-blur-[2px]" />
         <AlertDialog.Content
-          className="og-root fixed left-1/2 top-1/2 z-[101] max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-og-lg border border-og-border-strong bg-og-surface-1 p-4 text-og-fg shadow-2xl outline-none"
+          className="og-root fixed left-1/2 top-1/2 z-[101] max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-og-lg border border-og-border-strong bg-og-surface-1 p-4 text-og-fg shadow-2xl outline-hidden"
           style={portalTokenStyle}
           onOpenAutoFocus={(event) => {
             event.preventDefault();
@@ -1208,7 +1230,7 @@ function InlineInput({
         className={cn(
           "min-w-0 flex-1 rounded-og-sm border bg-og-bg px-1 py-0 text-og-sm",
           "border-og-accent text-og-fg",
-          "outline-none",
+          "outline-hidden",
         )}
       />
     </div>

package/src/components/human-input-form.tsx

@@ -559,7 +559,7 @@ function QuestionControls({
           aria-describedby={describedBy}
           autoFocus={autoFocus}
           rows={2}
-          className="min-h-14 w-full resize-y rounded-og-md border border-og-border bg-og-surface-1 px-3 py-2 text-og-sm text-og-fg outline-none placeholder:text-og-fg-subtle focus:border-og-accent"
+          className="min-h-14 w-full resize-y rounded-og-md border border-og-border bg-og-surface-1 px-3 py-2 text-og-sm text-og-fg outline-hidden placeholder:text-og-fg-subtle focus:border-og-accent"
         />
       ) : (
         <div
@@ -651,7 +651,7 @@ function QuestionControls({
                       other: event.target.value,
                     }))
                   }
-                  className="mt-1.5 w-full rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1.5 text-og-sm text-og-fg outline-none focus:border-og-accent disabled:opacity-50"
+                  className="mt-1.5 w-full rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1.5 text-og-sm text-og-fg outline-hidden focus:border-og-accent disabled:opacity-50"
                 />
               </span>
             </label>