@opengeni/react 1.3.0 → 1.4.2

package/src/components/approval-surface.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { dequal } from "dequal";
+import { ChevronLeftIcon, ChevronRightIcon, ShieldCheckIcon } from "lucide-react";
 import {
   OpenGeniApiError,
   toolReviewAction,
@@ -13,6 +15,9 @@ import { toolDisplayName } from "../timeline/tool-display-name";
 import {
   ToolActionReviewCard,
   ToolActionReviewDetails,
+  ToolReviewFrame,
+  DeclineButton,
+  UNRECOVERABLE_TEXT,
   type ToolReviewDetailsLoader,
 } from "./tool-action-review";
 
@@ -37,10 +42,15 @@ export const defaultApprovalSurfaceMessages: ApprovalSurfaceMessages = {
   formatToolName: (name) =>
     name.includes("__") || /^[a-f0-9]{64}$/.test(name)
       ? toolDisplayName(name)
-      : name.replaceAll("_", " ").replaceAll(".", " › "),
+      : humanToolName(name.replaceAll("_", " ").replaceAll(".", " › ")),
   showDetails: "View full details",
   hideDetails: "Back to review",
 };
+/** "batch modify messages" → "Modify messages": how a call is grouped is not what it does. */
+function humanToolName(name: string): string {
+  const phrase = name.replace(/^batch\s+/i, "").trim();
+  return phrase ? phrase.charAt(0).toUpperCase() + phrase.slice(1) : name;
+}
 export type ApprovalSurfaceProps = {
   approvals: PendingApproval[];
   onApprove: (approval: PendingApproval) => void | Promise<void>;
@@ -88,9 +98,10 @@ export function ApprovalSurface({
 }: ApprovalSurfaceProps) {
   const messages = { ...defaultApprovalSurfaceMessages, ...overrides };
   const formatError = useErrorMessage();
-  const [pending, setPending] = useState<{ id: string; decision: "approve" | "reject" } | null>(
-    null,
-  );
+  const [pending, setPending] = useState<{
+    id: string;
+    decision: "approve" | "reject";
+  } | null>(null);
   const pendingRef = useRef<string | null>(null);
   const [decisionError, setDecisionError] = useState<{ cause: unknown } | null>(null);
   const [localSelectedId, setLocalSelectedId] = useState<string | null>(null);
@@ -137,39 +148,43 @@ export function ApprovalSurface({
     <section
       ref={surface}
       aria-label={messages.title}
-      className={cn("og-root box-border w-full min-w-0 border-t border-og-border", className)}
+      className={cn("og-root box-border w-full min-w-0 space-y-2 py-2", className)}
       data-og-approval-surface=""
     >
       {approvals.length > 1 && (
         <nav
           aria-label="Actions to review"
-          className="flex flex-wrap items-center justify-between gap-2 pt-3 text-og-xs text-og-fg-muted"
+          className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-og-xs text-og-fg-muted"
         >
-          <span>{approvals.length} actions need review</span>
-          <div className="flex items-center gap-3">
+          <span className="font-medium text-og-status-waiting">
+            {approvals.length} actions are waiting for you
+          </span>
+          <div className="flex items-center gap-1">
             <button
               type="button"
+              aria-label="Previous action"
               disabled={selectedIndex === 0}
               onClick={() => setSelectedId(approvals[selectedIndex - 1]!.id)}
-              className="min-h-11 disabled:opacity-40"
+              className="inline-flex min-h-8 min-w-8 items-center justify-center rounded-og-md hover:bg-og-hover hover:text-og-fg disabled:opacity-40 disabled:hover:bg-transparent [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
             >
-              Previous
+              <ChevronLeftIcon className="size-4" aria-hidden="true" />
             </button>
-            <span>
+            <span className="tabular-nums" aria-live="polite">
               {selectedIndex + 1} of {approvals.length}
             </span>
             <button
               type="button"
+              aria-label="Next action"
               disabled={selectedIndex === approvals.length - 1}
               onClick={() => setSelectedId(approvals[selectedIndex + 1]!.id)}
-              className="min-h-11 disabled:opacity-40"
+              className="inline-flex min-h-8 min-w-8 items-center justify-center rounded-og-md hover:bg-og-hover hover:text-og-fg disabled:opacity-40 disabled:hover:bg-transparent [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
             >
-              Next
+              <ChevronRightIcon className="size-4" aria-hidden="true" />
             </button>
           </div>
         </nav>
       )}
-      <div className="divide-y divide-og-border">
+      <div>
         {[selected].map((approval) => (
           <ApprovalRequest
             key={approval.id}
@@ -187,7 +202,7 @@ export function ApprovalSurface({
         ))}
       </div>
       {errorText && (
-        <p role="alert" className="m-0 pb-3 text-og-sm text-og-status-failed">
+        <p role="alert" className="m-0 px-1 text-og-sm text-og-status-failed">
           {errorText}
         </p>
       )}
@@ -215,96 +230,197 @@ function ApprovalRequest({
   onApprove: () => void;
   onReject: () => void;
 }) {
-  const [loaded, setLoaded] = useState<ToolActionReview | null>(null);
-  const [failed, setFailed] = useState(false);
-  const [legacy, setLegacy] = useState(false);
   const [retry, setRetry] = useState(0);
+  // Event projection recreates the same approval on unrelated timeline updates.
+  // Keep one request for equal facts, but never reuse it across changed facts,
+  // an explicit retry, or a loader change (the host's client/access boundary).
+  const requestRef = useRef({ approval, loadReview, retry });
+  if (
+    requestRef.current.loadReview !== loadReview ||
+    requestRef.current.retry !== retry ||
+    !dequal(requestRef.current.approval, approval)
+  ) {
+    requestRef.current = { approval, loadReview, retry };
+  }
+  const request = requestRef.current;
+  const [result, setResult] = useState<{
+    request: typeof request;
+    review?: ToolActionReview;
+    failed?: boolean;
+    legacy?: boolean;
+    denied?: boolean;
+  } | null>(null);
+  // Hide stale facts during render, before passive effect cleanup can run.
+  const current = result?.request === request ? result : null;
+  const loaded = current?.review;
+  const failed = current?.failed;
+  const legacy = current?.legacy;
+  const denied = current?.denied;
   const [detailPath, setDetailPath] = useState<string | null>(null);
   useEffect(() => {
     let active = true;
-    setLoaded(null);
-    setFailed(false);
-    setLegacy(false);
-    if (loadReview)
-      void loadReview(approval).then(
+    if (request.loadReview)
+      void request.loadReview(request.approval).then(
         (review) => {
           if (active) {
-            if (review.id !== approval.id) setFailed(true);
-            else setLoaded(review);
+            setResult(
+              review.id !== request.approval.id ? { request, failed: true } : { request, review },
+            );
           }
         },
         (error) => {
           if (active) {
-            if (
+            // 404: no saved review (older or non-connector actions); use the
+            // approval's own arguments. 401/403: this person cannot review it.
+            if (error instanceof OpenGeniApiError && error.status === 404)
+              setResult({ request, legacy: true });
+            else if (
               error instanceof OpenGeniApiError &&
-              error.status === 404 &&
-              approval.arguments !== undefined
+              (error.status === 401 || error.status === 403)
             )
-              setLegacy(true);
-            else setFailed(true);
+              setResult({ request, failed: true, denied: true });
+            else setResult({ request, failed: true });
           }
         },
       );
     return () => {
       active = false;
     };
-  }, [approval, retry, loadReview]);
+  }, [request]);
+  const stableApproval = request.approval;
+  const { formatToolName, approve: approveLabel } = messages;
+  const fallback = useMemo<ToolActionReview>(
+    () => ({
+      version: 1,
+      id: stableApproval.id,
+      actionDigest: "",
+      revision: "legacy",
+      status: "pending",
+      ...toolReviewAction(stableApproval.name, stableApproval.arguments, {
+        kind: "generic",
+        title:
+          stableApproval.display?.title ??
+          formatToolName(stableApproval.display?.toolName ?? stableApproval.name),
+      }),
+      ...(stableApproval.display?.accountLabel
+        ? { accountLabel: stableApproval.display.accountLabel }
+        : {}),
+      ...toolReviewFields(stableApproval.arguments),
+      reason: "",
+      createdAt: "",
+      updatedAt: "",
+      approveLabel,
+      availableActions: stableApproval.arguments === undefined ? [] : ["approve", "reject"],
+      detailsAvailable: stableApproval.arguments !== undefined,
+    }),
+    [stableApproval, formatToolName, approveLabel],
+  );
+  const loadLegacyDetails = useCallback<ToolReviewDetailsLoader>(
+    async (value, path, offset) => ({
+      version: 1,
+      id: value.id,
+      actionDigest: value.actionDigest,
+      ...toolReviewDetails(stableApproval.arguments, undefined, path, offset),
+    }),
+    [stableApproval],
+  );
   if (loadReview && !loaded && !failed && !legacy)
     return (
-      <div className="py-5 text-og-sm text-og-fg-muted" role="status">
-        Loading action details…
-      </div>
+      <ToolReviewFrame
+        tone="waiting"
+        icon={<ShieldCheckIcon className="size-4" aria-hidden="true" />}
+        eyebrow={messages.title}
+        title={fallback.title}
+        subtitle={fallback.accountLabel}
+        aria-busy
+        data-og-tool-review-loading=""
+      >
+        <div role="status" className="space-y-2">
+          <span className="sr-only">Loading action details…</span>
+          <div className="h-3 w-3/4 animate-pulse rounded-og-sm bg-og-fg/8" aria-hidden="true" />
+          <div className="h-3 w-1/2 animate-pulse rounded-og-sm bg-og-fg/8" aria-hidden="true" />
+        </div>
+      </ToolReviewFrame>
+    );
+  if (denied)
+    return (
+      <ToolReviewFrame
+        tone="waiting"
+        icon={<ShieldCheckIcon className="size-4" aria-hidden="true" />}
+        eyebrow={messages.title}
+        title={fallback.title}
+        subtitle={fallback.accountLabel}
+      >
+        <p role="alert" className="m-0 text-og-sm text-og-fg">
+          You don't have access to review this action. Ask someone with access to this chat to
+          decide.
+        </p>
+      </ToolReviewFrame>
     );
   if (failed)
     return (
-      <div className="py-4 text-og-sm text-og-fg" role="alert">
-        Action details could not be loaded.{" "}
-        <button
-          type="button"
-          className="min-h-11 underline underline-offset-4"
-          onClick={() => setRetry((value) => value + 1)}
+      <ToolReviewFrame
+        tone="waiting"
+        icon={<ShieldCheckIcon className="size-4" aria-hidden="true" />}
+        eyebrow={messages.title}
+        title={fallback.title}
+        subtitle={fallback.accountLabel}
+        footer={
+          <div className="ml-auto">
+            <DeclineButton
+              busy={Boolean(actions.disabled || actions.submitting)}
+              submitting={actions.submitting === "reject"}
+              label={messages.reject}
+              onClick={actions.onReject}
+            />
+          </div>
+        }
+      >
+        <p role="alert" className="m-0 text-og-sm text-og-fg">
+          Couldn't load this action, so it can't be approved yet. You can still decline it.{" "}
+          <button
+            type="button"
+            className="min-h-8 font-medium underline underline-offset-4 [@media(pointer:coarse)]:min-h-11 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
+            onClick={() => setRetry((value) => value + 1)}
+          >
+            Try again
+          </button>
+        </p>
+      </ToolReviewFrame>
+    );
+  if (!loaded && stableApproval.arguments === undefined)
+    return (
+      <div data-approval-id={approval.id} data-review-origin="pending">
+        {custom}
+        <ToolReviewFrame
+          tone="waiting"
+          icon={<ShieldCheckIcon className="size-4" aria-hidden="true" />}
+          eyebrow={messages.title}
+          title={fallback.title}
+          subtitle={fallback.accountLabel}
+          data-og-tool-review=""
+          footer={
+            <div className="ml-auto">
+              <DeclineButton
+                busy={Boolean(actions.disabled || actions.submitting)}
+                submitting={actions.submitting === "reject"}
+                label={messages.reject}
+                onClick={actions.onReject}
+              />
+            </div>
+          }
         >
-          Try again
-        </button>
+          <p className="m-0 text-og-sm text-og-fg">{UNRECOVERABLE_TEXT}</p>
+        </ToolReviewFrame>
       </div>
     );
-  const fallback: ToolActionReview = {
-    version: 1,
-    id: approval.id,
-    actionDigest: "",
-    revision: "legacy",
-    status: "pending",
-    ...toolReviewAction(approval.name, approval.arguments, {
-      kind: "generic",
-      title:
-        approval.display?.title ??
-        messages.formatToolName(approval.display?.toolName ?? approval.name),
-    }),
-    ...(approval.display?.accountLabel ? { accountLabel: approval.display.accountLabel } : {}),
-    ...toolReviewFields(approval.arguments),
-    reason: "This action requires your approval.",
-    createdAt: "",
-    updatedAt: "",
-    approveLabel: messages.approve,
-    availableActions: approval.arguments === undefined ? [] : ["approve", "reject"],
-    detailsAvailable: approval.arguments !== undefined,
-  };
   const review = loaded ?? fallback;
   if (detailPath !== null)
     return (
       <ToolActionReviewDetails
         review={review}
         path={detailPath}
-        load={
-          loaded && loadDetails
-            ? loadDetails
-            : async (value, path, offset) => ({
-                version: 1,
-                id: value.id,
-                actionDigest: value.actionDigest,
-                ...toolReviewDetails(approval.arguments, undefined, path, offset),
-              })
-        }
+        load={loaded && loadDetails ? loadDetails : loadLegacyDetails}
         onBack={() => {
           const path = detailPath;
           setDetailPath(null);
@@ -340,11 +456,6 @@ function ApprovalRequest({
               : undefined
         }
       />
-      {!loaded && approval.arguments === undefined && (
-        <p className="pb-3 text-og-sm text-og-fg-muted">
-          Open the task with a compatible client to review this action.
-        </p>
-      )}
     </div>
   );
 }

package/src/components/artifacts/session-artifact-viewer.tsx

@@ -203,7 +203,7 @@ function EditableBody({
     workspaceId: string;
     sessionId: string;
     result:
-      | { kind: "ready"; config: NonNullable<ClientConfig["artifacts"]> }
+      | { kind: "ready"; config: Exclude<NonNullable<ClientConfig["artifacts"]>, false> }
       | { kind: "unavailable" }
       | { kind: "error"; error: unknown };
   } | null>(null);
@@ -359,7 +359,9 @@ function EditableBody({
   );
 }
 
-function artifactCapabilityKey(config: NonNullable<ClientConfig["artifacts"]>): string {
+function artifactCapabilityKey(
+  config: Exclude<NonNullable<ClientConfig["artifacts"]>, false>,
+): string {
   return JSON.stringify([
     config.editableLiveUrl,
     config.cachePartition.accountId,

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

@@ -1,3 +1,7 @@
+import {
+  COMPOSER_VOICE_INPUT_START_EVENT,
+  composerVoiceEventScope,
+} from "../composer-voice-events";
 import type {
   ClientVoiceInputConfig,
   OpenGeniClient,
@@ -35,6 +39,10 @@ export type ComposerTranscriptionMessages = {
   stop: string;
   cancel: string;
   retry: string;
+  /** Transcribe a recording that was stopped without transcribing or recovered. */
+  transcribeSaved: string;
+  /** Shown near the automatic stop; `{seconds}` is replaced. */
+  timeRemaining: string;
   pauseRetrying: string;
   requestingPermission: string;
   recording: string;
@@ -50,6 +58,9 @@ export type ComposerTranscriptionMessages = {
   errorPermissionDenied: string;
   errorNotSupported: string;
   errorUnavailable: string;
+  errorInsufficientCredits: string;
+  errorAllowanceExhausted: string;
+  errorPolicyBlocked: string;
   errorTooLarge: string;
   errorInvalidAudio: string;
   errorStorageUnavailable: string;
@@ -61,28 +72,34 @@ export type ComposerTranscriptionMessages = {
 const defaultMessages: ComposerTranscriptionMessages = {
   start: "Start voice input",
   stop: "Stop and transcribe",
-  cancel: "Cancel recording",
+  cancel: "Stop without transcribing",
   retry: "Retry voice input",
+  transcribeSaved: "Transcribe saved recording",
+  timeRemaining: "Stops and transcribes in {seconds}s",
   pauseRetrying: "Pause automatic retry",
   requestingPermission: "Requesting microphone…",
-  recording: "Recording. Press Escape to cancel.",
+  recording: "Recording. Press Escape to stop without transcribing.",
   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.",
+  retrying: "Saved. Retrying transcription…",
+  recovered: "Recording saved on this device.",
+  recoveredTranscript: "Transcript saved. Insert it into your draft?",
   insertRecoveredTranscript: "Insert saved transcript",
   discardRecovered: "Discard saved recording",
   unavailableDisabled: "Voice input is unavailable while the composer is disabled.",
   unavailable: "Voice input is unavailable for this workspace.",
-  errorPermissionDenied: "Microphone permission was denied. Your draft was not changed.",
+  errorPermissionDenied: "Microphone access is blocked. Allow it in site settings, then try again.",
   errorNotSupported: "Voice input is not supported on this device.",
   errorUnavailable: "Voice input is not configured.",
+  errorInsufficientCredits:
+    "Voice input needs credits. Recording saved; retry after adding credits.",
+  errorAllowanceExhausted: "Usage limit reached. Recording saved for later.",
+  errorPolicyBlocked: "Voice input isn't allowed for this account or workspace.",
   errorTooLarge: "Recording is too large. Try a shorter message.",
   errorInvalidAudio: "The recording could not be read. Try again.",
   errorStorageUnavailable: "Voice input stopped because audio could not be saved safely.",
-  errorRetryable: "Recording is saved locally. Retry transcription when ready.",
-  errorHandoffUncertain: "Transcript is saved. Check your draft before inserting it again.",
+  errorRetryable: "Saved. Transcription failed, retry when ready.",
+  errorHandoffUncertain: "Transcript saved. Check your draft before inserting again.",
   errorUnknown: "Voice input could not start. Try again.",
 };
 
@@ -146,12 +163,18 @@ export function ComposerTranscriptionControl({
   const capturing = status === "requesting-permission" || status === "recording";
 
   const cancelTranscription = transcription.cancel;
+  const discardTranscription = transcription.discard;
+  const hasRecoverableRecording = transcription.hasRecoverableRecording;
   useEffect(() => {
     if (!suppressed) return;
     if (status === "recording" || status === "requesting-permission") {
       cancelTranscription();
+    } else if (status === "error" && !hasRecoverableRecording) {
+      // Live voice took over: a stale start error (nothing saved) would only
+      // duplicate whatever live voice reports next to it.
+      void discardTranscription();
     }
-  }, [cancelTranscription, status, suppressed]);
+  }, [cancelTranscription, discardTranscription, hasRecoverableRecording, status, suppressed]);
   const active = capturing || status === "saving" || status === "transcribing";
   const recoverable =
     transcription.hasRecoverableRecording &&
@@ -187,11 +210,22 @@ export function ComposerTranscriptionControl({
                     ? (errorMessage ?? messages.errorUnknown)
                     : unavailableMessage;
 
+  const recoveredLabel = savedTranscript
+    ? (errorMessage ?? messages.recoveredTranscript)
+    : retrying
+      ? messages.retrying
+      : status === "error"
+        ? (errorMessage ?? messages.errorRetryable)
+        : messages.recovered;
+
   function start(event: MouseEvent<HTMLButtonElement>) {
     if (unavailableMessage) {
       event.preventDefault();
       return;
     }
+    composerVoiceEventScope(event.currentTarget)?.dispatchEvent(
+      new Event(COMPOSER_VOICE_INPUT_START_EVENT),
+    );
     void transcription.start();
   }
 
@@ -213,6 +247,9 @@ export function ComposerTranscriptionControl({
           )}
           data-transcription-status={status}
           data-transcription-capturing={capturing ? "" : undefined}
+          data-transcription-attention={
+            !capturing && (recoverable || (status === "error" && errorMessage)) ? "" : undefined
+          }
         >
           <span className="inline-flex min-w-0 items-center gap-1.5">
             <AnimatePresence mode="popLayout" initial={false}>
@@ -228,14 +265,11 @@ export function ComposerTranscriptionControl({
                     "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-11",
                   )}
                 >
-                  <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)
-                      : retrying
-                        ? messages.retrying
-                        : status === "error"
-                          ? (errorMessage ?? messages.errorRetryable)
-                          : messages.recovered}
+                  <span
+                    title={recoveredLabel}
+                    className="og-transcription-recovered-label max-w-56 line-clamp-2 text-og-xs leading-tight text-og-fg-muted max-sm:max-w-32"
+                  >
+                    {recoveredLabel}
                   </span>
                   <Tip
                     tip={
@@ -243,7 +277,9 @@ export function ComposerTranscriptionControl({
                         ? messages.insertRecoveredTranscript
                         : retrying
                           ? messages.pauseRetrying
-                          : messages.retry
+                          : status === "recovered"
+                            ? messages.transcribeSaved
+                            : messages.retry
                     }
                   >
                     <button
@@ -261,7 +297,9 @@ export function ComposerTranscriptionControl({
                           ? messages.insertRecoveredTranscript
                           : retrying
                             ? messages.pauseRetrying
-                            : messages.retry
+                            : status === "recovered"
+                              ? messages.transcribeSaved
+                              : messages.retry
                       }
                       className={cn(
                         "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
@@ -323,6 +361,13 @@ export function ComposerTranscriptionControl({
                         stream={status === "recording" ? transcription.stream : null}
                         mode={status === "recording" ? "recording" : "transcribing"}
                       />
+                      {status === "recording" && transcription.recordingStartedAt !== null ? (
+                        <RecordingClock
+                          startedAt={transcription.recordingStartedAt}
+                          maxSeconds={transcription.maxRecordingSeconds}
+                          remainingLabel={messages.timeRemaining}
+                        />
+                      ) : null}
                     </span>
                   )}
                   {status === "recording" ? (
@@ -394,14 +439,22 @@ export function ComposerTranscriptionControl({
               )}
             </AnimatePresence>
             {status === "error" && errorMessage && !recoverable ? (
-              <Tip tip={errorMessage}>
-                <span
-                  aria-hidden="true"
-                  className="og-transcription-error-label max-w-40 truncate text-og-xs text-og-status-failed max-sm:max-w-24"
-                >
+              // Nothing is saved in this state, so dismissing loses no speech.
+              <button
+                type="button"
+                title={errorMessage}
+                aria-label={`Dismiss: ${errorMessage}`}
+                onClick={() => void transcription.discard()}
+                className={cn(
+                  "inline-flex min-w-0 items-center gap-1 rounded-og-sm text-left outline-hidden",
+                  "text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent/45",
+                )}
+              >
+                <span className="og-transcription-error-label max-w-56 line-clamp-2 text-og-xs leading-tight max-sm:max-w-32">
                   {errorMessage}
                 </span>
-              </Tip>
+                <XIcon className="size-3 shrink-0 opacity-70" aria-hidden />
+              </button>
             ) : null}
             <span
               className="sr-only"
@@ -417,6 +470,42 @@ export function ComposerTranscriptionControl({
   );
 }
 
+/** Elapsed dictation time; warns before the automatic stop-and-transcribe. */
+function RecordingClock({
+  startedAt,
+  maxSeconds,
+  remainingLabel,
+}: {
+  startedAt: number;
+  maxSeconds: number | null;
+  remainingLabel: string;
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 500);
+    return () => clearInterval(timer);
+  }, []);
+  const elapsed = Math.max(0, Math.floor((now - startedAt) / 1_000));
+  const remaining = maxSeconds === null ? null : Math.max(0, maxSeconds - elapsed);
+  const warn = remaining !== null && remaining <= 15;
+  const label = `${Math.floor(elapsed / 60)}:${String(elapsed % 60).padStart(2, "0")}`;
+  return (
+    <span
+      data-recording-clock
+      title={warn ? remainingLabel.replace("{seconds}", String(remaining)) : undefined}
+      className={cn(
+        "min-w-[2.25rem] text-right text-og-xs tabular-nums",
+        warn ? "font-medium text-og-status-failed" : "text-og-fg-muted",
+      )}
+    >
+      {label}
+      {warn ? (
+        <span className="sr-only">{remainingLabel.replace("{seconds}", String(remaining))}</span>
+      ) : null}
+    </span>
+  );
+}
+
 function VoiceWaveform({
   stream,
   mode,
@@ -518,6 +607,13 @@ function restingLevels(count: number): number[] {
 
 function transcriptionErrorMessage(code: string, messages: ComposerTranscriptionMessages): string {
   switch (code) {
+    case "insufficient_credits":
+      return messages.errorInsufficientCredits;
+    case "allowance_exhausted":
+    case "monthly_model_cost_limit":
+      return messages.errorAllowanceExhausted;
+    case "policy_blocked":
+      return messages.errorPolicyBlocked;
     case "permission_denied":
       return messages.errorPermissionDenied;
     case "not_supported":

package/src/components/composer.tsx

@@ -967,6 +967,7 @@ export const Surface = forwardRef<HTMLDivElement, ComposerSurfaceProps>(function
   const controller = useComposerController();
   return (
     <div
+      data-og-composer-surface=""
       {...props}
       ref={ref}
       onDragOver={controller.attachments ? controller.handleDragOver : undefined}