@opengeni/react 6.7.0 → 6.7.1-canary.41759707569001

package/src/components/timeline-anchor.tsx

@@ -9,26 +9,31 @@ type Anchor = {
 };
 export type TimelineAnchor = Anchor[];
 
+/**
+ * A text selection inside the timeline. Content must not move beneath it, so it
+ * is the one non-scroll signal that hands the view to the reader.
+ */
+export function timelineHasSelection(scroller: HTMLElement | null): boolean {
+  if (!scroller) return false;
+  const selection = scroller.ownerDocument.getSelection();
+  return Boolean(
+    selection &&
+    !selection.isCollapsed &&
+    (scroller.contains(selection.anchorNode) || scroller.contains(selection.focusNode)),
+  );
+}
+
 /**
  * Read ownership synchronously: selectionchange may follow the next React commit.
- * Focus left on a card the person just answered is not reading: that answer
- * handed the view back to the conversation's tip.
+ * Focus inside the timeline protects the focused content from settlement
+ * compaction and motion; it never decides bottom-follow (see message-timeline).
  */
-export function timelineHasReader(
-  scroller: HTMLElement | null,
-  answeredCard: HTMLElement | null = null,
-): boolean {
+export function timelineHasReader(scroller: HTMLElement | null): boolean {
   if (!scroller) return false;
   const focused = scroller.ownerDocument.activeElement;
-  const selection = scroller.ownerDocument.getSelection();
   return Boolean(
-    (focused &&
-      focused !== scroller &&
-      scroller.contains(focused) &&
-      !answeredCard?.contains(focused)) ||
-    (selection &&
-      !selection.isCollapsed &&
-      (scroller.contains(selection.anchorNode) || scroller.contains(selection.focusNode))),
+    (focused && focused !== scroller && scroller.contains(focused)) ||
+    timelineHasSelection(scroller),
   );
 }
 

package/src/components/timeline-reading-progress.ts

@@ -12,9 +12,8 @@ export function useReadingProgress(
   projected: TimelineGroup[],
   pinned: boolean,
   scroller: HTMLElement | null,
-  answeredCard: HTMLElement | null = null,
 ) {
-  const following = pinned && !timelineHasReader(scroller, answeredCard);
+  const following = pinned && !timelineHasReader(scroller);
   const previous = useRef<TimelineGroup[]>([]);
   const [released, setReleased] = useState<ReadonlySet<string>>(() => new Set());
   const groups = useMemo(() => {

package/src/components/timeline-settlement.ts

@@ -7,11 +7,11 @@ export type TimelineSettlement = { element: HTMLElement; top: number };
 export function captureTimelineSettlement(
   scroller: HTMLElement,
   groups: readonly { key: string; group: TimelineGroup }[],
-  answeredCard: HTMLElement | null = null,
 ): TimelineSettlement | null {
   // Selectionchange can arrive after this commit. Inspect ownership directly
-  // as well as the caller's pin latch so that race cannot move selected text.
-  if (timelineHasReader(scroller, answeredCard)) return null;
+  // as well as the caller's pin latch so that race cannot move selected text
+  // or a focused control.
+  if (timelineHasReader(scroller)) return null;
   const live = Array.from(
     scroller.querySelectorAll(
       '[data-og-exchange-status="working"], [data-og-exchange-status="waiting"]',

package/src/lib/format.ts

@@ -291,6 +291,44 @@ export function isConnectionAccountSubmissionError(error: unknown): boolean {
 /** `details.code` the API sets on a 422 for a model missing from the live catalog. */
 export const MODEL_UNAVAILABLE_DETAIL_CODE = "model_unavailable";
 
+/** `details.code` the API sets on a 422 for a model the workspace's policy refuses. */
+export const MODEL_POLICY_DETAIL_CODE = "model_policy";
+
+/**
+ * The reason a refused new chat gives. The refusals a person can hit (a model
+ * that isn't available to them, the workspace's model policy, a speed the
+ * model can't run) are typed by `details.code` and worded here; any other
+ * session create refusal shows the server's own reason, which still says more
+ * than the generic "check your input".
+ */
+export function sessionCreateRefusalMessage(t: OpenGeniText, error: Error): string | null {
+  if (!(error instanceof OpenGeniApiError) || error.status !== 422) return null;
+  const detailCode = error.details?.code;
+  if (detailCode === "UNSUPPORTED_LATENCY_MODE") {
+    return t("lib.format.speedUnavailable");
+  }
+  if (error.code !== "SESSION_CREATE_REJECTED") return null;
+  if (detailCode === MODEL_UNAVAILABLE_DETAIL_CODE) {
+    return t("lib.format.newChatModelUnavailable");
+  }
+  if (detailCode === MODEL_POLICY_DETAIL_CODE) {
+    return error.details?.reason === "credits"
+      ? t("lib.format.modelPolicyCredits")
+      : t("lib.format.modelPolicyRefused");
+  }
+  let message: unknown;
+  try {
+    message = (JSON.parse(error.body) as { message?: unknown } | null)?.message;
+  } catch {
+    return null;
+  }
+  if (typeof message !== "string") return null;
+  const text = message.trim().slice(0, 300);
+  if (!text) return null;
+  const sentence = text.charAt(0).toUpperCase() + text.slice(1);
+  return /[.!?]$/.test(sentence) ? sentence : `${sentence}.`;
+}
+
 /**
  * A fresh Send or Steer refused because the task's own usage limit is reached.
  * The draft is kept and an unchanged retry is never offered. The one current
@@ -376,9 +414,14 @@ export function composerSubmissionErrorMessage(
   }
   if (error instanceof ComposerStateError) return error.message;
   if (error instanceof OpenGeniApiError && error.outcomeUnknown) return formatErrorMessage(error);
-  if (isModelUnavailableSubmissionError(error)) return t("lib.format.modelUnavailable");
+  if (isModelUnavailableSubmissionError(error)) {
+    // A refused new chat has no chat yet whose model is "no longer available".
+    return sessionCreateRefusalMessage(t, error) ?? t("lib.format.modelUnavailable");
+  }
   if (isConnectionAccountSubmissionError(error)) return t("lib.format.accountUnavailable");
   if (isSessionUsageLimitSubmissionError(error)) return t("lib.format.sessionUsageLimitReached");
+  const createRefusal = sessionCreateRefusalMessage(t, error);
+  if (createRefusal) return createRefusal;
   const siteRefusal = siteRefusalCode(error);
   if (siteRefusal) return COMPOSER_SITE_REFUSAL_MESSAGES(t)[siteRefusal]!;
   if (error instanceof OpenGeniApiError && error.code === "allowance_exhausted") {
@@ -413,6 +456,8 @@ export function composerSubmissionCanRetry(error: Error): boolean {
   return !(
     isComposerCreditRefusal(error) ||
     isModelUnavailableSubmissionError(error) ||
+    // The policy refuses the same model again until someone changes it.
+    (error instanceof OpenGeniApiError && error.details?.code === MODEL_POLICY_DETAIL_CODE) ||
     isConnectionAccountSubmissionError(error) ||
     isSessionUsageLimitSubmissionError(error) ||
     (error instanceof OpenGeniApiError && error.code === "allowance_exhausted") ||

package/src/messages/en.ts

@@ -34,6 +34,8 @@ export const englishMessages = {
   "approvalSurface.sendingAnswer": "Sending answer…",
   /** Above an MCP server's question in the middle of a tool call, e.g. "Linear asks". */
   "approvalSurface.serverAsks": "{server} asks",
+  /** A waiting action whose review offers no decision yet; a Try again button follows. */
+  "approvalSurface.thisActionCanTBeDecided": "This action can't be decided yet.",
   "approvalSurface.tryAgain": "Try again",
   "approvalSurface.viewFullDetails": "View full details",
   "approvalSurface.youDonTHaveAccess":
@@ -2104,7 +2106,15 @@ export const englishMessages = {
     "A selected connector account is unavailable. Review accounts in + → Connectors, then edit and send your saved message.",
   "lib.format.modelUnavailable":
     "This chat's model is no longer available. Choose another model to continue. Your message is saved.",
+  "lib.format.newChatModelUnavailable":
+    "This model isn't available to you. Choose another model. Your message is saved.",
+  "lib.format.modelPolicyCredits":
+    "This model uses credits, which are off in this workspace. Choose a model paid by a subscription or API key. Your message is saved.",
+  "lib.format.modelPolicyRefused":
+    "This workspace's model policy doesn't allow this model. Choose another model. Your message is saved.",
   "lib.format.now": "now",
+  "lib.format.speedUnavailable":
+    "This model can't run at the selected speed. Choose another speed. Your message is saved.",
   "lib.format.outOfCreditsThisWorkspace":
     "There aren't enough credits for this model. Add credits, or choose another model. The conversation is preserved.",
   "lib.format.providerBlockedRequest": "The model provider blocked this request.",
@@ -5562,6 +5572,7 @@ export const englishMessages = {
   "timeline.screenshotLightbox.zoomOut": "Zoom out",
   "timeline.shared.bytesOmitted_one": "{bytes} byte omitted",
   "timeline.shared.bytesOmitted_other": "{bytes} bytes omitted",
+  "timeline.shared.copyStep": "Copy step",
   "timeline.shared.expandScreenshot": "Expand screenshot",
   "timeline.shared.fullEvidence": "full evidence",
   "timeline.shared.imageUnavailable": "image unavailable",

package/src/timeline/platform-activity-row.tsx

@@ -89,26 +89,38 @@ export default function PlatformActivityRow({
   // A failed step's recorded error is diagnostic detail: behind the row, never
   // its title, and absent where the host hides raw technical detail.
   const detail = failed && !plainDetails ? item.detail : undefined;
+  const note =
+    item.phase === "model_preparation"
+      ? msg("timeline.platformActivityRow.includesOverlappingSandboxStartupCustom")
+      : undefined;
   return j(ActivityDisclosure, {
     icon: j(BotIcon, { className: "size-3.5" }),
     iconTone: failed ? "failed" : running ? "running" : "muted",
     title: item.blockedReason
       ? STARTUP_WAIT_TITLES(msg)[item.blockedReason]
       : startupPhaseTitle(msg, item.phase, item.status, item.outcome),
-    preview:
-      item.phase === "model_preparation"
-        ? msg("timeline.platformActivityRow.includesOverlappingSandboxStartupCustom")
-        : undefined,
+    preview: note,
     running,
     failed,
     cancelled: item.status === "cancelled",
     chip: duration ? { tone: failed ? "bad" : "muted", text: duration } : undefined,
     expandable: Boolean(detail),
     children: detail
-      ? j(PayloadBlock, {
-          label: msg("timeline.platformActivityRow.details"),
-          value: detail,
-        })
+      ? [
+          // Open, the note leaves the row; it stays readable above the details.
+          note
+            ? j(
+                "p",
+                { className: "text-og-sm leading-5 text-og-fg-subtle", children: note },
+                "note",
+              )
+            : null,
+          j(
+            PayloadBlock,
+            { label: msg("timeline.platformActivityRow.details"), value: detail },
+            "detail",
+          ),
+        ]
       : undefined,
   });
 }

package/src/timeline/shared.tsx

@@ -1,8 +1,20 @@
-import { CameraIcon, CameraOffIcon, ChevronRightIcon } from "lucide-react";
+import { CameraIcon, CameraOffIcon, CheckIcon, ChevronRightIcon, CopyIcon } from "lucide-react";
 import { useToolDetails } from "./tool-details";
-import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import { useTimelineSearchReveal } from "../components/timeline-search";
 import { cn } from "../lib/cn";
+import { copyTextToClipboard } from "../lib/clipboard";
 import { stringifyPayload } from "../lib/format";
 import { redactPayload } from "./credential-redaction";
 import { SecretRefText } from "../components/secret-ref-chip";
@@ -197,6 +209,19 @@ export function ActivityDisclosure({
   useEffect(() => {
     if (open && outputPending && !compact) loadOutput?.();
   }, [open, outputPending, loadOutput, compact]);
+  const titleRef = useRef<HTMLSpanElement>(null);
+  const previewRef = useRef<HTMLSpanElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const childBody = expandable && (children != null || truncation != null);
+  // A step with nothing behind it still opens when its one line is cut off,
+  // so its whole title and note can be read (and copied).
+  const clipped = useClippedLine(
+    titleRef,
+    previewRef,
+    !compact && !childBody && !media,
+    open,
+    `${typeof title === "string" ? title : ""}\u0000${typeof preview === "string" ? preview : ""}`,
+  );
   if (compact)
     return (
       <span className="og-rolling-label">
@@ -211,7 +236,8 @@ export function ActivityDisclosure({
         </ShimmerText>
       </span>
     );
-  const hasBody = expandable && (children != null || truncation != null);
+  const hasBody = childBody || clipped;
+  const expanded = open && hasBody;
 
   // The preview is detail-on-demand: it is suppressed once the row is open so a
   // path/stat shown in the body never also sits in the collapsed row.
@@ -256,22 +282,31 @@ export function ActivityDisclosure({
         className={cn("og-command-reel", running && "og-command-reel-running")}
       >
         <span
+          ref={titleRef}
           className={cn(
-            "min-w-0 shrink truncate text-og-base font-medium",
+            "min-w-0 shrink text-og-base font-medium",
+            // Open, the whole title shows; closed, it keeps to one line.
+            expanded ? "whitespace-normal [overflow-wrap:anywhere]" : "truncate",
             titleMono && "font-og-mono text-og-sm font-normal",
           )}
         >
           {title}
         </span>
         {previewVisible && !media ? (
-          <span className="min-w-0 flex-1 truncate text-og-sm text-og-fg-subtle">{preview}</span>
+          <span ref={previewRef} className="min-w-0 flex-1 truncate text-og-sm text-og-fg-subtle">
+            {preview}
+          </span>
         ) : (
           <span className="flex-1" />
         )}
       </ShimmerText>
       {/* The right gutter carries at most ONE signal: the media thumbnail, else a
-          terse settle chip (hidden once expanded — the body owns the detail). */}
-      {media && !open ? (
+          terse settle chip (hidden once expanded — the body owns the detail);
+          an open step keeps it for Copy, which sits beside the row (a button
+          inside the row's own button role would be hidden from AT). */}
+      {expanded ? (
+        <span aria-hidden="true" className="ml-auto size-6 shrink-0 pointer-coarse:size-11" />
+      ) : media && !open ? (
         <span className="ml-auto flex shrink-0 items-center gap-2 pl-2">{media}</span>
       ) : chip && !open ? (
         <span className="ml-auto shrink-0 pl-2">
@@ -285,43 +320,67 @@ export function ActivityDisclosure({
   // settled state regardless of whether the chip slot is occupied by media.
   const dataStatus = cancelled ? "cancelled" : failed ? "failed" : undefined;
 
-  if (!hasBody) {
-    return (
-      <div className={cn(rowClass, "cursor-default")} data-status={dataStatus}>
-        {inner}
-      </div>
-    );
-  }
-
   // Native disclosure (not radix-ui Collapsible): importing `radix-ui` from the
   // timeline registry pulls Popper into the session share-graph and crashes
   // lazy workspace settings (`createPopperScope is not a function`).
+  //
+  // One DOM shape whether or not the row opens, so a row that becomes
+  // expandable (its line got cut off) keeps the same title and note nodes,
+  // which the clipping measurement goes on observing.
   return (
-    <div>
+    <div className="relative">
       <div
-        role="button"
-        tabIndex={0}
-        aria-expanded={open}
-        data-state={open ? "open" : "closed"}
-        onClick={() => setOpen((prev) => !prev)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            setOpen((prev) => !prev);
-          }
-        }}
+        {...(hasBody
+          ? {
+              role: "button",
+              tabIndex: 0,
+              "aria-expanded": open,
+              "data-state": open ? "open" : "closed",
+              onClick: (event: MouseEvent<HTMLDivElement>) => {
+                // Selecting the row's text to copy it leaves the row as it is.
+                if (hasTextSelectionIn(event.currentTarget)) return;
+                setOpen((prev) => !prev);
+              },
+              onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {
+                if (event.target !== event.currentTarget) return;
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  setOpen((prev) => !prev);
+                }
+              },
+            }
+          : {})}
         data-status={dataStatus}
         className={cn(
           rowClass,
-          "cursor-pointer outline-hidden hover:bg-og-surface-1 hover:text-og-fg",
-          "focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-0",
+          hasBody
+            ? [
+                "cursor-pointer outline-hidden hover:bg-og-surface-1 hover:text-og-fg",
+                "focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-0",
+              ]
+            : "cursor-default",
         )}
       >
         {inner}
       </div>
-      {open ? (
-        <div className="mb-2 ml-7 mt-1.5 flex flex-col gap-2 overflow-hidden animate-og-expand">
-          {outputPreview && loadOutput && outputPreview.state !== "error" ? (
+      {expanded ? (
+        <span className="absolute right-1.5 top-1.5 pointer-coarse:top-2.5">
+          <StepCopyButton titleRef={titleRef} bodyRef={bodyRef} />
+        </span>
+      ) : null}
+      {expanded ? (
+        <div
+          ref={bodyRef}
+          className="mb-2 ml-7 mt-1.5 flex flex-col gap-2 overflow-hidden animate-og-expand empty:hidden"
+        >
+          {!childBody ? (
+            // A step without details: its note, in full.
+            preview != null && !media ? (
+              <div className="whitespace-pre-wrap text-og-sm leading-5 text-og-fg-subtle [overflow-wrap:anywhere]">
+                {preview}
+              </div>
+            ) : null
+          ) : outputPreview && loadOutput && outputPreview.state !== "error" ? (
             // Never show a preview's body as if it were the whole output.
             <div
               data-og-tool-output-loading=""
@@ -347,6 +406,118 @@ export function ActivityDisclosure({
   );
 }
 
+/**
+ * Whether a closed row's one line (its title or note) is cut off. Measured
+ * only while `enabled` and kept while the row is open (when the line wraps),
+ * so opening a clipped row never takes its body away.
+ */
+function useClippedLine(
+  titleRef: RefObject<HTMLElement | null>,
+  previewRef: RefObject<HTMLElement | null>,
+  enabled: boolean,
+  open: boolean,
+  contentKey: string,
+): boolean {
+  const [clipped, setClipped] = useState(false);
+  const holding = open && clipped;
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled || holding) return;
+    const measure = () => {
+      const cut = [titleRef.current, previewRef.current].some(
+        (element) => element != null && element.scrollWidth > element.clientWidth + 1,
+      );
+      setClipped((current) => (current === cut ? current : cut));
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    for (const element of [titleRef.current, previewRef.current]) {
+      if (element) observer.observe(element);
+    }
+    return () => observer.disconnect();
+  }, [enabled, holding, open, contentKey, titleRef, previewRef]);
+  return enabled && clipped;
+}
+
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+/** A drag-selection inside the row, which a click must not turn into a toggle. */
+function hasTextSelectionIn(element: HTMLElement): boolean {
+  const selection = typeof window === "undefined" ? null : window.getSelection();
+  if (!selection || selection.isCollapsed || selection.toString().trim() === "") return false;
+  return element.contains(selection.anchorNode) || element.contains(selection.focusNode);
+}
+
+function readableText(element: HTMLElement | null): string {
+  if (!element) return "";
+  // innerText keeps line breaks between blocks where the DOM supports it.
+  const text = typeof element.innerText === "string" ? element.innerText : element.textContent;
+  return (text ?? "").trim();
+}
+
+/** The step's whole text as shown: its title, then what opened below it. */
+export function activityStepText(title: HTMLElement | null, body: HTMLElement | null): string {
+  return [readableText(title), readableText(body)].filter(Boolean).join("\n\n");
+}
+
+const STEP_COPIED_MS = 1600;
+
+/**
+ * Copy for an open step, in the gutter its chip leaves. A plain icon button
+ * (no tooltip layer: the timeline registry stays free of Popper).
+ */
+function StepCopyButton({
+  titleRef,
+  bodyRef,
+}: {
+  titleRef: RefObject<HTMLElement | null>;
+  bodyRef: RefObject<HTMLElement | null>;
+}) {
+  const t = useOpenGeniText();
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () => () => {
+      if (timer.current !== null) clearTimeout(timer.current);
+    },
+    [],
+  );
+  const label = copied ? t("copyButton.copied") : t("timeline.shared.copyStep");
+  return (
+    <button
+      type="button"
+      data-og-copy-step=""
+      data-state={copied ? "copied" : "idle"}
+      aria-label={label}
+      title={label}
+      onClick={(event) => {
+        event.stopPropagation();
+        void copyTextToClipboard(activityStepText(titleRef.current, bodyRef.current)).then((ok) => {
+          if (!ok) return;
+          setCopied(true);
+          if (timer.current !== null) clearTimeout(timer.current);
+          timer.current = setTimeout(() => {
+            timer.current = null;
+            setCopied(false);
+          }, STEP_COPIED_MS);
+        });
+      }}
+      className={cn(
+        "inline-flex size-6 items-center justify-center rounded-og-sm text-og-fg-subtle pointer-coarse:size-11",
+        "transition-colors duration-150 hover:bg-og-surface-2/80 hover:text-og-fg",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40",
+        copied && "text-og-accent",
+      )}
+    >
+      {copied ? (
+        <CheckIcon className="size-3.5" aria-hidden />
+      ) : (
+        <CopyIcon className="size-3.5" aria-hidden />
+      )}
+    </button>
+  );
+}
+
 /** Says the body below is a preview, with Retry when the exact read failed. */
 function ToolOutputPreviewNotice({ preview }: { preview: ToolOutputPreview }) {
   const t = useOpenGeniText();

package/src/ui/window-bar-title.test.tsx

@@ -175,3 +175,40 @@ test("inside the hidden page, dialogs never take the bar and pages outside the b
     expect(view.bar()).toBe("Capabilities");
   });
 });
+
+function CopyableHeader({ title, fallback = false }: { title: string; fallback?: boolean }) {
+  titles.useWindowBarTitle(title, fallback, { copyable: true });
+  return null;
+}
+
+test("only a copyable title (a Site's) leaves the drag region for its Copy title menu", async () => {
+  const copyable = () =>
+    document
+      .querySelector("[data-window-bar-title-text]")
+      ?.className.includes("[-webkit-app-region:no-drag]") ?? null;
+  await mount(
+    <windowBar.WindowBarPageTitle enabled>
+      <Header title="Settings" />
+    </windowBar.WindowBarPageTitle>,
+    async (view) => {
+      expect(view.bar()).toBe("Settings");
+      expect(copyable()).toBe(false);
+      await view.render(
+        <windowBar.WindowBarPageTitle enabled>
+          <CopyableHeader title="Opengeni usage" />
+        </windowBar.WindowBarPageTitle>,
+      );
+      expect(view.bar()).toBe("Opengeni usage");
+      expect(copyable()).toBe(true);
+      // A page opened in front (the publish form) takes the bar, and drags it.
+      await view.render(
+        <windowBar.WindowBarPageTitle enabled>
+          <CopyableHeader title="Opengeni usage" fallback />
+          <Header title="Publish to web" />
+        </windowBar.WindowBarPageTitle>,
+      );
+      expect(view.bar()).toBe("Publish to web");
+      expect(copyable()).toBe(false);
+    },
+  );
+});

package/src/ui/window-bar-title.tsx

@@ -12,9 +12,11 @@ import { createContext, useContext, useId, useLayoutEffect, useMemo, type ReactN
 export const PageHeaderWindowBarContext = createContext<{
   /**
    * A header's title, or null while it has none to show; keeps its place. A
-   * fallback claim shows only while no other header has a title.
+   * fallback claim shows only while no other header has a title. A copyable
+   * title (a Site's) can be right-clicked in the bar to copy it; others stay
+   * part of the bar's drag region.
    */
-  set(id: string, title: string | null, fallback?: boolean): void;
+  set(id: string, title: string | null, fallback?: boolean, copyable?: boolean): void;
   release(id: string): void;
   /** The header whose title the bar shows. */
   owner: string | null;
@@ -42,7 +44,8 @@ export function WindowBarTitleBoundary({
       fallback && enclosing
         ? {
             ...enclosing,
-            set: (id: string, title: string | null) => enclosing.set(id, title, true),
+            set: (id: string, title: string | null, _fallback?: boolean, copyable?: boolean) =>
+              enclosing.set(id, title, true, copyable),
           }
         : null,
     [fallback, enclosing],
@@ -61,15 +64,19 @@ export function WindowBarTitleBoundary({
  * only until that page names it. Inside a fallback boundary every claim is a
  * fallback already, so there the first one keeps the bar.
  */
-export function useWindowBarTitle(title: ReactNode, fallback = false): boolean {
+export function useWindowBarTitle(
+  title: ReactNode,
+  fallback = false,
+  { copyable = false }: { copyable?: boolean } = {},
+): boolean {
   const windowBar = useContext(PageHeaderWindowBarContext);
   const id = useId();
   const text = typeof title === "string" ? title : null;
   const set = windowBar?.set;
   const release = windowBar?.release;
   useIsomorphicLayoutEffect(() => {
-    set?.(id, text || null, fallback);
-  }, [id, set, text, fallback]);
+    set?.(id, text || null, fallback, copyable);
+  }, [id, set, text, fallback, copyable]);
   useIsomorphicLayoutEffect(() => () => release?.(id), [id, release]);
   return windowBar?.owner === id;
 }

package/styles/compiled.css

@@ -11480,6 +11480,11 @@
       position: static;
     }
   }
+:where(.og-root).pointer-coarse\:top-2\.5,:where(.og-root) .pointer-coarse\:top-2\.5 {
+    @media (pointer: coarse) {
+      top: calc(var(--spacing) * 2.5);
+    }
+  }
 :where(.og-root).pointer-coarse\:top-13,:where(.og-root) .pointer-coarse\:top-13 {
     @media (pointer: coarse) {
       top: calc(var(--spacing) * 13);