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
