@opengeni/react 1.4.2 → 1.4.5-canary.37458084490001

package/src/timeline/turn-summary.tsx

@@ -19,15 +19,26 @@ import { useTimelineSearchReveal } from "../components/timeline-search";
 import { useEntranceAnimation } from "./entrance";
 import { useFoldMemory, type FoldRestingState } from "./fold-memory";
 import {
-  applyPatchOpsFromToolItem,
-  isApplyPatch,
-  mediaPreviewFact,
-  retainedScreenshotMetadata,
-  screenshotDataUrl,
-} from "./parsers";
-import { rawTypeOf } from "./registry";
-import { mcpToolLeaf } from "./tool-display-name";
-import type { ActivityItem, ToolCallItem, TurnOutcome } from "./types";
+  BUILT_IN_TURN_SUMMARY_FACET_IDS,
+  createTurnSummaryContext,
+  formatElapsed,
+  resolveTurnSummaryFacets,
+  selectTurnSummaryFacets,
+  type TurnSummaryFacetConfiguration,
+  type TurnSummaryStatus,
+} from "./turn-summary-model";
+import type { ActivityItem, TurnOutcome } from "./types";
+
+export { BUILT_IN_TURN_SUMMARY_FACET_IDS, formatElapsed };
+export type {
+  BuiltInTurnSummaryFacetId,
+  TurnSummaryContext,
+  TurnSummaryFacet,
+  TurnSummaryFacetConfiguration,
+  TurnSummaryFacetResult,
+  TurnSummaryOptions,
+  TurnSummaryStatus,
+} from "./turn-summary-model";
 export type { TurnOutcome } from "./types";
 
 /* ----------------------------------------------------------------------------
@@ -55,95 +66,6 @@ export function useTurnSettleOpen(): boolean {
   return useContext(TurnSettleChromeContext);
 }
 
-export const BUILT_IN_TURN_SUMMARY_FACET_IDS = [
-  "steps",
-  "files",
-  "commands",
-  "screenshots",
-  "memories",
-  "compacted",
-  "duration",
-] as const;
-
-export type BuiltInTurnSummaryFacetId = (typeof BUILT_IN_TURN_SUMMARY_FACET_IDS)[number];
-
-export type TurnSummaryContext = Readonly<{
-  /** Every normalized activity item folded into this summary. */
-  items: readonly ActivityItem[];
-  /** Tool calls from `items`, retained in timeline order for convenient aggregation. */
-  toolCalls: readonly ToolCallItem[];
-  /** The settled turn verdict, or absent for a neutral/incomplete cluster. */
-  outcome: TurnOutcome | undefined;
-  /** The bounded failure reason rendered by the enclosing summary, when present. */
-  failureText: string | undefined;
-  /** Total turn duration when the enclosing group has both valid timestamps. */
-  durationMs: number | undefined;
-  /** False when any projected activity is still running or streaming. */
-  settled: boolean;
-  /**
-   * Adjacent compaction landmarks next to this fold. Landmark remains the
-   * primary UI; this is a secondary chip signal only.
-   */
-  contextCompactionCount: number;
-}>;
-
-export type TurnSummaryFacetResult = Readonly<{
-  icon?: ReactNode;
-  content: ReactNode;
-  ariaLabel?: string;
-  title?: string;
-}>;
-
-export type TurnSummaryFacet = Readonly<{
-  /** Stable identity used for removal and deterministic de-duplication. */
-  id: string;
-  /** Return null when this facet has nothing useful to show. */
-  summarize(context: TurnSummaryContext): TurnSummaryFacetResult | null;
-}>;
-
-type ModifyTurnSummaryFacets = Readonly<{
-  /** Appended after the remaining built-ins, in supplied order. */
-  add?: readonly TurnSummaryFacet[];
-  /** Built-ins to omit before custom facets are appended. */
-  remove?: readonly BuiltInTurnSummaryFacetId[];
-  replace?: never;
-}>;
-
-type ReplaceTurnSummaryFacets = Readonly<{
-  /** The complete ordered facet list. Mutually exclusive with add/remove. */
-  replace: readonly TurnSummaryFacet[];
-  add?: never;
-  remove?: never;
-}>;
-
-export type TurnSummaryFacetConfiguration = ModifyTurnSummaryFacets | ReplaceTurnSummaryFacets;
-
-export type TurnSummaryOptions = Readonly<{
-  /**
-   * Readable per-turn presentation. Assistant progress stays fully formatted;
-   * each turn has its own Working / Worked row and rolling latest step.
-   * Ordinary tip-follow and manual scrolling are unchanged.
-   */
-  rolling?: boolean;
-  facets?: TurnSummaryFacetConfiguration;
-}>;
-
-/**
- * Exchange status shown in place of the plain facet line. `working` and
- * `waiting` run a live clock from `since`; `worked` shows the settled span.
- */
-export type TurnSummaryStatus = Readonly<{
-  kind: "working" | "waiting" | "worked";
-  /** Replaces the default "Working" / "Waiting" wording. */
-  label?: string | undefined;
-  /** Live clock start for `working` and `waiting`. */
-  since?: string | undefined;
-  /** Settled span for `worked`. */
-  durationMs?: number | undefined;
-  /** Live step preview under the row while it is collapsed. */
-  preview?: ReactNode;
-}>;
-
 export type TurnSummaryProps = {
   /** Reports the disclosure's actual open state on mount and on every change. */
   onOpenStateChange?: ((open: boolean) => void) | undefined;
@@ -430,32 +352,7 @@ export function TurnSummary({
   );
   const statusKind = status?.kind;
   const facets = useMemo(
-    () =>
-      facetDefinitions.flatMap((facet) => {
-        // The status line owns elapsed time; a live line keeps only the step
-        // count (plus host facets) so it stays one short line.
-        if (
-          statusKind &&
-          (facet.id === "duration" ||
-            (facet === BUILT_IN_TURN_SUMMARY_FACETS[0] &&
-              context.items.every(
-                (item) => item.kind === "startup-phase" || item.kind === "agent-message",
-              )) ||
-            (statusKind !== "worked" &&
-              facet.id !== "steps" &&
-              BUILT_IN_TURN_SUMMARY_FACET_IDS.includes(facet.id as BuiltInTurnSummaryFacetId)))
-        ) {
-          return [];
-        }
-        try {
-          const result = facet.summarize(context);
-          return result && hasFacetContent(result.content) ? [{ facet, result }] : [];
-        } catch {
-          // A host extension is presentation-only. It must never take down the
-          // durable timeline or hide the remaining built-in evidence.
-          return [];
-        }
-      }),
+    () => selectTurnSummaryFacets(facetDefinitions, context, statusKind),
     [context, facetDefinitions, statusKind],
   );
 
@@ -672,191 +569,6 @@ function LiveElapsed({ since }: { since: string }) {
   );
 }
 
-/** Elapsed wall time with seconds below an hour: "14s", "2m 14s", "1h 05m". */
-export function formatElapsed(durationMs: number): string {
-  const totalSeconds = Math.max(0, Math.floor(durationMs / 1000));
-  if (totalSeconds < 60) {
-    return `${totalSeconds}s`;
-  }
-  const totalMinutes = Math.floor(totalSeconds / 60);
-  if (totalMinutes < 60) {
-    const seconds = totalSeconds % 60;
-    return seconds ? `${totalMinutes}m ${seconds}s` : `${totalMinutes}m`;
-  }
-  const hours = Math.floor(totalMinutes / 60);
-  return `${hours}h ${String(totalMinutes % 60).padStart(2, "0")}m`;
-}
-
-function createTurnSummaryContext(
-  items: ActivityItem[],
-  outcome: TurnOutcome | undefined,
-  failureText: string | undefined,
-  durationMs: number | undefined,
-  contextCompactionCount: number,
-): TurnSummaryContext {
-  const itemSnapshot = Object.freeze([...items]);
-  const toolCalls = Object.freeze(
-    itemSnapshot.filter((item): item is ToolCallItem => item.kind === "tool-call"),
-  );
-  const settled = itemSnapshot.every((item) => {
-    if (item.kind === "reasoning" || item.kind === "agent-message") {
-      return !item.streaming;
-    }
-    if (
-      item.kind === "tool-call" ||
-      item.kind === "worker" ||
-      item.kind === "sandbox" ||
-      item.kind === "startup-phase"
-    ) {
-      return item.status !== "running";
-    }
-    return true;
-  });
-  return Object.freeze({
-    items: itemSnapshot,
-    toolCalls,
-    outcome,
-    failureText,
-    durationMs,
-    settled,
-    contextCompactionCount: Math.max(0, Math.floor(contextCompactionCount)),
-  });
-}
-
-const BUILT_IN_TURN_SUMMARY_FACETS: readonly TurnSummaryFacet[] = Object.freeze([
-  {
-    id: "steps",
-    summarize: ({ items }) => {
-      // Progress notes narrate steps; they are not steps themselves.
-      const count = items.filter(
-        (item) => item.kind !== "startup-phase" && item.kind !== "agent-message",
-      ).length;
-      return count
-        ? { content: `${count} ${count === 1 ? "step" : "steps"}` }
-        : items.some((item) => item.kind === "startup-phase")
-          ? { content: "Preparation" }
-          : null;
-    },
-  },
-  {
-    id: "files",
-    summarize: ({ toolCalls }) => {
-      let files = 0;
-      for (const item of toolCalls) {
-        if (isApplyPatch(item)) {
-          files += applyPatchOpsFromToolItem(item).length;
-        }
-      }
-      return files ? { content: `${files} ${files === 1 ? "file" : "files"} edited` } : null;
-    },
-  },
-  {
-    id: "commands",
-    summarize: ({ toolCalls }) => {
-      const commands = toolCalls.filter((item) => item.name === "exec_command").length;
-      return commands
-        ? { content: `${commands} ${commands === 1 ? "command" : "commands"}` }
-        : null;
-    },
-  },
-  {
-    id: "screenshots",
-    summarize: ({ toolCalls }) => {
-      let screenshots = 0;
-      for (const item of toolCalls) {
-        const leaf = mcpToolLeaf(item.name);
-        if (
-          (rawTypeOf(item) === "computer_call" ||
-            item.name === "computer_call" ||
-            item.name === "computer_screenshot" ||
-            leaf === "browser_screenshot" ||
-            leaf === "browser_observe" ||
-            leaf === "browser_act") &&
-          (retainedScreenshotMetadata(item.output) !== null ||
-            screenshotDataUrl(item.output) !== null ||
-            mediaPreviewFact(item.output) !== null)
-        ) {
-          screenshots += 1;
-        }
-      }
-      return screenshots
-        ? {
-            content: `${screenshots} ${screenshots === 1 ? "screenshot" : "screenshots"}`,
-          }
-        : null;
-    },
-  },
-  {
-    id: "memories",
-    summarize: ({ items }) => {
-      let saved = 0;
-      let updated = 0;
-      for (const item of items) {
-        if (item.kind !== "memory") {
-          continue;
-        }
-        if (item.variant === "corrected") {
-          updated += 1;
-        } else {
-          saved += 1;
-        }
-      }
-      const parts: string[] = [];
-      if (saved) {
-        parts.push(`${saved} ${saved === 1 ? "memory" : "memories"} saved`);
-      }
-      if (updated) {
-        parts.push(`${updated} ${updated === 1 ? "memory" : "memories"} updated`);
-      }
-      return parts.length > 0 ? { content: parts.join(" · ") } : null;
-    },
-  },
-  {
-    id: "compacted",
-    summarize: ({ contextCompactionCount }) =>
-      contextCompactionCount > 0
-        ? {
-            content:
-              contextCompactionCount === 1 ? "compacted" : `${contextCompactionCount} compacts`,
-            ariaLabel:
-              contextCompactionCount === 1
-                ? "Conversation history compacted"
-                : `${contextCompactionCount} conversation history compactions`,
-          }
-        : null,
-  },
-  {
-    id: "duration",
-    summarize: ({ durationMs }) => {
-      const duration = formatDurationFacet(durationMs);
-      return duration ? { content: duration } : null;
-    },
-  },
-]);
-
-function resolveTurnSummaryFacets(
-  configuration: TurnSummaryFacetConfiguration | undefined,
-): readonly TurnSummaryFacet[] {
-  const requested: readonly TurnSummaryFacet[] = configuration?.replace ?? [
-    ...BUILT_IN_TURN_SUMMARY_FACETS.filter(
-      (facet) => !configuration?.remove?.includes(facet.id as BuiltInTurnSummaryFacetId),
-    ),
-    ...(configuration?.add ?? []),
-  ];
-  const seen = new Set<string>();
-  return requested.filter((facet) => {
-    if (!facet.id || seen.has(facet.id)) {
-      return false;
-    }
-    seen.add(facet.id);
-    return true;
-  });
-}
-
-function hasFacetContent(content: ReactNode): boolean {
-  return content !== null && content !== undefined && content !== false && content !== "";
-}
-
 class FacetRenderBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
   state = { failed: false };
 
@@ -868,20 +580,3 @@ class FacetRenderBoundary extends Component<{ children: ReactNode }, { failed: b
     return this.state.failed ? null : this.props.children;
   }
 }
