@opengeni/react 6.1.0 → 7.0.0-canary.35585322809001

package/src/components/sandbox-workspace.tsx

@@ -119,19 +119,6 @@ function sourceDrivenDefaultTab(
   return null;
 }
 
-function captureDegradedMessage(reason: string): string {
-  switch (reason) {
-    case "repository_discovery_timed_out":
-      return "Workspace capture is incomplete because repository discovery timed out. Live files remain authoritative.";
-    case "repository_discovery_result_limit_exceeded":
-      return "Workspace capture is incomplete because the repository limit was exceeded. Live files remain authoritative.";
-    case "repository_read_unavailable":
-      return "Workspace capture is incomplete because repository changes could not be read. Live files remain authoritative.";
-    default:
-      return "Workspace capture is incomplete because repository discovery failed. Live files remain authoritative.";
-  }
-}
-
 function WorkbenchSurfaceLoading({ name }: { name: "Browser" | "Desktop" }) {
   return (
     <CenteredState
@@ -555,23 +542,6 @@ export function useSandboxWorkspaceTabs(
     if (advertised.length > 0) return advertised;
     return captureState.capture?.repos.map((repo) => repo.root) ?? [];
   }, [capabilities?.Git.repos, captureState.capture]);
-  const notifiedCaptureDegradedReason = useRef<{
-    sessionId: string;
-    reason: string | null;
-  }>({
-    sessionId,
-    reason: null,
-  });
-  if (notifiedCaptureDegradedReason.current.sessionId !== sessionId) {
-    notifiedCaptureDegradedReason.current = { sessionId, reason: null };
-  }
-  useEffect(() => {
-    const reason = captureState.degradedReason;
-    if (!reason || notifiedCaptureDegradedReason.current.reason === reason) return;
-    notifiedCaptureDegradedReason.current = { sessionId, reason };
-    onNotify?.({ kind: "error", message: captureDegradedMessage(reason) });
-  }, [sessionId, captureState.degradedReason, onNotify]);
-
   const files = useSandboxFiles(sessionId, {
     events,
     // No passive Channel-A reads while cold, even after a conclusive capture
@@ -743,6 +713,7 @@ export function useSandboxWorkspaceTabs(
             comparison={changesComparison}
             onComparisonChange={setChangesComparison}
             captureAvailable={captureAvailable}
+            captureDegraded={captureState.degradedReason !== null}
             captureRevision={captureState.revision}
             capturePending={capturePending}
             liveWorkspaceExpected={liveWorkspaceExpected}
@@ -928,6 +899,7 @@ export function useSandboxWorkspaceTabs(
     browserEnabled,
     desktopEnabled,
     captureAvailable,
+    captureState.degradedReason,
     dirtyCount,
     warmTerminal,
     requestedFilePath,
@@ -1354,6 +1326,7 @@ function ChangesTabContent({
   git,
   comparison,
   captureAvailable,
+  captureDegraded,
   captureRevision,
   capturePending,
   liveWorkspaceExpected,
@@ -1367,6 +1340,7 @@ function ChangesTabContent({
   git: UseSandboxGitResult;
   comparison: SandboxGitComparison;
   captureAvailable: boolean;
+  captureDegraded: boolean;
   captureRevision: number | null;
   capturePending: boolean;
   liveWorkspaceExpected: boolean;
@@ -1460,6 +1434,8 @@ function ChangesTabContent({
   }
 
   if (!liveWorkspaceExpected && (comparison !== "working" || !captureAvailable)) {
+    // Staged changes are live-only; a failed saved preview is not their blocker.
+    const previewUnavailable = captureDegraded && !captureAvailable && comparison !== "staged";
     return (
       <CenteredState
         icon={
@@ -1468,22 +1444,30 @@ function ChangesTabContent({
               className="size-5 animate-spin motion-reduce:animate-none"
               aria-hidden
             />
+          ) : previewUnavailable ? (
+            <TriangleAlertIcon className="size-5" aria-hidden />
           ) : (
             <CpuIcon className="size-5" aria-hidden />
           )
         }
       >
         <p className="text-og-sm font-medium text-og-fg">
-          {workspaceWaking ? "Waking workspace" : "Workspace is resting"}
+          {workspaceWaking
+            ? "Waking workspace"
+            : previewUnavailable
+              ? "Saved changes preview is unavailable"
+              : "Workspace is resting"}
         </p>
         <p className="text-og-sm leading-5 text-og-fg-subtle">
           {workspaceWaking
             ? "Connecting to the live working tree…"
-            : comparison === "branch"
-              ? "Wake the sandbox to compare this branch with the remote default branch."
-              : comparison === "staged"
-                ? "Wake the sandbox to inspect staged changes."
-                : "No captured revision is available yet. Wake the sandbox to inspect uncommitted changes."}
+            : previewUnavailable
+              ? "Open the live workspace to view current changes."
+              : comparison === "branch"
+                ? "Wake the sandbox to compare this branch with the remote default branch."
+                : comparison === "staged"
+                  ? "Wake the sandbox to inspect staged changes."
+                  : "No captured revision is available yet. Wake the sandbox to inspect uncommitted changes."}
         </p>
         {!workspaceWaking ? (
           <DockActionButton onClick={onWake}>

package/src/components/session-capability-frame.tsx

@@ -0,0 +1,163 @@
+import { CheckIcon, ShieldCheckIcon, XIcon } from "lucide-react";
+import { Dialog } from "radix-ui";
+import { useRef, useState, type ReactNode, type RefObject } from "react";
+import { usePortalTokenStyle } from "../lib/use-portal-token-style";
+
+export type SessionCapabilityFrameProps = {
+  name: string;
+  subtitle: string;
+  logo: string | null;
+  typeLabel: string;
+  description: string;
+  skill: boolean;
+  expanded: boolean;
+  complete: boolean;
+  actionLabel: string;
+  note: string;
+  onOpen(): void;
+  onClose(): void;
+  busy?: boolean;
+  opener?: RefObject<HTMLButtonElement | null>;
+  cardRef?: RefObject<HTMLElement | null>;
+  children?: ReactNode;
+  /** A catalogue row can own the opener while reusing the same details dialog. */
+  dialogOnly?: boolean;
+};
+
+function Mark({ src, name }: { src: string | null; name: string }) {
+  const [failed, setFailed] = useState<string | null>(null);
+  return (
+    <span className="og-session-capability-logo" aria-hidden>
+      {src && failed !== src ? (
+        <img src={src} alt="" loading="lazy" decoding="async" onError={() => setFailed(src)} />
+      ) : (
+        name.trim().slice(0, 2).toUpperCase()
+      )}
+    </span>
+  );
+}
+
+/** The same conversation card in the console and embedded clients. Setup
+ * content owns the provider flow; this frame owns identity and protected focus. */
+export function SessionCapabilityFrame({
+  name,
+  subtitle,
+  logo,
+  typeLabel,
+  description,
+  skill,
+  expanded,
+  complete,
+  actionLabel,
+  note,
+  onOpen,
+  onClose,
+  busy = false,
+  opener,
+  cardRef,
+  children,
+  dialogOnly = false,
+}: SessionCapabilityFrameProps) {
+  const localOpener = useRef<HTMLButtonElement>(null);
+  const localCard = useRef<HTMLElement>(null);
+  const buttonRef = opener ?? localOpener;
+  const sectionRef = cardRef ?? localCard;
+  const portalStyle = usePortalTokenStyle(sectionRef.current);
+  const identity = (
+    <>
+      <Mark src={logo} name={name} />
+      <div className="og-session-capability-identity">
+        <h3>{name}</h3>
+        <span>{subtitle}</span>
+      </div>
+      <span className="og-session-capability-type">{typeLabel}</span>
+    </>
+  );
+  return (
+    <div className="og-session-capability">
+      <section
+        hidden={dialogOnly}
+        style={dialogOnly ? { display: "none" } : undefined}
+        ref={sectionRef}
+        tabIndex={-1}
+        aria-label={`${name} setup`}
+        data-state={complete ? "complete" : expanded ? "setup" : "suggested"}
+        className="og-session-capability-shell"
+      >
+        <div className="og-session-capability-header">
+          {identity}
+          {complete ? <CheckIcon size={16} aria-hidden /> : null}
+        </div>
+        {complete ? (
+          <p role="status" className="og-session-capability-copy">
+            {skill ? "Installed · Workspace" : "Connected · Available in this conversation"}
+          </p>
+        ) : (
+          <>
+            <p className="og-session-capability-copy">{description}</p>
+            <div className="og-session-capability-actions">
+              <span>
+                <ShieldCheckIcon size={13} aria-hidden />
+                {skill ? "Guidance only · no account access" : "You choose what to authorize"}
+              </span>
+              <button
+                ref={buttonRef}
+                type="button"
+                onClick={onOpen}
+                aria-haspopup="dialog"
+                aria-expanded={expanded}
+              >
+                {actionLabel}
+              </button>
+            </div>
+          </>
+        )}
+      </section>
+      {!complete && !dialogOnly ? <p className="og-session-capability-note">{note}</p> : null}
+      <Dialog.Root
+        open={expanded && !complete}
+        onOpenChange={(open) => {
+          if (!open && !busy) onClose();
+        }}
+      >
+        <Dialog.Portal>
+          <Dialog.Overlay className="og-root og-session-capability-overlay" style={portalStyle} />
+          <Dialog.Content
+            className="og-root og-session-capability-dialog"
+            style={portalStyle}
+            onEscapeKeyDown={(event) => {
+              if (busy) event.preventDefault();
+            }}
+            onInteractOutside={(event) => {
+              if (busy) event.preventDefault();
+            }}
+            onCloseAutoFocus={(event) => {
+              event.preventDefault();
+              const target = buttonRef.current?.isConnected
+                ? buttonRef.current
+                : sectionRef.current;
+              if (target?.isConnected) target.focus();
+            }}
+          >
+            <div className="og-session-capability-dialog-header">
+              <Mark src={logo} name={name} />
+              <div>
+                <Dialog.Title>{name}</Dialog.Title>
+                <Dialog.Description>
+                  {typeLabel}
+                  {subtitle ? ` · ${subtitle}` : ""}
+                </Dialog.Description>
+              </div>
+              {!busy ? (
+                <Dialog.Close aria-label="Close connection setup">
+                  <XIcon size={18} />
+                </Dialog.Close>
+              ) : null}
+            </div>
+            <div className="og-session-capability-dialog-body">{children}</div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </div>
+  );
+}

package/src/components/session-chrome.tsx

@@ -94,7 +94,6 @@ export type SessionChromeAgentsSignal = {
 };
 
 export type SessionChromeProps = {
-  compact?: boolean;
   /** Authoritative execution status; omitted by older embedding hosts. */
   sessionStatus?: SessionStatus | undefined;
   queue: UseTurnQueueResult;
@@ -432,7 +431,6 @@ function toneClass(tone: SessionChromeSignalTone, selected: boolean): string {
 }
 
 export function SessionChrome({
-  compact = false,
   sessionStatus,
   queue,
   composer,
@@ -451,7 +449,7 @@ export function SessionChrome({
   onActiveChange,
 }: SessionChromeProps) {
   const [activityRequested, setActivityOpen] = useState(
-    Boolean(compact && defaultActive && ["incoming", "agents", "commands"].includes(defaultActive)),
+    Boolean(defaultActive && ["incoming", "agents", "commands"].includes(defaultActive)),
   );
   const reactId = useId();
   const panelId = `og-session-chrome-panel-${reactId}`;
@@ -499,8 +497,7 @@ export function SessionChrome({
   );
   const active = activeControlled !== undefined ? activeControlled : activeUncontrolled;
   const activityOpen =
-    activityRequested ||
-    Boolean(compact && active && ["incoming", "agents", "commands"].includes(active));
+    activityRequested || Boolean(active && ["incoming", "agents", "commands"].includes(active));
   const activityVisibleRef = useRef(activityOpen);
   activityVisibleRef.current = activityOpen;
   // Two independent suppressions, both occupancy-scoped:
@@ -711,12 +708,9 @@ export function SessionChrome({
 
   const signalIds = signals.map((signal) => signal.id).join(",");
   useEffect(() => {
-    if (
-      compact &&
-      !signals.some((signal) => ["incoming", "agents", "commands"].includes(signal.id))
-    )
+    if (!signals.some((signal) => ["incoming", "agents", "commands"].includes(signal.id)))
       setActivityOpen(false);
-  }, [compact, signals]);
+  }, [signals]);
   useEffect(() => {
     if (active && !signalIds.split(",").includes(active)) {
       if (activeControlled === undefined) setActiveUncontrolled(null);
@@ -885,21 +879,9 @@ export function SessionChrome({
           )}
           style={{
             borderRadius: "var(--_og-session-chrome-radius)",
-            background: compact
-              ? "transparent"
-              : open
-                ? "var(--_og-session-chrome-surface-open)"
-                : "var(--_og-session-chrome-surface)",
-            borderColor: compact
-              ? "transparent"
-              : open
-                ? "var(--_og-session-chrome-border-open)"
-                : "var(--_og-session-chrome-border)",
-            boxShadow: compact
-              ? "none"
-              : open
-                ? "var(--og-session-chrome-shadow-open)"
-                : "var(--og-session-chrome-shadow)",
+            background: "transparent",
+            borderColor: "transparent",
+            boxShadow: "none",
             transitionDuration: "var(--og-session-chrome-duration)",
             transitionTimingFunction: "var(--_og-session-chrome-ease)",
           }}
@@ -915,9 +897,9 @@ export function SessionChrome({
           >
             <div
               ref={railRef}
-              className={cn("relative flex items-center", compact ? "flex-nowrap" : "flex-wrap")}
+              className="relative flex flex-nowrap items-center"
               style={{
-                gap: compact ? "10px" : "var(--og-session-chrome-chip-gap)",
+                gap: "10px",
               }}
             >
               <motion.div
@@ -938,9 +920,7 @@ export function SessionChrome({
                 transition={{ duration: shellDuration, ease }}
               />
               {signals
-                .filter(
-                  (signal) => !compact || !["incoming", "agents", "commands"].includes(signal.id),
-                )
+                .filter((signal) => !["incoming", "agents", "commands"].includes(signal.id))
                 .map((signal) => {
                   const selected = active === signal.id;
                   return (
@@ -956,8 +936,8 @@ export function SessionChrome({
                       }
                       className={cn(
                         "group/signal relative z-[1] inline-flex min-w-0 max-w-full items-center rounded-og-md",
-                        compact && "bg-og-surface-2/60 px-0.5",
-                        compact && selected && "bg-og-surface-3",
+                        "bg-og-surface-2/60 px-0.5",
+                        selected && "bg-og-surface-3",
                       )}
                     >
                       <button
@@ -968,7 +948,7 @@ export function SessionChrome({
                         aria-expanded={selected}
                         aria-controls={panelId}
                         aria-label={
-                          compact && signal.id === "goal"
+                          signal.id === "goal"
                             ? `Goal · ${goalState === "pursuing" ? "Running" : signal.label}`
                             : selected
                               ? `Close ${signal.label}`
@@ -976,9 +956,9 @@ export function SessionChrome({
                         }
                         data-testid={`session-chrome-${signal.id}`}
                         data-og-session-chrome-signal={signal.id}
-                        title={signal.title ?? (compact ? signal.label : undefined)}
+                        title={signal.title ?? signal.label}
                         onClick={() => {
-                          if (compact) setActivityOpen(false);
+                          setActivityOpen(false);
                           setActive(selected ? null : signal.id);
                         }}
                         className={cn(
@@ -1007,43 +987,21 @@ export function SessionChrome({
                         <span className={cn("shrink-0", toneClass(signal.tone, selected))}>
                           {signal.icon}
                         </span>
-                        <span
-                          className={cn(
-                            "font-medium text-og-fg",
-                            compact ? "min-w-0 truncate" : "shrink-0",
-                          )}
-                        >
-                          {compact && signal.id === "goal" ? "Goal · " : null}
-                          {compact && signal.id === "goal"
+                        <span className={cn("font-medium text-og-fg", "min-w-0 truncate")}>
+                          {signal.id === "goal" ? "Goal · " : null}
+                          {signal.id === "goal"
                             ? goalState === "pursuing"
                               ? "Running"
                               : signal.label
-                            : compact && signal.id === "queue"
-                              ? `${queuedTurns.length + optimisticQueued.length} queued`
+                            : signal.id === "queue"
+                              ? queue.error || queue.mutationError
+                                ? signal.label
+                                : `${queuedTurns.length + optimisticQueued.length} queued`
                               : signal.label}
                         </span>
-                        {signal.detail && !compact ? (
-                          <>
-                            <span aria-hidden className="shrink-0 text-og-fg-subtle/60">
-                              ·
-                            </span>
-                            <span className="min-w-0 max-w-[8.5rem] truncate text-og-fg sm:max-w-[12rem]">
-                              {signal.detail}
-                            </span>
-                          </>
-                        ) : null}
-                        {selected && !compact ? (
-                          <span
-                            data-testid="session-chrome-close"
-                            className="ml-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-og-sm text-og-fg-subtle transition-colors group-hover:text-og-fg pointer-coarse:size-5"
-                            aria-hidden
-                          >
-                            <XIcon className="size-3" />
-                          </span>
-                        ) : null}
                       </button>
                       {signal.id === "goal" && goal && record && !readOnly ? (
-                        <div className={cn("flex shrink-0 items-center pr-1", compact && "pl-0.5")}>
+                        <div className="flex shrink-0 items-center pr-1 pl-0.5">
                           {record.status === "active" || record.status === "paused" ? (
                             <IconAction
                               label={record.status === "paused" ? "Resume goal" : "Pause goal"}
@@ -1075,7 +1033,7 @@ export function SessionChrome({
                           </IconAction>
                         </div>
                       ) : signal.id === "queue" && canMutateQueue && queuedTurns[0] ? (
-                        <div className={cn("flex shrink-0 items-center pr-1", compact && "pl-0.5")}>
+                        <div className="flex shrink-0 items-center pr-1 pl-0.5">
                           <IconAction
                             label="Steer first queued message"
                             text="Steer"
@@ -1092,11 +1050,11 @@ export function SessionChrome({
                     </div>
                   );
                 })}
-              {compact &&
-              signals.some((signal) => ["incoming", "agents", "commands"].includes(signal.id)) ? (
+              {signals.some((signal) => ["incoming", "agents", "commands"].includes(signal.id)) ? (
                 <button
                   type="button"
                   aria-label="Session activity"
+                  aria-describedby={commandsCount > 0 ? `${panelId}-commands-count` : undefined}
                   title={activityOpen ? "Close activity" : "Inbox, agents and commands"}
                   aria-controls={panelId}
                   aria-expanded={activityOpen}
@@ -1105,9 +1063,11 @@ export function SessionChrome({
                     setActive(
                       activityOpen
                         ? null
-                        : (signals.find((signal) =>
-                            ["incoming", "agents", "commands"].includes(signal.id),
-                          )?.id ?? null),
+                        : commandsCount > 0 && hasCommandsPanel
+                          ? "commands"
+                          : (signals.find((signal) =>
+                              ["incoming", "agents", "commands"].includes(signal.id),
+                            )?.id ?? null),
                     );
                   }}
                   className={cn(
@@ -1119,6 +1079,17 @@ export function SessionChrome({
                 >
                   <ActivityIcon className="size-3.5" />
                   <span className="sr-only">Activity</span>
+                  {commandsCount > 0 ? (
+                    <>
+                      <span
+                        aria-hidden="true"
+                        className="size-1.5 shrink-0 animate-og-pulse rounded-full bg-og-fg-muted motion-reduce:animate-none"
+                      />
+                      <span id={`${panelId}-commands-count`}>
+                        {commandsCount} command{commandsCount === 1 ? "" : "s"}
+                      </span>
+                    </>
+                  ) : null}
                   {incoming.length > 0 ? (
                     <span className="size-1.5 rounded-full bg-og-accent" />
                   ) : null}
@@ -1142,7 +1113,7 @@ export function SessionChrome({
           </div>
 
           <AnimatePresence initial={false}>
-            {compact && activityOpen ? (
+            {activityOpen ? (
               <motion.div
                 key="activity-tabs"
                 initial={{ height: 0, opacity: 0 }}
@@ -1201,11 +1172,9 @@ export function SessionChrome({
               <div
                 className={cn(
                   "relative overflow-y-auto overscroll-contain",
-                  compact
-                    ? activityOpen
-                      ? "rounded-b-og-lg bg-og-surface-2/50"
-                      : "mt-1 rounded-og-lg bg-og-surface-2/50"
-                    : "border-t border-og-border/50",
+                  activityOpen
+                    ? "rounded-b-og-lg bg-og-surface-2/50"
+                    : "mt-1 rounded-og-lg bg-og-surface-2/50",
                 )}
                 style={{
                   maxHeight: "var(--og-session-chrome-panel-max-height)",

package/src/components/session-commands.tsx

@@ -0,0 +1,18 @@
+import {
+  useSessionBackgroundCommands,
+  type UseSessionBackgroundCommandsOptions,
+} from "../hooks/use-session-background-commands";
+import { SessionCommandsPanel } from "./session-commands-panel";
+
+/** Mount in the open activity panel so closed chrome never polls commands. */
+export function SessionCommands({
+  sessionId,
+  readOnly = false,
+  ...options
+}: UseSessionBackgroundCommandsOptions & { sessionId: string; readOnly?: boolean }) {
+  const commands = useSessionBackgroundCommands(sessionId, {
+    pollIntervalMs: 3_000,
+    ...options,
+  });
+  return <SessionCommandsPanel commands={commands} readOnly={readOnly} />;
+}

package/src/components/session-connection-request.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState } from "react";
+import type { AuthNeededItem } from "../timeline/types";
+import { sessionAuthRecommendation } from "../session-auth-recommendation";
+import {
+  SessionMcpCapabilityCard,
+  type SessionMcpCapabilityCardProps,
+} from "./session-mcp-capability-card";
+
+export type SessionConnectionRequestProps = Omit<
+  SessionMcpCapabilityCardProps,
+  "capabilityId" | "name" | "rationale"
+> & {
+  request: AuthNeededItem;
+};
+
+/** Resolve native reauthorization notices with the same exact-identity rules
+ * as the console. Recommendations never supply endpoints or account authority. */
+export function SessionConnectionRequest(props: SessionConnectionRequestProps) {
+  const [client, setClient] = useState(props.client);
+  const [generation, setGeneration] = useState(0);
+  if (client !== props.client) {
+    setClient(props.client);
+    setGeneration(generation + 1);
+  }
+  return (
+    <ScopedRequest
+      key={`${generation}:${props.workspaceId}:${props.sessionId}:${props.request.id}`}
+      {...props}
+    />
+  );
+}
+
+function ScopedRequest({ request, ...props }: SessionConnectionRequestProps) {
+  const [resolved, setResolved] = useState<AuthNeededItem | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [retry, setRetry] = useState(0);
+  const requestRef = useRef(request);
+  requestRef.current = request;
+  useEffect(() => {
+    let current = true;
+    const event = requestRef.current;
+    setResolved(null);
+    setError(null);
+    void props.client
+      .listCapabilities(props.workspaceId)
+      .then((catalog) => {
+        if (!current) return;
+        const recommendation = sessionAuthRecommendation(event, catalog.items);
+        const candidate = catalog.items.find(
+          (entry) => entry.id === recommendation?.capability?.id,
+        );
+        if (!recommendation || candidate?.kind !== "mcp" || candidate.authKind !== "oauth2") {
+          setError(
+            "This request could not be matched to one available OAuth integration. Review its connection settings before continuing.",
+          );
+          return;
+        }
+        setResolved(recommendation);
+      })
+      .catch(() => {
+        if (current)
+          setError("Couldn't load connection details. Retry to check the current integration.");
+      });
+    return () => {
+      current = false;
+    };
+  }, [
+    props.client,
+    props.workspaceId,
+    request.id,
+    request.serverId,
+    request.connectionId,
+    request.authoritySource,
+    request.reason,
+    request.capability?.id,
+    retry,
+  ]);
+  if (!resolved?.capability)
+    return (
+      <div className="og-session-capability-setup">
+        <p role={error ? "alert" : "status"}>{error ?? "Loading connection details…"}</p>
+        {error ? (
+          <button type="button" onClick={() => setRetry((value) => value + 1)}>
+            Retry
+          </button>
+        ) : null}
+      </div>
+    );
+  return (
+    <SessionMcpCapabilityCard
+      {...props}
+      capabilityId={resolved.capability.id}
+      name={resolved.capability.name}
+      rationale={resolved.capability.rationale}
+    />
+  );
+}