feat(frontend): consecutive tool call grouping & chat UI improvements by tendtoyj · Pull Request #30 · Fluxloop-AI/pluto-duck

tendtoyj · 2026-02-12T07:44:48Z

Summary

연속 동일 toolName 도구 호출을 하나의 collapsible 그룹으로 묶는 기능 구현 (groupConsecutiveTools() 변환 패스 + ToolGroupRenderer)
Tool detail 렌더링 개선: unified muted box, syntax-highlighted 코드, detail content 유틸리티 추출
Chat UI 스타일 조정: reasoning block 스타일 개선, prose spacing 프로토타입 정렬, collapsible 애니메이션 통일

Related Issues

Fixes PLU-332
Part of PLU-333

Test plan

연속 동일 tool call이 하나의 collapsible 그룹으로 표시되는지 확인
단일 tool call은 기존과 동일하게 렌더링되는지 확인
비연속 동일 tool call(중간에 다른 도구 끼어있는 경우)은 그룹화되지 않는지 확인
스트리밍 중 tool-group이 정상 업데이트되는지 확인
reasoning block 스타일(h3, inline code, 애니메이션) 정상 표시 확인
npm test 통과 확인 (chatRenderGrouping, toolDetailContent, chatItemPadding 테스트)

🤖 Generated with Claude Code

Add node:test coverage for inline text/phase/error/todos label logic.

This reverts commit 9e4ee24.

Add padding-top to h1 for better visual separation from preceding content. Tighten list item line-height from 1.65 to 1.45 and adjust margins/padding to match the compact prototype spacing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Transform **bold-only** lines in reasoning summary content to markdown h3 headings with dedicated typography: 0.9rem/500 weight for headings, compact line-height (1.4), and clear section spacing (20px paragraph margin-bottom). Remove grid gap from reasoning Response wrapper to allow CSS-driven spacing control. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…bles Remove individual Collapsible wrappers from grouped tool children, rendering ToolInput/ToolOutput content directly under the parent group. For write_todos groups, render TodoCheckbox list from the last child's payload instead of raw JSON. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…rows Extend CodeBlock with forceLightTheme, wrapLongLines, and normalizeWhiteTokens props. ToolDetailRow now supports a "code" renderMode that uses CodeBlock for syntax-highlighted JSON display instead of plain text. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Override Streamdown's default text-sm (0.875rem) to 0.7rem for inline code elements inside reasoning/thinking blocks via .not-prose selector. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Radix collapsible CSS animations are no longer needed after aligning tool collapsible with reasoning transition approach. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

tendtoyj · 2026-02-12T07:47:30Z

Code Review Summary

19 files, +1270 / -71, 23 commits
Tests: 156 pass / 0 fail | TypeScript: Clean

✅ Looks Good

ToolGroupItem 타입이 discriminated union으로 타입 안전하게 설계됨
groupConsecutiveTools, deriveGroupState 등 핵심 로직이 순수 함수로 분리되어 테스트 가능
373줄의 그룹핑 테스트가 edge case (cross-run 분리, single item pass-through, streaming 전파, legacy fallback) 포괄적으로 커버
Animation이 Radix 커스텀 keyframe에서 Tailwind animate-in/out으로 통일 (reasoning과 일관)
any 타입 없음, console.log 없음, 기존 컴포넌트 패턴 준수

⚠️ Issues Found

Severity	Location	Issue
MEDIUM	`ToolGroupRenderer.tsx:63`	`renderTodoChildren`에서 `children[children.length - 1]` 빈 배열 방어 없음. 실제론 그룹이 항상 2+ children이라 런타임 안전하지만 방어적 가드 고려
MEDIUM	`codeBlockColorNormalization.ts:3`	regex HTML 파싱은 edge case 취약. 현재 shiki 출력 스코프에서는 안전하며 테스트 존재
LOW	`chatRenderUtils.ts:20`	`'./chatTimelineReducer.ts'` — `.ts` 확장자 명시가 기존 확장자 생략 관례와 불일치
LOW	`ToolRenderer.tsx:106`	`extractContent`가 단순 wrapper로 남아있음. 정리 고려
LOW	`globals.css`	~190줄 chat prose CSS 추가. 향후 파일 분리 고려 가능

📊 Summary

Critical: 0 / High: 0 / Medium: 2 / Low: 3
전반적으로 잘 구조화된 PR. 핵심 그룹핑 로직의 순수 함수 분리와 테스트 커버리지가 우수함.

