@opengeni/react 0.57.0 → 1.0.2-canary.37191796234001

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

@@ -0,0 +1,376 @@
+import { SESSION_SCOPE_HEADER, type ClientConfig, type OpenGeniClient } from "@opengeni/sdk";
+import { createEditableArtifactReplicaId } from "@opengeni/sdk/editable-artifacts";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { cn } from "../../lib/cn";
+import { useOpenGeni, type ClientOverride } from "../../session-context";
+import {
+  ArtifactLabelsProvider,
+  ArtifactLoading,
+  ArtifactProblem,
+  ArtifactViewerHeader,
+  artifactLoadErrorView,
+  useArtifactLabels,
+  type ArtifactKind,
+  type ArtifactLabels,
+} from "./artifact-chrome";
+import { EditableArtifactView, type EditableArtifactRuntimes } from "./editable-artifact-view";
+import type { SiteToolBridgeFactory } from "./chat-interactive-block";
+import { SiteView } from "./site-view";
+
+/** An artifact opened from a session: the targets agent links and Site previews name. */
+export type SessionArtifactTarget = Readonly<
+  | { kind: "editable-artifact"; artifactId: string; title?: string | undefined }
+  | { kind: "site"; artifactId: string; title?: string | undefined }
+>;
+
+/** Every string the viewer shows, including its Site frame and states. */
+export type SessionArtifactViewerLabels = Partial<ArtifactLabels>;
+
+export type SessionArtifactViewerProps = ClientOverride &
+  Readonly<{
+    /** The conversation the artifact belongs to; the proxy only serves its artifacts. */
+    sessionId: string;
+    target: SessionArtifactTarget;
+    onClose: () => void;
+    /** Show a Back control, for example to return to the conversation on phones. */
+    onBack?: (() => void) | undefined;
+    /** Browser kernels and Worker for documents, spreadsheets, and presentations. */
+    editableRuntimes?: EditableArtifactRuntimes | undefined;
+    theme?: "light" | "dark" | undefined;
+    /** Host-owned Site API access; omit it and Sites render without workspace tools. */
+    siteToolBridge?: SiteToolBridgeFactory | undefined;
+    labels?: SessionArtifactViewerLabels | undefined;
+    className?: string | undefined;
+  }>;
+
+type ViewerClient = Pick<
+  OpenGeniClient,
+  | "withHeaders"
+  | "apiUrl"
+  | "fetchApi"
+  | "getClientConfig"
+  | "getEditableArtifact"
+  | "getWorkspaceArtifact"
+  | "getWorkspaceArtifactHtml"
+>;
+
+const viewerClientKeys = new WeakMap<ViewerClient, string>();
+
+function viewerClientKey(client: ViewerClient): string {
+  let key = viewerClientKeys.get(client);
+  if (!key) {
+    key = crypto.randomUUID();
+    viewerClientKeys.set(client, key);
+  }
+  return key;
+}
+
+/**
+ * A host-mountable viewer for one editable artifact or Site from a session,
+ * with its own header (title, Back, Close). Mount it in any sized container
+ * (a side panel, a sheet); it fills it. Data flows through the provider's
+ * client and `createSessionProxyHandler({ artifacts: true })`, scoped to
+ * `sessionId`.
+ */
+export function SessionArtifactViewer({ labels, ...props }: SessionArtifactViewerProps) {
+  return (
+    <ArtifactLabelsProvider labels={labels}>
+      <Viewer {...props} />
+    </ArtifactLabelsProvider>
+  );
+}
+
+function Viewer({
+  client: clientOverride,
+  workspaceId: workspaceOverride,
+  sessionId,
+  target,
+  onClose,
+  onBack,
+  editableRuntimes,
+  theme,
+  siteToolBridge,
+  className,
+}: Omit<SessionArtifactViewerProps, "labels">) {
+  const labels = useArtifactLabels();
+  const context = useOpenGeni({ client: clientOverride, workspaceId: workspaceOverride });
+  const base = context.client as unknown as ViewerClient;
+  const workspaceId = context.workspaceId;
+  const client = useMemo(
+    () => base.withHeaders({ [SESSION_SCOPE_HEADER]: sessionId }),
+    [base, sessionId],
+  );
+  const [loaded, setLoaded] = useState<{
+    key: string;
+    client: ViewerClient;
+    workspaceId: string;
+    title: string;
+    kind: ArtifactKind | null;
+  } | null>(null);
+  const targetKey = `${target.kind}:${target.artifactId}`;
+  const current =
+    loaded?.key === targetKey && loaded.client === client && loaded.workspaceId === workspaceId
+      ? loaded
+      : null;
+  const kind: ArtifactKind | null = target.kind === "site" ? "site" : (current?.kind ?? null);
+  const [unavailable, setUnavailable] = useState<{
+    key: string;
+    client: ViewerClient;
+    workspaceId: string;
+  } | null>(null);
+  const markUnavailable = useCallback(
+    () => setUnavailable({ key: targetKey, client, workspaceId }),
+    [client, targetKey, workspaceId],
+  );
+  const title =
+    current?.title ??
+    target.title ??
+    (unavailable?.key === targetKey &&
+    unavailable.client === client &&
+    unavailable.workspaceId === workspaceId
+      ? labels.artifact
+      : labels.opening);
+  return (
+    <section
+      aria-label={title}
+      data-og-artifact-viewer={target.kind}
+      className={cn("og-root flex h-full min-h-0 w-full min-w-0 flex-col bg-bg text-fg", className)}
+    >
+      <ArtifactViewerHeader
+        kind={kind}
+        title={title}
+        onBack={onBack}
+        backLabel={labels.back}
+        onClose={onClose}
+        closeLabel={labels.close}
+      />
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+        {target.kind === "site" ? (
+          <SiteView
+            key={targetKey}
+            client={client}
+            workspaceId={workspaceId}
+            siteId={target.artifactId}
+            theme={theme}
+            toolBridge={siteToolBridge}
+            showTitle={false}
+            onTitle={(next) =>
+              setLoaded({ key: targetKey, client, workspaceId, title: next, kind: "site" })
+            }
+          />
+        ) : (
+          <EditableBody
+            key={targetKey}
+            client={client}
+            workspaceId={workspaceId}
+            sessionId={sessionId}
+            artifactId={target.artifactId}
+            runtimes={editableRuntimes}
+            onOpened={(next, modality) =>
+              setLoaded({ key: targetKey, client, workspaceId, title: next, kind: modality })
+            }
+            onUnavailable={markUnavailable}
+          />
+        )}
+      </div>
+    </section>
+  );
+}
+
+function EditableBody({
+  client,
+  workspaceId,
+  sessionId,
+  artifactId,
+  runtimes,
+  onOpened,
+  onUnavailable,
+}: {
+  client: ViewerClient;
+  workspaceId: string;
+  sessionId: string;
+  artifactId: string;
+  runtimes: EditableArtifactRuntimes | undefined;
+  onOpened: (title: string, modality: ArtifactKind) => void;
+  onUnavailable: () => void;
+}) {
+  const labels = useArtifactLabels();
+  const clientKey = viewerClientKey(client);
+  const [retryEpoch, setRetryEpoch] = useState(0);
+  const [configState, setConfigState] = useState<{
+    client: ViewerClient;
+    workspaceId: string;
+    sessionId: string;
+    result:
+      | { kind: "ready"; config: NonNullable<ClientConfig["artifacts"]> }
+      | { kind: "unavailable" }
+      | { kind: "error"; error: unknown };
+  } | null>(null);
+  const current =
+    configState?.client === client &&
+    configState.workspaceId === workspaceId &&
+    configState.sessionId === sessionId
+      ? configState.result
+      : null;
+  const config = current?.kind === "ready" ? current.config : null;
+  const scopeRef = useRef({ client, workspaceId, sessionId });
+  scopeRef.current = { client, workspaceId, sessionId };
+  useEffect(() => {
+    let live = true;
+    setConfigState(null);
+    client.getClientConfig().then(
+      (value) =>
+        live &&
+        setConfigState({
+          client,
+          workspaceId,
+          sessionId,
+          result: value.artifacts
+            ? { kind: "ready", config: value.artifacts }
+            : { kind: "unavailable" },
+        }),
+      (error: unknown) =>
+        live &&
+        setConfigState({ client, workspaceId, sessionId, result: { kind: "error", error } }),
+    );
+    return () => {
+      live = false;
+    };
+  }, [client, retryEpoch, sessionId, workspaceId]);
+  const baseUrl = useMemo(
+    () => new URL(client.apiUrl("/"), globalThis.location?.href ?? "http://localhost/"),
+    [client],
+  );
+  const transport = useMemo(() => {
+    if (!config) return undefined;
+    const socket = new URL(config.editableLiveUrl);
+    let scope = new AbortController();
+    const checkCurrent = (signal: AbortSignal) => {
+      signal.throwIfAborted();
+      if (
+        scopeRef.current.client !== client ||
+        scopeRef.current.workspaceId !== workspaceId ||
+        scopeRef.current.sessionId !== sessionId
+      ) {
+        throw new DOMException("Artifact viewer scope changed", "AbortError");
+      }
+    };
+    return {
+      activate: () => {
+        if (scope.signal.aborted) scope = new AbortController();
+      },
+      abort: () => scope.abort(),
+      fetch: (async (input: RequestInfo | URL, init?: RequestInit) => {
+        const signal = AbortSignal.any([scope.signal, ...(init?.signal ? [init.signal] : [])]);
+        checkCurrent(signal);
+        const url = new URL(input instanceof Request ? input.url : input, baseUrl);
+        if (
+          init?.method === "POST" &&
+          url.pathname ===
+            new URL(
+              `v1/workspaces/${encodeURIComponent(workspaceId)}/editable-artifacts/${encodeURIComponent(artifactId)}/live-ticket`,
+              baseUrl,
+            ).pathname
+        ) {
+          // A reconnect must revalidate the current host principal before
+          // minting a ticket for the editor's retained cache partition.
+          const next = (await client.getClientConfig({ signal })).artifacts;
+          checkCurrent(signal);
+          if (!next || artifactCapabilityKey(next) !== artifactCapabilityKey(config)) {
+            setConfigState({
+              client,
+              workspaceId,
+              sessionId,
+              result: next ? { kind: "ready", config: next } : { kind: "unavailable" },
+            });
+            scope.abort();
+            signal.throwIfAborted();
+          }
+          const { replicaId } = (await new Request(input, init).json()) as {
+            replicaId?: unknown;
+          };
+          if (typeof replicaId !== "string") throw new TypeError("Artifact replica is required");
+          await client.getEditableArtifact(workspaceId, artifactId, { replicaId, signal });
+          checkCurrent(signal);
+        }
+        return client.fetchApi(url, { ...init, signal });
+      }) as typeof fetch,
+      webSocketUrl: socket,
+      ...(isLoopback(baseUrl) && isLoopback(socket)
+        ? { allowInsecureDevelopmentTransport: true }
+        : {}),
+    };
+  }, [artifactId, baseUrl, client, config, sessionId, workspaceId]);
+  useEffect(() => {
+    transport?.activate();
+    return () => transport?.abort();
+  }, [transport]);
+  const blocked = current !== null && (current.kind !== "ready" || !runtimes);
+  useEffect(() => {
+    if (blocked) onUnavailable();
+  }, [blocked, onUnavailable]);
+  if (!current) return <ArtifactLoading label={labels.opening} />;
+  if (current.kind === "error") {
+    return (
+      <ArtifactProblem
+        view={artifactLoadErrorView(current.error, "editable", labels)}
+        onRetry={() => setRetryEpoch((value) => value + 1)}
+      />
+    );
+  }
+  if (!config || !transport) {
+    return <ArtifactProblem view={{ ...labels.viewingDisabled, retryable: false }} />;
+  }
+  if (!runtimes) {
+    return <ArtifactProblem view={{ ...labels.editorsMissing, retryable: false }} />;
+  }
+  return (
+    <EditableArtifactView
+      baseUrl={baseUrl}
+      workspaceId={workspaceId}
+      artifactId={artifactId}
+      authorityKey={JSON.stringify([clientKey, sessionId, artifactCapabilityKey(config)])}
+      runtimes={{
+        ...runtimes,
+        ...(isLoopback(baseUrl) ? { allowInsecureDevelopmentAssets: true } : {}),
+      }}
+      transport={transport}
+      showHeader={false}
+      open={async (signal) => {
+        const replicaId = createEditableArtifactReplicaId();
+        const artifact = await client.getEditableArtifact(workspaceId, artifactId, {
+          replicaId,
+          signal,
+        });
+        signal.throwIfAborted();
+        onOpened(artifact.title, artifact.modality);
+        return {
+          artifact,
+          replicaId,
+          authority: {
+            deploymentOrigin: baseUrl.origin,
+            workspaceId,
+            ...config.cachePartition,
+          },
+        };
+      }}
+    />
+  );
+}
+
+function artifactCapabilityKey(config: NonNullable<ClientConfig["artifacts"]>): string {
+  return JSON.stringify([
+    config.editableLiveUrl,
+    config.cachePartition.accountId,
+    config.cachePartition.principalId,
+    config.cachePartition.authorizationEpoch,
+  ]);
+}
+
+function isLoopback(url: URL): boolean {
+  return (
+    (url.protocol === "http:" || url.protocol === "ws:") &&
+    (url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "[::1]")
+  );
+}

