@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/components/copy-button.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react";
+import { memo, useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { copyTextToClipboard } from "../lib/clipboard";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
@@ -22,8 +22,10 @@ export type CopyButtonProps = {
 /**
  * Ghost icon copy control — no chrome box, no "Copy code" label.
  * Copy → check flash. Hover-reveal via `group/copy` on a parent.
+ * Keep unchanged controls out of parent message rerenders: mounting history
+ * already has to commit each new tooltip, without redoing the retained suffix.
  */
-export function CopyButton({
+export const CopyButton = memo(function CopyButton({
   text,
   label = "Copy",
   className,
@@ -113,7 +115,7 @@ export function CopyButton({
       <TooltipContent side="top">{tip}</TooltipContent>
     </Tooltip>
   );
-}
+});
 
 /** Hover-reveal chrome around a message / turn so {@link CopyButton} can fade in. */
 export function CopyHoverFrame({
@@ -140,12 +142,18 @@ export function CopyHoverFrame({
       {children}
       {/* Sit under the body — top-right overlay collided with the first line. */}
       <div
+        data-og-annotation-chrome=""
         className={cn(
-          "mt-1 flex h-7 items-center gap-1.5",
+          "flex h-6 items-center gap-1.5 pointer-coarse:h-11",
           align === "end" ? "justify-end" : "justify-start",
         )}
       >
-        <CopyButton text={copyText} label={label} reveal="group-hover" />
+        <CopyButton
+          text={copyText}
+          label={label}
+          reveal="group-hover"
+          className="size-6 pointer-coarse:size-11"
+        />
         {trailing}
       </div>
     </div>

package/src/components/desktop-viewer.tsx

@@ -30,7 +30,7 @@ export type DesktopViewerProps = {
   /** Render the built-in Watching ⇄ Take control toggle (default true). */
   showControlToggle?: boolean | undefined;
   scaleViewport?: boolean | undefined;
-  /** Custom RFB factory (tests / a WebRTC swap). Defaults to lazy @novnc/novnc. */
+  /** Custom RFB factory; otherwise enableDesktopViewer() supplies lazy noVNC. */
   rfbFactory?: DesktopRfbFactory | undefined;
   /** Authenticated controller protocols for proxied RFB transports. */
   webSocketProtocols?: string[] | undefined;

package/src/components/enrollment-consent.tsx

@@ -1,4 +1,5 @@
 import { type ReactNode, useState } from "react";
+import type { ResourceAuthorityScope } from "@opengeni/sdk";
 import {
   CircleAlertIcon,
   LaptopIcon,
@@ -30,8 +31,10 @@ export type EnrollmentConsentProps = {
   userCode: string;
   machine: EnrollmentConsentMachine;
   phase?: EnrollmentConsentPhase | undefined;
-  /** Approve with the chosen screen-control consent. */
-  onApprove?: ((allowScreenControl: boolean) => void) | undefined;
+  /** Whether this caller may publish the machine to the whole organization. */
+  allowOrganizationScope?: boolean | undefined;
+  /** Approve with the chosen screen-control consent and explicit access scope. */
+  onApprove?: ((allowScreenControl: boolean, scope: ResourceAuthorityScope) => void) | undefined;
   onDeny?: (() => void) | undefined;
   /** Error message when phase === "error". */
   errorMessage?: string | undefined;
@@ -61,13 +64,29 @@ export function EnrollmentConsent({
   userCode,
   machine,
   phase = "review",
+  allowOrganizationScope = false,
   onApprove,
   onDeny,
   errorMessage,
   className,
 }: EnrollmentConsentProps) {
   const [allowScreenControl, setAllowScreenControl] = useState(machine.requestsScreenControl);
+  const [scope, setScope] = useState<ResourceAuthorityScope>("user");
   const busy = phase === "approving";
+  const scopeCopy = {
+    user: {
+      label: "Personal",
+      body: "Only you can use this machine, from any workspace you can access in this organization.",
+    },
+    workspace: {
+      label: "Workspace",
+      body: "Everyone with access to this workspace can use this machine.",
+    },
+    organization: {
+      label: "Organization",
+      body: "Members of this organization can use this machine from their workspaces.",
+    },
+  } satisfies Record<ResourceAuthorityScope, { label: string; body: string }>;
 
   if (phase === "approved") {
     return (
@@ -75,7 +94,7 @@ export function EnrollmentConsent({
         className={className}
         tone="ok"
         title="Machine connected"
-        body={`${machine.machineName} is now enrolled in this workspace. You can close this page — it will appear in your Machines dashboard.`}
+        body={`${machine.machineName} is now connected with ${scopeCopy[scope].label.toLowerCase()} access. You can close this page — it will appear in your Machines dashboard.`}
       />
     );
   }
@@ -120,7 +139,7 @@ export function EnrollmentConsent({
             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{" "}
+            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>
@@ -156,11 +175,50 @@ export function EnrollmentConsent({
         ) : null}
         <Capability
           icon={<UsersIcon className="size-4" aria-hidden />}
-          title="Shared while connected"
-          body="Any session in this workspace can use this machine while it is online. Disconnect the agent to revoke access instantly."
+          title={`${scopeCopy[scope].label} access while connected`}
+          body={`${scopeCopy[scope].body} Disconnect the agent to revoke access instantly.`}
         />
       </ul>
 
+      <fieldset className="flex flex-col gap-2" disabled={busy}>
+        <legend className="mb-1 text-og-sm font-medium text-og-fg">
+          Who can use this machine?
+        </legend>
+        {(["user", "workspace", "organization"] as const).map((candidate) => {
+          const disabled = candidate === "organization" && !allowOrganizationScope;
+          return (
+            <label
+              key={candidate}
+              data-enrollment-scope={candidate}
+              data-disabled={disabled ? "true" : "false"}
+              className={cn(
+                "flex items-start gap-2.5 rounded-og-md border border-og-border bg-og-bg px-3 py-2.5",
+                disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+              )}
+            >
+              <input
+                type="radio"
+                name="enrollment-scope"
+                value={candidate}
+                checked={scope === candidate}
+                disabled={disabled || busy}
+                onChange={() => setScope(candidate)}
+                className="mt-0.5 size-4 accent-og-accent"
+              />
+              <span className="min-w-0">
+                <span className="block text-og-base font-medium text-og-fg">
+                  {scopeCopy[candidate].label}
+                  {disabled ? " · organization admin required" : ""}
+                </span>
+                <span className="block text-og-sm text-og-fg-muted">
+                  {scopeCopy[candidate].body}
+                </span>
+              </span>
+            </label>
+          );
+        })}
+      </fieldset>
+
       {machine.canOfferDisplay ? (
         <label
           data-screen-control-toggle
@@ -206,7 +264,7 @@ export function EnrollmentConsent({
           type="button"
           data-approve
           disabled={busy}
-          onClick={() => onApprove?.(allowScreenControl)}
+          onClick={() => onApprove?.(allowScreenControl, scope)}
           className="flex-1 rounded-og-sm bg-og-status-failed px-3 py-2 text-og-sm font-semibold text-og-accent-fg transition-colors hover:opacity-90 disabled:opacity-50 pointer-coarse:min-h-11"
         >
           {busy ? "Connecting…" : "Grant full access"}

package/src/components/enrollment-device-flow.tsx

@@ -156,7 +156,7 @@ export function EnrollmentDeviceFlow({
         target="_blank"
         rel="noreferrer"
         onClick={onOpenVerification}
-        className="inline-flex items-center justify-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-2 text-og-menu font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong"
+        className="inline-flex items-center justify-center gap-1.5 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-2 text-og-menu font-medium transition-colors hover:bg-og-primary-hover"
       >
         Open approval page
         <ExternalLinkIcon className="size-3.5" aria-hidden />

package/src/components/file-browser.tsx

@@ -24,6 +24,7 @@ import {
 import { AlertDialog } from "radix-ui";
 import { VList, type VListHandle } from "virtua";
 import { cn } from "../lib/cn";
+import { MENU_BUTTON_CLASS, MENU_SEPARATOR_CLASS, MENU_SURFACE_CLASS } from "../lib/menu-styles";
 import {
   type PortalTokenStyle,
   usePortalTokenSource,
@@ -31,6 +32,7 @@ import {
 } from "../lib/use-portal-token-style";
 import { useUnicodeFallbackFonts } from "../lib/use-unicode-fonts";
 import type { FileTreeNode, UseSandboxFilesResult } from "../hooks/use-sandbox-files";
+import { visibleFileTree, type FileNodeVisibilityPredicate } from "../file-node-visibility";
 
 export type FileBrowserProps = {
   /** From `useSandboxFiles(...)`. */
@@ -43,6 +45,14 @@ export type FileBrowserProps = {
   /** Selection callback for the preview pane. */
   onSelectFile?: ((path: string) => void) | undefined;
   selectedPath?: string | undefined;
+  /** Presentation-only node filter. Hidden parents never expose their children. */
+  isNodeVisible?: FileNodeVisibilityPredicate | undefined;
+  /** Deliberately reveal this selected path by lazily opening every loaded
+   * ancestor and scrolling its row into view. The path is opaque and is never
+   * normalized or re-rooted here. */
+  revealPath?: string | undefined;
+  /** Increment/change to reveal the same path again after a user collapses it. */
+  revealPathRequestId?: string | number | undefined;
   /** Render-prop to theme/replace a row entirely (the Pierre-swap escape hatch). */
   renderNode?: ((node: FileTreeNode, depth: number, expanded: boolean) => ReactNode) | undefined;
   /** Shown when the tree is empty (no files / not loaded yet). */
@@ -96,11 +106,18 @@ function itemKey(item: RenderItem): string {
   }
 }
 
-/** Walk the tree to find a node by path. */
+function pathIsInsideDirectory(path: string, directory: string): boolean {
+  if (!path.startsWith(directory) || path === directory) return false;
+  if (directory.endsWith("/") || directory.endsWith("\\")) return true;
+  const boundary = path[directory.length];
+  return boundary === "/" || boundary === "\\";
+}
+
+/** Walk the authoritative tree without assuming its target-owned separator. */
 function findNode(nodes: FileTreeNode[], path: string): FileTreeNode | undefined {
   for (const node of nodes) {
     if (node.path === path) return node;
-    if (node.kind === "dir" && node.children && path.startsWith(`${node.path}/`)) {
+    if (node.kind === "dir" && node.children && pathIsInsideDirectory(path, node.path)) {
       const hit = findNode(node.children, path);
       if (hit) return hit;
     }
@@ -108,6 +125,34 @@ function findNode(nodes: FileTreeNode[], path: string): FileTreeNode | undefined
   return undefined;
 }
 
+type RevealTrace = {
+  directories: string[];
+  frontier: string | null;
+};
+
+/** Follow only paths already named by the authoritative tree. This deliberately
+ * avoids manufacturing ancestors from a platform-specific path string. */
+function traceRevealPath(nodes: FileTreeNode[], targetPath: string): RevealTrace {
+  for (const node of nodes) {
+    if (node.path === targetPath) {
+      return {
+        directories: node.kind === "dir" ? [node.path] : [],
+        frontier: node.kind === "dir" && node.children === undefined ? node.path : null,
+      };
+    }
+    if (node.kind !== "dir" || !pathIsInsideDirectory(targetPath, node.path)) continue;
+    if (node.children === undefined) {
+      return { directories: [node.path], frontier: node.path };
+    }
+    const child = traceRevealPath(node.children, targetPath);
+    return {
+      directories: [node.path, ...child.directories],
+      frontier: child.frontier,
+    };
+  }
+  return { directories: [], frontier: null };
+}
+
 /** A pending inline-create: a phantom input row under `parent`. */
 type DraftCreate = { parent: string; kind: "file" | "dir" };
 /** A pending inline-rename of an existing node. */
@@ -142,6 +187,9 @@ export function FileBrowser({
   fallback,
   onSelectFile,
   selectedPath,
+  isNodeVisible,
+  revealPath,
+  revealPathRequestId,
   renderNode,
   emptyState,
   editable = true,
@@ -158,6 +206,15 @@ export function FileBrowser({
   const [pendingDelete, setPendingDelete] = useState<FileTreeNode | null>(null);
   const [busy, setBusy] = useState(false);
   const [coarsePointer, setCoarsePointer] = useState(false);
+  const [revealRequest, setRevealRequest] = useState<{
+    path: string;
+    requestId: string | number;
+  } | null>(null);
+  const handledRevealRequestRef = useRef<{
+    path: string;
+    requestId: string | number;
+  } | null>(null);
+  const attemptedRevealPathsRef = useRef<Set<string>>(new Set());
   const treeId = useId();
   const container = usePortalTokenSource<HTMLDivElement>();
   const containerRef = container.currentRef;
@@ -168,6 +225,10 @@ export function FileBrowser({
     () => (typeof document === "undefined" ? null : document.getElementById(treeId)),
     [treeId],
   );
+  const visibleTree = useMemo(
+    () => visibleFileTree(result.tree, isNodeVisible),
+    [isNodeVisible, result.tree],
+  );
 
   useBrowserLayoutEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
@@ -184,13 +245,35 @@ export function FileBrowser({
     }
   }, []);
 
+  const effectiveRevealRequestId = revealPath ? (revealPathRequestId ?? revealPath) : null;
+  useEffect(() => {
+    if (!revealPath || effectiveRevealRequestId === null) {
+      setRevealRequest(null);
+      return;
+    }
+    const handled = handledRevealRequestRef.current;
+    if (handled?.path === revealPath && handled.requestId === effectiveRevealRequestId) return;
+    handledRevealRequestRef.current = {
+      path: revealPath,
+      requestId: effectiveRevealRequestId,
+    };
+    attemptedRevealPathsRef.current = new Set();
+    setActive(null);
+    setRevealRequest({ path: revealPath, requestId: effectiveRevealRequestId });
+  }, [effectiveRevealRequestId, revealPath]);
+
   // The keyboard cursor: an explicitly-navigated node falls back to the
   // externally-selected file so arrow keys pick up where the preview pane is.
-  const cursor = active ?? selectedPath ?? null;
+  const visibleActive = active && findNode(visibleTree, active) ? active : null;
+  const cursor =
+    visibleActive ?? (selectedPath && findNode(visibleTree, selectedPath) ? selectedPath : null);
+  useEffect(() => {
+    if (active !== null && visibleActive === null) setActive(null);
+  }, [active, visibleActive]);
 
   const expand = useCallback(
     async (path: string) => {
-      const node = findNode(result.tree, path);
+      const node = findNode(visibleTree, path);
       if (node && node.kind === "dir" && node.children === undefined) {
         setLoadingPaths((prev) => new Set(prev).add(path));
         try {
@@ -204,7 +287,7 @@ export function FileBrowser({
         }
       }
     },
-    [result],
+    [result, visibleTree],
   );
 
   const open = useCallback(
@@ -215,6 +298,34 @@ export function FileBrowser({
     [expand],
   );
 
+  useEffect(() => {
+    if (!revealRequest) return;
+    const trace = traceRevealPath(visibleTree, revealRequest.path);
+    if (trace.directories.length > 0) {
+      setExpanded((previous) => {
+        const next = new Set(previous);
+        let changed = false;
+        for (const path of trace.directories) {
+          if (next.has(path)) continue;
+          next.add(path);
+          changed = true;
+        }
+        return changed ? next : previous;
+      });
+    }
+    const frontier = trace.frontier;
+    if (
+      !frontier ||
+      attemptedRevealPathsRef.current.has(frontier) ||
+      loadingPaths.has(frontier) ||
+      result.expandingPaths.has(frontier)
+    ) {
+      return;
+    }
+    attemptedRevealPathsRef.current.add(frontier);
+    void expand(frontier);
+  }, [expand, loadingPaths, result.expandingPaths, revealRequest, visibleTree]);
+
   const toggle = useCallback(
     async (node: FileTreeNode) => {
       if (node.kind !== "dir") return;
@@ -265,9 +376,9 @@ export function FileBrowser({
         }
       }
     };
-    walk(result.tree, 0);
+    walk(visibleTree, 0);
     return items;
-  }, [result.tree, expanded, draftCreate, loadingPaths, result.expandingPaths, cold]);
+  }, [visibleTree, expanded, draftCreate, loadingPaths, result.expandingPaths, cold]);
   const unicodeFontPaths = useMemo(
     () => renderItems.flatMap((item) => (item.type === "node" ? [item.node.path] : [])),
     [renderItems],
@@ -294,9 +405,9 @@ export function FileBrowser({
         if (node.children) visit(node.children);
       });
     };
-    visit(result.tree);
+    visit(visibleTree);
     return positions;
-  }, [result.tree]);
+  }, [visibleTree]);
   const cursorIndex = cursor ? (rowIndexByPath.get(cursor) ?? -1) : -1;
   const activeDescendantId = cursorIndex >= 0 ? `${treeId}-item-${cursorIndex}` : undefined;
 
@@ -388,7 +499,7 @@ export function FileBrowser({
       const draft = draftRename;
       setDraftRename(null);
       if (!draft || !supportsMutation) return;
-      const node = findNode(result.tree, draft.path);
+      const node = findNode(visibleTree, draft.path);
       const trimmed = name.trim().replace(/\/+$/, "");
       if (!node || !trimmed || trimmed === node.name) return;
       const newPath = joinPath(parentOf(draft.path), trimmed);
@@ -405,21 +516,21 @@ export function FileBrowser({
         setBusy(false);
       }
     },
-    [draftRename, supportsMutation, result, selectedPath, active, onSelectFile],
+    [draftRename, supportsMutation, result, selectedPath, active, onSelectFile, visibleTree],
   );
 
   // Begin a new file/folder under the active node's directory (or root).
   const startCreate = useCallback(
     (kind: "file" | "dir") => {
       if (!supportsMutation) return;
-      const anchor = cursor ? findNode(result.tree, cursor) : undefined;
+      const anchor = cursor ? findNode(visibleTree, cursor) : undefined;
       const parent = anchor ? (anchor.kind === "dir" ? anchor.path : parentOf(anchor.path)) : "";
       if (parent) open(parent);
       setDraftRename(null);
       setMenu(null);
       setDraftCreate({ parent, kind });
     },
-    [supportsMutation, cursor, result.tree, open],
+    [supportsMutation, cursor, open, visibleTree],
   );
 
   const startRename = useCallback(
@@ -437,7 +548,7 @@ export function FileBrowser({
     async (targetDir: string, sourcePath: string) => {
       setDragOver(null);
       if (!supportsMutation || !sourcePath) return;
-      const src = findNode(result.tree, sourcePath);
+      const src = findNode(visibleTree, sourcePath);
       if (!src) return;
       // No-op drops: onto its own current parent, onto itself, or into its own subtree.
       if (parentOf(sourcePath) === targetDir) return;
@@ -457,7 +568,7 @@ export function FileBrowser({
         setBusy(false);
       }
     },
-    [supportsMutation, result, selectedPath, active, onSelectFile],
+    [supportsMutation, result, selectedPath, active, onSelectFile, visibleTree],
   );
 
   const onKeyDown = useCallback(
@@ -594,9 +705,9 @@ export function FileBrowser({
     };
   }, [menu]);
 
-  const showErrorEmpty = result.error && result.tree.length === 0 && !draftCreate;
-  const showDegradedTree = result.error && result.tree.length > 0;
-  const showEmpty = !result.loading && result.tree.length === 0 && !draftCreate;
+  const showErrorEmpty = result.error && visibleTree.length === 0 && !draftCreate;
+  const showDegradedTree = result.error && visibleTree.length > 0;
+  const showEmpty = !result.loading && visibleTree.length === 0 && !draftCreate;
   // Retry lives next to the state it explains (the degraded/empty notice), so do
   // not render a second toolbar retry for the same failure.
   const showToolbar = supportsMutation || result.loading;
@@ -800,6 +911,24 @@ export function FileBrowser({
     if (index >= 0) vlistRef.current?.scrollToIndex(index);
   }, [cursor, renderItems]);
 
+  useEffect(() => {
+    if (!revealRequest) return;
+    const index = renderItems.findIndex(
+      (item) => item.type === "node" && item.node.path === revealRequest.path,
+    );
+    if (index < 0) return;
+    if (usesVirtualTree) {
+      vlistRef.current?.scrollToIndex(index);
+    } else {
+      document.getElementById(`${treeId}-item-${index}`)?.scrollIntoView?.({ block: "nearest" });
+    }
+    setRevealRequest((current) =>
+      current?.path === revealRequest.path && current.requestId === revealRequest.requestId
+        ? null
+        : current,
+    );
+  }, [renderItems, revealRequest, treeId, usesVirtualTree]);
+
   return (
     <div className={cn("flex min-h-0 min-w-0 flex-col", className)}>
       {showToolbar && (
@@ -819,7 +948,7 @@ export function FileBrowser({
               <ToolbarButton
                 label="Rename"
                 onClick={() => {
-                  const node = cursor ? findNode(result.tree, cursor) : undefined;
+                  const node = cursor ? findNode(visibleTree, cursor) : undefined;
                   if (node) startRename(node);
                 }}
                 disabled={busy || !cursor}
@@ -829,7 +958,7 @@ export function FileBrowser({
               <ToolbarButton
                 label="Delete"
                 onClick={(event) => {
-                  const node = cursor ? findNode(result.tree, cursor) : undefined;
+                  const node = cursor ? findNode(visibleTree, cursor) : undefined;
                   if (node) void runDelete(node, event.currentTarget);
                 }}
                 disabled={busy || !cursor}
@@ -1121,7 +1250,7 @@ function DeleteDialog({
                   closeIntentRef.current = "confirm";
                 }}
                 disabled={busy}
-                className="min-h-9 rounded-og-md bg-og-status-failed px-3 text-og-sm font-semibold text-white shadow-sm hover:brightness-110 disabled:opacity-50 pointer-coarse:min-h-11"
+                className="min-h-9 rounded-og-md bg-og-danger-fill px-3 text-og-sm font-semibold text-og-danger-fg shadow-sm hover:brightness-110 disabled:opacity-50 pointer-coarse:min-h-11"
               >
                 Delete permanently
               </button>
@@ -1301,9 +1430,8 @@ function ContextMenu({
         onClick();
       }}
       className={cn(
-        "flex w-full items-center gap-2 px-2.5 py-1 text-left text-og-sm pointer-coarse:min-h-11",
-        "hover:bg-og-surface-2",
-        danger ? "text-og-status-failed" : "text-og-fg",
+        MENU_BUTTON_CLASS,
+        danger && "text-og-status-failed [&_svg]:text-og-status-failed!",
       )}
     >
       {icon}
@@ -1319,21 +1447,17 @@ function ContextMenu({
       onKeyDown={onKeyDown}
       onClick={(e) => e.stopPropagation()}
       style={{ left, top }}
-      className={cn(
-        "fixed z-50 min-w-[160px] overflow-hidden rounded-md border py-1 shadow-lg",
-        "border-og-border",
-        "bg-og-surface-1",
-      )}
+      className={cn(MENU_SURFACE_CLASS, "fixed z-50 min-w-[180px] overflow-hidden")}
     >
       {isDir && (
         <>
-          {item("New file", <FilePlusIcon className="size-3.5" />, onNewFile)}
-          {item("New folder", <FolderPlusIcon className="size-3.5" />, onNewFolder)}
-          <div role="separator" className="my-1 h-px bg-og-border" />
+          {item("New file", <FilePlusIcon />, onNewFile)}
+          {item("New folder", <FolderPlusIcon />, onNewFolder)}
+          <div role="separator" className={MENU_SEPARATOR_CLASS} />
         </>
       )}
-      {item("Rename", <PencilIcon className="size-3.5" />, onRename)}
-      {item("Delete", <Trash2Icon className="size-3.5" />, onDelete, true)}
+      {item("Rename", <PencilIcon />, onRename)}
+      {item("Delete", <Trash2Icon />, onDelete, true)}
     </div>
   );
 }

package/src/components/fleet-tile.tsx

@@ -1,11 +1,14 @@
-import type { Session } from "@opengeni/sdk";
+import { deriveSessionDisplayTitle, type Session } from "@opengeni/sdk";
+import { modelDisplayName } from "@opengeni/sdk/model-display";
 import { cn } from "../lib/cn";
-import { formatRelativeTime, truncate } from "../lib/format";
+import { formatRelativeTime } from "../lib/format";
 import { SessionStatus } from "./session-status";
 
+const SESSION_METADATA_TITLE_KEYS = ["title", "name"] as const;
+
 export type FleetTileProps = {
   session: Session;
-  /** Overrides the derived title (metadata.title/name, else the initial message). */
+  /** Overrides the derived title (durable title, metadata, prompt preview, or safe fallback). */
   title?: string | undefined;
   /** Extra line under the title — e.g. "drift check" or the worker's task. */
   subtitle?: string | undefined;
@@ -15,18 +18,7 @@ export type FleetTileProps = {
 
 /** Best-effort display title for a session. */
 export function sessionDisplayTitle(session: Session): string {
-  // A set title (agent-generated or user-renamed) wins over metadata + the
-  // initial-message fallback.
-  if (typeof session.title === "string" && session.title.trim().length > 0) {
-    return session.title;
-  }
-  for (const key of ["title", "name"] as const) {
-    const value = session.metadata[key];
-    if (typeof value === "string" && value.trim().length > 0) {
-      return value;
-    }
-  }
-  return truncate(session.initialMessage, 100) || session.id.slice(0, 8);
+  return deriveSessionDisplayTitle(session, { metadataKeys: SESSION_METADATA_TITLE_KEYS });
 }
 
 /**
@@ -76,7 +68,7 @@ export function FleetTile({ session, title, subtitle, onOpen, className }: Fleet
       <span className="mt-auto flex w-full items-center gap-2 text-og-xs text-og-fg-subtle">
         <span className="font-og-mono">{session.id.slice(0, 8)}</span>
         <span aria-hidden>·</span>
-        <span className="truncate">{session.model}</span>
+        <span className="truncate">{modelDisplayName(session.model)}</span>
         <span className="ml-auto shrink-0" title={session.updatedAt}>
           {formatRelativeTime(session.updatedAt)}
         </span>

package/src/components/generated-video-player.tsx

@@ -1,6 +1,7 @@
 import type { GeneratedVideoReceipt, VideoArtifactPlaybackSource } from "@opengeni/sdk";
 import { useEffect, useState } from "react";
 import { cn } from "../lib/cn";
+import { useErrorMessage } from "../lib/error-message";
 import type { VideoArtifactPlaybackLoader } from "../timeline";
 
 export type GeneratedVideoPlayerProps = {
@@ -22,6 +23,7 @@ export function GeneratedVideoPlayer({
   className,
   label = "Generated video",
 }: GeneratedVideoPlayerProps) {
+  const formatError = useErrorMessage();
   const [retry, setRetry] = useState(0);
   const [state, setState] = useState<SourceState>({ kind: "loading" });
 
@@ -36,12 +38,12 @@ export function GeneratedVideoPlayer({
         if (controller.signal.aborted) return;
         setState({
           kind: "error",
-          message: error instanceof Error ? error.message : "Playback is unavailable.",
+          message: formatError(error),
         });
       },
     );
     return () => controller.abort();
-  }, [loadPlaybackSource, receipt.artifact.artifactId, retry]);
+  }, [loadPlaybackSource, receipt.artifact.artifactId, retry, formatError]);
 
   if (state.kind === "loading") {
     return (