@opengeni/react 0.6.1 → 0.6.3

package/src/components/desktop-viewer.tsx

@@ -84,6 +84,10 @@ type DesktopUiState =
   | "error" // RFB error / securityfailure after a connect.
   | "connected"; // live framebuffer painting.
 
+// Media-inspection exception: the framebuffer sits on true black so screenshots
+// and desktop pixels are not tinted by the product chrome palette.
+const DESKTOP_MEDIA_BACKGROUND = "#000";
+
 /** Reasons that are genuinely-unavailable (never warmable from the viewer). A
  *  `lease_cold` is deliberately EXCLUDED — that's the warmable cold state. */
 function isHardUnavailable(reason: CapabilityUnavailableReason | null): boolean {
@@ -369,11 +373,11 @@ export function DesktopViewer({
   return (
     <div
       className={cn(
-        "relative h-full w-full overflow-hidden bg-black",
-        inControl &&
-          "ring-2 ring-inset ring-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]",
+        "relative h-full w-full overflow-hidden",
+        inControl && "ring-2 ring-inset ring-og-accent",
         className,
       )}
+      style={{ backgroundColor: DESKTOP_MEDIA_BACKGROUND }}
       data-opengeni-desktop
       data-state={stream.state}
       data-ui-state={uiState}
@@ -399,15 +403,15 @@ export function DesktopViewer({
           `connecting` UI-state (every other non-connected state has an explicit
           overlay). A spinner + transitional copy makes it feel live. */}
       {uiState === "connecting" && (
-        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
+        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-og-fg-subtle">
           <span className="relative flex items-center justify-center">
             <MonitorIcon className="size-8 opacity-30" strokeWidth={1.5} />
             <LoaderCircleIcon
-              className="absolute size-12 animate-og-spin text-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] opacity-70"
+              className="absolute size-12 animate-og-spin text-og-accent opacity-70"
               strokeWidth={1.25}
             />
           </span>
-          <span className="text-xs">Connecting to the desktop…</span>
+          <span className="text-og-sm">Connecting to the desktop…</span>
         </div>
       )}
 
@@ -438,7 +442,7 @@ export function DesktopViewer({
             !serverAllowsControl
               ? capability?.client === "frames"
                 ? "View-only — live control isn't available for this machine yet."
-                : "This deployment streams the desktop read-only"
+                : "This deployment streams the desktop read-only."
               : undefined
           }
           onTakeControl={() => setTakeControl(true)}
@@ -481,36 +485,36 @@ function TakeControlCallToAction({
         title={disabled ? disabledReason : "Take control of the desktop"}
         onClick={onTakeControl}
         className={cn(
-          "group pointer-events-auto flex items-center gap-3 rounded-[var(--og-radius-lg,12px)] border px-5 py-3",
-          "border-[color:var(--og-color-border,var(--color-border,#2a2a2a))]",
-          "bg-[color:var(--og-color-bg,#0d0d0d)]/85 backdrop-blur-md",
-          "shadow-[var(--og-shadow-lg,0_10px_30px_-10px_rgba(0,0,0,0.6))]",
+          "group pointer-events-auto flex items-center gap-3 rounded-og-lg border px-5 py-3",
+          "border-og-border",
+          "bg-og-bg/85 backdrop-blur-md",
+          "shadow-og-lg",
           "outline-none transition-all duration-150 ease-out",
-          "focus-visible:ring-2 focus-visible:ring-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] focus-visible:ring-offset-2 focus-visible:ring-offset-black",
+          "focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg",
           disabled
             ? "cursor-not-allowed opacity-60"
             : cn(
                 "cursor-pointer opacity-90 hover:-translate-y-0.5 hover:opacity-100",
-                "hover:border-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]",
-                "hover:bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]/10",
+                "hover:border-og-accent",
+                "hover:bg-og-accent/10",
               ),
         )}
       >
         <span
           className={cn(
             "flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
-            "bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]",
-            "text-[color:var(--og-color-accent-fg,#fff)]",
+            "bg-og-accent",
+            "text-og-accent-fg",
             disabled ? "" : "group-hover:scale-105",
           )}
         >
           <MousePointerClickIcon className="size-5" strokeWidth={2} />
         </span>
         <span className="flex flex-col items-start leading-tight">
-          <span className="text-sm font-semibold text-[color:var(--og-color-fg,#e6e6e6)]">
+          <span className="text-og-base font-semibold text-og-fg">
             Take control
           </span>
-          <span className="text-[11px] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
+          <span className="text-og-xs text-og-fg-subtle">
             {disabled && disabledReason ? disabledReason : "Drive the mouse & keyboard"}
           </span>
         </span>
@@ -530,15 +534,15 @@ function TakeControlCallToAction({
 function InControlBar({ shared, onRelease }: { shared: boolean; onRelease: () => void }) {
   return (
     <div className="pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between gap-2 p-2">
-      <span className="pointer-events-auto inline-flex items-center gap-2 rounded-[var(--og-radius-sm,4px)] bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] px-2.5 py-1 text-[11px] font-medium text-[color:var(--og-color-accent-fg,#fff)] shadow-[var(--og-shadow-md)]">
+      <span className="pointer-events-auto inline-flex items-center gap-2 rounded-og-sm bg-og-accent px-2.5 py-1 text-og-xs font-medium text-og-accent-fg shadow-og-md">
         <span className="size-1.5 animate-pulse rounded-full bg-current" aria-hidden />
         You&apos;re in control
         <span className="opacity-75">· click Return control (or Ctrl+Alt+Shift)</span>
       </span>
       <div className="pointer-events-auto flex items-center gap-1.5">
         {shared && (
-          <span className="rounded-[var(--og-radius-sm,4px)] bg-[color:var(--og-color-danger,var(--color-danger,#f85149))]/85 px-2 py-0.5 text-[10px] text-white">
-            Shared box — others are watching
+          <span className="rounded-og-sm bg-og-status-failed/85 px-2 py-0.5 text-og-xs text-og-accent-fg">
+            Shared sandbox — others are watching
           </span>
         )}
         <button
@@ -546,9 +550,9 @@ function InControlBar({ shared, onRelease }: { shared: boolean; onRelease: () =>
           onClick={onRelease}
           title="Return control (or press Ctrl+Alt+Shift)"
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-[var(--og-radius-sm,4px)] border px-2.5 py-1 text-[11px] font-semibold shadow-[var(--og-shadow-md)] transition-colors",
-            "border-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] bg-[color:var(--og-color-bg,#0d0d0d)]/90 text-[color:var(--og-color-fg,#e6e6e6)] backdrop-blur-sm",
-            "outline-none hover:bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] hover:text-[color:var(--og-color-accent-fg,#fff)] focus-visible:ring-2 focus-visible:ring-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]",
+            "inline-flex items-center gap-1.5 rounded-og-sm border px-2.5 py-1 text-og-xs font-semibold shadow-og-md transition-colors",
+            "border-og-accent bg-og-bg/90 text-og-fg backdrop-blur-sm",
+            "outline-none hover:bg-og-accent hover:text-og-accent-fg focus-visible:ring-2 focus-visible:ring-og-accent",
           )}
         >
           <MonitorIcon className="size-3.5" strokeWidth={2} aria-hidden />
@@ -568,7 +572,7 @@ function unavailableCopy(reason: CapabilityUnavailableReason | null): string {
     case "os_unsupported":
       return "The sandbox OS does not support a desktop stream.";
     case "not_provisioned":
-      return "No display stack is provisioned on this box yet.";
+      return "This sandbox doesn't have a desktop yet.";
     case "disabled_by_policy":
       return "Desktop streaming is disabled on this deployment.";
     case "lease_cold":
@@ -589,14 +593,14 @@ 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-lg border border-[color:var(--color-border,#2a2a2a)] bg-[color:var(--color-bg,#0d0d0d)]/90 p-5 text-center text-sm text-[color:var(--color-fg,#e6e6e6)] backdrop-blur-sm">
+    <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-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]"
+        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-xs text-[color:var(--color-fg-subtle,#888)]">
+        <p className="text-og-sm text-og-fg-subtle">
           Spinning up the desktop — this takes a few seconds.
         </p>
       </div>
@@ -604,7 +608,7 @@ function WarmingNotice({ onRetry }: { onRetry?: (() => void) | undefined }) {
         <button
           type="button"
           onClick={onRetry}
-          className="rounded border border-[color:var(--color-border,#2a2a2a)] px-3 py-1.5 text-xs text-[color:var(--color-fg-muted,#aaa)] transition-colors hover:text-[color:var(--color-fg,#e6e6e6)]"
+          className="rounded-og-sm border border-og-border px-3 py-1.5 text-og-sm text-og-fg-muted transition-colors hover:text-og-fg pointer-coarse:min-h-10"
         >
           Taking too long? Retry
         </button>
@@ -615,19 +619,19 @@ function WarmingNotice({ onRetry }: { onRetry?: (() => void) | undefined }) {
 
 function DefaultConsentGate({ shared, onAccept }: { shared: boolean; onAccept: () => void }) {
   return (
-    <div className="max-w-sm rounded-lg border border-[color:var(--color-border,#2a2a2a)] bg-[color:var(--color-bg,#0d0d0d)] p-4 text-center text-sm text-[color:var(--color-fg,#e6e6e6)]">
+    <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-xs text-[color:var(--color-fg-subtle,#888)]">
+      <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.
         {shared
-          ? " This box is shared: you will also see sibling sessions' agents on the same screen."
+          ? " This sandbox is shared: you'll also see other sessions' agents on the same screen."
           : ""}
       </p>
       <button
         type="button"
         onClick={onAccept}
-        className="rounded bg-[color:var(--color-brand,#3b82f6)] px-3 py-1.5 text-xs font-medium text-white"
+        className="rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg pointer-coarse:min-h-10"
       >
         I understand — show the desktop
       </button>
@@ -637,17 +641,17 @@ function DefaultConsentGate({ shared, onAccept }: { shared: boolean; onAccept: (
 
 function defaultNotice(title: string, body: string, onRetry?: () => void): ReactNode {
   return (
-    <div className="max-w-sm rounded-lg border border-[color:var(--color-border,#2a2a2a)] bg-[color:var(--color-bg,#0d0d0d)] p-4 text-center text-sm text-[color:var(--color-fg,#e6e6e6)]">
+    <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 flex items-center justify-center gap-1.5 font-medium">
         {onRetry && <WifiOffIcon className="size-4 opacity-70" strokeWidth={1.75} />}
         {title}
       </div>
-      <p className="text-xs text-[color:var(--color-fg-subtle,#888)]">{body}</p>
+      <p className="text-og-sm text-og-fg-subtle">{body}</p>
       {onRetry && (
         <button
           type="button"
           onClick={onRetry}
-          className="mt-3 rounded border border-[color:var(--color-border,#2a2a2a)] px-3 py-1.5 text-xs transition-colors hover:border-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]"
+          className="mt-3 rounded-og-sm border border-og-border px-3 py-1.5 text-og-sm transition-colors hover:border-og-accent pointer-coarse:min-h-10"
         >
           Reconnect
         </button>

package/src/components/diff-view.tsx

@@ -60,8 +60,8 @@ export function DiffView({
 
   if (diff.length === 0) {
     return (
-      <div className={cn("p-3 text-xs text-[color:var(--color-fg-subtle,#888)]", className)}>
-        {emptyState ?? (isRepo ? "No changes." : "No repository mounted.")}
+      <div className={cn("p-3 text-og-sm text-og-fg-subtle", className)}>
+        {emptyState ?? (isRepo ? "No changes" : "No repository mounted")}
       </div>
     );
   }
@@ -93,29 +93,29 @@ function FileDiffBlock({
   onSelect?: (() => void) | undefined;
 }) {
   return (
-    <section className="mb-2 overflow-hidden rounded border border-[color:var(--color-border,#2a2a2a)]">
+    <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-[color:var(--color-border,#2a2a2a)] bg-[color:var(--color-bg-subtle,#161616)] px-2 py-1 text-xs",
+          "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-mono">
+        <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 bg-[color:var(--color-bg,#0d0d0d)] px-1 py-0.5 text-[10px] uppercase tracking-wide text-[color:var(--color-fg-subtle,#888)]">
+          <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-[color:var(--color-success,#3fb950)]">+{file.additions}</span>
-          <span className="text-[color:var(--color-danger,#f85149)]">−{file.deletions}</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-xs text-[color:var(--color-fg-subtle,#888)]">Binary file not shown.</div>
+        <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-xs text-[color:var(--color-fg-subtle,#888)]">Diff too large — truncated.</div>
+        <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} />
       ) : (
@@ -126,8 +126,8 @@ function FileDiffBlock({
 }
 
 function lineBg(type: GitDiffLine["type"], theme: DiffTheme | undefined): string | undefined {
-  if (type === "add") return theme?.addBackground ?? "var(--color-diff-add, rgba(63,185,80,0.15))";
-  if (type === "del") return theme?.delBackground ?? "var(--color-diff-del, rgba(248,81,73,0.15))";
+  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;
 }
@@ -140,11 +140,11 @@ function marker(type: GitDiffLine["type"]): string {
 
 function UnifiedHunks({ file, theme }: { file: GitFileDiff; theme: DiffTheme | undefined }) {
   return (
-    <div className="font-mono text-[11px] leading-tight">
+    <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-[color:var(--color-info,#58a6ff)]"
+            className="px-2 py-0.5 text-og-accent"
             style={{ color: theme?.metaForeground }}
           >
             {hunk.header}
@@ -155,13 +155,13 @@ function UnifiedHunks({ file, theme }: { file: GitFileDiff; theme: DiffTheme | u
               className="flex"
               style={{ backgroundColor: lineBg(line.type, theme) }}
             >
-              <span className="w-10 shrink-0 select-none px-1 text-right text-[color:var(--color-fg-subtle,#666)]">
+              <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-[color:var(--color-fg-subtle,#666)]">
+              <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-[color:var(--color-fg-subtle,#888)]">
+              <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>
@@ -175,7 +175,7 @@ function UnifiedHunks({ file, theme }: { file: GitFileDiff; theme: DiffTheme | u
 
 function SplitHunks({ file, theme }: { file: GitFileDiff; theme: DiffTheme | undefined }) {
   return (
-    <div className="font-mono text-[11px] leading-tight">
+    <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)[] = [];
@@ -193,7 +193,7 @@ function SplitHunks({ file, theme }: { file: GitFileDiff; theme: DiffTheme | und
         const rows = Math.max(left.length, right.length);
         return (
           <div key={`${file.path}-h${hi}`}>
-            <div className="px-2 py-0.5 text-[color:var(--color-info,#58a6ff)]" style={{ color: theme?.metaForeground }}>
+            <div className="px-2 py-0.5 text-og-accent" style={{ color: theme?.metaForeground }}>
               {hunk.header}
             </div>
             {Array.from({ length: rows }).map((_, ri) => {
@@ -205,16 +205,16 @@ function SplitHunks({ file, theme }: { file: GitFileDiff; theme: DiffTheme | und
                     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-[color:var(--color-fg-subtle,#666)]">
+                    <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-[color:var(--color-border,#2a2a2a)]"
+                    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-[color:var(--color-fg-subtle,#666)]">
+                    <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>

package/src/components/enrollment-consent.tsx

@@ -43,8 +43,8 @@ function Capability({ icon, title, body }: { icon: ReactNode; title: string; bod
     <li className="flex items-start gap-2.5">
       <span className="mt-0.5 shrink-0 text-og-status-failed">{icon}</span>
       <span className="min-w-0">
-        <span className="block text-[13px] font-medium text-og-fg">{title}</span>
-        <span className="block text-[12px] text-og-fg-muted">{body}</span>
+        <span className="block text-og-base font-medium text-og-fg">{title}</span>
+        <span className="block text-og-sm text-og-fg-muted">{body}</span>
       </span>
     </li>
   );
@@ -113,15 +113,15 @@ export function EnrollmentConsent({
           <ShieldAlertIcon className="size-5" aria-hidden />
         </span>
         <div className="min-w-0">
-          <h1 className="text-base font-semibold text-og-fg">Give the agent your whole machine?</h1>
-          <p className="mt-1 text-[13px] text-og-fg-muted">
+          <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.
           </p>
         </div>
       </div>
 
-      <div className="flex flex-wrap items-center gap-2 rounded-og-md border border-og-border bg-og-surface-2 px-3 py-2 text-[12px]">
+      <div className="flex flex-wrap items-center gap-2 rounded-og-md border border-og-border bg-og-surface-2 px-3 py-2 text-og-sm">
         <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />
         <span className="font-medium text-og-fg">{machine.machineName}</span>
         <span className="font-og-mono text-og-fg-subtle">
@@ -163,21 +163,21 @@ export function EnrollmentConsent({
             checked={allowScreenControl}
             disabled={busy}
             onChange={(e) => setAllowScreenControl(e.target.checked)}
-            className="mt-0.5 size-4 accent-[var(--og-color-accent)]"
+            className="mt-0.5 size-4 accent-og-accent"
           />
           <span className="min-w-0">
-            <span className="flex items-center gap-1.5 text-[13px] font-medium text-og-fg">
+            <span className="flex items-center gap-1.5 text-og-base font-medium text-og-fg">
               <ScreenShareIcon className="size-3.5 text-og-fg-muted" aria-hidden />
               Also let the agent control my mouse & keyboard
             </span>
-            <span className="mt-0.5 block text-[12px] text-og-fg-muted">
+            <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.
             </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-[12px] text-og-fg-muted">
+        <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.
         </p>
@@ -189,7 +189,7 @@ export function EnrollmentConsent({
           data-deny
           disabled={busy}
           onClick={() => onDeny?.()}
-          className="flex-1 rounded-og-sm border border-og-border px-3 py-2 text-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg disabled:opacity-50"
+          className="flex-1 rounded-og-sm border border-og-border px-3 py-2 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg disabled:opacity-50 pointer-coarse:min-h-10"
         >
           Cancel
         </button>
@@ -198,7 +198,7 @@ export function EnrollmentConsent({
           data-approve
           disabled={busy}
           onClick={() => onApprove?.(allowScreenControl)}
-          className="flex-1 rounded-og-sm bg-og-status-failed px-3 py-2 text-sm font-semibold text-white transition-colors hover:opacity-90 disabled:opacity-50"
+          className="flex-1 rounded-og-sm bg-og-status-failed px-3 py-2 text-og-sm font-semibold text-og-accent-fg transition-colors hover:opacity-90 disabled:opacity-50 pointer-coarse:min-h-10"
         >
           {busy ? "Connecting…" : "Grant full access"}
         </button>
@@ -238,8 +238,8 @@ function ConsentResult({
       <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-base font-semibold text-og-fg">{title}</h1>
-      <p className="max-w-sm text-[13px] text-og-fg-muted">{body}</p>
+      <h1 className="text-og-md font-semibold text-og-fg">{title}</h1>
+      <p className="max-w-sm text-og-base text-og-fg-muted">{body}</p>
     </div>
   );
 }