Skip to content

💄 style(tool-ui): render ANSI escape codes in RunCommand output#15516

Merged
arvinxx merged 1 commit into
canaryfrom
feat/ansi-output-render
Jun 6, 2026
Merged

💄 style(tool-ui): render ANSI escape codes in RunCommand output#15516
arvinxx merged 1 commit into
canaryfrom
feat/ansi-output-render

Conversation

@arvinxx

@arvinxx arvinxx commented Jun 6, 2026

Copy link
Copy Markdown
Member

💻 Change Type

  • ✨ feat

🔀 Description of Change

Shell tools (e.g. agent-tracing inspect, ls --color, anything that uses chalk) emit ANSI SGR escape sequences in their stdout. The RunCommand render currently passes that raw text into <Highlighter language={'text'}>, so the user sees literal [2m, [32m, [22m noise instead of the colored / dimmed output the terminal would show.

This PR adds a small AnsiOutput component that:

  • parses the text with anser (~10KB, zero deps, no dangerouslySetInnerHTML)
  • emits styled <span>s honoring foreground/background color, dim, bold, italic, underline, strikethrough
  • preserves the existing visual container (colorFillTertiary background, fontFamilyCode, maxHeight: 200 + scroll, pre-wrap wrapping)

Plain (no-ANSI) output renders as a single segment — no visual regression.

The args.command line keeps using <Highlighter language={'sh'}> since shell syntax highlighting is still desirable there.

🧪 How to Test

  • Tested locally
  • Added/updated tests
  • No tests needed

Run any agent step that invokes a shell command producing ANSI output, e.g.:

agent-tracing inspect op_xxx 2>&1 | tail -15

Confirm the tree-drawing characters appear dimmed and tool_calls arrows / success ticks pick up their original colors instead of showing [2m / [32m literals.

📸 Screenshots / Videos

Before After
Raw [2m...[22m escape sequences shown as text Dim / colored output matching terminal rendering

📝 Additional Information

  • New dep: anser@2.3.5 added to packages/shared-tool-ui (private package, not shipped as standalone).
  • No API / contract changes; consumers of @lobechat/shared-tool-ui/renders are unaffected.

🤖 Generated with Claude Code

Parse ANSI SGR sequences in shell stdout/stderr with anser and emit
styled spans for fg/bg colors, dim, bold, italic, underline, strikethrough.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@dosubot dosubot Bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Jun 6, 2026
@vercel

vercel Bot commented Jun 6, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
lobehub Ready Ready Preview, Comment Jun 6, 2026 5:31pm

Request Review

@dosubot dosubot Bot added the feature:tool Tool calling and function execution label Jun 6, 2026

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've reviewed this pull request using the Sourcery rules engine

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7946375036

ℹ️ 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".

Comment thread packages/shared-tool-ui/src/Render/RunCommand/AnsiOutput.tsx
@codecov

codecov Bot commented Jun 6, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.69%. Comparing base (573cc5b) to head (7946375).

Additional details and impacted files
@@           Coverage Diff            @@
##           canary   #15516    +/-   ##
========================================
  Coverage   70.69%   70.69%            
========================================
  Files        3277     3277            
  Lines      323408   323408            
  Branches    29521    28570   -951     
========================================
+ Hits       228641   228643     +2     
+ Misses      94584    94582     -2     
  Partials      183      183            
Flag Coverage Δ
app 61.40% <ø> (+<0.01%) ⬆️
database 92.47% <ø> (ø)
packages/agent-manager-runtime 49.69% <ø> (ø)
packages/agent-runtime 81.06% <ø> (ø)
packages/builtin-tool-lobe-agent 18.52% <ø> (ø)
packages/context-engine 84.19% <ø> (ø)
packages/conversation-flow 91.29% <ø> (ø)
packages/device-gateway-client 90.18% <ø> (ø)
packages/eval-dataset-parser 95.15% <ø> (ø)
packages/eval-rubric 76.11% <ø> (ø)
packages/fetch-sse 85.57% <ø> (ø)
packages/file-loaders 87.89% <ø> (ø)
packages/memory-user-memory 74.99% <ø> (ø)
packages/model-bank 99.99% <ø> (ø)
packages/model-runtime 84.22% <ø> (ø)
packages/prompts 72.51% <ø> (ø)
packages/python-interpreter 92.90% <ø> (ø)
packages/ssrf-safe-fetch 0.00% <ø> (ø)
packages/types 35.38% <ø> (ø)
packages/utils 84.98% <ø> (ø)
packages/web-crawler 88.08% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Components Coverage Δ
Store 68.40% <ø> (ø)
Services 54.77% <ø> (ø)
Server 72.01% <ø> (+<0.01%) ⬆️
Libs 54.49% <ø> (ø)
Utils 81.71% <ø> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@arvinxx arvinxx changed the title ✨ feat(tool-ui): render ANSI escape codes in RunCommand output 💄 style(tool-ui): render ANSI escape codes in RunCommand output Jun 6, 2026
@arvinxx arvinxx merged commit 28f0117 into canary Jun 6, 2026
56 of 57 checks passed
@arvinxx arvinxx deleted the feat/ansi-output-render branch June 6, 2026 17:34
arvinxx added a commit that referenced this pull request Jun 10, 2026
# 🚀 LobeHub Release (20260610)

**Release Date:** June 10, 2026  
**Since v2.2.2:** 131 merged PRs · 13 contributors

> This weekly release strengthens agent collaboration across cloud,
desktop, CLI, and workspace flows, with steadier runtime behavior and a
broader foundation for workspace-scoped data.

---

## ✨ Highlights

- **Agent execution across devices** — Unifies per-device working
directories, project skill discovery, and sub-agent suspend/resume
behavior across server, QStash, and device RPC flows. (#15543, #15566,
#15481, #15620, #15591)
- **Connector and sandbox platform** — Expands connector permissions,
custom OAuth MCP connector onboarding, sandbox provider support, and
user-uploaded file sync into cloud sandbox runs. (#15463, #15546,
#15184, #15550)
- **Desktop and CLI reliability** — Fixes desktop cold-start,
auto-update, Windows build, CLI skill discovery, and `lh connect` agent
dispatch paths. (#15547, #15525, #15527, #15562, #15632, #15634)
- **Pages and sharing** — Refreshes topic sharing, improves Page Editor
layout behavior, and routes Page Agent tool execution through the
server-side editor path. (#15581, #15556, #15588, #15023, #15610)
- **Model availability and provider updates** — Adds user-scoped LobeHub
model availability, Claude Fable 5, Qwen thinking preservation, and
MiniMax M3 updates. (#15590, #15639, #13494, #15376)

---

## 🏗️ Core Product & Architecture

### Agent Runtime & Heterogeneous Agents

- Improves sub-agent lifecycle handling, including async suspend/resume,
queue-mode QStash resume delivery, and blocking nested sub-agent calls.
(#15481, #15620, #15575)
- Stabilizes heterogeneous agent ingestion and streaming with raw stream
dumps, per-turn usage, image forwarding on regenerate, and
duplicate-text fixes. (#15602, #15577, #15592, #15585)
- Adds execution-device and working-directory controls across device
RPC, legacy defaults, and remote-spawned Claude Code sessions. (#15543,
#15566, #15591, #15572)
- Improves runtime diagnostics and compatibility, including Gemini
multimodal output capture, abort stream semantics, and trace quality
analysis. (#15535, #13677, #15508)

---

## 📱 Platforms, Integrations & UX

### Connectors, Sandbox & Tools

- Ships API-level connector tool permissions, custom OAuth MCP connector
onboarding, and connector-first runtime execution. (#15463, #15546)
- Adds sandbox provider support, cloud sandbox file sync, and safer
external URL file input handling with SSRF validation. (#15184, #15550,
#12657)
- Improves tool visibility and execution with pinned app-fixed tools,
ANSI output rendering, gateway-tunneled MCP calls, and automatic
headless tool runs. (#15509, #15516, #15469, #15492)

### Desktop, CLI & Web UX

- Restores desktop startup and reload behavior, preserves IPC error
causes, and keeps the tab bar new-tab action visible across routes.
(#15547, #15597, #15638)
- Fixes desktop update and build stability for browser quit guards,
macOS update signing, and Windows Visual Studio detection. (#15525,
#15527, #15562)
- Shows the plan-limit upgrade UI on desktop builds. (#15628)
- Adds the Agent Run delivery checker and fixes CLI device dispatch plus
skill list/search output. (#15489, #15634, #15632)
- Refreshes onboarding, auth source preservation, topic UI states,
referral/Fable campaign copy, and chat-input control bar behavior.
(#15629, #15544, #15573, #15614, #15616, #15617, #15622, #15643)

---

## 🔒 Security, Reliability & Rollout Notes

- External URL file input now includes SSRF validation for safer Google
file handling. (#12657)
- Database workspace-scope migrations are part of this release;
self-hosted operators should run the normal migration path before
serving the updated app. (#15446, #15465, #15468, #15472)
- The release branch was re-cut from `canary` and includes the latest
`main` release-version commit so `v2.2.2` is the verified compare base.

---

## 👥 Contributors

@ONLY-yours, @sxjeru, @hardy-one, @xujingli, @hezhijie0327, @Coooolfan,
@arvinxx, @tjx666, @Innei, @rivertwilight, @rdmclin2, @cy948,
@AmAzing129

**Full Changelog**:
v2.2.2...release/weekly-20260610-recut-3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature:tool Tool calling and function execution size:M This PR changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant