fix(webapp): address light theme review feedback

kathiekiwi · kathiekiwi · commit 942c2b1731a2 · 2026-07-13T09:50:55.000Z
- re-resolve theme colors when data-theme changes
- narrow jsonb_set write for theme preference
- opaque amber for reasoning text in light mode
diff --git a/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx b/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx
@@ -136,7 +136,7 @@ export function renderPart(part: UIMessage["parts"][number], i: number) {
     return (
       <div key={i} className="border-l-2 border-amber-500/40 pl-2">
         <ChatBubble>
-          <div className="whitespace-pre-wrap text-xs italic text-amber-600/70 dark:text-amber-200/70">
+          <div className="whitespace-pre-wrap text-xs italic text-amber-700 dark:text-amber-200/70">
             {p.text ?? ""}
           </div>
         </ChatBubble>
diff --git a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
@@ -483,7 +483,7 @@ function SubAgentContent({ parts }: { parts: any[] }) {
         if (partType === "reasoning" && part.text) {
           return (
             <div key={j} className="border-l-2 border-amber-500/40 pl-2">
-              <div className="whitespace-pre-wrap text-xs italic text-amber-600/70 dark:text-amber-200/70">
+              <div className="whitespace-pre-wrap text-xs italic text-amber-700 dark:text-amber-200/70">
                 {part.text}
               </div>
             </div>
diff --git a/apps/webapp/app/hooks/useThemeColor.ts b/apps/webapp/app/hooks/useThemeColor.ts
@@ -17,17 +17,28 @@ function toRgb(color: string): string {
 }
 
 /**
- * Resolve a theme CSS variable to a concrete, animatable color on mount.
+ * Resolve a theme CSS variable to a concrete, animatable color.
  * framer-motion can't interpolate `var()` strings or oklch values, so animated
  * colors must be resolved and normalized first. Resolution happens in an
  * effect so server and hydration renders both use the fallback — resolving
- * during render caused hydration style mismatches.
+ * during render caused hydration style mismatches. Long-lived components
+ * (e.g. the side menu) outlive theme switches, so re-resolve whenever
+ * `data-theme` flips on <html>.
  */
 export function useThemeColor(variable: `--${string}`, fallback: string): string {
   const [color, setColor] = useState(fallback);
   useEffect(() => {
-    const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
-    if (value) setColor(toRgb(value));
+    const resolve = () => {
+      const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+      if (value) setColor(toRgb(value));
+    };
+    resolve();
+    const observer = new MutationObserver(resolve);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
   }, [variable]);
   return color;
 }
diff --git a/apps/webapp/app/services/dashboardPreferences.server.ts b/apps/webapp/app/services/dashboardPreferences.server.ts
@@ -117,15 +117,17 @@ export async function updateThemePreference({
     return;
   }
 
-  const updatedPreferences: DashboardPreferences = {
-    ...user.dashboardPreferences,
-    theme,
-  };
-
-  return prisma.user.update({
-    where: { id: user.id },
-    data: { dashboardPreferences: updatedPreferences },
-  });
+  // Narrow jsonb_set write: a full-blob update from the session snapshot can
+  // race with other preference writes and drop unrelated fields.
+  return prisma.$executeRaw`
+    UPDATE "User"
+    SET "dashboardPreferences" = jsonb_set(
+      COALESCE("dashboardPreferences", '{}'::jsonb),
+      '{theme}',
+      to_jsonb(${theme}::text)
+    )
+    WHERE id = ${user.id}
+  `;
 }
 
 export async function clearCurrentProject({ user }: { user: UserFromSession }) {
