Show a calm reconnecting indicator

[logancsack]

Summary

• replace the full reconnect warning card with a calm, compact status pill
• keep the detailed error message and recovery actions for stopped failures
• use the existing neutral surface and an animated loader at desktop and mobile widths

Why

Automatic reconnects are transient and do not require user action. Presenting them as a large connection error obscures the composer and makes a routine retry feel severe.

Verification

• pnpm --filter @t3tools/web typecheck
• pnpm exec vp lint apps/web/src/components/ChatView.tsx
• pnpm exec vp test run apps/web/src/components/chat/ComposerBannerStack.test.tsx
• pnpm exec vp fmt --check apps/web/src/components/ChatView.tsx
• git diff --check
• integrated browser QA at 1280×800 and 393×852 with a real backend disconnect

Summary by CodeRabbit

• New Features

  • Added clearer environment status messaging for connecting and reconnecting states.
  • Displays a loading indicator with phase-specific messaging while the environment reconnects.

• Bug Fixes

  • Improved unavailable-environment banners by separating active connection attempts from other errors and warnings.
  • Retained relevant recovery actions for non-connecting error states.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 29874f33-9ae5-40c8-89a5-6f527597e4cc

📥 Commits

Reviewing files that changed from the base of the PR and between 443a09e and 066ef44.

📒 Files selected for processing (1)

• apps/web/src/components/ChatView.tsx

---

📝 Walkthrough

Walkthrough

The unavailable-environment banner now renders connecting and reconnecting states with a spinning loader and phase-specific title, while retaining warning/error content and recovery actions for other states.

Changes

Environment connection banner

Layer / File(s)	Summary
Connection state banner apps/web/src/components/ChatView.tsx	Adds LoaderCircleIcon and branches banner rendering so connecting states show informational loading content, while other unavailable states retain the wifi-off warning/error banner and connection actions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers:juliusmarminge, t3dotgg, maria-rcks

Poem

A rabbit sees the spinner turn,
While reconnecting lights softly burn.
No button chase, no frantic flight,
Just “Connecting…” in gentle light.
Then warning paths remain in sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main UI change: a calmer reconnecting indicator replacing the prior reconnect warning.
Description check	✅ Passed	It covers the main sections well, though the template’s UI Changes section and checklist are not filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/calm-reconnecting-indicator

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:066ef44c01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Constrain the stack container with the reconnect pill

When another notice is present (for example a branch-mismatch, version-mismatch, or parked-thread banner), w-fit shrinks only this Alert; ComposerBannerStack still leaves its outer group/banner-stack at max-w-3xl. Consequently the invisible full-width parent remains the group-hover target, so moving the pointer anywhere across that wide area unexpectedly expands the stacked banners, and its 96%-wide collapsed stack cap is visibly much wider than the pill. The compact reconnecting state should constrain the stack's interactive/cap width as well as the alert itself.

Useful? React with 👍 / 👎.

[logancsack]

Summary

• replace the full reconnect warning card with a calm, compact status pill
• keep the detailed error message and recovery actions for stopped failures
• use the existing neutral surface and an animated loader at desktop and mobile widths

Why

Automatic reconnects are transient and do not require user action. Presenting them as a large connection error obscures the composer and makes a routine retry feel severe.

Verification

• pnpm --filter @t3tools/web typecheck
• pnpm exec vp lint apps/web/src/components/ChatView.tsx
• pnpm exec vp test run apps/web/src/components/chat/ComposerBannerStack.test.tsx
• pnpm exec vp fmt --check apps/web/src/components/ChatView.tsx
• git diff --check
• integrated browser QA at 1280×800 and 393×852 with a real backend disconnect

Summary by CodeRabbit

• New Features

  • Added clearer environment status messaging for connecting and reconnecting states.
  • Displays a loading indicator with phase-specific messaging while the environment reconnects.

• Bug Fixes

  • Improved unavailable-environment banners by separating active connection attempts from other errors and warnings.
  • Retained relevant recovery actions for non-connecting error states.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 29874f33-9ae5-40c8-89a5-6f527597e4cc

📥 Commits

Reviewing files that changed from the base of the PR and between 443a09e and 066ef44.

📒 Files selected for processing (1)

• apps/web/src/components/ChatView.tsx

---

📝 Walkthrough

Walkthrough

The unavailable-environment banner now renders connecting and reconnecting states with a spinning loader and phase-specific title, while retaining warning/error content and recovery actions for other states.

Changes

Environment connection banner

