@opengeni/react 0.15.0 → 0.20.0

package/src/components/human-input-form.tsx

@@ -0,0 +1,417 @@
+import type {
+  HumanInputAnswer,
+  HumanInputQuestion,
+  SessionHumanInputRequest,
+  SubmitHumanInputResponseRequest,
+} from "@opengeni/sdk";
+import { useEffect, useId, useRef, useState, type FormEvent, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type HumanInputAnswerDraft = {
+  values: string[];
+  other: string;
+  otherSelected: boolean;
+};
+
+export type HumanInputFormMessages = {
+  title: string;
+  description: string;
+  submit: string;
+  skip: string;
+  submitting: string;
+  other: string;
+  deadlineLabel: string;
+  formatDeadline: (value: string) => string;
+  required: string;
+  minLength: (count: number) => string;
+  maxLength: (count: number) => string;
+  otherRequired: string;
+  minSelections: (count: number) => string;
+  maxSelections: (count: number) => string;
+};
+
+export const defaultHumanInputFormMessages: HumanInputFormMessages = {
+  title: "Your input is needed",
+  description: "The agent is paused until you answer these questions.",
+  submit: "Continue",
+  skip: "Skip",
+  submitting: "Submitting…",
+  other: "Other",
+  deadlineLabel: "Respond before",
+  formatDeadline,
+  required: "This question is required.",
+  minLength: (count) => `Enter at least ${count} characters.`,
+  maxLength: (count) => `Enter no more than ${count} characters.`,
+  otherRequired: "Enter a value for Other.",
+  minSelections: (count) => `Choose at least ${count} option${count === 1 ? "" : "s"}.`,
+  maxSelections: (count) => `Choose no more than ${count} option${count === 1 ? "" : "s"}.`,
+};
+
+export type HumanInputFormProps = {
+  request: Pick<SessionHumanInputRequest, "id" | "questions" | "allowSkip" | "expiresAt">;
+  onSubmit: (response: SubmitHumanInputResponseRequest) => void | Promise<void>;
+  submitting?: boolean | undefined;
+  error?: string | null | undefined;
+  title?: ReactNode;
+  description?: ReactNode;
+  submitLabel?: string | undefined;
+  skipLabel?: string | undefined;
+  messages?: Partial<HumanInputFormMessages> | undefined;
+  autoFocus?: boolean | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * Styled but host-neutral renderer for one structured request. Hosts can use
+ * the headless `useHumanInputRequests` hook instead, or replace the title and
+ * description while retaining accessible field semantics and validation.
+ */
+export function HumanInputForm({
+  request,
+  onSubmit,
+  submitting = false,
+  error,
+  title,
+  description,
+  submitLabel,
+  skipLabel,
+  messages: messageOverrides,
+  autoFocus = true,
+  className,
+}: HumanInputFormProps) {
+  const messages = { ...defaultHumanInputFormMessages, ...messageOverrides };
+  const resolvedTitle = title === undefined ? messages.title : title;
+  const resolvedDescription = description === undefined ? messages.description : description;
+  const resolvedSubmitLabel = submitLabel ?? messages.submit;
+  const resolvedSkipLabel = skipLabel ?? messages.skip;
+  const formId = useId();
+  const [drafts, setDrafts] = useState<Record<string, HumanInputAnswerDraft>>(() =>
+    initialDrafts(request.questions),
+  );
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+  const [submissionError, setSubmissionError] = useState<string | null>(null);
+  const [submittingInternally, setSubmittingInternally] = useState(false);
+  const submissionInFlight = useRef(false);
+  const submissionGeneration = useRef(0);
+  const busy = submitting || submittingInternally;
+
+  useEffect(() => {
+    submissionGeneration.current += 1;
+    submissionInFlight.current = false;
+    setDrafts(initialDrafts(request.questions));
+    setValidationErrors({});
+    setSubmissionError(null);
+    setSubmittingInternally(false);
+  }, [request.id, request.questions]);
+
+  const update = (
+    questionId: string,
+    apply: (draft: HumanInputAnswerDraft) => HumanInputAnswerDraft,
+  ): void => {
+    setDrafts((current) => ({
+      ...current,
+      [questionId]: apply(current[questionId] ?? emptyDraft()),
+    }));
+    setValidationErrors((current) => {
+      if (!(questionId in current)) return current;
+      const next = { ...current };
+      delete next[questionId];
+      return next;
+    });
+  };
+
+  const submitResponse = async (response: SubmitHumanInputResponseRequest): Promise<void> => {
+    if (busy || submissionInFlight.current) return;
+    const generation = submissionGeneration.current;
+    submissionInFlight.current = true;
+    setSubmissionError(null);
+    setSubmittingInternally(true);
+    try {
+      await onSubmit(response);
+    } catch (cause) {
+      if (generation === submissionGeneration.current) {
+        setSubmissionError(cause instanceof Error ? cause.message : String(cause));
+      }
+    } finally {
+      if (generation === submissionGeneration.current) {
+        submissionInFlight.current = false;
+        setSubmittingInternally(false);
+      }
+    }
+  };
+
+  const submit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault();
+    const result = answersFromDrafts(request.questions, drafts, messages);
+    if (Object.keys(result.errors).length > 0) {
+      setValidationErrors(result.errors);
+      return;
+    }
+    await submitResponse({ outcome: "answered", answers: result.answers });
+  };
+
+  return (
+    <form
+      data-human-input-request={request.id}
+      onSubmit={(event) => void submit(event)}
+      className={cn(
+        "og-root flex w-full flex-col gap-5 rounded-og-lg border border-og-border bg-og-surface-1 p-5 shadow-og-sm",
+        className,
+      )}
+    >
+      <header>
+        <h2 className="text-og-md font-semibold text-og-fg">{resolvedTitle}</h2>
+        {resolvedDescription ? (
+          <div className="mt-1 text-og-sm text-og-fg-muted">{resolvedDescription}</div>
+        ) : null}
+        {request.expiresAt ? (
+          <p className="mt-1 text-og-xs text-og-fg-subtle">
+            {messages.deadlineLabel}{" "}
+            <time dateTime={request.expiresAt}>{messages.formatDeadline(request.expiresAt)}</time>
+          </p>
+        ) : null}
+      </header>
+
+      <fieldset disabled={busy} className="contents">
+        {request.questions.map((question, index) => {
+          const draft = drafts[question.id] ?? emptyDraft();
+          const fieldId = `${formId}-${index}`;
+          const errorId = `${fieldId}-error`;
+          const helpId = `${fieldId}-help`;
+          const describedBy =
+            [question.helpText ? helpId : null, validationErrors[question.id] ? errorId : null]
+              .filter(Boolean)
+              .join(" ") || undefined;
+          return (
+            <div key={question.id} className="flex flex-col gap-2">
+              <label
+                htmlFor={question.kind === "text" ? fieldId : undefined}
+                className="text-og-base font-medium text-og-fg"
+              >
+                {question.label ?? question.prompt}
+                {question.required ? (
+                  <span aria-hidden className="ml-1 text-og-status-failed">
+                    *
+                  </span>
+                ) : null}
+              </label>
+              {question.label ? (
+                <p className="text-og-sm text-og-fg-muted">{question.prompt}</p>
+              ) : null}
+              {question.helpText ? (
+                <p id={helpId} className="text-og-xs text-og-fg-subtle">
+                  {question.helpText}
+                </p>
+              ) : null}
+              {question.kind === "text" ? (
+                <textarea
+                  id={fieldId}
+                  value={draft.values[0] ?? ""}
+                  onChange={(event) =>
+                    update(question.id, (current) => ({
+                      ...current,
+                      values: event.target.value ? [event.target.value] : [],
+                    }))
+                  }
+                  aria-invalid={Boolean(validationErrors[question.id])}
+                  aria-describedby={describedBy}
+                  autoFocus={autoFocus && index === 0}
+                  rows={3}
+                  className="min-h-20 w-full resize-y rounded-og-md border border-og-border bg-og-surface-2 px-3 py-2 text-og-base text-og-fg outline-none placeholder:text-og-fg-subtle focus:border-og-accent"
+                />
+              ) : (
+                <div
+                  role={question.kind === "single_select" ? "radiogroup" : "group"}
+                  aria-describedby={describedBy}
+                  className="flex flex-col gap-2"
+                >
+                  {question.options.map((option, optionIndex) => {
+                    const checked = draft.values.includes(option.id);
+                    return (
+                      <label
+                        key={option.id}
+                        className="flex cursor-pointer items-start gap-2 rounded-og-md border border-og-border px-3 py-2 hover:bg-og-surface-2"
+                      >
+                        <input
+                          type={question.kind === "single_select" ? "radio" : "checkbox"}
+                          name={question.kind === "single_select" ? fieldId : undefined}
+                          autoFocus={autoFocus && index === 0 && optionIndex === 0}
+                          checked={checked}
+                          onChange={(event) =>
+                            update(question.id, (current) => ({
+                              ...current,
+                              values:
+                                question.kind === "single_select"
+                                  ? event.target.checked
+                                    ? [option.id]
+                                    : []
+                                  : event.target.checked
+                                    ? [...current.values, option.id]
+                                    : current.values.filter((value) => value !== option.id),
+                              ...(question.kind === "single_select" && event.target.checked
+                                ? { otherSelected: false }
+                                : {}),
+                            }))
+                          }
+                          className="mt-0.5 accent-og-accent"
+                        />
+                        <span className="min-w-0">
+                          <span className="block text-og-sm font-medium text-og-fg">
+                            {option.label}
+                          </span>
+                          {option.description ? (
+                            <span className="block text-og-xs text-og-fg-muted">
+                              {option.description}
+                            </span>
+                          ) : null}
+                        </span>
+                      </label>
+                    );
+                  })}
+                  {question.allowOther ? (
+                    <label className="flex items-start gap-2 rounded-og-md border border-og-border px-3 py-2">
+                      <input
+                        type={question.kind === "single_select" ? "radio" : "checkbox"}
+                        name={question.kind === "single_select" ? fieldId : undefined}
+                        checked={draft.otherSelected}
+                        autoFocus={autoFocus && index === 0 && question.options.length === 0}
+                        onChange={(event) =>
+                          update(question.id, (current) => ({
+                            ...current,
+                            otherSelected: event.target.checked,
+                            ...(question.kind === "single_select" && event.target.checked
+                              ? { values: [] }
+                              : {}),
+                          }))
+                        }
+                        className="mt-2 accent-og-accent"
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span className="block text-og-sm font-medium text-og-fg">
+                          {messages.other}
+                        </span>
+                        <input
+                          type="text"
+                          value={draft.other}
+                          disabled={!draft.otherSelected || busy}
+                          onChange={(event) =>
+                            update(question.id, (current) => ({
+                              ...current,
+                              other: event.target.value,
+                            }))
+                          }
+                          className="mt-1 w-full rounded-og-sm border border-og-border bg-og-surface-2 px-2 py-1.5 text-og-sm text-og-fg outline-none focus:border-og-accent disabled:opacity-50"
+                        />
+                      </span>
+                    </label>
+                  ) : null}
+                </div>
+              )}
+              {validationErrors[question.id] ? (
+                <p id={errorId} role="alert" className="text-og-xs text-og-status-failed">
+                  {validationErrors[question.id]}
+                </p>
+              ) : null}
+            </div>
+          );
+        })}
+      </fieldset>
+
+      {(error ?? submissionError) ? (
+        <p role="alert" className="text-og-sm text-og-status-failed">
+          {error ?? submissionError}
+        </p>
+      ) : null}
+      <footer className="flex items-center justify-end gap-2">
+        {request.allowSkip ? (
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => void submitResponse({ outcome: "skipped" })}
+            className="rounded-og-md border border-og-border px-3 py-2 text-og-sm font-medium text-og-fg-muted hover:bg-og-surface-2 disabled:opacity-50"
+          >
+            {resolvedSkipLabel}
+          </button>
+        ) : null}
+        <button
+          type="submit"
+          disabled={busy}
+          className="rounded-og-md bg-og-accent px-3 py-2 text-og-sm font-medium text-og-accent-fg hover:bg-og-accent-strong disabled:opacity-50"
+        >
+          {busy ? messages.submitting : resolvedSubmitLabel}
+        </button>
+      </footer>
+    </form>
+  );
+}
+
+export function answersFromDrafts(
+  questions: HumanInputQuestion[],
+  drafts: Record<string, HumanInputAnswerDraft>,
+  messageOverrides: Partial<HumanInputFormMessages> = {},
+): { answers: HumanInputAnswer[]; errors: Record<string, string> } {
+  const messages = { ...defaultHumanInputFormMessages, ...messageOverrides };
+  const answers: HumanInputAnswer[] = [];
+  const errors: Record<string, string> = {};
+  for (const question of questions) {
+    const draft = drafts[question.id] ?? emptyDraft();
+    const values = question.kind === "text" ? draft.values.filter(Boolean) : draft.values;
+    const other = draft.otherSelected ? draft.other.trim() : "";
+    const supplied = values.length + (other ? 1 : 0);
+    if (question.required && supplied === 0) {
+      errors[question.id] = messages.required;
+      continue;
+    }
+    if (question.kind === "text") {
+      const value = values[0] ?? "";
+      if (
+        value &&
+        question.validation?.minLength != null &&
+        value.length < question.validation.minLength
+      ) {
+        errors[question.id] = messages.minLength(question.validation.minLength);
+        continue;
+      }
+      if (question.validation?.maxLength != null && value.length > question.validation.maxLength) {
+        errors[question.id] = messages.maxLength(question.validation.maxLength);
+        continue;
+      }
+    } else {
+      if (draft.otherSelected && !other) {
+        errors[question.id] = messages.otherRequired;
+        continue;
+      }
+      const min = question.validation?.minSelections;
+      const max = question.kind === "single_select" ? 1 : question.validation?.maxSelections;
+      if (min != null && supplied < min) {
+        errors[question.id] = messages.minSelections(min);
+        continue;
+      }
+      if (max != null && supplied > max) {
+        errors[question.id] = messages.maxSelections(max);
+        continue;
+      }
+    }
+    if (supplied > 0) {
+      answers.push({
+        questionId: question.id,
+        values,
+        ...(other ? { other } : {}),
+      });
+    }
+  }
+  return { answers, errors };
+}
+
+function initialDrafts(questions: HumanInputQuestion[]): Record<string, HumanInputAnswerDraft> {
+  return Object.fromEntries(questions.map((question) => [question.id, emptyDraft()]));
+}
+
+function emptyDraft(): HumanInputAnswerDraft {
+  return { values: [], other: "", otherSelected: false };
+}
+
+function formatDeadline(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}

