refactor: tool card ui

[pedronauck]

Summary by CodeRabbit

• New Features

  • Tool Call Cards: collapsible Input/Output sections with toggles, stable mounting, and improved status indicator iconography (running, success, error).
  • New Markdown renderer with safe-mode rendering and fallback for external images.

• Refactor

  • Unified markdown usage across components for consistent rendering and styling.
  • Tool Call Card rewritten to a slot-driven composition for more predictable interaction and accessibility.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agh-site	Ready	Preview, Comment	May 20, 2026 6:26pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 750a5601-c349-4fa6-825a-9e06f56f19ee

📥 Commits

Reviewing files that changed from the base of the PR and between 9139eec and 4a2ea78.

📒 Files selected for processing (5)

• packages/ui/src/components/custom/__tests__/description-card.test.tsx
• packages/ui/src/components/custom/hooks/use-tool-call-card.ts
• packages/ui/src/components/custom/markdown.tsx
• packages/ui/src/components/custom/tool-call-card.tsx
• web/src/systems/session/components/__tests__/tool-call-card.test.tsx

---

Walkthrough

This PR consolidates markdown rendering into a canonical Markdown component with centralized safe-mode configuration, refactors ToolCallCard from a self-contained component into a context/hook-driven composition system supporting slot-based input/output disclosure, and extracts status visualization into a dedicated ToolCallStatusIcon component. Public exports are reorganized accordingly.

Changes

Markdown Consolidation & Tool Call Card Slot-Based Refactoring

Layer / File(s)	Summary
Markdown component & safe-mode contract packages/ui/src/components/custom/markdown.tsx	Creates new Markdown component with explicit SAFE_DISALLOWED_ELEMENTS allowlist, SafeImage for external URL fallback rendering, centralized STREAMDOWN_SAFE_CONFIG, and memoized component with compact/streaming mode support.
DescriptionCard & StreamMarkdown migrate to Markdown packages/ui/src/components/custom/description-card.tsx, packages/ui/src/components/custom/stream-markdown.tsx	DescriptionCard and StreamMarkdown now consume the canonical Markdown component; STREAMDOWN_SAFE_CONFIG is exported from markdown.
Tool call card context & slot state hooks packages/ui/src/components/custom/hooks/use-tool-call-card.ts	Introduces useToolCallCardContext and useToolCallCardState hooks with slot marker symbols, context-based state management, panel ID generation, and showBody computation based on error/slot/content state.
Tool call status icon component packages/ui/src/components/custom/tool-call-status-icon.tsx	New ToolCallStatusIcon component maps ToolCallStatus to label, tone-specific icon or spinner, with data-status and aria-label attributes.
Tool call card refactoring to slot-based disclosure packages/ui/src/components/custom/tool-call-card.tsx	Refactors ToolCallCard to context-driven composition: removes pill/timestamp rendering, introduces ToolCallCardHeaderChips disclosure buttons, ToolCallCardSlotPanel for registration/rendering, and ToolCallSectionBody routing to CodeBlock or Markdown based on format; body container now always mounts and uses data-empty.
Export reorganization in barrel files packages/ui/src/components/custom/index.ts, packages/ui/src/index.ts	Moves STREAMDOWN_SAFE_CONFIG to markdown exports, removes TOOL_CALL_STATUS_TONE, and adds ToolCallStatusIcon re-export; adjusts DescriptionCard/Markdown exports.
Test updates for new DOM contracts and behavior packages/ui/src/components/custom/__tests__/tool-call-card.test.tsx, packages/ui/src/components/custom/__tests__/description-card.test.tsx, web/src/systems/session/components/__tests__/tool-call-card.test.tsx	Tests updated to validate data-status, aria-label on status indicator, disclosure chip toggle buttons via data-slot selectors, markdown element with data-compact="true", and body wrapper data-empty state assertions; adds input/output toggle coverage and rerender assertions for forwarded Markdown container props.
Storybook stories for updated component API packages/ui/src/components/custom/stories/tool-call-card.stories.tsx	Stories updated with explicit ToolCallCard.Input/Output slot usage, defaultOpen and language props; new stories demonstrate CodeBlock integration and stacked card configurations.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 13.79% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'refactor: tool card ui' is vague and overly broad, using generic terms that don't convey specific information about the substantial changes in the PR.	Consider a more specific title that highlights key changes, such as 'refactor: migrate ToolCallCard to context-based composition with slot registration' or 'refactor: extract Markdown component and refactor ToolCallCard disclosure UI'.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

