@opengeni/react 3.3.2 → 3.4.0

package/src/components/usage-meter.tsx

@@ -0,0 +1,382 @@
+import type { UsageAllowancePeriod, WorkspaceUsageResponse } from "@opengeni/sdk/usage-allowances";
+import type { ReactNode } from "react";
+
+import { useUsage, type UsageClientLike } from "../hooks/use-usage";
+import { cn } from "../lib/cn";
+import {
+  allowanceLabels,
+  allowanceResetSentence,
+  formatAllowanceInstant,
+  type AllowanceLabels,
+} from "../usage/allowance-copy";
+import {
+  summarizeUsage,
+  usagePercentLabel,
+  type UsageReading,
+  type UsageSummary,
+} from "../usage/summary";
+
+export type UsageMeterLabels = AllowanceLabels & {
+  /** Heading for the member's own ceiling. */
+  title: string;
+  /** Heading when only the shared workspace pool applies. */
+  workspaceTitle: string;
+  /** "38% left" — `percent` is preformatted ("38", "<1"). */
+  left: (percent: string) => string;
+  /** "62% used". */
+  used: (percent: string) => string;
+  limitReached: string;
+  /** Status chip beside a hero meter that is close to its limit. */
+  nearLimit: string;
+  /** "$13.00 left" for a hero meter with amounts. */
+  amountLeft: (amount: string) => string;
+  /** No ceiling applies to this member. */
+  unlimited: string;
+  loading: string;
+  error: string;
+  retry: string;
+  /** "$31.00 of $50.00 used" when the host passes `formatAmount`. */
+  amounts: (used: string, limit: string) => string;
+  /** The shared pool, under a member's own meter: "Workspace: 9% left". */
+  workspaceLine: (value: string) => string;
+};
+
+export const DEFAULT_USAGE_METER_LABELS: UsageMeterLabels = {
+  ...allowanceLabels(),
+  title: "Your usage",
+  workspaceTitle: "Workspace usage",
+  left: (percent) => `${percent}% left`,
+  used: (percent) => `${percent}% used`,
+  limitReached: "Limit reached",
+  nearLimit: "Near limit",
+  amountLeft: (amount) => `${amount} left`,
+  unlimited: "No usage limit",
+  loading: "Checking usage…",
+  error: "Couldn't load usage",
+  retry: "Try again",
+  amounts: (used, limit) => `${used} of ${limit} used`,
+  workspaceLine: (value) => `Workspace: ${value}`,
+};
+
+export type UsageMeterBaseProps = {
+  /** "left" (default) reads like a battery; "used" reads like spend. */
+  measure?: "left" | "used" | undefined;
+  /**
+   * Opt in to amounts. Receives USD micros; return your own unit ("$31.00",
+   * "3.1 credits", "1.5× plan"). Without it the meter shows only shares.
+   */
+  formatAmount?: ((micros: number) => string) | undefined;
+  labels?: Partial<UsageMeterLabels> | undefined;
+  /**
+   * `compact` is one line for menus and headers; `hero` leads a page with the
+   * amount (or share) left in large type. An empty `labels.title` hides the
+   * heading when the page already names it.
+   */
+  density?: "default" | "compact" | "hero" | undefined;
+  /** Show the shared pool under the member's own meter when it is the tighter one. Default true. */
+  showWorkspace?: boolean | undefined;
+  className?: string | undefined;
+};
+
+export type UsageMeterProps = UsageMeterBaseProps & {
+  /**
+   * A usage response you already loaded (for example from `useUsage`).
+   * Omit it to let the meter read `/usage/me` itself.
+   */
+  usage?: WorkspaceUsageResponse | null | undefined;
+  client?: UsageClientLike | undefined;
+  workspaceId?: string | undefined;
+  period?: UsageAllowancePeriod | undefined;
+  /** Re-read when this changes (see `useUsage`). */
+  refreshKey?: unknown;
+};
+
+/**
+ * The signed-in member's own usage: how much of their limit is left and when
+ * it resets. Shares only by default; hosts opt in to amounts.
+ */
+export function UsageMeter({
+  usage,
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}: UsageMeterProps) {
+  if (usage !== undefined) {
+    return (
+      <UsageMeterView
+        {...view}
+        summary={usage ? summarizeUsage(usage) : null}
+        loading={usage === null}
+      />
+    );
+  }
+  return (
+    <LoadingUsageMeter
+      {...view}
+      client={client}
+      workspaceId={workspaceId}
+      period={period}
+      refreshKey={refreshKey}
+    />
+  );
+}
+
+function LoadingUsageMeter({
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}: UsageMeterBaseProps &
+  Pick<UsageMeterProps, "client" | "workspaceId" | "period" | "refreshKey">) {
+  const state = useUsage({ client, workspaceId, period, refreshKey });
+  return (
+    <UsageMeterView
+      {...view}
+      summary={state.summary}
+      loading={state.loading && !state.summary}
+      error={state.summary ? null : state.error}
+      onRetry={() => void state.refresh()}
+    />
+  );
+}
+
+export type UsageMeterViewProps = UsageMeterBaseProps & {
+  summary: UsageSummary | null;
+  loading?: boolean | undefined;
+  error?: Error | null | undefined;
+  onRetry?: (() => void) | undefined;
+};
+
+const FILL: Record<UsageReading["status"], string> = {
+  ok: "bg-og-accent",
+  warning: "bg-og-status-waiting",
+  exhausted: "bg-og-danger",
+};
+
+function valueText(
+  reading: UsageReading,
+  measure: "left" | "used",
+  labels: UsageMeterLabels,
+): string {
+  if (reading.status === "exhausted") return labels.limitReached;
+  return measure === "left"
+    ? labels.left(usagePercentLabel(Math.max(0, 1 - reading.fraction)))
+    : labels.used(usagePercentLabel(reading.fraction));
+}
+
+/** Presentational meter for a summary you computed (`summarizeUsage`). */
+export function UsageMeterView({
+  summary,
+  loading = false,
+  error = null,
+  onRetry,
+  measure = "left",
+  formatAmount,
+  labels: overrides,
+  density = "default",
+  showWorkspace = true,
+  className,
+}: UsageMeterViewProps) {
+  const labels = { ...DEFAULT_USAGE_METER_LABELS, ...overrides };
+  const compact = density === "compact";
+  if (loading || error || !summary) {
+    return (
+      <div
+        className={cn("og-root min-w-0 text-og-sm", className)}
+        data-og-usage-meter={error ? "error" : "loading"}
+        aria-busy={loading || undefined}
+      >
+        {error ? (
+          <p className="flex flex-wrap items-center gap-x-2 text-og-fg-muted" role="alert">
+            {labels.error}
+            {onRetry ? (
+              <button
+                type="button"
+                onClick={onRetry}
+                className="rounded-og-sm og-link focus-visible:outline-2 focus-visible:outline-og-accent"
+              >
+                {labels.retry}
+              </button>
+            ) : null}
+          </p>
+        ) : (
+          <span className="text-og-fg-subtle">{labels.loading}</span>
+        )}
+      </div>
+    );
+  }
+  const primary = summary.member ?? summary.workspace;
+  if (!primary) {
+    return (
+      <div
+        className={cn("og-root min-w-0 text-og-sm text-og-fg-muted", className)}
+        data-og-usage-meter="unlimited"
+      >
+        {compact ? null : <span className="font-medium text-og-fg">{labels.title} · </span>}
+        {labels.unlimited}
+      </div>
+    );
+  }
+  const title = summary.member ? labels.title : labels.workspaceTitle;
+  const value = valueText(primary, measure, labels);
+  // The bar always fills with what's used, so "near the limit" reads as a
+  // nearly full bar whichever way the words count.
+  const fill = Math.min(1, Math.max(0, primary.fraction));
+  const reset = allowanceResetSentence(labels, primary.resetsAt);
+  const pool =
+    showWorkspace &&
+    summary.member &&
+    summary.workspace &&
+    (summary.binding?.scope === "workspace" || summary.workspace.status !== "ok")
+      ? summary.workspace
+      : null;
+  const meterProps = {
+    role: "meter" as const,
+    "aria-label": title || labels.title,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": Math.round(fill * 100),
+    "aria-valuetext": `${value}. ${reset}${
+      pool ? ` ${labels.workspaceLine(valueText(pool, measure, labels))}.` : ""
+    }`,
+  };
+  const bar = (
+    <span
+      aria-hidden
+      className={cn(
+        "relative block overflow-hidden rounded-full",
+        density === "hero" ? "h-1.5" : "h-1",
+        primary.status === "exhausted" ? "bg-og-danger/15" : "bg-og-surface-3",
+        compact ? "w-16 shrink-0" : "w-full",
+      )}
+    >
+      <span
+        className={cn("absolute inset-y-0 left-0 rounded-full", FILL[primary.status])}
+        style={{ width: `${Math.round(fill * 1000) / 10}%` }}
+      />
+    </span>
+  );
+  const valueClass = cn(
+    "shrink-0 whitespace-nowrap tabular-nums",
+    primary.status === "ok" ? "text-og-fg-muted" : "font-medium",
+    primary.status === "warning" && "text-og-status-waiting",
+    primary.status === "exhausted" && "text-og-danger",
+  );
+  if (compact) {
+    return (
+      <span
+        {...meterProps}
+        data-og-usage-meter={primary.status}
+        title={primary.resetsAt ? `${reset} ${formatAllowanceInstant(primary.resetsAt)}` : reset}
+        className={cn("og-root inline-flex min-w-0 items-center gap-2 text-og-xs", className)}
+      >
+        <span className={valueClass}>{value}</span>
+        {bar}
+      </span>
+    );
+  }
+  const amounts = formatAmount
+    ? labels.amounts(formatAmount(primary.used), formatAmount(primary.limit))
+    : null;
+  if (density === "hero") {
+    // Lead with what's left, even at zero; the chip names the state.
+    const headline = formatAmount
+      ? labels.amountLeft(formatAmount(primary.remaining))
+      : labels.left(usagePercentLabel(Math.max(0, 1 - primary.fraction)));
+    return (
+      <div
+        {...meterProps}
+        data-og-usage-meter={primary.status}
+        className={cn("og-root flex min-w-0 flex-col gap-3", className)}
+      >
+        {title ? <span className="text-og-sm font-medium text-og-fg-muted">{title}</span> : null}
+        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+          <span className="text-2xl leading-8 font-semibold tracking-[-0.5px] text-og-fg tabular-nums">
+            {headline}
+          </span>
+          {primary.status !== "ok" ? (
+            <span
+              className={cn(
+                "inline-flex h-[22px] items-center gap-1.5 rounded-full border px-2 text-og-xs font-medium",
+                primary.status === "warning"
+                  ? "border-og-status-waiting/30 text-og-status-waiting"
+                  : "border-og-danger/30 text-og-danger",
+              )}
+            >
+              <span
+                aria-hidden
+                className={cn(
+                  "size-1.5 rounded-full",
+                  primary.status === "warning" ? "bg-og-status-waiting" : "bg-og-danger",
+                )}
+              />
+              {primary.status === "warning" ? labels.nearLimit : labels.limitReached}
+            </span>
+          ) : null}
+        </div>
+        {bar}
+        <p className="text-og-xs text-og-fg-muted tabular-nums">
+          {[
+            amounts ?? labels.used(usagePercentLabel(primary.fraction)),
+            amounts ? `${usagePercentLabel(primary.fraction)}%` : null,
+          ]
+            .filter(Boolean)
+            .join(" · ")}{" "}
+          ·{" "}
+          <span title={primary.resetsAt ? formatAllowanceInstant(primary.resetsAt) : undefined}>
+            {reset}
+          </span>
+        </p>
+        {pool ? <PoolLine reading={pool} measure={measure} labels={labels} /> : null}
+      </div>
+    );
+  }
+  return (
+    <div
+      {...meterProps}
+      data-og-usage-meter={primary.status}
+      className={cn("og-root flex min-w-0 flex-col gap-2 text-og-sm", className)}
+    >
+      <div className="flex min-w-0 items-baseline justify-between gap-3">
+        <span className="min-w-0 truncate font-medium text-og-fg">{title}</span>
+        <span className={valueClass}>{value}</span>
+      </div>
+      {bar}
+      <div className="flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1 text-og-xs text-og-fg-subtle">
+        <span title={primary.resetsAt ? formatAllowanceInstant(primary.resetsAt) : undefined}>
+          {reset}
+        </span>
+        {amounts ? <span className="tabular-nums">{amounts}</span> : null}
+      </div>
+      {pool ? <PoolLine reading={pool} measure={measure} labels={labels} /> : null}
+    </div>
+  );
+}
+
+function PoolLine({
+  reading,
+  measure,
+  labels,
+}: {
+  reading: UsageReading;
+  measure: "left" | "used";
+  labels: UsageMeterLabels;
+}): ReactNode {
+  return (
+    <p
+      className={cn(
+        "text-og-xs",
+        reading.status === "exhausted"
+          ? "font-medium text-og-danger"
+          : reading.status === "warning"
+            ? "text-og-status-waiting"
+            : "text-og-fg-muted",
+      )}
+    >
+      {labels.workspaceLine(valueText(reading, measure, labels))}
+    </p>
+  );
+}