Layer / File(s)	Summary
Connection state banner apps/web/src/components/ChatView.tsx	Adds LoaderCircleIcon and branches banner rendering so connecting states show informational loading content, while other unavailable states retain the wifi-off warning/error banner and connection actions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers:juliusmarminge, t3dotgg, maria-rcks

Poem

A rabbit sees the spinner turn,
While reconnecting lights softly burn.
No button chase, no frantic flight,
Just “Connecting…” in gentle light.
Then warning paths remain in sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main UI change: a calmer reconnecting indicator replacing the prior reconnect warning.
Description check	✅ Passed	It covers the main sections well, though the template’s UI Changes section and checklist are not filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/calm-reconnecting-indicator

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:066ef44c01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Constrain the stack container with the reconnect pill

When another notice is present (for example a branch-mismatch, version-mismatch, or parked-thread banner), w-fit shrinks only this Alert; ComposerBannerStack still leaves its outer group/banner-stack at max-w-3xl. Consequently the invisible full-width parent remains the group-hover target, so moving the pointer anywhere across that wide area unexpectedly expands the stacked banners, and its 96%-wide collapsed stack cap is visibly much wider than the pill. The compact reconnecting state should constrain the stack's interactive/cap width as well as the alert itself.

Useful? React with 👍 / 👎.

[logancsack]

Summary

• replace the full reconnect warning card with a calm, compact status pill
• keep the detailed error message and recovery actions for stopped failures
• use the existing neutral surface and an animated loader at desktop and mobile widths

Why

Automatic reconnects are transient and do not require user action. Presenting them as a large connection error obscures the composer and makes a routine retry feel severe.

Verification

• pnpm --filter @t3tools/web typecheck
• pnpm exec vp lint apps/web/src/components/ChatView.tsx
• pnpm exec vp test run apps/web/src/components/chat/ComposerBannerStack.test.tsx
• pnpm exec vp fmt --check apps/web/src/components/ChatView.tsx
• git diff --check
• integrated browser QA at 1280×800 and 393×852 with a real backend disconnect

Summary by CodeRabbit

• New Features

  • Added clearer environment status messaging for connecting and reconnecting states.
  • Displays a loading indicator with phase-specific messaging while the environment reconnects.

• Bug Fixes

  • Improved unavailable-environment banners by separating active connection attempts from other errors and warnings.
  • Retained relevant recovery actions for non-connecting error states.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 29874f33-9ae5-40c8-89a5-6f527597e4cc

📥 Commits

Reviewing files that changed from the base of the PR and between 443a09e and 066ef44.

📒 Files selected for processing (1)

• apps/web/src/components/ChatView.tsx

---

📝 Walkthrough

Walkthrough

The unavailable-environment banner now renders connecting and reconnecting states with a spinning loader and phase-specific title, while retaining warning/error content and recovery actions for other states.

Changes

Environment connection banner

Layer / File(s)	Summary
Connection state banner apps/web/src/components/ChatView.tsx	Adds LoaderCircleIcon and branches banner rendering so connecting states show informational loading content, while other unavailable states retain the wifi-off warning/error banner and connection actions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers:juliusmarminge, t3dotgg, maria-rcks

Poem

A rabbit sees the spinner turn,
While reconnecting lights softly burn.
No button chase, no frantic flight,
Just “Connecting…” in gentle light.
Then warning paths remain in sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main UI change: a calmer reconnecting indicator replacing the prior reconnect warning.
Description check	✅ Passed	It covers the main sections well, though the template’s UI Changes section and checklist are not filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/calm-reconnecting-indicator

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:066ef44c01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Constrain the stack container with the reconnect pill

When another notice is present (for example a branch-mismatch, version-mismatch, or parked-thread banner), w-fit shrinks only this Alert; ComposerBannerStack still leaves its outer group/banner-stack at max-w-3xl. Consequently the invisible full-width parent remains the group-hover target, so moving the pointer anywhere across that wide area unexpectedly expands the stacked banners, and its 96%-wide collapsed stack cap is visibly much wider than the pill. The compact reconnecting state should constrain the stack's interactive/cap width as well as the alert itself.

Useful? React with 👍 / 👎.

[logancsack]

Summary

• replace the full reconnect warning card with a calm, compact status pill
• keep the detailed error message and recovery actions for stopped failures
• use the existing neutral surface and an animated loader at desktop and mobile widths

Why

Automatic reconnects are transient and do not require user action. Presenting them as a large connection error obscures the composer and makes a routine retry feel severe.

Verification

• pnpm --filter @t3tools/web typecheck
• pnpm exec vp lint apps/web/src/components/ChatView.tsx
• pnpm exec vp test run apps/web/src/components/chat/ComposerBannerStack.test.tsx
• pnpm exec vp fmt --check apps/web/src/components/ChatView.tsx
• git diff --check
• integrated browser QA at 1280×800 and 393×852 with a real backend disconnect

