@opengeni/react 1.0.1 → 2.3.0-canary.0

package/src/components/markdown.tsx

@@ -3,13 +3,18 @@ import {
   isValidElement,
   memo,
   useEffect,
+  useMemo,
   useReducer,
   useRef,
   useState,
   type ComponentPropsWithoutRef,
   type ReactNode,
 } from "react";
-import ReactMarkdown, { type Components } from "react-markdown";
+import ReactMarkdown, {
+  defaultUrlTransform,
+  type Components,
+  type UrlTransform,
+} from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "../lib/cn";
 import { tableElementToTsv } from "../lib/clipboard";
@@ -46,11 +51,22 @@ export type MarkdownProps = {
    * transition — that blinked the whole document).
    */
   streaming?: boolean | undefined;
+  /**
+   * Open a session-local file link in the host's Files surface. The path is the
+   * exact decoded `sandbox:` payload; `line`, when present, is 1-based.
+   */
+  onSandboxFile?: ((path: string, line?: number) => void | Promise<void>) | undefined;
+};
+
+/** Exact target path plus optional 1-based line from a markdown href. */
+export type SandboxFileLocation = {
+  path: string;
+  line: number | null;
 };
 
 /* --- element renderers (themed to og-* tokens) ------------------------------ */
 
-const components: Components = {
+const baseComponents: Components = {
   h1: ({ children, ...props }) => (
     <h1
       className="mt-5 mb-2.5 text-xl font-semibold tracking-tight text-og-fg first:mt-0"
@@ -95,16 +111,6 @@ const components: Components = {
       {children}
     </em>
   ),
-  a: ({ children, ...props }) => (
-    <a
-      className="break-words font-medium text-og-accent-strong underline-offset-2 hover:underline"
-      target="_blank"
-      rel="noreferrer noopener"
-      {...props}
-    >
-      {children}
-    </a>
-  ),
   ul: ({ children, ...props }) => (
     <ul
       className="my-2.5 ml-5 flex list-disc flex-col gap-1 marker:text-og-fg-subtle first:mt-0 last:mb-0"
@@ -184,15 +190,161 @@ const components: Components = {
       {children}
     </td>
   ),
-  img: ({ alt, ...props }) => (
-    <img
-      alt={alt ?? ""}
-      className="my-3 max-w-full rounded-og-md border border-og-border"
-      {...props}
-    />
-  ),
+  img: ({ alt, src, ...props }) =>
+    src ? (
+      <img
+        alt={alt ?? ""}
+        src={src}
+        className="my-3 max-w-full rounded-og-md border border-og-border"
+        {...props}
+      />
+    ) : alt ? (
+      <span className="text-og-fg-subtle" aria-disabled="true">
+        {alt}
+      </span>
+    ) : null,
 };
 
+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 (
+        <a
+          className={MARKDOWN_LINK_CLASS}
+          target="_blank"
+          rel="noreferrer noopener"
+          href={href}
+          {...props}
+        >
+          {children}
+        </a>
+      );
+    },
+  };
+}
+
+function SandboxMarkdownLink({
+  location,
+  onSandboxFile,
+  children,
+}: {
+  location: SandboxFileLocation;
+  onSandboxFile: MarkdownProps["onSandboxFile"];
+  children: ReactNode;
+}) {
+  const [state, setState] = useState<"idle" | "loading" | "error">("idle");
+  const { path, line } = location;
+  if (!onSandboxFile) {
+    return (
+      <span
+        className="break-words font-medium text-og-fg-subtle underline decoration-dotted underline-offset-2"
+        aria-disabled="true"
+        title="This sandbox file requires a session-aware handler"
+      >
+        {children}
+      </span>
+    );
+  }
+  const idleTitle = line !== null ? `Open ${path} at line ${line}` : `Open ${path}`;
+  return (
+    <button
+      type="button"
+      className={cn(
+        MARKDOWN_LINK_CLASS,
+        "inline-flex min-h-7 cursor-pointer items-center disabled:cursor-wait disabled:opacity-70 pointer-coarse:min-h-11",
+      )}
+      disabled={state === "loading"}
+      aria-busy={state === "loading"}
+      title={state === "error" ? "Couldn't open this file. Select to retry." : idleTitle}
+      onClick={() => {
+        setState("loading");
+        void Promise.resolve(onSandboxFile(path, line ?? undefined)).then(
+          () => setState("idle"),
+          () => setState("error"),
+        );
+      }}
+    >
+      {children}
+      {state === "loading" ? " (opening…)" : state === "error" ? " (retry)" : null}
+    </button>
+  );
+}
+
+const SANDBOX_SCHEME = "sandbox:";
+const LEGACY_WORKSPACE_PREFIX = "/workspace/";
+const TRAILING_LINE = /:([0-9]+)$/u;
+const TRAILING_INVALID_LINE = /:-(?:[0-9]+)$|:[0-9]+-[0-9]+$/u;
+const CONTROL_CHARACTER = /[\u0000-\u001f\u007f]/u;
+
+function isSandboxHref(href: string | undefined): boolean {
+  return href?.startsWith(SANDBOX_SCHEME) ?? false;
+}
+
+/**
+ * Parse an OpenGeni `sandbox:` application href (plus the historical bare
+ * `/workspace/...` form). The decoded path is intentionally opaque here:
+ * target selection, path policy, and filesystem authority belong to the
+ * session-aware host and its FileSystem boundary.
+ */
+export function sandboxFileLocationFromHref(href: string | undefined): SandboxFileLocation | null {
+  if (!href) return null;
+  const encodedLocation = isSandboxHref(href)
+    ? href.slice(SANDBOX_SCHEME.length)
+    : href.startsWith(LEGACY_WORKSPACE_PREFIX)
+      ? href
+      : null;
+  if (!encodedLocation || encodedLocation.includes("?") || encodedLocation.includes("#")) {
+    return null;
+  }
+  if (TRAILING_INVALID_LINE.test(encodedLocation)) return null;
+  const lineMatch = TRAILING_LINE.exec(encodedLocation);
+  const encodedPath = lineMatch ? encodedLocation.slice(0, -lineMatch[0].length) : encodedLocation;
+  const line = lineMatch?.[1] ? Number(lineMatch[1]) : null;
+  if (line !== null && (!Number.isSafeInteger(line) || line < 1)) return null;
+  if (!encodedPath) return null;
+  try {
+    const path = decodeURIComponent(encodedPath);
+    return path && !CONTROL_CHARACTER.test(path) ? { path, line } : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Return the exact decoded path for a supported sandbox-link href. */
+export function sandboxFilePathFromHref(href: string | undefined): string | null {
+  return sandboxFileLocationFromHref(href)?.path ?? null;
+}
+
+const markdownUrlTransform: UrlTransform = (url, key, node) =>
+  key === "href" && node.tagName === "a" && isSandboxHref(url) ? url : defaultUrlTransform(url);
+
 /** How long after the stream ends the reveal pipeline stays for trailing animations. */
 /** Trailing ink window after stream end — keep ≥ {@link INK_FADE_MS}. */
 const REVEAL_LINGER_MS = 480 * MOTION_INSPECT_SCALE;
@@ -284,7 +436,7 @@ function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutR
   );
 }
 