package/src/components/use-viewer-menu-dismiss.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+
+/** Keep native details menus dismissible without letting Escape close the dock. */
+export function useViewerMenuDismiss(enabled = true) {
+  const ref = useRef<HTMLDetailsElement | null>(null);
+  useEffect(() => {
+    const menu = ref.current;
+    if (!enabled || !menu) return;
+    const document = menu.ownerDocument;
+    const pointerDown = (event: PointerEvent) => {
+      if (menu.open && !event.composedPath().includes(menu)) menu.open = false;
+    };
+    const focusIn = (event: FocusEvent) => {
+      if (menu.open && !event.composedPath().includes(menu)) menu.open = false;
+    };
+    const keyDown = (event: KeyboardEvent) => {
+      if (!menu.open || event.key !== "Escape" || !event.composedPath().includes(menu)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      menu.open = false;
+      menu.querySelector("summary")?.focus();
+    };
+    document.addEventListener("pointerdown", pointerDown, true);
+    document.addEventListener("focusin", focusIn, true);
+    document.addEventListener("keydown", keyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", pointerDown, true);
+      document.removeEventListener("focusin", focusIn, true);
+      document.removeEventListener("keydown", keyDown, true);
+    };
+  }, [enabled]);
+  return ref;
+}

package/src/components/user-message-body.tsx

@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../lib/cn";
+import { useTimelineSearchReveal } from "./timeline-search";
 
 const FALLBACK_LINE_THRESHOLD = 12;
 const FALLBACK_TEXT_THRESHOLD = 900;
@@ -190,7 +191,15 @@ function observeSharedResize(element: Element, callback: () => void): (() => voi
   };
 }
 
