Fix mobile new-thread action visibility

[SAKETH11111]

Closes #1924

What was broken

On mobile, the project header hid the new-thread action behind desktop-style hover behavior, so touch users could not reliably start a thread from the sidebar.

Root cause

The project header crossfaded the remote badge and the new-thread action using hover/focus-only visibility rules. In the mobile sidebar sheet there is no reliable hover state, so the action stayed hidden and non-interactive.

What changed

• reserve stable space for the project-header action slot
• show the new-thread action by default in the mobile sidebar layout while keeping the desktop hover/focus reveal
• add a focused browser regression that opens the mobile sidebar and verifies the action is visible and creates a draft thread without hover
• tighten Claude content-block narrowing so the repository typecheck stays green with the current SDK typings

Note

Fix new-thread action visibility in mobile sidebar for project items

• In Sidebar.tsx, the new-thread action on SidebarProjectItem is now always visible and clickable on small screens (opacity 100, pointer-events auto), with hover/focus behavior retained on medium screens and above via md: prefixes.
• The remote environment cloud icon is hidden on small screens to free space for the action button.
• Project header button padding is adjusted from px-2 to pl-2 pr-8 to accommodate the action on the right.
• A browser test in ChatView.browser.tsx verifies the button is visible and clickable in a compact viewport without hover.
• Defensive null checks are added in ClaudeAdapter.ts to ignore tool-use content blocks with missing or non-string name or id.

^{Macroscope summarized 5bf922f.}

---

Note

Medium Risk
Tweaks sidebar interaction/visibility rules across breakpoints and adds a mobile regression test; also tightens Claude SDK stream event parsing, which could affect tool-call event emission if unexpected payload shapes appear.

Overview
Fixes the project-level New thread action in the sidebar so it is visible and clickable on mobile without relying on hover/focus, while preserving the existing hover/focus reveal behavior on md+ screens and adjusting header padding/spacing accordingly.

Adds a browser regression test ensuring the mobile sidebar sheet shows the action with pointer-events enabled and that tapping it navigates to a new draft thread route.

Hardens ClaudeAdapter tool-use content_block_start handling by narrowing/validating type, name, and id before treating a block as a tool call, avoiding unsafe access under current SDK typings.

^{Reviewed by Cursor Bugbot for commit 5bf922f. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 766731e6-9cfb-4960-b31e-bc2e36dfbdc1

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Approvability

Verdict: Approved

CSS-only changes to fix mobile button visibility, a new test verifying the fix, and defensive type validation in the adapter. All changes are limited in scope with no schema, security, or significant runtime behavior implications beyond the intended mobile UI fix.

^{You can customize Macroscope's approvability policy. Learn more.}