feat(web): expandable resource_link with read-on-demand (#1449) (#1456)

* feat(web): expandable resource_link with read-on-demand (#1449)

Replace the placeholder `resource_link` rendering in ContentViewer with a
dedicated, Mantine-native `ResourceLink` element that mirrors V1's behavior:

- Shows uri (monospace, link-styled), optional name/description, and a
  mimeType badge.
- Expand/collapse affordance (chevron + loading spinner) that is keyboard
  accessible (native button: role, aria-expanded, aria-label, Enter/Space).
- On first expand, reads the linked resource on demand via an injected
  callback and renders the full read result inline as formatted JSON under a
  green "Resource:" label, capped to a max height with scroll for large
  results. The fetched result is cached across collapse/expand.

The read handler is threaded as a "dumb component + callback as prop" through
ToolResultPanel → ToolsScreen → InspectorView, with App supplying a handler
that returns the `ReadResourceResult` from `inspectorClient.readResource`.

Also extract the shared `resourceContentsToBlock` helper into
`utils/resourceContents.ts` (previously private to ResourcePreviewPanel).

Tests: unit coverage for ResourceLink (collapsed/expanded/error/cache) and
the ContentViewer wiring, plus Storybook stories with play functions.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): scroll large resource_link read results within the card

A plain ScrollArea with only `mah` does not scroll when its parent (the
content-sized card) has no definite height, so a large read result overflowed
the card instead of scrolling. Switch to ScrollArea.Autosize, which grows with
content up to the max height and then scrolls. Adds a LargeResult story
covering the bounded-scroll behavior.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(web): make ResourceLink a group; extract ResourceLinkInfo element

ResourceLink is stateful (expand/loading/cached result) and fetches data via
a callback — group-like behavior, and the only `elements/` component using
useState. Move it to `groups/` and split out the pure-display metadata as a
new `elements/ResourceLinkInfo` element (uri/name/description/mime + an
optional action slot).

This keeps the layer dependencies clean (no element→group import, which
moving ResourceLink alone would have introduced):
- ContentViewer (element) renders ResourceLinkInfo (element) statically for
  `resource_link` blocks and no longer takes an onReadResource prop.
- ToolResultPanel (group) renders the interactive ResourceLink (group) for
  `resource_link` blocks, ContentViewer for the rest.
- ResourceLink (group) composes ResourceLinkInfo + ContentViewer.

Also reverts the now-single-consumer resourceContents.ts extraction, restoring
ResourcePreviewPanel's local toContentBlock.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): make ResourceLink read retryable and guard double-fetch

Address PR review: a failed read is no longer cached as terminal — only
a successful result is cached, so collapsing and re-expanding retries the
read after a transient failure. Add a loading guard so toggling while a
read is in flight does not fire a redundant second read.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* style(web): prettier formatting for ResourceLink test

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore: remove accidentally-committed build artifacts; gitignore clients/*/build

A stray 'git add -A' swept 8 compiled build files into d25c9382. Remove
them from tracking and add clients/*/build to .gitignore so client build
output is never committed again.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall 2026-06-13 17:15:25 -04:00 • committed by GitHub
commit 8d4363d0ea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -0,0 +1,90 @@
import type { ReactNode } from "react";
import { Badge, Group, Stack, Text } from "@mantine/core";
export interface ResourceLinkInfoProps {
/** The linked resource's URI (always shown). */
uri: string;
/** Optional human-friendly name shown beneath the URI. */
name?: string;
/** Optional description shown beneath the name. */
description?: string;
/** Optional MIME type shown as a badge. */
mimeType?: string;
/**
* Optional trailing element placed at the end of the URI row — e.g. an
* expand/collapse indicator supplied by an interactive wrapper.
*/
action?: ReactNode;
}
const HeaderStack = Stack.withProps({
gap: 4,
});
const UriRow = Group.withProps({
justify: "space-between",
wrap: "nowrap",
gap: "xs",
align: "flex-start",
});
const UriText = Text.withProps({
size: "sm",
c: "blue",
ff: "monospace",
variant: "monoBreak",
flex: 1,
miw: 0,
});
const MetaGroup = Group.withProps({
gap: "xs",
wrap: "nowrap",
});
const MimeBadge = Badge.withProps({
size: "sm",
variant: "light",
color: "blue",
// MIME types are conventionally lowercase; keep them as-is rather than
// letting Badge's default uppercase transform mangle them.
tt: "none",
});
const NameText = Text.withProps({
size: "sm",
fw: 600,
});
const DescriptionText = Text.withProps({
size: "sm",
c: "dimmed",
});
/**
* Pure-display metadata for a `resource_link`: the URI (monospace, link-styled),
* optional name / description, and a MIME-type badge. The optional `action`
* slot lets an interactive wrapper (e.g. {@link ResourceLink}) place an
* expand/collapse indicator in the URI row.
*/
export function ResourceLinkInfo({
uri,
name,
description,
mimeType,
action,
}: ResourceLinkInfoProps) {
return (
<HeaderStack>
<UriRow>
<UriText>{uri}</UriText>
<MetaGroup>
{mimeType && <MimeBadge>{mimeType}</MimeBadge>}
{action}
</MetaGroup>
</UriRow>
{name && <NameText>{name}</NameText>}
{description && <DescriptionText>{description}</DescriptionText>}
</HeaderStack>
);
}