@opengeni/react 0.12.0 → 0.15.0

package/src/components/sandbox-files.tsx

@@ -1,85 +1,94 @@
-import type { FsReadResponse, GitFileDiff } from "@opengeni/sdk";
-import { FileIcon } from "lucide-react";
-import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { FsReadResponse } from "@opengeni/sdk";
+import { FileCode2Icon, FileWarningIcon, LoaderCircleIcon } from "lucide-react";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 import { useThemeType } from "../lib/use-theme-type";
 import type { UseSandboxFilesResult } from "../hooks/use-sandbox-files";
 import type { UseSandboxGitResult } from "../hooks/use-sandbox-git";
 import { CodeEditor } from "./code-editor";
 import { FileBrowser } from "./file-browser";
-import { DiffView } from "./diff-view";
-import { PierreDiff } from "./pierre-diff";
 import { PierreFile } from "./pierre-file";
 
 export type SandboxFilesProps = {
   /** From `useSandboxFiles(...)`. */
   files: UseSandboxFilesResult;
-  /** From `useSandboxGit(...)` — the working-tree diff. */
+  /** From `useSandboxGit(...)` — drives the branch/dirty header only. */
   git: UseSandboxGitResult;
-  /** From a second `useSandboxGit(..., { staged: true })` — the staged diff. */
+  /** @deprecated Diffs live in the dedicated Changes tab now; accepted for
+   *  source-compat but unused (the Files surface is a browser + viewer). */
   stagedGit?: UseSandboxGitResult | undefined;
   /** Whether a FileSystem surface is advertised (drives the unavailable notice). */
   fileSystemAvailable?: boolean | undefined;
-  /** Use Pierre's Shiki-highlighted diff (default true; falls back to built-in). */
+  /** Use Pierre's Shiki highlighter for the viewer (default true; plain fallback). */
   usePierre?: boolean | undefined;
   /** Allow in-place editing of tree files (CodeMirror). Default true. When false
    *  the surface is review-only: every text file opens in the read-only viewer. */
   editable?: boolean | undefined;
+  /** Fired once when the user first edits an open file (wake-on-edit intent). The
+   *  dock warms the box on this so the save lands fast; opening/reading never fires
+   *  it. Browsing the tree/diff must not warm a box. */
+  onEditIntent?: (() => void) | undefined;
+  /** A guarded diff path routed here by the parent workspace. */
+  requestedPath?: string | undefined;
+  /** Identity for one guarded-file request. Increment this when the same path is
+   *  deliberately requested again; it also lets a pending request be consumed
+   *  without overriding later manual tree navigation. Defaults to the path. */
+  requestedPathRequestId?: string | number | undefined;
+  /** False while the parent is waking a cold sandbox for `requestedPath`. */
+  requestedPathReady?: boolean | undefined;
   themeType?: "dark" | "light" | undefined;
   className?: string | undefined;
 };
 
