@opengeni/react 1.4.2 → 1.4.5-canary.37458084490001

package/src/components/model-policy-picker.tsx

@@ -23,14 +23,21 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../lib/cn";
+import {
+  billingClassForMissingSelection,
+  defaultModelPolicyPickerMessages,
+  effectiveRows as sharedEffectiveRows,
+  groupPresentationFor,
+  SCOPED_BILLING_HINTS,
+  type ModelPickerGroupPresentation,
+  type ModelPolicyPickerMessages,
+} from "../model-picker-model";
 import { MENU_CHEVRON_CLASS } from "../lib/menu-styles";
 import { usePortalTokenSource, usePortalTokenStyle } from "../lib/use-portal-token-style";
 import {
-  effortOptionsForModel,
   findPickerRow,
   labelReasoningEffort,
-  projectClientModelRows,
-  scopedBillingClassLabel,
+  modelOffersEffortChoice,
   type PickerBillingClass,
   type PickerModelRow,
 } from "../model-policy";
@@ -44,72 +51,10 @@ const LazyModelPolicyPickerMenu = lazy(() =>
 type ClientPickerModelRow = PickerModelRow<ClientModel>;
 
 /** Presentation only; never changes model identity, billing or availability. */
-export type ModelPolicyPickerGroupPresentation = Partial<
-  Record<
-    PickerBillingClass,
-    {
-      label?: string | undefined;
-      /** Omit to preserve the default; null hides the supporting text. */
-      description?: string | null | undefined;
-      /** Decorative, non-interactive content. Omit for the default; null hides it. */
-      icon?: ReactNode | undefined;
-    }
-  >
->;
-
-export type ModelPolicyPickerMessages = {
-  label: string;
-  loading: string;
-  noModels: string;
-  connectTitle: string;
-  connectBody: string;
-  connectAction: string;
-  thinking: string;
-  fast: string;
-  fastRateHint: string;
-  codexOnly: string;
-  searchLabel?: string;
-  searchPlaceholder?: string;
-  currentModel?: string;
-  noMatches?: string;
-  unsupportedAttachments?: string;
-  thinkingEffort?: string;
-  selected?: string;
-  free?: string;
-
-  billingHints: Record<PickerBillingClass, string>;
-};
+export type ModelPolicyPickerGroupPresentation = ModelPickerGroupPresentation<ReactNode>;
 
-export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
-  label: "Model and effort",
-  loading: "Loading model catalog…",
-  noModels: "No models available.",
-  connectTitle: "Connect a model",
-  connectBody: "Use a subscription or a provider key you already have.",
-  connectAction: "Open Models",
-  thinking: "Thinking",
-  fast: "Fast",
-  fastRateHint: "2× rate",
-  codexOnly: "Codex-only session",
-  searchLabel: "Search models or providers",
-  searchPlaceholder: "Search models or providers…",
-  currentModel: "Current model",
-  noMatches: "No matching models. Try a model or provider name.",
-  unsupportedAttachments: "This model cannot view the attached images.",
-  thinkingEffort: "Thinking effort",
-  selected: "Selected",
-  free: "Free",
-
-  billingHints: {
-    opengeni_credits: "Provided by Opengeni",
-    external: "Provider terms and limits apply",
-    codex_subscription: "ChatGPT / Codex plan",
-    supergrok_subscription: "SuperGrok / xAI plan",
-    claude_subscription: "Claude plan",
-    byok: "Billed to the connected provider account",
-    organization_byok: "Billed to the connected provider account",
-  },
-};
+export { defaultModelPolicyPickerMessages, groupPresentationFor, SCOPED_BILLING_HINTS };
+export type { ModelPolicyPickerMessages };
 
 export type ModelPolicyPickerProps = {
   /** Host branding for payment-source groups, shared by menu and trigger. */
@@ -221,43 +166,6 @@ export function BillingClassMark(props: {
   );
 }
 
-function isCodexModel(model: ClientModel): boolean {
-  return model.id.startsWith("codex/") || model.source === "codex";
-}
-
-function billingClassForMissingSelection(modelId: string): PickerBillingClass {
-  if (modelId.startsWith("workspace-claude-subscription/")) return "claude_subscription";
-  if (modelId.startsWith("workspace-anthropic/")) return "byok";
-  if (modelId.startsWith("organization-claude-subscription/")) return "claude_subscription";
-  if (modelId.startsWith("organization-anthropic/")) return "organization_byok";
-  if (modelId.startsWith("workspace-gateway/")) return "byok";
-  if (modelId.startsWith("workspace-openrouter/")) return "byok";
-  // A deployment OpenRouter ID does not encode its workspace-facing cost.
-  // Missing rows therefore use the credits-safe rail instead of falsely
-  // claiming that an unknown former selection was externally funded.
-  if (modelId.startsWith("openrouter/")) return "opengeni_credits";
-  if (modelId.startsWith("codex/")) return "codex_subscription";
-  if (modelId.startsWith("supergrok/")) return "supergrok_subscription";
-  return "opengeni_credits";
-}
-
-function applyCodexOnly(
-  rows: ClientPickerModelRow[],
-  codexOnly: boolean,
-  unavailableReason: string,
-): ClientPickerModelRow[] {
-  if (!codexOnly) return rows;
-  return rows.map((row) =>
-    isCodexModel(row.catalog)
-      ? row
-      : {
-          ...row,
-          selectable: false,
-          unavailableReason: row.unavailableReason ?? unavailableReason,
-        },
-  );
-}
-
 /**
  * The trigger shows who makes the chosen model. Subscription rails already
  * carry their maker's mark (ChatGPT, Claude, Grok). Configured catalog logos win
@@ -306,27 +214,6 @@ const SCOPED_MARK_LABELS: Partial<Record<PickerBillingClass, string>> = {
   organization_byok: "Organization provider account",
 };
 
-/** Models settings keeps naming who is billed for a key. */
-export const SCOPED_BILLING_HINTS: Partial<Record<PickerBillingClass, string>> = {
-  byok: "Billed to the workspace provider account",
-  organization_byok: "Billed to the organization provider account",
-};
-
-/**
- * Host branding for a payment group. While scopes are collapsed, API keys are
- * one group, so either API-key presentation serves both.
- */
-export function groupPresentationFor(
-  props: Pick<ModelPolicyPickerProps, "groupPresentation" | "collapseScopes">,
-  billingClass: PickerBillingClass,
-): ModelPolicyPickerGroupPresentation[PickerBillingClass] {
-  const own = props.groupPresentation?.[billingClass];
-  if (own !== undefined || props.collapseScopes === false) return own;
-  if (billingClass === "byok") return props.groupPresentation?.organization_byok;
-  if (billingClass === "organization_byok") return props.groupPresentation?.byok;
-  return undefined;
-}
-
 /** A selection the catalog no longer lists: its clean name (settings keep the id). */
 function fallbackName(props: ModelPolicyPickerProps): string {
   return props.collapseScopes === false ? props.model : modelDisplayName(props.model);
@@ -339,24 +226,7 @@ const BRANDED_BILLING_CLASSES: ReadonlySet<PickerBillingClass> = new Set([
 ]);
 
 export function effectiveRows(props: ModelPolicyPickerProps): ClientPickerModelRow[] {
-  const rows = props.rows !== undefined ? props.rows : projectClientModelRows(props.models ?? []);
-  const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
-  return applyCodexOnly(rows, props.codexOnly === true, messages.codexOnly).map((row) => {
-    const scoped =
-      props.collapseScopes === false
-        ? {
-            ...row,
-            label: row.catalog.label,
-            billingClassLabel: scopedBillingClassLabel(row.billingClass),
-          }
-        : row;
-    if (props.collapseScopes === false) {
-      if (row.catalog.shortLabel) scoped.shortLabel = row.catalog.shortLabel;
-      else delete scoped.shortLabel;
-    }
-    const label = groupPresentationFor(props, row.billingClass)?.label;
-    return label === undefined ? scoped : { ...scoped, billingClassLabel: label };
-  });
+  return sharedEffectiveRows(props);
 }
 
 export function PickerNavRow(props: {
@@ -568,10 +438,7 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
             ? messages.connectTitle
             : (selected?.shortLabel ?? selected?.label ?? fallbackName(props))}
         </span>
-        {selected &&
-        !needsModel &&
-        effortOptionsForModel(selected.catalog).length > 1 &&
-        selected.catalog.capabilities?.reasoning.runnable !== false ? (
+        {selected && !needsModel && modelOffersEffortChoice(selected.catalog) ? (
           <span
             className="og-model-policy-effort min-w-0 shrink-[9999] truncate"
             title={labelReasoningEffort(props.effort)}

package/src/components/opper-mark.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+/**
+ * Opper's mark (the leaf-and-star symbol of the opper.ai wordmark), redrawn
+ * as a single currentColor path on a square box.
+ * Source: https://opper.ai (header logo SVG).
+ */
+export function OpperMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="-49.5 0 315 315" fill="currentColor" aria-hidden="true" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M159.78 315C71.53 315 0 244.49 0 157.5C0 -18.9499 159.78 0.650075 159.78 0.650075C159.78 87.2201 88.36 157.4 0.2 157.5C149.8 157.64 159.78 315 159.78 315ZM160.52 217.98C160.52 217.98 156.94 161.65 105.04 157.52C120.6 157.34 160.52 151.54 160.52 96.5601C160.52 151.54 200.44 157.34 216 157.52C164.1 161.63 160.52 217.98 160.52 217.98Z"
+      />
+    </svg>
+  );
+}

package/src/components/provider-recovery-notice.tsx

@@ -0,0 +1,41 @@
+import { Clock3Icon } from "lucide-react";
+
+import { cn } from "../lib/cn";
+import { providerRecoveryRetryingText, type ProviderRecoveryFacts } from "../lib/provider-recovery";
+
+export type ProviderRecoveryNoticeProps = {
+  /** From `currentProviderRecovery(session, events)`; renders nothing when null. */
+  recovery: ProviderRecoveryFacts | null | undefined;
+  /** Replaces the secondary line; `null` hides it. */
+  detail?: string | null | undefined;
+  className?: string | undefined;
+};
+
+export const PROVIDER_RECOVERY_NOTICE_DETAIL =
+  "Your message is saved. Opengeni keeps retrying automatically for a few minutes.";
+
+/**
+ * One calm, live status line while the same turn waits for an automatic retry
+ * after a transient provider failure. It replaces itself on every attempt
+ * instead of adding timeline rows, and disappears once the turn runs again.
+ */
+export function ProviderRecoveryNotice({
+  recovery,
+  detail,
+  className,
+}: ProviderRecoveryNoticeProps) {
+  if (!recovery) return null;
+  const secondary = detail === undefined ? PROVIDER_RECOVERY_NOTICE_DETAIL : detail;
+  return (
+    <div
+      className={cn("flex items-start gap-2 text-og-sm text-og-fg-muted", className)}
+      data-og-provider-recovery=""
+    >
+      <Clock3Icon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+      <div className="min-w-0" role="status" aria-live="polite">
+        <p className="font-medium text-og-fg">{providerRecoveryRetryingText(recovery)}</p>
+        {secondary ? <p className="mt-0.5 text-og-xs">{secondary}</p> : null}
+      </div>
+    </div>
+  );
+}

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

@@ -47,6 +47,16 @@ import {
   usePortalTokenStyle,
 } from "../lib/use-portal-token-style";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
+import {
+  projectPendingQueueMove,
+  QUEUE_COLLAPSED_PREVIEW_CHARACTERS,
+  QUEUE_REPLACE_DRAFT_COPY,
+  QUEUE_ROW_PREVIEW_CHARACTERS,
+  queueContentPreview,
+  queueMovePlan,
+  queuePromptPreview,
+  queueTurnPreview,
+} from "../queue-presentation-model";
 import { QUEUE_ITEM_CONTENT_UNAVAILABLE, queueItemContent } from "./queue-item-content";
 import { QueueErrorAlert, QueueStoppingStatus } from "./queue-surface-state";
 import { TimelineAnnotationsChip } from "./timeline-annotations";
@@ -127,36 +137,21 @@ export function QueueSurface({
       if (oldIndex < 0) return queue.queue;
       return arrayMove(queue.queue, oldIndex, keyboardDrag.projectedIndex);
     }
-    if (
-      !pendingMove ||
-      pendingMove.baseVersion === null ||
-      queue.snapshot?.version !== pendingMove.baseVersion
-    ) {
-      return queue.queue;
-    }
-    const byId = new Map(queue.queue.map((turn) => [turn.id, turn]));
-    const projected = pendingMove.turnIds.map((turnId) => byId.get(turnId));
     // Never let an optimistic ordering projection omit or invent a row. Any
     // concurrent authoritative membership change wins immediately.
-    if (projected.some((turn) => !turn) || projected.length !== queue.queue.length) {
-      return queue.queue;
-    }
-    return projected as SessionTurn[];
-  }, [keyboardDrag, pendingMove, queue.queue, queue.snapshot?.version]);
+    return projectPendingQueueMove(queue.queue, pendingMove, queue.snapshot);
+  }, [keyboardDrag, pendingMove, queue.queue, queue.snapshot]);
 
   const ids = useMemo(() => displayedQueue.map((turn) => turn.id), [displayedQueue]);
   const moveToIndex = useCallback(
     async (turnId: string, nextIndex: number): Promise<void> => {
       if (queue.mutating || pendingMove) return;
-      const oldIndex = queue.queue.findIndex((turn) => turn.id === turnId);
-      if (oldIndex < 0) return;
-      const boundedIndex = Math.max(0, Math.min(nextIndex, queue.queue.length - 1));
-      if (oldIndex === boundedIndex) return;
-      const ordered = arrayMove(queue.queue, oldIndex, boundedIndex);
-      const beforeTurnId = ordered[boundedIndex + 1]?.id ?? null;
+      const plan = queueMovePlan(queue.queue, turnId, nextIndex);
+      if (!plan) return;
+      const { beforeTurnId, index: boundedIndex } = plan;
       setPendingMove({
         baseVersion: queue.snapshot?.version ?? null,
-        turnIds: ordered.map((turn) => turn.id),
+        turnIds: plan.turnIds,
       });
       setAnnouncement(`Saving queued prompt at position ${boundedIndex + 1}.`);
       try {
@@ -510,327 +505,6 @@ function PendingMachineInputs({
   );
 }
 
-const QUEUE_ROW_PREVIEW_CHARACTERS = 360;
-const QUEUE_COLLAPSED_PREVIEW_CHARACTERS = 180;
-const QUEUE_PREVIEW_GRAPHEME_CONTEXT_CHARACTERS = 32;
-const QUEUE_PREVIEW_REFERENCE_SAMPLE_CHARACTERS = 32;
-const QUEUE_VISIBLE_END_IDENTITY_CHARACTERS = 18;
-const QUEUE_PREVIEW_SEPARATOR = " … ";
-const queuePreviewSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
-const queuePromptNonRenderingCodePoint =
-  /[\p{White_Space}\p{Control}\p{Default_Ignorable_Code_Point}]/u;
-
-type BoundedPromptSample = {
-  value: string;
-  characters: number;
-  truncated: boolean;
-};
-
-type QueuePromptPreview = {
-  summary: string;
-  collapsedVisual: string;
-  visibleStart: string;
-  visibleIdentity: string | null;
-  visibleIdentityLabel: "End" | "Safe boundary" | null;
-  isFallback: boolean;
-};
-
-function labelQueuePreview(summary: string): QueuePromptPreview {
-  return {
-    summary,
-    collapsedVisual: summary,
-    visibleStart: summary,
-    visibleIdentity: null,
-    visibleIdentityLabel: null,
-    isFallback: false,
-  };
-}
-
-function queueTurnPreview(
-  turn: SessionTurn | undefined,
-  maxCharacters: number,
-): QueuePromptPreview {
-  if (!turn) return queuePromptPreview("", maxCharacters);
-  return queueContentPreview(turn.prompt, turn.annotations?.length ?? 0, maxCharacters);
-}
-
-function queueContentPreview(
-  prompt: string,
-  annotationCount: number,
-  maxCharacters: number,
-): QueuePromptPreview {
-  switch (queueItemContent(prompt, annotationCount)) {
-    case "text":
-      return queuePromptPreview(prompt, maxCharacters);
-    case "annotations":
-      return labelQueuePreview(
-        `${annotationCount} timeline ${annotationCount === 1 ? "annotation" : "annotations"}`,
-      );
-    case "unavailable":
-      return labelQueuePreview(QUEUE_ITEM_CONTENT_UNAVAILABLE);
-  }
-}
-
-/**
- * Build a bounded head/tail summary of an arbitrary queued prompt. Sampling
- * both ends distinguishes prompts with equal long prefixes. Each sampled edge
- * has a small amount of grapheme context so ordinary emoji/combining sequences
- * can be retained whole. A cluster that exceeds that context is omitted rather
- * than fragmented, and malformed UTF-16 is replaced only in the summary. The
- * durable prompt remains exact and no operation scans or copies it in full.
- */
-function queuePromptPreview(prompt: string, maxCharacters: number): QueuePromptPreview {
-  const wholePromptProbe = samplePromptStart(prompt, maxCharacters + 1);
-  if (!wholePromptProbe.truncated && wholePromptProbe.characters <= maxCharacters) {
-    const summary = replaceLoneSurrogates(wholePromptProbe.value);
-    return hasVisiblePromptContent(summary)
-      ? {
-          summary,
-          collapsedVisual: summary,
-          visibleStart: summary,
-          visibleIdentity: null,
-          visibleIdentityLabel: null,
-          isFallback: false,
-        }
-      : fallbackPromptPreview(prompt.length, wholePromptProbe.value, wholePromptProbe.value);
-  }
-
-  const suffixCharacters = Math.min(Math.floor(maxCharacters / 3), 120);
-  const prefixCharacters =
-    maxCharacters - codePointLength(QUEUE_PREVIEW_SEPARATOR) - suffixCharacters;
-  const prefixSample = samplePromptStart(
-    prompt,
-    prefixCharacters + QUEUE_PREVIEW_GRAPHEME_CONTEXT_CHARACTERS,
-  );
-  const suffixSample = samplePromptEnd(
-    prompt,
-    suffixCharacters + QUEUE_PREVIEW_GRAPHEME_CONTEXT_CHARACTERS,
-  );
-  const prefixSegments = segmentPromptSample(prefixSample.value);
-  const suffixSegments = segmentPromptSample(suffixSample.value);
-
-  // A cluster at a truncated sampling edge may continue outside the sample.
-  // Prefix sampling starts at the true source start, so only its last segment
-  // is ambiguous. Suffix sampling ends at the true source end, so its first is.
-  if (prefixSample.truncated) prefixSegments.pop();
-  if (suffixSample.truncated) {
-    let ambiguousSegment = suffixSegments.shift();
-    // A locally segmented leading fragment ending in ZWJ can join the next
-    // pictographic segment when omitted left context supplies its base. Keep
-    // backing off until that uncertainty no longer propagates to the right.
-    while (ambiguousSegment?.endsWith("\u200d") && suffixSegments.length > 0) {
-      ambiguousSegment = suffixSegments.shift();
-    }
-    // Regional Indicator pairing depends on the parity of the preceding run.
-    // If that run reaches the unknown sample boundary, omit all of its visible
-    // leading segments rather than potentially recombining halves of flags.
-    while (suffixSegments[0] && startsWithRegionalIndicator(suffixSegments[0])) {
-      suffixSegments.shift();
-    }
-  }
-
-  const prefix = takeWholeGraphemesFromStart(prefixSegments, prefixCharacters);
-  const suffix = takeWholeGraphemesFromEnd(suffixSegments, suffixCharacters);
-  const reference = boundedPromptSampleReference(
-    prompt.length,
-    prefixSample.value,
-    suffixSample.value,
-  );
-
-  if (!hasVisiblePromptContent(prefix) && !hasVisiblePromptContent(suffix)) {
-    return fallbackPromptPreview(prompt.length, prefixSample.value, suffixSample.value);
-  }
-
-  const safeSuffix = hasVisiblePromptContent(suffix)
-    ? suffix
-    : promptPreviewFallbackLabel(reference);
-  const summary = `${prefix}${QUEUE_PREVIEW_SEPARATOR}${safeSuffix}`;
-  if (!hasVisiblePromptContent(prefix)) {
-    return {
-      summary,
-      collapsedVisual: summary,
-      visibleStart: safeSuffix,
-      visibleIdentity: null,
-      visibleIdentityLabel: null,
-      isFallback: false,
-    };
-  }
-
-  const endIdentity = takeWholeGraphemesFromEnd(
-    suffixSegments,
-    QUEUE_VISIBLE_END_IDENTITY_CHARACTERS,
-  );
-  return {
-    summary,
-    collapsedVisual: summary,
-    visibleStart: prefix,
-    visibleIdentity: hasVisiblePromptContent(endIdentity) ? endIdentity : `ref ${reference}`,
-    visibleIdentityLabel: hasVisiblePromptContent(endIdentity) ? "End" : "Safe boundary",
-    isFallback: false,
-  };
-}
-
-function fallbackPromptPreview(
-  promptLength: number,
-  startSample: string,
-  endSample: string,
-): QueuePromptPreview {
-  const reference = boundedPromptSampleReference(promptLength, startSample, endSample);
-  const summary = promptPreviewFallbackLabel(reference);
-  return {
-    summary,
-    collapsedVisual: `Omitted · ${reference}`,
-    // The complete fallback remains the canonical accessible summary. Narrow
-    // collapsed/row layouts paint the bounded reference in a compact truthful
-    // form so ellipsis cannot hide the only identifying portion.
-    visibleStart: `Omitted · ${reference}`,
-    visibleIdentity: null,
-    visibleIdentityLabel: null,
-    isFallback: true,
-  };
-}
-
-function promptPreviewFallbackLabel(reference: string): string {
-  return `Content omitted at safe boundary · ref ${reference}`;
-}
-
-function boundedPromptSampleReference(
-  promptLength: number,
-  startSample: string,
-  endSample: string,
-): string {
-  const head = samplePromptStart(startSample, QUEUE_PREVIEW_REFERENCE_SAMPLE_CHARACTERS).value;
-  const tail = samplePromptEnd(endSample, QUEUE_PREVIEW_REFERENCE_SAMPLE_CHARACTERS).value;
-  let hash = 0x811c9dc5;
-  for (const value of [String(promptLength), head, tail]) {
-    for (let index = 0; index < value.length; index += 1) {
-      hash ^= value.charCodeAt(index);
-      hash = Math.imul(hash, 0x01000193);
-    }
-    hash ^= 0xffff;
-    hash = Math.imul(hash, 0x01000193);
-  }
-  return (hash >>> 0).toString(16).padStart(8, "0").toUpperCase();
-}
-
-function hasVisiblePromptContent(value: string): boolean {
-  // Callers pass only the already-bounded whole/head/tail preview samples.
-  // Default-ignorables and controls can survive trim() while painting no row
-  // identity at all (for example ZWJ, VS16, bidi controls, and tag characters).
-  for (const character of value) {
-    if (!queuePromptNonRenderingCodePoint.test(character)) return true;
-  }
-  return false;
-}
-
-function samplePromptStart(prompt: string, maxCharacters: number): BoundedPromptSample {
-  let end = 0;
-  let characters = 0;
-  while (end < prompt.length && characters < maxCharacters) {
-    const first = prompt.charCodeAt(end);
-    end +=
-      isHighSurrogate(first) &&
-      end + 1 < prompt.length &&
-      isLowSurrogate(prompt.charCodeAt(end + 1))
-        ? 2
-        : 1;
-    characters += 1;
-  }
-  return { value: prompt.slice(0, end), characters, truncated: end < prompt.length };
-}
-
-function samplePromptEnd(prompt: string, maxCharacters: number): BoundedPromptSample {
-  let start = prompt.length;
-  let characters = 0;
-  while (start > 0 && characters < maxCharacters) {
-    start -= 1;
-    if (
-      isLowSurrogate(prompt.charCodeAt(start)) &&
-      start > 0 &&
-      isHighSurrogate(prompt.charCodeAt(start - 1))
-    ) {
-      start -= 1;
-    }
-    characters += 1;
-  }
-  return { value: prompt.slice(start), characters, truncated: start > 0 };
-}
-
-function segmentPromptSample(sample: string): string[] {
-  return Array.from(
-    queuePreviewSegmenter.segment(replaceLoneSurrogates(sample)),
-    ({ segment }) => segment,
-  );
-}
-
-function replaceLoneSurrogates(value: string): string {
-  let sanitized = "";
-  for (let index = 0; index < value.length; index += 1) {
-    const current = value.charCodeAt(index);
-    if (
-      isHighSurrogate(current) &&
-      index + 1 < value.length &&
-      isLowSurrogate(value.charCodeAt(index + 1))
-    ) {
-      sanitized += value.slice(index, index + 2);
-      index += 1;
-    } else if (isHighSurrogate(current) || isLowSurrogate(current)) {
-      sanitized += "�";
-    } else {
-      sanitized += value[index];
-    }
-  }
-  return sanitized;
-}
-
-function takeWholeGraphemesFromStart(segments: string[], maxCharacters: number): string {
-  const selected: string[] = [];
-  let characters = 0;
-  for (const segment of segments) {
-    const segmentCharacters = codePointLength(segment);
-    if (characters + segmentCharacters > maxCharacters) break;
-    selected.push(segment);
-    characters += segmentCharacters;
-  }
-  while (selected.at(-1)?.trim().length === 0) selected.pop();
-  return selected.join("");
-}
-
-function takeWholeGraphemesFromEnd(segments: string[], maxCharacters: number): string {
-  const selected: string[] = [];
-  let characters = 0;
-  for (let index = segments.length - 1; index >= 0; index -= 1) {
-    const segment = segments[index];
-    if (!segment) continue;
-    const segmentCharacters = codePointLength(segment);
-    if (characters + segmentCharacters > maxCharacters) break;
-    selected.unshift(segment);
-    characters += segmentCharacters;
-  }
-  while (selected[0]?.trim().length === 0) selected.shift();
-  while (selected.at(-1)?.trim().length === 0) selected.pop();
-  return selected.join("");
-}
-
-function codePointLength(value: string): number {
-  let characters = 0;
-  for (const _character of value) characters += 1;
-  return characters;
-}
-
-function startsWithRegionalIndicator(value: string): boolean {
-  const codePoint = value.codePointAt(0);
-  return codePoint !== undefined && codePoint >= 0x1f1e6 && codePoint <= 0x1f1ff;
-}
-
-function isHighSurrogate(codeUnit: number): boolean {
-  return codeUnit >= 0xd800 && codeUnit <= 0xdbff;
-}
-
-function isLowSurrogate(codeUnit: number): boolean {
-  return codeUnit >= 0xdc00 && codeUnit <= 0xdfff;
-}
-
 function QueuePrompt({
   prompt,
   annotations,
@@ -1192,25 +866,22 @@ function SortableQueueRow({
       </div>
       {confirmingReplace ? (
         <div className="mx-3 mb-2 rounded-md border border-status-waiting/30 bg-status-waiting/10 p-2 text-og-control text-fg">
-          <p>Your composer already has a draft. Replace it with this queued prompt?</p>
-          <p className="mt-0.5 text-fg-muted">
-            The current draft will be permanently discarded; this queued prompt is preserved until
-            you confirm.
-          </p>
+          <p>{QUEUE_REPLACE_DRAFT_COPY.title}</p>
+          <p className="mt-0.5 text-fg-muted">{QUEUE_REPLACE_DRAFT_COPY.detail}</p>
           <div className="mt-2 flex justify-end gap-1.5">
             <button
               type="button"
               className="rounded-md px-2 py-1 font-medium hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring/40"
               onClick={onCancelReplace}
             >
-              Keep current draft
+              {QUEUE_REPLACE_DRAFT_COPY.keep}
             </button>
             <button
               type="button"
               className="rounded-md border border-og-primary-border bg-og-primary text-og-primary-fg px-2 py-1 font-medium hover:bg-og-primary-hover focus-visible:ring-2 focus-visible:ring-ring/40"
               onClick={onConfirmReplace}
             >
-              Replace and edit
+              {QUEUE_REPLACE_DRAFT_COPY.replace}
             </button>
           </div>
         </div>