feat(app): redesign the inbox sidebar - #59696

Summary

Redesigns the experimental Inbox sidebar (Settings → Interface → Inbox) so it is calmer, works at any sidebar width, and shows only what helps you act.

• Live rows (waiting on you, working, or finished and unread): avatar, project / title, and one text-only state slot (Approve, Answer, Failed, Working 33s, or the age). Under rows that need you, the pending request's own words: the command or resource for a permission (in the code font) or the question text for a form. That line aligns with the text, never sits under the avatar, and wraps before the state column, up to two lines.
• Settled rows (already read): one quiet line with the avatar, title and age, below a Settled divider. Archived sessions keep their own section.
• An open row stays live until you leave it, so marking it read does not move it under the pointer.
• Working sessions join the live list instead of the pinned Working shelf. Needs-you rows sort first, then by latest activity.
• A project picker (All projects) filters the inbox and is persisted. It only appears when the inbox spans more than one project, and rows only name their project when the list mixes projects.
• Rows drop the branch/worktree line and the server icon. A session on another server names the server in the avatar tooltip and in the picker. The now-unused branch loading is removed from the inbox model.
• Container queries: below 240px the project name drops and the avatar alone identifies it.

New English strings only: sidebar.inbox.section.settled, sidebar.inbox.project.all, sidebar.inbox.action.approve, sidebar.inbox.action.answer.

Not in this PR

• A message line for done, failed and working sessions (last agent message or current step). The sidebar does not load messages for index sessions, so that needs data plumbing first.
• Hover/focus polish and a dedicated small avatar size.

Verification

• bun typecheck and bun run typecheck:tsc in packages/app, bun run lint:changed from the root.
• Rendered the real app against the e2e mock server (approval, question, working, done, failed and read sessions across three projects) and checked the picker and filtering. Screenshots are in the Slack thread; GitHub attachment upload was not available to the bot.

Visual

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" fill="currentColor">
  <style>
    .live { animation: settle 4s ease-in-out infinite; }
    .tag { animation: fade 4s ease-in-out infinite; }
    @keyframes settle { 0%, 35% { transform: translateY(0); opacity: 1; } 55%, 100% { transform: translateY(30px); opacity: .45; } }
    @keyframes fade { 0%, 35% { opacity: 1; } 50%, 100% { opacity: 0; } }
    @media (prefers-reduced-motion: reduce) { .live, .tag { animation: none; } }
  </style>
  <g opacity=".9">
    <rect x="8" y="6" width="8" height="8" rx="2" opacity=".6"/>
    <rect x="22" y="7" width="30" height="6" rx="3" opacity=".45"/>
    <rect x="56" y="7" width="70" height="6" rx="3"/>
    <rect x="200" y="7" width="32" height="6" rx="3" opacity=".7"/>
    <rect x="22" y="17" width="120" height="4" rx="2" opacity=".35"/>
  </g>
  <g class="live">
    <rect x="8" y="30" width="8" height="8" rx="2" opacity=".6"/>
    <rect x="22" y="31" width="30" height="6" rx="3" opacity=".45"/>
    <rect x="56" y="31" width="56" height="6" rx="3"/>
    <rect class="tag" x="208" y="31" width="24" height="6" rx="3" opacity=".7"/>
  </g>
  <rect x="8" y="50" width="20" height="3" rx="1.5" opacity=".3"/>
  <rect x="32" y="51" width="200" height="1" opacity=".15"/>
</svg>

Requested by: @R44VC0RP (vogel via Slack)