Summary by CodeRabbit

• New Features

  • Added clearer environment status messaging for connecting and reconnecting states.
  • Displays a loading indicator with phase-specific messaging while the environment reconnects.

• Bug Fixes

  • Improved unavailable-environment banners by separating active connection attempts from other errors and warnings.
  • Retained relevant recovery actions for non-connecting error states.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 29874f33-9ae5-40c8-89a5-6f527597e4cc

📥 Commits

Reviewing files that changed from the base of the PR and between 443a09e and 066ef44.

📒 Files selected for processing (1)

• apps/web/src/components/ChatView.tsx

---

📝 Walkthrough

Walkthrough

The unavailable-environment banner now renders connecting and reconnecting states with a spinning loader and phase-specific title, while retaining warning/error content and recovery actions for other states.

Changes

Environment connection banner

Layer / File(s)	Summary
Connection state banner apps/web/src/components/ChatView.tsx	Adds LoaderCircleIcon and branches banner rendering so connecting states show informational loading content, while other unavailable states retain the wifi-off warning/error banner and connection actions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers:juliusmarminge, t3dotgg, maria-rcks

Poem

A rabbit sees the spinner turn,
While reconnecting lights softly burn.
No button chase, no frantic flight,
Just “Connecting…” in gentle light.
Then warning paths remain in sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main UI change: a calmer reconnecting indicator replacing the prior reconnect warning.
Description check	✅ Passed	It covers the main sections well, though the template’s UI Changes section and checklist are not filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/calm-reconnecting-indicator

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:066ef44c01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Constrain the stack container with the reconnect pill

When another notice is present (for example a branch-mismatch, version-mismatch, or parked-thread banner), w-fit shrinks only this Alert; ComposerBannerStack still leaves its outer group/banner-stack at max-w-3xl. Consequently the invisible full-width parent remains the group-hover target, so moving the pointer anywhere across that wide area unexpectedly expands the stacked banners, and its 96%-wide collapsed stack cap is visibly much wider than the pill. The compact reconnecting state should constrain the stack's interactive/cap width as well as the alert itself.

Useful? React with 👍 / 👎.

[logancsack]

Summary

• replace the full reconnect warning card with a calm, compact status pill
• keep the detailed error message and recovery actions for stopped failures
• use the existing neutral surface and an animated loader at desktop and mobile widths

Why

Automatic reconnects are transient and do not require user action. Presenting them as a large connection error obscures the composer and makes a routine retry feel severe.

Verification

• pnpm --filter @t3tools/web typecheck
• pnpm exec vp lint apps/web/src/components/ChatView.tsx
• pnpm exec vp test run apps/web/src/components/chat/ComposerBannerStack.test.tsx
• pnpm exec vp fmt --check apps/web/src/components/ChatView.tsx
• git diff --check
• integrated browser QA at 1280×800 and 393×852 with a real backend disconnect

Summary by CodeRabbit

• New Features

  • Added clearer environment status messaging for connecting and reconnecting states.
  • Displays a loading indicator with phase-specific messaging while the environment reconnects.

• Bug Fixes

  • Improved unavailable-environment banners by separating active connection attempts from other errors and warnings.
  • Retained relevant recovery actions for non-connecting error states.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 29874f33-9ae5-40c8-89a5-6f527597e4cc

📥 Commits

Reviewing files that changed from the base of the PR and between 443a09e and 066ef44.

📒 Files selected for processing (1)

• apps/web/src/components/ChatView.tsx

---

📝 Walkthrough

Walkthrough

The unavailable-environment banner now renders connecting and reconnecting states with a spinning loader and phase-specific title, while retaining warning/error content and recovery actions for other states.

Changes

Environment connection banner

Layer / File(s)	Summary
Connection state banner apps/web/src/components/ChatView.tsx	Adds LoaderCircleIcon and branches banner rendering so connecting states show informational loading content, while other unavailable states retain the wifi-off warning/error banner and connection actions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers:juliusmarminge, t3dotgg, maria-rcks

Poem

A rabbit sees the spinner turn,
While reconnecting lights softly burn.
No button chase, no frantic flight,
Just “Connecting…” in gentle light.
Then warning paths remain in sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main UI change: a calmer reconnecting indicator replacing the prior reconnect warning.
Description check	✅ Passed	It covers the main sections well, though the template’s UI Changes section and checklist are not filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/calm-reconnecting-indicator

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:066ef44c01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Constrain the stack container with the reconnect pill

