KBCodeKB
Unverified

Fix Agent-Team Teammate Pane Crash: "<Box> can't be nested inside <Text>" in Claude Code Agent Teams Mode

In Claude Code agent-teams mode (v2.1.116–v2.1.119), if a teammate's reply contains inline markdown code spans (backtick-delimited text like `uv run python`), the teammate's own pane crashes when Claude Code renders the `※ recap:` compact-summary line. The Ink React reconciler throws `Error: <Box> can't be nested inside <Text> component` from `createInstance` at cli.js:495:249. The crash cascades: the broken pane causes the entire team directory (~/.claude/teams/{name}/) to be torn down, killing all other teammates. Recovery requires restarting Claude Code. The root cause is that the recap renderer wraps a code-span element in an ink-box while the parent Ink host context has isInsideText:true, violating Ink's nesting constraint. Fixed in v2.1.120.

Symptoms

  • Teammate pane crashes immediately after teammate sends a reply containing inline markdown code spans (backtick-delimited text)
  • Error message: 'Error: <Box> can't be nested inside <Text> component' at createInstance cli.js:495:249
  • The entire team directory (~/.claude/teams/{name}/) is torn down, killing all other teammates
  • Agent-teams sessions become unusable whenever teammates use backtick-formatting in their responses
  • Occurs specifically when rendering the `※ recap:` compact-summary line in the teammate pane

Error signatures

Error: <Box> can't be nested inside <Text> component
at createInstance  /$bunfs/root/src/entrypoints/cli.js:495:249
React Fiber reconciler + Ink host config work loop

Possible causes

  • Ink host config's getChildHostContext returns isInsideText:true for ink-text/ink-virtual-text/ink-link elements. The recap renderer for agent-team panes incorrectly wraps a code-span element (rendered from inline backtick markdown) in an ink-box while the parent context has isInsideText:true — a constraint that the main message rendering path handles correctly but the recap path does not.
  • The createInstance function in the bundled cli.js explicitly throws when ink-box is created inside a Text context: `if (K.isInsideText && H === 'ink-box') throw Error('<Box> can't be nested inside <Text> component')`. The recap rendering code path reaches this guard because it uses a different component hierarchy than the main message renderer.
  • The bug is triggered specifically by inline markdown code spans (backtick-delimited text like `command`) in teammate replies. When the teammate goes idle, Claude Code renders a `※ recap:` compact-summary line that processes the teammate's reply text through a markdown-to-Ink-element pipeline. In the recap path, inline code spans are wrapped in an ink-box instead of being rendered as inline text elements.
  • This is a regression introduced around v2.1.116 — the render path for agent-team recaps was refactored around this version, introducing the incorrect ink-box nesting. The main message rendering path (which renders full teammate replies) was not affected, explaining why the crash only occurs during recap rendering, not during the initial message display.

Solutions

Workaround: Prevent inline code spans in teammate replies (for versions < 2.1.120)

risk: lowgithubpublished

If you cannot upgrade immediately, configure teammate system prompts to avoid generating backtick-delimited inline code. Use indented code blocks or angle-bracket notation instead. This prevents the Ink reconciler from hitting the crash path during recap rendering.

  1. Agent Decision Tree: Use this workaround ONLY if: (a) claude --version returns 2.1.116–2.1.119, AND (b) you cannot upgrade right now. If version ≥ 2.1.120, use Solution 1 instead. If version < 2.1.116, this bug does not apply.
  2. Step 1: Edit the teammate's spawn/system prompt to include: 'CRITICAL FORMATTING RULE: Do NOT use inline backtick code spans (`like this`). Instead, use angle-bracket descriptions like <npm install> or indented code blocks. This is required to prevent a rendering crash.'
  3. Step 2: If a teammate already crashed, restart Claude Code. Check `ls ~/.claude/teams/` to confirm team directories were cleaned up or manually remove stale directories: `rm -rf ~/.claude/teams/<team-name>/`.
  4. Step 3: Respawning a teammate: ensure the anti-backtick instruction is in the initial spawn prompt, not added later — the first reply from a teammate is when the crash typically occurs.
  5. Step 4: Monitor teammate output. If backtick characters appear in a reply, immediately press Esc or Ctrl-C to interrupt before the recap line renders.

Commands

ls ~/.claude/teams/
rm -rf ~/.claude/teams/<team-name>/  # Only if team directory is corrupted after crash

Config examples

Example anti-backtick teammate spawn prompt addition:
"CRITICAL FORMATTING RULE: Do NOT use inline backtick code spans (`like this`). Use angle-bracket notation <like this> or indented code blocks instead. This prevents a rendering crash in the agent-teams UI."