-function MarkdownImpl({ children, className, streaming = false }: MarkdownProps) {
+function MarkdownImpl({ children, className, streaming = false, onSandboxFile }: MarkdownProps) {
   // Tip-ink engine for THIS body: created on the first streaming render, kept
   // through a short linger after the stream ends (so the last age window can
   // finish), then dropped so settled bodies pay zero cost. Observing during
@@ -373,6 +525,7 @@ function MarkdownImpl({ children, className, streaming = false }: MarkdownProps)
   // 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]);
 
   // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so
   // long links and code blocks wrap/scroll instead of forcing overflow.
@@ -390,6 +543,7 @@ function MarkdownImpl({ children, className, streaming = false }: MarkdownProps)
           remarkPlugins={[remarkGfm]}
           rehypePlugins={rehypePlugins}
           components={components}
+          urlTransform={markdownUrlTransform}
         >
           {parseText}
         </ReactMarkdown>

package/src/components/message-timeline.tsx

@@ -14,6 +14,7 @@ import {
   ChevronRightIcon,
   PauseCircleIcon,
   PauseIcon,
+  MessageCircleQuestionIcon,
   PencilLineIcon,
   PlayIcon,
   RefreshCwIcon,
@@ -71,6 +72,7 @@ import {
   type AuthNeededItem,
   type ContextCompactionItem,
   type GoalItem,
+  type HumanInputItem,
   type MachineInputBatchItem,
   type NoticeItem,
   type TimelineGroup,
@@ -160,7 +162,7 @@ export type MessageTimelineProps = {
   toolRegistry?: ToolRegistry | undefined;
   /** Resolve opaque retained screenshot receipts through the authenticated host SDK. */
   loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
-  /** Resolve permanent generated-image receipts through the authenticated host SDK. */
+  /** Resolve permanent workspace image/file receipts through the authenticated host SDK. */
   loadRetainedArtifact?: RetainedArtifactLoader | undefined;
   /** Mint short-lived native playback sources for retained generated videos. */
   loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
@@ -369,13 +371,20 @@ export function MessageTimeline({
   // leaves that band (scrolls down / sentinel exits) — never from scrolling
   // further toward y=0 (that was the batch-top load loop).
   const olderLoadGateRef = useRef<"armed" | "cooling">("armed");
+  // A collapsed history tail can be shorter than the viewport. In that state
+  // there is no upward scroll range, so reader intent can never arm the top
+  // sentinel. Request one older page per loaded window until history either
+  // fills the viewport or the host reports that no older rows remain.
+  const underfillLoadWindowRef = useRef<string | null>(null);
   const resizeFollowRafRef = useRef<number | null>(null);
   const firstGroupKey = allGroups[0] ? timelineGroupKey(allGroups[0]) : null;
   // Content stays invisible until the tip is hard-parked across a short
   // post-commit settle (two rAFs). That absorbs sync late layout while hidden
   // so load/remount does not ease into the tip — live tip-follow is unchanged
   // once revealed. A flash of the window's TOP is still structurally impossible.
-  const [revealed, setRevealed] = useState(false);
+  // The accepted-create handoff uses the reserved local id "c" so its known
+  // first message is visible immediately; loaded histories still park first.
+  const [revealed, setRevealed] = useState(resolvedItems[0]?.id === "c");
   // Mirror `pinned` into a ref, written ONLY by applyPinned, so the
   // ResizeObserver rAF (a stable closure) reads the live value and a snap can
   // never race a just-unpinned reader across a pending React commit.
@@ -443,6 +452,8 @@ export function MessageTimeline({
   const groupKeyByItemIdRef = useRef<Map<string, string>>(new Map());
   const groupOffsetByKeyRef = useRef<Map<string, number>>(new Map());
   const firstItemId = resolvedItems[0]?.id ?? null;
+  const lastItemId = resolvedItems.at(-1)?.id ?? null;
+  const loadedWindowKey = JSON.stringify([firstItemId, lastItemId, resolvedItems.length]);
   // Bulk paints (the initial tail window, a prepended older window — detected
   // by the first group key changing) must not run per-row entrance animations.
   const firstKeyChangedForBulk =
@@ -718,6 +729,39 @@ export function MessageTimeline({
     [beginUserMessageDisclosureChange],
   );
 
+  const requestOlderIfUnderfilled = useCallback(
+    (node: HTMLElement) => {
+      if (
+        underfillLoadWindowRef.current !== null &&
+        underfillLoadWindowRef.current !== loadedWindowKey
+      ) {
+        // The requested page landed. Ordinary sentinel prefetch may own the
+        // next approach to the top once this window has a usable scroll range.
+        olderLoadGateRef.current = "armed";
+      }
+      // clientHeight=0 is pre-layout/headless, not evidence that the rendered
+      // history underfills a real viewport.
+      if (
+        node.clientHeight <= 1 ||
+        maxScrollOf(node) > 1 ||
+        !hasOlder ||
+        loadingOlder ||
+        !onLoadOlder ||
+        underfillLoadWindowRef.current === loadedWindowKey
+      ) {
+        return;
+      }
+      underfillLoadWindowRef.current = loadedWindowKey;
+      // If the reader had already armed ordinary prefetch, do not let its
+      // sentinel duplicate this request while the same short page is loading.
+      if (olderPrefetchArmedRef.current) {
+        olderLoadGateRef.current = "cooling";
+      }
+      onLoadOlder();
+    },
+    [hasOlder, loadedWindowKey, loadingOlder, onLoadOlder],
+  );
+
   const driveFollowRef = useRef<(node: HTMLElement, now?: number) => void>(() => undefined);
   const driveFollow = useCallback(
     (node: HTMLElement, nowMs?: number) => {
@@ -1014,10 +1058,21 @@ export function MessageTimeline({
     foldMemoryRef.current.clear();
     userMessageDisclosureMemoryRef.current.clear();
     disclosureKeepsUnpinnedRef.current = false;
+    underfillLoadWindowRef.current = null;
     seenActivityIdsRef.current.clear();
     applyPinned(true);
   }, [allGroups.length, revealed, applyPinned]);
 
+  // Parent commits cover the initial/history-loading cases. Disclosure state
+  // changes are child-local, so the ResizeObserver below owns dynamic collapse
+  // and expansion after mount.
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (node) {
+      requestOlderIfUnderfilled(node);
+    }
+  });
+
   // Clear the bulk-paint marker a frame after it renders, so rows appended
   // live (streams, new turns) animate exactly as before.
   useLayoutEffect(() => {
@@ -1115,6 +1170,7 @@ export function MessageTimeline({
         if (!current) {
           return;
         }
+        requestOlderIfUnderfilled(current);
         if (!autoFollow || !pinnedRef.current || hasNewerRef.current) {
           return;
         }
@@ -1137,7 +1193,7 @@ export function MessageTimeline({
         resizeFollowRafRef.current = null;
       }
     };
-  }, [autoFollow, driveFollow, snapToBottom]);
+  }, [autoFollow, driveFollow, requestOlderIfUnderfilled, snapToBottom]);
 
   // Entering a non-tip history window: drop any live pin so the page bottom
   // cannot re-stick follow across loadNewer. Leaving it (the tip window
@@ -2031,7 +2087,9 @@ function useLiveSettleFold(folded: boolean): boolean {
 function timelineGroupKey(group: TimelineGroup): string {
   switch (group.kind) {
     case "item":
-      return group.item.id;
+      return group.item.kind === "user-message" && group.item.reconciliationKey
+        ? group.item.reconciliationKey
+        : group.item.id;
     case "activity":
       return group.id;
     case "turn":
@@ -2249,6 +2307,8 @@ export function TimelineRow({
   switch (item.kind) {
     case "user-message":
       return <UserMessageRow item={item} renderMessageText={renderMessageText} />;
+    case "human-input":
+      return <HumanInputConversationRow item={item} />;
     case "agent-message":
       return <AgentMessageRow item={item} renderMessageText={renderMessageText} />;
     case "worker-completion":
@@ -2380,14 +2440,7 @@ function UserMessageRow({
     | undefined;
 }) {
   const enter = useEntranceAnimation();
-  const deliveryLabel =
-    item.delivery?.state === "sending"
-      ? "Sending…"
-      : item.delivery?.state === "queued"
-        ? "Queued"
-        : item.delivery?.state === "failed"
-          ? "Not sent"
-          : null;
+  const deliveryFailed = item.delivery?.state === "failed";
   return (
     <div className={cn(enter && "animate-og-enter", "flex justify-end")}>
       <div className="flex max-w-[85%] min-w-0 flex-col items-end gap-1">
@@ -2422,19 +2475,25 @@ function UserMessageRow({
             ) : null}
           </div>
         </CopyHoverFrame>
-        {deliveryLabel ? (
-          <div className="flex max-w-full items-center gap-2 px-1 text-og-xs text-og-fg-subtle">
-            <span title={item.delivery?.error}>{deliveryLabel}</span>
-            {item.delivery?.state === "failed" && item.delivery.onRetry ? (
+        {deliveryFailed ? (
+          <div
+            role="status"
+            className="flex max-w-full items-center gap-2 px-1 text-og-xs text-og-status-failed"
+          >
+            <span className="inline-flex items-center gap-1" title={item.delivery?.error}>
+              <TriangleAlertIcon className="size-3.5 shrink-0" aria-hidden="true" />
+              <span>Message not sent</span>
+            </span>
+            {item.delivery?.onRetry ? (
               <button
                 type="button"
-                className="font-medium text-og-fg underline decoration-og-border underline-offset-2 hover:text-og-fg-strong"
+                className="font-medium text-og-status-failed underline decoration-og-status-failed/50 underline-offset-2 hover:text-og-fg"
                 onClick={item.delivery.onRetry}
               >
                 Retry
               </button>
             ) : null}
-            {item.delivery?.state === "failed" && item.delivery.onRemove ? (
+            {item.delivery?.onRemove ? (
               <button
                 type="button"
                 className="font-medium text-og-fg-subtle underline decoration-og-border underline-offset-2 hover:text-og-fg"
@@ -2450,6 +2509,139 @@ function UserMessageRow({
   );
 }
 
+function HumanInputConversationRow({ item }: { item: HumanInputItem }) {
+  const enter = useEntranceAnimation();
+  const multipleQuestions = Math.max(item.questions.length, item.answers.length) > 1;
+  const questionNumberById = new Map(
+    item.questions.map((question, index) => [question.id, index + 1]),
+  );
+  const settledLabel =
+    item.response.outcome === "answered"
+      ? "You answered"
+      : item.response.outcome === "skipped"
+        ? "Skipped"
+        : item.response.outcome === "expired"
+          ? "Expired"
+          : "Cancelled";
+  const copyText = humanInputConversationCopyText(item, settledLabel);
+
+  return (
+    <div
+      className={cn(enter && "animate-og-enter", "flex w-full flex-col gap-2.5")}
+      data-human-input-history={item.requestId}
+    >
+      <div className="flex max-w-[90%] items-start gap-3 rounded-og-lg rounded-bl-og-xs border border-og-border bg-og-surface-1 px-3.5 py-3 sm:max-w-[82%]">
+        <span className="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-og-md bg-og-status-waiting/10 text-og-status-waiting">
+          <MessageCircleQuestionIcon aria-hidden="true" className="size-4" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="text-og-xs font-medium text-og-fg-subtle">Agent asked</p>
+          <div className="mt-1.5 space-y-3">
+            {item.questions.length > 0 ? (
+              item.questions.map((question, index) => (
+                <div key={question.id}>
+                  {question.label ? (
+                    <p className="text-og-sm font-semibold text-og-fg">
+                      {multipleQuestions ? (
+                        <span className="mr-1.5 tabular-nums text-og-fg-muted">{index + 1}.</span>
+                      ) : null}
+                      {multipleQuestions ? " " : null}
+                      {question.label}
+                    </p>
+                  ) : null}
+                  <p
+                    className={cn(
+                      "text-og-md leading-6 text-og-fg",
+                      question.label && "mt-0.5 text-og-sm text-og-fg-muted",
+                    )}
+                  >
+                    {!question.label && multipleQuestions ? (
+                      <span className="mr-1.5 tabular-nums text-og-fg-muted">{index + 1}.</span>
+                    ) : null}
+                    {!question.label && multipleQuestions ? " " : null}
+                    {question.prompt}
+                  </p>
+                </div>
+              ))
+            ) : (
+              <p className="text-og-sm text-og-fg-muted">The agent requested structured input.</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <CopyHoverFrame
+          copyText={copyText}
+          label="Copy answer"
+          className="w-fit max-w-[90%] min-w-0 sm:max-w-[82%]"
+          trailing={<MessageFooterTime occurredAt={item.occurredAt} />}
+        >
+          <div className="w-fit max-w-full min-w-0 rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-og-md leading-6 text-og-fg">
+            <p className="text-og-xs font-medium text-og-fg-subtle">{settledLabel}</p>
+            {item.response.outcome === "answered" ? (
+              <div className="mt-1.5 space-y-3">
+                {item.answers.length > 0 ? (
+                  item.answers.map((answer, answerIndex) => (
+                    <div key={answer.questionId}>
+                      {multipleQuestions ? (
+                        <p className="text-og-sm font-semibold text-og-fg">
+                          <span className="mr-1.5 tabular-nums text-og-fg-muted">
+                            {questionNumberById.get(answer.questionId) ?? answerIndex + 1}.
+                          </span>{" "}
+                          {answer.label}
+                        </p>
+                      ) : null}
+                      <div className={cn("text-og-md text-og-fg", multipleQuestions && "mt-0.5")}>
+                        {answer.values.length > 1 ? (
+                          <ul className="list-disc space-y-0.5 pl-5">
+                            {answer.values.map((value) => (
+                              <li key={`${answer.questionId}-${value}`}>{value}</li>
+                            ))}
+                          </ul>
+                        ) : (
+                          <p>{answer.values[0] || "Answered"}</p>
+                        )}
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <p>Answered</p>
+                )}
+              </div>
+            ) : null}
+          </div>
+        </CopyHoverFrame>
+      </div>
+    </div>
+  );
+}
+
+function humanInputConversationCopyText(item: HumanInputItem, settledLabel: string): string {
+  const questions = item.questions
+    .map(
+      (question, index) =>
+        `${item.questions.length > 1 ? `${index + 1}. ` : ""}${question.label || "Question"}: ${question.prompt}`,
+    )
+    .join("\n\n");
+  const questionNumberById = new Map(
+    item.questions.map((question, index) => [question.id, index + 1]),
+  );
+  const answers = item.answers
+    .map(
+      (answer, index) =>
+        `${
+          item.questions.length > 1
+            ? `${questionNumberById.get(answer.questionId) ?? index + 1}. `
+            : ""
+        }${answer.label}: ${answer.values.join(", ") || "Answered"}`,
+    )
+    .join("\n\n");
+  return [questions, `${settledLabel}${answers ? `\n\n${answers}` : ""}`]
+    .filter(Boolean)
+    .join("\n\n");
+}
+
 function AgentMessageRow({
   item,
   renderMessageText,
@@ -2701,6 +2893,11 @@ const GOAL_META: Record<GoalItem["action"], GoalMeta> = {
   },
   resumed: { label: "Goal resumed", pill: NEUTRAL_PILL, icon: PlayIcon },
   cleared: { label: "Goal cleared", pill: NEUTRAL_PILL, icon: Trash2Icon },
+  held: {
+    label: "Goal held",
+    pill: "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting",
+    icon: PauseCircleIcon,
+  },
   continuation: { label: "Continuing toward the goal", pill: NEUTRAL_PILL, icon: ArrowRightIcon },
 };