@opengeni/react 0.48.0 → 0.57.0

package/src/components/workbench-changes.tsx

@@ -1,6 +1,7 @@
 import type { GitFileDiff } from "@opengeni/sdk";
 import { ArrowUpRightIcon, FileWarningIcon, HistoryIcon } from "lucide-react";
 import {
+  Component,
   type ReactNode,
   useCallback,
   useEffect,
@@ -10,7 +11,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { VList } from "virtua";
+import { VList, type VListHandle } from "virtua";
 import { cn } from "../lib/cn";
 import { useUnicodeFallbackFonts } from "../lib/use-unicode-fonts";
 import { useThemeType } from "../lib/use-theme-type";
@@ -96,6 +97,153 @@ type RailRow =
   | { kind: "group"; label: string; count: number }
   | { kind: "file"; file: SandboxGitFileDiff; index: number };
 
+type ChangesRailVListProps = {
+  children: ReactNode;
+  className: string;
+  coarsePointer: boolean;
+  files: readonly SandboxGitFileDiff[];
+  rowCount: number;
+};
+
+type ChangesRailVListState = {
+  renderedRowCount: number;
+  resetVersion: number;
+};
+
+type ChangesRailSnapshot = {
+  focusedPath: string | null;
+  scrollOffset: number;
+};
+
+/** Virtua must reset its cached range when the rail shrinks. Keep that remount
+ * scoped to shrink transitions and preserve the reader's focus/scroll context. */
+class ChangesRailVList extends Component<
+  ChangesRailVListProps,
+  ChangesRailVListState,
+  ChangesRailSnapshot | null
+> {
+  state: ChangesRailVListState = {
+    renderedRowCount: this.props.rowCount,
+    resetVersion: 0,
+  };
+
+  private host: HTMLDivElement | null = null;
+  private listHandle: VListHandle | null = null;
+  private pendingFocusedPath: string | null = null;
+  private restoreFrame: number | null = null;
+
+  static getDerivedStateFromProps(
+    props: ChangesRailVListProps,
+    state: ChangesRailVListState,
+  ): ChangesRailVListState | null {
+    if (props.rowCount === state.renderedRowCount) return null;
+    return {
+      renderedRowCount: props.rowCount,
+      resetVersion:
+        props.rowCount < state.renderedRowCount ? state.resetVersion + 1 : state.resetVersion,
+    };
+  }
+
+  getSnapshotBeforeUpdate(
+    _previousProps: ChangesRailVListProps,
+    previousState: ChangesRailVListState,
+  ): ChangesRailSnapshot | null {
+    if (previousState.resetVersion === this.state.resetVersion) return null;
+    const scroller = this.host?.firstElementChild;
+    if (!(scroller instanceof HTMLElement)) return null;
+    const active = document.activeElement;
+    const focusedRow =
+      active instanceof HTMLElement && scroller.contains(active)
+        ? active.closest<HTMLElement>("[data-rail-file-path]")
+        : null;
+    return {
+      focusedPath: focusedRow?.dataset.railFilePath ?? this.pendingFocusedPath,
+      scrollOffset: scroller.scrollTop,
+    };
+  }
+
+  componentDidUpdate(
+    _previousProps: ChangesRailVListProps,
+    _previousState: ChangesRailVListState,
+    snapshot: ChangesRailSnapshot | null,
+  ): void {
+    if (!snapshot || !this.listHandle) return;
+    this.cancelRestoreFrame();
+    const maxOffset = Math.max(0, this.listHandle.scrollSize - this.listHandle.viewportSize);
+    this.listHandle.scrollTo(Math.min(Math.max(snapshot.scrollOffset, 0), maxOffset));
+    const focusedPath = snapshot.focusedPath;
+    if (!focusedPath) return;
+    this.pendingFocusedPath = focusedPath;
+    this.continueFocusRestore();
+  }
+
+  componentWillUnmount(): void {
+    this.cancelRestoreFrame();
+    this.pendingFocusedPath = null;
+  }
+
+  private cancelRestoreFrame(): void {
+    if (this.restoreFrame === null) return;
+    if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.restoreFrame);
+    this.restoreFrame = null;
+  }
+
+  private continueFocusRestore = (): void => {
+    const path = this.pendingFocusedPath;
+    if (!path) return;
+    if (this.restoreFocusedPath(path)) {
+      this.pendingFocusedPath = null;
+      return;
+    }
+    if (this.restoreFrame === null && typeof requestAnimationFrame === "function") {
+      this.restoreFrame = requestAnimationFrame(() => {
+        this.restoreFrame = null;
+        this.continueFocusRestore();
+      });
+    }
+  };
+
+  private restoreFocusedPath(path: string): boolean {
+    const host = this.host;
+    if (!host) return true;
+    const active = document.activeElement;
+    if (active instanceof HTMLElement && active.isConnected && active !== document.body) {
+      return true;
+    }
+    if (!this.props.files.some((file) => file.path === path)) return true;
+    const row = Array.from(host.querySelectorAll<HTMLButtonElement>("[data-rail-file-path]")).find(
+      (candidate) => candidate.dataset.railFilePath === path,
+    );
+    if (!row) return false;
+    row.focus({ preventScroll: true });
+    return true;
+  }
+
+  private setHost = (host: HTMLDivElement | null): void => {
+    this.host = host;
+  };
+
+  private setListHandle = (handle: VListHandle | null): void => {
+    this.listHandle = handle;
+  };
+
+  render() {
+    return (
+      <div ref={this.setHost} data-opengeni-changes-rail className={this.props.className}>
+        <VList
+          key={this.state.resetVersion}
+          ref={this.setListHandle}
+          className="h-full"
+          itemSize={this.props.coarsePointer ? 44 : 28}
+          ssrCount={Math.min(30, this.props.rowCount)}
+        >
+          {this.props.children}
+        </VList>
+      </div>
+    );
+  }
+}
+
 /** Order the files and build the rail rows (grouped past the threshold). The
  *  returned `orderedFiles` drives BOTH the rail and the diff pane so a rail row's
  *  `index` addresses the matching pane section. Exported for tests. */
