Add provider icons to sidebar thread rows

[Youssef2430]

Closes #1813

What Changed

• Added provider icons beside sidebar thread titles so Codex and Claude threads are visually distinguishable at a glance.
• Extended the normalized sidebar thread summary to retain the thread provider, so the sidebar can render the icon without reaching back into full thread state.
• Extracted shared provider icon presentation logic so the sidebar and model picker use the same icon/color mapping.
• Added store and browser regression coverage for provider propagation and sidebar icon rendering.

Why

The issue asks for a quick visual way to sort conversations by harness. The sidebar already renders thread-specific metadata from normalized store summaries, so carrying the provider into that summary keeps the change small, avoids duplicating lookup logic in each row, and matches the direction of recent merged sidebar work.

UI Changes

• Sidebar thread rows now show the provider icon immediately before the thread title.

Testing

• bun fmt
• bun lint
• bun typecheck
• bun run test -- src/store.test.ts
• bun run test:browser -- src/components/ChatView.browser.tsx

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes

• I included a video for animation/interaction changes

---

Note

Low Risk
Low risk UI/state change that adds a new provider field to the sidebar thread summary and uses it for rendering; main risk is minor UI regression or missed updates if provider data is absent/mismatched.

Overview
Adds a provider icon next to each sidebar thread title, using shared icon/color mapping and accessible labels (via new ThreadProviderIcon).

Extends the normalized SidebarThreadSummary to include the thread’s modelSelection.provider and updates equality checks so sidebar rows re-render when the provider changes.

Refactors provider icon presentation into providerPresentation.ts and updates the model picker and browser/store tests to cover provider propagation and icon rendering.

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

Note

Add provider icons to sidebar thread rows

• Introduces a ThreadProviderIcon component in Sidebar.tsx that renders a provider-specific icon next to each thread title, with accessible aria-label and data-testid attributes.
• Adds provider to the SidebarThreadSummary type and populates it from thread.modelSelection.provider in buildSidebarThreadSummary; sidebarThreadSummariesEqual now includes provider in its equality check so UI updates propagate on provider changes.
• Extracts shared PROVIDER_ICON_BY_KIND and providerIconClassName into providerPresentation.ts, replacing duplicated local mappings in ProviderModelPicker.

^{Macroscope summarized 85db017.}

[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: eb6e86a1-eb7c-4667-8116-c2140ce329c8

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

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 4b49f4e. Configure here.}

[Copilot]

Pull request overview

Adds provider-aware presentation to the sidebar so chat threads can be visually distinguished by provider (Codex vs Claude) without needing to hydrate full thread state, and centralizes provider icon/color logic for reuse.

Changes:

• Extended SidebarThreadSummary to include provider and ensured store normalization/equality tracking propagates it.
• Added shared providerPresentation utilities (icon mapping + styling) and reused them in both the sidebar and provider/model picker.
• Added store + browser regression tests for provider propagation and sidebar icon rendering.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
apps/web/src/types.ts	Adds provider to SidebarThreadSummary so the sidebar can render provider info from normalized summaries.
apps/web/src/store.ts	Populates provider in sidebar summaries and includes it in summary equality checks to trigger UI updates.
apps/web/src/store.test.ts	Adds regression tests ensuring sidebar provider is captured and updated on model selection changes.
apps/web/src/providerPresentation.ts	Introduces shared provider icon + className helpers for consistent UI across components.
apps/web/src/components/Sidebar.tsx	Renders a provider icon next to the thread title using shared presentation logic.
apps/web/src/components/ChatView.browser.tsx	Extends test snapshot builder and adds a browser test asserting the sidebar provider icon renders.
apps/web/src/components/chat/ProviderModelPicker.tsx	Reuses shared provider icon/className helpers instead of duplicating mappings.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[macroscopeapp]

Approvability

Verdict: Approved

This PR adds visual provider icons to sidebar thread rows by extracting existing icon logic into a shared module and adding a simple presentational component. The changes are purely UI-focused, well-tested, and don't modify any business logic or sensitive code paths.

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