[DoodleBears]

Requested by Vain · project thread

Why the change

In the app sidebar's Bot-mode row, the Human Inbox button floated above the row as a bordered pill instead of sitting with the tutorial progress ring and the settings gear. It covered the tutorial ring, and pointing at it dropped the row's hover so the gear disappeared. Outside Bot mode it overlapped the "Try it" hint.

Issue / Discussion: none, reported in the project thread.

Special things to note

• Merge risk: two-way door, client CSS and one component (BotPanelIcon); revert the commit. Blast radius: only the wide Bot-mode row. The collapsed rail keeps its own inbox button in the panel list, unchanged. Review focus: the wide inbox is now a span role="button" inside the native row <button> (same pattern as the gear and the tutorial launcher), and the row's capture-phase click guard now also skips .bh-panel-activity.
• Styling: no border and no own background, per the request. The inbox takes the gear's 22px size, 6px radius, secondary label colour and --dsw-alias-interactive-bg-hover hover, so the three controls read as one group. Nothing new is added to the design-token work in Move Bot-mode surfaces, mobile, the window companion and Computer/Browser settings onto design tokens #1626 and later; this only removes a border.
• Verification:
  • Automated: packages/client/test/bot-panel-entry.test.ts updated: the wide inbox lives in .bh-panel-actions inside the row with the gear, Enter on it opens the inbox without leaving Bot mode, the narrow rail button stays in the panel list. Client Vitest: 1538 passed, 1 skipped; client-observer.test.ts fails the same way on main (node:sqlite bundling). pnpm lint, pnpm format:check, pnpm typecheck, pnpm build pass.
  • Runtime: isolated DSH 0.2.0-rc.2 profile with seeded unread Human Inbox items (scripts/e2e-activity-entry.mjs seed), screenshots from main (7fe5079) and this branch at 1280×800, DPR 2.
  • Not covered: Chinese locale and the onboarding walkthrough's highlight steps were not captured. Human QA: not done.

Change outline

before: nav (grid)
          ├─ <button> Bot mode row ─ [tutorial ring @right 74px] [gear @right 10px]
          └─ <button> inbox pill, same grid cell, z-index 2, border + background, margin-right 38px
after:  <button> Bot mode row
          └─ span.bh-panel-actions (right 10px, flex, gap 2px)
               [tutorial ring | Try it]  [inbox]  [gear]

Bot-mode row — 1280 × 800, 111 unread Human Inbox items

Before: the inbox pill sits above the row with a border and its own fill; on row hover it hides the tutorial ring; hovering it hides the gear; outside Bot mode it covers "Try it".
After: tutorial ring, inbox and gear sit in one row with no border, and hovering any of them keeps the others.

🤖 Generated with Claude Code

https://claude.ai/code/session_01CugEyUiMxNL4Yvxg5gYRi4

---

Generated by Claude Code

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 35 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 68f9ad4b-91d2-4db6-bc2c-e7aed343edd5

📥 Commits

Reviewing files that changed from the base of the PR and between d10c2da and c153a69.

⛔ Files ignored due to path filters: 1

• .github/pr-screenshots/sidebar-inbox-row/bot-mode-row.png is excluded by !**/*.png

📒 Files selected for processing: 4

• changes/1630-bot-mode-row-inbox.md
• packages/client/src/client/bot-sidebar.tsx
• packages/client/src/client/styles.ts
• packages/client/test/bot-panel-entry.test.ts

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.}