@adecore/agents-react 0.25.5 → 0.25.7

package/dist/chat/ui/intelligent-ui/UiReply.js

@@ -340,7 +340,7 @@ function UiBlockBody({ block, context, answered, frozen, unrecorded }) {
     const unknown = block.catalogVersion !== UI_CATALOG_VERSION;
     const failed = !unknown && !block.nodes.length && block.diagnostics.length > 0;
     const shownAsText = unknown ? t('blocks.unreadable') : failed ? block.diagnostics[0].message : undefined;
-    return (_jsxs("div", { ref: setElement, className: "relative", "data-ui-block": block.id, "data-ui-revision": block.revision, tabIndex: -1, children: [flashing && _jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flash.nonce), _jsx(UiBlockFrame, { live: queries.live, nodes: evaluation.nodes, phase: context.phase, fixes: [...block.diagnostics, ...evaluation.diagnostics], shownAsText: shownAsText, answered: answered, children: unknown || failed ? (_jsx(ReplyMarkdown, { text: block.fallback, streaming: false })) : (_jsx(CitationContext, { value: citations, children: _jsx(UiNodes, { nodes: evaluation.nodes, parent: BLOCK, texts: texts, context: rendering }) })) })] }));
+    return (_jsxs("div", { ref: setElement, className: "relative", "data-ui-block": block.id, "data-ui-revision": block.revision, tabIndex: -1, children: [flashing && _jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flash.nonce), _jsx(UiBlockFrame, { live: queries.live, nodes: evaluation.nodes, phase: context.phase, fixes: [...block.diagnostics, ...evaluation.diagnostics].filter((diagnostic) => diagnostic.severity !== 'warning'), shownAsText: shownAsText, answered: answered, children: unknown || failed ? (_jsx(ReplyMarkdown, { text: block.fallback, streaming: false })) : (_jsx(CitationContext, { value: citations, children: _jsx(UiNodes, { nodes: evaluation.nodes, parent: BLOCK, texts: texts, context: rendering }) })) })] }));
 }
 /* Prose and cards a block gap apart, as the rows of a turn are; text that is only the newline between two fences draws nothing. */
 export function UiReply({ text, blocks, context, answers, queries, reply }) {

package/dist/chat/ui/intelligent-ui/renderers/inputs.js

@@ -76,7 +76,7 @@ export function TextFieldRenderer({ node, children, context }) {
     const value = binding?.value ?? node.props.value;
     const countId = `${id}-count`;
     const counting = value.length >= maxLength * COUNT_FROM;
-    return (_jsxs("div", { className: clsx('flex flex-col gap-1 px-2', !node.complete && PENDING), children: [_jsx("label", { htmlFor: id, className: "text-sm text-text-muted", children: children }), _jsx(Input, { id: id, value: value, size: "sm", maxLength: maxLength, placeholder: placeholder, disabled: binding === null, "aria-describedby": counting ? countId : undefined, className: "max-w-96", onChange: (event) => binding?.onValueChange(event.target.value) }), counting && (_jsx("span", { id: countId, className: "text-xs text-text-faint tabular-nums", children: t('blocks.textField.count', { used: formatNumber(value.length), max: formatNumber(maxLength) }) }))] }));
+    return (_jsxs("div", { className: clsx('flex flex-col gap-1 px-2', !node.complete && PENDING), children: [_jsx("label", { htmlFor: id, className: "text-sm text-text-muted", children: children }), _jsx(Input, { id: id, value: value, size: "sm", maxLength: maxLength, placeholder: placeholder, disabled: binding === null, "aria-describedby": counting ? countId : undefined, className: "max-w-96 bg-surface-sunken", onChange: (event) => binding?.onValueChange(event.target.value) }), counting && (_jsx("span", { id: countId, className: "text-xs text-text-muted tabular-nums", children: t('blocks.textField.count', { used: formatNumber(value.length), max: formatNumber(maxLength) }) }))] }));
 }
 /*
  * Left aligned, never the full width. Like Segmented, each Option is an item by its place, since a value may be any scalar.

package/dist/chat/ui/intelligent-ui/renderers/map-style.d.ts

@@ -13,6 +13,18 @@ export declare const MAP_MAX_ZOOM: {
     readonly tiles: 16;
     readonly outline: 6;
 };
+export declare const MAP_FIT_PADDING = 32;
+export declare function mapFitOptions(outline: boolean): {
+    padding: number;
+    maxZoom: number;
+};
+export declare const MAP_MARKER_SIZE = 20;
+export interface ScreenPoint {
+    id: string;
+    x: number;
+    y: number;
+}
+export declare function spreadOverlaps(points: readonly ScreenPoint[]): Map<string, [number, number]>;
 export declare function baseMapStyle({ land, water }: MapColors): MapStyle;
 export declare function localizedTextField(original: unknown, field: string): unknown;
 export declare function boundsOf(points: readonly MapPoint[]): LngLatBoundsLike | null;

package/dist/chat/ui/intelligent-ui/renderers/map-style.js

@@ -1,6 +1,50 @@
 import { BASE_LAND_JSON } from './base-land.js';
 /* How far a map zooms to fit its points: street level with tiles, and only a country or two on the outline, which has nothing finer. */
 export const MAP_MAX_ZOOM = { tiles: 16, outline: 6 };
+/* The room around the places in a fitted view, in pixels. */
+export const MAP_FIT_PADDING = 32;
+/* What fits every place in view: the first view and the way back to it share it, so they cannot drift apart. */
+export function mapFitOptions(outline) {
+    return { padding: MAP_FIT_PADDING, maxZoom: outline ? MAP_MAX_ZOOM.outline : MAP_MAX_ZOOM.tiles };
+}
+/* The width of a marker, in pixels. */
+export const MAP_MARKER_SIZE = 20;
+// Whole pixels to try around a place, nearest ring first: right, below, left, above, then the corners.
+const SPREAD_STEPS = [
+    [20, 0],
+    [0, 20],
+    [-20, 0],
+    [0, -20],
+    [15, 15],
+    [-15, 15],
+    [-15, -15],
+    [15, -15],
+    [40, 0],
+    [0, 40],
+    [-40, 0],
+    [0, -40],
+    [30, 30],
+    [-30, 30],
+    [-30, -30],
+    [30, -30]
+];
+/*
+ * Offsets, in pixels, that keep markers from covering each other. A marker that fits where it is stays; one
+ * that lands on an earlier marker moves to the nearest free spot beside it. The places are not moved on the
+ * map, only their markers, and the offsets are worked out again at every zoom, so a map zoomed in far
+ * enough draws them where they are.
+ */
+export function spreadOverlaps(points) {
+    const offsets = new Map();
+    const placed = [];
+    for (const point of points) {
+        const free = ([dx, dy]) => placed.every((other) => Math.hypot(other.x - (point.x + dx), other.y - (point.y + dy)) >= MAP_MARKER_SIZE);
+        const step = [[0, 0], ...SPREAD_STEPS].find(free) ?? [0, 0];
+        offsets.set(point.id, [step[0], step[1]]);
+        placed.push({ x: point.x + step[0], y: point.y + step[1] });
+    }
+    return offsets;
+}
 /* The map a page draws without tiles: land over water, from the outline of the world that ships with the package. */
 export function baseMapStyle({ land, water }) {
     return {

package/dist/chat/ui/intelligent-ui/renderers/map-view.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useEffect, useRef, useState } from 'react';
 import { Map as MapLibreMap, Marker, setWorkerUrl } from 'maplibre-gl';
-import { Minus, Plus } from 'lucide-react';
+import { Maximize, Minus, Plus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup, IconButton } from '@adecore/ui';
 import { useChatHost } from '../../../../host.js';
-import { baseMapStyle, boundsOf, localizedTextField, MAP_MAX_ZOOM } from './map-style.js';
+import { baseMapStyle, boundsOf, localizedTextField, mapFitOptions, spreadOverlaps } from './map-style.js';
 const MARKER = 'flex size-5 items-center justify-center rounded-full bg-map-marker text-xs text-map-marker-text tabular-nums shadow-raised';
 const PICKED = 'z-1 bg-accent text-accent-text outline-2 outline-surface';
 // A tile that fails this many times with none loading in between leaves the map empty, so the outline stands in.
@@ -191,7 +191,7 @@ export function MapView({ markers, source, selected, onPick, onStatus }) {
         if (map === null || bounds === null) {
             return;
         }
-        map.fitBounds(bounds, { padding: 32, maxZoom: outline ? MAP_MAX_ZOOM.outline : MAP_MAX_ZOOM.tiles, duration: 0 });
+        map.fitBounds(bounds, { ...mapFitOptions(outline), duration: 0 });
         // The points are compared by their coordinates, so a render that rebuilt the same list does not move the map.
         // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [map, pointsKey, outline]);
@@ -207,14 +207,29 @@ export function MapView({ markers, source, selected, onPick, onStatus }) {
             node.className = `${MARKER} ${marker.id === selected ? PICKED : ''} ${pickable ? 'cursor-pointer' : ''}`;
             node.textContent = String(marker.number);
             node.addEventListener('click', () => latest.current.onPick?.(marker.id));
-            return new Marker({ element: node }).setLngLat([marker.lon, marker.lat]).addTo(map);
+            return { marker, drawing: new Marker({ element: node }).setLngLat([marker.lon, marker.lat]).addTo(map) };
         });
+        const spread = () => {
+            const offsets = spreadOverlaps(drawn.map(({ marker }) => ({ id: marker.id, ...map.project([marker.lon, marker.lat]) })));
+            for (const { marker, drawing } of drawn) {
+                drawing.setOffset(offsets.get(marker.id) ?? [0, 0]);
+            }
+        };
+        spread();
+        map.on('zoomend', spread);
         return () => {
-            for (const marker of drawn) {
-                marker.remove();
+            map.off('zoomend', spread);
+            for (const { drawing } of drawn) {
+                drawing.remove();
             }
         };
         // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [map, pointsKey, selected, pickable]);
-    return (_jsxs("div", { className: "absolute inset-0", children: [_jsx("div", { ref: element, "aria-hidden": true, className: "size-full" }), _jsxs(ButtonGroup, { className: "absolute top-2 right-2 rounded-md border border-border bg-surface-raised shadow-raised", children: [_jsx(IconButton, { icon: Plus, size: "sm", label: t('blocks.map.zoomIn'), onClick: () => map?.zoomIn() }), _jsx(IconButton, { icon: Minus, size: "sm", label: t('blocks.map.zoomOut'), onClick: () => map?.zoomOut() })] })] }));
+    const showAll = () => {
+        const bounds = boundsOf(markers);
+        if (map !== null && bounds !== null) {
+            map.fitBounds(bounds, mapFitOptions(outline));
+        }
+    };
+    return (_jsxs("div", { className: "absolute inset-0", children: [_jsx("div", { ref: element, "aria-hidden": true, className: "size-full" }), _jsxs(ButtonGroup, { className: "absolute top-2 right-2 rounded-md border border-border bg-surface-raised shadow-raised", children: [_jsx(IconButton, { icon: Plus, size: "sm", label: t('blocks.map.zoomIn'), onClick: () => map?.zoomIn() }), _jsx(IconButton, { icon: Minus, size: "sm", label: t('blocks.map.zoomOut'), onClick: () => map?.zoomOut() }), markers.length > 1 && _jsx(IconButton, { icon: Maximize, size: "sm", label: t('blocks.map.showAll'), onClick: showAll })] })] }));
 }

package/dist/chat/ui/intelligent-ui/renderers/text.js

@@ -74,5 +74,5 @@ export function EventRenderer({ node, children }) {
     const time = uiEventTime(at);
     // A neutral dot says nothing the title does not, and a detail is part of what the row says.
     const label = [time, uiNodeLabel(node), tone === 'neutral' ? '' : t(`blocks.event.tone.${tone}`), detail ?? ''].filter((part) => part !== '').join(', ');
-    return (_jsxs("li", { "aria-label": label, className: "group/event relative flex min-h-7 gap-3 pb-3 last:pb-0", children: [_jsx("span", { "aria-hidden": true, className: clsx('mt-1 size-2 shrink-0 rounded-full bg-current', UI_TONE_TEXT[tone]) }), _jsx("span", { "aria-hidden": true, className: "absolute top-3.5 bottom-0 left-0.75 w-px bg-border group-last/event:hidden" }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-0.5", children: [parseUiEventTime(at) === null ? (_jsx("span", { className: "text-xs wrap-anywhere text-text-faint tabular-nums", children: time })) : (_jsx("time", { dateTime: at, className: "text-xs text-text-faint tabular-nums", children: time })), _jsx("div", { className: "text-sm wrap-break-word text-text", children: children }), detail !== undefined && detail !== '' && _jsx("div", { className: "text-xs wrap-anywhere text-text-faint", children: detail })] })] }));
+    return (_jsxs("li", { "aria-label": label, className: "group/event relative flex min-h-7 gap-3 pb-3 last:pb-0", children: [_jsx("span", { "aria-hidden": true, className: clsx('mt-1 size-2 shrink-0 rounded-full bg-current', UI_TONE_TEXT[tone]) }), _jsx("span", { "aria-hidden": true, className: "absolute top-3.5 bottom-0 left-0.75 w-px bg-border group-last/event:hidden" }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-0.5", children: [parseUiEventTime(at) === null ? (_jsx("span", { className: "text-xs wrap-anywhere text-text-muted tabular-nums", children: time })) : (_jsx("time", { dateTime: at, className: "text-xs text-text-muted tabular-nums", children: time })), _jsx("div", { className: "text-sm wrap-break-word text-text", children: children }), detail !== undefined && detail !== '' && _jsx("div", { className: "text-xs wrap-anywhere text-text-muted", children: detail })] })] }));
 }

package/dist/locales/en/agent-chat.d.ts

@@ -599,6 +599,7 @@ declare const _default: {
             notFound: string;
             zoomIn: string;
             zoomOut: string;
+            showAll: string;
             scrollHint: string;
             touchHint: string;
             offline: string;

package/dist/locales/en/agent-chat.js

@@ -599,6 +599,7 @@ export default {
             notFound: 'Not on the map',
             zoomIn: 'Zoom in',
             zoomOut: 'Zoom out',
+            showAll: 'Show all places',
             scrollHint: 'Hold ⌘ or Ctrl and scroll to zoom',
             touchHint: 'Use two fingers to move the map',
             offline: 'Map tiles are not available offline. The places stay listed.',

package/dist/locales/nl/agent-chat.d.ts

@@ -599,6 +599,7 @@ declare const _default: {
             notFound: string;
             zoomIn: string;
             zoomOut: string;
+            showAll: string;
             scrollHint: string;
             touchHint: string;
             offline: string;

package/dist/locales/nl/agent-chat.js

@@ -599,6 +599,7 @@ export default {
             notFound: 'Niet op de kaart',
             zoomIn: 'Inzoomen',
             zoomOut: 'Uitzoomen',
+            showAll: 'Alle plekken tonen',
             scrollHint: 'Houd ⌘ of Ctrl ingedrukt en scrol om te zoomen',
             touchHint: 'Gebruik twee vingers om de kaart te bewegen',
             offline: 'Kaarttegels zijn offline niet beschikbaar. De plekken blijven in de lijst.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.25.5",
+  "version": "0.25.7",
   "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.25.5",
-    "@adecore/editor": "0.25.5",
-    "@adecore/editor-react": "0.25.5",
-    "@adecore/intelligent-ui": "0.25.5",
-    "@adecore/merge": "0.25.5",
+    "@adecore/agent-contracts": "0.25.7",
+    "@adecore/editor": "0.25.7",
+    "@adecore/editor-react": "0.25.7",
+    "@adecore/intelligent-ui": "0.25.7",
+    "@adecore/merge": "0.25.7",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.25.5",
+    "@adecore/ui": "^0.25.7",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.25.5",
+    "@adecore/ui": "0.25.7",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/ui/intelligent-ui/UiReply.tsx

@@ -507,7 +507,7 @@ function UiBlockBody({
                 live={queries.live}
                 nodes={evaluation.nodes}
                 phase={context.phase}
-                fixes={[...block.diagnostics, ...evaluation.diagnostics]}
+                fixes={[...block.diagnostics, ...evaluation.diagnostics].filter((diagnostic) => diagnostic.severity !== 'warning')}
                 shownAsText={shownAsText}
                 answered={answered}
             >

package/src/chat/ui/intelligent-ui/renderers/inputs.tsx

@@ -157,11 +157,11 @@ export function TextFieldRenderer({ node, children, context }: UiRendererProps<U
                 placeholder={placeholder}
                 disabled={binding === null}
                 aria-describedby={counting ? countId : undefined}
-                className="max-w-96"
+                className="max-w-96 bg-surface-sunken"
                 onChange={(event) => binding?.onValueChange(event.target.value)}
             />
             {counting && (
-                <span id={countId} className="text-xs text-text-faint tabular-nums">
+                <span id={countId} className="text-xs text-text-muted tabular-nums">
                     {t('blocks.textField.count', { used: formatNumber(value.length), max: formatNumber(maxLength) })}
                 </span>
             )}

package/src/chat/ui/intelligent-ui/renderers/map-style.ts

@@ -21,6 +21,62 @@ export interface MapPoint {
 /* How far a map zooms to fit its points: street level with tiles, and only a country or two on the outline, which has nothing finer. */
 export const MAP_MAX_ZOOM = { tiles: 16, outline: 6 } as const;
 
+/* The room around the places in a fitted view, in pixels. */
+export const MAP_FIT_PADDING = 32;
+
+/* What fits every place in view: the first view and the way back to it share it, so they cannot drift apart. */
+export function mapFitOptions(outline: boolean): { padding: number; maxZoom: number } {
+    return { padding: MAP_FIT_PADDING, maxZoom: outline ? MAP_MAX_ZOOM.outline : MAP_MAX_ZOOM.tiles };
+}
+
+/* The width of a marker, in pixels. */
+export const MAP_MARKER_SIZE = 20;
+
+export interface ScreenPoint {
+    id: string;
+    x: number;
+    y: number;
+}
+
+// Whole pixels to try around a place, nearest ring first: right, below, left, above, then the corners.
+const SPREAD_STEPS: readonly (readonly [number, number])[] = [
+    [20, 0],
+    [0, 20],
+    [-20, 0],
+    [0, -20],
+    [15, 15],
+    [-15, 15],
+    [-15, -15],
+    [15, -15],
+    [40, 0],
+    [0, 40],
+    [-40, 0],
+    [0, -40],
+    [30, 30],
+    [-30, 30],
+    [-30, -30],
+    [30, -30]
+];
+
+/*
+ * Offsets, in pixels, that keep markers from covering each other. A marker that fits where it is stays; one
+ * that lands on an earlier marker moves to the nearest free spot beside it. The places are not moved on the
+ * map, only their markers, and the offsets are worked out again at every zoom, so a map zoomed in far
+ * enough draws them where they are.
+ */
+export function spreadOverlaps(points: readonly ScreenPoint[]): Map<string, [number, number]> {
+    const offsets = new Map<string, [number, number]>();
+    const placed: { x: number; y: number }[] = [];
+    for (const point of points) {
+        const free = ([dx, dy]: readonly [number, number]): boolean =>
+            placed.every((other) => Math.hypot(other.x - (point.x + dx), other.y - (point.y + dy)) >= MAP_MARKER_SIZE);
+        const step = [[0, 0] as const, ...SPREAD_STEPS].find(free) ?? ([0, 0] as const);
+        offsets.set(point.id, [step[0], step[1]]);
+        placed.push({ x: point.x + step[0], y: point.y + step[1] });
+    }
+    return offsets;
+}
+
 /* The map a page draws without tiles: land over water, from the outline of the world that ships with the package. */
 export function baseMapStyle({ land, water }: MapColors): MapStyle {
     return {

package/src/chat/ui/intelligent-ui/renderers/map-view.tsx

@@ -1,11 +1,11 @@
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useEffect, useRef, useState } from 'react';
 import { Map as MapLibreMap, Marker, setWorkerUrl } from 'maplibre-gl';
-import { Minus, Plus } from 'lucide-react';
+import { Maximize, Minus, Plus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup, IconButton } from '@adecore/ui';
 import { useChatHost, type UiMapSource } from '../../../../host';
-import { baseMapStyle, boundsOf, localizedTextField, MAP_MAX_ZOOM, type MapColors, type MapPoint } from './map-style';
+import { baseMapStyle, boundsOf, localizedTextField, mapFitOptions, spreadOverlaps, type MapColors, type MapPoint } from './map-style';
 
 /*
  * What the view is drawing: `base` by the source's choice, `offline` and `unavailable` as a fallback from tiles that
@@ -219,7 +219,7 @@ export function MapView({ markers, source, selected, onPick, onStatus }: MapView
         if (map === null || bounds === null) {
             return;
         }
-        map.fitBounds(bounds, { padding: 32, maxZoom: outline ? MAP_MAX_ZOOM.outline : MAP_MAX_ZOOM.tiles, duration: 0 });
+        map.fitBounds(bounds, { ...mapFitOptions(outline), duration: 0 });
         // The points are compared by their coordinates, so a render that rebuilt the same list does not move the map.
         // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [map, pointsKey, outline]);
@@ -236,22 +236,39 @@ export function MapView({ markers, source, selected, onPick, onStatus }: MapView
             node.className = `${MARKER} ${marker.id === selected ? PICKED : ''} ${pickable ? 'cursor-pointer' : ''}`;
             node.textContent = String(marker.number);
             node.addEventListener('click', () => latest.current.onPick?.(marker.id));
-            return new Marker({ element: node }).setLngLat([marker.lon, marker.lat]).addTo(map);
+            return { marker, drawing: new Marker({ element: node }).setLngLat([marker.lon, marker.lat]).addTo(map) };
         });
+        const spread = (): void => {
+            const offsets = spreadOverlaps(drawn.map(({ marker }) => ({ id: marker.id, ...map.project([marker.lon, marker.lat]) })));
+            for (const { marker, drawing } of drawn) {
+                drawing.setOffset(offsets.get(marker.id) ?? [0, 0]);
+            }
+        };
+        spread();
+        map.on('zoomend', spread);
         return () => {
-            for (const marker of drawn) {
-                marker.remove();
+            map.off('zoomend', spread);
+            for (const { drawing } of drawn) {
+                drawing.remove();
             }
         };
         // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [map, pointsKey, selected, pickable]);
 
+    const showAll = (): void => {
+        const bounds = boundsOf(markers);
+        if (map !== null && bounds !== null) {
+            map.fitBounds(bounds, mapFitOptions(outline));
+        }
+    };
+
     return (
         <div className="absolute inset-0">
             <div ref={element} aria-hidden className="size-full" />
             <ButtonGroup className="absolute top-2 right-2 rounded-md border border-border bg-surface-raised shadow-raised">
                 <IconButton icon={Plus} size="sm" label={t('blocks.map.zoomIn')} onClick={() => map?.zoomIn()} />
                 <IconButton icon={Minus} size="sm" label={t('blocks.map.zoomOut')} onClick={() => map?.zoomOut()} />
+                {markers.length > 1 && <IconButton icon={Maximize} size="sm" label={t('blocks.map.showAll')} onClick={showAll} />}
             </ButtonGroup>
         </div>
     );

package/src/chat/ui/intelligent-ui/renderers/text.tsx

@@ -152,14 +152,14 @@ export function EventRenderer({ node, children }: UiRendererProps<UiProps<'Event
             <div className="flex min-w-0 grow flex-col gap-0.5">
                 {/* A time nobody could read stays as written and is no `dateTime` for a machine to read. */}
                 {parseUiEventTime(at) === null ? (
-                    <span className="text-xs wrap-anywhere text-text-faint tabular-nums">{time}</span>
+                    <span className="text-xs wrap-anywhere text-text-muted tabular-nums">{time}</span>
                 ) : (
-                    <time dateTime={at} className="text-xs text-text-faint tabular-nums">
+                    <time dateTime={at} className="text-xs text-text-muted tabular-nums">
                         {time}
                     </time>
                 )}
                 <div className="text-sm wrap-break-word text-text">{children}</div>
-                {detail !== undefined && detail !== '' && <div className="text-xs wrap-anywhere text-text-faint">{detail}</div>}
+                {detail !== undefined && detail !== '' && <div className="text-xs wrap-anywhere text-text-muted">{detail}</div>}
             </div>
         </li>
     );

package/src/locales/en/agent-chat.ts

@@ -599,6 +599,7 @@ export default {
             notFound: 'Not on the map',
             zoomIn: 'Zoom in',
             zoomOut: 'Zoom out',
+            showAll: 'Show all places',
             scrollHint: 'Hold ⌘ or Ctrl and scroll to zoom',
             touchHint: 'Use two fingers to move the map',
             offline: 'Map tiles are not available offline. The places stay listed.',

package/src/locales/nl/agent-chat.ts

@@ -599,6 +599,7 @@ export default {
             notFound: 'Niet op de kaart',
             zoomIn: 'Inzoomen',
             zoomOut: 'Uitzoomen',
+            showAll: 'Alle plekken tonen',
             scrollHint: 'Houd ⌘ of Ctrl ingedrukt en scrol om te zoomen',
             touchHint: 'Gebruik twee vingers om de kaart te bewegen',
             offline: 'Kaarttegels zijn offline niet beschikbaar. De plekken blijven in de lijst.',