-
-function formatDurationFacet(durationMs: number | undefined): string | null {
-  if (durationMs === undefined || !Number.isFinite(durationMs) || durationMs < 1000) {
-    return null;
-  }
-  const totalSeconds = Math.floor(durationMs / 1000);
-  if (totalSeconds < 60) {
-    return `${totalSeconds}s`;
-  }
-  const totalMinutes = Math.floor(totalSeconds / 60);
-  if (totalMinutes < 60) {
-    return `${totalMinutes}m`;
-  }
-  const hours = Math.floor(totalMinutes / 60);
-  const minutes = totalMinutes % 60;
-  return `${hours}h ${String(minutes).padStart(2, "0")}m`;
-}

package/src/timeline/work-presentation.ts

@@ -0,0 +1,139 @@
+// Pure presentation decisions for a timeline turn's work, shared by the web and native
+// timelines. Every function here is extracted verbatim from the web MessageTimeline so both
+// renderers decide identically what a turn shows (preparing, working, waiting, worked).
+import { timelineGroupContainsPresentedImage } from "./presented-image";
+import type { TurnSummaryStatus } from "./turn-summary-model";
+import type { ActivityItem, TimelineGroup, ToolCallItem } from "./types";
+
+export type ActivityGroup = Extract<TimelineGroup, { kind: "activity" }>;
+export type TurnGroup = Extract<TimelineGroup, { kind: "turn" }>;
+
+export function durationBetween(startedAt: string, endedAt: string): number | undefined {
+  const started = Date.parse(startedAt);
+  const ended = Date.parse(endedAt);
+  if (!Number.isFinite(started) || !Number.isFinite(ended) || ended < started) {
+    return undefined;
+  }
+  return ended - started;
+}
+
+/** Compaction landmarks among a fold's groups (secondary summary facet). */
+export function compactedLandmarkCount(groups: readonly TimelineGroup[]): number {
+  return groups.filter(
+    (group) =>
+      group.kind === "item" &&
+      group.item.kind === "context-compaction" &&
+      group.item.phase === "compacted",
+  ).length;
+}
+
+export function clusterIsSettled(group: ActivityGroup): boolean {
+  return group.items.every((item) => {
+    if (item.kind === "reasoning" || item.kind === "agent-message") {
+      return !item.streaming;
+    }
+    // Memory writes and fleet observations are discrete, already-settled events.
+    if (item.kind === "memory" || item.kind === "fleet-decision") {
+      return true;
+    }
+    return item.status !== "running";
+  });
+}
+
+export function flattenActivityItems(groups: readonly TimelineGroup[]): ActivityItem[] {
+  const items: ActivityItem[] = [];
+  for (const group of groups) {
+    if (group.kind === "activity") {
+      items.push(...flattenActivityItems(group.work?.details ?? []), ...group.items);
+    } else if (group.kind === "turn") {
+      items.push(...flattenActivityItems(group.groups));
+    }
+  }
+  return items;
+}
+
+export type ReadableWorkOptions = {
+  /** Host shows startup phases as ordinary details (web: startup-details context). */
+  startupDetails: boolean;
+  /** Startup chrome was dismissed by the reader. */
+  startupDismissed: boolean;
+};
+
+/**
+ * A readable turn whose only work so far is environment preparation renders as one quiet
+ * preparation surface instead of a "Working" fold.
+ */
+export function isPreparingWork(group: ActivityGroup, options: ReadableWorkOptions): boolean {
+  if (!group.work) return false;
+  const phases = group.items.filter((item) => item.kind === "startup-phase");
+  return (
+    !options.startupDetails &&
+    !options.startupDismissed &&
+    !group.work.endedAt &&
+    !group.work.waiting &&
+    phases.length > 0 &&
+    group.items.every(
+      (item) => item.kind === "startup-phase" || (item.kind === "reasoning" && !item.text.trim()),
+    ) &&
+    !phases.some((item) => item.status === "failed" || item.status === "cancelled")
+  );
+}
+
+/** Status of a readable turn's work row, minus the host-rendered live preview. */
+export function readableWorkStatus(
+  group: ActivityGroup & { work: NonNullable<ActivityGroup["work"]> },
+): Omit<TurnSummaryStatus, "preview"> {
+  const end = group.work.endedAt;
+  return end
+    ? { kind: "worked", durationMs: durationBetween(group.work.startedAt, end) }
+    : group.work.waiting
+      ? { kind: "waiting", ...group.work.waiting }
+      : { kind: "working", since: group.work.startedAt };
+}
+
+/** Whether a readable turn's work fold starts expanded. */
+export function readableWorkDefaultOpen(group: ActivityGroup): true | undefined {
+  const phases = group.items.filter((item) => item.kind === "startup-phase");
+  return timelineGroupContainsPresentedImage(group) ||
+    group.outcome === "failed" ||
+    phases.some((item) => item.status === "failed" || item.status === "cancelled")
+    ? true
+    : undefined;
+}
+
+/** Whether the live preview should show (images stay primary output instead). */
+export function readableWorkShowsPreview(group: ActivityGroup): boolean {
+  return !timelineGroupContainsPresentedImage(group);
+}
+
+/**
+ * The step a rolling preview shows: steps advance with event order (progress notes and
+ * startup phases have their own surfaces). Mirrors the web RollingActivity selection.
+ */
+export function rollingActivityItem(
+  items: readonly ActivityItem[],
+  previousItem?: ActivityItem,
+  mounted = true,
+): { item: ActivityItem; running: boolean; earlierCount: number } | null {
+  const work = items.filter(
+    (item) => item.kind !== "startup-phase" && item.kind !== "agent-message",
+  );
+  const active = work.filter((item) =>
+    item.kind === "reasoning" ? item.streaming : "status" in item && item.status === "running",
+  );
+  const item =
+    !mounted && previousItem && previousItem.kind !== "agent-message" ? previousItem : work.at(-1);
+  if (!item) return null;
+  return {
+    item,
+    running: active.some((entry) => entry.id === item.id),
+    earlierCount: Math.max(
+      0,
+      work.findIndex((entry) => entry.id === item.id),
+    ),
+  };
+}
+
+export function isToolCall(item: ActivityItem): item is ToolCallItem {
+  return item.kind === "tool-call";
+}

