@opengeni/react 7.0.0 → 7.1.0-canary.35855175602001

package/dist/interaction.js

@@ -7,29 +7,29 @@ import {
   useBrowserSession,
   useBrowserSessions,
   useSiteAuthConnections
-} from "./chunk-PNAVEK2U.js";
+} from "./chunk-UQS7BGNQ.js";
 import {
   ComputerViewer,
   useComputerFrameStream,
   useComputerSession,
   useComputerSessions
-} from "./chunk-YS24CFDI.js";
+} from "./chunk-2O2HXRGP.js";
 import {
   useInteractionInterventions,
   useInteractionInvalidation
-} from "./chunk-H5YGYNXS.js";
+} from "./chunk-TV5PP2PE.js";
 import "./chunk-4MDLEHXL.js";
 import "./chunk-5YK2ZDIG.js";
-import "./chunk-JVYQRRC4.js";
 import "./chunk-KZ73RL76.js";
-import "./chunk-PLYRL5ER.js";
 import {
   useEmbeddedBrowserInteraction,
   useEmbeddedComputerInteraction,
   useEmbeddedInteraction,
   useEmbeddedInterventions
 } from "./chunk-NEXLLTP4.js";
+import "./chunk-PLYRL5ER.js";
 import "./chunk-22KP6LR5.js";
+import "./chunk-JVYQRRC4.js";
 
 // src/hooks/use-network-routes.ts
 import { useCallback, useEffect, useRef, useState } from "react";

package/dist/machines.js

@@ -28,11 +28,11 @@ import {
   healthPulses,
   pointsFor,
   useMachines
-} from "./chunk-JPHDWKZE.js";
+} from "./chunk-PFDNB3U7.js";
 import "./chunk-PAJU5KKL.js";
 import "./chunk-KZ73RL76.js";
-import "./chunk-PLYRL5ER.js";
 import "./chunk-NEXLLTP4.js";
+import "./chunk-PLYRL5ER.js";
 import "./chunk-22KP6LR5.js";
 export {
   CONNECTION_STATUS_META,

package/dist/{model-policy-picker-menu-RVOQ4ZZG.js → model-policy-picker-menu-AGXXJZ2B.js}

@@ -1,13 +1,13 @@
 import {
   ModelPolicyPickerMenu,
   ModelPolicyPickerPopover
-} from "./chunk-HJ5VJ4JB.js";
-import "./chunk-IP4BUBKH.js";
+} from "./chunk-WKFFRFJF.js";
+import "./chunk-3LL47F4U.js";
+import "./chunk-IOLPHOF4.js";
 import "./chunk-VZTQ73XT.js";
-import "./chunk-5GAL23FF.js";
 import "./chunk-22KP6LR5.js";
 export {
   ModelPolicyPickerMenu,
   ModelPolicyPickerPopover
 };
-//# sourceMappingURL=model-policy-picker-menu-RVOQ4ZZG.js.map
+//# sourceMappingURL=model-policy-picker-menu-AGXXJZ2B.js.map

package/dist/model-policy.js

@@ -16,7 +16,7 @@ import {
   projectPickerRows,
   runnableLatencyModesForModel,
   sortPickerRows
-} from "./chunk-5GAL23FF.js";
+} from "./chunk-IOLPHOF4.js";
 export {
   advancedSourceSummary,
   availabilityReasonLabel,

package/dist/realtime.js

@@ -3,15 +3,15 @@ import {
   PickerAnimatedPage,
   PickerBackHeader,
   PickerNavRow
-} from "./chunk-IP4BUBKH.js";
+} from "./chunk-3LL47F4U.js";
+import "./chunk-IOLPHOF4.js";
+import {
+  useEmbeddedRealtimeSession
+} from "./chunk-NEXLLTP4.js";
 import {
   usePortalTokenSource,
   usePortalTokenStyle
 } from "./chunk-VZTQ73XT.js";
-import {
-  useEmbeddedRealtimeSession
-} from "./chunk-NEXLLTP4.js";
-import "./chunk-5GAL23FF.js";
 import {
   cn
 } from "./chunk-22KP6LR5.js";

package/dist/session-ui.js

