Align message UI with palette tokens

src/components/message-item.tsx

@@ -88,10 +88,11 @@ export default function MessageItem(props: MessageItemProps) {
       <div class="flex justify-between items-center gap-2.5 pb-0.5">
         <div class="flex flex-col">
           <Show when={isUser()}>
-            <span class="font-semibold text-xs text-[var(--text-muted)]">You</span>
+            <span class="font-semibold text-xs text-[var(--message-user-border)]">You</span>
           </Show>
+
           <Show when={!isUser()}>
-            <div class="flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-[var(--text-muted)]">
+            <div class="flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-[var(--message-assistant-border)]">
               <Show when={agentIdentifier()}>{(value) => <span>Agent: {value()}</span>}</Show>
               <Show when={modelIdentifier()}>{(value) => <span>Model: {value()}</span>}</Show>
             </div>

src/styles/components.css

@@ -78,10 +78,34 @@
 
 /* Ensure Tailwind base reset on [type="button"] doesn't remove accent styles */
 button.button-primary {
+  @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md font-medium transition-colors;
+  color: #fff;
   background-color: var(--accent-primary);
-  color: var(--text-inverted);
+  border: 1px solid var(--accent-primary);
 }
 
+button.button-primary:hover:not(:disabled) {
+  background-color: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+button.button-primary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent-primary);
+}
+
+button.button-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Message item base styles */
+
+.message-item-base {
+  @apply flex flex-col gap-2 p-3 w-full;
+}
+
+
 [data-theme="dark"] button.button-primary {
   background-color: #3f3f46;
   color: #f5f6f8;
@@ -136,7 +160,7 @@ button.button-primary {
 /* Message item base styles */
 
 .message-item-base {
-  @apply flex flex-col gap-2 p-3 rounded-lg w-full;
+  @apply flex flex-col gap-2 p-3 w-full;
 }
 
 .assistant-message {
@@ -636,11 +660,12 @@ button.button-primary {
 
 
 .message-stream {
-  @apply flex-1 min-h-0 overflow-y-auto p-4 flex flex-col gap-4;
+  @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-1;
   background-color: var(--surface-base);
   color: inherit;
 }
 
+
 .message-scroll-button-wrapper {
   position: absolute;
   right: 1rem;
@@ -680,15 +705,16 @@ button.button-primary {
 
 /* Tool call message wrapper */
 .tool-call-message {
-  @apply flex flex-col gap-2 p-3 rounded-lg w-full;
+  @apply flex flex-col gap-2 p-3 w-full;
   background-color: var(--message-tool-bg);
   border-left: 4px solid var(--message-tool-border);
   color: inherit;
 }
 
+
 .tool-call-header-label {
   @apply flex items-center justify-between gap-2 font-semibold text-sm;
-  color: var(--text-muted);
+  color: var(--message-tool-border);
   margin-bottom: 1px;
 }
 
@@ -699,7 +725,7 @@ button.button-primary {
 .tool-call-header-button {
   background-color: transparent;
   border: 1px solid var(--border-base);
-  color: var(--text-muted);
+  color: var(--message-tool-border);
   padding: 0.15rem 0.75rem;
   border-radius: 0.375rem;
   font-size: 0.75rem;

src/styles/tokens.css

@@ -27,10 +27,11 @@
   --status-warning: #ff9800;
   
   /* Message-specific tokens */
-  --message-user-bg: #f0f7ff;
+  --message-user-bg: var(--surface-secondary);
   --message-user-border: #2196f3;
-  --message-assistant-bg: #faf5ff;
+  --message-assistant-bg: var(--message-tool-bg);
-  --message-assistant-border: #9c27b0;
+  --message-assistant-border: #f59e0b;
+
   --message-tool-bg: #f8f9fa;
   --message-tool-border: #6c757d;
   
@@ -73,7 +74,7 @@
     --border-muted: #3a3a3a;
     
     /* Text tokens */
-    --text-primary: #e0e0e0;
+    --text-primary: #cfd4dc;
     --text-secondary: #999999;
     --text-muted: #999999;
     --text-inverted: #1a1a1a;
@@ -88,10 +89,11 @@
     --status-warning: #ff9800;
     
     /* Message-specific tokens */
-    --message-user-bg: #1a2332;
+    --message-user-bg: #202734;
     --message-user-border: #42a5f5;
-    --message-assistant-bg: #251a2e;
+    --message-assistant-bg: var(--message-tool-bg);
-    --message-assistant-border: #ba68c8;
+    --message-assistant-border: #d97706;
+
     --message-tool-bg: #212529;
     --message-tool-border: #adb5bd;
     
@@ -134,7 +136,7 @@
   --border-muted: #3a3a3a;
   
   /* Text tokens */
-  --text-primary: #e0e0e0;
+  --text-primary: #cfd4dc;
   --text-secondary: #999999;
   --text-muted: #999999;
   --text-inverted: #1a1a1a;
@@ -149,10 +151,11 @@
   --status-warning: #ff9800;
   
   /* Message-specific tokens */
-  --message-user-bg: #1a2332;
+  --message-user-bg: #202734;
-  --message-user-border: #42a5f5;
+  --message-user-border: #2196f3;
-  --message-assistant-bg: #251a2e;
+  --message-assistant-bg: var(--message-tool-bg);
-  --message-assistant-border: #ba68c8;
+  --message-assistant-border: #d97706;
+
   --message-tool-bg: #212529;
   --message-tool-border: #adb5bd;