package/src/components/machine-card.tsx

@@ -194,7 +194,7 @@ export function MachineCard({
               onAttach?.(machine);
             }}
             className={cn(
-              "rounded-og-sm border border-og-border px-2.5 py-1 text-og-xs font-medium text-og-fg-muted transition-colors pointer-coarse:min-h-10",
+              "rounded-og-sm border border-og-border px-2.5 py-1 text-og-xs font-medium text-og-fg-muted transition-colors pointer-coarse:min-h-11",
               "hover:border-og-border-strong hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50",
             )}
           >

package/src/components/machines-dashboard.tsx

@@ -46,7 +46,7 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
           type="button"
           data-enroll-cta
           onClick={onEnroll}
-          className="inline-flex items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-10"
+          className="inline-flex items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-11"
         >
           <PlusIcon className="size-3.5" aria-hidden />
           Enroll a machine
@@ -90,7 +90,7 @@ function Header({
             type="button"
             data-enroll-cta
             onClick={onEnroll}
-            className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg pointer-coarse:min-h-10"
+            className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg pointer-coarse:min-h-11"
           >
             <PlusIcon className="size-3.5" aria-hidden />
             Enroll machine
@@ -140,7 +140,7 @@ export function MachinesDashboard({
               data-machines-retry
               onClick={onRefresh}
               disabled={loading}
-              className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-status-failed/30 px-2 py-1 text-og-xs font-medium transition-colors hover:border-og-status-failed/50 disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:min-h-10"
+              className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-status-failed/30 px-2 py-1 text-og-xs font-medium transition-colors hover:border-og-status-failed/50 disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:min-h-11"
             >
               <RefreshCwIcon className={cn("size-3.5", loading && "animate-og-spin")} aria-hidden />
               {loading ? "Retrying…" : "Retry"}

package/src/components/message-timeline.tsx

@@ -998,10 +998,10 @@ function NoticeRow({ item }: { item: NoticeItem }) {
 }
 
 /**
- * The inline reconnect card: a lapsed connection surfaces as a calm, tappable
- * affordance — provider logo, one human line, one primary Reconnect button —
- * instead of a raw "linear.app needs to be reconnected." string. The `reason`
- * only shapes the helper copy; no domain or enum code is shown as a label.
+ * The inline connection card: a lapsed connection surfaces as a calm, tappable
+ * reconnect affordance, while an incompatible host-owned endpoint/resource
+ * contract remains informative and non-actionable. The `reason` only shapes
+ * the helper copy; no domain or enum code is shown as a label.
  * `onReconnect` (from the app, which owns the SDK client) runs the flow; without
  * it, a pre-minted authorization link is offered, or the card stays informative.
  */
@@ -1018,6 +1018,8 @@ function AuthNeededRow({
   const [busy, setBusy] = useState(false);
   const [failed, setFailed] = useState(false);
   const provider = providerLabel(item.providerDomain);
+  const unavailable =
+    item.reason === "unsupported_auth" || item.reason === "resource_scope_unavailable";
 
   const start = async () => {
     if (!onReconnect || busy) {
@@ -1045,11 +1047,13 @@ function AuthNeededRow({
             label={provider}
           />
           <div className="min-w-0">
-            <p className="truncate text-og-md font-medium text-og-fg">Reconnect {provider}</p>
+            <p className="truncate text-og-md font-medium text-og-fg">
+              {unavailable ? `${provider} tools unavailable` : `Reconnect ${provider}`}
+            </p>
             <p className="truncate text-og-sm text-og-fg-subtle">{authReasonLine(item.reason)}</p>
           </div>
         </div>
-        {onReconnect ? (
+        {!unavailable && onReconnect ? (
           <button
             type="button"
             onClick={() => void start()}
@@ -1062,7 +1066,7 @@ function AuthNeededRow({
             <RefreshCwIcon className={cn("size-3.5", busy && "animate-og-spin")} aria-hidden />
             {busy ? "Reconnecting…" : "Reconnect"}
           </button>
-        ) : item.authorizationUrl ? (
+        ) : !unavailable && item.authorizationUrl ? (
           <a
             href={item.authorizationUrl}
             rel="noreferrer"
@@ -1160,6 +1164,10 @@ function authReasonLine(reason: AuthNeededItem["reason"]): string {
     case "expired":
     case "refresh_failed":
       return "Its access expired.";
+    case "unsupported_auth":
+      return "This connection cannot authenticate the configured tool endpoint.";
+    case "resource_scope_unavailable":
+      return "This tool endpoint cannot enforce the selected repository access.";
     default:
       return "Its connection needs attention.";
   }

package/src/components/model-picker.tsx

@@ -12,6 +12,8 @@ export type ModelPickerProps = {
   onChange: (modelId: string) => void;
   disabled?: boolean | undefined;
   className?: string | undefined;
+  /** Visible-to-assistive-technology label. Defaults to "Model". */
+  label?: string | undefined;
 };
 
 /**
@@ -25,7 +27,14 @@ export type ModelPickerProps = {
  * the send path. Renders nothing when no models are exposed, so a single-model
  * deployment shows no chrome.
  */
-export function ModelPicker({ models, value, onChange, disabled, className }: ModelPickerProps) {
+export function ModelPicker({
+  models,
+  value,
+  onChange,
+  disabled,
+  className,
+  label = "Model",
+}: ModelPickerProps) {
   const selectId = useId();
   // Group by provider, preserving first-seen order for both the providers and
   // the models within each — the server already orders the list (default model
@@ -50,14 +59,14 @@ export function ModelPicker({ models, value, onChange, disabled, className }: Mo
   return (
     <span className={cn("relative inline-flex items-center", className)}>
       <label htmlFor={selectId} className="sr-only">
-        Model
+        {label}
       </label>
       <select
         id={selectId}
         value={value ?? ""}
         onChange={(event) => onChange(event.target.value)}
         disabled={disabled === true}
-        aria-label="Model"
+        aria-label={label}
         className={cn(
           // Sized like the other footer controls; the chevron overlay needs the
           // right padding so the value never collides with it.

package/src/components/pierre-diff.tsx

@@ -78,6 +78,20 @@ export function PierreDiff({
   className,
 }: PierreDiffProps) {
   const [failed, setFailed] = useState(false);
+  const [forcedColors, setForcedColors] = useState(false);
+
+  // Pierre's rich renderer distinguishes additions/deletions primarily through
+  // foreground and background colors inside a shadow root. In Windows forced-
+  // colors mode those paints intentionally collapse, so expose the literal
+  // unified patch (+/- markers) instead of leaving changed lines ambiguous.
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(forced-colors: active)");
+    const update = () => setForcedColors(query.matches);
+    update();
+    query.addEventListener?.("change", update);
+    return () => query.removeEventListener?.("change", update);
+  }, []);
 
   // Probe the import once so a hard failure (peer missing) shows `fallback`
   // rather than a Suspense boundary that never resolves. Skipped when `plain`.
@@ -92,11 +106,18 @@ export function PierreDiff({
     };
   }, [plain]);
 
-  if (plain || failed) {
+  if (plain || failed || forcedColors) {
     // `plain` opts out of highlighting; `failed` = `@pierre/diffs` not installed.
     // Render the caller's fallback, or a plain (unhighlighted) patch dump — NOT a
     // second hunk renderer. One highlighted renderer (Pierre) + a text degrade.
-    return <div className={className}>{fallback ?? <PlainPatch diff={diff} />}</div>;
+    return (
+      <div
+        className={className}
+        data-opengeni-plain-diff={forcedColors ? "forced-colors" : "fallback"}
+      >
+        {fallback ?? <PlainPatch diff={diff} />}
+      </div>
+    );
   }
 
   // Default to the dark theme: the host UI is dark-first, and Pierre's own
@@ -131,13 +152,15 @@ export function PierreDiff({
     "--diffs-fg-number-addition-override": "var(--og-color-status-idle)",
     "--diffs-fg-number-deletion-override": "var(--og-color-status-failed)",
     "--diffs-bg-addition-override":
-      "color-mix(in oklch, var(--og-color-status-idle) 12%, var(--og-color-bg))",
+      "color-mix(in oklab, var(--og-color-status-idle) 12%, var(--og-color-bg))",
     "--diffs-bg-deletion-override":
-      "color-mix(in oklch, var(--og-color-status-failed) 12%, var(--og-color-bg))",
+      "color-mix(in oklab, var(--og-color-status-failed) 12%, var(--og-color-bg))",
     "--diffs-bg-addition-emphasis-override":
-      "color-mix(in oklch, var(--og-color-status-idle) 22%, var(--og-color-bg))",
+      "color-mix(in oklab, var(--og-color-status-idle) 22%, var(--og-color-bg))",
     "--diffs-bg-deletion-emphasis-override":
-      "color-mix(in oklch, var(--og-color-status-failed) 22%, var(--og-color-bg))",
+      "color-mix(in oklab, var(--og-color-status-failed) 22%, var(--og-color-bg))",
+    "--diffs-header-font-family": "var(--og-font-sans)",
+    "--diffs-font-family": "var(--og-font-mono)",
     "--diffs-font-size": "var(--og-code-font-size)",
     "--diffs-line-height": "var(--og-code-line-height)",
   } as CSSProperties;
@@ -177,7 +200,10 @@ function PlainPatch({ diff }: { diff: GitFileDiff[] }) {
       {diff.map((file) => (
         <pre
           key={file.path}
+          aria-label={`Diff for ${file.path}`}
           className="mb-2 overflow-auto whitespace-pre rounded-og-sm border border-og-border bg-og-bg/60 p-2.5 font-og-mono text-og-xs leading-5"
+          role="region"
+          tabIndex={0}
         >
           {gitFileDiffToPatch(file)
             .split("\n")