github-featured / comet-ml--opik

发布

0 发布 8,340 Git 标签

RSS 订阅源
  • 2.0.21-5233 f1c92701e2
    比较

    [OPIK-6248] [FE] feat: trace details main content area – tabs, message container, LLM messages, feedback scores, error callout (#6568)

    frostbyte_neo 发布于 2026-05-04 10:17:00 +00:00

    • [OPIK-6248] [FE] feat: trace details main content area – tabs, message container, LLM messages, feedback scores, error callout

    Continues the trace-details main content redesign (PR #6552 covered the
    skeleton loader and tag colors). Reworks the right-pane content area to
    match Figma 457:82978.

    Tabs (2b)

    • Add a new segmented variant to <Tabs> matching the Figma pill style.
    • Switch all five trace-details tabs (Messages, Details, Feedback scores,
      Agent graph, Configuration) from underline to segmented.

    Containers (2c)

    • Add CollapsibleSection primitive — chevron-on-left + label + actions
      slot — for sections that don't need the full code-viewer chrome
      (Attachments, loading skeletons, LLM messages wrapper).
    • Add CodeBlock compound (CodeBlock, CodeBlockBody, CodeBlockCopy,
      CodeBlockModeSelect, CodeBlockSearch) backed by the existing
      useSyntaxHighlighter* hooks. Used by Details Input/Output, Events,
      and the new error callout.
    • DetailsTab, AttachmentsList, EventsList migrated off Radix
      Accordion onto these new primitives.

    LLM messages (2d)

    • Wrap the messages list in <CollapsibleSection title="LLM messages">
      with the expand/collapse and copy-all buttons in the actions slot.
    • Tighten the per-message role label (comet-body-s-accented →
      comet-body-xs-accented, text-light-slate → text-muted-slate).

    Feedback scores (2e)

    • Make ColumnsButton use layout="labeled" and downsize the section
      title to comet-body-xs-accented for the new tabs alignment.

    Error callout (2f)

    • Add ErrorCallout (CodeBlock with destructive border + AlertTriangle
      icon, collapsed by default) rendered above the tabs when
      data.error_info is present.

    Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com

    • [OPIK-6248] [FE] fix: address review comments on segmented tabs and CodeBlock
    • tabs.tsx: switch the new segmented variant from hardcoded bg-white
      to bg-soft-background so the panel respects dark mode (matches the
      rest of the new section primitives).
    • CodeBlockBody.tsx: fix remarkGfm import specifier from the broken
      node_modules/remark-gfm/lib path to the published package
      remark-gfm.

    Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com

    • [OPIK-6248] [FE] fix: address designer polish on trace details main content

    Apply Jolanta's review items: stats bar typography (body-s + 14px muted-slate
    icons), transparent segmented tabs, rotating chevron on the Pretty/Code mode
    selector, hide line-number and fold gutters in trace code blocks, tighten
    tag-to-content gap, fix outline button text weight at 2xs/3xs, and align
    CodeBlock/CollapsibleSection paddings with the spec.

    Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com

    • [OPIK-6248] [FE] fix: muted shortcut letters and code-block icon color

    Address Jolanta's last polish: outline-variant HotkeyDisplay now uses
    text-muted-foreground in light mode so Previous/Next J/K read as muted-grey
    (matches Annotate's A). CodeBlock header search/copy icons switched from
    light-slate to muted-slate for better visibility against the dropdown text.

    Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com

    Co-authored-by: Claude Opus 4.7 noreply@anthropic.com

    下载附件