@adecore/agents-react 0.24.1 → 0.24.2

package/dist/chat/ui/EditDiff.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense, useMemo } from 'react';
+import { useMemo } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy.js';
 import { diffSourceBudget, legacyDiffBudget } from './diff/diff-source-budget.js';
@@ -17,7 +18,7 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }) {
     const legacyMode = !allowEditor || loadEngine === undefined;
     const legacyAllowed = useMemo(() => legacyMode && legacyDiffBudget(change.before, change.after), [legacyMode, change.before, change.after]);
     const omitted = _jsx(DiffOmitted, { path: change.path });
-    const fallback = legacyAllowed ? (_jsx(DiffFallbackBoundary, { fallback: omitted, resetKeys: [change.path, change.before, change.after], children: _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(LegacyEditDiff, { change: change, maxHeight: maxHeight }) }) })) : (omitted);
+    const fallback = legacyAllowed ? (_jsx(DiffFallbackBoundary, { fallback: omitted, resetKeys: [change.path, change.before, change.after], children: _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(LegacyEditDiff, { change: change, maxHeight: maxHeight }) }) })) : (omitted);
     if (!sourceAllowed) {
         return omitted;
     }
@@ -25,5 +26,5 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }) {
         return fallback;
     }
     const unavailable = _jsx(DiffUnavailable, { path: change.path });
-    return (_jsx(DiffFallbackBoundary, { fallback: unavailable, resetKeys: [change.path, change.before, change.after, loadEngine], children: _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(EditorEditDiff, { change: change, loadEngine: loadEngine, fallback: unavailable, maxHeight: maxHeight, sourceChecked: true }) }) }));
+    return (_jsx(DiffFallbackBoundary, { fallback: unavailable, resetKeys: [change.path, change.before, change.after, loadEngine], children: _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(EditorEditDiff, { change: change, loadEngine: loadEngine, fallback: unavailable, maxHeight: maxHeight, sourceChecked: true }) }) }));
 }

package/dist/chat/ui/UnifiedDiff.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense, useMemo } from 'react';
+import { useMemo } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy.js';
 import { diffSourceBudget, legacyDiffBudget, patchSourceBudget } from './diff/diff-source-budget.js';
@@ -23,7 +24,7 @@ export default function UnifiedDiff(props) {
     const legacyAllowed = useMemo(() => legacyMode && legacyDiffBudget(oldText, newText, change.diff), [legacyMode, oldText, newText, change.diff]);
     const rawAllowed = useMemo(() => hasHunks || legacyDiffBudget('', '', change.diff), [hasHunks, change.diff]);
     const omitted = _jsx(DiffOmitted, { path: change.path });
-    const fallback = legacyAllowed ? (_jsx(DiffFallbackBoundary, { fallback: omitted, resetKeys: [change.path, change.diff, oldText, newText, diffStyle], children: _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(LegacyUnifiedDiff, { ...props }) }) })) : (omitted);
+    const fallback = legacyAllowed ? (_jsx(DiffFallbackBoundary, { fallback: omitted, resetKeys: [change.path, change.diff, oldText, newText, diffStyle], children: _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(LegacyUnifiedDiff, { ...props }) }) })) : (omitted);
     if (!sourceAllowed) {
         return omitted;
     }
@@ -34,5 +35,5 @@ export default function UnifiedDiff(props) {
         return fallback;
     }
     const unavailable = _jsx(DiffUnavailable, { path: change.path });
-    return (_jsx(DiffFallbackBoundary, { fallback: unavailable, resetKeys: [change.path, change.diff, oldText, newText, ignoreWhitespace, diffStyle, loadEngine], children: _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(EditorPatchDiff, { change: change, sourceChecked: true, contents: contents, ignoreWhitespace: ignoreWhitespace, wrap: overflow === 'wrap', fill: fill, maxHeight: maxHeight, layout: diffStyle, loadEngine: loadEngine, fallback: unavailable }) }) }));
+    return (_jsx(DiffFallbackBoundary, { fallback: unavailable, resetKeys: [change.path, change.diff, oldText, newText, ignoreWhitespace, diffStyle, loadEngine], children: _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(EditorPatchDiff, { change: change, sourceChecked: true, contents: contents, ignoreWhitespace: ignoreWhitespace, wrap: overflow === 'wrap', fill: fill, maxHeight: maxHeight, layout: diffStyle, loadEngine: loadEngine, fallback: unavailable }) }) }));
 }