packages/ui/src/components/custom/tool-call-card.tsx (1)

54-59: 💤 Low value

Consider importing SLOT_ORDER from the hook module.

SLOT_ORDER is defined identically in both this file and use-tool-call-card.ts. If the order ever changes, both must be updated.

♻️ Suggested refactor

In use-tool-call-card.ts, export the constant:

-const SLOT_ORDER: ToolCallSectionSlot[] = ["input", "output"];
+export const SLOT_ORDER: ToolCallSectionSlot[] = ["input", "output"];

Then in this file:

 import {
   ToolCallCardContext,
   TOOL_CALL_INPUT_SLOT,
   TOOL_CALL_OUTPUT_SLOT,
+  SLOT_ORDER,
   useToolCallCardContext,
   useToolCallCardState,
   type ToolCallSectionSlot,
 } from "./hooks/use-tool-call-card";
-
-const SLOT_ORDER: ToolCallSectionSlot[] = ["input", "output"];

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/custom/tool-call-card.tsx` around lines 54 - 59,
SLOT_ORDER is duplicated here and in the hook module; export the existing
SLOT_ORDER from use-tool-call-card (keep its ToolCallSectionSlot type there) and
remove the local SLOT_ORDER constant from this file, then import SLOT_ORDER into
tool-call-card.tsx and keep the local SLOT_LABEL mapping only; update any
references to use the imported SLOT_ORDER to ensure a single source of truth.

packages/ui/src/components/custom/hooks/use-tool-call-card.ts (1)

12-23: 💤 Low value

Prefer interface over type for object shapes.

Per coding guidelines, use interface for defining object shapes in TypeScript/React files.

♻️ Suggested refactor

-export type SlotRegistration = {
+export interface SlotRegistration {
   defaultOpen: boolean;
-};
+}

-export type ToolCallCardContextValue = {
+export interface ToolCallCardContextValue {
   registerSlot: (slot: ToolCallSectionSlot, registration: SlotRegistration) => void;
   unregisterSlot: (slot: ToolCallSectionSlot) => void;
   registeredSlots: Partial<Record<ToolCallSectionSlot, true>>;
   openSlots: Record<ToolCallSectionSlot, boolean>;
   toggleSlot: (slot: ToolCallSectionSlot) => void;
   panelIds: Record<ToolCallSectionSlot, string>;
-};
+}

As per coding guidelines: "Prefer interface over type for defining object shapes in TypeScript/React".

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/custom/hooks/use-tool-call-card.ts` around lines
12 - 23, Replace the object-shaped type aliases with interfaces: change the type
alias SlotRegistration to an interface named SlotRegistration and change the
ToolCallCardContextValue type alias to an interface named
ToolCallCardContextValue, keeping the same property names and signatures
(registerSlot, unregisterSlot, registeredSlots, openSlots, toggleSlot, panelIds)
and types (including ToolCallSectionSlot and SlotRegistration usage) so external
consumers and imports remain unchanged.

packages/ui/src/components/custom/markdown.tsx (1)

213-224: 💤 Low value

Custom memo comparison ignores spread props.

The arePropsEqual function only compares children, compact, streaming, components, and className, but MarkdownProps extends ComponentProps<"div">. Additional props like style, id, aria-*, or event handlers will be silently ignored on prop changes.

