@opengeni/react 1.4.2 → 1.4.5-canary.37458084490001

package/src/components/remark-soft-line-breaks.ts

@@ -0,0 +1,166 @@
+/**
+ * remark: render a single newline inside prose as a line break.
+ *
+ * CommonMark folds a lone line ending inside a paragraph into a space, so an
+ * agent writing `1\n2\n3` shows "1 2 3". Chat surfaces (ChatGPT, GitHub
+ * comments) keep the line, which is what message authors expect. This plugin
+ * turns every line ending inside an mdast `text` node into a `break` node — the
+ * same result as `remark-breaks` — while leaving code (`code` / `inlineCode`
+ * carry `value`, not `text` children), raw HTML, and block structure (lists,
+ * tables, blockquotes, headings, blank-line paragraphs) untouched.
+ *
+ * Unlike `remark-breaks` (built on `mdast-util-find-and-replace`, which drops
+ * positions on the split nodes), every split text node keeps a source position.
+ * Streaming tip ink (`rehypeStreamReveal`) keys fade-in on those offsets, so a
+ * positionless line would render without ink and snap in at the stream tail.
+ *
+ * Structural local types keep the module dependency-free, like
+ * `stream-reveal.ts`; the renderer casts once at the plugin seam.
+ */
+
+type MdPoint = {
+  line?: number | undefined;
+  column?: number | undefined;
+  offset?: number | undefined;
+};
+
+type MdPosition = { start?: MdPoint | undefined; end?: MdPoint | undefined };
+
+type MdNode = {
+  type: string;
+  value?: string | undefined;
+  position?: MdPosition | undefined;
+  children?: MdNode[] | undefined;
+};
+
+type ExactPoint = { line: number; column: number; offset: number };
+
+const LINE_ENDING = /\r\n|\r|\n/g;
+const HAS_LINE_ENDING = /[\r\n]/;
+/** Line-start syntax the parser strips from text values: indentation and blockquote markers. */
+const LINE_PREFIX = /[\t >]*/y;
+
+export function remarkSoftLineBreaks() {
+  return (tree: MdNode, file?: { value?: unknown } | undefined) => {
+    walk(tree, typeof file?.value === "string" ? file.value : undefined);
+  };
+}
+
+function walk(node: MdNode, source: string | undefined): void {
+  if (!node.children) {
+    return;
+  }
+  let next: MdNode[] | null = null;
+  for (let index = 0; index < node.children.length; index += 1) {
+    const child = node.children[index]!;
+    if (
+      child.type === "text" &&
+      typeof child.value === "string" &&
+      HAS_LINE_ENDING.test(child.value)
+    ) {
+      next ??= node.children.slice(0, index);
+      next.push(...splitText(child, child.value, source));
+      continue;
+    }
+    walk(child, source);
+    next?.push(child);
+  }
+  if (next !== null) {
+    node.children = next;
+  }
+}
+
+function splitText(node: MdNode, value: string, source: string | undefined): MdNode[] {
+  const segments: { value: string; index: number }[] = [];
+  let cursor = 0;
+  for (const match of value.matchAll(LINE_ENDING)) {
+    segments.push({ value: value.slice(cursor, match.index), index: cursor });
+    cursor = match.index + match[0].length;
+  }
+  segments.push({ value: value.slice(cursor), index: cursor });
+
+  const starts = segmentStarts(node, segments, source);
+  const nodeEnd = exactPoint(node.position?.end);
+  const out: MdNode[] = [];
+  segments.forEach((segment, k) => {
+    const start = starts?.[k];
+    const isLast = k === segments.length - 1;
+    const end =
+      start === undefined
+        ? undefined
+        : isLast && nodeEnd !== undefined
+          ? nodeEnd
+          : {
+              line: start.line,
+              column: start.column + segment.value.length,
+              offset: start.offset + segment.value.length,
+            };
+    if (segment.value.length > 0) {
+      out.push({
+        type: "text",
+        value: segment.value,
+        ...(start !== undefined && end !== undefined ? { position: { start, end } } : {}),
+      });
+    }
+    if (!isLast) {
+      const nextStart = starts?.[k + 1];
+      out.push({
+        type: "break",
+        ...(end !== undefined && nextStart !== undefined
+          ? { position: { start: end, end: nextStart } }
+          : {}),
+      });
+    }
+  });
+  return out;
+}
+
+/**
+ * Source start of each line segment. Text values drop each continuation line's
+ * indentation / `>` prefix, so offsets are re-anchored on the real source line
+ * when the node's source slice has the same number of line endings; otherwise
+ * (e.g. a newline produced by a character reference) fall back to the value
+ * index, the same approximation tip ink already makes within one text node.
+ */
+function segmentStarts(
+  node: MdNode,
+  segments: readonly { index: number }[],
+  source: string | undefined,
+): ExactPoint[] | undefined {
+  const start = exactPoint(node.position?.start);
+  if (start === undefined) {
+    return undefined;
+  }
+  const endOffset = node.position?.end?.offset;
+  const lineStarts: number[] = [];
+  if (source !== undefined && endOffset !== undefined && endOffset >= start.offset) {
+    for (const match of source.slice(start.offset, endOffset).matchAll(LINE_ENDING)) {
+      lineStarts.push(start.offset + match.index + match[0].length);
+    }
+  }
+  const anchoredSource = lineStarts.length === segments.length - 1 ? source : undefined;
+  return segments.map((segment, k) => {
+    if (k === 0) {
+      return start;
+    }
+    if (anchoredSource !== undefined) {
+      const lineStart = lineStarts[k - 1]!;
+      LINE_PREFIX.lastIndex = lineStart;
+      const prefix = LINE_PREFIX.exec(anchoredSource)?.[0].length ?? 0;
+      return { line: start.line + k, column: prefix + 1, offset: lineStart + prefix };
+    }
+    return { line: start.line + k, column: 1, offset: start.offset + segment.index };
+  });
+}
+
+function exactPoint(point: MdPoint | undefined): ExactPoint | undefined {
+  if (
+    point === undefined ||
+    typeof point.line !== "number" ||
+    typeof point.column !== "number" ||
+    typeof point.offset !== "number"
+  ) {
+    return undefined;
+  }
+  return { line: point.line, column: point.column, offset: point.offset };
+}