package/dist/chat/ui/diff/ReviewDiff.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../../lazy.js';
 const EditDiff = lazyNamed(() => import('../EditDiff.js'), 'default');
 const UnifiedDiff = lazyNamed(() => import('../UnifiedDiff.js'), 'default');
 export function ReviewDiff({ entry, maxHeight = 480 }) {
     const { t } = useTranslation('agent-chat');
-    return (_jsx("div", { "data-review-entry": entry.key, children: _jsx(Suspense, { fallback: _jsx("p", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: entry.change.kind === 'edit' ? (_jsx(EditDiff, { change: entry.change.edit, maxHeight: maxHeight })) : (_jsx(UnifiedDiff, { change: entry.change.patch, contents: entry.change.contents, maxHeight: maxHeight })) }) }));
+    return (_jsx("div", { "data-review-entry": entry.key, children: _jsx(LazyBoundary, { fallback: _jsx("p", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: entry.change.kind === 'edit' ? (_jsx(EditDiff, { change: entry.change.edit, maxHeight: maxHeight })) : (_jsx(UnifiedDiff, { change: entry.change.patch, contents: entry.change.contents, maxHeight: maxHeight })) }) }));
 }

package/dist/chat/ui/rows/WorkRows.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, Suspense, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import i18next from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,7 @@ import { useChatScope } from '../../../scope.js';
 import { useCurrentItem } from '../../../state/chats.js';
 import { useTimelineFlash } from '../../timeline-flash.js';
 import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
-import { Icon, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
+import { Icon, LazyBoundary, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
 import { ROW_GUTTER, toolIcon } from '../icons.js';
 import { AnsiOutput } from '../AnsiOutput.js';
 import { RowTime } from '../RowTime.js';
@@ -48,7 +48,7 @@ export function ToggleLine({ icon, label, detail, command, path, open = false, o
 /* The diff renderers load lazily, so a diff waits on them under a line that says so. */
 function DiffSuspense({ children }) {
     const { t } = useTranslation('agent-chat');
-    return _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: children });
+    return _jsx(LazyBoundary, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: children });
 }
 /* A file in a changed files card, which opens its diff under it. */
 function ChangedFileLine({ path, open, onToggle, trailing, children }) {

package/dist/lazy.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy } from 'react';
+import { LoadedComponent } from '@adecore/ui';
 const loaders = [];
 let register = null;
 const openErrorListeners = new Set();
@@ -29,12 +30,9 @@ export function onLazyOpenError(listener) {
  * module the prefetcher already fetched.
  */
 export function lazyNamed(load, name, options) {
-    let loaded = null;
-    const open = async () => {
-        const component = (await load())[name];
-        loaded ??= component;
-        return component;
-    };
+    // Through `LoadedComponent`, so a `LazyBoundary` around it draws the moment the module lands.
+    const loaded = new LoadedComponent(async () => (await load())[name]);
+    const open = () => loaded.load();
     if (options?.prefetch !== false) {
         loaders.push(open);
         register?.(open);
@@ -52,7 +50,7 @@ export function lazyNamed(load, name, options) {
         }
     });
     const LazyNamed = (props) => {
-        const Component = loaded ?? Lazy;
+        const Component = loaded.current ?? Lazy;
         return _jsx(Component, { ...props });
     };
     return LazyNamed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.24.1",
+  "version": "0.24.2",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.24.1",
-    "@adecore/editor": "0.24.1",
-    "@adecore/editor-react": "0.24.1",
-    "@adecore/intelligent-ui": "0.24.1",
-    "@adecore/merge": "0.24.1",
+    "@adecore/agent-contracts": "0.24.2",
+    "@adecore/editor": "0.24.2",
+    "@adecore/editor-react": "0.24.2",
+    "@adecore/intelligent-ui": "0.24.2",
+    "@adecore/merge": "0.24.2",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -93,14 +93,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.24.1",
+    "@adecore/ui": "^0.24.2",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.24.1",
+    "@adecore/ui": "0.24.2",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/ui/EditDiff.tsx

@@ -1,4 +1,5 @@
-import { Suspense, useMemo } from 'react';
+import { useMemo } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy';
 import { diffSourceBudget, legacyDiffBudget } from './diff/diff-source-budget';
@@ -22,9 +23,9 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }: { ch
     const omitted = <DiffOmitted path={change.path} />;
     const fallback = legacyAllowed ? (
         <DiffFallbackBoundary fallback={omitted} resetKeys={[change.path, change.before, change.after]}>
-            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+            <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
                 <LegacyEditDiff change={change} maxHeight={maxHeight} />
-            </Suspense>
+            </LazyBoundary>
         </DiffFallbackBoundary>
     ) : (
         omitted
@@ -38,9 +39,9 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }: { ch
     const unavailable = <DiffUnavailable path={change.path} />;
     return (
         <DiffFallbackBoundary fallback={unavailable} resetKeys={[change.path, change.before, change.after, loadEngine]}>
-            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+            <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
                 <EditorEditDiff change={change} loadEngine={loadEngine!} fallback={unavailable} maxHeight={maxHeight} sourceChecked />
-            </Suspense>
+            </LazyBoundary>
         </DiffFallbackBoundary>
     );
 }

package/src/chat/ui/UnifiedDiff.tsx

@@ -1,4 +1,5 @@
-import { Suspense, useMemo } from 'react';
+import { useMemo } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy';
 import { diffSourceBudget, legacyDiffBudget, patchSourceBudget } from './diff/diff-source-budget';
@@ -27,9 +28,9 @@ export default function UnifiedDiff(props: UnifiedDiffProps) {
     const omitted = <DiffOmitted path={change.path} />;
     const fallback = legacyAllowed ? (
         <DiffFallbackBoundary fallback={omitted} resetKeys={[change.path, change.diff, oldText, newText, diffStyle]}>
-            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+            <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
                 <LegacyUnifiedDiff {...props} />
-            </Suspense>
+            </LazyBoundary>
         </DiffFallbackBoundary>
     ) : (
         omitted
@@ -46,7 +47,7 @@ export default function UnifiedDiff(props: UnifiedDiffProps) {
     const unavailable = <DiffUnavailable path={change.path} />;
     return (
         <DiffFallbackBoundary fallback={unavailable} resetKeys={[change.path, change.diff, oldText, newText, ignoreWhitespace, diffStyle, loadEngine]}>
-            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+            <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
                 <EditorPatchDiff
                     change={change}
                     sourceChecked
@@ -59,7 +60,7 @@ export default function UnifiedDiff(props: UnifiedDiffProps) {
                     loadEngine={loadEngine!}
                     fallback={unavailable}
                 />
-            </Suspense>
+            </LazyBoundary>
         </DiffFallbackBoundary>
     );
 }

package/src/chat/ui/diff/ReviewDiff.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../../lazy';
 import type { ReviewEntry } from './review-plan';
@@ -10,13 +10,13 @@ export function ReviewDiff({ entry, maxHeight = 480 }: { entry: ReviewEntry; max
     const { t } = useTranslation('agent-chat');
     return (
         <div data-review-entry={entry.key}>
-            <Suspense fallback={<p className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</p>}>
+            <LazyBoundary fallback={<p className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</p>}>
                 {entry.change.kind === 'edit' ? (
                     <EditDiff change={entry.change.edit} maxHeight={maxHeight} />
                 ) : (
                     <UnifiedDiff change={entry.change.patch} contents={entry.change.contents} maxHeight={maxHeight} />
                 )}
-            </Suspense>
+            </LazyBoundary>
         </div>
     );
 }

package/src/chat/ui/rows/WorkRows.tsx

@@ -1,4 +1,4 @@
-import { Fragment, Suspense, useEffect, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import { Fragment, useEffect, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
 import clsx from 'clsx';
 import i18next from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -28,7 +28,7 @@ import { useChatScope } from '../../../scope';
 import { useCurrentItem } from '../../../state/chats';
 import { useTimelineFlash } from '../../timeline-flash';
 import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
-import { Icon, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
+import { Icon, LazyBoundary, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
 import { ROW_GUTTER, toolIcon } from '../icons';
 import { AnsiOutput } from '../AnsiOutput';
 import { RowTime } from '../RowTime';
@@ -122,7 +122,7 @@ export function ToggleLine({
 /* The diff renderers load lazily, so a diff waits on them under a line that says so. */
 function DiffSuspense({ children }: { children: ReactNode }) {
     const { t } = useTranslation('agent-chat');
-    return <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>{children}</Suspense>;
+    return <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>{children}</LazyBoundary>;
 }
 
 /* A file in a changed files card, which opens its diff under it. */

package/src/lazy.tsx

@@ -1,4 +1,5 @@
 import { lazy, type ComponentProps, type ComponentType } from 'react';
+import { LoadedComponent } from '@adecore/ui';
 
 type Loader = () => Promise<unknown>;
 
@@ -38,12 +39,9 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
     name: Name,
     options?: { readonly prefetch?: boolean }
 ): ComponentType<ComponentProps<Module[Name]>> {
-    let loaded: ComponentType<any> | null = null;
-    const open = async (): Promise<ComponentType<any>> => {
-        const component = (await load())[name];
-        loaded ??= component;
-        return component;
-    };
+    // Through `LoadedComponent`, so a `LazyBoundary` around it draws the moment the module lands.
+    const loaded = new LoadedComponent<ComponentType<any>>(async () => (await load())[name]);
+    const open = (): Promise<ComponentType<any>> => loaded.load();
     if (options?.prefetch !== false) {
         loaders.push(open);
         register?.(open);
@@ -60,7 +58,7 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
         }
     });
     const LazyNamed = (props: ComponentProps<Module[Name]>) => {
-        const Component: ComponentType<any> = loaded ?? Lazy;
+        const Component: ComponentType<any> = loaded.current ?? Lazy;
         return <Component {...props} />;
     };
     return LazyNamed;