@djangocfg/ui-tools 2.1.430 → 2.1.432

package/src/tools/chat/messages/blocks/MessageBlocks.tsx

@@ -11,8 +11,10 @@ import { Component, type ReactNode } from 'react';
 
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { BlockError, safeParseBlock } from '../../../../common/blocks';
 import type { MessageBlock } from '../../types/block';
-import { useChatBubbleStyles } from '../../styles';
+import { BLOCK_SCHEMAS } from '../../types/blockSchemas';
+import { useChatBubbleStyles, BLOCK_SURFACE } from '../../styles';
 import { BUILTIN_BLOCK_REGISTRY, type BlockRegistry } from './registry';
 
 export interface MessageBlocksProps {
@@ -29,9 +31,30 @@ export interface MessageBlocksProps {
   strict?: boolean;
 }
 
-/** Block kinds rendered inside a chat-bubble surface, not full-width. */
+/** Block kinds rendered inside a chat-bubble surface (bubble-tinted, inline). */
 const PROSE_KINDS = new Set<MessageBlock['kind']>(['text', 'markdown']);
 
+/**
+ * Block kinds wrapped in the shared media-card surface (`BLOCK_SURFACE`) so
+ * every media block shares one radius / border / shadow. `prose` kinds get
+ * the bubble surface instead (above).
+ *
+ * Bare kinds skip the light card and own their frame:
+ *  - `custom` — host-owned chrome.
+ *  - `link`   — the LinkPreviewCard ships its own frame.
+ *  - `audio`  — the player draws its own card AND a scrub-time tooltip that
+ *    sits ABOVE the bar; a clipping card would crop that tooltip, so the
+ *    player rounds itself to the shared 2xl radius instead (see AudioBlock).
+ *  - `diff`   — the DiffViewer ships its own bordered panel + a floating
+ *    copy button that a clip would crop; it re-rounds to 2xl (see DiffBlock).
+ *
+ * `code` is NOT bare: its dark editor panel can't be reliably re-rounded
+ * from outside (PrettyCode rounds its inner layers to `rounded-lg`), so we
+ * let the shared `overflow-hidden rounded-2xl` card CLIP it to the uniform
+ * corner instead. (Code has no overflowing tooltip, so clipping is safe.)
+ */
+const BARE_KINDS = new Set<MessageBlock['kind']>(['custom', 'link', 'audio', 'diff']);
+
 interface BoundaryProps {
   kind: string;
   children: ReactNode;
@@ -91,8 +114,28 @@ export function MessageBlocks({
           | ((b: MessageBlock, c: { appearance: 'compact' | 'full'; isUser: boolean }) => ReactNode)
           | undefined;
 
+        // Central payload validation — every block flows through here, so a
+        // malformed payload (wrong-typed `src`, non-array gallery `items`, bad
+        // map coords) renders a safe `<BlockError>` instead of throwing inside
+        // its renderer and blanking the transcript. Kinds without a schema
+        // (e.g. host-defined `custom`) skip this and render as-is. The renderer
+        // can therefore trust its input. The error boundary below stays as a
+        // last-resort runtime guard.
+        const schema = BLOCK_SCHEMAS[block.kind];
+
         let body: ReactNode;
-        if (renderer) {
+        if (schema) {
+          const parsed = safeParseBlock(schema, block);
+          if (!parsed.ok) {
+            body = <BlockError label={block.kind} reason={parsed.error} />;
+          } else if (renderer) {
+            body = renderer(block, { appearance, isUser });
+          } else if (strict) {
+            body = <UnknownBlock kind={block.kind} />;
+          } else {
+            return null;
+          }
+        } else if (renderer) {
           body = renderer(block, { appearance, isUser });
         } else if (strict) {
           body = <UnknownBlock kind={block.kind} />;
@@ -101,6 +144,29 @@ export function MessageBlocks({
         }
 
         const isProse = PROSE_KINDS.has(block.kind);
+        const isBare = BARE_KINDS.has(block.kind);
+
+        // Surface selection — one consistent frame per category:
+        //   prose  → tinted chat bubble (inline)
+        //   bare   → no frame (host-owned `custom` block)
+        //   media  → shared `BLOCK_SURFACE` card (image/video/map/code/…)
+        let framed: ReactNode;
+        if (isProse) {
+          framed = (
+            <div
+              className={cn(
+                'inline-block max-w-full rounded-2xl px-3.5 py-2 text-sm',
+                bubbleSurface,
+              )}
+            >
+              {body}
+            </div>
+          );
+        } else if (isBare) {
+          framed = body;
+        } else {
+          framed = <div className={cn('w-full', BLOCK_SURFACE)}>{body}</div>;
+        }
 
         return (
           <div key={block.id} data-block-kind={block.kind} className="w-full">
@@ -109,20 +175,7 @@ export function MessageBlocks({
                 {block.caption}
               </div>
             ) : null}
-            <BlockErrorBoundary kind={block.kind}>
-              {isProse ? (
-                <div
-                  className={cn(
-                    'inline-block max-w-full rounded-2xl px-3.5 py-2 text-sm',
-                    bubbleSurface,
-                  )}
-                >
-                  {body}
-                </div>
-              ) : (
-                body
-              )}
-            </BlockErrorBoundary>
+            <BlockErrorBoundary kind={block.kind}>{framed}</BlockErrorBoundary>
           </div>
         );
       })}

package/src/tools/chat/messages/blocks/builtin.tsx

@@ -16,10 +16,11 @@ import { MarkdownMessage } from '../../../dev/code/MarkdownMessage';
 import type {
   AudioBlock,
   CodeBlock,
+  DiffBlock,
   GalleryBlock,
   ImageBlock,
   JsonBlock,
-  LottieBlock,
+  LinkBlock,
   MapBlock,
   MarkdownBlock,
   MermaidBlock,
@@ -63,7 +64,8 @@ const MapBlockRenderer = lazyBlock<MapBlock>(() => import('./renderers/MapBlock'
 const JsonBlockRenderer = lazyBlock<JsonBlock>(() => import('./renderers/JsonBlock'));
 const MermaidBlockRenderer = lazyBlock<MermaidBlock>(() => import('./renderers/MermaidBlock'));
 const CodeBlockRenderer = lazyBlock<CodeBlock>(() => import('./renderers/CodeBlock'));
-const LottieBlockRenderer = lazyBlock<LottieBlock>(() => import('./renderers/LottieBlock'));
+const DiffBlockRenderer = lazyBlock<DiffBlock>(() => import('./renderers/DiffBlock'));
+const LinkBlockRenderer = lazyBlock<LinkBlock>(() => import('./renderers/LinkBlock'));
 
 /** Render a `text` / `markdown` block as bubble-styled prose. */
 function renderProse(content: string, isUser: boolean) {
@@ -85,7 +87,8 @@ export const BUILTIN_BLOCK_REGISTRY: BlockRegistry = {
   json: (block, ctx) => <JsonBlockRenderer block={block} ctx={ctx} />,
   mermaid: (block, ctx) => <MermaidBlockRenderer block={block} ctx={ctx} />,
   code: (block, ctx) => <CodeBlockRenderer block={block} ctx={ctx} />,
-  lottie: (block, ctx) => <LottieBlockRenderer block={block} ctx={ctx} />,
+  diff: (block, ctx) => <DiffBlockRenderer block={block} ctx={ctx} />,
+  link: (block, ctx) => <LinkBlockRenderer block={block} ctx={ctx} />,
   // `custom` has no built-in renderer — it falls through to the
   // unknown-kind fallback unless the host registers one.
 };

package/src/tools/chat/messages/blocks/renderers/AudioBlock.tsx

@@ -8,6 +8,11 @@ import type { BlockRendererProps } from './types';
 
 export default function AudioBlockRenderer({ block, ctx }: BlockRendererProps<AudioBlock>) {
   const variant = block.variant ?? (ctx.appearance === 'compact' ? 'compact' : 'default');
+  // `audio` is a "bare" block (no clipping card) because the player renders
+  // a scrub-time tooltip ABOVE the bar that a clip would crop. So the player
+  // owns its frame — aligned to the shared 2xl radius + soft shadow.
+  // `!`-utilities win over PlayerShell's template-string `rounded-lg`
+  // regardless of stylesheet order.
   return (
     <LazyPlayer
       src={block.src}
@@ -15,6 +20,7 @@ export default function AudioBlockRenderer({ block, ctx }: BlockRendererProps<Au
       artist={block.artist}
       cover={block.cover}
       variant={variant}
+      className="!rounded-2xl shadow-sm"
     />
   );
 }

package/src/tools/chat/messages/blocks/renderers/ChatImageAlbum.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+/**
+ * Chat image album — a Telegram/WhatsApp-style adaptive collage for 1–N
+ * images. NOT a true masonry: messengers use a small set of deterministic
+ * album layouts (no JS height measuring, no extra deps), which is the right
+ * call for a chat where albums are a small, bounded case.
+ *
+ *   1 → single image            2 → two equal columns
+ *   3 → one tall + two stacked  4 → 2×2 grid
+ *   5+ → 2×2 grid, the last visible tile shows a "+N more" overlay
+ *
+ * Clicking any tile opens the shared zoom/pan `ImageViewer` lightbox in a
+ * dialog, seeded at the clicked index, with prev/next across the whole set.
+ */
+
+import { useCallback, useState } from 'react';
+
+import { Dialog, DialogContent, DialogTitle } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LazyImageViewer } from '../../../../media/ImageViewer/lazy';
+
+export interface ChatAlbumImage {
+  id: string;
+  src: string;
+  thumbnail?: string;
+  alt?: string;
+}
+
+export interface ChatImageAlbumProps {
+  images: ChatAlbumImage[];
+  /** Max tiles shown before collapsing the rest into a "+N" overlay. */
+  maxVisible?: number;
+}
+
+/** Tile — a single clickable image cell. */
+function Tile({
+  image,
+  onClick,
+  className,
+  overlayCount,
+}: {
+  image: ChatAlbumImage;
+  onClick: () => void;
+  className?: string;
+  overlayCount?: number;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={`Open image${image.alt ? `: ${image.alt}` : ''}`}
+      className={cn(
+        'group relative block overflow-hidden bg-muted',
+        'cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+        className,
+      )}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={image.thumbnail ?? image.src}
+        alt={image.alt ?? ''}
+        loading="lazy"
+        className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
+      />
+      {overlayCount ? (
+        <span className="absolute inset-0 flex items-center justify-center bg-black/50 text-xl font-semibold text-white">
+          +{overlayCount}
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+export function ChatImageAlbum({ images, maxVisible = 4 }: ChatImageAlbumProps) {
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(0);
+
+  const openAt = useCallback((i: number) => {
+    setIndex(i);
+    setOpen(true);
+  }, []);
+
+  const count = images.length;
+  const visible = images.slice(0, Math.min(count, maxVisible));
+  const hiddenCount = count - visible.length;
+
+  // Layout per count. `gap-0.5` mimics the tight messenger seam; the outer
+  // BLOCK_SURFACE provides the rounded clip + border.
+  let grid: React.ReactNode;
+  if (count === 1) {
+    const img = images[0];
+    grid = (
+      <Tile image={img} onClick={() => openAt(0)} className="max-h-96 w-full" />
+    );
+  } else if (count === 2) {
+    grid = (
+      <div className="grid aspect-[2/1] grid-cols-2 gap-0.5">
+        {visible.map((img, i) => (
+          <Tile key={img.id} image={img} onClick={() => openAt(i)} />
+        ))}
+      </div>
+    );
+  } else if (count === 3) {
+    grid = (
+      <div className="grid aspect-[3/2] grid-cols-2 grid-rows-2 gap-0.5">
+        <Tile image={visible[0]} onClick={() => openAt(0)} className="row-span-2" />
+        <Tile image={visible[1]} onClick={() => openAt(1)} />
+        <Tile image={visible[2]} onClick={() => openAt(2)} />
+      </div>
+    );
+  } else {
+    // 4+ → 2×2, last visible tile carries the "+N" overlay when collapsed.
+    grid = (
+      <div className="grid aspect-square grid-cols-2 grid-rows-2 gap-0.5">
+        {visible.map((img, i) => {
+          const isLast = i === visible.length - 1;
+          return (
+            <Tile
+              key={img.id}
+              image={img}
+              onClick={() => openAt(i)}
+              overlayCount={isLast && hiddenCount > 0 ? hiddenCount : undefined}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {grid}
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="h-[90vh] w-[90vw] max-w-[1400px] overflow-hidden p-0 sm:rounded-xl">
+          <DialogTitle className="sr-only">Image {index + 1} of {count}</DialogTitle>
+          {open && (
+            <LazyImageViewer
+              images={images.map((img) => ({
+                file: { name: img.alt ?? 'image', path: img.src },
+                src: img.src,
+              }))}
+              initialIndex={index}
+              inDialog
+              autoFocus
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/tools/chat/messages/blocks/renderers/CodeBlock.tsx

@@ -1,19 +1,107 @@
 'use client';
 
-/** Code block — read-only syntax highlighting via `PrettyCode`. */
+/**
+ * Code block — read-only syntax highlighting via `PrettyCode`.
+ *
+ * Inline, the panel is height-capped (`maxLines`) so a long snippet never
+ * blows up the transcript — beyond the cap PrettyCode scrolls internally.
+ * When capped, a header expand (⤢) button opens the FULL code in a large
+ * dialog (same pattern as the map / image blocks), where it reads/scrolls
+ * comfortably and copies in one shot.
+ */
+
+import { useCallback, useState } from 'react';
+
+import { Check, Copy, X } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '@djangocfg/ui-core/components';
 
 import { LazyPrettyCode } from '../../../../dev/code/PrettyCode/lazy';
 import type { Language } from '../../../../dev/code/PrettyCode/lazy';
 import type { CodeBlock } from '../../../types/block';
 import type { BlockRendererProps } from './types';
 
+/** Roomy on-dark button for the expanded dialog header. */
+const DIALOG_BTN =
+  'inline-flex h-8 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-medium ' +
+  'text-white/70 transition-colors hover:bg-white/10 hover:text-white ' +
+  'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/40';
+
 export default function CodeBlockRenderer({ block, ctx }: BlockRendererProps<CodeBlock>) {
   const compact = ctx.appearance === 'compact';
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const language = block.language as Language;
+
+  const copyAll = useCallback(() => {
+    void navigator.clipboard?.writeText(block.code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    });
+  }, [block.code]);
+
+  // 16 lines in the narrow chat, 24 in a full-page chat. Beyond this the
+  // inline panel scrolls and the header shows the expand button.
+  const maxLines = compact ? 16 : 24;
+
   return (
-    <LazyPrettyCode
-      data={block.code}
-      language={block.language as Language}
-      isCompact={compact}
-    />
+    <>
+      {/* Inline — capped + internally scrollable; expand opens the dialog.
+          The dark panel is clipped to the shared 2xl corner by BLOCK_SURFACE. */}
+      <LazyPrettyCode
+        data={block.code}
+        language={language}
+        isCompact={compact}
+        maxLines={maxLines}
+        onExpand={() => setOpen(true)}
+      />
+
+      {/* Full code, uncapped, in a large dialog (map/image-block pattern).
+          ONE header (language + copy + close) over a dark panel; the body
+          renders PrettyCode in `plain` (chrome-less) so there's no second
+          header to collide with — the dialog owns the chrome and scroll. */}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent
+          className="flex h-[85vh] w-[90vw] max-w-[1100px] flex-col overflow-hidden border-0 p-0 sm:rounded-xl"
+          // Fixed GitHub-dark surface (matches PrettyCode's own panel) — the
+          // code theme is always dark regardless of the app theme, so a
+          // theme-driven `bg-code` (light in light mode) would be unreadable.
+          style={{ backgroundColor: '#0d1117' }}
+          // We render our own close inside the single header, so suppress the
+          // default X (it would collide with the header buttons).
+          closeButton={false}
+        >
+          <DialogTitle className="sr-only">{block.caption ?? language ?? 'Code'}</DialogTitle>
+          {open && (
+            <>
+              {/* Roomy dialog header: language left; actions right in the
+                  conventional order — primary "Copy" then "Close" (X) at the
+                  far edge. Taller + larger than the inline header to suit the
+                  big surface. */}
+              <div className="flex h-11 shrink-0 items-center justify-between gap-2 border-b border-white/[0.08] px-4">
+                <span className="min-w-0 truncate font-mono text-sm lowercase tracking-wide text-white/55">
+                  {language}
+                </span>
+                <div className="flex shrink-0 items-center gap-1">
+                  <button type="button" onClick={copyAll} aria-label="Copy code" className={DIALOG_BTN}>
+                    {copied ? <Check className="size-3.5" aria-hidden /> : <Copy className="size-3.5" aria-hidden />}
+                    <span>{copied ? 'Copied' : 'Copy'}</span>
+                  </button>
+                  <DialogClose
+                    aria-label="Close"
+                    className={cn(DIALOG_BTN, 'w-8 px-0')}
+                  >
+                    <X className="size-4" aria-hidden />
+                  </DialogClose>
+                </div>
+              </div>
+              <div className="min-h-0 flex-1 overflow-auto">
+                <LazyPrettyCode data={block.code} language={language} variant="plain" />
+              </div>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

package/src/tools/chat/messages/blocks/renderers/DiffBlock.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+/** Diff block — thin chat wrapper around the lazy `DiffViewer`. */
+
+import { LazyDiffViewer } from '../../../../dev/code/DiffViewer/lazy';
+import type { DiffBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function DiffBlockRenderer({ block, ctx }: BlockRendererProps<DiffBlock>) {
+  // Compact chat is narrow → default to single-column `unified`; full
+  // bubbles have room for `split`. A pinned `layout` always wins.
+  const layout = block.layout ?? (ctx.appearance === 'compact' ? 'unified' : 'split');
+  const common = {
+    layout,
+    language: block.language,
+    // `diff` is a "bare" block (no clipping card) because the viewer draws
+    // its own bordered panel + a floating copy button that a clip would
+    // crop. So it owns its frame — re-rounded to the shared 2xl radius.
+    // `!`-utilities win over the viewer's template-string `rounded-xl`
+    // regardless of stylesheet order.
+    className: '!rounded-2xl',
+  };
+
+  return block.patch !== undefined ? (
+    <LazyDiffViewer {...common} patch={block.patch} />
+  ) : (
+    <LazyDiffViewer {...common} oldCode={block.oldCode ?? ''} newCode={block.newCode ?? ''} />
+  );
+}

package/src/tools/chat/messages/blocks/renderers/GalleryBlock.tsx

@@ -1,26 +1,33 @@
 'use client';
 
-/** Gallery block — thin chat wrapper around `Gallery`. */
+/**
+ * Gallery block.
+ *
+ * - Compact chat (the common case) → a lightweight Telegram-style
+ *   `ChatImageAlbum` collage: deterministic 1–N layouts, lazy thumbnails,
+ *   tap-to-lightbox. No carousel chrome, no extra deps.
+ * - Full appearance → the richer `Gallery` (carousel + thumbnail strip +
+ *   lightbox) for a roomy, full-page chat.
+ *
+ * Frame (radius / border / clip) comes from the shared `BLOCK_SURFACE`.
+ */
 
 import { Gallery } from '../../../../media/Gallery';
 import type { GalleryMediaItem } from '../../../../media/Gallery';
 import type { GalleryBlock } from '../../../types/block';
 import type { BlockRendererProps } from './types';
+import { ChatImageAlbum } from './ChatImageAlbum';
 
 export default function GalleryBlockRenderer({ block, ctx }: BlockRendererProps<GalleryBlock>) {
+  if (ctx.appearance === 'compact') {
+    return <ChatImageAlbum images={block.items} />;
+  }
+
   const images: GalleryMediaItem[] = block.items.map((item) => ({
     id: item.id,
     src: item.src,
     thumbnail: item.thumbnail,
     alt: item.alt,
   }));
-  return (
-    <div className="overflow-hidden rounded-xl border border-border">
-      <Gallery
-        images={images}
-        showThumbnails={ctx.appearance !== 'compact'}
-        enableLightbox
-      />
-    </div>
-  );
+  return <Gallery images={images} showThumbnails enableLightbox />;
 }

package/src/tools/chat/messages/blocks/renderers/ImageBlock.tsx

@@ -1,27 +1,48 @@
 'use client';
 
-/** Image block — interactive → `ImageViewer`, otherwise a plain `<img>`. */
+/**
+ * Image block — a thumbnail that opens a fullscreen zoom/pan lightbox on
+ * click (Telegram / WhatsApp style). The outer frame (radius / border /
+ * shadow) is owned by the shared `BLOCK_SURFACE` in MessageBlocks; here we
+ * only render the image and the lightbox dialog.
+ */
+
+import { useState } from 'react';
+
+import { Dialog, DialogContent, DialogTitle } from '@djangocfg/ui-core/components';
 
 import { LazyImageViewer } from '../../../../media/ImageViewer/lazy';
 import type { ImageBlock } from '../../../types/block';
 import type { BlockRendererProps } from './types';
 
 export default function ImageBlockRenderer({ block }: BlockRendererProps<ImageBlock>) {
-  if (block.interactive) {
-    return (
-      <div className="overflow-hidden rounded-xl border border-border">
-        <LazyImageViewer
-          images={[{ file: { name: block.alt ?? 'image', path: block.src }, src: block.src }]}
-        />
-      </div>
-    );
-  }
+  const [open, setOpen] = useState(false);
+  const alt = block.alt ?? 'image';
+
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={block.src}
-      alt={block.alt ?? ''}
-      className="max-h-96 w-auto max-w-full rounded-xl border border-border object-contain"
-    />
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label={`Open image${block.alt ? `: ${block.alt}` : ''}`}
+        className="block w-full cursor-zoom-in transition-opacity hover:opacity-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={block.src} alt={alt} className="max-h-96 w-full object-cover" />
+      </button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="h-[90vh] w-[90vw] max-w-[1400px] overflow-hidden p-0 sm:rounded-xl">
+          <DialogTitle className="sr-only">{alt}</DialogTitle>
+          {open && (
+            <LazyImageViewer
+              images={[{ file: { name: alt, path: block.src }, src: block.src }]}
+              inDialog
+              autoFocus
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

package/src/tools/chat/messages/blocks/renderers/JsonBlock.tsx

@@ -12,12 +12,17 @@ export default function JsonBlockRenderer({ block, ctx }: BlockRendererProps<Jso
   // hover-revealed toolbar + card.
   const mode = block.mode ?? (ctx.appearance === 'compact' ? 'compact' : 'full');
   const compact = mode !== 'full';
+  // The outer card (radius / border / shadow) comes from the shared
+  // `BLOCK_SURFACE`; the tree itself is unbordered with a little padding so
+  // it doesn't sit flush against the frame.
   return (
-    <LazyJsonTree
-      data={block.data}
-      toolbar={compact ? 'never' : 'auto'}
-      bordered={!compact}
-      defaultExpandedDepth={compact ? 1 : 2}
-    />
+    <div className="p-2">
+      <LazyJsonTree
+        data={block.data}
+        toolbar={compact ? 'never' : 'auto'}
+        bordered={false}
+        defaultExpandedDepth={compact ? 1 : 2}
+      />
+    </div>
   );
 }

package/src/tools/chat/messages/blocks/renderers/LinkBlock.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+/**
+ * Link block — renders a `LinkPreviewCard`. If the block carries resolved
+ * `data` it shows immediately; otherwise it pulls the host resolver from
+ * chat context (`config.linkPreview.resolve`) and unfurls lazily.
+ */
+
+import { LinkPreviewCard } from '../../../../../common/link-preview';
+import { useChatContextOptional } from '../../../context';
+import type { LinkBlock } from '../../../types/block';
+import type { BlockRendererProps } from './types';
+
+export default function LinkBlockRenderer({ block, ctx }: BlockRendererProps<LinkBlock>) {
+  const chat = useChatContextOptional();
+  const resolver = chat?.config.linkPreview?.resolve;
+
+  // No data and no resolver → nothing to render (card returns null too).
+  if (!block.data && !resolver) return null;
+
+  // The link payload (`url` + optional pre-resolved `data`) is validated
+  // centrally at the registry dispatch point (MessageBlocks) before this
+  // renderer runs, so we can trust it here.
+  return (
+    <LinkPreviewCard
+      url={block.url}
+      data={block.data}
+      resolver={resolver}
+      appearance={ctx.appearance}
+    />
+  );
+}