Build exactly one reusable frontend UI component that reprod...

Prompt

Build exactly one reusable frontend UI component that reproduces the supplied research/search activity component with high visual and interaction fidelity. Success means that the rendered component matches the reference in structure, spacing, typography, icon sizing, muted dark styling, truncation, expandable source list behavior, scrolling, accessibility, and responsive behavior—without implementing any surrounding page or unrelated UI. The component must be self-contained and must not depend on the original HTML, CSS, JavaScript, DOM structure, or source code. All visible content must be provided through runtime data. Scope Implement one compact activity component consisting of: one activity row
an optional expandable source results control
an optional source list shown below the control. The component must support two runtime configured variants: 1. An analysis activity containing an icon and text. 2. A search activity containing an icon, text, source count control, and expandable source list. The component must support search activities with zero, one, or multiple sources. Each rendered instance must manage its own expanded/collapsed state. Layout The root component must use a compact vertical flex layout: display: flex
flex direction: column
approximately 12px vertical gap
no outer card
no visible background
no large padding
no decorative container. It must be suitable for rendering inside an existing vertical activity feed. The component must not impose a fixed width or height. It should occupy the width provided by its parent while preventing horizontal overflow. Activity row The primary row must contain: one decorative icon
one text label. Use: horizontal flex layout
vertically centered items
approximately 6px gap
compact system UI typography around 13–14px
muted tertiary text
no border
no shadow
no visible background. The text must: remain on one line
truncate with an ellipsis
use min width: 0
occupy the remaining width
never create horizontal overflow. Use a system font stack equivalent to: apple system
BlinkMacSystemFont
SF Pro Text
SF Pro Display
Helvetica Neue
Arial
sans serif. Use antialiased text rendering and slightly tightened letter spacing. Activity icons Use a small icon around 14px. For analysis activities, use a brain/thought icon. For search activities, use a magnifying glass icon. Icons must: inherit the muted tertiary text color
remain visually secondary
not affect the row height
not be interactive
be hidden from assistive technology when decorative
use flex: 0 0 auto. Use the existing icon library if available otherwise use an equivalent vector icon. Do not use emoji or text characters as icon substitutes. Search activity structure A search activity must contain: 1. The primary activity row. 2. A compact accordion trigger. 3. An expandable source panel. The accordion trigger must appear directly below the activity row with only compact spacing. When the source collection is empty, the component API must determine whether the accordion is omitted or rendered disabled. Choose one behavior, document it in the implementation, and apply it consistently. The preferred behavior is to omit the accordion when there are no sources, unless the parent explicitly requests a disabled zero state control. Accordion trigger Use a real <button type="button">. It must contain: a small right pointing chevron
a dynamic source count label. Use approximately: 4px horizontal padding
2px vertical padding
6px gap between chevron and label
transparent background
no visible border
compact height
muted tertiary text and icon color. The control should look like an inline text control rather than a conventional button. On hover, slightly increase contrast without adding a strong background. On press, apply only a subtle visual response, such as a small opacity or scale change. Provide a visible but restrained :focus visible state. The button must not submit any surrounding form. Chevron behavior Use a small icon around 14px. Collapsed: points right. Expanded: rotates approximately 90 degrees and points down. Animate the rotation with a short, smooth transition. Disable or minimize the transition when prefers reduced motion: reduce is active. The chevron must not change the layout width when it rotates. Dynamic source count Generate the label from runtime data. Derive the count from the supplied source collection unless an explicit count is part of the API. Support: zero
one
many. The rendered label must follow this structure: <dynamic count> sources found The count must never be hardcoded. If the component omits the accordion for zero sources, the zero source behavior must still be handled safely without rendering an invalid or misleading count control. Accessibility The accordion trigger must include: aria expanded
aria controls
a stable panel ID. Use: aria expanded="false" when collapsed
aria expanded="true" when expanded. The controlled panel must reflect its actual visibility state. When collapsed: source links must not remain keyboard focusable
hidden content must not remain interactable
the implementation must not rely only on opacity or transforms to hide it
use conditional rendering, the hidden attribute, or an equivalent accessibility safe mechanism. When expanded: all source links must be keyboard accessible. Decorative icons must be hidden from assistive technology. The component must expose a meaningful accessible name for the activity text through the visible text or an equivalent semantic label. Source panel The source panel must appear directly below the accordion trigger. It must have: compact top spacing
no card background
no large border
no independent decorative surface
no excessive padding. It should feel like a continuation of the activity rather than a separate card. The panel must not create a second unnecessary landmark or heading structure. Source list Render runtime provided sources in a vertical list. Use: vertical flex layout
compact gaps
bounded height
vertical scrolling when necessary
enough right side space for comfortable scrolling
hidden native scrollbar appearance. The list should have a maximum height of approximately 108px at the reference sized layout. It may scale slightly responsively, but it must remain compact and must not expand indefinitely with the number of sources. The source list must not cause the surrounding page to grow excessively. Use touch friendly scrolling behavior where supported, while keeping the component’s compact height. The list must preserve normal keyboard scrolling when focused or when a keyboard user navigates through its links. Source list fade Add a subtle fade toward the lower overflow boundary using a CSS mask or another performant equivalent. The fade must: remain subtle
not hide the first visible item
not block pointer events
not interfere with scrolling
adapt to the list height
not look like a large gradient panel. The fade must not be shown as an artificial overlay when the source list does not overflow. If overflow detection is implemented, update it correctly when the source collection or component width changes. If overflow detection is not implemented, use a restrained mask that does not materially obscure content. Source items Each source must be rendered as a real external link. Each row must contain: 1. A small globe/source icon. 2. The source title. 3. The source domain. Use: horizontal flex layout
approximately 6px icon to text spacing
compact row height
no card background
no visible border
no unnecessary padding. Each source row must have a stable layout that prevents long titles or domains from causing horizontal overflow. Source icon Use a globe or web source icon around 14px. It must: inherit the muted tertiary color
remain visually secondary
be non interactive
not consume excessive width
be hidden from assistive technology when decorative
use flex: 0 0 auto. Source title The title must come from runtime data. It must: remain on one line
truncate with an ellipsis
use min width: 0
occupy the primary flexible area
never push the domain outside the component
use approximately 13px system UI typography
use muted tertiary text. On hover, increase contrast subtly. The title area must be allowed to shrink before the domain area is removed. Source domain The domain must come from runtime data. It must: remain on one line
align to the right side of the row
use a constrained maximum width
truncate with an ellipsis
use approximately 11–12px typography
have slightly lower emphasis than the title
use flex: 0 1 auto or an equivalent constrained layout rule. The domain must not consume the entire row or force horizontal overflow. On very narrow widths, the domain may shrink more aggressively than the title, but it must remain visible unless the available width makes that impossible. Link behavior Every source row must be a real link. The URL must come from runtime data. For external destinations, use an appropriate new browsing context and secure external link attributes: target="_blank" where a new context is required
rel="noopener noreferrer". Do not use fake click handlers instead of real links. The link must preserve normal keyboard activation and browser context menu behavior. Expanded and collapsed states Collapsed: only the activity row and accordion trigger are visible
the source panel occupies no meaningful layout space
the chevron points right
aria expanded is false
source links are not focusable
the source panel is hidden accessibly. Expanded: the source panel is visible
the chevron points down
the source list scrolls when necessary
source links are accessible
aria expanded is true. The transition must be subtle and must not cause layout glitches. If an animated height transition is used, it must not leave hidden links in the accessibility tree and must not rely on an unbounded max height hack that clips content unpredictably. Visual style The component belongs in a nearly black dark interface. Use: transparent backgrounds
muted near white text
tertiary text around rgba(245,245,247,.28)
slightly stronger muted text where readability requires it
no opaque cards
no strong accent panel
no large shadows
no decorative gradients. The component must feel quiet, compact, and integrated into the surrounding dark UI. Do not add a visible border around the entire component. Interaction states Implement: default
hover
focus visible
pressed
expanded
collapsed
disabled, when supported by the API. Hover styles should apply only on pointer capable devices. Focus styling must be visible but restrained. Disabled controls must: be non interactive
expose the disabled state semantically
use reduced contrast
not appear expandable. Responsive behavior The component must work at arbitrary widths. On narrow screens: activity text truncates
source titles truncate
domains truncate
icons retain their size
the source list remains usable
no horizontal overflow occurs. On wider screens: flexible text areas may use additional width
the component remains compact. The component must not require a minimum desktop width. Runtime data API Define a strongly typed data model containing at least: activity ID
activity type
activity text
optional source collection
source ID
source title
source URL
source domain. The component must render arbitrary runtime data. If an explicit source count is supported, define its precedence clearly. The preferred behavior is to derive the count from the source collection so the displayed count cannot become inconsistent with the rendered list. The activity ID must be suitable for generating stable, collision resistant DOM IDs. Do not use unsanitized arbitrary text directly as an HTML ID without normalization or a safe ID generation strategy. Reusability The component must work when: rendered alone
rendered repeatedly in a parent activity feed
rendered with analysis data
rendered with search data
rendered with zero sources
rendered with one source
rendered with many sources. Expansion state must be local to each instance. One component instance must never accidentally expand or collapse another. If the component supports controlled and uncontrolled expansion, define the behavior clearly and ensure that controlled state does not become stale when the source data changes. Reduced motion Respect prefers reduced motion. When reduced motion is enabled: remove or minimize transitions
disable decorative movement
preserve all functionality
keep expanded/collapsed state changes immediate or nearly immediate. Browser and interaction robustness The component must: avoid horizontal page overflow
avoid accidental form submission
preserve keyboard navigation
preserve native link behavior
support touch scrolling
avoid relying on hover for essential functionality
avoid layout shifts when the accordion opens
handle long text safely
handle missing optional source data safely
remain usable when rendered multiple times. Production requirements Provide a complete, executable, reusable component implementation. Include all required files and imports. All visible content must be supplied through runtime data. The final implementation must be directly usable with real runtime data and must preserve the compact activity structure, muted dark typography, inline accordion behavior, dynamic source count, source alignment, bounded scrolling, subtle overflow fade, accessibility state, independent instance state, responsive truncation, and reduced motion behavior. Do not provide: pseudocode
abbreviated snippets
omitted code
placeholders
mock data
dummy data
fake links
TODO implementations
incomplete imports
nonexistent dependencies
unrelated UI components
an entire page implementation.

A system prompt was added to support web rendering