@opengeni/react 0.12.0 → 0.13.0

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}