@@ -19,28 +19,28 @@ import {
   setStartupDetails,
   useStartupDetails,
   userMessageLikelyNeedsDisclosure
-} from "./chunk-D5NOQPLR.js";
+} from "./chunk-ZC2DK5SC.js";
 import "./chunk-GEN54DU5.js";
 import "./chunk-GBPCZH3Y.js";
 import "./chunk-ZYRGEKWS.js";
-import "./chunk-PAJU5KKL.js";
-import "./chunk-D7GAPJ3V.js";
-import "./chunk-2VHARTBL.js";
-import "./chunk-JVYQRRC4.js";
-import "./chunk-UXE5SSNN.js";
-import "./chunk-BRM6FVZA.js";
 import "./chunk-WYWRYUNQ.js";
-import "./chunk-IP4BUBKH.js";
-import "./chunk-VZTQ73XT.js";
 import {
   createOlderHistoryLoadReceipt
-} from "./chunk-JKLGJQO5.js";
+} from "./chunk-VI7HELBI.js";
+import "./chunk-PAJU5KKL.js";
+import "./chunk-4ACTWOOW.js";
+import "./chunk-3LL47F4U.js";
 import "./chunk-AKOMC3VO.js";
+import "./chunk-IOLPHOF4.js";
 import "./chunk-KZ73RL76.js";
-import "./chunk-PLYRL5ER.js";
 import "./chunk-NEXLLTP4.js";
-import "./chunk-5GAL23FF.js";
+import "./chunk-SHRCATV6.js";
+import "./chunk-2VHARTBL.js";
+import "./chunk-BRM6FVZA.js";
+import "./chunk-VZTQ73XT.js";
+import "./chunk-PLYRL5ER.js";
 import "./chunk-22KP6LR5.js";
+import "./chunk-JVYQRRC4.js";
 export {
   ApprovalSurface,
   BUILT_IN_TURN_SUMMARY_FACET_IDS,

package/dist/session.js

@@ -10,7 +10,7 @@ import {
   useSessionControl,
   useSessionLineage,
   useSessionMcpApprovalPolicy
-} from "./chunk-IYUPN32E.js";
+} from "./chunk-DBPVUGQT.js";
 import {
   buildTimeline,
   conversationTimeline,
@@ -29,7 +29,7 @@ import {
   useSession,
   useSessionEvents,
   useTurnQueue
-} from "./chunk-JKLGJQO5.js";
+} from "./chunk-VI7HELBI.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,
@@ -38,8 +38,8 @@ import {
   useComposer
 } from "./chunk-AKOMC3VO.js";
 import "./chunk-KZ73RL76.js";
-import "./chunk-PLYRL5ER.js";
 import "./chunk-NEXLLTP4.js";
