Message Display Design Options

Three approaches for displaying tool calls, thinking/reasoning, and content in the MassGen WebUI agent channel. Each optimizes for different tradeoffs between information density, progressive disclosure, and scanability.

Option A — "Timeline Lane"

Inspired by: GitHub Actions, CI/CD pipelines.
All messages flow in a continuous vertical lane with a subtle left-border timeline. Tool calls are minimal single-line items. Content/thinking gets visual weight through indentation and color. Everything is scannable at a glance — no nested trees.

1
agent a gpt-5.4
Round 1
Reasoning

I need to create a decision journal first, then handle the plan items. Let me start by setting up the workspace structure...

codex_shell mkdir -p tasks && cat > tasks/changedoc.md 2ms
codex_shell mkdir -p memory/short_term && ls -la memory 2ms
+3 more tool calls

Step 3: I'm checking whether any prior memory context exists, then I'll save the verification trail and final poem.

★ agent1.1 submitted
▸ click to expand

Love is the hush between two storms, a candle cupped in careful hands, a door left open in the cold, a name said softly in an empty room, a quiet choosing, a gentle becoming...

Design A — Timeline Lane
• Tool calls are flat single-line items with timeline dots — no nested tree/chevrons
• Thinking/reasoning uses a left-border accent stripe (purple) — visually distinct from content
• Content sits inside the same timeline lane (left-border continuation) — stays in flow
• Answers/votes use left-border accent + background tint
• "+N more" replaces both the tree and the header chevron

Option B — "Compact Cards"

Inspired by: Windsurf cascade panel, Slack message blocks.
Each message type gets a distinct card shape. Tool batches are a single summary card that expands inline. Content gets proper markdown-style rendering. Maximum visual hierarchy through card differentiation.

1
agent a gpt-5.4
Round 1
Thinking

I need to create a decision journal first, then handle the plan items. Let me start by setting up the workspace structure...

codex_shell × 5 calls
8ms total
↑ 2 earlier calls
cat tasks/changedoc.md 1ms
find memory -maxdepth 2 -type f | sort 1ms
mkdir -p deliverable tasks/evolving_skill 1ms

Step 3: I'm checking whether any prior memory context exists, then I'll save the verification trail and final poem.

vote1.1 Voted for agent_a (gpt-5.4)

agent1 directly answers the original request with a polished, evocative love poem. It is concise, emotionally resonant, and no iteration is needed.

Design B — Compact Cards
• Tool batch is a single bordered card with summary header + flat list inside (no tree connectors)
• "↑ N earlier calls" instead of tree-branch notation — cleaner
• Tool rows show only: status dot + command + elapsed. No tool name repetition inside batch
• Thinking uses a thin left bar (3px) without a background fill — lighter visual weight
• Content text is larger (14px) and unstyled — the "main" thing you're reading

Option C — "Terminal Hybrid"

Inspired by: Claude Code CLI, terminal output, VS Code debug console.
Maximum information density. Tool calls use an inline "command prompt" look. Thinking is de-emphasized (dimmed, indented). Content stands alone. Everything is flat — no cards, no boxes, just typography and color.

1
agent a gpt-5.4
Round 1

I need to create a decision journal first, then handle the plan items...

● $ mkdir -p tasks && cat > tasks/changedoc.md <<'EOF' # Change Document... 2ms
● $ mkdir -p memory/short_term .massgen_scratch/verification && ls -la memory 2ms
● $ ... 3 more calls (cat, find, mkdir)
4ms

Step 3: I'm checking whether any prior memory context exists, then I'll save the verification trail and final poem.

● codex_shell × 2 cat tasks/changedoc.md, find memory -maxdepth 2 2ms
★ agent1.1 submitted answer

Love is the hush between two storms, a candle cupped in careful hands, a door left open in the cold, a name said softly in an empty room...

vote1.1 → agent_a polished, evocative love poem — no iteration needed
Design C — Terminal Hybrid
• Tool calls look like terminal commands: ● $ command... — no badges, no boxes
• Thinking is extremely de-emphasized: small, dimmed, with a 1px left border
• Collapsed batches show a comma-separated summary of tool names
• Vote is a single inline row — no card at all, just icon + target + truncated reason
• Maximum vertical density — more content visible per screen

Side-by-Side: Tool Batch Comparison

The same 5-tool batch shown in all three styles to compare density and readability.

A — Timeline
mkdir -p tasks && cat > tasks/changedoc.md 2ms
mkdir -p memory/short_term && ls -la memory 2ms
cat tasks/changedoc.md 1ms
+2 more calls
B — Card
codex_shell × 5
8ms
↑ 2 earlier
cat tasks/changedoc.md 1ms
find memory -maxdepth 2 -type f 1ms
mkdir -p deliverable tasks/evolving_skill 1ms
C — Terminal
● $ mkdir -p tasks && cat > tasks/changedoc.md 2ms
● $ mkdir -p memory/short_term && ls -la memory 2ms
● $ cat tasks/changedoc.md 1ms
● $ ... 2 more (find, mkdir)
2ms
Current
codex_shell ×5
8ms
├─ (+2 earlier)
├─
codex_shellcat tasks/changedoc.md1ms
├─
codex_shellfind memory -maxdepth 21ms
└─
codex_shellmkdir -p deliverable1ms

Recommendation

Suggested approach: Mix of B + C

Tool calls → Use C's terminal style (● $ command) for individual tools and single calls. For batches (2+), use B's compact card with the summary header but C's flat rows inside (no tree connectors, no repeated tool name).

Thinking/reasoning → Use C's minimal style: dimmed italic with a thin 1px left border. Thinking is secondary — it shouldn't take more visual space than the content it produces. Always start collapsed.

Content → Use B's clean text: 14px, full text color, no wrapper. This is what the user is here to read.

Answers → Keep the current yellow-tinted card (works well). Add click-to-expand as implemented.

Votes → Use C's inline row for most cases (more compact). Only use a card if the reason is very long.