🤖 Generated with Claude Code

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e0cbb52067

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-02-12T07:52:41Z

+      <Collapsible className="not-prose text-xs group" defaultOpen={false}>
        <CollapsibleTrigger
          className="group/step flex w-full items-center gap-2.5 rounded-[10px] px-2 py-2 pr-3 transition-colors hover:bg-muted/50 disabled:cursor-default"
          disabled={!showChevron}


Keep write_todos content reachable when chevron is hidden

In the write_todos branch, showChevron is only true for completed, and the trigger is disabled when it is false, but this commit also sets defaultOpen={false}. That combination means pending/error write_todos calls with parsed todo items render collapsed content that users cannot open at all, so in-progress todo updates are effectively hidden until completion.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-02-12T07:52:41Z

+ */
+function formatReasoningContent(text: string): string {
+  // Step 1: bold-only lines → h3
+  let result = text.replace(/^\*\*(.+?)\*\*$/gm, '### $1');


Skip heading conversion inside fenced reasoning code blocks

The markdown preprocessor replaces every line matching **...** with an H3 before parsing, without excluding fenced code regions. If reasoning text includes fenced snippets containing such lines, those literal code lines are rewritten into headings (for example, a fenced **bold** line becomes ### bold), which changes the rendered content and can corrupt technical explanations.

Useful? React with 👍 / 👎.

tendtoyj and others added 25 commits February 11, 2026 12:45

feat(frontend): add consecutive tool grouping transform

fbabc8a

feat(frontend): render grouped tool calls with collapsible header

de58422

fix(frontend): default todo tool panel to collapsed

6d14b42

test(frontend): add streaming tool-group regression coverage

9773aa4

feat(frontend): add inline variant to tool renderer

ac85b10

feat(frontend): render grouped tool items inline

863366a

refactor(frontend): extract inline tool view model

f7ca64c

Add node:test coverage for inline text/phase/error/todos label logic.

fix(frontend): rollback grouped inline tool rendering chain

3ddf115

style(frontend): align chat prose spacing with prototype

3d728b7

feat(frontend): detect structured reasoning markdown

9e4ee24

Revert "feat(frontend): detect structured reasoning markdown"

b5727fe

This reverts commit 9e4ee24.

feat(frontend): add tool detail box primitives

f18f94e

refactor(frontend): extract tool detail content utilities

763cd47

feat(frontend): render tool details in unified muted box

97af960

feat(frontend): unify grouped tool detail box rendering

38560ec

style(frontend): reduce tool detail row font size and line height

92841a8

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

style(frontend): add top padding to tool content containers

23e48ae

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

style(frontend): reduce inline code font size in reasoning blocks

7a621fa

Override Streamdown's default text-sm (0.875rem) to 0.7rem for inline code elements inside reasoning/thinking blocks via .not-prose selector. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

fix(frontend): align tool collapsible animation with reasoning

ef3becc

fix(frontend): scope white-token normalization to style color

2c050d6

refactor(frontend): remove unused collapsible animation keyframes

e0cbb52

Radix collapsible CSS animations are no longer needed after aligning tool collapsible with reasoning transition approach. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

tendtoyj changed the title ~~feat(frontend): 연속 tool call 그룹핑 및 Chat UI 스타일 개선~~ feat(frontend): consecutive tool call grouping & chat UI improvements Feb 12, 2026

tendtoyj merged commit cdf0638 into main Feb 12, 2026
1 check passed

tendtoyj deleted the tendtoyj/plu-332-consecutive-tool-call-grouping branch February 12, 2026 07:49

chatgpt-codex-connector Bot reviewed Feb 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(frontend): consecutive tool call grouping & chat UI improvements#30

feat(frontend): consecutive tool call grouping & chat UI improvements#30
tendtoyj merged 25 commits into
mainfrom
tendtoyj/plu-332-consecutive-tool-call-grouping

tendtoyj commented Feb 12, 2026 •

edited

Loading

Uh oh!

tendtoyj commented Feb 12, 2026

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Feb 12, 2026

Uh oh!

chatgpt-codex-connector Bot Feb 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

tendtoyj commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related Issues

Test plan

Uh oh!

tendtoyj commented Feb 12, 2026

Code Review Summary

✅ Looks Good

⚠️ Issues Found

📊 Summary

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tendtoyj commented Feb 12, 2026 •

edited

Loading