-const STATUS_TINT: Record<GitFileDiff["status"], string> = {
-  added: "text-og-status-idle",
-  modified: "text-og-status-running",
-  deleted: "text-og-status-failed",
-  renamed: "text-og-accent",
-  copied: "text-og-accent",
-  untracked: "text-og-fg-subtle",
-  ignored: "text-og-fg-subtle",
-  conflicted: "text-og-status-failed",
-  typechange: "text-og-status-running",
-};
-
-const STATUS_LETTER: Record<GitFileDiff["status"], string> = {
-  added: "A",
-  modified: "M",
-  deleted: "D",
-  renamed: "R",
-  copied: "C",
-  untracked: "U",
-  ignored: "I",
-  conflicted: "!",
-  typechange: "T",
-};
-
 /**
- * The review-first Files surface: a sticky branch/dirty header, a "Changes"
- * group (changed files vs HEAD, badged), the full lazy file tree for context,
- * and an inline diff pane below for the selected changed file. The agent
- * commits; the human reviews — there is no stage/commit/push UI here (power-git
- * lives in the terminal).
+ * The Files surface: a branch/dirty header, the full lazy file tree, and a
+ * viewer/editor pane for the selected file. This is the workspace BROWSER — pick
+ * a file to read or edit it. Diff review lives in the dedicated Changes tab (this
+ * surface deliberately does NOT replicate the changed-files list, and does not
+ * diff here — one job per tab). The agent commits; the human reviews.
  */
 export function SandboxFiles({
   files,
   git,
-  stagedGit,
   fileSystemAvailable = true,
   usePierre = true,
   editable = true,
+  onEditIntent,
+  requestedPath,
+  requestedPathRequestId,
+  requestedPathReady = true,
   themeType,
   className,
 }: SandboxFilesProps) {
   const [selected, setSelected] = useState<string | null>(null);
-  const [staged, setStaged] = useState(false);
-  const [layout, setLayout] = useState<"unified" | "split">("unified");
-  // View vs Edit for the read-only-viewer branch (a tree file that is NOT a
-  // diff). Resets to View on every new selection so opening a file never lands
-  // you in a stale dirty editor for a different path.
+  // View vs Edit for the selected file. Resets to View on every new selection so
+  // opening a file never lands you in a stale dirty editor for a different path.
   const [editMode, setEditMode] = useState(false);
+  const pendingRequestRef = useRef<string | number | null>(null);
+  const handledRequestRef = useRef<string | number | null>(null);
+  const requestKey = requestedPath ? (requestedPathRequestId ?? requestedPath) : null;
 
-  // Side-by-side (tree left, diff right) once the surface is wide enough;
-  // stacked (tree over diff) on a narrow dock. Tracked off the container so it
+  useEffect(() => {
+    if (!requestedPath || requestKey === null) {
+      pendingRequestRef.current = null;
+      handledRequestRef.current = null;
+      return;
+    }
+    if (handledRequestRef.current === requestKey) {
+      return;
+    }
+    if (!requestedPathReady) {
+      pendingRequestRef.current = requestKey;
+      return;
+    }
+    handledRequestRef.current = requestKey;
+    pendingRequestRef.current = null;
+    setSelected(requestedPath);
+    setEditMode(false);
+  }, [requestKey, requestedPath, requestedPathReady]);
+
+  // Side-by-side (tree left, viewer right) once the surface is wide enough;
+  // stacked (tree over viewer) on a narrow dock. Tracked off the container so it
   // reacts to the dock resize, not just the viewport.
   const rootRef = useRef<HTMLDivElement | null>(null);
   const [wide, setWide] = useState(false);
@@ -94,42 +103,33 @@ export function SandboxFiles({
     return () => observer.disconnect();
   }, []);
 
-  // Resolve the effective diff theme from the host palette (the `data-og-theme`
-  // attribute the demo/app sets), defaulting to dark, unless the caller forced
-  // one. Keeps the Pierre diff dark-on-dark instead of a white slab.
+  // Resolve the effective viewer theme from the host palette (the `data-og-theme`
+  // attribute the demo/app sets), defaulting to dark, unless the caller forced one.
   const resolvedTheme = useThemeType(themeType);
 
-  const activeGit = staged && stagedGit ? stagedGit : git;
-  const changed = activeGit.diff;
-  const changedPaths = useMemo(() => new Set(changed.map((f) => f.path)), [changed]);
-
-  // The selection is EITHER a changed file (-> diff pane) or any tree file
-  // (-> read-only viewer pane). An explicit pick wins; otherwise default to the
-  // first changed file so a review-first dock opens on a diff. Crucially this is
-  // NOT gated on a repo: with no changes (or no repo) the pane simply waits for a
-  // tree click, and a clicked tree file always resolves to the viewer.
-  const effectiveSelected = selected ?? changed[0]?.path ?? null;
-  const selectedDiff = changed.find((f) => f.path === effectiveSelected) ?? null;
-  // A selected path that is not a changed file is viewed (fs.read), not diffed.
-  const viewPath = effectiveSelected && !selectedDiff ? effectiveSelected : null;
-
-  // Read the selected file's contents for the viewer pane (text/base64). The
-  // hook caps size + flags binary; we surface a notice for binary rather than
-  // dumping base64 into the highlighter.
+  // The selected tree file opens in the viewer (read-only) or the editor (when
+  // writable). Nothing is auto-selected — the pane waits for a tree click, so the
+  // Files tab opens as a calm browser, not a diff.
+  const viewPath = selected;
   const fileView = useFileView(viewPath, files.readFile);
 
-  // Selecting a (different) file always returns to View — never drop the user
-  // into an editor whose buffer belongs to the previously-selected path.
+  // Selecting a (different) file always returns to View — never drop the user into
+  // an editor whose buffer belongs to the previously-selected path. Manual
+  // navigation also consumes a pending guarded-file request: a late cold→warm
+  // transition must never pull the user away from the file they chose meanwhile.
   const selectFile = useCallback((path: string) => {
+    if (pendingRequestRef.current !== null) {
+      handledRequestRef.current = pendingRequestRef.current;
+      pendingRequestRef.current = null;
+    }
     setSelected(path);
     setEditMode(false);
   }, []);
 
   // A tree file is editable only when it is a real, fully-loaded text file: not
-  // binary (would corrupt on save) and not truncated (we only hold a PREFIX, so
-  // a save would write the prefix back and lose the tail). The editor is then
-  // additionally gated on the `editable` prop. Anything failing this opens
-  // read-only in the viewer.
+  // binary (would corrupt on save) and not truncated (we only hold a PREFIX). The
+  // editor is then additionally gated on the `editable` prop; anything failing this
+  // opens read-only in the viewer.
   const canEdit =
     editable &&
     viewPath !== null &&
@@ -142,151 +142,72 @@ export function SandboxFiles({
 
   if (!fileSystemAvailable) {
     return (
-      <Notice className={className}>This sandbox does not expose a file system.</Notice>
+      <Notice
+        className={className}
+        icon={<FileWarningIcon className="size-5" aria-hidden />}
+        title="Files unavailable"
+      >
+        This sandbox does not expose a file system.
+      </Notice>
     );
   }
 
   return (
     <div ref={rootRef} className={cn("flex h-full min-h-0 min-w-0 flex-col", className)}>
-      {/* Branch + dirty header */}
-      <GitHeader git={git} dirtyCount={changedPaths.size} />
+      {/* Branch + dirty header (context; NOT the changed-files list). */}
+      <GitHeader git={git} dirtyCount={git.diff.length} />
 
       <div className={cn("flex min-h-0 flex-1", wide ? "flex-row" : "flex-col")}>
-        {/* Tree pane: Changes group + full tree. A fixed left column when wide,
-            a top band when narrow. */}
+        {/* Tree pane: the full lazy file tree. A fixed left column when wide, a top
+            band when narrow. */}
         <div
           className={cn(
-            "min-h-0 overflow-auto",
-            wide
-              ? "w-[280px] shrink-0 border-r border-og-border"
-              : "flex-1",
+            "flex min-h-0 flex-col",
+            wide ? "w-[280px] shrink-0 border-r border-og-border" : "flex-1",
           )}
         >
-          {changed.length > 0 && (
-            <div className="border-b border-og-border">
-              <div className="px-2 py-1 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle">
-                Changes · {changed.length}
-              </div>
-              <ul className="pb-1">
-                {changed.map((file) => (
-                  <li key={file.path}>
-                    <button
-                      type="button"
-                      onClick={() => selectFile(file.path)}
-                      className={cn(
-                        "flex w-full items-center gap-1.5 truncate px-2 py-0.5 text-left text-og-sm hover:bg-og-surface-2 pointer-coarse:min-h-10",
-                        file.path === effectiveSelected && "bg-og-surface-2",
-                      )}
-                    >
-                      <span
-                        className={cn(
-                          "w-3 shrink-0 text-center font-og-mono text-og-xs",
-                          STATUS_TINT[file.status],
-                        )}
-                      >
-                        {STATUS_LETTER[file.status]}
-                      </span>
-                      <FileIcon className="size-3.5 shrink-0 opacity-70" />
-                      <span className="truncate">{file.path}</span>
-                      <span className="ml-auto flex shrink-0 items-center gap-1.5 pl-2 text-og-xs">
-                        <span className="text-og-status-idle">
-                          +{file.additions}
-                        </span>
-                        <span className="text-og-status-failed">
-                          −{file.deletions}
-                        </span>
-                      </span>
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          <div className="px-2 py-1 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle">
-            Files
-          </div>
           <FileBrowser
             result={files}
-            selectedPath={effectiveSelected ?? undefined}
+            selectedPath={selected ?? undefined}
             onSelectFile={selectFile}
+            editable={editable}
             emptyState="This directory is empty"
-            className="min-w-0"
+            className="min-w-0 flex-1"
           />
         </div>
 
-        {/* Diff pane: the selected file's diff. Fills the remaining width when
-            side-by-side, sits below the tree when stacked. */}
+        {/* Viewer pane: the selected file's contents (read-only) or the editor.
+            Fills the remaining width when side-by-side, sits below the tree when
+            stacked. */}
         <div
           className={cn(
             "flex min-h-0 min-w-0 flex-col",
-            wide
-              ? "flex-1"
-              : "flex-[1.4] border-t border-og-border",
+            wide ? "flex-1" : "flex-[1.4] border-t border-og-border",
           )}
         >
           <div className="flex shrink-0 items-center justify-between gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1">
-            <span className="min-w-0 truncate font-og-mono text-og-xs text-og-fg-muted">
-              {effectiveSelected ?? "No file selected"}
+            <span
+              data-opengeni-selected-file
+              className="min-w-0 truncate font-og-mono text-og-xs text-og-fg-muted"
+            >
+              {selected ?? "No file selected"}
             </span>
-            <div className="flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-1">
-              {/* The Working/Staged + Unified/Split toggles only apply to a diff.
-                  Hide them in the read-only viewer (a non-changed tree file). */}
-              {selectedDiff && stagedGit && (
-                <Segmented
-                  options={[
-                    { value: "working", label: "Working tree" },
-                    { value: "staged", label: "Staged" },
-                  ]}
-                  value={staged ? "staged" : "working"}
-                  onChange={(v) => setStaged(v === "staged")}
-                />
-              )}
-              {selectedDiff && (
-                <Segmented
-                  options={[
-                    { value: "unified", label: "Unified" },
-                    { value: "split", label: "Split" },
-                  ]}
-                  value={layout}
-                  onChange={(v) => setLayout(v as "unified" | "split")}
-                />
-              )}
-              {/* View/Edit toggle — only for a real, fully-loaded text file the
-                  editor can safely round-trip. Binary/truncated files never get
-                  an Edit affordance (they'd corrupt on save). */}
-              {!selectedDiff && canEdit && (
-                <Segmented
-                  options={[
-                    { value: "view", label: "View" },
-                    { value: "edit", label: "Edit" },
-                  ]}
-                  value={editMode ? "edit" : "view"}
-                  onChange={(v) => setEditMode(v === "edit")}
-                />
-              )}
-            </div>
+            {/* View/Edit toggle — only for a real, fully-loaded text file the editor
+                can safely round-trip. Binary/truncated/read-only files never get an
+                Edit affordance (they'd corrupt on save or can't be written). */}
+            {canEdit && (
+              <Segmented
+                options={[
+                  { value: "view", label: "View" },
+                  { value: "edit", label: "Edit" },
+                ]}
+                value={editMode ? "edit" : "view"}
+                onChange={(v) => setEditMode(v === "edit")}
+              />
+            )}
           </div>
           <div className="min-h-0 flex-1 overflow-auto">
-            {selectedDiff ? (
-              // A changed file -> diff pane (HEAD vs working/staged).
-              usePierre ? (
-                <PierreDiff
-                  diff={[selectedDiff]}
-                  layout={layout}
-                  themeType={resolvedTheme}
-                  fallback={
-                    <DiffView diff={[selectedDiff]} layout={layout} isRepo={git.isRepo} className="p-1" />
-                  }
-                  className="p-1"
-                />
-              ) : (
-                <DiffView diff={[selectedDiff]} layout={layout} isRepo={git.isRepo} className="p-1" />
-              )
-            ) : viewPath ? (
-              // Any other tree file -> editable editor (Edit mode) or read-only
-              // single-file viewer (fs.read). This works with NO repo — viewing
-              // and editing files never requires git.
+            {viewPath ? (
               showEditor && fileView.content !== null ? (
                 <CodeEditor
                   key={viewPath}
@@ -294,49 +215,64 @@ export function SandboxFiles({
                   initialContents={fileView.content}
                   themeType={resolvedTheme}
                   onSave={(contents) => files.writeFile(viewPath, contents)}
+                  {...(onEditIntent ? { onEditIntent } : {})}
                   className="h-full"
                 />
               ) : fileView.error ? (
-                <Notice>Could not open {viewPath}: {fileView.error.message}</Notice>
+                <Notice>
+                  Could not open {viewPath}: {fileView.error.message}
+                </Notice>
               ) : fileView.loading ? (
                 <Notice>Loading {viewPath}…</Notice>
               ) : fileView.isBinary ? (
-                <Notice>{viewPath} is a binary file ({fileView.sizeBytes ?? 0} bytes).</Notice>
+                <Notice>
+                  {viewPath} is a binary file ({fileView.sizeBytes ?? 0} bytes).
+                </Notice>
               ) : fileView.content !== null ? (
                 <>
-                {fileView.truncated && (
-                  <div className="border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-xs text-og-status-running">
-                    Large file — showing a truncated preview ({fileView.sizeBytes ?? 0} bytes loaded). Editing is disabled to avoid corrupting the file.
-                  </div>
-                )}
-                {usePierre ? (
-                  <PierreFile
-                    path={viewPath}
-                    contents={fileView.content}
-                    themeType={resolvedTheme}
-                    fallback={
-                      <pre className="overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg">
-                        {fileView.content}
-                      </pre>
-                    }
-                    className="p-1"
-                  />
-                ) : (
-                  <pre className="overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg">
-                    {fileView.content}
-                  </pre>
-                )}
+                  {fileView.truncated && (
+                    <div className="border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-xs text-og-status-running">
+                      Large file — showing a truncated preview ({fileView.sizeBytes ?? 0} bytes
+                      loaded). Editing is disabled to avoid corrupting the file.
+                    </div>
+                  )}
+                  {usePierre ? (
+                    <PierreFile
+                      path={viewPath}
+                      contents={fileView.content}
+                      themeType={resolvedTheme}
+                      fallback={
+                        <pre className="overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg">
+                          {fileView.content}
+                        </pre>
+                      }
+                      className="p-1"
+                    />
+                  ) : (
+                    <pre className="overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg">
+                      {fileView.content}
+                    </pre>
+                  )}
                 </>
               ) : (
                 <Notice>Loading {viewPath}…</Notice>
               )
+            ) : // Nothing selected — the tree shows the whole workspace; pick a file.
+            requestedPath && !requestedPathReady ? (
+              <Notice
+                icon={
+                  <LoaderCircleIcon
+                    className="size-5 animate-spin motion-reduce:animate-none"
+                    aria-hidden
+                  />
+                }
+                title="Waking sandbox"
+              >
+                Opening {requestedPath} when the live workspace is ready…
+              </Notice>
             ) : (
-              // Nothing selected — never claim a repo is required; the tree shows
-              // the whole workspace regardless of git.
-              <Notice>
-                {changed.length > 0
-                  ? "Select a changed file to review its diff, or a file in the tree to view it."
-                  : "Select a file in the tree to view it."}
+              <Notice icon={<FileCode2Icon className="size-5" aria-hidden />} title="Choose a file">
+                Select a file in the tree to preview it.
               </Notice>
             )}
           </div>
@@ -367,7 +303,7 @@ function GitHeader({ git, dirtyCount }: { git: UseSandboxGitResult; dirtyCount:
         </span>
       )}
       {dirty && (
-        <span className="ml-auto shrink-0 text-og-xs text-og-fg-subtle">
+        <span data-contrast-audited className="ml-auto shrink-0 text-og-xs text-og-fg-subtle">
           {dirtyCount} changed
         </span>
       )}
@@ -392,7 +328,7 @@ function Segmented({
           type="button"
           onClick={() => onChange(opt.value)}
           className={cn(
-            "rounded-og-xs px-1.5 py-0.5 text-og-xs pointer-coarse:min-h-10",
+            "min-h-7 rounded-og-xs px-1.5 py-0.5 text-og-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 pointer-coarse:min-h-11",
             opt.value === value
               ? "bg-og-accent-soft text-og-fg"
               : "text-og-fg-subtle hover:text-og-fg",
@@ -437,11 +373,25 @@ function useFileView(
   });
   useEffect(() => {
     if (!path) {
-      setState({ content: null, isBinary: false, truncated: false, sizeBytes: null, loading: false, error: null });
+      setState({
+        content: null,
+        isBinary: false,
+        truncated: false,
+        sizeBytes: null,
+        loading: false,
+        error: null,
+      });
       return;
     }
     let cancelled = false;
-    setState({ content: null, isBinary: false, truncated: false, sizeBytes: null, loading: true, error: null });
+    setState({
+      content: null,
+      isBinary: false,
+      truncated: false,
+      sizeBytes: null,
+      loading: true,
+      error: null,
+    });
     void readFile(path)
       .then((res) => {
         if (cancelled) return;
@@ -492,7 +442,17 @@ function decodeBase64Utf8(b64: string): string {
   return b64;
 }
 
-function Notice({ children, className }: { children: ReactNode; className?: string | undefined }) {
+function Notice({
+  children,
+  className,
+  icon,
+  title,
+}: {
+  children: ReactNode;
+  className?: string | undefined;
+  icon?: ReactNode | undefined;
+  title?: string | undefined;
+}) {
   return (
     <div
       className={cn(
@@ -500,7 +460,15 @@ function Notice({ children, className }: { children: ReactNode; className?: stri
         className,
       )}
     >
-      {children}
+      <div className="flex max-w-sm flex-col items-center gap-2.5">
+        {icon ? (
+          <span className="grid size-10 place-items-center rounded-og-lg border border-og-border bg-og-surface-1 text-og-fg-muted shadow-sm">
+            {icon}
+          </span>
+        ) : null}
+        {title ? <p className="font-medium text-og-fg">{title}</p> : null}
+        <div className="leading-5">{children}</div>
+      </div>
     </div>
   );
 }