feat(app): add a project-aware Side tabs overview - #60446

Superseded design — closed by the author.

This overview is now an opt-in fourth Side bar interface mode. Top tabs, Side tabs and Inbox keep their behavior and saved choices. Replacement design-review PR #60867 targets dev from joe-ieta:sidebar-mode, carrying forward the running shelf, project grouping and shared-history behavior below. The Windows fork test release v2.2.3-dev-my.4 passed manual testing. Maintainer design approval is still pending under #60241.

The original description is retained below for context.

Issue for this PR

Refs #60241. Maintainer design review is pending.

Type of change

• Bug fix
• New feature
• Refactor / code improvement
• Documentation

What does this PR do?

Makes Side tabs a practical overview for parallel work across projects:

• Running sessions show status, branch and elapsed time, including unopened tasks.
• Recent sessions group by project, show five rows with More/Show less, and keep close/reopen, counts and keyboard navigation consistent.
• Hover details include the current branch, worktree path and last run. Each project has a + button that opens a draft with that project selected.
• Recent sessions list root sessions only; subagents remain accessible through their parent and in the running shelf.

Home and Side tabs share the session index without copying history into the open-tab store. Home's project-catalogue fix remains separate in #60570.

How did you verify your code works?

• The reporter confirms the feature is usable and has passed manual testing in the fork.
• Updated against dev@6b4329c885; resolved the session-deletion merge conflict while preserving upstream cleanup.
• Automated: 945 app unit tests; 62 production Home/tabs browser scenarios; the two updated scenarios repeated 10 times each (20/20, five workers, no retries); root bun run check (35/35); app bun run typecheck:tsc.

Visual

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" fill="currentColor">
  <style>
    .working { animation: pulse 2.4s ease-in-out infinite; }
    @keyframes pulse { 0%,100% { opacity:.7; } 50% { opacity:.25; } }
    @media (prefers-reduced-motion:reduce) { .working { animation:none; } }
  </style>
  <text x="10" y="12" font-size="8" opacity=".8">Running sessions</text>
  <text x="189" y="12" font-size="8" opacity=".6">2 · 2m</text>
  <circle class="working" cx="228" cy="9" r="3" opacity=".7"/>
  <rect x="8" y="20" width="224" height="14" rx="3" opacity=".12"/>
  <text x="13" y="30" font-size="8" opacity=".9">Project A</text>
  <text x="201" y="30" font-size="8" opacity=".5">8/20 +</text>
  <rect x="18" y="40" width="122" height="4" rx="2" opacity=".6"/>
  <rect x="18" y="49" width="99" height="4" rx="2" opacity=".4"/>
  <text x="18" y="66" font-size="8" opacity=".55">More (3)</text>
</svg>

Screenshots / recordings

Same synthetic projects and sessions; three tabs are open and two other sessions are running.

Before	After

Light theme: before / after.

Latest project action (current update):

Checklist

• I have tested my changes locally
• I have not included unrelated changes in this PR