package/src/components/sandbox-workspace.tsx

@@ -293,6 +293,13 @@ export type UseSandboxWorkspaceTabsOptions = ClientOverride & {
    * attachment, and navigation callbacks are not activated.
    */
   surfaces?: readonly SandboxWorkspaceSurface[] | undefined;
+  /**
+   * Whether this viewer may read the workspace machine fleet
+   * (`GET /machines`, permission `enrollments:read`). Defaults to true. Pass
+   * false for a viewer without it: the dock then never requests the fleet and
+   * the machine chip derives from the session's own capabilities alone.
+   */
+  machinesEnabled?: boolean | undefined;
   /** Override the source-driven default tab (e.g. a host landing tab id). When
    *  omitted the workbench picks Changes-vs-Files from capture or live Git. */
   initialTab?: string | null | undefined;
@@ -397,6 +404,7 @@ export function useSandboxWorkspaceTabs(
   const initialTab = options.initialTab ?? null;
   const activeTab = options.activeTab ?? initialTab;
   const workspaceVisible = options.workspaceVisible ?? true;
+  const machinesEnabled = options.machinesEnabled ?? true;
   const requestedSurfaces = options.surfaces ?? WORKBENCH_SURFACES;
   const surfaceSet = new Set<SandboxWorkspaceSurface>(requestedSurfaces);
   const changesEnabled = surfaceSet.has(WORKBENCH_TAB_CHANGES);
@@ -465,7 +473,7 @@ export function useSandboxWorkspaceTabs(
     workspaceId,
     sessionId,
     pollIntervalMs: MACHINES_SESSION_POLL_MS,
-    enabled: machineSurfaceEnabled,
+    enabled: machineSurfaceEnabled && machinesEnabled,
   });
   const activeMachine: MachineView | null =
     machines.machines.find((m) => m.sandboxId === machines.activeSandboxId) ??
@@ -995,6 +1003,12 @@ export type SandboxWorkspaceProps = ClientOverride & {
    * Terminal, Browser, and Desktop. Disabled surfaces remain behaviorally dormant.
    */
   surfaces?: readonly SandboxWorkspaceSurface[] | undefined;
+  /**
+   * Whether this viewer may read the workspace machine fleet
+   * (`GET /machines`, permission `enrollments:read`). Defaults to true. Pass
+   * false for a viewer without it so the dock never requests the fleet.
+   */
+  machinesEnabled?: boolean | undefined;
   /** Host tabs injected BEFORE the workbench tabs (e.g. a "Run" landing tab). */
   leadingTabs?: WorkspaceTab[] | undefined;
   /** Host tabs injected AFTER the workbench tabs (e.g. a "Debug" tab). */
@@ -1060,6 +1074,7 @@ export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
     events,
     primary,
     surfaces,
+    machinesEnabled,
     leadingTabs,
     trailingTabs,
     initialTab,
@@ -1180,6 +1195,7 @@ export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
     sessionId,
     events,
     ...(surfaces ? { surfaces } : {}),
+    ...(machinesEnabled !== undefined ? { machinesEnabled } : {}),
     ...(initialTab ? { initialTab } : {}),
     activeTab: activeTabHint,
     workspaceVisible: collapsed !== true,

package/src/components/session-chrome.tsx

@@ -26,6 +26,8 @@ import { ChildSessionLink } from "./child-session-link";
  *
  * Inbox and queue stay separate segments. Queue hover actions wire to
  * `UseTurnQueueResult` (`editTurn` / `steerTurn` / `moveTurn` / `removeTurn`).
+ * The collapsed queue chip previews the latest queued message beside its Steer
+ * action; open queue rows keep Steer visible and reveal the rest on hover.
  * Inbox has no product dismiss API; pass `onDismissIncoming` when the host
  * wants a visible action (dev harness may use a local dummy).
  *
@@ -75,6 +77,13 @@ import type { UseTurnQueueResult } from "../hooks/use-turn-queue";
 import { cn } from "../lib/cn";
 import { useErrorMessage } from "../lib/error-message";
 import { formatClockTime } from "../lib/format";
+import {
+  countAuthoritativeQueuedTurns,
+  isAuthoritativeQueuedTurn,
+  QUEUE_REPLACE_DRAFT_COPY,
+  queuedTurnPresentation,
+  queueNeighborAnchors,
+} from "../queue-presentation-model";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
 import { QUEUE_ITEM_CONTENT_UNAVAILABLE, queueItemContent } from "./queue-item-content";
 import { TimelineAnnotationsChip, type TimelineAnnotationLike } from "./timeline-annotations";
@@ -143,11 +152,6 @@ type GoalPillState =
   | "invariant_broken"
   | "completed";
 
-type QueuedTurnPresentation = {
-  kind: "prompt" | "realtime_voice" | "realtime_voice_handoff";
-  text: string;
-};
-
 const GOAL_LABEL: Record<GoalPillState, string> = {
   pursuing: "Pursuing",
   waiting: "Waiting",
@@ -252,35 +256,7 @@ export function sessionChromeGoalPillExplanation(
   return null;
 }
 
-function queuedTurnPresentation(turn: SessionTurn): QueuedTurnPresentation {
-  const realtimeDelegation = objectValue(turn.metadata.realtimeDelegation);
-  const inputTranscript = realtimeDelegation?.inputTranscript;
-  if (typeof inputTranscript === "string" && inputTranscript.trim()) {
-    return { kind: "realtime_voice", text: inputTranscript.trim() };
-  }
-  if (objectValue(turn.metadata.realtimeTailFlush)) {
-    return { kind: "realtime_voice_handoff", text: "Remaining voice context" };
-  }
-  return { kind: "prompt", text: turn.prompt };
-}
-
-function isSteeringTurn(turn: SessionTurn): boolean {
-  return turn.metadata.delivery === "steer";
-}
-
-function isAuthoritativeQueuedTurn(
-  turn: SessionTurn,
-  mutationFor: UseTurnQueueResult["mutationFor"],
-): boolean {
-  return !isSteeringTurn(turn) && mutationFor(turn.id) !== "steer";
-}
-
-export function countAuthoritativeQueuedTurns(
-  turns: readonly SessionTurn[],
-  mutationFor: UseTurnQueueResult["mutationFor"],
-): number {
-  return turns.filter((turn) => isAuthoritativeQueuedTurn(turn, mutationFor)).length;
-}
+export { countAuthoritativeQueuedTurns };
 
 function isOptimisticQueuedMessage(
   message: ComposerOptimisticMessage,
@@ -344,12 +320,6 @@ export function sessionChromeShouldOfferQueue(input: {
   );
 }
 
-function objectValue(value: unknown): Record<string, unknown> | null {
-  return value !== null && typeof value === "object" && !Array.isArray(value)
-    ? (value as Record<string, unknown>)
-    : null;
-}
-
 /** Select pill state from the goal's authoritative continuation projection. */
 export function sessionChromeGoalPillState(
   goalStatus: "active" | "paused" | "completed",
@@ -831,6 +801,22 @@ export function SessionChrome({
   }, [active, signals]);
 
   const open = active !== null;
+  // Collapsed queue chip shows the latest queued message so a Send that lands
+  // in the queue is visible without opening the list; Steer acts on that
+  // message once the server has confirmed it.
+  const latestOptimisticQueued = optimisticQueued[optimisticQueued.length - 1];
+  const latestQueuedTurn = queuedTurns[queuedTurns.length - 1];
+  const queuePeek: { text: string | null; turnId: string | null } | null =
+    queue.error || queue.mutationError
+      ? null
+      : latestOptimisticQueued
+        ? { text: latestOptimisticQueued.text.trim() || null, turnId: null }
+        : latestQueuedTurn
+          ? {
+              text: queuedTurnPresentation(latestQueuedTurn).text.trim() || null,
+              turnId: latestQueuedTurn.id,
+            }
+          : null;
 
   if (signals.length === 0 && !stopping) return null;
 
@@ -1056,7 +1042,14 @@ export function SessionChrome({
                         <span className={cn("shrink-0", toneClass(signal.tone, selected))}>
                           {signal.icon}
                         </span>
-                        <span className={cn("font-medium text-og-fg", "min-w-0 truncate")}>
+                        <span
+                          className={cn(
+                            "font-medium text-og-fg",
+                            signal.id === "queue" && queuePeek?.text && !selected
+                              ? "shrink-0"
+                              : "min-w-0 truncate",
+                          )}
+                        >
                           {signal.id === "goal" ? "Goal · " : null}
                           {signal.id === "goal"
                             ? goalState === "pursuing"
@@ -1068,6 +1061,21 @@ export function SessionChrome({
                                 : `${queuedTurns.length + optimisticQueued.length} queued`
                               : signal.label}
                         </span>
+                        {signal.id === "queue" && queuePeek?.text && !selected ? (
+                          <AnimatePresence initial={false} mode="popLayout">
+                            <motion.span
+                              key={queuePeek.text}
+                              data-testid="session-chrome-queue-peek"
+                              className="min-w-0 max-w-[min(24rem,60vw)] truncate text-og-fg-muted"
+                              initial={reduceMotion ? false : { opacity: 0, y: 3 }}
+                              animate={{ opacity: 1, y: 0 }}
+                              exit={{ opacity: 0, transition: { duration: crossfadeDuration } }}
+                              transition={{ duration: crossfadeDuration, ease }}
+                            >
+                              {queuePeek.text}
+                            </motion.span>
+                          </AnimatePresence>
+                        ) : null}
                       </button>
                       {signal.id === "goal" && goal && record && !readOnly ? (
                         <div className="flex shrink-0 items-center pr-1 pl-0.5">
@@ -1101,19 +1109,27 @@ export function SessionChrome({
                             <Trash2Icon className="size-3" />
                           </IconAction>
                         </div>
-                      ) : signal.id === "queue" && canMutateQueue && queuedTurns[0] ? (
+                      ) : signal.id === "queue" && canMutateQueue && queuePeek && !selected ? (
                         <div className="flex shrink-0 items-center pr-1 pl-0.5">
                           <IconAction
-                            label="Steer first queued message"
+                            label="Steer latest queued message"
                             analyticsAction="steer"
                             text="Steer"
                             tip={QUEUE_STEER_TIP}
                             disabled={
-                              queue.mutating || Boolean(queue.mutationFor(queuedTurns[0].id))
+                              !queuePeek.turnId ||
+                              queue.mutating ||
+                              Boolean(queue.mutationFor(queuePeek.turnId))
                             }
-                            onClick={() => void queue.steerTurn(queuedTurns[0]!.id)}
+                            onClick={() => {
+                              if (queuePeek.turnId) void queue.steerTurn(queuePeek.turnId);
+                            }}
                           >
-                            <CornerDownRightIcon className="size-3" />
+                            {queuePeek.turnId && queue.mutationFor(queuePeek.turnId) === "steer" ? (
+                              <Loader2Icon className="size-3 animate-og-spin" />
+                            ) : (
+                              <CornerDownRightIcon className="size-3" />
+                            )}
                           </IconAction>
                         </div>
                       ) : null}
@@ -1426,8 +1442,7 @@ function QueuePanel({
         const voice = presentation.kind !== "prompt";
         const pending = mutationFor(turn.id);
         const settling = !interactiveTurnIds.has(turn.id);
-        const beforeUp = index > 0 ? (turns[index - 1]?.id ?? null) : null;
-        const beforeDown = index < turns.length - 1 ? (turns[index + 2]?.id ?? null) : null;
+        const { beforeUp, beforeDown } = queueNeighborAnchors(turns, index);
         const showActions = !readOnly && (onEdit || onSteer || onRemove || onMove);
         const confirmingReplace = replaceDraftFor === turn.id;
         return (
@@ -1453,27 +1468,59 @@ function QueuePanel({
                 annotations={turn.annotations ?? []}
               />
               {showActions ? (
-                <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 max-sm:opacity-100">
-                  {onMove && turns.length > 1 ? (
-                    <>
+                <div className="flex shrink-0 items-center gap-0.5">
+                  {/* Reorder, edit and delete stay on hover; Steer is always visible. */}
+                  <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 max-sm:opacity-100">
+                    {onMove && turns.length > 1 ? (
+                      <>
+                        <IconAction
+                          label={`Move queued prompt ${index + 1} up`}
+                          tip="Move up"
+                          disabled={settling || pending !== null || index === 0}
+                          onClick={() => onMove(turn.id, beforeUp)}
+                        >
+                          <ArrowUpIcon className="size-3" />
+                        </IconAction>
+                        <IconAction
+                          label={`Move queued prompt ${index + 1} down`}
+                          tip="Move down"
+                          disabled={settling || pending !== null || index >= turns.length - 1}
+                          onClick={() => onMove(turn.id, beforeDown)}
+                        >
+                          <ArrowDownIcon className="size-3" />
+                        </IconAction>
+                      </>
+                    ) : null}
+                    {onEdit ? (
                       <IconAction
-                        label={`Move queued prompt ${index + 1} up`}
-                        tip="Move up"
-                        disabled={settling || pending !== null || index === 0}
-                        onClick={() => onMove(turn.id, beforeUp)}
+                        label={`Edit queued prompt ${index + 1}`}
+                        tip={QUEUE_EDIT_TIP}
+                        disabled={settling || pending !== null}
+                        onClick={() => onEdit(turn)}
                       >
-                        <ArrowUpIcon className="size-3" />
+                        {pending === "edit" ? (
+                          <Loader2Icon className="size-3 animate-og-spin" />
+                        ) : (
+                          <PencilIcon className="size-3" />
+                        )}
                       </IconAction>
+                    ) : null}
+                    {onRemove ? (
                       <IconAction
-                        label={`Move queued prompt ${index + 1} down`}
-                        tip="Move down"
-                        disabled={settling || pending !== null || index >= turns.length - 1}
-                        onClick={() => onMove(turn.id, beforeDown)}
+                        label={`Remove queued prompt ${index + 1}`}
+                        tip={QUEUE_DELETE_TIP}
+                        disabled={settling || pending !== null}
+                        onClick={() => onRemove(turn.id)}
+                        danger
                       >
-                        <ArrowDownIcon className="size-3" />
+                        {pending === "delete" ? (
+                          <Loader2Icon className="size-3 animate-og-spin" />
+                        ) : (
+                          <Trash2Icon className="size-3" />
+                        )}
                       </IconAction>
-                    </>
-                  ) : null}
+                    ) : null}
+                  </div>
                   {onSteer ? (
                     <IconAction
                       label={`Steer queued prompt ${index + 1}`}
@@ -1490,59 +1537,27 @@ function QueuePanel({
                       )}
                     </IconAction>
                   ) : null}
-                  {onEdit ? (
-                    <IconAction
-                      label={`Edit queued prompt ${index + 1}`}
-                      tip={QUEUE_EDIT_TIP}
-                      disabled={settling || pending !== null}
-                      onClick={() => onEdit(turn)}
-                    >
-                      {pending === "edit" ? (
-                        <Loader2Icon className="size-3 animate-og-spin" />
-                      ) : (
-                        <PencilIcon className="size-3" />
-                      )}
-                    </IconAction>
-                  ) : null}
-                  {onRemove ? (
-                    <IconAction
-                      label={`Remove queued prompt ${index + 1}`}
-                      tip={QUEUE_DELETE_TIP}
-                      disabled={settling || pending !== null}
-                      onClick={() => onRemove(turn.id)}
-                      danger
-                    >
-                      {pending === "delete" ? (
-                        <Loader2Icon className="size-3 animate-og-spin" />
-                      ) : (
-                        <Trash2Icon className="size-3" />
-                      )}
-                    </IconAction>
-                  ) : null}
                 </div>
               ) : null}
             </div>
             {confirmingReplace ? (
               <div className="rounded-og-sm border border-og-status-waiting/30 bg-og-status-waiting/10 p-2 text-og-xs text-og-fg">
-                <p>Your composer already has a draft. Replace it with this queued prompt?</p>
-                <p className="mt-0.5 text-og-fg-muted">
-                  The current draft will be permanently discarded; this queued prompt is preserved
-                  until you confirm.
-                </p>
+                <p>{QUEUE_REPLACE_DRAFT_COPY.title}</p>
+                <p className="mt-0.5 text-og-fg-muted">{QUEUE_REPLACE_DRAFT_COPY.detail}</p>
                 <div className="mt-2 flex justify-end gap-1.5">
                   <button
                     type="button"
                     className="rounded-og-sm px-2 py-1 font-medium hover:bg-og-surface-3/70 focus-visible:ring-2 focus-visible:ring-og-accent/40"
                     onClick={onCancelReplace}
                   >
-                    Keep current draft
+                    {QUEUE_REPLACE_DRAFT_COPY.keep}
                   </button>
                   <button
                     type="button"
                     className="rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-2 py-1 font-medium hover:bg-og-primary-hover focus-visible:ring-2 focus-visible:ring-og-accent/40"
                     onClick={onConfirmReplace}
                   >
-                    Replace and edit
+                    {QUEUE_REPLACE_DRAFT_COPY.replace}
                   </button>
                 </div>
               </div>