When another notice is present (for example a branch-mismatch, version-mismatch, or parked-thread banner), w-fit shrinks only this Alert; ComposerBannerStack still leaves its outer group/banner-stack at max-w-3xl. Consequently the invisible full-width parent remains the group-hover target, so moving the pointer anywhere across that wide area unexpectedly expands the stacked banners, and its 96%-wide collapsed stack cap is visibly much wider than the pill. The compact reconnecting state should constrain the stack's interactive/cap width as well as the alert itself.

Useful? React with 👍 / 👎.

[logancsack]

Summary

• replace the full reconnect warning card with a calm, compact status pill
• keep the detailed error message and recovery actions for stopped failures
• use the existing neutral surface and an animated loader at desktop and mobile widths

Why

Automatic reconnects are transient and do not require user action. Presenting them as a large connection error obscures the composer and makes a routine retry feel severe.

Verification

• pnpm --filter @t3tools/web typecheck
• pnpm exec vp lint apps/web/src/components/ChatView.tsx
• pnpm exec vp test run apps/web/src/components/chat/ComposerBannerStack.test.tsx
• pnpm exec vp fmt --check apps/web/src/components/ChatView.tsx
• git diff --check
• integrated browser QA at 1280×800 and 393×852 with a real backend disconnect

Summary by CodeRabbit

• New Features

  • Added clearer environment status messaging for connecting and reconnecting states.
  • Displays a loading indicator with phase-specific messaging while the environment reconnects.

• Bug Fixes

  • Improved unavailable-environment banners by separating active connection attempts from other errors and warnings.
  • Retained relevant recovery actions for non-connecting error states.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 29874f33-9ae5-40c8-89a5-6f527597e4cc

📥 Commits

Reviewing files that changed from the base of the PR and between 443a09e and 066ef44.

📒 Files selected for processing (1)

• apps/web/src/components/ChatView.tsx

---

📝 Walkthrough

Walkthrough

The unavailable-environment banner now renders connecting and reconnecting states with a spinning loader and phase-specific title, while retaining warning/error content and recovery actions for other states.

Changes

Environment connection banner

Layer / File(s)	Summary
Connection state banner apps/web/src/components/ChatView.tsx	Adds LoaderCircleIcon and branches banner rendering so connecting states show informational loading content, while other unavailable states retain the wifi-off warning/error banner and connection actions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers:juliusmarminge, t3dotgg, maria-rcks

Poem

A rabbit sees the spinner turn,
While reconnecting lights softly burn.
No button chase, no frantic flight,
Just “Connecting…” in gentle light.
Then warning paths remain in sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main UI change: a calmer reconnecting indicator replacing the prior reconnect warning.
Description check	✅ Passed	It covers the main sections well, though the template’s UI Changes section and checklist are not filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/calm-reconnecting-indicator

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:066ef44c01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Constrain the stack container with the reconnect pill

When another notice is present (for example a branch-mismatch, version-mismatch, or parked-thread banner), w-fit shrinks only this Alert; ComposerBannerStack still leaves its outer group/banner-stack at max-w-3xl. Consequently the invisible full-width parent remains the group-hover target, so moving the pointer anywhere across that wide area unexpectedly expands the stacked banners, and its 96%-wide collapsed stack cap is visibly much wider than the pill. The compact reconnecting state should constrain the stack's interactive/cap width as well as the alert itself.

Useful? React with 👍 / 👎.

[logancsack]

Summary

• replace the full reconnect warning card with a calm, compact status pill
• keep the detailed error message and recovery actions for stopped failures
• use the existing neutral surface and an animated loader at desktop and mobile widths

Why

Automatic reconnects are transient and do not require user action. Presenting them as a large connection error obscures the composer and makes a routine retry feel severe.

Verification

• pnpm --filter @t3tools/web typecheck
• pnpm exec vp lint apps/web/src/components/ChatView.tsx
• pnpm exec vp test run apps/web/src/components/chat/ComposerBannerStack.test.tsx
• pnpm exec vp fmt --check apps/web/src/components/ChatView.tsx
• git diff --check
• integrated browser QA at 1280×800 and 393×852 with a real backend disconnect

Summary by CodeRabbit

• New Features

  • Added clearer environment status messaging for connecting and reconnecting states.
  • Displays a loading indicator with phase-specific messaging while the environment reconnects.

• Bug Fixes

  • Improved unavailable-environment banners by separating active connection attempts from other errors and warnings.
  • Retained relevant recovery actions for non-connecting error states.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 29874f33-9ae5-40c8-89a5-6f527597e4cc