package/src/timeline-model.ts

@@ -0,0 +1,108 @@
+// @opengeni/react/timeline-model: the pure presentation model behind the web timeline,
+// shared with non-DOM renderers (React Native). No DOM, no CSS, no styled components:
+// renderers that consume it make the same decisions the web MessageTimeline makes.
+export {
+  BUILT_IN_TURN_SUMMARY_FACET_IDS,
+  BUILT_IN_TURN_SUMMARY_FACETS,
+  createTurnSummaryContext,
+  formatDurationFacet,
+  formatElapsed,
+  resolveTurnSummaryFacets,
+} from "./timeline/turn-summary-model";
+export type {
+  BuiltInTurnSummaryFacetId,
+  TurnSummaryContext,
+  TurnSummaryFacet,
+  TurnSummaryFacetConfiguration,
+  TurnSummaryFacetResult,
+  TurnSummaryOptions,
+  TurnSummaryStatus,
+} from "./timeline/turn-summary-model";
+export {
+  clusterIsSettled,
+  compactedLandmarkCount,
+  durationBetween,
+  flattenActivityItems,
+  isPreparingWork,
+  readableWorkDefaultOpen,
+  readableWorkShowsPreview,
+  readableWorkStatus,
+  rollingActivityItem,
+} from "./timeline/work-presentation";
+export type { ActivityGroup, ReadableWorkOptions, TurnGroup } from "./timeline/work-presentation";
+export { timelineGroupContainsPresentedImage } from "./timeline/presented-image";
+export { mcpToolLeaf, toolDisplayName } from "./timeline/tool-display-name";
+export { rawTypeOf } from "./timeline/registry";
+export {
+  applyPatchOpsFromToolItem,
+  isApplyPatch,
+  parseToolArgs,
+  sandboxCommandExitCode,
+  stripExecBanner,
+  tailPeek,
+  unwrapMcpOutput,
+} from "./timeline/parsers";
+export { formatClockTime } from "./lib/format";
+export {
+  applyPatchPresentation,
+  askPresentation,
+  execPresentation,
+  genericToolIconKind,
+  genericToolPresentation,
+  pathBasename,
+  pathDirname,
+  presentedToolKind,
+  runOnPresentation,
+  toolRowPresentation,
+  truncatePreview,
+  webSearchPresentation,
+  withComputePreview,
+  writeStdinPresentation,
+} from "./timeline/tool-presentation";
+export type {
+  PresentedToolKind,
+  ToolBody,
+  ToolChip,
+  ToolIconKind,
+  ToolIconTone,
+  ToolPatchFile,
+  ToolPresentationContext,
+  ToolPreview,
+  ToolRowPresentation,
+  WebSearchResult,
+} from "./timeline/tool-presentation";
+
+export {
+  sandboxRowTitle,
+  startupDuration,
+  startupPhaseTitle,
+  STARTUP_WAIT_TITLES,
+  workerRowTitle,
+} from "./timeline/platform-activity-presentation";
+export { formatBytes, stringifyPayload, tryParseJson } from "./lib/format";
+export { selectTurnSummaryFacets } from "./timeline/turn-summary-model";
+export { GENIE_PREPARING_PHRASES, GENIE_WAITING_PHRASES } from "./timeline/genie-copy";
+export {
+  answersFromDrafts,
+  defaultHumanInputFormMessages,
+  emptyDraft,
+  formatDeadline,
+  humanInputHeading,
+  initialDrafts,
+} from "./human-input-model";
+export type { HumanInputAnswerDraft, HumanInputFormMessages } from "./human-input-model";
+export { isActionableHumanInputRequest } from "./human-input";
+export { SESSION_STATUS_BADGE, SESSION_STATUS_PRESENTATION } from "./session-status-model";
+export type { SessionStatusTone } from "./session-status-model";
+export { formatRelativeTime } from "./lib/format";
+export {
+  noticeDisplayText,
+  noticeIsResolvedApproval,
+  noticeTone,
+} from "./timeline/notice-presentation";
+export {
+  QUESTION_NAV_HIDDEN_PX,
+  QUESTION_NAV_MARGIN_PX,
+  questionNavTarget,
+} from "./timeline/question-nav-model";
+export type { QuestionNavPrompt } from "./timeline/question-nav-model";

