Add image extraction and Images tab to DetailsView - #142
Conversation
Extract pure image-detection helpers (isImageSource, extractImagePaths, extractAttributeImages, spanHasImages) into packages/data with vitest coverage. Add ImageBadge, ImageViewer/ImageGallery, and a DetailsViewImagesTab that surfaces images scraped from a span's input/output and the claude_code.images attribute. The Images tab is shown in DetailsView only when the span actually exposes images.
|
Warning Review limit reached
Next review available in: 11 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (10)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Adds end-to-end image support to the trace viewer by introducing pure image-extraction helpers in packages/data and surfacing extracted images in the UI via a new conditional Images tab in DetailsView, plus supporting viewer/badge components and Storybook coverage.
Changes:
- Added image-detection/extraction utilities (
extractImagePaths,extractAttributeImages,spanHasImages) with new vitest coverage inpackages/data. - Introduced UI components for displaying images (
ImageViewer/ImageGallery) and anImagestab (DetailsViewImagesTab), then gated the tab inDetailsView. - Exported new UI components from the UI barrel and added Storybook stories demonstrating image and empty states.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/index.ts | Exports new image-related UI components and their ?raw sources. |
| packages/ui/src/components/ImageViewer.tsx | Adds image preview/gallery UI with modal expansion and loading/error states. |
| packages/ui/src/components/ImageBadge.tsx | Adds a badge component for spans that carry images. |
| packages/ui/src/components/DetailsView/DetailsViewImagesTab.tsx | Adds the Images tab content rendering (input/output galleries + paths list). |
| packages/ui/src/components/DetailsView/DetailsView.tsx | Adds conditional Images tab visibility via spanHasImages. |
| packages/storybook/src/stories/DetailsViewImagesTab.stories.tsx | Adds Stories for the Images tab scenarios (input/output, attributes, empty). |
| packages/storybook/src/stories/DetailsView.stories.tsx | Adds a WithImages story demonstrating the gated Images tab. |
| packages/data/src/index.ts | Exports the new image-extraction helpers from the data package. |
| packages/data/src/common/extract-image-paths.ts | Implements new pure image-detection/extraction logic and the spanHasImages predicate. |
| packages/data/src/common/extract-image-paths.test.ts | Adds unit tests covering new image helper behaviors. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const [tab, setTab] = useState<DetailsViewTab>(defaultTab); | ||
|
|
||
| const tabItems = useMemo( | ||
| () => (spanHasImages(data) ? [...TAB_ITEMS, IMAGES_TAB_ITEM] : TAB_ITEMS), | ||
| [data], | ||
| ); |
| onKeyDown={ | ||
| expandable ? (e) => e.key === "Enter" && handleClick() : undefined | ||
| } |
| const [isExpanded, setIsExpanded] = useState(false); | ||
| const [hasError, setHasError] = useState(false); | ||
| const [isLoading, setIsLoading] = useState(true); | ||
|
|
| className, | ||
| ...rest | ||
| }: ImageBadgeProps): ReactElement => { | ||
| const label = count && count > 1 ? `${count} Images` : "Image"; |
| const buildEntries = (paths: string[], label: "Input" | "Output") => | ||
| paths.map((src) => ({ | ||
| src, | ||
| caption: `${label}: ${src.split("/").pop() || src}`, |
| function isImageContentBlock(obj: unknown): obj is ImageContentBlock { | ||
| return ( | ||
| typeof obj === "object" && | ||
| obj !== null && | ||
| "type" in obj && | ||
| (obj as { type: unknown }).type === "image" && | ||
| "source" in obj && | ||
| typeof (obj as { source: unknown }).source === "object" && | ||
| (obj as { source: { data: unknown } }).source !== null && | ||
| "data" in (obj as { source: object }).source | ||
| ); | ||
| } |
Summary
Adds end-to-end image support to the trace viewer: pure image-detection helpers in
@evilmartians/agent-prism-data, anImagestab inDetailsViewthat surfaces images found in a span, plus the supportingImageBadgeandImageViewer/ImageGallerycomponents. The tab is shown only when the span actually exposes images, and stays hidden otherwise.Ported from the internal
agent-prism-saasrepo (PR 3 of the open-source port backlog).What's included
packages/data— pure, unit-tested helpersNew
src/common/extract-image-paths.ts:isImageSource— recognizes data URIs and image file extensions (case-insensitive)extractImagePaths— pulls images out of fbase64 data URLs from Anthropic-styleimagecontent blocks (defaults media type toimage/png), file paths via regex, and inlinedata:image/...;base64,...URLs; deduplicates the resultextractAttributeImages— reads the JSON array carried on theclaude_code.imagesspan attribute; returns[]when absent or malformedspanHasImages— predicate mirroring the tab's extraction, used to gate tab visibilityCovered by 11 vitest cases.
packages/ui— componentsImageBadge— badge shown on spans that carry imagesImageViewer/ImageGallery— image preview with expand-to-modal, loading and error statesDetailsView/DetailsViewImagesTab— renders input/output image galleries and the raw image-path listDetailsView— adds the conditionalImagestab, gated onspanHasImages(data)All three components (and their
?rawsource strings) are exported from the UI barrel.packages/storybookDetailsViewImagesTab.stories.tsx— input/output paths, a real base64 image, and the empty stateDetailsView.stories.tsx— aWithImagesstory demonstrating the gated tabDesign notes
data(pure, DOM-free, fast to test) while rendering stays inui. ThespanHasImagespredicate is the seam that lets tab-visibility be decided and tested without React.DetailsView(a pure function of the span), rather than only showing an empty state inside the tab.ImageBadgeuses the repo'sBadgeidiom (unstyled+cn(...)) so its color classes don't collide withBadge's default background.Verification
eslint .— clean (0 errors)prettier --check— cleanpnpm buildgreen:types → data → ui → storybook → saas, includingstorybook buildvitest— 11/11 new tests pass (368 inpackages/data)