From 3656b7f391eec4ffdadbcf10ee9848c4cdce553d Mon Sep 17 00:00:00 2001
From: OmarMcAdam <gh@mcadam.io>
Date: Tue, 20 Jan 2026 18:13:42 -0700
Subject: [PATCH] fix: improve message contrast in session views

---
 src/app/components/part-view.tsx | 20 ++++++++++----------
 src/app/pages/session.tsx        |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/components/part-view.tsx b/src/app/components/part-view.tsx
index a7340f92f..5b9d5d05b 100644
--- a/src/app/components/part-view.tsx
+++ b/src/app/components/part-view.tsx
@@ -60,7 +60,7 @@ export default function PartView(props: Props) {
 
   const textClass = () => (tone() === "dark" ? "text-gray-12" : "text-gray-12");
   const subtleTextClass = () => (tone() === "dark" ? "text-gray-12/70" : "text-gray-11");
-  const panelBgClass = () => (tone() === "dark" ? "bg-gray-1/10" : "bg-gray-1/30");
+  const panelBgClass = () => (tone() === "dark" ? "bg-gray-2/10" : "bg-gray-2/30");
   const toolOnly = () => developerMode();
   const showToolOutput = () => developerMode();
 
@@ -83,7 +83,7 @@ export default function PartView(props: Props) {
             <summary class={`cursor-pointer text-xs ${subtleTextClass()}`.trim()}>Thinking</summary>
             <pre
               class={`mt-2 whitespace-pre-wrap break-words text-xs ${
-                tone() === "dark" ? "text-gray-12" : "text-gray-12"
+                tone() === "dark" ? "text-gray-1" : "text-gray-12"
               }`.trim()}
             >
               {clampText(String((p() as any).text), 2000)}
@@ -97,19 +97,19 @@ export default function PartView(props: Props) {
           <div class="grid gap-2">
             <div class="flex items-center justify-between gap-3">
               <div
-                class={`text-xs font-medium ${tone() === "dark" ? "text-gray-12" : "text-gray-12"}`.trim()}
+                class={`text-xs font-medium ${tone() === "dark" ? "text-gray-1" : "text-gray-12"}`.trim()}
               >
                 Tool · {String((p() as any).tool)}
               </div>
               <div
                 class={`rounded-full px-2 py-0.5 text-[11px] font-medium ${
                   (p() as any).state?.status === "completed"
-                    ? "bg-green-7/15 text-green-12"
+                    ? "bg-green-3/15 text-green-12"
                     : (p() as any).state?.status === "running"
-                      ? "bg-blue-7/15 text-blue-12"
+                      ? "bg-blue-3/15 text-blue-12"
                       : (p() as any).state?.status === "error"
-                        ? "bg-red-7/15 text-red-12"
-                        : "bg-gray-12/10 text-gray-12"
+                        ? "bg-red-3/15 text-red-12"
+                        : "bg-gray-2/10 text-gray-1"
                 }`}
               >
                 {String((p() as any).state?.status ?? "unknown")}
@@ -123,7 +123,7 @@ export default function PartView(props: Props) {
             <Show when={showToolOutput() && (p() as any).state?.output && typeof (p() as any).state.output === "string"}>
               <pre
                 class={`whitespace-pre-wrap break-words rounded-lg ${panelBgClass()} p-2 text-xs ${
-                  tone() === "dark" ? "text-gray-12" : "text-gray-12"
+                  tone() === "dark" ? "text-gray-12" : "text-gray-1"
                 }`.trim()}
               >
                 {clampText(String((p() as any).state.output))}
@@ -141,7 +141,7 @@ export default function PartView(props: Props) {
                 <summary class={`cursor-pointer text-xs ${subtleTextClass()}`.trim()}>Input</summary>
                 <pre
                   class={`mt-2 whitespace-pre-wrap break-words text-xs ${
-                    tone() === "dark" ? "text-gray-12" : "text-gray-12"
+                    tone() === "dark" ? "text-gray-12" : "text-gray-1"
                   }`.trim()}
                 >
                   {safeStringify((p() as any).state.input)}
@@ -167,7 +167,7 @@ export default function PartView(props: Props) {
         <Show when={developerMode()}>
           <pre
             class={`whitespace-pre-wrap break-words text-xs ${
-              tone() === "dark" ? "text-gray-12" : "text-gray-12"
+              tone() === "dark" ? "text-gray-12" : "text-gray-1"
             }`.trim()}
           >
             {safeStringify(p())}
diff --git a/src/app/pages/session.tsx b/src/app/pages/session.tsx
index 3a0e09b05..499bcb49e 100644
--- a/src/app/pages/session.tsx
+++ b/src/app/pages/session.tsx
@@ -298,7 +298,7 @@ export default function SessionView(props: SessionViewProps) {
           <aside class="hidden lg:flex w-72 border-r border-gray-6 bg-gray-1 flex-col">
             <div class="px-4 pt-4">
               <button
-                class="w-full flex items-center gap-2 px-3 py-2 rounded-xl bg-gray-12 text-gray-12 text-sm font-medium shadow-lg shadow-gray-12/10"
+                class="w-full flex items-center gap-2 px-3 py-2 rounded-xl bg-gray-12 text-gray-1 text-sm font-medium shadow-lg shadow-gray-12/10"
                 onClick={props.createSessionAndOpen}
                 disabled={props.newTaskDisabled}
               >
@@ -381,7 +381,7 @@ export default function SessionView(props: SessionViewProps) {
                         <div
                           class={`w-full ${
                             isUser()
-                              ? "max-w-[520px] rounded-2xl bg-gray-12 text-gray-12 shadow-xl shadow-gray-12/5 p-4 text-sm leading-relaxed"
+                              ? "max-w-[520px] rounded-2xl bg-gray-4 text-gray-12 shadow-sm border-gray-5 border-1 shadow-gray-12/5 p-4 text-sm leading-relaxed rounded-br-none"
                               : "max-w-[68ch] text-[15px] leading-7 text-gray-12"
                           }`}
                         >