@opengeni/react 7.6.1-canary.37073905159001 → 7.6.1

package/src/components/computer-viewer.tsx

@@ -25,7 +25,6 @@ import {
 } from "lucide-react";
 import {
   type ClipboardEvent,
-  type CompositionEvent,
   type KeyboardEvent,
   type MouseEvent,
   type PointerEvent,
@@ -291,12 +290,9 @@ export function ComputerViewer({
   const rfbStream =
     frames.attachment?.stream.kind === "direct_rfb" ? frames.attachment.stream : null;
   const machineLocked = selectedRegistrySession?.failureCode === "machine_locked";
-  const controlUnavailable = computer.controlError !== null;
-  const connectionState = controlUnavailable ? "error" : frames.state;
   // RFB has one combined input switch; partial native input stays view-only.
   const rfbInputEnabled =
     !machineLocked &&
-    !controlUnavailable &&
     computer.session?.capabilities?.pointerInput === true &&
     computer.session?.capabilities?.keyboardInput === true;
   const rfbCapability = useMemo<DesktopStreamCapability | null>(() => {
@@ -445,7 +441,6 @@ export function ComputerViewer({
 
   const perform = useCallback(
     async (action: ComputerAction, frame: ComputerFrame | null): Promise<void> => {
-      if (computer.controlError) throw computer.controlError;
       let receipt;
       if (action.type === "pointer") {
         if (!frame) throw new Error("Desktop view is not ready for pointer input.");
@@ -457,14 +452,9 @@ export function ComputerViewer({
         throw new Error(receipt.error?.message ?? "Desktop input did not complete.");
       }
     },
-    [act, actFromFrame, computer.controlError],
+    [act, actFromFrame],
   );
 
-  const reconnect = () => {
-    void refreshComputer();
-    frames.reconnect();
-  };
-
   const copyFromRfb = useCallback(
     (event: ClipboardEvent<HTMLDivElement>) => {
       if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
@@ -596,7 +586,7 @@ export function ComputerViewer({
         }}
         onCreate={hideGenericCreate ? undefined : createComputer}
         onRefresh={() => {
-          if (connectionState === "error" && !generationLossSelected && !generationLossFrames) {
+          if (frames.state === "error" && !generationLossSelected && !generationLossFrames) {
             frames.reconnect();
           }
           void Promise.all([refreshRegistry(), refreshComputer()]);
@@ -654,20 +644,7 @@ export function ComputerViewer({
                 />
                 {!rfbInputEnabled ? (
                   <div className="pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full border border-white/10 bg-black/70 px-3 py-1 text-[11px] text-white/80 backdrop-blur">
-                    {controlUnavailable ? (
-                      <>
-                        Desktop controls unavailable{" "}
-                        <button
-                          type="button"
-                          onClick={reconnect}
-                          className="pointer-events-auto ml-2 font-medium underline"
-                        >
-                          Reconnect
-                        </button>
-                      </>
-                    ) : (
-                      "View only · direct input unavailable"
-                    )}
+                    View only · direct input unavailable
                   </div>
                 ) : null}
               </div>
@@ -683,19 +660,19 @@ export function ComputerViewer({
                 observation={computer.observation}
                 target={computer.selectedTarget}
                 machineLocked={machineLocked}
-                controlUnavailable={controlUnavailable}
-                connectionState={connectionState}
-                connectionError={computer.controlError ?? frames.error ?? computer.error}
+                connectionState={frames.state}
+                connectionError={frames.error ?? computer.error}
                 mutating={computer.mutating}
                 backgroundActions={computer.session?.capabilities?.backgroundActions === true}
-                backgroundInput={computer.session?.capabilities?.backgroundInput === true}
                 clipboardEnabled={computer.session?.capabilities?.clipboard === true}
                 pointerInput={computer.session?.capabilities?.pointerInput === true}
                 keyboardInput={computer.session?.capabilities?.keyboardInput === true}
                 onAction={perform}
                 onReadClipboard={computer.readClipboard}
                 onReconnect={
-                  generationLossSelected || generationLossFrames ? () => undefined : reconnect
+                  generationLossSelected || generationLossFrames
+                    ? () => undefined
+                    : frames.reconnect
                 }
                 onError={(cause) => notifyError(cause, "Desktop input failed.")}
               />
@@ -703,8 +680,7 @@ export function ComputerViewer({
             {showControls ? (
               <ComputerSemanticPanel
                 observation={computer.observation}
-                mutating={computer.mutating || controlUnavailable}
-                controlUnavailable={controlUnavailable}
+                mutating={computer.mutating}
                 onAction={(action) =>
                   void perform(action, null).catch((cause) =>
                     notifyError(cause, "Desktop action failed."),
@@ -716,11 +692,10 @@ export function ComputerViewer({
           <ComputerStatusBar
             session={computer.session}
             target={computer.selectedTarget}
-            connectionState={connectionState}
-            controlUnavailable={controlUnavailable}
+            connectionState={frames.state}
             refreshing={registry.refreshing}
             showControls={showControls}
-            controlCount={semanticControls(computer.observation).length}
+            controlCount={semanticNodes(computer.observation).length}
             onToggleControls={() => setShowControls((current) => !current)}
           />
         </>
@@ -1050,12 +1025,10 @@ function ComputerViewport(props: {
   observation: ComputerObservation | null;
   target: ComputerTarget | null;
   machineLocked: boolean;
-  controlUnavailable: boolean;
   connectionState: string;
   connectionError: Error | null;
   mutating: boolean;
   backgroundActions: boolean;
-  backgroundInput: boolean;
   clipboardEnabled: boolean;
   pointerInput: boolean;
   keyboardInput: boolean;
@@ -1066,7 +1039,6 @@ function ComputerViewport(props: {
 }) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
-  const composingRef = useRef(false);
   const pointerStartRef = useRef<PointerStart | null>(null);
   const clickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastClickRef = useRef<{
@@ -1104,12 +1076,8 @@ function ComputerViewport(props: {
   const streamFailed = props.connectionState === "error";
   const rawInputEnabled =
     !streamFailed &&
-    !props.controlUnavailable &&
     !props.machineLocked &&
-    (props.backgroundInput ||
-      !props.backgroundActions ||
-      props.target?.kind === "screen" ||
-      props.target?.focused === true);
+    (!props.backgroundActions || props.target?.kind === "screen" || props.target?.focused === true);
 
   const clearBufferedInput = useCallback(() => {
     if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
@@ -1120,29 +1088,12 @@ function ComputerViewport(props: {
     pendingTextRef.current = null;
     pointerStartRef.current = null;
     lastClickRef.current = null;
-    composingRef.current = false;
     if (inputRef.current) inputRef.current.value = "";
   }, []);
 
   const pointerInputEnabled = rawInputEnabled && props.pointerInput;
   const keyboardInputEnabled = rawInputEnabled && props.keyboardInput;
 
-  useLayoutEffect(() => {
-    const canvas = canvasRef.current;
-    const viewport = canvas?.parentElement;
-    if (!canvas || !viewport) return;
-    const fit = () => fitComputerCanvas(canvas);
-    fit();
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", fit);
-      return () => window.removeEventListener("resize", fit);
-    }
-    // The canvas is absolute, so fitting it cannot resize the observed dock.
-    const observer = new ResizeObserver(fit);
-    observer.observe(viewport);
-    return () => observer.disconnect();
-  }, []);
-
   const paintQueuedFrames = useCallback(() => {
     if (decodingFrameRef.current) return;
     decodingFrameRef.current = true;
@@ -1452,13 +1403,6 @@ function ComputerViewport(props: {
 
   const keyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (!keyboardInputEnabled) return;
-    if (
-      composingRef.current ||
-      event.nativeEvent.isComposing ||
-      event.nativeEvent.keyCode === 229
-    ) {
-      return;
-    }
     flushPendingWheel();
     const command = event.metaKey || event.ctrlKey;
     if (
@@ -1512,8 +1456,7 @@ function ComputerViewport(props: {
     });
   };
 
-  const input = (value: string, nativeComposing = false) => {
-    if (composingRef.current || nativeComposing) return;
+  const input = (value: string) => {
     if (!value || !keyboardInputEnabled) return;
     flushPendingWheel();
     flushPendingClick();
@@ -1531,11 +1474,6 @@ function ComputerViewport(props: {
     if (inputRef.current) inputRef.current.value = "";
   };
 
-  const compositionEnd = (event: CompositionEvent<HTMLTextAreaElement>) => {
-    composingRef.current = false;
-    input(event.currentTarget.value || event.data);
-  };
-
   const showCanvas =
     props.frame !== null &&
     paintedFrame !== null &&
@@ -1563,13 +1501,7 @@ function ComputerViewport(props: {
       <textarea
         ref={inputRef}
         defaultValue=""
-        onInput={(event) =>
-          input(event.currentTarget.value, (event.nativeEvent as InputEvent).isComposing)
-        }
-        onCompositionStart={() => {
-          composingRef.current = true;
-        }}
-        onCompositionEnd={compositionEnd}
+        onInput={(event) => input(event.currentTarget.value)}
         onKeyDown={keyDown}
         onCopy={copy}
         onPaste={paste}
@@ -1584,7 +1516,6 @@ function ComputerViewport(props: {
         <ComputerViewportFallback
           observation={props.observation}
           machineLocked={props.machineLocked}
-          controlUnavailable={props.controlUnavailable}
           connectionState={props.connectionState}
           error={props.connectionError}
           onAction={(action) => enqueue(action, null)}
@@ -1632,7 +1563,6 @@ function assertExactComputerClipboard(clipboard: ComputerClipboard, expected: st
 function ComputerViewportFallback(props: {
   observation: ComputerObservation | null;
   machineLocked: boolean;
-  controlUnavailable: boolean;
   connectionState: string;
   error: Error | null;
   onAction: (action: ComputerAction) => void;
@@ -1652,7 +1582,7 @@ function ComputerViewportFallback(props: {
     );
   }
   const controlFailure = interactionControlFailureFromError(props.error);
-  const interactive = semanticControls(props.observation)
+  const interactive = semanticNodes(props.observation)
     .filter((node) => semanticAction(node) !== null)
     .slice(0, 10);
   return (
@@ -1667,11 +1597,9 @@ function ComputerViewportFallback(props: {
           <p className="text-og-menu font-medium text-og-fg">
             {isAttachedChromeGenerationLossError(props.error)
               ? "Chrome reconnected—open a fresh browser/desktop."
-              : props.controlUnavailable
-                ? "Desktop controls unavailable"
-                : props.error
-                  ? "Live view disconnected"
-                  : computerConnectionLabel(props.connectionState)}
+              : props.error
+                ? "Live view disconnected"
+                : computerConnectionLabel(props.connectionState)}
           </p>
         </div>
         {props.error ? (
@@ -1681,7 +1609,7 @@ function ComputerViewportFallback(props: {
               : (controlFailure?.message ?? props.error.message)}
           </p>
         ) : null}
-        {interactive.length > 0 && !props.controlUnavailable ? (
+        {interactive.length > 0 ? (
           <div className="mt-3 border-t border-og-border pt-3">
             <p className="mb-2 text-og-xs text-og-fg-subtle">App controls remain available</p>
             <div className="flex flex-wrap gap-1.5">
@@ -1718,26 +1646,18 @@ function ComputerViewportFallback(props: {
 function ComputerSemanticPanel(props: {
   observation: ComputerObservation | null;
   mutating: boolean;
-  controlUnavailable: boolean;
   onAction: (action: ComputerAction) => void;
 }) {
-  const nodes = semanticControls(props.observation).slice(0, 100);
+  const nodes = semanticNodes(props.observation).slice(0, 100);
   return (
     <aside className="box-border max-h-[40%] w-full shrink-0 overflow-y-auto border-t border-og-border bg-og-surface-1 p-2 @xl/computer-viewer:max-h-none @xl/computer-viewer:w-64 @xl/computer-viewer:border-t-0 @xl/computer-viewer:border-l">
       <div className="mb-2 flex items-center gap-1.5 px-1 text-og-xs font-medium uppercase tracking-[0.1em] text-og-fg-subtle">
         <KeyboardIcon className="size-3" /> App controls
       </div>
-      {props.controlUnavailable ? (
+      {nodes.length === 0 ? (
         <p className="px-1 py-2 text-og-control leading-5 text-og-fg-muted">
-          Reconnect to use app controls.
+          This view has no accessibility controls. Use the live image instead.
         </p>
-      ) : null}
-      {nodes.length === 0 ? (
-        props.controlUnavailable ? null : (
-          <p className="px-1 py-2 text-og-control leading-5 text-og-fg-muted">
-            This view has no accessibility controls. Use the live image instead.
-          </p>
-        )
       ) : (
         <div className="space-y-0.5">
           {nodes.map((node) => (
@@ -1827,7 +1747,6 @@ function ComputerStatusBar(props: {
   session: ComputerSession | null;
   target: ComputerTarget | null;
   connectionState: string;
-  controlUnavailable: boolean;
   refreshing: boolean;
   showControls: boolean;
   controlCount: number;
@@ -1843,22 +1762,14 @@ function ComputerStatusBar(props: {
         )}
       />
       <span>
-        {props.controlUnavailable
-          ? "Controls unavailable"
-          : props.connectionState === "live"
-            ? "Live"
-            : computerConnectionLabel(props.connectionState)}
+        {props.connectionState === "live" ? "Live" : computerConnectionLabel(props.connectionState)}
       </span>
       <span className="min-w-0 flex-1 truncate">
-        {props.controlUnavailable
-          ? "Reconnect to use desktop input"
-          : screen
-            ? "Full screen · input may move pointer and focus"
-            : props.session?.capabilities?.backgroundInput
-              ? "Window · clicks and typing stay in the background"
-              : props.session?.capabilities?.backgroundActions
-                ? "Window · app controls work in the background"
-                : (props.target?.kind ?? "Desktop")}
+        {screen
+          ? "Full screen · input may move pointer and focus"
+          : props.session?.capabilities?.backgroundActions
+            ? "Window · app controls work in the background"
+            : (props.target?.kind ?? "Desktop")}
       </span>
       {screen ? <MousePointer2Icon className="size-3" aria-hidden /> : null}
       {props.refreshing ? <LoaderCircleIcon className="size-3 animate-spin" /> : null}
@@ -1893,37 +1804,11 @@ function ComputerNotice(props: { icon: ReactNode; text: string; className?: stri
   );
 }
 
-const structuralRoles = new Set([
-  "frame",
-  "panel",
-  "section",
-  "document",
-  "document web",
-  "static",
-  "static text",
-  "heading",
-  "paragraph",
-  "notification",
-  "separator",
-  "tool bar",
-  "page tab list",
-]);
-
-function semanticControls(observation: ComputerObservation | null): InteractionSemanticNode[] {
+function semanticNodes(observation: ComputerObservation | null): InteractionSemanticNode[] {
   if (observation?.semantic?.kind !== "snapshot") return [];
   const result: InteractionSemanticNode[] = [];
   const visit = (node: InteractionSemanticNode) => {
-    const role = node.role.trim().toLowerCase();
-    const label = node.name?.trim() || node.identifier?.trim();
-    if (
-      node.actions.includes("set_value") ||
-      (label &&
-        label.toLowerCase() !== role &&
-        !structuralRoles.has(role) &&
-        semanticAction(node) !== null)
-    ) {
-      result.push(node);
-    }
+    result.push(node);
     node.children?.forEach(visit);
   };
   observation.semantic.roots.forEach(visit);
@@ -1955,26 +1840,11 @@ function paintCanvas(
   width: number,
   height: number,
 ): void {
-  const dimensionsChanged = canvas.width !== width || canvas.height !== height;
   canvas.width = width;
   canvas.height = height;
   const context = canvas.getContext("2d", { alpha: false });
   if (!context) throw new Error("Desktop canvas is unavailable.");
   context.drawImage(image, 0, 0, width, height);
-  if (dimensionsChanged) fitComputerCanvas(canvas);
-}
-
-function fitComputerCanvas(canvas: HTMLCanvasElement): void {
-  const viewport = canvas.parentElement;
-  if (!viewport || canvas.width <= 0 || canvas.height <= 0) return;
-  const scale = Math.min(
-    viewport.clientWidth / canvas.width,
-    viewport.clientHeight / canvas.height,
-  );
-  // Hidden docks retain their previous fit until their content box is visible.
-  if (!Number.isFinite(scale) || scale <= 0) return;
-  canvas.style.width = `${canvas.width * scale}px`;
-  canvas.style.height = `${canvas.height * scale}px`;
 }
 
 function loadImage(url: string): Promise<HTMLImageElement> {

package/src/components/generated-video-player.tsx

@@ -1,7 +1,6 @@
 import type { GeneratedVideoReceipt, VideoArtifactPlaybackSource } from "@opengeni/sdk";
 import { useEffect, useState } from "react";
 import { cn } from "../lib/cn";
-import { useErrorMessage } from "../lib/error-message";
 import type { VideoArtifactPlaybackLoader } from "../timeline";
 
 export type GeneratedVideoPlayerProps = {
@@ -23,7 +22,6 @@ export function GeneratedVideoPlayer({
   className,
   label = "Generated video",
 }: GeneratedVideoPlayerProps) {
-  const formatError = useErrorMessage();
   const [retry, setRetry] = useState(0);
   const [state, setState] = useState<SourceState>({ kind: "loading" });
 
@@ -38,12 +36,12 @@ export function GeneratedVideoPlayer({
         if (controller.signal.aborted) return;
         setState({
           kind: "error",
-          message: formatError(error),
+          message: error instanceof Error ? error.message : "Playback is unavailable.",
         });
       },
     );
     return () => controller.abort();
-  }, [loadPlaybackSource, receipt.artifact.artifactId, retry, formatError]);
+  }, [loadPlaybackSource, receipt.artifact.artifactId, retry]);
 
   if (state.kind === "loading") {
     return (

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

@@ -8,7 +8,6 @@ import type {
 import { ChevronDownIcon, ChevronUpIcon, MessageCircleQuestionIcon } from "lucide-react";
 import { useEffect, useId, useRef, useState, type FormEvent, type ReactNode } from "react";
 import { cn } from "../lib/cn";
-import { useErrorMessage } from "../lib/error-message";
 
 export type HumanInputAnswerDraft = {
   values: string[];
@@ -16,8 +15,6 @@ export type HumanInputAnswerDraft = {
   otherSelected: boolean;
 };
 
-class SkillReviewVerificationError extends Error {}
-
 export type HumanInputFormMessages = {
   title: string;
   description: string;
@@ -119,7 +116,6 @@ function HumanInputRequestForm({
   defaultCollapsed = false,
   className,
 }: HumanInputFormProps) {
-  const formatError = useErrorMessage();
   const messages = { ...defaultHumanInputFormMessages, ...messageOverrides };
   const singleQuestion = request.questions.length === 1 ? request.questions[0]! : null;
   const resolvedTitle =
@@ -188,7 +184,7 @@ function HumanInputRequestForm({
       questions.map(async (question) => {
         if (!loadSkillReview)
           throw new Error(
-            "This client cannot preview Skill files. Ask your administrator for a review-capable client.",
+            "This client cannot preview Skill files. Open this request in Opengeni to review it.",
           );
         const reference = question.reference;
         const record = await loadSkillReview(reference);
@@ -198,9 +194,7 @@ function HumanInputRequestForm({
           (record.removalOperationId ?? undefined) !== reference.removalOperationId ||
           !record.files.some((file) => file.path === "SKILL.md")
         ) {
-          throw new SkillReviewVerificationError(
-            "The requested Skill revision could not be verified.",
-          );
+          throw new Error("The requested Skill revision could not be verified.");
         }
         return [question.id, record] as const;
       }),
@@ -220,20 +214,13 @@ function HumanInputRequestForm({
             loader: loadSkillReview,
             identity: reviewIdentity,
             records: {},
-            error: formatError(
-              cause,
-              cause instanceof SkillReviewVerificationError
-                ? cause.message
-                : !loadSkillReview
-                  ? "This client cannot preview Skill files. Ask your administrator for a review-capable client."
-                  : undefined,
-            ),
+            error: cause instanceof Error ? cause.message : "Could not load the Skill files.",
           });
       });
     return () => {
       current = false;
     };
-  }, [loadSkillReview, reviewIdentity, reviewReload, formatError]);
+  }, [loadSkillReview, reviewIdentity, reviewReload]);
   const visibleReviews =
     reviews?.loader === loadSkillReview && reviews?.identity === reviewIdentity ? reviews : null;
   const preview = (question: HumanInputQuestion) => {
@@ -332,7 +319,7 @@ function HumanInputRequestForm({
       await onSubmit(response);
     } catch (cause) {
       if (generation === submissionGeneration.current) {
-        setSubmissionError(formatError(cause));
+        setSubmissionError(cause instanceof Error ? cause.message : String(cause));
       }
     } finally {
       if (generation === submissionGeneration.current) {

package/src/components/message-timeline.tsx

@@ -1,5 +1,4 @@
 import { RollingActivity } from "../timeline/rolling-activity";
-import { useErrorMessage } from "../lib/error-message";
 import { formatElapsed } from "../timeline/turn-summary";
 import { ActivityNoteTextContext } from "../timeline/activity-rail";
 import { timelineGroupContainsPresentedImage } from "../timeline/presented-image";
@@ -563,7 +562,6 @@ export function MessageTimeline({
   emptyState,
   className,
 }: MessageTimelineProps) {
-  const formatError = useErrorMessage();
   const resolvedItems = useMemo(() => {
     const projectedItems = items ?? buildTimeline(events ?? []);
     if (!shouldRenderAuthNeeded) {
@@ -674,12 +672,12 @@ export function MessageTimeline({
             setNewerRetryPending(false);
             setNewerFailure({
               key: newerBoundaryKey,
-              message: formatError(reason),
+              message: reason instanceof Error ? reason.message : String(reason),
             });
           },
         );
     },
-    [onLoadNewer, loadingNewer, newerBoundaryKey, formatError],
+    [onLoadNewer, loadingNewer, newerBoundaryKey],
   );
   const previousSourceIdsRef = useRef(new Set<string>());
   const previousSourceBoundaryRef = useRef<string | undefined>(undefined);

package/src/components/open-geni-chat.tsx

@@ -2,7 +2,6 @@ import type { OpenGeniClient } from "@opengeni/sdk";
 import { MenuIcon, SendIcon, XIcon } from "lucide-react";
 import { useCallback, useRef, useState, type CSSProperties, type FormEvent } from "react";
 import { cn } from "../lib/cn";
-import { useErrorMessage } from "../lib/error-message";
 import { useOpenGeni, type ClientOverride } from "../session-context";
 import { SessionConversation, type SessionConversationProps } from "./session-conversation";
 import { SessionList, type SessionListLabels, type SessionListProps } from "./session-list";
@@ -199,8 +198,7 @@ function NewChat({
 }) {
   const [text, setText] = useState("");
   const [sending, setSending] = useState(false);
-  const [error, setError] = useState<{ cause: unknown } | null>(null);
-  const formatError = useErrorMessage();
+  const [error, setError] = useState<string | null>(null);
   // One key per draft, so a retried send returns the same chat.
   const idempotencyKey = useRef(crypto.randomUUID());
 
@@ -216,7 +214,7 @@ function NewChat({
       setText("");
       onCreated(id);
     } catch (cause) {
-      setError({ cause });
+      setError(cause instanceof Error ? cause.message : String(cause));
     } finally {
       setSending(false);
     }
@@ -225,17 +223,12 @@ function NewChat({
   return (
     <form
       onSubmit={(event) => void submit(event)}
-      className="box-border flex h-full flex-col justify-end gap-2 p-3"
+      className="flex h-full flex-col justify-end gap-2 p-3"
       data-og-new-chat-composer=""
     >
       {error ? (
         <p role="alert" className="text-og-xs text-og-status-failed">
-          {formatError(
-            error.cause,
-            error.cause instanceof Error && error.cause.message === labels.newChatUnavailable
-              ? labels.newChatUnavailable
-              : undefined,
-          )}
+          {error}
         </p>
       ) : null}
       <div className="flex items-end gap-2 rounded-lg border border-og-border bg-og-surface-1 p-2">

package/src/components/queue-surface-state.tsx

@@ -1,7 +1,6 @@
 import { Loader2Icon, RotateCwIcon } from "lucide-react";
 
 import type { UseTurnQueueResult } from "../hooks/use-turn-queue";
-import { useErrorMessage } from "../lib/error-message";
 
 type QueueStateProps = {
   queue: UseTurnQueueResult;
@@ -61,7 +60,6 @@ export function QueueErrorAlert({
   queue,
   dividerBefore = false,
 }: QueueStateProps & { dividerBefore?: boolean }) {
-  const formatError = useErrorMessage();
   return (
     <div className={`${dividerBefore ? "border-t border-border" : ""} p-2`}>
       <div
@@ -76,7 +74,7 @@ export function QueueErrorAlert({
           data-testid="queue-error-message"
           dir="auto"
         >
-          {formatError(queue.mutationError ?? queue.error)}
+          {(queue.mutationError ?? queue.error)?.message}
         </span>
         <button
           type="button"

package/src/components/session-chrome.tsx

@@ -73,7 +73,6 @@ import type { ComposerOptimisticMessage, ComposerState } from "../hooks/use-comp
 import type { UseGoalResult } from "../hooks/use-goal";
 import type { UseTurnQueueResult } from "../hooks/use-turn-queue";
 import { cn } from "../lib/cn";
-import { useErrorMessage } from "../lib/error-message";
 import { formatClockTime } from "../lib/format";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
 import { QUEUE_ITEM_CONTENT_UNAVAILABLE, queueItemContent } from "./queue-item-content";
@@ -454,7 +453,6 @@ export function SessionChrome({
   defaultActive = null,
   onActiveChange,
 }: SessionChromeProps) {
-  const formatError = useErrorMessage();
   const [activityRequested, setActivityOpen] = useState(
     Boolean(defaultActive && ["incoming", "agents", "commands"].includes(defaultActive)),
   );
@@ -1194,7 +1192,7 @@ export function SessionChrome({
           </AnimatePresence>
           {goal?.mutationError ? (
             <p role="alert" className="px-3 pb-2 text-og-xs text-og-danger">
-              Goal action not confirmed. {formatError(goal.mutationError)}
+              Goal action not confirmed. {goal.mutationError.message}
             </p>
           ) : null}
           <div
@@ -1669,7 +1667,6 @@ function GoalPanel({
   elapsed: string | null;
   readOnly: boolean;
 }) {
-  const formatError = useErrorMessage();
   const record = goal.goal;
   if (!record) return null;
   const canToggle = !readOnly && (record.status === "active" || record.status === "paused");
@@ -1702,7 +1699,7 @@ function GoalPanel({
       ) : null}
       {record.continuation?.lastError ? (
         <p className="rounded-og-sm bg-og-status-waiting/10 px-1.5 py-1 text-og-xs leading-4 text-og-status-waiting">
-          {formatError(record.continuation.lastError)}
+          {record.continuation.lastError}
         </p>
       ) : null}
       <div className="flex flex-wrap items-center justify-between gap-1.5 pt-0.5">