Polish dialog/alert surfaces and unauthenticated provider banner

[juliusmarminge]

Ports the dialog/alert-surface part of #2451 by @sandersonstabo, rebased onto current main.

• Dialog and alert-dialog backdrops get a consistent bg-background/60 tint with a subtle 4px blur (toned down per review feedback in Polish chat UI and provider prompts #2451); command dialog backdrop gains the same backdrop-blur-xs
• Dialog viewports use balanced 1fr auto 1fr rows (proper vertical centering instead of the top-weighted 3fr layout), plus an opt-in centered viewport for true center placement
• Alert is reworked into a slot-based flex layout, fixing the misaligned icon/text/action grid; error alerts get readable destructive text colors
• Thread error banner dismiss becomes a ghost icon Button; provider status banner becomes a compact "X is unauthenticated — sign in via the CLI" card (de-Codex-ified copy) shown for the selected provider instance

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only styling and banner copy/instance selection; no auth, API, or data-path changes beyond which provider snapshot is displayed.

Overview
Polishes dialog and sheet overlays and in-chat status banners for more consistent visuals and clearer provider errors.

Overlays:Dialog and AlertDialog backdrops now use bg-background/60 with backdrop-blur-xs, forceRender on the backdrop, and viewports use balanced 1fr auto 1fr rows instead of a top-heavy layout (viewport-level tint/blur removed). Sheet and command dialog backdrops match the same tint and blur.

Alerts:Alert is reworked to partition children into icon, title/description, and action slots (via data-slot or component displayName) and lay them out with flex instead of CSS grid, including stronger destructive text styling for error variants. Thread error dismiss is a ghost icon Button.

Provider banner:ChatView resolves activeProviderInstanceId from the composer’s selected provider instance when it exists in server config, so custom instances (e.g. codex_personal) show the right status. Provider status drops the shared Alert for a compact inline card with unauthenticated-specific title (“X is unauthenticated”) and CLI sign-in guidance.

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

Note

Polish dialog, alert, and unauthenticated provider banner surfaces

• Refactors alert.tsx to use explicit icon/content/action slots with a flex layout, updating DOM structure and variant styles across all alert usages.
• Updates ProviderStatusBanner.tsx to detect unauthenticated provider state (error + auth.unauthenticated) and show a specific title and 'Sign in via the CLI to authenticate again.' message.
• Moves backdrop blur and semi-transparent background from the viewport to the backdrop element in dialog.tsx and alert-dialog.tsx; backdropss are now force-rendered.
• Adjusts active provider resolution in ChatView.tsx to prefer an explicit instance-id match for the selected thread provider before other fallbacks.
• Behavioral Change: DOM structure of Alert and all dialog/sheet backdrops has changed, which may affect snapshot tests or CSS overrides targeting old selectors.

^{Macroscope summarized 7d8c434.}

[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: 34b4a2fe-de5b-48b5-943d-6a476b07d3a0

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
• Commit unit tests in branch ui/dialog-alert-polish

---

_{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.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing provider display name
  • Restored the fallback chain so providerName uses status.displayName?.trim() || formatProviderDriverKindLabel(status.driver) instead of the bare status.displayName, preventing 'undefined is unauthenticated' when displayName is omitted.

Or push these changes by commenting:

@cursor push 5cdfb4648a

Preview (5cdfb4648a)

diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx@@ -2,6 +2,7 @@
import { memo } from "react";
import { InfoIcon } from "lucide-react";
import { cn } from "~/lib/utils";
+import { formatProviderDriverKindLabel } from "~/providerModels";
export const ProviderStatusBanner = memo(function ProviderStatusBanner({
status,
@@ -12,7 +13,7 @@
return null;
}
- const providerName = status.displayName;+ const providerName = status.displayName?.trim() || formatProviderDriverKindLabel(status.driver);
const title = `${providerName} is unauthenticated`;
const message = "Sign in via the CLI to authenticate again.";

_{You can send follow-ups to the cloud agent here.}

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update Details	Update Permalink Details Branch: pr-3016 Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Update Permalink Details Branch: pr-3016 Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update QR

[macroscopeapp]

Approvability

Verdict: Approved

UI polish changes: CSS styling adjustments for dialog/alert/sheet backdrops, Alert component layout refactor, and improved unauthenticated provider banner messaging. Low-risk styling work with no significant runtime behavior changes.

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

[cursor]

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Centered dialogs break mobile layout
  • Added !centered guard to all bottomStickOnMobile class conditions in both DialogPopup and AlertDialogPopup so the bottom-sheet mobile classes are skipped when centered mode is active.

Or push these changes by commenting:

@cursor push c8cb0d54f0

Preview (c8cb0d54f0)

diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx--- a/apps/web/src/components/ui/alert-dialog.tsx+++ b/apps/web/src/components/ui/alert-dialog.tsx@@ -65,13 +65,16 @@
<AlertDialogPortal>
<AlertDialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<AlertDialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx--- a/apps/web/src/components/ui/dialog.tsx+++ b/apps/web/src/components/ui/dialog.tsx@@ -74,13 +74,16 @@
<DialogPortal>
<DialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<DialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 64356b14663a84f1bd93c120551216389bcd1652. Configure here.}

[juliusmarminge]

Ports the dialog/alert-surface part of #2451 by @sandersonstabo, rebased onto current main.

• Dialog and alert-dialog backdrops get a consistent bg-background/60 tint with a subtle 4px blur (toned down per review feedback in Polish chat UI and provider prompts #2451); command dialog backdrop gains the same backdrop-blur-xs
• Dialog viewports use balanced 1fr auto 1fr rows (proper vertical centering instead of the top-weighted 3fr layout), plus an opt-in centered viewport for true center placement
• Alert is reworked into a slot-based flex layout, fixing the misaligned icon/text/action grid; error alerts get readable destructive text colors
• Thread error banner dismiss becomes a ghost icon Button; provider status banner becomes a compact "X is unauthenticated — sign in via the CLI" card (de-Codex-ified copy) shown for the selected provider instance

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only styling and banner copy/instance selection; no auth, API, or data-path changes beyond which provider snapshot is displayed.

Overview
Polishes dialog and sheet overlays and in-chat status banners for more consistent visuals and clearer provider errors.

Overlays:Dialog and AlertDialog backdrops now use bg-background/60 with backdrop-blur-xs, forceRender on the backdrop, and viewports use balanced 1fr auto 1fr rows instead of a top-heavy layout (viewport-level tint/blur removed). Sheet and command dialog backdrops match the same tint and blur.

Alerts:Alert is reworked to partition children into icon, title/description, and action slots (via data-slot or component displayName) and lay them out with flex instead of CSS grid, including stronger destructive text styling for error variants. Thread error dismiss is a ghost icon Button.

Provider banner:ChatView resolves activeProviderInstanceId from the composer’s selected provider instance when it exists in server config, so custom instances (e.g. codex_personal) show the right status. Provider status drops the shared Alert for a compact inline card with unauthenticated-specific title (“X is unauthenticated”) and CLI sign-in guidance.

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

Note

Polish dialog, alert, and unauthenticated provider banner surfaces

• Refactors alert.tsx to use explicit icon/content/action slots with a flex layout, updating DOM structure and variant styles across all alert usages.
• Updates ProviderStatusBanner.tsx to detect unauthenticated provider state (error + auth.unauthenticated) and show a specific title and 'Sign in via the CLI to authenticate again.' message.
• Moves backdrop blur and semi-transparent background from the viewport to the backdrop element in dialog.tsx and alert-dialog.tsx; backdropss are now force-rendered.
• Adjusts active provider resolution in ChatView.tsx to prefer an explicit instance-id match for the selected thread provider before other fallbacks.
• Behavioral Change: DOM structure of Alert and all dialog/sheet backdrops has changed, which may affect snapshot tests or CSS overrides targeting old selectors.

^{Macroscope summarized 7d8c434.}

[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: 34b4a2fe-de5b-48b5-943d-6a476b07d3a0

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
• Commit unit tests in branch ui/dialog-alert-polish

---

_{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.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing provider display name
  • Restored the fallback chain so providerName uses status.displayName?.trim() || formatProviderDriverKindLabel(status.driver) instead of the bare status.displayName, preventing 'undefined is unauthenticated' when displayName is omitted.

Or push these changes by commenting:

@cursor push 5cdfb4648a

Preview (5cdfb4648a)

diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx@@ -2,6 +2,7 @@
import { memo } from "react";
import { InfoIcon } from "lucide-react";
import { cn } from "~/lib/utils";
+import { formatProviderDriverKindLabel } from "~/providerModels";
export const ProviderStatusBanner = memo(function ProviderStatusBanner({
status,
@@ -12,7 +13,7 @@
return null;
}
- const providerName = status.displayName;+ const providerName = status.displayName?.trim() || formatProviderDriverKindLabel(status.driver);
const title = `${providerName} is unauthenticated`;
const message = "Sign in via the CLI to authenticate again.";

_{You can send follow-ups to the cloud agent here.}

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update Details	Update Permalink Details Branch: pr-3016 Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Update Permalink Details Branch: pr-3016 Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update QR

[macroscopeapp]

Approvability

Verdict: Approved

UI polish changes: CSS styling adjustments for dialog/alert/sheet backdrops, Alert component layout refactor, and improved unauthenticated provider banner messaging. Low-risk styling work with no significant runtime behavior changes.

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

[cursor]

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Centered dialogs break mobile layout
  • Added !centered guard to all bottomStickOnMobile class conditions in both DialogPopup and AlertDialogPopup so the bottom-sheet mobile classes are skipped when centered mode is active.

Or push these changes by commenting:

@cursor push c8cb0d54f0

Preview (c8cb0d54f0)

diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx--- a/apps/web/src/components/ui/alert-dialog.tsx+++ b/apps/web/src/components/ui/alert-dialog.tsx@@ -65,13 +65,16 @@
<AlertDialogPortal>
<AlertDialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<AlertDialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx--- a/apps/web/src/components/ui/dialog.tsx+++ b/apps/web/src/components/ui/dialog.tsx@@ -74,13 +74,16 @@
<DialogPortal>
<DialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<DialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 64356b14663a84f1bd93c120551216389bcd1652. Configure here.}

[juliusmarminge]

Ports the dialog/alert-surface part of #2451 by @sandersonstabo, rebased onto current main.

• Dialog and alert-dialog backdrops get a consistent bg-background/60 tint with a subtle 4px blur (toned down per review feedback in Polish chat UI and provider prompts #2451); command dialog backdrop gains the same backdrop-blur-xs
• Dialog viewports use balanced 1fr auto 1fr rows (proper vertical centering instead of the top-weighted 3fr layout), plus an opt-in centered viewport for true center placement
• Alert is reworked into a slot-based flex layout, fixing the misaligned icon/text/action grid; error alerts get readable destructive text colors
• Thread error banner dismiss becomes a ghost icon Button; provider status banner becomes a compact "X is unauthenticated — sign in via the CLI" card (de-Codex-ified copy) shown for the selected provider instance

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only styling and banner copy/instance selection; no auth, API, or data-path changes beyond which provider snapshot is displayed.

Overview
Polishes dialog and sheet overlays and in-chat status banners for more consistent visuals and clearer provider errors.

Overlays:Dialog and AlertDialog backdrops now use bg-background/60 with backdrop-blur-xs, forceRender on the backdrop, and viewports use balanced 1fr auto 1fr rows instead of a top-heavy layout (viewport-level tint/blur removed). Sheet and command dialog backdrops match the same tint and blur.

Alerts:Alert is reworked to partition children into icon, title/description, and action slots (via data-slot or component displayName) and lay them out with flex instead of CSS grid, including stronger destructive text styling for error variants. Thread error dismiss is a ghost icon Button.

Provider banner:ChatView resolves activeProviderInstanceId from the composer’s selected provider instance when it exists in server config, so custom instances (e.g. codex_personal) show the right status. Provider status drops the shared Alert for a compact inline card with unauthenticated-specific title (“X is unauthenticated”) and CLI sign-in guidance.

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

Note

Polish dialog, alert, and unauthenticated provider banner surfaces

• Refactors alert.tsx to use explicit icon/content/action slots with a flex layout, updating DOM structure and variant styles across all alert usages.
• Updates ProviderStatusBanner.tsx to detect unauthenticated provider state (error + auth.unauthenticated) and show a specific title and 'Sign in via the CLI to authenticate again.' message.
• Moves backdrop blur and semi-transparent background from the viewport to the backdrop element in dialog.tsx and alert-dialog.tsx; backdropss are now force-rendered.
• Adjusts active provider resolution in ChatView.tsx to prefer an explicit instance-id match for the selected thread provider before other fallbacks.
• Behavioral Change: DOM structure of Alert and all dialog/sheet backdrops has changed, which may affect snapshot tests or CSS overrides targeting old selectors.

^{Macroscope summarized 7d8c434.}

[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: 34b4a2fe-de5b-48b5-943d-6a476b07d3a0

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
• Commit unit tests in branch ui/dialog-alert-polish

---

_{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.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing provider display name
  • Restored the fallback chain so providerName uses status.displayName?.trim() || formatProviderDriverKindLabel(status.driver) instead of the bare status.displayName, preventing 'undefined is unauthenticated' when displayName is omitted.

Or push these changes by commenting:

@cursor push 5cdfb4648a

Preview (5cdfb4648a)

diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx@@ -2,6 +2,7 @@
import { memo } from "react";
import { InfoIcon } from "lucide-react";
import { cn } from "~/lib/utils";
+import { formatProviderDriverKindLabel } from "~/providerModels";
export const ProviderStatusBanner = memo(function ProviderStatusBanner({
status,
@@ -12,7 +13,7 @@
return null;
}
- const providerName = status.displayName;+ const providerName = status.displayName?.trim() || formatProviderDriverKindLabel(status.driver);
const title = `${providerName} is unauthenticated`;
const message = "Sign in via the CLI to authenticate again.";

_{You can send follow-ups to the cloud agent here.}

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update Details	Update Permalink Details Branch: pr-3016 Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Update Permalink Details Branch: pr-3016 Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update QR

[macroscopeapp]

Approvability

Verdict: Approved

UI polish changes: CSS styling adjustments for dialog/alert/sheet backdrops, Alert component layout refactor, and improved unauthenticated provider banner messaging. Low-risk styling work with no significant runtime behavior changes.

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

[cursor]

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Centered dialogs break mobile layout
  • Added !centered guard to all bottomStickOnMobile class conditions in both DialogPopup and AlertDialogPopup so the bottom-sheet mobile classes are skipped when centered mode is active.

Or push these changes by commenting:

@cursor push c8cb0d54f0

Preview (c8cb0d54f0)

diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx--- a/apps/web/src/components/ui/alert-dialog.tsx+++ b/apps/web/src/components/ui/alert-dialog.tsx@@ -65,13 +65,16 @@
<AlertDialogPortal>
<AlertDialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<AlertDialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx--- a/apps/web/src/components/ui/dialog.tsx+++ b/apps/web/src/components/ui/dialog.tsx@@ -74,13 +74,16 @@
<DialogPortal>
<DialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<DialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 64356b14663a84f1bd93c120551216389bcd1652. Configure here.}

[juliusmarminge]

Ports the dialog/alert-surface part of #2451 by @sandersonstabo, rebased onto current main.

• Dialog and alert-dialog backdrops get a consistent bg-background/60 tint with a subtle 4px blur (toned down per review feedback in Polish chat UI and provider prompts #2451); command dialog backdrop gains the same backdrop-blur-xs
• Dialog viewports use balanced 1fr auto 1fr rows (proper vertical centering instead of the top-weighted 3fr layout), plus an opt-in centered viewport for true center placement
• Alert is reworked into a slot-based flex layout, fixing the misaligned icon/text/action grid; error alerts get readable destructive text colors
• Thread error banner dismiss becomes a ghost icon Button; provider status banner becomes a compact "X is unauthenticated — sign in via the CLI" card (de-Codex-ified copy) shown for the selected provider instance

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only styling and banner copy/instance selection; no auth, API, or data-path changes beyond which provider snapshot is displayed.

Overview
Polishes dialog and sheet overlays and in-chat status banners for more consistent visuals and clearer provider errors.

Overlays:Dialog and AlertDialog backdrops now use bg-background/60 with backdrop-blur-xs, forceRender on the backdrop, and viewports use balanced 1fr auto 1fr rows instead of a top-heavy layout (viewport-level tint/blur removed). Sheet and command dialog backdrops match the same tint and blur.

Alerts:Alert is reworked to partition children into icon, title/description, and action slots (via data-slot or component displayName) and lay them out with flex instead of CSS grid, including stronger destructive text styling for error variants. Thread error dismiss is a ghost icon Button.

Provider banner:ChatView resolves activeProviderInstanceId from the composer’s selected provider instance when it exists in server config, so custom instances (e.g. codex_personal) show the right status. Provider status drops the shared Alert for a compact inline card with unauthenticated-specific title (“X is unauthenticated”) and CLI sign-in guidance.

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

Note

Polish dialog, alert, and unauthenticated provider banner surfaces

• Refactors alert.tsx to use explicit icon/content/action slots with a flex layout, updating DOM structure and variant styles across all alert usages.
• Updates ProviderStatusBanner.tsx to detect unauthenticated provider state (error + auth.unauthenticated) and show a specific title and 'Sign in via the CLI to authenticate again.' message.
• Moves backdrop blur and semi-transparent background from the viewport to the backdrop element in dialog.tsx and alert-dialog.tsx; backdropss are now force-rendered.
• Adjusts active provider resolution in ChatView.tsx to prefer an explicit instance-id match for the selected thread provider before other fallbacks.
• Behavioral Change: DOM structure of Alert and all dialog/sheet backdrops has changed, which may affect snapshot tests or CSS overrides targeting old selectors.

^{Macroscope summarized 7d8c434.}

[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: 34b4a2fe-de5b-48b5-943d-6a476b07d3a0

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
• Commit unit tests in branch ui/dialog-alert-polish

---

_{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.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing provider display name
  • Restored the fallback chain so providerName uses status.displayName?.trim() || formatProviderDriverKindLabel(status.driver) instead of the bare status.displayName, preventing 'undefined is unauthenticated' when displayName is omitted.

Or push these changes by commenting:

@cursor push 5cdfb4648a

Preview (5cdfb4648a)

diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx@@ -2,6 +2,7 @@
import { memo } from "react";
import { InfoIcon } from "lucide-react";
import { cn } from "~/lib/utils";
+import { formatProviderDriverKindLabel } from "~/providerModels";
export const ProviderStatusBanner = memo(function ProviderStatusBanner({
status,
@@ -12,7 +13,7 @@
return null;
}
- const providerName = status.displayName;+ const providerName = status.displayName?.trim() || formatProviderDriverKindLabel(status.driver);
const title = `${providerName} is unauthenticated`;
const message = "Sign in via the CLI to authenticate again.";

_{You can send follow-ups to the cloud agent here.}

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update Details	Update Permalink Details Branch: pr-3016 Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Update Permalink Details Branch: pr-3016 Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update QR

[macroscopeapp]

Approvability

Verdict: Approved

UI polish changes: CSS styling adjustments for dialog/alert/sheet backdrops, Alert component layout refactor, and improved unauthenticated provider banner messaging. Low-risk styling work with no significant runtime behavior changes.

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

[cursor]

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Centered dialogs break mobile layout
  • Added !centered guard to all bottomStickOnMobile class conditions in both DialogPopup and AlertDialogPopup so the bottom-sheet mobile classes are skipped when centered mode is active.

Or push these changes by commenting:

@cursor push c8cb0d54f0

Preview (c8cb0d54f0)

diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx--- a/apps/web/src/components/ui/alert-dialog.tsx+++ b/apps/web/src/components/ui/alert-dialog.tsx@@ -65,13 +65,16 @@
<AlertDialogPortal>
<AlertDialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<AlertDialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx--- a/apps/web/src/components/ui/dialog.tsx+++ b/apps/web/src/components/ui/dialog.tsx@@ -74,13 +74,16 @@
<DialogPortal>
<DialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<DialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 64356b14663a84f1bd93c120551216389bcd1652. Configure here.}

[juliusmarminge]

Ports the dialog/alert-surface part of #2451 by @sandersonstabo, rebased onto current main.

• Dialog and alert-dialog backdrops get a consistent bg-background/60 tint with a subtle 4px blur (toned down per review feedback in Polish chat UI and provider prompts #2451); command dialog backdrop gains the same backdrop-blur-xs
• Dialog viewports use balanced 1fr auto 1fr rows (proper vertical centering instead of the top-weighted 3fr layout), plus an opt-in centered viewport for true center placement
• Alert is reworked into a slot-based flex layout, fixing the misaligned icon/text/action grid; error alerts get readable destructive text colors
• Thread error banner dismiss becomes a ghost icon Button; provider status banner becomes a compact "X is unauthenticated — sign in via the CLI" card (de-Codex-ified copy) shown for the selected provider instance

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only styling and banner copy/instance selection; no auth, API, or data-path changes beyond which provider snapshot is displayed.

Overview
Polishes dialog and sheet overlays and in-chat status banners for more consistent visuals and clearer provider errors.

Overlays:Dialog and AlertDialog backdrops now use bg-background/60 with backdrop-blur-xs, forceRender on the backdrop, and viewports use balanced 1fr auto 1fr rows instead of a top-heavy layout (viewport-level tint/blur removed). Sheet and command dialog backdrops match the same tint and blur.

Alerts:Alert is reworked to partition children into icon, title/description, and action slots (via data-slot or component displayName) and lay them out with flex instead of CSS grid, including stronger destructive text styling for error variants. Thread error dismiss is a ghost icon Button.

Provider banner:ChatView resolves activeProviderInstanceId from the composer’s selected provider instance when it exists in server config, so custom instances (e.g. codex_personal) show the right status. Provider status drops the shared Alert for a compact inline card with unauthenticated-specific title (“X is unauthenticated”) and CLI sign-in guidance.

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

Note

Polish dialog, alert, and unauthenticated provider banner surfaces

• Refactors alert.tsx to use explicit icon/content/action slots with a flex layout, updating DOM structure and variant styles across all alert usages.
• Updates ProviderStatusBanner.tsx to detect unauthenticated provider state (error + auth.unauthenticated) and show a specific title and 'Sign in via the CLI to authenticate again.' message.
• Moves backdrop blur and semi-transparent background from the viewport to the backdrop element in dialog.tsx and alert-dialog.tsx; backdropss are now force-rendered.
• Adjusts active provider resolution in ChatView.tsx to prefer an explicit instance-id match for the selected thread provider before other fallbacks.
• Behavioral Change: DOM structure of Alert and all dialog/sheet backdrops has changed, which may affect snapshot tests or CSS overrides targeting old selectors.

^{Macroscope summarized 7d8c434.}

[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: 34b4a2fe-de5b-48b5-943d-6a476b07d3a0

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
• Commit unit tests in branch ui/dialog-alert-polish

---

_{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.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing provider display name
  • Restored the fallback chain so providerName uses status.displayName?.trim() || formatProviderDriverKindLabel(status.driver) instead of the bare status.displayName, preventing 'undefined is unauthenticated' when displayName is omitted.

Or push these changes by commenting:

@cursor push 5cdfb4648a

Preview (5cdfb4648a)

diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx@@ -2,6 +2,7 @@
import { memo } from "react";
import { InfoIcon } from "lucide-react";
import { cn } from "~/lib/utils";
+import { formatProviderDriverKindLabel } from "~/providerModels";
export const ProviderStatusBanner = memo(function ProviderStatusBanner({
status,
@@ -12,7 +13,7 @@
return null;
}
- const providerName = status.displayName;+ const providerName = status.displayName?.trim() || formatProviderDriverKindLabel(status.driver);
const title = `${providerName} is unauthenticated`;
const message = "Sign in via the CLI to authenticate again.";

_{You can send follow-ups to the cloud agent here.}

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update Details	Update Permalink Details Branch: pr-3016 Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Update Permalink Details Branch: pr-3016 Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update QR

[macroscopeapp]

Approvability

Verdict: Approved

UI polish changes: CSS styling adjustments for dialog/alert/sheet backdrops, Alert component layout refactor, and improved unauthenticated provider banner messaging. Low-risk styling work with no significant runtime behavior changes.

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

[cursor]

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Centered dialogs break mobile layout
  • Added !centered guard to all bottomStickOnMobile class conditions in both DialogPopup and AlertDialogPopup so the bottom-sheet mobile classes are skipped when centered mode is active.

Or push these changes by commenting:

@cursor push c8cb0d54f0

Preview (c8cb0d54f0)

diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx--- a/apps/web/src/components/ui/alert-dialog.tsx+++ b/apps/web/src/components/ui/alert-dialog.tsx@@ -65,13 +65,16 @@
<AlertDialogPortal>
<AlertDialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<AlertDialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx--- a/apps/web/src/components/ui/dialog.tsx+++ b/apps/web/src/components/ui/dialog.tsx@@ -74,13 +74,16 @@
<DialogPortal>
<DialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<DialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 64356b14663a84f1bd93c120551216389bcd1652. Configure here.}

[juliusmarminge]

Ports the dialog/alert-surface part of #2451 by @sandersonstabo, rebased onto current main.

• Dialog and alert-dialog backdrops get a consistent bg-background/60 tint with a subtle 4px blur (toned down per review feedback in Polish chat UI and provider prompts #2451); command dialog backdrop gains the same backdrop-blur-xs
• Dialog viewports use balanced 1fr auto 1fr rows (proper vertical centering instead of the top-weighted 3fr layout), plus an opt-in centered viewport for true center placement
• Alert is reworked into a slot-based flex layout, fixing the misaligned icon/text/action grid; error alerts get readable destructive text colors
• Thread error banner dismiss becomes a ghost icon Button; provider status banner becomes a compact "X is unauthenticated — sign in via the CLI" card (de-Codex-ified copy) shown for the selected provider instance

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only styling and banner copy/instance selection; no auth, API, or data-path changes beyond which provider snapshot is displayed.

Overview
Polishes dialog and sheet overlays and in-chat status banners for more consistent visuals and clearer provider errors.

Overlays:Dialog and AlertDialog backdrops now use bg-background/60 with backdrop-blur-xs, forceRender on the backdrop, and viewports use balanced 1fr auto 1fr rows instead of a top-heavy layout (viewport-level tint/blur removed). Sheet and command dialog backdrops match the same tint and blur.

Alerts:Alert is reworked to partition children into icon, title/description, and action slots (via data-slot or component displayName) and lay them out with flex instead of CSS grid, including stronger destructive text styling for error variants. Thread error dismiss is a ghost icon Button.

Provider banner:ChatView resolves activeProviderInstanceId from the composer’s selected provider instance when it exists in server config, so custom instances (e.g. codex_personal) show the right status. Provider status drops the shared Alert for a compact inline card with unauthenticated-specific title (“X is unauthenticated”) and CLI sign-in guidance.

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

Note

Polish dialog, alert, and unauthenticated provider banner surfaces

• Refactors alert.tsx to use explicit icon/content/action slots with a flex layout, updating DOM structure and variant styles across all alert usages.
• Updates ProviderStatusBanner.tsx to detect unauthenticated provider state (error + auth.unauthenticated) and show a specific title and 'Sign in via the CLI to authenticate again.' message.
• Moves backdrop blur and semi-transparent background from the viewport to the backdrop element in dialog.tsx and alert-dialog.tsx; backdropss are now force-rendered.
• Adjusts active provider resolution in ChatView.tsx to prefer an explicit instance-id match for the selected thread provider before other fallbacks.
• Behavioral Change: DOM structure of Alert and all dialog/sheet backdrops has changed, which may affect snapshot tests or CSS overrides targeting old selectors.

^{Macroscope summarized 7d8c434.}

[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: 34b4a2fe-de5b-48b5-943d-6a476b07d3a0

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
• Commit unit tests in branch ui/dialog-alert-polish

---

_{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.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing provider display name
  • Restored the fallback chain so providerName uses status.displayName?.trim() || formatProviderDriverKindLabel(status.driver) instead of the bare status.displayName, preventing 'undefined is unauthenticated' when displayName is omitted.

Or push these changes by commenting:

@cursor push 5cdfb4648a

Preview (5cdfb4648a)

diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx@@ -2,6 +2,7 @@
import { memo } from "react";
import { InfoIcon } from "lucide-react";
import { cn } from "~/lib/utils";
+import { formatProviderDriverKindLabel } from "~/providerModels";
export const ProviderStatusBanner = memo(function ProviderStatusBanner({
status,
@@ -12,7 +13,7 @@
return null;
}
- const providerName = status.displayName;+ const providerName = status.displayName?.trim() || formatProviderDriverKindLabel(status.driver);
const title = `${providerName} is unauthenticated`;
const message = "Sign in via the CLI to authenticate again.";

_{You can send follow-ups to the cloud agent here.}

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update Details	Update Permalink Details Branch: pr-3016 Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Update Permalink Details Branch: pr-3016 Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update QR

[macroscopeapp]

Approvability

Verdict: Approved

UI polish changes: CSS styling adjustments for dialog/alert/sheet backdrops, Alert component layout refactor, and improved unauthenticated provider banner messaging. Low-risk styling work with no significant runtime behavior changes.

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

[cursor]

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Centered dialogs break mobile layout
  • Added !centered guard to all bottomStickOnMobile class conditions in both DialogPopup and AlertDialogPopup so the bottom-sheet mobile classes are skipped when centered mode is active.

Or push these changes by commenting:

@cursor push c8cb0d54f0

Preview (c8cb0d54f0)

diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx--- a/apps/web/src/components/ui/alert-dialog.tsx+++ b/apps/web/src/components/ui/alert-dialog.tsx@@ -65,13 +65,16 @@
<AlertDialogPortal>
<AlertDialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<AlertDialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx--- a/apps/web/src/components/ui/dialog.tsx+++ b/apps/web/src/components/ui/dialog.tsx@@ -74,13 +74,16 @@
<DialogPortal>
<DialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<DialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 64356b14663a84f1bd93c120551216389bcd1652. Configure here.}

[juliusmarminge]

Ports the dialog/alert-surface part of #2451 by @sandersonstabo, rebased onto current main.

• Dialog and alert-dialog backdrops get a consistent bg-background/60 tint with a subtle 4px blur (toned down per review feedback in Polish chat UI and provider prompts #2451); command dialog backdrop gains the same backdrop-blur-xs
• Dialog viewports use balanced 1fr auto 1fr rows (proper vertical centering instead of the top-weighted 3fr layout), plus an opt-in centered viewport for true center placement
• Alert is reworked into a slot-based flex layout, fixing the misaligned icon/text/action grid; error alerts get readable destructive text colors
• Thread error banner dismiss becomes a ghost icon Button; provider status banner becomes a compact "X is unauthenticated — sign in via the CLI" card (de-Codex-ified copy) shown for the selected provider instance

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only styling and banner copy/instance selection; no auth, API, or data-path changes beyond which provider snapshot is displayed.

Overview
Polishes dialog and sheet overlays and in-chat status banners for more consistent visuals and clearer provider errors.

Overlays:Dialog and AlertDialog backdrops now use bg-background/60 with backdrop-blur-xs, forceRender on the backdrop, and viewports use balanced 1fr auto 1fr rows instead of a top-heavy layout (viewport-level tint/blur removed). Sheet and command dialog backdrops match the same tint and blur.

Alerts:Alert is reworked to partition children into icon, title/description, and action slots (via data-slot or component displayName) and lay them out with flex instead of CSS grid, including stronger destructive text styling for error variants. Thread error dismiss is a ghost icon Button.

Provider banner:ChatView resolves activeProviderInstanceId from the composer’s selected provider instance when it exists in server config, so custom instances (e.g. codex_personal) show the right status. Provider status drops the shared Alert for a compact inline card with unauthenticated-specific title (“X is unauthenticated”) and CLI sign-in guidance.

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

Note

Polish dialog, alert, and unauthenticated provider banner surfaces

• Refactors alert.tsx to use explicit icon/content/action slots with a flex layout, updating DOM structure and variant styles across all alert usages.
• Updates ProviderStatusBanner.tsx to detect unauthenticated provider state (error + auth.unauthenticated) and show a specific title and 'Sign in via the CLI to authenticate again.' message.
• Moves backdrop blur and semi-transparent background from the viewport to the backdrop element in dialog.tsx and alert-dialog.tsx; backdropss are now force-rendered.
• Adjusts active provider resolution in ChatView.tsx to prefer an explicit instance-id match for the selected thread provider before other fallbacks.
• Behavioral Change: DOM structure of Alert and all dialog/sheet backdrops has changed, which may affect snapshot tests or CSS overrides targeting old selectors.

^{Macroscope summarized 7d8c434.}

[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: 34b4a2fe-de5b-48b5-943d-6a476b07d3a0

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
• Commit unit tests in branch ui/dialog-alert-polish

---

_{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.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing provider display name
  • Restored the fallback chain so providerName uses status.displayName?.trim() || formatProviderDriverKindLabel(status.driver) instead of the bare status.displayName, preventing 'undefined is unauthenticated' when displayName is omitted.

Or push these changes by commenting:

@cursor push 5cdfb4648a

Preview (5cdfb4648a)

diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx@@ -2,6 +2,7 @@
import { memo } from "react";
import { InfoIcon } from "lucide-react";
import { cn } from "~/lib/utils";
+import { formatProviderDriverKindLabel } from "~/providerModels";
export const ProviderStatusBanner = memo(function ProviderStatusBanner({
status,
@@ -12,7 +13,7 @@
return null;
}
- const providerName = status.displayName;+ const providerName = status.displayName?.trim() || formatProviderDriverKindLabel(status.driver);
const title = `${providerName} is unauthenticated`;
const message = "Sign in via the CLI to authenticate again.";

_{You can send follow-ups to the cloud agent here.}

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update Details	Update Permalink Details Branch: pr-3016 Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Update Permalink Details Branch: pr-3016 Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update QR

[macroscopeapp]

Approvability

Verdict: Approved

UI polish changes: CSS styling adjustments for dialog/alert/sheet backdrops, Alert component layout refactor, and improved unauthenticated provider banner messaging. Low-risk styling work with no significant runtime behavior changes.

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

[cursor]

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Centered dialogs break mobile layout
  • Added !centered guard to all bottomStickOnMobile class conditions in both DialogPopup and AlertDialogPopup so the bottom-sheet mobile classes are skipped when centered mode is active.

Or push these changes by commenting:

@cursor push c8cb0d54f0

Preview (c8cb0d54f0)

diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx--- a/apps/web/src/components/ui/alert-dialog.tsx+++ b/apps/web/src/components/ui/alert-dialog.tsx@@ -65,13 +65,16 @@
<AlertDialogPortal>
<AlertDialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<AlertDialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx--- a/apps/web/src/components/ui/dialog.tsx+++ b/apps/web/src/components/ui/dialog.tsx@@ -74,13 +74,16 @@
<DialogPortal>
<DialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<DialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 64356b14663a84f1bd93c120551216389bcd1652. Configure here.}

[juliusmarminge]

Ports the dialog/alert-surface part of #2451 by @sandersonstabo, rebased onto current main.

• Dialog and alert-dialog backdrops get a consistent bg-background/60 tint with a subtle 4px blur (toned down per review feedback in Polish chat UI and provider prompts #2451); command dialog backdrop gains the same backdrop-blur-xs
• Dialog viewports use balanced 1fr auto 1fr rows (proper vertical centering instead of the top-weighted 3fr layout), plus an opt-in centered viewport for true center placement
• Alert is reworked into a slot-based flex layout, fixing the misaligned icon/text/action grid; error alerts get readable destructive text colors
• Thread error banner dismiss becomes a ghost icon Button; provider status banner becomes a compact "X is unauthenticated — sign in via the CLI" card (de-Codex-ified copy) shown for the selected provider instance

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only styling and banner copy/instance selection; no auth, API, or data-path changes beyond which provider snapshot is displayed.

Overview
Polishes dialog and sheet overlays and in-chat status banners for more consistent visuals and clearer provider errors.

Overlays:Dialog and AlertDialog backdrops now use bg-background/60 with backdrop-blur-xs, forceRender on the backdrop, and viewports use balanced 1fr auto 1fr rows instead of a top-heavy layout (viewport-level tint/blur removed). Sheet and command dialog backdrops match the same tint and blur.

Alerts:Alert is reworked to partition children into icon, title/description, and action slots (via data-slot or component displayName) and lay them out with flex instead of CSS grid, including stronger destructive text styling for error variants. Thread error dismiss is a ghost icon Button.

Provider banner:ChatView resolves activeProviderInstanceId from the composer’s selected provider instance when it exists in server config, so custom instances (e.g. codex_personal) show the right status. Provider status drops the shared Alert for a compact inline card with unauthenticated-specific title (“X is unauthenticated”) and CLI sign-in guidance.

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

Note

Polish dialog, alert, and unauthenticated provider banner surfaces

• Refactors alert.tsx to use explicit icon/content/action slots with a flex layout, updating DOM structure and variant styles across all alert usages.
• Updates ProviderStatusBanner.tsx to detect unauthenticated provider state (error + auth.unauthenticated) and show a specific title and 'Sign in via the CLI to authenticate again.' message.
• Moves backdrop blur and semi-transparent background from the viewport to the backdrop element in dialog.tsx and alert-dialog.tsx; backdropss are now force-rendered.
• Adjusts active provider resolution in ChatView.tsx to prefer an explicit instance-id match for the selected thread provider before other fallbacks.
• Behavioral Change: DOM structure of Alert and all dialog/sheet backdrops has changed, which may affect snapshot tests or CSS overrides targeting old selectors.

^{Macroscope summarized 7d8c434.}

[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: 34b4a2fe-de5b-48b5-943d-6a476b07d3a0

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
• Commit unit tests in branch ui/dialog-alert-polish

---

_{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.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing provider display name
  • Restored the fallback chain so providerName uses status.displayName?.trim() || formatProviderDriverKindLabel(status.driver) instead of the bare status.displayName, preventing 'undefined is unauthenticated' when displayName is omitted.

Or push these changes by commenting:

@cursor push 5cdfb4648a

Preview (5cdfb4648a)

diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx@@ -2,6 +2,7 @@
import { memo } from "react";
import { InfoIcon } from "lucide-react";
import { cn } from "~/lib/utils";
+import { formatProviderDriverKindLabel } from "~/providerModels";
export const ProviderStatusBanner = memo(function ProviderStatusBanner({
status,
@@ -12,7 +13,7 @@
return null;
}
- const providerName = status.displayName;+ const providerName = status.displayName?.trim() || formatProviderDriverKindLabel(status.driver);
const title = `${providerName} is unauthenticated`;
const message = "Sign in via the CLI to authenticate again.";

_{You can send follow-ups to the cloud agent here.}

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf App version: 0.1.0 Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update Details	Update Permalink Details Branch: pr-3016 Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333	Update Permalink Details Branch: pr-3016 Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf Git commit: 8398014f04a583f61eaf69a13df2ab6c61d11333
Update QR

[macroscopeapp]

Approvability

Verdict: Approved

UI polish changes: CSS styling adjustments for dialog/alert/sheet backdrops, Alert component layout refactor, and improved unauthenticated provider banner messaging. Low-risk styling work with no significant runtime behavior changes.

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

[cursor]

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Centered dialogs break mobile layout
  • Added !centered guard to all bottomStickOnMobile class conditions in both DialogPopup and AlertDialogPopup so the bottom-sheet mobile classes are skipped when centered mode is active.

Or push these changes by commenting:

@cursor push c8cb0d54f0

Preview (c8cb0d54f0)

diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx--- a/apps/web/src/components/ui/alert-dialog.tsx+++ b/apps/web/src/components/ui/alert-dialog.tsx@@ -65,13 +65,16 @@
<AlertDialogPortal>
<AlertDialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<AlertDialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx--- a/apps/web/src/components/ui/dialog.tsx+++ b/apps/web/src/components/ui/dialog.tsx@@ -74,13 +74,16 @@
<DialogPortal>
<DialogBackdrop />
<Viewport
- className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}+ className={cn(+ bottomStickOnMobile && !centered && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",+ )}
>
<DialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
!centered && "row-start-2",
bottomStickOnMobile &&
+ !centered &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 64356b14663a84f1bd93c120551216389bcd1652. Configure here.}