@opengeni/react 6.1.0 → 7.0.0-canary.35625901699001

package/src/components/timeline-search.tsx

@@ -0,0 +1,168 @@
+import { createContext, useContext, useLayoutEffect, useRef, type RefObject } from "react";
+import type { TimelineItem } from "../timeline/types";
+import { annotatableText, rangeFromOffsets, visibleClientRect } from "./timeline-annotation-shared";
+
+export type TimelineSearchTarget = {
+  sequence: number;
+  eventId?: string | undefined;
+  /** Literal, case-insensitive text. No regex interpretation. */
+  query: string;
+  /** Zero-based occurrence within the source message. Defaults to zero. */
+  occurrence?: number | undefined;
+  /**
+   * Zero-based UTF-16 offset of the match in the original message text, as
+   * reported by backend all-occurrence search (messageMatchOffset). When set
+   * it takes precedence over `occurrence` and is validated against `query`,
+   * so a stale offset degrades to no highlight rather than a wrong one.
+   */
+  offset?: number | undefined;
+};
+
+/** Scoped to the target's group; disclosure expansion persists after closing find. */
+export const TimelineSearchRevealContext = createContext<string | null>(null);
+export const useTimelineSearchReveal = () => useContext(TimelineSearchRevealContext);
+
+export function isTimelineSearchTarget(item: TimelineItem, target: TimelineSearchTarget): boolean {
+  const sources =
+    item.sourceEvents ??
+    ("annotationSource" in item && item.annotationSource ? [item.annotationSource] : []);
+  return sources.some(
+    (source) =>
+      source.sequence === target.sequence && (!target.eventId || source.eventId === target.eventId),
+  );
+}
+
+/** Scan without allocating an offset array proportional to a huge message. */
+export function literalSearchOffset(text: string, query: string, occurrence = 0): number {
+  if (!query || !Number.isSafeInteger(occurrence) || occurrence < 0) return -1;
+  // Regex escaping preserves UTF-16 offsets even for case folds whose lowercase
+  // string representation changes length (for example dotted capital I).
+  const pattern = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "giu");
+  let match: RegExpExecArray | null;
+  let index = 0;
+  while ((match = pattern.exec(text))) {
+    if (index++ === occurrence) return match.index;
+  }
+  return -1;
+}
+
+/**
+ * Validate a caller-supplied UTF-16 offset against the text and query. The
+ * sticky flag pins the match to exactly `offset`; like literalSearchOffset,
+ * regex escaping keeps offsets in UTF-16 units even for length-changing case
+ * folds. Returns -1 when the offset is stale or the text no longer matches.
+ */
+export function matchAtOffset(text: string, query: string, offset: number): number {
+  if (!query || !Number.isSafeInteger(offset) || offset < 0 || offset > text.length) return -1;
+  const pattern = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "iyu");
+  pattern.lastIndex = offset;
+  // Unicode regex engines may rewind a lastIndex inside a surrogate pair.
+  return pattern.exec(text)?.index === offset ? offset : -1;
+}
+
+/** Resolve a target to a UTF-16 offset: explicit offset wins, else the ordinal scan. */
+export function searchMatchOffset(text: string, target: TimelineSearchTarget): number {
+  if (target.offset != null) return matchAtOffset(text, target.query, target.offset);
+  return literalSearchOffset(text, target.query, target.occurrence);
+}
+
+type HighlightRegistry = { set(name: string, value: unknown): void; delete(name: string): void };
+let nextHighlightId = 0;
+
+/** Range highlighting does not mutate React-owned text or its layout. */
+export function useTimelineSearchNavigation(
+  root: RefObject<HTMLDivElement | null>,
+  itemId: string | undefined,
+  target: TimelineSearchTarget | null | undefined,
+  releasePin: () => void,
+  revision: unknown,
+) {
+  const highlightName = useRef("");
+  if (!highlightName.current) highlightName.current = `og-search-${++nextHighlightId}`;
+  const key = target
+    ? JSON.stringify([
+        itemId,
+        target.sequence,
+        target.eventId,
+        target.query,
+        target.occurrence ?? 0,
+        target.offset ?? null,
+      ])
+    : null;
+  const navigated = useRef<string | null>(null);
+  useLayoutEffect(() => {
+    if (!key) navigated.current = null;
+    if (!key || !target || !itemId || !root.current) return;
+    releasePin();
+    const scroller = root.current;
+    const registry = (
+      globalThis.CSS as (typeof CSS & { highlights?: HighlightRegistry }) | undefined
+    )?.highlights;
+    const HighlightClass = (
+      globalThis as unknown as { Highlight?: new (...ranges: Range[]) => unknown }
+    ).Highlight;
+    const style = document.createElement("style");
+    style.textContent = `::highlight(${highlightName.current}) { background: var(--og-accent, #facc15); color: var(--og-accent-fg, #171717); }`;
+    scroller.append(style);
+    let frame = 0;
+    const update = () => {
+      const source = [...scroller.querySelectorAll<HTMLElement>("[data-og-search-item]")].find(
+        (element) => element.dataset.ogSearchItem === itemId,
+      );
+      if (!source) return;
+      // A virtualized renderer can explicitly identify the selected occurrence
+      // when earlier occurrences are not mounted. Never accept a stale marker
+      // belonging to a different sequence, occurrence, or query.
+      const materialized = [
+        ...source.querySelectorAll<HTMLElement>("[data-og-search-occurrence]"),
+      ].find(
+        (element) =>
+          element.dataset.ogSearchSequence === String(target.sequence) &&
+          element.dataset.ogSearchQuery === target.query &&
+          (target.offset != null
+            ? element.dataset.ogSearchOffset === String(target.offset)
+            : element.dataset.ogSearchOccurrence === String(target.occurrence ?? 0)),
+      );
+      const { text, spans } = annotatableText(materialized ?? source);
+      // Inside a materialized chunk the match starts at the chunk start.
+      // Raw source offsets must NEVER be interpreted as rendered DOM offsets:
+      // even matching characters can identify a different repeated occurrence.
+      const offset = materialized
+        ? matchAtOffset(text, target.query, 0)
+        : target.offset != null
+          ? -1
+          : searchMatchOffset(text, target);
+      const range =
+        offset < 0 ? null : rangeFromOffsets(spans, offset, offset + target.query.length);
+      if (range && registry && HighlightClass)
+        registry.set(highlightName.current, new HighlightClass(range));
+      else registry?.delete(highlightName.current);
+      const rect = range ? visibleClientRect(range) : null;
+      // A custom renderer may mount the message body later (or materialize a
+      // virtualized chunk in response to renderMessageText's search context).
+      // Finding its empty shell is not proof that the occurrence was revealed.
+      if (navigated.current === key || !range || !rect) return;
+      const box = rect;
+      if (!box.height && !box.width) return;
+      scroller.scrollTop +=
+        box.top - scroller.getBoundingClientRect().top - scroller.clientHeight / 2;
+      navigated.current = key;
+    };
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(update);
+    };
+    const observer = new MutationObserver(schedule);
+    observer.observe(scroller, { childList: true, subtree: true, characterData: true });
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    resize?.observe(scroller);
+    schedule();
+    return () => {
+      observer.disconnect();
+      resize?.disconnect();
+      cancelAnimationFrame(frame);
+      registry?.delete(highlightName.current);
+      style.remove();
+    };
+  }, [key, root, itemId, target, releasePin, revision]);
+}