package/src/components/artifacts/site-view.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { loadSiteSnapshot } from "../../sites-ui";
+import {
+  ArtifactLoading,
+  ArtifactProblem,
+  artifactLoadErrorView,
+  useArtifactLabels,
+} from "./artifact-chrome";
+import { ArtifactSandbox } from "./artifact-sandbox";
+import type { SiteSnapshotClient, SiteToolBridgeFactory } from "./chat-interactive-block";
+
+type Snapshot = Awaited<ReturnType<typeof loadSiteSnapshot>>;
+
+export type SiteViewProps = {
+  client: SiteSnapshotClient;
+  workspaceId: string;
+  siteId: string;
+  /** Host-owned Site API access. Omit it and the Site renders without workspace tools. */
+  toolBridge?: SiteToolBridgeFactory | undefined;
+  theme?: "light" | "dark" | undefined;
+  /** Shown instead of the archived notice; the console links to its full page. */
+  archivedMessage?: string | undefined;
+  /** Show the Site title in the frame bar; hide it under a host header that already does. */
+  showTitle?: boolean | undefined;
+  /** Loading copy; defaults to "Loading Site…". */
+  loadingLabel?: string | undefined;
+  /** Called with the loaded title, for a host header. */
+  onTitle?: ((title: string) => void) | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * A published Site filling its container: the console's session dock and an
+ * embedding host's artifact viewer render the same view.
+ */
+export function SiteView({
+  client,
+  workspaceId,
+  siteId,
+  toolBridge,
+  theme,
+  archivedMessage,
+  showTitle = true,
+  loadingLabel,
+  onTitle,
+  className,
+}: SiteViewProps) {
+  const labels = useArtifactLabels();
+  const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
+  const [error, setError] = useState<unknown>(null);
+  const readAbort = useRef<AbortController | null>(null);
+  const onTitleRef = useRef(onTitle);
+  onTitleRef.current = onTitle;
+  const load = useCallback(async () => {
+    readAbort.current?.abort();
+    const abort = new AbortController();
+    readAbort.current = abort;
+    try {
+      setError(null);
+      const next = await loadSiteSnapshot(client, workspaceId, siteId, {
+        signal: abort.signal,
+        includeArchivedContent: true,
+      });
+      if (abort.signal.aborted) return;
+      setSnapshot(next);
+      onTitleRef.current?.(next.detail.artifact.title);
+    } catch (nextError) {
+      if (abort.signal.aborted) return;
+      setSnapshot(null);
+      setError(nextError);
+    }
+  }, [client, siteId, workspaceId]);
+  useEffect(() => {
+    setSnapshot(null);
+    void load();
+    return () => readAbort.current?.abort();
+  }, [load]);
+  const content = snapshot?.content;
+  const bridge = useMemo(
+    () =>
+      content
+        ? toolBridge?.({
+            artifactId: siteId,
+            siteVersionId: content.versionId,
+            requestedTools: content.requestedTools,
+          })
+        : undefined,
+    [content, siteId, toolBridge],
+  );
+  if (error)
+    return (
+      <ArtifactProblem
+        view={artifactLoadErrorView(error, "site", labels)}
+        onRetry={() => void load()}
+      />
+    );
+  if (!snapshot || !content) return <ArtifactLoading label={loadingLabel ?? labels.loadingSite} />;
+  if (snapshot.detail.artifact.status === "archived")
+    return (
+      <div className="p-4 text-sm text-fg-muted">{archivedMessage ?? labels.siteArchived}</div>
+    );
+  return (
+    <ArtifactSandbox
+      html={content.html}
+      title={snapshot.detail.artifact.title}
+      showTitle={showTitle}
+      versionLabel={`v${snapshot.detail.artifact.currentVersion?.revision}`}
+      toolBridge={bridge}
+      connectedToolCount={content.requestedTools.length}
+      theme={theme}
+      fill
+      className={className ?? "h-full rounded-none border-0"}
+    />
+  );
+}

package/src/components/artifacts/spreadsheet-canvas.ts

@@ -1,3 +1,5 @@
+import { formatSpreadsheetGeneralDisplay } from "./spreadsheet-general-display";
+
 const TILE_SIZE = 256;
 const MAX_CACHE_PHYSICAL_PIXELS = 32_000_000;
 const MAX_CACHE_TILES = 96;
@@ -430,7 +432,7 @@ export class SpreadsheetCanvasRenderer {
 
     for (const cell of cells) {
       const value = input.projection.valueAt(cell);
-      const text = displayValue(value);
+      const text = formatSpreadsheetGeneralDisplay(value);
       if (!text) continue;
       paintCellText(context, input, cell, text, tileLeft, tileTop);
     }
@@ -550,7 +552,7 @@ function paintSelection(context: CanvasRenderingContext2D, input: SpreadsheetCan
   const bottom =
     input.columnHeaderHeight + input.rows.offsetAt(selection.bottom + 1) - input.logicalScrollTop;
   context.save();
-  setFill(context, input.theme.accent, "#3b82f6");
+  setFill(context, input.theme.accent, "#545454");
   context.globalAlpha = 0.1;
   context.fillRect(left, top, right - left, bottom - top);
   context.restore();
@@ -562,7 +564,7 @@ function paintSelection(context: CanvasRenderingContext2D, input: SpreadsheetCan
   const activeWidth = input.columns.sizeAt(selection.focusColumn);
   const activeHeight = input.rows.sizeAt(selection.focusRow);
   context.save();
-  setStroke(context, input.theme.accent, "#3b82f6");
+  setStroke(context, input.theme.accent, "#545454");
   context.lineWidth = 2;
   context.strokeRect(
     activeLeft + 1,
@@ -776,13 +778,6 @@ function finitePositive(value: number | undefined, fallback: number): number {
   return value !== undefined && Number.isFinite(value) && value > 0 ? value : fallback;
 }
 
-function displayValue(value: unknown): string {
-  if (value === null || value === undefined) return "";
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
-  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
-  return String(value);
-}
-
 function columnName(index: number): string {
   let value = index + 1;
   let result = "";

package/src/components/artifacts/spreadsheet-general-display.ts

@@ -0,0 +1,43 @@
+/**
+ * DISPLAY-ONLY General number formatting for spreadsheet canvas and a11y
+ * labels. This is not numeric arithmetic and must never feed formula-bar /
+ * cell-edit `input`, stored cells, formula results, or serialized exports.
+ *
+ * Policy for independent review:
+ * IEEE-754 cannot represent many decimal fractions exactly, so values such as
+ * `110.00000000000001` and `0.1 + 0.2` leak binary residue through `String(n)`.
+ * General display therefore collapses a finite number to 15 significant decimal
+ * digits — the same bound spreadsheet General uses — via
+ * `String(Number(value.toPrecision(15)))`.
+ *
+ * That mapping yields `110` / `220` / `0.3` for the noisy cases while keeping
+ * exponent-scale values (`1e-20`, `1e21`) and ~15-digit legitimate precision.
+ * Integers stringify without a decimal; `-0` displays as `0`; non-finite
+ * numbers, dates, booleans, errors, and strings keep their existing labels.
+ *
+ * Do not reuse `Intl.NumberFormat({ maximumFractionDigits: 12 })` from the
+ * artifact-tool renderer: 12 fraction digits rounds `1e-20` to `0` and truncates
+ * high-precision values that General should still show.
+ */
+export function formatSpreadsheetGeneralDisplay(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  if (typeof value === "number") {
+    if (Object.is(value, -0) || value === 0) return "0";
+    if (!Number.isFinite(value)) return String(value);
+    const rounded = Number(value.toPrecision(15));
+    // Rounding at the finite IEEE-754 boundary can overflow. A display policy
+    // must not turn a finite source into an infinity label.
+    return String(Number.isFinite(rounded) ? rounded : value);
+  }
+  return String(value);
+}
+
+/** Exact edit/formula-bar source. Numbers stay `String(value)` with no General collapse. */
+export function spreadsheetCellEditSource(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  return String(value);
+}

package/src/components/artifacts/spreadsheet-grid.tsx

@@ -26,6 +26,10 @@ import {
   type SpreadsheetCanvasProjection,
   type SpreadsheetCanvasTheme,
 } from "./spreadsheet-canvas";
+import {
+  formatSpreadsheetGeneralDisplay,
+  spreadsheetCellEditSource,
+} from "./spreadsheet-general-display";
 
 const MAX_ROWS = 1_048_576;
 const MAX_COLUMNS = 16_384;
@@ -494,13 +498,6 @@ function isCellSelected(selection: SpreadsheetSelection, row: number, col: numbe
   );
 }
 
-function displayValue(value: unknown): string {
-  if (value === null || value === undefined) return "";
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
-  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
-  return String(value);
-}
-
 function parseCellInput(input: string): string | number | boolean | null {
   if (input === "") return null;
   const normalized = input.trim();
@@ -634,7 +631,7 @@ function spreadsheetCanvasTheme(element: HTMLElement): SpreadsheetCanvasTheme {
   const border = computedToken(style, "--og-color-border", "#d1d5db");
   const foreground = style.color || computedToken(style, "--og-color-fg", "#111827");
   const mutedForeground = computedToken(style, "--og-color-fg-muted", "#6b7280");
-  const accent = computedToken(style, "--og-color-accent", "#3b82f6");
+  const accent = computedToken(style, "--og-color-accent", "#545454");
   const error = computedToken(style, "--og-color-status-failed", "#dc2626");
   const fontFamily =
     style.fontFamily ||
@@ -816,7 +813,7 @@ export function SpreadsheetArtifactSurface({
               <button
                 type="button"
                 onClick={addSheet}
-                className="mt-3 rounded-og-sm bg-og-accent-deep px-3 py-1.5 text-og-sm font-medium text-og-accent-fg"
+                className="mt-3 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium hover:bg-og-primary-hover"
               >
                 Add worksheet
               </button>
@@ -906,7 +903,7 @@ export function SpreadsheetGrid({
         const data = worksheet.cellData(row, col);
         return {
           value: data.formula ? workbook.valueAt(worksheet, { row, col }) : data.value,
-          input: data.formula ?? displayValue(data.value),
+          input: data.formula ?? spreadsheetCellEditSource(data.value),
           format: data.format,
         };
       },
@@ -2059,7 +2056,7 @@ export function SpreadsheetProjectionGrid({
                       role="gridcell"
                       aria-colindex={col + 1}
                       aria-selected={selected}
-                      aria-label={`${address}${value === null ? "" : `, ${displayValue(value)}`}`}
+                      aria-label={`${address}${value === null ? "" : `, ${formatSpreadsheetGeneralDisplay(value)}`}`}
                       data-og-cell={address}
                       className={cn(
                         "pointer-events-none absolute top-0 flex h-full min-w-0 overflow-hidden border-b border-r border-og-border px-1.5 text-og-fg",
@@ -2099,7 +2096,7 @@ export function SpreadsheetProjectionGrid({
                         />
                       ) : (
                         <span className="block min-w-0 overflow-hidden text-ellipsis">
-                          {displayValue(value)}
+                          {formatSpreadsheetGeneralDisplay(value)}
                         </span>
                       )}
                     </div>
@@ -2117,7 +2114,9 @@ export function SpreadsheetProjectionGrid({
                 aria-colindex={selection.focus.col + 1}
                 aria-selected="true"
                 aria-label={`${cellName(selection.focus)}${
-                  hiddenActiveValue == null ? "" : `, ${displayValue(hiddenActiveValue)}`
+                  hiddenActiveValue == null
+                    ? ""
+                    : `, ${formatSpreadsheetGeneralDisplay(hiddenActiveValue)}`
                 }`}
               />
             </div>