From 547e52627959ef7241ea27c38daa386efe1171a8 Mon Sep 17 00:00:00 2001
From: Nexus Dev <nexus@local>
Date: Sat, 11 Apr 2026 16:28:53 +0000
Subject: [PATCH] refactor(nexus): drop soft shadows in app chrome (phase 4)

---
 ui/src/components/ChatMessageList.tsx              | 2 +-
 ui/src/components/CompanyRail.tsx                  | 2 +-
 ui/src/components/IconDownloadBar.tsx              | 2 +-
 ui/src/components/KanbanBoard.tsx                  | 4 ++--
 ui/src/components/Layout.tsx                       | 2 +-
 ui/src/components/MarkdownEditor.tsx               | 2 +-
 ui/src/components/NotificationPermissionPrompt.tsx | 2 +-
 ui/src/components/ScrollToBottom.tsx               | 2 +-
 ui/src/components/ToastViewport.tsx                | 2 +-
 ui/src/components/onboarding/ApiKeyEntryForm.tsx   | 2 +-
 ui/src/components/transcript/RunTranscriptView.tsx | 4 ++--
 ui/src/pages/AgentDetail.tsx                       | 4 ++--
 ui/src/pages/ProjectDetail.tsx                     | 2 +-
 13 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/ChatMessageList.tsx b/ui/src/components/ChatMessageList.tsx
