@opengeni/react 0.46.1 → 0.52.1

package/src/components/machines/machine-detail.tsx

@@ -6,7 +6,14 @@
 // how have they moved over the chosen window. Built entirely on the existing
 // `og-*` token system — no new visual language, just the missing depth.
 // ----------------------------------------------------------------------------
-import { ArrowLeftIcon, CpuIcon, LaptopIcon, RadioIcon, ServerIcon } from "lucide-react";
+import {
+  ArrowLeftIcon,
+  CpuIcon,
+  LaptopIcon,
+  RadioIcon,
+  ServerIcon,
+  Trash2Icon,
+} from "lucide-react";
 import { cn } from "../../lib/cn";
 import { formatRelativeTime } from "../../lib/format";
 import type { MachineView, MetricSample } from "../../types/machines";
@@ -23,6 +30,8 @@ export type MachineDetailProps = {
   onWindowChange: (w: MetricWindow) => void;
   loadingSeries?: boolean | undefined;
   onBack?: (() => void) | undefined;
+  /** Open the workspace-admin removal confirmation for a self-hosted machine. */
+  onRemove?: ((machine: MachineView) => void) | undefined;
   now?: number | undefined;
   className?: string | undefined;
 };
@@ -40,6 +49,7 @@ export function MachineDetail({
   onWindowChange,
   loadingSeries,
   onBack,
+  onRemove,
   now = Date.now(),
   className,
 }: MachineDetailProps) {
@@ -78,24 +88,38 @@ export function MachineDetail({
           </span>
         </div>
 
-        {/* range selector */}
-        <div className="flex shrink-0 items-center gap-0.5 rounded-og-md border border-og-border bg-og-surface-1 p-0.5">
-          {METRIC_WINDOWS.map((w) => (
+        <div className="flex shrink-0 items-center gap-2">
+          {onRemove && machine.enrollmentId && !machine.isSessionGroup ? (
             <button
-              key={w}
               type="button"
-              onClick={() => onWindowChange(w)}
-              data-active={w === window}
-              className={cn(
-                "rounded-og-sm px-2 py-1 font-og-mono text-og-xs transition-colors",
-                w === window
-                  ? "bg-og-surface-3 text-og-fg shadow-og-sm"
-                  : "text-og-fg-subtle hover:text-og-fg-muted",
-              )}
+              data-remove-machine
+              aria-label={`Remove machine ${machine.name}`}
+              onClick={() => onRemove(machine)}
+              className="inline-flex min-h-9 items-center gap-1.5 rounded-og-sm border border-og-status-failed/40 px-2.5 py-1 font-medium text-og-xs text-og-status-failed transition-colors hover:bg-og-status-failed/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-status-failed/50 pointer-coarse:min-h-11"
             >
-              {w}
+              <Trash2Icon className="size-3.5" aria-hidden />
+              <span className="hidden sm:inline">Remove machine</span>
             </button>
-          ))}
+          ) : null}
+          {/* range selector */}
+          <div className="flex items-center gap-0.5 rounded-og-md border border-og-border bg-og-surface-1 p-0.5">
+            {METRIC_WINDOWS.map((w) => (
+              <button
+                key={w}
+                type="button"
+                onClick={() => onWindowChange(w)}
+                data-active={w === window}
+                className={cn(
+                  "rounded-og-sm px-2 py-1 font-og-mono text-og-xs transition-colors",
+                  w === window
+                    ? "bg-og-surface-3 text-og-fg shadow-og-sm"
+                    : "text-og-fg-subtle hover:text-og-fg-muted",
+                )}
+              >
+                {w}
+              </button>
+            ))}
+          </div>
         </div>
       </div>
 

package/src/components/machines-dashboard.tsx

@@ -20,7 +20,7 @@ export type MachinesDashboardProps = {
   onOpenDetail?: ((machine: MachineView) => void) | undefined;
   /** Shared clock so freshness/relative times render consistently across cards. */
   now?: number | undefined;
-  /** Open the enrollment flow (the "Enroll a machine" CTA). */
+  /** Open the connection flow (the "Connect a machine" CTA). */
   onEnroll?: (() => void) | undefined;
   onRefresh?: (() => void) | undefined;
   className?: string | undefined;
@@ -38,7 +38,8 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
       <div className="space-y-1">
         <p className="text-og-base font-medium text-og-fg">No machines yet</p>
         <p className="max-w-xs text-og-sm text-og-fg-muted">
-          Enroll your own computer to run the agent on it — your files, your terminal, your desktop.
+          Connect your own computer to run the agent on it — your files, your terminal, your
+          desktop.
         </p>
       </div>
       {onEnroll ? (
@@ -49,7 +50,7 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
           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
+          Connect a machine
         </button>
       ) : null}
     </div>
@@ -93,7 +94,7 @@ function Header({
             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
+            Connect a machine
           </button>
         ) : null}
       </div>
@@ -102,10 +103,10 @@ function Header({
 }
 
 /**
- * The workspace Machines dashboard: the fleet of selfhosted enrollments + the
+ * The workspace Machines dashboard: the fleet of Connected Machines + the
  * session's managed sandbox, each with its connection-status pill, state badges,
  * latest metrics, and an attach/swap affordance. Renders the empty state (no
- * machines → enroll CTA), a load error, and the populated grid. The component
+ * machines → connect CTA), a load error, and the populated grid. The component
  * is purely presentational — feed it `MachinesResponse` data via `useMachines`.
  */
 export function MachinesDashboard({