@opengeni/react 0.42.1 → 0.44.2

package/src/components/session-chrome.tsx

@@ -11,7 +11,7 @@
  * | --- | --- |
  * | `--og-session-chrome-surface` / `-open` | Dock fill (collapsed / expanded) |
  * | `--og-session-chrome-border` / `-open` | Dock edge |
- * | `--og-session-chrome-highlight` | Sliding chip selection pill |
+ * | `--og-session-chrome-highlight` / `-ring` | Sliding chip selection fill + edge |
  * | `--og-session-chrome-shadow` / `-open` | Elevation |
  * | `--og-session-chrome-radius` | Dock corner radius |
  * | `--og-session-chrome-chip-min-height` | Signal chip height |
@@ -394,7 +394,7 @@ export function SessionChrome({
   const chipRefs = useRef<Partial<Record<SessionChromeSignalId, HTMLButtonElement | null>>>({});
   const railRef = useRef<HTMLDivElement | null>(null);
   const panelBodyRef = useRef<HTMLDivElement | null>(null);
-  const [pill, setPill] = useState({ left: 0, width: 0, opacity: 0 });
+  const [pill, setPill] = useState({ left: 0, top: 0, width: 0, height: 0, opacity: 0 });
   const [panelHeight, setPanelHeight] = useState(0);
 
   const signalIds = signals.map((signal) => signal.id).join(",");
@@ -421,11 +421,15 @@ export function SessionChrome({
       }
       const chip = chipRefs.current[active];
       if (!chip) return;
+      // Measure against the chip's own box so a wrapped multi-row rail never
+      // stretches the highlight into a tall stripe across every signal.
       const railBox = rail.getBoundingClientRect();
       const chipBox = chip.getBoundingClientRect();
       setPill({
         left: chipBox.left - railBox.left,
+        top: chipBox.top - railBox.top,
         width: chipBox.width,
+        height: chipBox.height,
         opacity: 1,
       });
     };
@@ -433,6 +437,9 @@ export function SessionChrome({
     if (!rail) return;
     const observer = new ResizeObserver(measure);
     observer.observe(rail);
+    for (const chip of Object.values(chipRefs.current)) {
+      if (chip) observer.observe(chip);
+    }
     window.addEventListener("resize", measure);
     return () => {
       observer.disconnect();
@@ -568,88 +575,92 @@ export function SessionChrome({
           }}
         >
           <div
-            ref={railRef}
-            className="relative flex flex-wrap items-stretch"
+            className="relative"
             style={{
-              gap: "var(--og-session-chrome-chip-gap)",
-              padding: "var(--og-session-chrome-rail-pad)",
+              paddingTop: "var(--og-session-chrome-rail-pad)",
+              paddingBottom: "var(--og-session-chrome-rail-pad)",
+              paddingLeft: "var(--og-session-chrome-rail-pad)",
+              paddingRight: "var(--og-session-chrome-rail-pad)",
             }}
           >
-            <motion.div
-              aria-hidden
-              className="pointer-events-none absolute rounded-og-md ring-1 ring-og-border/50"
+            <div
+              ref={railRef}
+              className="relative flex flex-wrap items-center"
               style={{
-                top: "var(--og-session-chrome-rail-pad)",
-                bottom: "var(--og-session-chrome-rail-pad)",
-                background: "var(--og-session-chrome-highlight)",
+                gap: "var(--og-session-chrome-chip-gap)",
               }}
-              initial={false}
-              animate={{
-                x: pill.left,
-                width: pill.width,
-                opacity: pill.opacity,
-              }}
-              transition={{ duration: shellDuration, ease }}
-            />
-            {signals.map((signal) => {
-              const selected = active === signal.id;
-              return (
-                <button
-                  key={signal.id}
-                  type="button"
-                  ref={(node) => {
-                    chipRefs.current[signal.id] = node;
-                  }}
-                  aria-expanded={selected}
-                  aria-controls={panelId}
-                  data-testid={`session-chrome-${signal.id}`}
-                  data-og-session-chrome-signal={signal.id}
-                  onClick={() => setActive(selected ? null : signal.id)}
-                  className={cn(
-                    "group relative z-[1] inline-flex min-h-[var(--og-session-chrome-chip-min-height)] max-w-full items-center gap-1 rounded-og-md text-left text-og-xs outline-none",
-                    "transition-colors duration-150 motion-reduce:transition-none",
-                    "hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40",
-                    "pointer-coarse:min-h-11",
-                    selected ? "text-og-fg" : "text-og-fg-muted",
-                  )}
-                  style={{
-                    paddingInline: "var(--og-session-chrome-chip-pad-x)",
-                  }}
-                >
-                  <span className={cn("shrink-0", toneClass(signal.tone, selected))}>
-                    {signal.icon}
-                  </span>
-                  <span className="shrink-0 font-medium text-og-fg">{signal.label}</span>
-                  {signal.detail ? (
-                    <>
-                      <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}
+            >
+              <motion.div
+                aria-hidden
+                className="pointer-events-none absolute left-0 top-0 rounded-og-md"
+                style={{
+                  background: "var(--og-session-chrome-highlight)",
+                  boxShadow: "inset 0 0 0 1px var(--og-session-chrome-highlight-ring)",
+                }}
+                initial={false}
+                animate={{
+                  x: pill.left,
+                  y: pill.top,
+                  width: pill.width,
+                  height: pill.height,
+                  opacity: pill.opacity,
+                }}
+                transition={{ duration: shellDuration, ease }}
+              />
+              {signals.map((signal) => {
+                const selected = active === signal.id;
+                return (
+                  <button
+                    key={signal.id}
+                    type="button"
+                    ref={(node) => {
+                      chipRefs.current[signal.id] = node;
+                    }}
+                    aria-expanded={selected}
+                    aria-controls={panelId}
+                    aria-label={selected ? `Close ${signal.label}` : undefined}
+                    data-testid={`session-chrome-${signal.id}`}
+                    data-og-session-chrome-signal={signal.id}
+                    onClick={() => setActive(selected ? null : signal.id)}
+                    className={cn(
+                      "group relative z-[1] inline-flex min-h-[var(--og-session-chrome-chip-min-height)] max-w-full items-center gap-1 rounded-og-md py-1 text-left text-og-xs outline-none",
+                      // Coarse pointers keep a 44px target (session-pins acceptance).
+                      "pointer-coarse:min-h-11",
+                      "transition-colors duration-150 motion-reduce:transition-none",
+                      "hover:text-og-fg focus-visible:bg-og-surface-3/50",
+                      selected ? "text-og-fg" : "text-og-fg-muted",
+                    )}
+                    style={{
+                      paddingInline: "var(--og-session-chrome-chip-pad-x)",
+                    }}
+                  >
+                    <span className={cn("shrink-0", toneClass(signal.tone, selected))}>
+                      {signal.icon}
+                    </span>
+                    <span className="shrink-0 font-medium text-og-fg">{signal.label}</span>
+                    {signal.detail ? (
+                      <>
+                        <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 ? (
+                      <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>
-              );
-            })}
-            <AnimatePresence initial={false}>
-              {open ? (
-                <motion.button
-                  key="close"
-                  type="button"
-                  aria-label="Close session chrome panel"
-                  onClick={() => setActive(null)}
-                  initial={reduceMotion ? false : { opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={reduceMotion ? { opacity: 1 } : { opacity: 0 }}
-                  transition={{ duration: crossfadeDuration, ease }}
-                  className="relative z-[1] ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-og-md text-og-fg-subtle outline-none transition-colors hover:bg-og-surface-3/60 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 pointer-coarse:size-11"
-                >
-                  <XIcon className="size-3" />
-                </motion.button>
-              ) : null}
-            </AnimatePresence>
+                    ) : null}
+                  </button>
+                );
+              })}
+            </div>
           </div>
 
           <motion.div

package/src/hooks/use-composer.ts

@@ -585,6 +585,22 @@ export function useComposer(
     }
     void loadDraft(false);
   }, [durableDrafts, loadDraft, sessionId]);
+  // After long background / sleep the in-memory revision is often stale while
+  // a prior autosave already advanced the server. Soft-reload on wake so the
+  // next keystroke does not OCC against a dead revision.
+  useEffect(() => {
+    if (!sessionId || !durableDrafts) return;
+    const onWake = () => {
+      if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
+      void loadDraft(false);
+    };
+    document.addEventListener("visibilitychange", onWake);
+    window.addEventListener("pageshow", onWake);
+    return () => {
+      document.removeEventListener("visibilitychange", onWake);
+      window.removeEventListener("pageshow", onWake);
+    };
+  }, [durableDrafts, loadDraft, sessionId]);
   useEffect(() => {
     if (!sessionId || !durableDrafts) return;
     return registerSessionReconciler(sessionId, "composer", async () => await loadDraft(false));
@@ -692,7 +708,16 @@ export function useComposer(
         }
         setDraftSaving(true);
         try {
-          const saved = await client.saveComposerDraft(workspaceId, sessionId, request);
+          const saved = await saveComposerDraftWithStaleRetry({
+            client,
+            workspaceId,
+            sessionId,
+            request,
+            onAdoptRemote: (remote) => {
+              draftRef.current = remote;
+              setDraft(remote);
+            },
+          });
           if (
             targetKeyRef.current !== ownedTargetKey ||
             targetGeneration.current !== ownedGeneration
@@ -701,8 +726,12 @@ export function useComposer(
           }
           draftRef.current = saved;
           setDraft(saved);
-          lastSavedSignature.current = signature;
+          lastSavedSignature.current = draftSignature({
+            ...request,
+            expectedRevision: saved.revision,
+          });
           setDraftConflict(null);
+          setError(null);
           success = true;
         } catch (cause) {
           if (
@@ -1260,11 +1289,13 @@ export function useComposer(
       }
       if (choice === "use_remote") {
         applyDraft(remote);
+        setError(null);
         return;
       }
       draftRef.current = remote;
       setDraft(remote);
       setDraftConflict(null);
+      setError(null);
       const payload = currentDraftPayload();
       if (payload) await persistPayload({ ...payload, expectedRevision: remote.revision });
     },
@@ -1393,13 +1424,52 @@ function asError(cause: unknown): Error {
 
 function isDraftConflictError(error: Error): boolean {
   const apiError = error as Partial<OpenGeniApiError>;
-  return (
-    apiError.status === 409 &&
-    apiError.outcomeUnknown === false &&
-    (apiError.code === undefined ||
-      apiError.code === "conflict" ||
-      apiError.code === "idempotency_conflict")
-  );
+  if (apiError.status !== 409 || apiError.outcomeUnknown === true) return false;
+  // Production queue OCC returns `DRAFT_CHANGED`. Older/SDK-shaped 409s may
+  // omit code or use the generic conflict labels — all are recoverable OCC.
+  const code = apiError.code;
+  if (
+    code === undefined ||
+    code === "DRAFT_CHANGED" ||
+    code === "conflict" ||
+    code === "idempotency_conflict"
+  ) {
+    return true;
+  }
+  return /draft changed/i.test(error.message);
+}
+
+/**
+ * One OCC retry: adopt the server revision and rewrite the same local content.
+ * Covers the common "tab slept through a successful autosave" case without
+ * stranding the operator on a raw 409 toast.
+ */
+async function saveComposerDraftWithStaleRetry(input: {
+  client: {
+    getComposerDraft: (workspaceId: string, sessionId: string) => Promise<ComposerDraft>;
+    saveComposerDraft: (
+      workspaceId: string,
+      sessionId: string,
+      request: SaveComposerDraftRequest,
+    ) => Promise<ComposerDraft>;
+  };
+  workspaceId: string;
+  sessionId: string;
+  request: SaveComposerDraftRequest;
+  onAdoptRemote: (remote: ComposerDraft) => void;
+}): Promise<ComposerDraft> {
+  try {
+    return await input.client.saveComposerDraft(input.workspaceId, input.sessionId, input.request);
+  } catch (cause) {
+    const problem = asError(cause);
+    if (!isDraftConflictError(problem)) throw problem;
+    const remote = await input.client.getComposerDraft(input.workspaceId, input.sessionId);
+    input.onAdoptRemote(remote);
+    return await input.client.saveComposerDraft(input.workspaceId, input.sessionId, {
+      ...input.request,
+      expectedRevision: remote.revision,
+    });
+  }
 }
 
 function draftPayload(draft: ComposerDraft): SaveComposerDraftRequest {

package/src/index.ts

@@ -367,12 +367,14 @@ export type {
 // Pure provider-shape parsers (exec banner, V4A diff, secret redaction, …)
 export {
   applyPatchOps,
+  applyPatchOpsFromToolItem,
   controlCaret,
   execTruncated,
   isApplyPatch,
   isExecSessionLostBanner,
   looksBinary,
   parseExecBannerSessionId,
+  parseFreeformApplyPatch,
   parseToolArgs,
   redactSecrets,
   sandboxCommandExitCode,

package/src/model-policy.ts

@@ -5,6 +5,8 @@ export type PickerBillingClass = "opengeni_credits" | "codex_subscription" | "by
 export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogModel> = {
   id: string;
   label: string;
+  /** Catalog-curated compact label for dense UI; fall back to `label` when absent. */
+  shortLabel?: string | undefined;
   billingClass: PickerBillingClass;
   billingClassLabel: string;
   selectable: boolean;
@@ -171,6 +173,7 @@ export function projectPickerRows(models: WorkspaceModelCatalogModel[]): PickerM
       return {
         id: catalog.id,
         label: catalog.label,
+        ...(catalog.shortLabel ? { shortLabel: catalog.shortLabel } : {}),
         billingClass,
         billingClassLabel: billingClassLabel(billingClass),
         selectable: catalog.availability.selectable,
@@ -191,6 +194,7 @@ export function projectClientModelRows(models: ClientModel[]): PickerModelRow<Cl
     return {
       id: catalog.id,
       label: catalog.label,
+      ...(catalog.shortLabel ? { shortLabel: catalog.shortLabel } : {}),
       billingClass,
       billingClassLabel: billingClassLabel(billingClass),
       selectable: true,