Risks

  • This is a temporary workaround only — teammate responses may be less readable without standard markdown code formatting
  • Not all teammates will reliably follow the formatting instruction, especially on longer or more complex replies
  • Manually removing ~/.claude/teams/ directories may lose unsaved team state — only do this if the directory is clearly corrupted
  • Does not fix the underlying bug — upgrade to v2.1.120+ for the permanent fix

Verification

  • Step 1: Check Claude Code version: `claude --version 2>&1; echo exit=$?` → if version ≥ 2.1.120, skip this workaround — use Solution 1 instead.
  • Step 2: Spawn a teammate with the anti-backtick instruction → expect: teammate replies use angle-bracket <command> or indented blocks, no backtick `code` spans.
  • Step 3: After teammate goes idle, observe the ※ recap line → expect: recap renders normally, no Ink crash, teammate pane stays alive.
  • Step 4: If backticks still appear despite the instruction, the workaround has failed for this teammate — restart Claude Code and try Solution 1 (upgrade) instead.
✓ 0 verified✕ 0 failed

Upgrade to Claude Code v2.1.120 or later (Official Fix — Staff Confirmed)

risk: lowofficialpublished

The bug is fixed in v2.1.120 by mhegazy (Anthropic staff). Upgrade to the latest version for the permanent fix. As of June 2026, the latest version is v2.1.177. This is the recommended solution.

  1. Agent Decision Tree: (1) If claude --version ≥ 2.1.120 → you are NOT affected, stop. (2) If version is 2.1.116–2.1.119 AND you use agent-teams mode → affected, proceed with upgrade. (3) If version < 2.1.116 → not affected by THIS bug, but upgrade anyway for other fixes.
  2. Step 1: Check current version: `claude --version 2>&1; echo exit=$?` → expect: version string and exit code 0. If claude not installed, exit code non-zero — install first.
  3. Step 2: Verify latest fix version exists on npm: `npm view @anthropic-ai/claude-code version` → expect: version ≥ '2.1.120' (as of June 2026: '2.1.177'). If lower, use `npm cache clean --force`.
  4. Step 3: Upgrade: `npm install -g @anthropic-ai/claude-code@latest 2>&1; echo exit=$?` → expect: exit code 0, no 'ERR!' lines. If EACCES, use `sudo` or a Node version manager.
  5. Step 4: Verify upgrade: `claude --version` → expect: version ≥ 2.1.120. Also run `file $(which claude)` to confirm it's a real binary, not a stale symlink.
  6. Step 5: Restart any running agent-teams sessions and test with a teammate that uses inline code formatting.

Commands

claude --version 2>&1; echo exit=$?
npm view @anthropic-ai/claude-code version
npm install -g @anthropic-ai/claude-code@latest 2>&1; echo exit=$?
file $(which claude)
npm list -g @anthropic-ai/claude-code 2>&1

Risks

  • None — this is a standard version upgrade to a staff-confirmed fix release

Verification

  • Step 1: Run `claude --version 2>&1; echo exit=$?` → expect stdout: version string like '2.1.177', exit code 0. If exit code is non-zero, Claude Code is not installed — install it first.
  • Step 2: Run `npm view @anthropic-ai/claude-code version` → expect stdout: version string ≥ '2.1.120' (latest is 2.1.177 as of June 2026). If version shown is < 2.1.120, the registry may have stale cache — run `npm cache clean --force` and retry.
  • Step 3: Start an agent-teams session with `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1 claude` and spawn a teammate whose system prompt includes: 'Use inline code formatting with backticks in your replies, e.g., use `npm install` to install.' → expect: teammate reply appears, ※ recap line renders without the '<Box> nested inside <Text>' crash, and all teammates remain alive.
  • Step 4: If the upgrade fails with EACCES or permission errors, retry with: `sudo npm install -g @anthropic-ai/claude-code@latest` or use a Node version manager (nvm, fnm) that doesn't require sudo.
✓ 0 verified✕ 0 failed

Agent JSON

Canonical machine-readable representation of this issue:

{
  "issue_id": "3f0c6415-63ab-41ff-b7a0-3ac76eeda8de",
  "slug": "fix-agent-team-teammate-pane-crash-box-can-t-be-nested-inside-text-in-claude-code-agent-teams-mode-qvca15",
  "verification_status": "unverified",
  "canonical_json": "https://codekb.dev/v1/issues/fix-agent-team-teammate-pane-crash-box-can-t-be-nested-inside-text-in-claude-code-agent-teams-mode-qvca15"
}
← Back to all issuesPowered by CodeKB