package/styles/compiled.css

@@ -2369,6 +2369,9 @@
 :where(.og-root).max-w-\[min\(18rem\,calc\(100vw-1\.5rem\)\)\],:where(.og-root) .max-w-\[min\(18rem\,calc\(100vw-1\.5rem\)\)\] {
     max-width: min(18rem, calc(100vw - 1.5rem));
   }
+:where(.og-root).max-w-\[min\(24rem\,60vw\)\],:where(.og-root) .max-w-\[min\(24rem\,60vw\)\] {
+    max-width: min(24rem, 60vw);
+  }
 :where(.og-root).max-w-full,:where(.og-root) .max-w-full {
     max-width: 100%;
   }
@@ -6305,6 +6308,11 @@
       margin-inline: calc(19px * -1);
     }
   }
+:where(.og-root).pointer-coarse\:flex,:where(.og-root) .pointer-coarse\:flex {
+    @media (pointer: coarse) {
+      display: flex;
+    }
+  }
 :where(.og-root).pointer-coarse\:size-6,:where(.og-root) .pointer-coarse\:size-6 {
     @media (pointer: coarse) {
       width: calc(var(--spacing) * 6);

package/styles/connect.css

@@ -278,6 +278,10 @@
 .og-connect-setup .og-connect-setup-primary:hover:not(:disabled) { background:var(--og-color-primary-hover); }
 .og-connect-setup .og-connect-setup-secondary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
 .og-connect-setup .og-connect-setup-secondary button { border:0; min-height:36px; padding:6px 8px; color:var(--og-color-fg-muted,inherit); font-size:12px; }
+.og-connect-setup .og-connect-setup-pending { display:grid; gap:10px; padding:14px 16px; border:1px solid var(--og-color-border,#888); border-radius:10px; background:var(--og-color-surface-1,transparent); color:var(--og-color-fg-muted,inherit); font-size:13px; line-height:1.55; }
+.og-connect-setup .og-connect-setup-pending p { margin:0; }
+.og-connect-setup .og-connect-setup-pending ol { margin:0; padding-left:20px; display:grid; gap:6px; }
+.og-connect-setup .og-connect-setup-hint { margin:0; color:var(--og-color-fg-muted,inherit); font-size:12px; line-height:1.55; }
 
 .og-catalog-more, .og-skill-discovery .og-catalog-more { margin-top:12px; min-height:36px; padding:8px 12px; border:1px solid var(--og-color-border,#888); border-radius:8px; background:var(--og-color-surface-1,transparent); color:inherit; font:inherit; font-size:13px; cursor:pointer; }
 .og-catalog-more:focus-visible { outline:2px solid var(--og-color-accent,currentColor); outline-offset:2px; }