+export type UserMessageDisclosureLabels = {
+  /** Collapsed disclosure action. Defaults to "Show more". */
+  showMore?: string | undefined;
+  /** Expanded disclosure action. Defaults to "Show less". */
+  showLess?: string | undefined;
+};
+
 export type UserMessageDisclosureContextValue = {
+  labels?: UserMessageDisclosureLabels | undefined;
   expandedByMessageId: Map<string, boolean>;
   beginChange: (
     messageBody: HTMLElement,
@@ -235,6 +244,8 @@ export type UserMessageBodyProps = {
   text: string;
   children: ReactNode;
   className?: string | undefined;
+  /** Per-field overrides for timeline labels, then the English defaults. */
+  disclosureLabels?: UserMessageDisclosureLabels | undefined;
 };
 
 /**
@@ -247,11 +258,23 @@ export type UserMessageBodyProps = {
  * remembers expansion per durable message id and preserves the reader's scroll
  * anchor when height changes.
  */
-export function UserMessageBody({ messageId, text, children, className }: UserMessageBodyProps) {
+export function UserMessageBody({
+  messageId,
+  text,
+  children,
+  className,
+  disclosureLabels,
+}: UserMessageBodyProps) {
   const disclosure = useContext(UserMessageDisclosureContext);
   const [expanded, setExpanded] = useState(
     () => disclosure?.expandedByMessageId.get(messageId) ?? false,
   );
+  const searchReveal = useTimelineSearchReveal();
+  useLayoutEffect(() => {
+    if (!searchReveal) return;
+    setExpanded(true);
+    disclosure?.expandedByMessageId.set(messageId, true);
+  }, [searchReveal, messageId, disclosure]);
   const collapsibleRef = useRef(userMessageLikelyNeedsDisclosure(text));
   const expandedRef = useRef(expanded);
   expandedRef.current = expanded;
@@ -454,7 +477,9 @@ export function UserMessageBody({ messageId, text, children, className }: UserMe
         className="mt-1.5 inline-flex min-h-7 items-center rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-hidden transition-colors hover:bg-og-surface-3/60 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:min-h-11"
         onClick={(event) => toggle(event.currentTarget)}
       >
-        {expanded ? "Show less" : "Show more"}
+        {expanded
+          ? (disclosureLabels?.showLess ?? disclosure?.labels?.showLess ?? "Show less")
+          : (disclosureLabels?.showMore ?? disclosure?.labels?.showMore ?? "Show more")}
       </button>
     </div>
   );

package/src/components/workspace-dock.tsx

@@ -109,6 +109,9 @@ const useDockLayoutEffect = typeof window === "undefined" ? useEffect : useLayou
  */
 const DOCK_OVERLAY_BREAKPOINT = 1024;
 
+/** The panel group's layout while the dock is closed. */
+const CLOSED_LAYOUT: Layout = { primary: 100, dock: 0 };
+
 /** SSR-safe `(max-width: …)` match; false until mounted, then live. */
 function useIsNarrow(maxWidth: number): boolean {
   const [narrow, setNarrow] = useState(false);
@@ -161,6 +164,8 @@ export function WorkspaceDock({
   // dismiss it; standalone usage keeps the thin reopen rail as well.
   const hostControlled = collapsedProp !== undefined;
   const previousCollapsedRef = useRef(collapsed);
+  const collapsedNowRef = useRef(collapsed);
+  collapsedNowRef.current = collapsed;
 
   // Persisted layout (width split) keyed by autoSaveId.
   const { defaultLayout, onLayoutChanged } = useDefaultLayout({
@@ -170,6 +175,11 @@ export function WorkspaceDock({
   });
   const expandedDefaultLayout =
     defaultLayout && (defaultLayout.dock ?? 0) > 1 ? defaultLayout : undefined;
+  // A panel group reads its starting layout once, when it mounts (on first
+  // render, and again whenever the window widens out of the overlay). A
+  // closed dock starts closed, so it never shows its saved width for a frame
+  // or keeps it as an invisible column.
+  const mountLayout = collapsed ? CLOSED_LAYOUT : expandedDefaultLayout;
   const lastExpandedSizeRef = useRef(expandedDefaultLayout?.dock ?? defaultSize);
   const layoutIdentityRef = useRef(autoSaveId);
   if (layoutIdentityRef.current !== autoSaveId) {
@@ -220,6 +230,13 @@ export function WorkspaceDock({
     }
   }, [collapsedProp, dockPanelRef]);
 
+  // Widening past the overlay breakpoint mounts a fresh panel group at its
+  // saved split. A closed dock must stay closed there, not hold its old width
+  // as an invisible column beside the chat.
+  useDockLayoutEffect(() => {
+    if (!narrow && collapsedNowRef.current) dockPanelRef.current?.collapse();
+  }, [narrow, dockPanelRef]);
+
   // Treat the narrow overlay like a real modal: remember the external opener,
   // move focus into the selected tab, and restore it on close. The standalone
   // desktop dock instead focuses its newly-visible reopen rail after collapse.
@@ -453,7 +470,7 @@ export function WorkspaceDock({
       <Group
         orientation="horizontal"
         className="min-h-0 flex-1"
-        {...(expandedDefaultLayout ? { defaultLayout: expandedDefaultLayout } : {})}
+        {...(mountLayout ? { defaultLayout: mountLayout } : {})}
         onLayoutChanged={persistExpandedLayout}
       >
         <Panel id="primary" minSize="30%" className="min-h-0 min-w-0">

package/src/composer-messages.ts

@@ -0,0 +1,150 @@
+/**
+ * The composer's user-facing copy, renderer-free so web and native composers
+ * (and hosts translating them) share one message catalog.
+ */
+import type { SlashCommand } from "./commands/types";
+import { formatBytes, formatRelativeTime } from "./lib/format";
+
+export type ChatComposerMessages = {
+  messagePlaceholder: string;
+  pausedPlaceholder: string;
+  inputLabel: string;
+  keyboardHint: string;
+  slashCommandBlocked: string;
+  controlChangedError: string;
+  sendFailedError: string;
+  dropFiles: string;
+  attachFiles: string;
+  pauseAriaLabel: string;
+  pauseTitle: string;
+  /** Stop control shown while a response runs (`runControl="stop"`). */
+  stopAriaLabel?: string | undefined;
+  stopTitle?: string | undefined;
+  sendMessageAriaLabel: string;
+  sendAndResumeAriaLabel: string;
+  sendTitle: string;
+  sendAndResumeTitle: string;
+  annotationNotesRequired: string;
+  workspacePaused: string;
+  pausedHere: string;
+  parentBlocker: string;
+  narrowerPause: string;
+  pausedBy: (displayName: string) => string;
+  queuedAhead: (count: number) => string;
+  resumingAndSending: string;
+  nextMessageResumes: string;
+  resumeThisWorkstream: string;
+  resumeShort: string;
+  hidePauseDetails: string;
+  showPauseDetails: string;
+  pauseReasonsLabel: string;
+  pausedByLabel: string;
+  alsoPausedByLabel: string;
+  resumeWorkspace: string;
+  resumeFromSession: string;
+  sessionCanRun: string;
+  stillPausedBy: (displayName: string) => string;
+  restoredResourcesLabel: string;
+  restoredFile: (fileId: string) => string;
+  removeRestoredResource: (index: number) => string;
+  uploading: string;
+  uploadFailed: string;
+  previewAttachment: (name: string) => string;
+  previewUnavailable?: string | undefined;
+  attachmentPreviewLabel: string;
+  downloadAttachment: (name: string) => string;
+  closeAttachmentPreview: string;
+  retryAttachment: (name: string) => string;
+  retryUpload: string;
+  removeAttachment: (name: string) => string;
+  confirmCommand: (name: string) => string;
+  confirmDescription: (command: SlashCommand) => string;
+  cancel: string;
+  runCommand: (name: string) => string;
+  commands: string;
+  slashCommandsLabel: string;
+  modelLabel: string;
+  close: string;
+  danger: string;
+  draftConflict: string;
+  useOtherDraft: string;
+  keepMine: string;
+  savingDraft: string;
+  formatBytes: (bytes: number) => string;
+  formatRelativeTime: (changedAt: string) => string;
+};
+
+export const defaultChatComposerMessages: ChatComposerMessages = {
+  messagePlaceholder: "Message the agent…",
+  pausedPlaceholder: "Message the agent — it will wait in the queue…",
+  inputLabel: "Message the agent",
+  // Shortcuts live in the send button's title; the footer stays quiet unless
+  // the host supplies its own hint.
+  keyboardHint: "",
+  slashCommandBlocked:
+    "That's a slash command — press Enter in the command list to run it, or edit the line to send a message.",
+  controlChangedError:
+    "This workstream was paused while you were sending. Nothing was sent, and your draft is still here.",
+  sendFailedError: "Sending failed — your draft is still here. Try again.",
+  dropFiles: "Drop files to attach",
+  attachFiles: "Attach files",
+  pauseAriaLabel: "Pause this workstream",
+  pauseTitle: "Pause this workstream; queued prompts and approvals are preserved",
+  stopAriaLabel: "Stop",
+  stopTitle: "Stop the response",
+  sendMessageAriaLabel: "Send message",
+  sendAndResumeAriaLabel: "Add message to queue",
+  sendTitle: "Queue message (Enter); steer with Cmd/Ctrl+Enter",
+  sendAndResumeTitle: "Add to queue (Enter); steer now with Cmd/Ctrl+Enter",
+  annotationNotesRequired: "Add a note to each quote before sending.",
+  workspacePaused: "Workspace paused",
+  pausedHere: "Paused here",
+  parentBlocker: "parent",
+  narrowerPause: "a narrower pause",
+  pausedBy: (displayName) => `Paused by ${displayName}`,
+  queuedAhead: (count) =>
+    `${count} waiting prompt${count === 1 ? "" : "s"}; your message joins the queue.`,
+  resumingAndSending: "Sending…",
+  nextMessageResumes: "Messages wait in the queue until you resume.",
+  resumeThisWorkstream: "Resume this workstream",
+  resumeShort: "Resume",
+  hidePauseDetails: "Hide pause details",
+  showPauseDetails: "Show pause details",
+  pauseReasonsLabel: "Reasons this workstream is paused",
+  pausedByLabel: "Paused by ",
+  alsoPausedByLabel: "Also paused by ",
+  resumeWorkspace: "Resume workspace",
+  resumeFromSession: "Resume from this session",
+  sessionCanRun: "This session will be able to run",
+  stillPausedBy: (displayName) => `Still paused by ${displayName}`,
+  restoredResourcesLabel: "Restored prompt resources",
+  restoredFile: (fileId) => `File ${fileId.slice(0, 8)}`,
+  removeRestoredResource: (index) => `Remove restored resource ${index + 1}`,
+  uploading: "Uploading",
+  uploadFailed: "Upload failed",
+  previewAttachment: (name) => `Preview ${name}`,
+  previewUnavailable: "Preview unavailable",
+  attachmentPreviewLabel: "Attachment preview",
+  downloadAttachment: (name) => `Download ${name}`,
+  closeAttachmentPreview: "Close",
+  retryAttachment: (name) => `Retry ${name}`,
+  retryUpload: "Retry upload",
+  removeAttachment: (name) => `Remove ${name}`,
+  confirmCommand: (name) => `Confirm /${name}`,
+  confirmDescription: (command) => `Run /${command.name}? ${command.description}`,
+  cancel: "Cancel",
+  runCommand: (name) => `Run /${name}`,
+  commands: "Commands",
+  slashCommandsLabel: "Slash commands",
+  modelLabel: "Model",
+  close: "Close",
+  danger: "danger",
+  draftConflict: "This draft changed in another tab. Your local draft is still here.",
+  useOtherDraft: "Use other draft",
+  keepMine: "Keep mine",
+  // Kept for embedder message overrides / back-compat. Routine autosave is
+  // silent — only draft conflicts surface under the composer.
+  savingDraft: "Saving draft…",
+  formatBytes,
+  formatRelativeTime,
+};