@opengeni/react 0.12.0 → 0.15.0

package/src/components/code-editor.tsx

@@ -106,6 +106,10 @@ export type CodeEditorProps = {
   initialContents: string;
   /** Persist the current buffer. Resolves when the write lands; rejects to surface an error. */
   onSave: (contents: string) => Promise<unknown>;
+  /** Fired once when the buffer FIRST diverges from its baseline (the first real
+   *  keystroke) — the wake-on-edit intent. The host warms the box on this so the
+   *  eventual save lands fast; merely opening the file for reading never fires it. */
+  onEditIntent?: (() => void) | undefined;
   /** Read-only mode (e.g. a truncated/too-large file shown for reference only). */
   readOnly?: boolean | undefined;
   themeType?: "dark" | "light" | undefined;
@@ -132,6 +136,7 @@ export function CodeEditor({
   path,
   initialContents,
   onSave,
+  onEditIntent,
   readOnly = false,
   themeType = "dark",
   loading,
@@ -155,18 +160,35 @@ export function CodeEditor({
   // Reload the buffer when the file identity changes. Guard on initialContents
   // too so an external refresh of the SAME path (e.g. fs.changed re-read) reseeds
   // a clean buffer — but only when the user hasn't got unsaved edits in flight.
+  // Fire the wake-on-edit intent at most once per opened file — reset on re-seed.
+  const editIntentFiredRef = useRef(false);
   const lastSeed = useRef<{ path: string; contents: string }>({ path, contents: initialContents });
   useEffect(() => {
     const seedChanged =
       lastSeed.current.path !== path || lastSeed.current.contents !== initialContents;
     if (!seedChanged) return;
     lastSeed.current = { path, contents: initialContents };
+    editIntentFiredRef.current = false;
     setValue(initialContents);
     setBaseline(initialContents);
     setSaveError(null);
     setSavedTick(false);
   }, [path, initialContents]);
 
+  // Record a buffer change: the FIRST divergence from the baseline is the edit
+  // intent that warms the box (idempotent — latched per opened file).
+  const noteEdit = useCallback(
+    (next: string) => {
+      setValue(next);
+      setSavedTick(false);
+      if (!editIntentFiredRef.current && next !== baseline) {
+        editIntentFiredRef.current = true;
+        onEditIntent?.();
+      }
+    },
+    [baseline, onEditIntent],
+  );
+
   // Resolve the lazy bundle (editor + keymap/Prec helpers + language grammar)
   // once, re-resolving the grammar when the file's language class changes.
   const langKey = useMemo(() => languageForPath(path), [path]);
@@ -257,16 +279,7 @@ export function CodeEditor({
   if (failed) {
     return (
       <div className={cn("flex h-full min-h-0 flex-col", className)}>
-        {fallback ?? (
-          <PlainTextarea
-            value={value}
-            readOnly={readOnly}
-            onChange={(next) => {
-              setValue(next);
-              setSavedTick(false);
-            }}
-          />
-        )}
+        {fallback ?? <PlainTextarea value={value} readOnly={readOnly} onChange={noteEdit} />}
       </div>
     );
   }
@@ -282,11 +295,7 @@ export function CodeEditor({
         <span
           className={cn(
             "size-1.5 shrink-0 rounded-full transition-colors",
-            readOnly
-              ? "bg-transparent"
-              : dirty
-                ? "bg-og-status-running"
-                : "bg-og-status-idle",
+            readOnly ? "bg-transparent" : dirty ? "bg-og-status-running" : "bg-og-status-idle",
           )}
           title={readOnly ? "read-only" : dirty ? "unsaved changes" : "saved"}
         />
@@ -303,15 +312,9 @@ export function CodeEditor({
               {saveError.message}
             </span>
           )}
-          {!saveError && savedTick && (
-            <span className="text-og-xs text-og-status-idle">
-              Saved
-            </span>
-          )}
+          {!saveError && savedTick && <span className="text-og-xs text-og-status-idle">Saved</span>}
           {readOnly ? (
-            <span className="text-og-xs uppercase tracking-wide text-og-fg-subtle">
-              Read-only
-            </span>
+            <span className="text-og-xs uppercase tracking-wide text-og-fg-subtle">Read-only</span>
           ) : (
             <button
               type="button"
@@ -348,14 +351,7 @@ export function CodeEditor({
             extensions={cmExtensions}
             height="100%"
             className="og-cm-editor min-h-full text-og-sm"
-            onChange={
-              readOnly
-                ? undefined
-                : (next: string) => {
-                    setValue(next);
-                    setSavedTick(false);
-                  }
-            }
+            onChange={readOnly ? undefined : noteEdit}
           />
         </Suspense>
       </div>
@@ -390,9 +386,5 @@ function PlainTextarea({
 }
 
 function EditorSkeleton() {
-  return (
-    <div className="p-3 text-og-sm text-og-fg-subtle">
-      Loading editor…
-    </div>
-  );
+  return <div className="p-3 text-og-sm text-og-fg-subtle">Loading editor…</div>;
 }

package/src/components/command-palette.tsx

@@ -23,7 +23,15 @@ export type CommandPaletteProps = {
  * the opengeni#46 design tokens. Full keyboard nav lives in useSlashCommands;
  * this component is presentational + aria.
  */
-export function CommandPalette({ open, items, highlight, onHighlight, onRun, argHintText, listboxId }: CommandPaletteProps) {
+export function CommandPalette({
+  open,
+  items,
+  highlight,
+  onHighlight,
+  onRun,
+  argHintText,
+  listboxId,
+}: CommandPaletteProps) {
   return (
     <AnimatePresence>
       {open ? (
@@ -61,14 +69,25 @@ export function CommandPalette({ open, items, highlight, onHighlight, onRun, arg
                   className={cn(
                     "mx-1 flex cursor-pointer items-center gap-2 rounded-og-md px-2.5 py-1.5",
                     "transition-colors duration-100",
-                    selected ? "bg-og-accent/15 text-og-fg" : "text-og-fg-muted hover:bg-og-surface-3",
+                    selected
+                      ? "bg-og-accent/15 text-og-fg"
+                      : "text-og-fg-muted hover:bg-og-surface-3",
                   )}
                 >
                   <span className="flex min-w-0 items-baseline gap-1.5">
-                    <span className={cn("font-mono text-[13px]", selected ? "text-og-accent" : "text-og-fg")}>
+                    <span
+                      className={cn(
+                        "font-mono text-[13px]",
+                        selected ? "text-og-accent" : "text-og-fg",
+                      )}
+                    >
                       /{command.name}
                     </span>
-                    {hint ? <span className="truncate font-mono text-[11px] text-og-fg-subtle">{hint}</span> : null}
+                    {hint ? (
+                      <span className="truncate font-mono text-[11px] text-og-fg-subtle">
+                        {hint}
+                      </span>
+                    ) : null}
                   </span>
                   <span className="ml-auto flex items-center gap-1.5">
                     {command.danger ? (
@@ -76,7 +95,9 @@ export function CommandPalette({ open, items, highlight, onHighlight, onRun, arg
                         danger
                       </span>
                     ) : null}
-                    <span className="truncate text-[12px] text-og-fg-subtle max-sm:hidden">{command.description}</span>
+                    <span className="truncate text-[12px] text-og-fg-subtle max-sm:hidden">
+                      {command.description}
+                    </span>
                   </span>
                 </li>
               );

package/src/components/desktop-viewer.tsx

@@ -1,4 +1,8 @@
-import type { CapabilityUnavailableReason, DesktopRfbFactory, DesktopStreamCapability } from "@opengeni/sdk";
+import type {
+  CapabilityUnavailableReason,
+  DesktopRfbFactory,
+  DesktopStreamCapability,
+} from "@opengeni/sdk";
 import { LoaderCircleIcon, MonitorIcon, MousePointerClickIcon, WifiOffIcon } from "lucide-react";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
@@ -214,8 +218,7 @@ export function DesktopViewer({
   // Do NOT open a socket while the viewer-cap (429) notice is showing — the slot
   // is already exhausted, so connecting would only burn a doomed attempt (and in
   // tests leak an unhandled ws error from the never-resolving tunnel URL).
-  const connectCapability =
-    !transportNull && !needsAck && !viewerCapReached ? capability : null;
+  const connectCapability = !transportNull && !needsAck && !viewerCapReached ? capability : null;
   const stream = useDesktopStream({
     capability: connectCapability,
     containerRef,
@@ -309,7 +312,14 @@ export function DesktopViewer({
     if (!hasLiveUrl || connected || stream.error || connectTimeoutMs <= 0) return;
     const timer = setTimeout(() => setConnectTimedOut(true), connectTimeoutMs);
     return () => clearTimeout(timer);
-  }, [hasLiveUrl, connected, connectTimeoutMs, connectCapability?.url, stream.error, reconnectNonce]);
+  }, [
+    hasLiveUrl,
+    connected,
+    connectTimeoutMs,
+    connectCapability?.url,
+    stream.error,
+    reconnectNonce,
+  ]);
 
   const reconnect = () => {
     setConnectTimedOut(false);
@@ -338,11 +348,15 @@ export function DesktopViewer({
     case "viewer_cap":
       overlay =
         renderViewerCap?.() ??
-        defaultNotice("Too many viewers", "This session has reached its live-viewer limit. Try again shortly.");
+        defaultNotice(
+          "Too many viewers",
+          "This session has reached its live-viewer limit. Try again shortly.",
+        );
       break;
     case "unavailable":
       overlay =
-        renderUnavailable?.(reason) ?? defaultNotice("Desktop unavailable", unavailableCopy(reason));
+        renderUnavailable?.(reason) ??
+        defaultNotice("Desktop unavailable", unavailableCopy(reason));
       break;
     case "consent":
       overlay = renderConsentGate ? (
@@ -362,7 +376,11 @@ export function DesktopViewer({
       );
       break;
     case "error":
-      overlay = defaultNotice("Desktop disconnected", stream.error?.message ?? "The stream dropped.", reconnect);
+      overlay = defaultNotice(
+        "Desktop disconnected",
+        stream.error?.message ?? "The stream dropped.",
+        reconnect,
+      );
       break;
     case "connecting":
     case "connected":
@@ -511,9 +529,7 @@ function TakeControlCallToAction({
           <MousePointerClickIcon className="size-5" strokeWidth={2} />
         </span>
         <span className="flex flex-col items-start leading-tight">
-          <span className="text-og-base font-semibold text-og-fg">
-            Take control
-          </span>
+          <span className="text-og-base font-semibold text-og-fg">Take control</span>
           <span className="text-og-xs text-og-fg-subtle">
             {disabled && disabledReason ? disabledReason : "Drive the mouse & keyboard"}
           </span>
@@ -594,10 +610,7 @@ function unavailableCopy(reason: CapabilityUnavailableReason | null): string {
 function WarmingNotice({ onRetry }: { onRetry?: (() => void) | undefined }) {
   return (
     <div className="flex max-w-sm flex-col items-center gap-3 rounded-og-lg border border-og-border bg-og-bg/90 p-5 text-center text-og-base text-og-fg backdrop-blur-sm">
-      <LoaderCircleIcon
-        className="size-7 animate-og-spin text-og-accent"
-        strokeWidth={1.5}
-      />
+      <LoaderCircleIcon className="size-7 animate-og-spin text-og-accent" strokeWidth={1.5} />
       <div className="space-y-1">
         <div className="font-medium">Warming the sandbox…</div>
         <p className="text-og-sm text-og-fg-subtle">
@@ -622,8 +635,8 @@ function DefaultConsentGate({ shared, onAccept }: { shared: boolean; onAccept: (
     <div className="max-w-sm rounded-og-lg border border-og-border bg-og-bg p-4 text-center text-og-base text-og-fg">
       <div className="mb-1 font-medium">Watch the live desktop?</div>
       <p className="mb-3 text-og-sm text-og-fg-subtle">
-        The desktop pixel stream is <strong>un-redacted</strong> — it can show secrets the agent prints
-        on screen.
+        The desktop pixel stream is <strong>un-redacted</strong> — it can show secrets the agent
+        prints on screen.
         {shared
           ? " This sandbox is shared: you'll also see other sessions' agents on the same screen."
           : ""}

package/src/components/diff-view.tsx

@@ -1,8 +1,14 @@
-import type { GitDiffLine, GitFileDiff } from "@opengeni/sdk";
+import type { GitFileDiff } from "@opengeni/sdk";
 import { type ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { PierreDiff } from "./pierre-diff";
 
-/** Theme tokens for the diff line backgrounds. */
+/**
+ * @deprecated Use {@link PierreDiff} directly. Retained only as a thin,
+ * back-compat alias that renders the Pierre (Shiki) renderer with a plain-text
+ * degrade. The old hand-rolled hunk renderer was removed in Workbench v2 — the
+ * workbench keeps exactly ONE diff renderer. This alias is removed next major.
+ */
 export type DiffTheme = {
   addBackground?: string;
   delBackground?: string;
@@ -10,54 +16,39 @@ export type DiffTheme = {
   metaForeground?: string;
 };
 
+/**
+ * @deprecated Use {@link PierreDiff}. `theme`/`onSelectFile`/`emptyState` from the
+ * removed hand-rolled renderer are accepted for source compatibility and ignored;
+ * `fallback` still overrides the plain-text degrade.
+ */
 export type DiffViewProps = {
-  /** From `useSandboxGit().diff` — the structured per-file hunks. */
   diff: GitFileDiff[];
-  /** Rendered instead of the built-in diff (the Pierre-swap escape hatch). */
   fallback?: ReactNode | undefined;
-  /** unified | split. Default "unified". */
   layout?: "unified" | "split" | undefined;
+  themeType?: "dark" | "light" | undefined;
+  /** @deprecated line-background theming was part of the removed renderer. */
   theme?: DiffTheme | undefined;
+  /** @deprecated the alias no longer renders a clickable file header. */
   onSelectFile?: ((path: string) => void) | undefined;
-  /** Distinguishes "no changes" from "no repository mounted". */
   isRepo?: boolean | undefined;
   emptyState?: ReactNode | undefined;
   className?: string | undefined;
 };
 
-const STATUS_LABEL: Record<GitFileDiff["status"], string> = {
-  added: "added",
-  modified: "modified",
-  deleted: "deleted",
-  renamed: "renamed",
-  copied: "copied",
-  untracked: "untracked",
-  ignored: "ignored",
-  conflicted: "conflicted",
-  typechange: "typechange",
-};
-
 /**
- * The diff view, fed by the Git service via `useSandboxGit().diff`. This is our
- * `PierreDiff` boundary: the built-in renderer delivers the same UX (per-file
- * hunks, unified or side-by-side, old/new line numbers, add/del counts), and a
- * consumer with Pierre's `@pierre/diffs` installed can swap it via `fallback`
- * while keeping the same `GitFileDiff[]` data contract from the hook.
+ * @deprecated Use {@link PierreDiff} directly. Thin alias: renders `PierreDiff`
+ * (Shiki-highlighted, unified/split) with a plain-text fallback for a host
+ * without `@pierre/diffs`. Removed next major.
  */
 export function DiffView({
   diff,
   fallback,
   layout = "unified",
-  theme,
-  onSelectFile,
+  themeType,
   isRepo = true,
   emptyState,
   className,
 }: DiffViewProps) {
-  if (fallback !== undefined) {
-    return <div className={className}>{fallback}</div>;
-  }
-
   if (diff.length === 0) {
     return (
       <div className={cn("p-3 text-og-sm text-og-fg-subtle", className)}>
@@ -65,166 +56,13 @@ export function DiffView({
       </div>
     );
   }
-
-  return (
-    <div className={cn("min-w-0 overflow-auto", className)} data-opengeni-diff>
-      {diff.map((file) => (
-        <FileDiffBlock
-          key={file.path}
-          file={file}
-          layout={layout}
-          theme={theme}
-          {...(onSelectFile ? { onSelect: () => onSelectFile(file.path) } : {})}
-        />
-      ))}
-    </div>
-  );
-}
-
-function FileDiffBlock({
-  file,
-  layout,
-  theme,
-  onSelect,
-}: {
-  file: GitFileDiff;
-  layout: "unified" | "split";
-  theme: DiffTheme | undefined;
-  onSelect?: (() => void) | undefined;
-}) {
-  return (
-    <section className="mb-2 overflow-hidden rounded-og-sm border border-og-border">
-      <header
-        className={cn(
-          "flex items-center justify-between gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-sm",
-          onSelect && "cursor-pointer",
-        )}
-        onClick={onSelect}
-      >
-        <span className="truncate font-og-mono">
-          {file.oldPath && file.oldPath !== file.path ? `${file.oldPath} → ${file.path}` : file.path}
-        </span>
-        <span className="flex shrink-0 items-center gap-2">
-          <span className="rounded-og-xs bg-og-bg px-1 py-0.5 text-og-xs text-og-fg-subtle">
-            {STATUS_LABEL[file.status]}
-          </span>
-          <span className="text-og-status-idle">+{file.additions}</span>
-          <span className="text-og-status-failed">−{file.deletions}</span>
-        </span>
-      </header>
-      {file.isBinary ? (
-        <div className="px-2 py-3 text-og-sm text-og-fg-subtle">Binary file not shown</div>
-      ) : file.truncated ? (
-        <div className="px-2 py-3 text-og-sm text-og-fg-subtle">Diff too large — truncated</div>
-      ) : layout === "split" ? (
-        <SplitHunks file={file} theme={theme} />
-      ) : (
-        <UnifiedHunks file={file} theme={theme} />
-      )}
-    </section>
-  );
-}
-
-function lineBg(type: GitDiffLine["type"], theme: DiffTheme | undefined): string | undefined {
-  if (type === "add") return theme?.addBackground ?? "var(--og-color-diff-add-bg)";
-  if (type === "del") return theme?.delBackground ?? "var(--og-color-diff-del-bg)";
-  if (type === "meta") return undefined;
-  return theme?.contextBackground;
-}
-
-function marker(type: GitDiffLine["type"]): string {
-  if (type === "add") return "+";
-  if (type === "del") return "−";
-  return " ";
-}
-
-function UnifiedHunks({ file, theme }: { file: GitFileDiff; theme: DiffTheme | undefined }) {
-  return (
-    <div className="font-og-mono text-og-xs">
-      {file.hunks.map((hunk, hi) => (
-        <div key={`${file.path}-h${hi}`}>
-          <div
-            className="px-2 py-0.5 text-og-accent"
-            style={{ color: theme?.metaForeground }}
-          >
-            {hunk.header}
-          </div>
-          {hunk.lines.map((line, li) => (
-            <div
-              key={`${file.path}-h${hi}-l${li}`}
-              className="flex"
-              style={{ backgroundColor: lineBg(line.type, theme) }}
-            >
-              <span className="w-10 shrink-0 select-none px-1 text-right text-og-fg-subtle">
-                {line.oldNo ?? ""}
-              </span>
-              <span className="w-10 shrink-0 select-none px-1 text-right text-og-fg-subtle">
-                {line.newNo ?? ""}
-              </span>
-              <span className="w-4 shrink-0 select-none text-center text-og-fg-subtle">
-                {marker(line.type)}
-              </span>
-              <span className="whitespace-pre-wrap break-all px-1">{line.text}</span>
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function SplitHunks({ file, theme }: { file: GitFileDiff; theme: DiffTheme | undefined }) {
   return (
-    <div className="font-og-mono text-og-xs">
-      {file.hunks.map((hunk, hi) => {
-        // Pair del/add lines side-by-side; context spans both columns.
-        const left: (GitDiffLine | null)[] = [];
-        const right: (GitDiffLine | null)[] = [];
-        for (const line of hunk.lines) {
-          if (line.type === "context" || line.type === "meta") {
-            left.push(line);
-            right.push(line);
-          } else if (line.type === "del") {
-            left.push(line);
-          } else {
-            right.push(line);
-          }
-        }
-        const rows = Math.max(left.length, right.length);
-        return (
-          <div key={`${file.path}-h${hi}`}>
-            <div className="px-2 py-0.5 text-og-accent" style={{ color: theme?.metaForeground }}>
-              {hunk.header}
-            </div>
-            {Array.from({ length: rows }).map((_, ri) => {
-              const l = left[ri] ?? null;
-              const r = right[ri] ?? null;
-              return (
-                <div key={`${file.path}-h${hi}-r${ri}`} className="flex">
-                  <span
-                    className="flex w-1/2 min-w-0"
-                    style={{ backgroundColor: l ? lineBg(l.type, theme) : undefined }}
-                  >
-                    <span className="w-10 shrink-0 select-none px-1 text-right text-og-fg-subtle">
-                      {l?.oldNo ?? ""}
-                    </span>
-                    <span className="whitespace-pre-wrap break-all px-1">{l?.text ?? ""}</span>
-                  </span>
-                  <span
-                    className="flex w-1/2 min-w-0 border-l border-og-border"
-                    style={{ backgroundColor: r ? lineBg(r.type, theme) : undefined }}
-                  >
-                    <span className="w-10 shrink-0 select-none px-1 text-right text-og-fg-subtle">
-                      {r?.newNo ?? ""}
-                    </span>
-                    <span className="whitespace-pre-wrap break-all px-1">{r?.text ?? ""}</span>
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
-    </div>
+    <PierreDiff
+      diff={diff}
+      layout={layout}
+      themeType={themeType}
+      {...(fallback !== undefined ? { fallback } : {})}
+      className={className}
+    />
   );
 }

package/src/components/enrollment-consent.tsx

@@ -95,7 +95,10 @@ export function EnrollmentConsent({
         className={className}
         tone="danger"
         title="Could not complete enrollment"
-        body={errorMessage ?? "The code may have expired. Re-run the install one-liner on the machine for a fresh code."}
+        body={
+          errorMessage ??
+          "The code may have expired. Re-run the install one-liner on the machine for a fresh code."
+        }
       />
     );
   }
@@ -113,10 +116,13 @@ export function EnrollmentConsent({
           <ShieldAlertIcon className="size-5" aria-hidden />
         </span>
         <div className="min-w-0">
-          <h1 className="text-og-md font-semibold text-og-fg">Give the agent your whole machine?</h1>
+          <h1 className="text-og-md font-semibold text-og-fg">
+            Give the agent your whole machine?
+          </h1>
           <p className="mt-1 text-og-base text-og-fg-muted">
-            Approving lets the OpenGeni agent run on <span className="font-medium text-og-fg">{machine.machineName}</span> with
-            full access. This is your real computer — not a sandbox.
+            Approving lets the OpenGeni agent run on{" "}
+            <span className="font-medium text-og-fg">{machine.machineName}</span> with full access.
+            This is your real computer — not a sandbox.
           </p>
         </div>
       </div>
@@ -127,7 +133,9 @@ export function EnrollmentConsent({
         <span className="font-og-mono text-og-fg-subtle">
           {machine.os}/{machine.arch}
         </span>
-        <span aria-hidden className="text-og-fg-subtle">·</span>
+        <span aria-hidden className="text-og-fg-subtle">
+          ·
+        </span>
         <span className="text-og-fg-subtle">
           code <span className="font-og-mono font-medium text-og-fg">{userCode}</span>
         </span>
@@ -171,15 +179,16 @@ export function EnrollmentConsent({
               Also let the agent control my mouse & keyboard
             </span>
             <span className="mt-0.5 block text-og-sm text-og-fg-muted">
-              Optional. Enables computer-use — the agent can move the pointer, type, and click on this machine's desktop. Leave
-              off to let it only watch.
+              Optional. Enables computer-use — the agent can move the pointer, type, and click on
+              this machine's desktop. Leave off to let it only watch.
             </span>
           </span>
         </label>
       ) : (
         <p className="flex items-start gap-2 rounded-og-md border border-og-border bg-og-bg px-3 py-2 text-og-sm text-og-fg-muted">
           <CircleAlertIcon className="mt-px size-3.5 shrink-0 text-og-fg-subtle" aria-hidden />
-          This machine has no display, so screen control isn't available — files, terminal, and git only.
+          This machine has no display, so screen control isn't available — files, terminal, and git
+          only.
         </p>
       )}
 
@@ -225,7 +234,11 @@ function ConsentResult({
         ? "border-og-status-failed/30"
         : "border-og-border";
   const iconClass =
-    tone === "ok" ? "text-og-status-running" : tone === "danger" ? "text-og-status-failed" : "text-og-fg-subtle";
+    tone === "ok"
+      ? "text-og-status-running"
+      : tone === "danger"
+        ? "text-og-status-failed"
+        : "text-og-fg-subtle";
   return (
     <div
       data-enrollment-result={tone}
@@ -235,7 +248,12 @@ function ConsentResult({
         className,
       )}
     >
-      <span className={cn("flex size-10 items-center justify-center rounded-full bg-og-surface-2", iconClass)}>
+      <span
+        className={cn(
+          "flex size-10 items-center justify-center rounded-full bg-og-surface-2",
+          iconClass,
+        )}
+      >
         <LaptopIcon className="size-5" aria-hidden />
       </span>
       <h1 className="text-og-md font-semibold text-og-fg">{title}</h1>

package/src/components/enrollment-device-flow.tsx

@@ -99,7 +99,9 @@ export function EnrollmentDeviceFlow({
 
       {installCommand ? (
         <div className="flex flex-col gap-1.5">
-          <span className="text-[11px] font-medium uppercase tracking-wide text-og-fg-subtle">1 · Run on the machine</span>
+          <span className="text-[11px] font-medium uppercase tracking-wide text-og-fg-subtle">
+            1 · Run on the machine
+          </span>
           <div className="flex items-center justify-between gap-2 overflow-hidden rounded-og-md border border-og-border bg-og-bg px-2.5 py-1.5">
             <code className="flex min-w-0 items-center gap-2 overflow-x-auto font-og-mono text-[12px] text-og-fg">
               <TerminalIcon className="size-3.5 shrink-0 text-og-fg-subtle" aria-hidden />
@@ -164,13 +166,14 @@ export function EnrollmentDeviceFlow({
         {awaitingCode ? (
           <>
             The one-liner prints a short code. Open{" "}
-            <span className="font-og-mono text-og-fg-muted">{verificationUri}</span> and confirm the code shown there
-            matches.
+            <span className="font-og-mono text-og-fg-muted">{verificationUri}</span> and confirm the
+            code shown there matches.
           </>
         ) : (
           <>
-            Confirm code <span className="font-og-mono text-og-fg-muted">{userCode}</span> — the one printed by the
-            one-liner — at <span className="font-og-mono text-og-fg-muted">{verificationUri}</span>.
+            Confirm code <span className="font-og-mono text-og-fg-muted">{userCode}</span> — the one
+            printed by the one-liner — at{" "}
+            <span className="font-og-mono text-og-fg-muted">{verificationUri}</span>.
             {typeof expiresInSeconds === "number" ? (
               <> Expires in {Math.max(0, Math.round(expiresInSeconds / 60))} min.</>
             ) : null}