📥 Commits

Reviewing files that changed from the base of the PR and between 443a09e and 066ef44.

📒 Files selected for processing (1)

• apps/web/src/components/ChatView.tsx

---

📝 Walkthrough

Walkthrough

The unavailable-environment banner now renders connecting and reconnecting states with a spinning loader and phase-specific title, while retaining warning/error content and recovery actions for other states.

Changes

Environment connection banner

Layer / File(s)	Summary
Connection state banner apps/web/src/components/ChatView.tsx	Adds LoaderCircleIcon and branches banner rendering so connecting states show informational loading content, while other unavailable states retain the wifi-off warning/error banner and connection actions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers:juliusmarminge, t3dotgg, maria-rcks

Poem

A rabbit sees the spinner turn,
While reconnecting lights softly burn.
No button chase, no frantic flight,
Just “Connecting…” in gentle light.
Then warning paths remain in sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main UI change: a calmer reconnecting indicator replacing the prior reconnect warning.
Description check	✅ Passed	It covers the main sections well, though the template’s UI Changes section and checklist are not filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/calm-reconnecting-indicator

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:066ef44c01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Constrain the stack container with the reconnect pill

When another notice is present (for example a branch-mismatch, version-mismatch, or parked-thread banner), w-fit shrinks only this Alert; ComposerBannerStack still leaves its outer group/banner-stack at max-w-3xl. Consequently the invisible full-width parent remains the group-hover target, so moving the pointer anywhere across that wide area unexpectedly expands the stacked banners, and its 96%-wide collapsed stack cap is visibly much wider than the pill. The compact reconnecting state should constrain the stack's interactive/cap width as well as the alert itself.

Useful? React with 👍 / 👎.

[logancsack]

Summary

• replace the full reconnect warning card with a calm, compact status pill
• keep the detailed error message and recovery actions for stopped failures
• use the existing neutral surface and an animated loader at desktop and mobile widths

Why

Automatic reconnects are transient and do not require user action. Presenting them as a large connection error obscures the composer and makes a routine retry feel severe.

Verification

• pnpm --filter @t3tools/web typecheck
• pnpm exec vp lint apps/web/src/components/ChatView.tsx
• pnpm exec vp test run apps/web/src/components/chat/ComposerBannerStack.test.tsx
• pnpm exec vp fmt --check apps/web/src/components/ChatView.tsx
• git diff --check
• integrated browser QA at 1280×800 and 393×852 with a real backend disconnect

Summary by CodeRabbit

• New Features

  • Added clearer environment status messaging for connecting and reconnecting states.
  • Displays a loading indicator with phase-specific messaging while the environment reconnects.

• Bug Fixes

  • Improved unavailable-environment banners by separating active connection attempts from other errors and warnings.
  • Retained relevant recovery actions for non-connecting error states.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 29874f33-9ae5-40c8-89a5-6f527597e4cc

📥 Commits

Reviewing files that changed from the base of the PR and between 443a09e and 066ef44.

📒 Files selected for processing (1)

• apps/web/src/components/ChatView.tsx

---

📝 Walkthrough

Walkthrough

The unavailable-environment banner now renders connecting and reconnecting states with a spinning loader and phase-specific title, while retaining warning/error content and recovery actions for other states.

Changes

Environment connection banner

Layer / File(s)	Summary
Connection state banner apps/web/src/components/ChatView.tsx	Adds LoaderCircleIcon and branches banner rendering so connecting states show informational loading content, while other unavailable states retain the wifi-off warning/error banner and connection actions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers:juliusmarminge, t3dotgg, maria-rcks

Poem

A rabbit sees the spinner turn,
While reconnecting lights softly burn.
No button chase, no frantic flight,
Just “Connecting…” in gentle light.
Then warning paths remain in sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main UI change: a calmer reconnecting indicator replacing the prior reconnect warning.
Description check	✅ Passed	It covers the main sections well, though the template’s UI Changes section and checklist are not filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/calm-reconnecting-indicator

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:066ef44c01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Constrain the stack container with the reconnect pill

When another notice is present (for example a branch-mismatch, version-mismatch, or parked-thread banner), w-fit shrinks only this Alert; ComposerBannerStack still leaves its outer group/banner-stack at max-w-3xl. Consequently the invisible full-width parent remains the group-hover target, so moving the pointer anywhere across that wide area unexpectedly expands the stacked banners, and its 96%-wide collapsed stack cap is visibly much wider than the pill. The compact reconnecting state should constrain the stack's interactive/cap width as well as the alert itself.

Useful? React with 👍 / 👎.