@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/components/machines-dashboard.tsx

@@ -14,6 +14,8 @@ export type MachinesDashboardProps = {
   onAttach?: ((machine: MachineView) => void) | undefined;
   /** The sandbox id currently being attached/swapped to (disables that card). */
   attachingSandboxId?: string | null | undefined;
+  onUpdateAgent?: ((machine: MachineView) => void) | undefined;
+  updatingEnrollmentId?: string | null | undefined;
   /** Short recent history per machine (keyed by sandboxId) — drives card sparklines. */
   seriesByMachine?: Record<string, MetricSample[]> | undefined;
   /** Open the per-machine telemetry detail (makes each card actionable). */
@@ -47,7 +49,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-11"
+          className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium transition-colors hover:bg-og-primary-hover pointer-coarse:min-h-11"
         >
           <PlusIcon className="size-3.5" aria-hidden />
           Connect a machine
@@ -60,13 +62,9 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
 function Header({
   count,
   onEnroll,
-  onRefresh,
-  loading,
 }: {
   count: number;
   onEnroll?: (() => void) | undefined;
-  onRefresh?: (() => void) | undefined;
-  loading?: boolean | undefined;
 }): ReactNode {
   return (
     <div className="flex items-center justify-between gap-3">
@@ -75,17 +73,6 @@ function Header({
         <span className="font-og-mono text-og-xs text-og-fg-subtle">{count}</span>
       </div>
       <div className="flex items-center gap-1.5">
-        {onRefresh ? (
-          <button
-            type="button"
-            data-refresh
-            onClick={onRefresh}
-            title="Refresh"
-            className="rounded-og-sm p-1.5 text-og-fg-subtle transition-colors hover:bg-og-surface-2 hover:text-og-fg"
-          >
-            <RefreshCwIcon className={cn("size-3.5", loading && "animate-og-spin")} aria-hidden />
-          </button>
-        ) : null}
         {onEnroll ? (
           <button
             type="button"
@@ -116,6 +103,8 @@ export function MachinesDashboard({
   error,
   onAttach,
   attachingSandboxId,
+  onUpdateAgent,
+  updatingEnrollmentId,
   seriesByMachine,
   onOpenDetail,
   now,
@@ -127,7 +116,7 @@ export function MachinesDashboard({
 
   return (
     <section data-machines-dashboard className={cn("og-root flex flex-col gap-3", className)}>
-      <Header count={machines.length} onEnroll={onEnroll} onRefresh={onRefresh} loading={loading} />
+      <Header count={machines.length} onEnroll={onEnroll} />
 
       {error ? (
         <div
@@ -172,6 +161,8 @@ export function MachinesDashboard({
               }}
               onAttach={onAttach}
               attaching={attachingSandboxId === machine.sandboxId}
+              onUpdateAgent={onUpdateAgent}
+              updatingAgent={updatingEnrollmentId === machine.enrollmentId}
               series={seriesByMachine?.[machine.sandboxId]}
               onOpenDetail={onOpenDetail}
               now={now}

package/src/components/markdown-table-layout.ts

@@ -0,0 +1,132 @@
+export function markdownTableWidth({
+  columnLeft,
+  columnWidth,
+  contentLeft,
+  contentRight,
+  preferredWidth,
+}: {
+  columnLeft: number;
+  columnWidth: number;
+  contentLeft: number;
+  contentRight: number;
+  preferredWidth: number;
+}): number {
+  const center = columnLeft + columnWidth / 2;
+  const available = 2 * Math.min(center - contentLeft, contentRight - center);
+  return Math.max(columnWidth, Math.min(preferredWidth, available));
+}
+
+function measurementCopy(source: Node, document: Document): Node {
+  if (source.nodeType === Node.ELEMENT_NODE) {
+    const element = source as Element;
+    // Inert prevents focus, not custom-element construction, media loading or
+    // embedded browsing contexts. Do not clone those host-rendered surfaces.
+    if (
+      element.localName.includes("-") ||
+      ["iframe", "object", "embed", "video", "audio", "canvas", "script"].includes(
+        element.localName,
+      )
+    ) {
+      const bounds = element.getBoundingClientRect();
+      const placeholder = document.createElement("span");
+      placeholder.style.display = "inline-block";
+      placeholder.style.width = `${bounds.width}px`;
+      placeholder.style.height = `${bounds.height}px`;
+      return placeholder;
+    }
+  }
+  const copy = document.importNode(source, false);
+  if (copy.nodeType === Node.ELEMENT_NODE) {
+    const element = copy as Element;
+    element.removeAttribute("id");
+    for (const attribute of [...element.attributes]) {
+      if (attribute.name.startsWith("on")) element.removeAttribute(attribute.name);
+    }
+  }
+  for (const child of source.childNodes) copy.appendChild(measurementCopy(child, document));
+  return copy;
+}
+
+/** Loaded only for assistant tables. Keep prose and nested scroll owners intact. */
+export function observeMarkdownTableLayout(wrapper: HTMLDivElement, table: HTMLTableElement) {
+  const body = wrapper.parentElement;
+  const scroller = body
+    ?.closest("[data-og-wide-table-message]")
+    ?.closest<HTMLElement>("[data-og-timeline-scroller]");
+  if (!body?.classList.contains("og-markdown-body") || !scroller) return;
+
+  // Build the static copy without a browsing context before inserting its probe.
+  const measurementDocument = table.ownerDocument.implementation.createHTMLDocument("");
+  let width: number | null = null;
+  const reset = () => {
+    width = null;
+    wrapper.style.width = "";
+    wrapper.style.maxWidth = "";
+    wrapper.style.marginInline = "";
+  };
+  const measure = () => {
+    // Intermediate clipped/scrollable surfaces own their own content bounds.
+    for (
+      let ancestor: HTMLElement | null = body;
+      ancestor && ancestor !== scroller;
+      ancestor = ancestor.parentElement
+    ) {
+      if (getComputedStyle(ancestor).overflowX !== "visible") {
+        reset();
+        return;
+      }
+    }
+    const column = body.getBoundingClientRect();
+    const panel = scroller.getBoundingClientRect();
+    const panelStyle = getComputedStyle(scroller);
+    const left = panel.left + scroller.clientLeft + parseFloat(panelStyle.paddingLeft);
+    const right =
+      panel.left + scroller.clientLeft + scroller.clientWidth - parseFloat(panelStyle.paddingRight);
+
+    // Even a temporary max-content width on the live table changes its height
+    // during forced layout. Browser scroll anchoring can retain that displacement
+    // after the width is restored. Measure a copy without touching live geometry.
+    const probe = table.ownerDocument.createElement("div");
+    probe.setAttribute("aria-hidden", "true");
+    probe.inert = true;
+    // A zero-sized, contained box cannot extend the scroller's overflow area,
+    // including inside transformed ancestors. Keep the same inherited styling.
+    probe.style.cssText =
+      "position:absolute;width:0;height:0;overflow:hidden;contain:layout size paint;visibility:hidden;pointer-events:none";
+    const copy = measurementCopy(table, measurementDocument) as HTMLTableElement;
+    copy.style.width = "max-content";
+    probe.append(copy);
+    let preferred: number;
+    try {
+      table.parentElement!.append(probe);
+      preferred = copy.getBoundingClientRect().width;
+    } finally {
+      probe.remove();
+    }
+    const next = markdownTableWidth({
+      columnLeft: column.left,
+      columnWidth: column.width,
+      contentLeft: left,
+      contentRight: right,
+      preferredWidth: preferred,
+    });
+    if (width !== null && Math.abs(width - next) < 0.5) return;
+    width = next;
+    wrapper.style.width = `${width}px`;
+    wrapper.style.maxWidth = "none";
+    wrapper.style.marginInline = `calc((100% - ${width}px) / 2)`;
+  };
+
+  measure();
+  const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(measure);
+  observer?.observe(scroller);
+  observer?.observe(body);
+  observer?.observe(table);
+  return {
+    measure,
+    disconnect: () => {
+      observer?.disconnect();
+      reset();
+    },
+  };
+}