If these props are expected to be static in practice, consider documenting this behavior. Otherwise, remove the custom comparison to let React.memo use shallow equality on all props.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/custom/markdown.tsx` around lines 213 - 224, The
custom memo comparator on the Markdown component (the function passed to
React.memo wrapping MarkdownInner) only checks children, compact, streaming,
components, and className, which ignores any other props coming from
MarkdownProps (ComponentProps<'div'>) such as style, id, aria-*, or event
handlers; either remove the custom comparator so React.memo uses default shallow
equality for all props, or update the comparator to also shallow-compare the
rest of props (e.g., compare remaining keys or use a shallow-equal helper) to
ensure changes to spread/native props are detected for the Markdown component
and its wrapper (MarkdownInner).

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/src/systems/session/components/__tests__/tool-call-card.test.tsx`:
- Line 55: Replace brittle CSS-literal assertions that check
indicator?.classList.contains("animate-spin") (and the similar checks at the
other occurrences) with semantic assertions against the component's public
contract: assert the element's data-status, aria-label, or test-id values
instead (e.g.,
expect(getByTestId(...).getAttribute('data-status')).toBe('loading') or
expect(getByLabelText('...')).toBeInTheDocument()) so tests validate behavior
via data-status/aria/testid rather than specific CSS class names; update all
occurrences that use classList.contains("animate-spin") accordingly.

---

Nitpick comments:
In `@packages/ui/src/components/custom/hooks/use-tool-call-card.ts`:
- Around line 12-23: Replace the object-shaped type aliases with interfaces:
change the type alias SlotRegistration to an interface named SlotRegistration
and change the ToolCallCardContextValue type alias to an interface named
ToolCallCardContextValue, keeping the same property names and signatures
(registerSlot, unregisterSlot, registeredSlots, openSlots, toggleSlot, panelIds)
and types (including ToolCallSectionSlot and SlotRegistration usage) so external
consumers and imports remain unchanged.

In `@packages/ui/src/components/custom/markdown.tsx`:
- Around line 213-224: The custom memo comparator on the Markdown component (the
function passed to React.memo wrapping MarkdownInner) only checks children,
compact, streaming, components, and className, which ignores any other props
coming from MarkdownProps (ComponentProps<'div'>) such as style, id, aria-*, or
event handlers; either remove the custom comparator so React.memo uses default
shallow equality for all props, or update the comparator to also shallow-compare
the rest of props (e.g., compare remaining keys or use a shallow-equal helper)
to ensure changes to spread/native props are detected for the Markdown component
and its wrapper (MarkdownInner).

In `@packages/ui/src/components/custom/tool-call-card.tsx`:
- Around line 54-59: SLOT_ORDER is duplicated here and in the hook module;
export the existing SLOT_ORDER from use-tool-call-card (keep its
ToolCallSectionSlot type there) and remove the local SLOT_ORDER constant from
this file, then import SLOT_ORDER into tool-call-card.tsx and keep the local
SLOT_LABEL mapping only; update any references to use the imported SLOT_ORDER to
ensure a single source of truth.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e8621928-d37f-4031-b983-b5369f46b418

📥 Commits

Reviewing files that changed from the base of the PR and between cb7a24b and 9139eec.

📒 Files selected for processing (12)

• packages/ui/src/components/custom/__tests__/description-card.test.tsx
• packages/ui/src/components/custom/__tests__/tool-call-card.test.tsx
• packages/ui/src/components/custom/description-card.tsx
• packages/ui/src/components/custom/hooks/use-tool-call-card.ts
• packages/ui/src/components/custom/index.ts
• packages/ui/src/components/custom/markdown.tsx
• packages/ui/src/components/custom/stories/tool-call-card.stories.tsx
• packages/ui/src/components/custom/stream-markdown.tsx
• packages/ui/src/components/custom/tool-call-card.tsx
• packages/ui/src/components/custom/tool-call-status-icon.tsx
• packages/ui/src/index.ts
• web/src/systems/session/components/__tests__/tool-call-card.test.tsx