+import "./chunk-PLYRL5ER.js";
 export {
   FILE_ONLY_MESSAGE_TEXT,
   approvalsFromRequiresAction,

package/dist/timeline/tool-display-name.d.ts

@@ -6,6 +6,7 @@
  * and bare `session_create` resolve the same UI — without inventing previews
  * from argument JSON.
  */
+import type { ToolDisplayMetadata } from "@opengeni/sdk";
 /** Leaf tool name after the first `__` server boundary (or the whole name). */
 export declare function mcpToolLeaf(name: string): string;
 /**
@@ -18,4 +19,4 @@ export declare function toolMatchesLeaf(wireName: string, leaf: string): boolean
  * Readable label for a tool call ("session_create" / "opengeni__session_create"
  * → "Session create"). Title-cases the first character of the leaf phrase.
  */
-export declare function toolDisplayName(name: string): string;
+export declare function toolDisplayName(name: string, display?: ToolDisplayMetadata): string;

package/dist/timeline/types.d.ts

@@ -1,4 +1,4 @@
-import type { HumanInputQuestion, HumanInputResponse, MediaGenerationResult, ResourceRef, SessionStatus, TimelineAnnotation, TimelineAnnotationSource, ToolAuthNeededPayload, ToolRef } from "@opengeni/sdk";
+import type { HumanInputQuestion, HumanInputResponse, MediaGenerationResult, ResourceRef, SessionStatus, TimelineAnnotation, TimelineAnnotationSource, ToolAuthNeededPayload, ToolRef, ToolDisplayMetadata } from "@opengeni/sdk";
 export type TimelineAnnotationSourceDescriptor = Omit<TimelineAnnotationSource, "startOffset" | "endOffset" | "contextBefore" | "contextAfter"> & {
     text: string;
 };
@@ -97,6 +97,7 @@ export type ToolCallItem = {
     turnId: string | null;
     callId: string | null;
     name: string;
+    display?: ToolDisplayMetadata;
     arguments: unknown;
     output: unknown;
     truncation?: ToolCallTruncation | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "7.0.0",
+  "version": "7.1.0-canary.35855175602001",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -133,8 +133,8 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/connect": "^0.3.0",
-    "@opengeni/sdk": "^7.0.0",
+    "@opengeni/connect": "^0.3.0-canary.35855175602001",
+    "@opengeni/sdk": "^7.1.0-canary.35855175602001",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/approvals.ts

@@ -1,4 +1,8 @@
-import type { SessionEvent } from "@opengeni/sdk";
+import {
+  parseToolDisplayMetadata,
+  type ToolDisplayMetadata,
+  type SessionEvent,
+} from "@opengeni/sdk";
 
 /* ----------------------------------------------------------------------------
    Pending-approvals projection
@@ -26,6 +30,7 @@ export type PendingApproval = {
   id: string;
   /** Tool/function name awaiting the decision. */
   name: string;
+  display?: ToolDisplayMetadata;
   arguments?: unknown;
   /** The raw approval entry from the `session.requiresAction` payload. */
   raw?: unknown;
@@ -49,11 +54,13 @@ export function approvalsFromRequiresAction(payload: unknown): PendingApproval[]
       raw.rawItem && typeof raw.rawItem === "object"
         ? (raw.rawItem as Record<string, unknown>)
         : {};
+    const display = parseToolDisplayMetadata(raw.display);
     return {
       // Mirror the runtime's canonical interruption identity before retaining
       // the legacy top-level callId fallback for already-normalized payloads.
       id: String(rawItem.callId ?? rawItem.id ?? raw.id ?? raw.callId ?? raw.name ?? index),
       name: String(raw.name ?? raw.toolName ?? rawItem.name ?? "approval"),
+      ...(display ? { display } : {}),
       arguments: raw.arguments ?? rawItem.arguments,
       raw: approval,
     };

package/src/components/approval-surface.tsx

@@ -2,6 +2,7 @@ import { CheckIcon, ShieldCheckIcon, XIcon } from "lucide-react";
 import { useEffect, useId, useRef, useState, type ReactNode } from "react";
 import type { PendingApproval } from "../approvals";
 import { cn } from "../lib/cn";
+import { toolDisplayName } from "../timeline/tool-display-name";
 
 export type ApprovalSurfaceMessages = {
   title: string;
@@ -20,7 +21,10 @@ export const defaultApprovalSurfaceMessages: ApprovalSurfaceMessages = {
   reject: "Reject",
   approving: "Approving…",
   rejecting: "Rejecting…",
-  formatToolName: (name) => name.replaceAll("_", " ").replaceAll(".", " › "),
+  formatToolName: (name) =>
+    name.includes("__") || /^[a-f0-9]{64}$/.test(name)
+      ? toolDisplayName(name)
+      : name.replaceAll("_", " ").replaceAll(".", " › "),
 };
 
 export type ApprovalSurfaceProps = {
@@ -154,8 +158,14 @@ export function ApprovalSurface({
               ) : (
                 <>
                   <p className="text-og-sm font-medium text-og-fg">
-                    {messages.formatToolName(approval.name)}
+                    {approval.display?.title ??
+                      messages.formatToolName(approval.display?.toolName ?? approval.name)}
                   </p>
+                  {approval.display?.accountLabel ? (
+                    <p className="mt-1 break-words text-og-xs text-og-fg-muted">
+                      {approval.display.accountLabel}
+                    </p>
+                  ) : null}
                   {argumentsPreview !== null ? (
                     <pre className="mt-2 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-og-sm bg-og-surface-2 p-2 font-mono text-og-xs text-og-fg-muted">
                       {argumentsPreview}

package/src/components/machine-card.tsx

@@ -36,10 +36,12 @@ export type MachineCardProps = {
 };
 
 function KindIcon({ machine }: { machine: MachineView }) {
-  if (machine.isSessionGroup)
+  if (machine.kind === "local" || machine.kind === "selfhosted")
+    return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  if (machine.kind === "docker" || machine.isSessionGroup)
     return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
   if (machine.kind === "modal") return <CpuIcon className="size-4 text-og-fg-subtle" aria-hidden />;
-  return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
 }
 
 /**
@@ -158,9 +160,7 @@ export function MachineCard({
                 {machine.scope === "user" ? "personal" : machine.scope}
               </span>
               <span aria-hidden>·</span>
-              <span className="capitalize">
-                {machine.isSessionGroup ? "session sandbox" : machine.kind}
-              </span>
+              <span className="capitalize">{machine.kind}</span>
               <span aria-hidden>·</span>
               <span className="font-og-mono">
                 {machine.os}/{machine.arch}

package/src/components/machine-dock-bar.tsx

@@ -23,7 +23,7 @@ export type MachineDockBarProps = {
  * chrome (the dock-parity contract: selfhosted == Modal for the surfaces).
  */
 export function MachineDockBar({ name, kind, state, className }: MachineDockBarProps) {
-  const Icon = kind === "selfhosted" ? LaptopIcon : CpuIcon;
+  const Icon = kind === "selfhosted" || kind === "local" ? LaptopIcon : CpuIcon;
   const stateBadge = MACHINE_STATE_BADGE_META[state];
   return (
     <div

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

@@ -44,9 +44,12 @@ export type MachineDetailProps = {
 };
 
 function KindIcon({ kind, session }: { kind: string; session: boolean }) {
-  if (session) return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  if (kind === "local" || kind === "selfhosted")
+    return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  if (kind === "docker" || session)
+    return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
   if (kind === "modal") return <CpuIcon className="size-4 text-og-fg-subtle" aria-hidden />;
-  return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
 }
 
 export function MachineDetail({

package/src/components/markdown.tsx

@@ -56,6 +56,8 @@ const InteractiveContext = createContext<{
 }>({ source: "" });
 
 export type MarkdownProps = {
+  /** Resolve a retained-file reference to the host's authenticated artifact page. */
+  artifactHref?: ((artifactId: string) => string) | undefined;
   /** Reveals a bounded source excerpt; closing Find retains it until explicit restore. */
   searchTarget?: TimelineSearchTarget | null | undefined;
   renderImage?: ((image: { src: string; alt: string }) => ReactNode) | undefined;
@@ -217,47 +219,85 @@ const baseComponents: Components = {
 const MARKDOWN_LINK_CLASS =
   "break-words font-medium text-og-accent-strong underline-offset-2 hover:underline";
 
-function markdownComponents(onSandboxFile: MarkdownProps["onSandboxFile"]): Components {
-  return {
-    ...baseComponents,
-    a: ({ children, href, ...props }) => {
-      const location = sandboxFileLocationFromHref(href);
-      if (location !== null) {
-        return (
-          <SandboxMarkdownLink location={location} onSandboxFile={onSandboxFile}>
-            {children}
-          </SandboxMarkdownLink>
-        );
-      }
-      if (isSandboxHref(href) || !href) {
-        return (
-          <span
-            className="break-words font-medium text-og-fg-subtle underline decoration-dotted underline-offset-2"
-            aria-disabled="true"
-            title={
-              isSandboxHref(href)
-                ? "This sandbox file reference is invalid"
-                : "This link is unavailable"
-            }
-          >
-            {children}
-          </span>
-        );
-      }
-      return (
+// Keep renderer component types stable: rebuilding them remounts paragraphs,
+// destroys native selections, and resets embedded media on host updates.
+const MarkdownLinkContext = createContext<Pick<MarkdownProps, "onSandboxFile" | "artifactHref">>(
+  {},
+);
+
+const markdownComponents: Components = {
+  ...baseComponents,
+  p: ({ children, node, ...props }) => {
+    const containsArtifact = node?.children.some(
+      (child) =>
+        child.type === "element" &&
+        child.tagName === "img" &&
+        typeof child.properties.src === "string" &&
+        retainedImageId(child.properties.src),
+    );
+    const Tag = containsArtifact ? "div" : "p";
+    return (
+      <Tag className="my-2.5 leading-7 first:mt-0 last:mb-0" {...props}>
+        {children}
+      </Tag>
+    );
+  },
+  a: ({ children, href, ...props }) => {
+    const { onSandboxFile, artifactHref } = useContext(MarkdownLinkContext);
+    const artifactId = href ? retainedImageId(href) : null;
+    if (artifactId) {
+      const destination = artifactHref?.(artifactId);
+      return destination ? (
         <a
           className={MARKDOWN_LINK_CLASS}
+          href={defaultUrlTransform(destination)}
           target="_blank"
           rel="noreferrer noopener"
-          href={href}
-          {...props}
         >
           {children}
         </a>
+      ) : (
+        <span title="This artifact requires a workspace-aware host">
+          {children} (artifact unavailable)
+        </span>
       );
-    },
-  };
-}
+    }
+    const location = sandboxFileLocationFromHref(href);
+    if (location !== null) {
+      return (
+        <SandboxMarkdownLink location={location} onSandboxFile={onSandboxFile}>
+          {children}
+        </SandboxMarkdownLink>
+      );
+    }
+    if (isSandboxHref(href) || !href) {
+      return (
+        <span
+          className="break-words text-og-fg-subtle"
+          aria-disabled="true"
+          title={
+            isSandboxHref(href)
+              ? "This sandbox file reference is invalid"
+              : "This link is unavailable"
+          }
+        >
+          {children} (link unavailable)
+        </span>
+      );
+    }
+    return (
+      <a
+        className={MARKDOWN_LINK_CLASS}
+        target="_blank"
+        rel="noreferrer noopener"
+        href={href}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  },
+};
 
 function SandboxMarkdownLink({
   location,
@@ -371,7 +411,7 @@ function MarkdownImage({ src, alt }: ComponentPropsWithoutRef<"img">) {
 }
 
 const markdownUrlTransform: UrlTransform = (url, key, node) =>
-  (key === "href" && node.tagName === "a" && isSandboxHref(url)) ||
+  (key === "href" && node.tagName === "a" && (isSandboxHref(url) || retainedImageId(url))) ||
   (key === "src" && node.tagName === "img" && retainedImageId(url))
     ? url
     : defaultUrlTransform(url);
@@ -546,6 +586,7 @@ function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutR
 
 function MarkdownImpl({
   children,
+  artifactHref,
   className,
   streaming = false,
   onSandboxFile,
@@ -640,7 +681,10 @@ function MarkdownImpl({
   // fences don't snap to final GFM one commit before the crystallize morph.
   // Reveal identity still tracks the true source (`children`).
   const parseText = streaming || revealActive ? softenStreamingMarkdown(children) : children;
-  const components = useMemo(() => markdownComponents(onSandboxFile), [onSandboxFile]);
+  const linkContext = useMemo(
+    () => ({ onSandboxFile, artifactHref }),
+    [onSandboxFile, artifactHref],
+  );
 
   const interactiveContext = useMemo(
     () => ({
@@ -655,27 +699,29 @@ function MarkdownImpl({
   // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so
   // long links and code blocks wrap/scroll instead of forcing overflow.
   return (
-    <InteractiveContext.Provider value={interactiveContext}>
-      <TooltipProvider delayDuration={400}>
-        <div
-          ref={bodyRef}
-          className={cn(
-            "og-markdown-body min-w-0 break-words",
-            settling && "og-markdown-settle",
-            className,
-          )}
-        >
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={rehypePlugins}
-            components={components}
-            urlTransform={markdownUrlTransform}
+    <MarkdownLinkContext.Provider value={linkContext}>
+      <InteractiveContext.Provider value={interactiveContext}>
+        <TooltipProvider delayDuration={400}>
+          <div
+            ref={bodyRef}
+            className={cn(
+              "og-markdown-body min-w-0 break-words",
+              settling && "og-markdown-settle",
+              className,
+            )}
           >
-            {parseText}
-          </ReactMarkdown>
-        </div>
-      </TooltipProvider>
-    </InteractiveContext.Provider>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={rehypePlugins}
+              components={markdownComponents}
+              urlTransform={markdownUrlTransform}
+            >
+              {parseText}
+            </ReactMarkdown>
+          </div>
+        </TooltipProvider>
+      </InteractiveContext.Provider>
+    </MarkdownLinkContext.Provider>
   );
 }