@@ -330,7 +478,13 @@ export function WorkbenchChanges({
               ))}
             </select>
           </div>
-          <div className="min-h-0 min-w-0 flex-1 overflow-auto" data-opengeni-changes-pane>
+          <div
+            aria-label="Changed file diff"
+            className="min-h-0 min-w-0 flex-1 overflow-auto outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
+            data-opengeni-changes-pane
+            role="region"
+            tabIndex={0}
+          >
             {activeFile ? (
               <DiffSection
                 file={activeFile}
@@ -344,42 +498,44 @@ export function WorkbenchChanges({
       ) : (
         <div className="flex min-h-0 flex-1">
           {/* File rail — virtualized (virtua): a dense change set is fine. */}
-          <div className="w-[clamp(12rem,28%,15rem)] shrink-0 border-r border-og-border bg-og-surface-1/35">
-            <VList
-              className="h-full"
-              itemSize={coarsePointer ? 44 : 28}
-              ssrCount={Math.min(30, rows.length)}
-            >
-              {rows.map((row) =>
-                row.kind === "group" ? (
-                  <div
-                    key={`g:${row.label}`}
-                    data-rail-group
-                    className="flex items-center gap-1.5 px-2 pb-0.5 pt-2 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle"
-                  >
-                    <span className="min-w-0 truncate">{row.label}</span>
-                    <span className="shrink-0">{row.count}</span>
-                  </div>
-                ) : (
-                  <RailFileRow
-                    key={row.file.path}
-                    file={row.file}
-                    grouped={grouped}
-                    active={row.index === activeIndex}
-                    onClick={() => jumpTo(row.index)}
-                  />
-                ),
-              )}
-            </VList>
-          </div>
+          <ChangesRailVList
+            rowCount={rows.length}
+            coarsePointer={coarsePointer}
+            files={orderedFiles}
+            className="w-[clamp(12rem,28%,15rem)] shrink-0 border-r border-og-border bg-og-surface-1/35"
+          >
+            {rows.map((row) =>
+              row.kind === "group" ? (
+                <div
+                  key={`g:${row.label}`}
+                  data-rail-group
+                  className="flex items-center gap-1.5 px-2 pb-0.5 pt-2 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle"
+                >
+                  <span className="min-w-0 truncate">{row.label}</span>
+                  <span className="shrink-0">{row.count}</span>
+                </div>
+              ) : (
+                <RailFileRow
+                  key={row.file.path}
+                  file={row.file}
+                  grouped={grouped}
+                  active={row.index === activeIndex}
+                  onClick={() => jumpTo(row.index)}
+                />
+              ),
+            )}
+          </ChangesRailVList>
 
           {/* Diff pane — windowed file sections. Only the sections inside the
             visible window ± overscan are in the DOM; the container reserves the
             full scroll height so scrolling + the rail-jump stay accurate. */}
           <div
             ref={windowed.scrollRef}
-            className="min-h-0 min-w-0 flex-1 overflow-auto"
+            aria-label="Changed files diff"
+            className="min-h-0 min-w-0 flex-1 overflow-auto outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
             data-opengeni-changes-pane
+            role="region"
+            tabIndex={0}
           >
             <div style={{ position: "relative", height: windowed.totalHeight }}>
               {orderedFiles.map((file, index) => {
@@ -479,6 +635,7 @@ function RailFileRow({
       onClick={onClick}
       title={file.path}
       data-rail-file
+      data-rail-file-path={file.path}
       className={cn(
         "relative flex min-h-7 w-full items-center gap-1.5 truncate px-2 py-0.5 text-left text-og-sm transition-colors hover:bg-og-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent pointer-coarse:min-h-11",
         grouped && "pl-3",

package/src/components/workspace-dock.tsx

@@ -536,6 +536,8 @@ function DockChrome({
   /** Right-aligned chrome controls (maximize / collapse, or the overlay close). */
   controls: ReactNode;
 }) {
+  const chromeRef = useRef<HTMLDivElement | null>(null);
+  const [compact, setCompact] = useState(false);
   const active = tabs.find((t) => t.id === current) ?? tabs[0];
   const tabsetId = useId();
   const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
@@ -544,6 +546,31 @@ function DockChrome({
   const [tabOverflow, setTabOverflow] = useState({ start: false, end: false });
   const activeId = active?.id ?? "";
   const activeTabIndex = tabs.findIndex((tab) => tab.id === activeId);
+
+  // A desktop dock can be much narrower than the viewport after the user drags
+  // its separator. Viewport breakpoints therefore cannot protect the tab strip:
+  // the status + controls used to squeeze it to zero width, leaving visible but
+  // unclickable ARIA tabs. At narrow *dock* widths, give status/controls their
+  // own row and the horizontally scrollable tabs the complete second row.
+  useDockLayoutEffect(() => {
+    const node = chromeRef.current;
+    if (!node) return;
+    const update = () => {
+      const desktop =
+        typeof window.matchMedia !== "function" || window.matchMedia("(min-width: 1024px)").matches;
+      const next = desktop && node.getBoundingClientRect().width < 420;
+      setCompact((previous) => (previous === next ? previous : next));
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", update);
+      return () => window.removeEventListener("resize", update);
+    }
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
   const keepActiveTabVisible = useCallback(() => {
     const selected = activeTabIndex >= 0 ? tabRefs.current[activeTabIndex] : null;
     selected?.scrollIntoView({ block: "nearest", inline: "nearest" });
@@ -631,8 +658,22 @@ function DockChrome({
 
   return (
     <>
-      <div className="grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 border-b border-og-border px-1.5 py-1 max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto] max-[1023px]:gap-y-0 max-[1023px]:px-2 max-[1023px]:pb-1 max-[1023px]:pt-0 min-[640px]:max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto_auto]">
-        <div className="flex min-w-0 shrink-0 items-center max-[1023px]:min-h-11 min-[640px]:max-[1023px]:col-start-1 min-[640px]:max-[1023px]:row-start-1">
+      <div
+        ref={chromeRef}
+        data-dock-chrome
+        data-compact={compact ? "true" : undefined}
+        className={cn(
+          "grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 border-b border-og-border px-1.5 py-1 max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto] max-[1023px]:gap-y-0 max-[1023px]:px-2 max-[1023px]:pb-1 max-[1023px]:pt-0 min-[640px]:max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto_auto]",
+          compact && "gap-y-1",
+        )}
+        style={compact ? { gridTemplateColumns: "minmax(0, 1fr) auto" } : undefined}
+      >
+        <div
+          className={cn(
+            "flex min-w-0 shrink-0 items-center max-[1023px]:min-h-11 min-[640px]:max-[1023px]:col-start-1 min-[640px]:max-[1023px]:row-start-1",
+            compact && "hidden",
+          )}
+        >
           {leading ?? (
             <span className="hidden truncate px-1 text-og-sm font-semibold text-og-fg max-[1023px]:inline">
               Workspace
@@ -648,7 +689,10 @@ function DockChrome({
             absorbing any unusually long host-injected labels. */}
         <div
           ref={tabListRef}
-          className="flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-[1023px]:col-span-3 max-[1023px]:row-start-2 max-[1023px]:w-full min-[640px]:max-[1023px]:col-span-1 min-[640px]:max-[1023px]:col-start-2 min-[640px]:max-[1023px]:row-start-1"
+          className={cn(
+            "flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-[1023px]:col-span-3 max-[1023px]:row-start-2 max-[1023px]:w-full min-[640px]:max-[1023px]:col-span-1 min-[640px]:max-[1023px]:col-start-2 min-[640px]:max-[1023px]:row-start-1",
+            compact && "col-span-2 col-start-1 row-start-2 w-full",
+          )}
           role="tablist"
           aria-orientation="horizontal"
           style={{
@@ -683,10 +727,20 @@ function DockChrome({
             </button>
           ))}
         </div>
-        <div className="flex min-w-0 shrink-0 items-center justify-self-end min-[640px]:max-[1023px]:col-start-3 min-[640px]:max-[1023px]:row-start-1">
+        <div
+          className={cn(
+            "flex min-w-0 shrink-0 items-center justify-self-end min-[640px]:max-[1023px]:col-start-3 min-[640px]:max-[1023px]:row-start-1",
+            compact && "col-start-1 row-start-1 justify-self-start",
+          )}
+        >
           {accessory}
         </div>
-        <div className="flex shrink-0 items-center gap-0.5 text-og-fg-subtle min-[640px]:max-[1023px]:col-start-4 min-[640px]:max-[1023px]:row-start-1">
+        <div
+          className={cn(
+            "flex shrink-0 items-center gap-0.5 text-og-fg-subtle min-[640px]:max-[1023px]:col-start-4 min-[640px]:max-[1023px]:row-start-1",
+            compact && "col-start-2 row-start-1",
+          )}
+        >
           {controls}
         </div>
       </div>

package/src/hooks/use-attached-browsers.ts

@@ -0,0 +1,154 @@
+import type { AttachedBrowserDevice } from "@opengeni/sdk/interaction";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { EmbeddedBrowserInteractionClientLike } from "../client";
+import {
+  type EmbeddedBrowserInteractionClientOverride,
+  useEmbeddedBrowserInteraction,
+} from "../session-context";
+import { useInteractionInvalidation } from "./use-interaction-invalidation";
+
+export type UseAttachedBrowsersOptions = EmbeddedBrowserInteractionClientOverride & {
+  enabled?: boolean | undefined;
+  includeDisconnected?: boolean | undefined;
+  pollIntervalMs?: number | undefined;
+};
+
+export type UseAttachedBrowsersResult = {
+  revision: number;
+  devices: AttachedBrowserDevice[];
+  loading: boolean;
+  refreshing: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+};
+
+/** Workspace-wide inventory of Chrome profiles currently connected through an
+ * enrolled OpenGeni machine. BrowserSessions remain the execution authority. */
+export function useAttachedBrowsers(
+  options: UseAttachedBrowsersOptions = {},
+): UseAttachedBrowsersResult {
+  const { client, workspaceId, workspaceInteractionEvent, workspaceInteractionConnectionState } =
+    useEmbeddedBrowserInteraction(options);
+  const enabled = options.enabled ?? true;
+  const includeDisconnected = options.includeDisconnected ?? false;
+  const [state, setState] = useState(() => emptyState(workspaceId, enabled));
+  const requestRef = useRef<{ id: number; controller: AbortController | null }>({
+    id: 0,
+    controller: null,
+  });
+  const mountedRef = useRef(true);
+  const visible = state.workspaceId === workspaceId ? state : emptyState(workspaceId, enabled);
+
+  const cancelLoad = useCallback(() => {
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    requestRef.current = { id, controller: null };
+  }, []);
+
+  const load = useCallback(
+    async (foreground: boolean): Promise<void> => {
+      if (!enabled) return;
+      const id = requestRef.current.id + 1;
+      requestRef.current.controller?.abort();
+      const controller = new AbortController();
+      requestRef.current = { id, controller };
+      setState((current) => ({
+        ...(current.workspaceId === workspaceId ? current : emptyState(workspaceId, true)),
+        loading: foreground,
+        refreshing: !foreground,
+        error: foreground || current.workspaceId !== workspaceId ? null : current.error,
+      }));
+      try {
+        const response = await client.listAttachedBrowsers(workspaceId, {
+          includeDisconnected,
+          signal: controller.signal,
+        });
+        if (!mountedRef.current || requestRef.current.id !== id) return;
+        setState({
+          workspaceId,
+          revision: response.revision,
+          devices: sortDevices(response.devices),
+          loading: false,
+          refreshing: false,
+          error: null,
+        });
+      } catch (cause) {
+        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
+          return;
+        setState((current) => ({
+          ...(current.workspaceId === workspaceId ? current : emptyState(workspaceId, true)),
+          loading: false,
+          refreshing: false,
+          error: cause instanceof Error ? cause : new Error(String(cause)),
+        }));
+      } finally {
+        if (requestRef.current.id === id) requestRef.current = { id, controller: null };
+      }
+    },
+    [client, enabled, includeDisconnected, workspaceId],
+  );
+
+  const refresh = useCallback(async () => await load(false), [load]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      cancelLoad();
+      setState(emptyState(workspaceId, false));
+      return;
+    }
+    void load(true);
+    return () => {
+      mountedRef.current = false;
+      cancelLoad();
+    };
+  }, [cancelLoad, enabled, load, workspaceId]);
+
+  useInteractionInvalidation({
+    workspaceId,
+    key: `${workspaceId}:${includeDisconnected}`,
+    enabled,
+    event: workspaceInteractionEvent,
+    connectionState: workspaceInteractionConnectionState,
+    knownRevision: visible.revision,
+    refresh,
+    fallbackPollIntervalMs: options.pollIntervalMs,
+  });
+
+  return {
+    revision: visible.revision,
+    devices: visible.devices,
+    loading: visible.loading,
+    refreshing: visible.refreshing,
+    error: visible.error,
+    refresh,
+  };
+}
+
+function emptyState(workspaceId: string, loading: boolean) {
+  return {
+    workspaceId,
+    revision: 0,
+    devices: [] as AttachedBrowserDevice[],
+    loading,
+    refreshing: false,
+    error: null as Error | null,
+  };
+}
+
+function sortDevices(devices: readonly AttachedBrowserDevice[]): AttachedBrowserDevice[] {
+  return [...devices].sort(
+    (left, right) =>
+      Number(right.state === "connected") - Number(left.state === "connected") ||
+      timestamp(right.lastSeenAt) - timestamp(left.lastSeenAt) ||
+      left.name.localeCompare(right.name),
+  );
+}
+
+function timestamp(value: string): number {
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+/** Exported for narrow proxy implementations and tests. */
+export type AttachedBrowsersClient = EmbeddedBrowserInteractionClientLike;