index c084ff03..85de70b5 100644
--- a/ui/src/components/ChatMessageList.tsx
+++ b/ui/src/components/ChatMessageList.tsx
@@ -200,7 +200,7 @@ export function ChatMessageList({
           <Button
             variant="outline"
             size="icon"
-            className="h-8 w-8 rounded-full shadow-md"
+            className="h-8 w-8 rounded-full"
             onClick={jumpToBottom}
             aria-label="Scroll to latest message"
           >
diff --git a/ui/src/components/CompanyRail.tsx b/ui/src/components/CompanyRail.tsx
index d67fccf2..aa0a2640 100644
--- a/ui/src/components/CompanyRail.tsx
+++ b/ui/src/components/CompanyRail.tsx
@@ -128,7 +128,7 @@ function SortableCompanyItem({
                   isSelected
                     ? "rounded-[14px]"
                     : "rounded-[22px] group-hover:rounded-[14px]",
-                  isDragging && "shadow-lg",
+                  isDragging && "ring-1 ring-primary/40",
                 )}
               />
               {hasLiveAgents && (
diff --git a/ui/src/components/IconDownloadBar.tsx b/ui/src/components/IconDownloadBar.tsx
index a91c641b..052840c4 100644
--- a/ui/src/components/IconDownloadBar.tsx
+++ b/ui/src/components/IconDownloadBar.tsx
@@ -21,7 +21,7 @@ export function IconDownloadBar({ selectedCount, onDownload, onClear }: IconDown
   if (selectedCount === 0) return null;
 
   return (
-    <div className="sticky bottom-0 z-10 flex items-center gap-3 rounded-t-md border border-border bg-card px-4 py-3 shadow-lg">
+    <div className="sticky bottom-0 z-10 flex items-center gap-3 rounded-t-md border border-border bg-card px-4 py-3">
       <Button
         type="button"
         onClick={() => onDownload(format)}
diff --git a/ui/src/components/KanbanBoard.tsx b/ui/src/components/KanbanBoard.tsx
index 7d6bef9a..7db896d0 100644
--- a/ui/src/components/KanbanBoard.tsx
+++ b/ui/src/components/KanbanBoard.tsx
@@ -136,9 +136,9 @@ function KanbanCard({
       style={style}
       {...attributes}
       {...listeners}
-      className={`rounded-md border bg-card p-2.5 cursor-grab active:cursor-grabbing transition-shadow ${
+      className={`rounded-md border bg-card p-2.5 cursor-grab active:cursor-grabbing ${
         isDragging && !isOverlay ? "opacity-30" : ""
-      } ${isOverlay ? "shadow-lg ring-1 ring-primary/20" : "hover:shadow-sm"}`}
+      } ${isOverlay ? "ring-1 ring-primary/40" : ""}`}
     >
       <Link
         to={`/issues/${issue.identifier ?? issue.id}`}
diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 76db3391..262f9046 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -176,7 +176,7 @@ export function Layout() {
       >
         <a
           href="#main-content"
-          className="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-[200] focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-[200] focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           Skip to Main Content
         </a>
diff --git a/ui/src/components/MarkdownEditor.tsx b/ui/src/components/MarkdownEditor.tsx
index 88e9ad7b..bc57af5d 100644
--- a/ui/src/components/MarkdownEditor.tsx
+++ b/ui/src/components/MarkdownEditor.tsx
@@ -641,7 +641,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
       {mentionActive && filteredMentions.length > 0 &&
         createPortal(
           <div
-            className="fixed z-[9999] min-w-[180px] max-w-[calc(100vw-16px)] max-h-[200px] overflow-y-auto rounded-md border border-border bg-popover shadow-md"
+            className="fixed z-[9999] min-w-[180px] max-w-[calc(100vw-16px)] max-h-[200px] overflow-y-auto rounded-md border border-border bg-popover"
             style={{
               top: Math.min(mentionState.viewportTop + 4, window.innerHeight - 208),
               left: Math.max(8, Math.min(mentionState.viewportLeft, window.innerWidth - 188)),
diff --git a/ui/src/components/NotificationPermissionPrompt.tsx b/ui/src/components/NotificationPermissionPrompt.tsx
index c78f0af5..f1cd3cde 100644
--- a/ui/src/components/NotificationPermissionPrompt.tsx
+++ b/ui/src/components/NotificationPermissionPrompt.tsx
@@ -46,7 +46,7 @@ export function NotificationPermissionPrompt({ agentResponseCount }: Notificatio
   };
 
   return (
-    <div className="fixed bottom-20 left-4 right-4 md:bottom-auto md:top-16 md:left-auto md:right-4 md:max-w-sm z-50 bg-card border border-border rounded-lg shadow-lg p-4">
+    <div className="fixed bottom-20 left-4 right-4 md:bottom-auto md:top-16 md:left-auto md:right-4 md:max-w-sm z-50 bg-card border border-border rounded-lg p-4">
       <p className="text-sm font-semibold">Stay in the loop</p>
       <p className="text-xs text-muted-foreground mt-1">
         Get notified when your agents complete tasks or need input.
diff --git a/ui/src/components/ScrollToBottom.tsx b/ui/src/components/ScrollToBottom.tsx
index d3da8981..a525f8b0 100644
--- a/ui/src/components/ScrollToBottom.tsx
+++ b/ui/src/components/ScrollToBottom.tsx
@@ -70,7 +70,7 @@ export function ScrollToBottom() {
   return (
     <button
       onClick={scroll}
-      className="fixed bottom-[calc(1.5rem+5rem+env(safe-area-inset-bottom))] right-6 z-40 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background shadow-md hover:bg-accent transition-colors md:bottom-6"
+      className="fixed bottom-[calc(1.5rem+5rem+env(safe-area-inset-bottom))] right-6 z-40 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background hover:bg-accent transition-colors md:bottom-6"
       aria-label="Scroll to bottom"
     >
       <ArrowDown className="h-4 w-4" />
diff --git a/ui/src/components/ToastViewport.tsx b/ui/src/components/ToastViewport.tsx
index 8a536e4d..821a8589 100644
--- a/ui/src/components/ToastViewport.tsx
+++ b/ui/src/components/ToastViewport.tsx
@@ -35,7 +35,7 @@ function AnimatedToast({
   return (
     <li
       className={cn(
-        "pointer-events-auto rounded-sm border shadow-lg backdrop-blur-xl transition-[transform,opacity] duration-200 ease-out",
+        "pointer-events-auto rounded-sm border backdrop-blur-xl transition-[transform,opacity] duration-200 ease-out",
         visible
           ? "translate-y-0 opacity-100"
           : "translate-y-3 opacity-0",
diff --git a/ui/src/components/onboarding/ApiKeyEntryForm.tsx b/ui/src/components/onboarding/ApiKeyEntryForm.tsx
index b8b32b50..bb10cfac 100644
--- a/ui/src/components/onboarding/ApiKeyEntryForm.tsx
+++ b/ui/src/components/onboarding/ApiKeyEntryForm.tsx
@@ -39,7 +39,7 @@ export function ApiKeyEntryForm({ onSave, onError }: ApiKeyEntryFormProps) {
           value={provider}
           onChange={(e) => setProvider(e.target.value)}
           disabled={saved}
-          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm transition-colors focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
         >
           {PROVIDERS.map((p) => (
             <option key={p.value} value={p.value}>
diff --git a/ui/src/components/transcript/RunTranscriptView.tsx b/ui/src/components/transcript/RunTranscriptView.tsx
index bc347228..8a7b8e02 100644
--- a/ui/src/components/transcript/RunTranscriptView.tsx
+++ b/ui/src/components/transcript/RunTranscriptView.tsx
@@ -796,7 +796,7 @@ function TranscriptCommandGroup({
             <span
               key={index}
               className={cn(
-                "inline-flex h-6 w-6 items-center justify-center rounded-full border shadow-sm",
+                "inline-flex h-6 w-6 items-center justify-center rounded-full border",
                 index > 0 && "-ml-1.5",
                 isRunning
                   ? "border-primary/25 bg-primary/[0.08] text-primary"
@@ -919,7 +919,7 @@ function TranscriptToolGroup({
               <span
                 key={`${item.ts}-${index}`}
                 className={cn(
-                  "inline-flex h-6 w-6 items-center justify-center rounded-full border shadow-sm",
+                  "inline-flex h-6 w-6 items-center justify-center rounded-full border",
                   index > 0 && "-ml-1.5",
                   isItemRunning
                     ? "border-primary/25 bg-primary/[0.08] text-primary"
diff --git a/ui/src/pages/AgentDetail.tsx b/ui/src/pages/AgentDetail.tsx
index abc669f0..e645a02a 100644
--- a/ui/src/pages/AgentDetail.tsx
+++ b/ui/src/pages/AgentDetail.tsx
@@ -939,7 +939,7 @@ export function AgentDetail() {
               : "opacity-0 pointer-events-none"
           )}
         >
-          <div className="flex items-center gap-2 bg-background/90 backdrop-blur-sm border border-border rounded-lg px-3 py-1.5 shadow-lg">
+          <div className="flex items-center gap-2 bg-background/90 backdrop-blur-sm border border-border rounded-lg px-3 py-1.5">
             <Button
               variant="ghost"
               size="sm"
@@ -3810,7 +3810,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
                 className={cn(
                   "rounded-md px-2.5 py-1 text-[11px] font-medium capitalize transition-colors",
                   transcriptMode === mode
-                    ? "bg-accent text-foreground shadow-sm"
+                    ? "bg-accent text-foreground shadow-[inset_0_4px_25px_rgba(0,0,0,0.14)]"
                     : "text-muted-foreground hover:text-foreground",
                 )}
                 onClick={() => setTranscriptMode(mode)}
diff --git a/ui/src/pages/ProjectDetail.tsx b/ui/src/pages/ProjectDetail.tsx
index b808227e..828dc1c6 100644
--- a/ui/src/pages/ProjectDetail.tsx
+++ b/ui/src/pages/ProjectDetail.tsx
@@ -137,7 +137,7 @@ function ColorPicker({
         aria-label="Change project color"
       />
       {open && (
-        <div className="absolute top-full left-0 mt-2 p-2 bg-popover border border-border rounded-lg shadow-lg z-50 w-max">
+        <div className="absolute top-full left-0 mt-2 p-2 bg-popover border border-border rounded-lg z-50 w-max">
           <div className="grid grid-cols-5 gap-1.5">
             {PROJECT_COLORS.map((color) => (
               <button