From 9cbe50d10de90684f4322d467dd1eafe9f726045 Mon Sep 17 00:00:00 2001
From: maria <maria@kuuro.net>
Date: Thu, 23 Jul 2026 12:52:15 -0400
Subject: [PATCH] fix(web): restore dark composer toolbar styling

---
 apps/web/src/components/BranchToolbar.tsx |  2 +-
 apps/web/src/components/ChatView.tsx      | 72 +++++++++++------------
 apps/web/src/index.css                    | 33 ++++++++++-
 3 files changed, 68 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
index c2db48184c7c8f19e07986072d7cc0e77c021e86..ffab9cbdf86aae2be641e953e8111539de46ea2d 100644
--- a/apps/web/src/components/BranchToolbar.tsx
+++ b/apps/web/src/components/BranchToolbar.tsx
@@ -248,7 +248,7 @@ export const BranchToolbar = memo(function BranchToolbar({
   if (!hasActiveThread || !activeProject) return null;
 
   return (
-    <div className="flex w-full items-center gap-2 border-t border-border/60 px-3 py-2">
+    <div className="chat-composer-context-strip -mt-4 mx-auto flex w-[calc(100%-1.5rem)] max-w-[calc(48rem-1.5rem)] items-center gap-2 pt-5 pb-1 ps-1">
       {isMobile ? (
         <MobileRunContextSelector
           envLocked={envLocked}
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 1ef1a7a884f692eaa6f67b5f9a2706218bf9b593..e2437a465d7f9d4f233758584a6ad67ed6edf562 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -5592,7 +5592,7 @@ function ChatViewContent(props: ChatViewProps) {
                         : undefined
                     }
                   >
-                    <div className="chat-composer-glass-host mx-auto w-full max-w-3xl rounded-[22px]">
+                    <div className="chat-composer-glass-host relative z-10 mx-auto w-full max-w-3xl rounded-[22px]">
                       <div ref={attachDraftHeroComposerAnchorRef} className="relative z-10">
                         <ChatComposer
                           composerRef={composerRef}
@@ -5670,41 +5670,41 @@ function ChatViewContent(props: ChatViewProps) {
                           onExpandImage={onExpandTimelineImage}
                         />
                       </div>
-                      <div className="min-h-0">
-                        <div
-                          data-terminal-open={terminalUiState.terminalOpen ? "true" : undefined}
-                          className="relative z-0"
-                        >
-                          {isGitRepo && (
-                            <div className="pointer-events-auto">
-                              <BranchToolbar
-                                environmentId={activeThread.environmentId}
-                                threadId={activeThread.id}
-                                {...(routeKind === "draft" && draftId ? { draftId } : {})}
-                                onEnvModeChange={onEnvModeChange}
-                                startFromOrigin={startFromOrigin}
-                                onStartFromOriginChange={onStartFromOriginChange}
-                                {...(canOverrideServerThreadEnvMode
-                                  ? { effectiveEnvModeOverride: envMode }
-                                  : {})}
-                                {...(canOverrideServerThreadEnvMode
-                                  ? {
-                                      activeThreadBranchOverride: activeThreadBranch,
-                                      onActiveThreadBranchOverrideChange:
-                                        setPendingServerThreadBranch,
-                                    }
-                                  : {})}
-                                envLocked={envLocked}
-                                onComposerFocusRequest={scheduleComposerFocus}
-                                {...(canCheckoutPullRequestIntoThread
-                                  ? { onCheckoutPullRequestRequest: openPullRequestDialog }
-                                  : {})}
-                                {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
-                                availableEnvironments={logicalProjectEnvironments}
-                              />
-                            </div>
-                          )}
-                        </div>
+                    </div>
+                    <div className="min-h-0">
+                      <div
+                        data-terminal-open={terminalUiState.terminalOpen ? "true" : undefined}
+                        className="relative z-0"
+                      >
+                        {isGitRepo && (
+                          <div className="pointer-events-auto">
+                            <BranchToolbar
+                              environmentId={activeThread.environmentId}
+                              threadId={activeThread.id}
+                              {...(routeKind === "draft" && draftId ? { draftId } : {})}
+                              onEnvModeChange={onEnvModeChange}
+                              startFromOrigin={startFromOrigin}
+                              onStartFromOriginChange={onStartFromOriginChange}
+                              {...(canOverrideServerThreadEnvMode
+                                ? { effectiveEnvModeOverride: envMode }
+                                : {})}
+                              {...(canOverrideServerThreadEnvMode
+                                ? {
+                                    activeThreadBranchOverride: activeThreadBranch,
+                                    onActiveThreadBranchOverrideChange:
+                                      setPendingServerThreadBranch,
+                                  }
+                                : {})}
+                              envLocked={envLocked}
+                              onComposerFocusRequest={scheduleComposerFocus}
+                              {...(canCheckoutPullRequestIntoThread
+                                ? { onCheckoutPullRequestRequest: openPullRequestDialog }
+                                : {})}
+                              {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
+                              availableEnvironments={logicalProjectEnvironments}
+                            />
+                          </div>
+                        )}
                       </div>
                     </div>
                     <div
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 98035d7a704b3c558b4743b28a4c0c9d0978f59b..abe150db588b2d710375370d49613883c7260aee 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -402,10 +402,39 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     content: "";
   }
 
+  .chat-composer-context-strip {
+    --chat-composer-context-surface: var(--card);
+
+    position: relative;
+    isolation: isolate;
+  }
+
+  .chat-composer-context-strip::before {
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: 0 0 16px 16px;
+    background: color-mix(
+      in srgb,
+      var(--chat-composer-context-surface) var(--glass-opacity),
+      transparent
+    );
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem);
+    mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem);
+    box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%);
+    content: "";
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  }
+
   .dark .chat-composer-glass-host {
-    --chat-composer-glass-surface: color-mix(in srgb, var(--background) 84%, var(--color-white));
+    --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-white));
 
-    box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
+    box-shadow: none;
+  }
+
+  .dark .chat-composer-context-strip::before {
+    box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%);
   }
 
   .alert-glass {
-- 
2.54.0