package/src/components/user-message-body.tsx

@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../lib/cn";
+import { useTimelineSearchReveal } from "./timeline-search";
 
 const FALLBACK_LINE_THRESHOLD = 12;
 const FALLBACK_TEXT_THRESHOLD = 900;
@@ -268,6 +269,12 @@ export function UserMessageBody({
   const [expanded, setExpanded] = useState(
     () => disclosure?.expandedByMessageId.get(messageId) ?? false,
   );
+  const searchReveal = useTimelineSearchReveal();
+  useLayoutEffect(() => {
+    if (!searchReveal) return;
+    setExpanded(true);
+    disclosure?.expandedByMessageId.set(messageId, true);
+  }, [searchReveal, messageId, disclosure]);
   const collapsibleRef = useRef(userMessageLikelyNeedsDisclosure(text));
   const expandedRef = useRef(expanded);
   expandedRef.current = expanded;

package/src/connect-account-identity.tsx

@@ -0,0 +1,34 @@
+import type { ConnectAccount } from "@opengeni/connect";
+import type { CapabilityCatalogItem, OpenGeniClient } from "@opengeni/sdk";
+import { ConnectionServiceLogo } from "./connection-service-logo";
+import {
+  accountServiceCapability,
+  connectionServicePresentation,
+} from "./connection-service-presentation";
+
+/** Service presentation never changes which exact credential is acted on. */
+export function ConnectAccountIdentity({
+  account,
+  client,
+  capabilities,
+}: {
+  account: ConnectAccount;
+  client?: OpenGeniClient | undefined;
+  capabilities: CapabilityCatalogItem[];
+}) {
+  const item = accountServiceCapability(account, capabilities);
+  const service = connectionServicePresentation({ id: account.providerId, label: account.label });
+  const name = item?.name ?? service.name;
+  return (
+    <>
+      <ConnectionServiceLogo client={client} item={item} name={name} fallback={service.logo} />
+      <div>
+        <strong>{name}</strong>
+        <small>
+          {account.ownership === "personal" ? "Only you" : "Workspace connection"}
+          {name !== account.label ? ` · ${account.label}` : ""}
+        </small>
+      </div>
+    </>
+  );
+}

package/src/connect-accounts.tsx

@@ -1,12 +1,19 @@
 import { useEffect, useRef, useState } from "react";
 import type { ConnectAccount, ConnectController } from "@opengeni/connect";
-import { useConnect } from "./connect";
+import { useConnect } from "./hooks/use-connect";
+import { ConnectAccountIdentity } from "./connect-account-identity";
+import { ConnectionSkeleton } from "./connection-skeleton";
+import type { CapabilityCatalogItem, OpenGeniClient } from "@opengeni/sdk";
 
 export type ConnectAccountsProps = {
   controller: ConnectController;
   className?: string;
   /** Enables explicit account-bound reconnect. Host supplies the exact destination. */
   returnUrl?: string;
+  /** Uses authenticated catalogue assets and exact connection references for service identity. */
+  client?: OpenGeniClient | undefined;
+  /** Reconcile surrounding service state after a confirmed account disconnect. */
+  onDisconnected?: (() => void) | undefined;
 };
 
 /** Local credential revocation only. Unknown or changed versions must be
@@ -21,33 +28,50 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   return <ScopedAccounts key={generation} {...props} />;
 }
 
-function ScopedAccounts({ controller, className, returnUrl }: ConnectAccountsProps) {
+function ScopedAccounts({
+  controller,
+  className,
+  returnUrl,
+  client,
+  onDisconnected,
+}: ConnectAccountsProps) {
   const view = useConnect(controller);
   const [accounts, setAccounts] = useState<ConnectAccount[] | null>(null);
   const [selected, setSelected] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState(false);
   const [reload, setReload] = useState(0);
+  const [catalog, setCatalog] = useState<{
+    client: OpenGeniClient;
+    items: CapabilityCatalogItem[];
+  } | null>(null);
   const mutation = useRef<AbortController | null>(null);
   useEffect(() => () => mutation.current?.abort(), []);
   useEffect(() => {
     const abort = new AbortController();
     setAccounts(null);
+    setCatalog(null);
     setSelected(null);
     setError(false);
     void Promise.resolve()
       .then(() => {
         abort.signal.throwIfAborted();
-        return controller.transport.accounts(controller.workspaceId, { signal: abort.signal });
+        return Promise.all([
+          controller.transport.accounts(controller.workspaceId, { signal: abort.signal }),
+          client?.listCapabilities(controller.workspaceId).catch(() => null) ?? null,
+        ]);
       })
-      .then((result) => {
-        if (!abort.signal.aborted) setAccounts(structuredClone(result));
+      .then(([result, metadata]) => {
+        if (!abort.signal.aborted) {
+          setAccounts(structuredClone(result.filter((account) => account.status !== "disabled")));
+          if (client && metadata) setCatalog({ client, items: metadata.items });
+        }
       })
       .catch(() => {
         if (!abort.signal.aborted) setError(true);
       });
     return () => abort.abort();
-  }, [controller, reload]);
+  }, [client, controller, reload]);
 
   const disconnect = async (account: ConnectAccount) => {
     const expectedVersion = account.version;
@@ -68,7 +92,10 @@ function ScopedAccounts({ controller, className, returnUrl }: ConnectAccountsPro
         expectedVersion,
         signal: abort.signal,
       });
-      if (!abort.signal.aborted) setReload((value) => value + 1);
+      if (!abort.signal.aborted) {
+        setReload((value) => value + 1);
+        onDisconnected?.();
+      }
     } catch {
       if (!abort.signal.aborted) {
         // Outcome may be unknown. Drop the inventory so a second click cannot
@@ -106,64 +133,99 @@ function ScopedAccounts({ controller, className, returnUrl }: ConnectAccountsPro
       aria-label="Connected accounts"
       aria-busy={busy || view.busy || (!accounts && !error)}
     >
+      <h3>Your connections</h3>
       {error && (
         <p role="alert">Account state could not be confirmed. Reload before trying again.</p>
       )}
-      {!accounts && !error && <p role="status">Loading accounts…</p>}
+      {!accounts && !error && <ConnectionSkeleton label="Loading accounts" />}
       {accounts?.length === 0 && <p role="status">No connected accounts.</p>}
       {accounts && accounts.length > 0 && (
         <ul>
           {accounts.map((account) => (
-            <li key={`${account.providerId}:${account.id}`}>
-              <span>
-                {account.label} — {account.providerId} — {account.ownership} —{" "}
-                {account.status.replaceAll("_", " ")}
-              </span>
-              {returnUrl && (
-                <button
-                  type="button"
-                  disabled={busy || view.busy || account.status === "disabled"}
-                  onClick={() => void reconnect(account)}
-                >
-                  Reconnect {account.label}
-                </button>
-              )}
-              {selected === `${account.providerId}:${account.id}` ? (
-                <div role="group" aria-label={`Disconnect ${account.label}`}>
-                  <p>
-                    This removes local OpenGeni access. It does not revoke consent at the provider.
-                  </p>
-                  <button
-                    type="button"
-                    disabled={busy || view.busy}
-                    onClick={() => void disconnect(account)}
+            <li className="og-connect-account" key={`${account.providerId}:${account.id}`}>
+              <details className="og-connect-account-details">
+                <summary className="og-connect-account-heading">
+                  <ConnectAccountIdentity
+                    account={account}
+                    client={client}
+                    capabilities={catalog?.client === client ? (catalog?.items ?? []) : []}
+                  />
+                  <span className="og-connect-account-status" data-status={account.status}>
+                    {account.status === "connected"
+                      ? "✓ Connected"
+                      : account.status === "auth_needed"
+                        ? "Reconnect needed"
+                        : "Disconnected"}
+                  </span>
+                  <svg
+                    className="og-connect-account-chevron"
+                    aria-hidden="true"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
                   >
-                    Confirm disconnect
-                  </button>
-                  <button type="button" disabled={busy} onClick={() => setSelected(null)}>
-                    Keep account
-                  </button>
+                    <path d="m9 6 6 6-6 6" />
+                  </svg>
+                </summary>
+                <div className="og-connect-account-actions">
+                  {returnUrl && account.status === "auth_needed" && (
+                    <button
+                      type="button"
+                      aria-label={`Reconnect ${account.label}`}
+                      disabled={busy || view.busy}
+                      onClick={() => void reconnect(account)}
+                    >
+                      Reconnect
+                    </button>
+                  )}
+                  {selected === `${account.providerId}:${account.id}` ? (
+                    <div role="group" aria-label={`Disconnect ${account.label}`}>
+                      <p>
+                        This removes local OpenGeni access. It does not revoke consent at the
+                        provider.
+                      </p>
+                      <button
+                        type="button"
+                        disabled={busy || view.busy}
+                        onClick={() => void disconnect(account)}
+                      >
+                        Confirm disconnect
+                      </button>
+                      <button type="button" disabled={busy} onClick={() => setSelected(null)}>
+                        Keep account
+                      </button>
+                    </div>
+                  ) : (
+                    <button
+                      type="button"
+                      aria-label={`Disconnect ${account.label}`}
+                      disabled={
+                        busy ||
+                        view.busy ||
+                        account.status === "disabled" ||
+                        !Number.isSafeInteger(account.version) ||
+                        account.version! < 1
+                      }
+                      onClick={() => setSelected(`${account.providerId}:${account.id}`)}
+                    >
+                      Disconnect
+                    </button>
+                  )}
                 </div>
-              ) : (
-                <button
-                  type="button"
-                  disabled={
-                    busy ||
-                    view.busy ||
-                    account.status === "disabled" ||
-                    !Number.isSafeInteger(account.version) ||
-                    account.version! < 1
-                  }
-                  onClick={() => setSelected(`${account.providerId}:${account.id}`)}
-                >
-                  Disconnect {account.label}
-                </button>
-              )}
+              </details>
             </li>
           ))}
         </ul>
       )}
-      <button type="button" disabled={busy} onClick={() => setReload((value) => value + 1)}>
+      <button
+        hidden={!error}
+        type="button"
+        disabled={busy}
+        onClick={() => setReload((value) => value + 1)}
+      >
         Reload accounts
       </button>
     </section>