From 0a715a949a9aacc5a3bce057075c240148791359 Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Wed, 6 May 2026 05:42:31 +0000
Subject: [PATCH] style: revamp desktop UI to use flat zinc dark theme

- Update global.css and tailwind.config.js to use neutral zinc colors.
- Make ChatPanel input borderless and flatter.
- Simplify MessageBubble markdown styles and remove backgrounds from code blocks.
---
 .../src/renderer/components/ChatPanel.tsx     | 20 ++++----
 .../src/renderer/components/MessageBubble.tsx | 14 +++---
 .../desktop/src/renderer/styles/global.css    | 48 +++++++++----------
 packages/desktop/tailwind.config.js           | 20 ++++----
 4 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 88640ee..2095fc6 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -176,13 +176,13 @@ export default function ChatPanel({
       </div>
 
       {/* Input area */}
-      <div className="shrink-0 px-4 pb-6 pt-2 bg-gradient-to-t from-xibe-bg via-xibe-bg to-transparent">
+      <div className="shrink-0 px-4 pb-6 pt-2 bg-xibe-bg">
         <div className="mx-auto max-w-3xl relative">
           {/* Command dropdown above input */}
           {isSlashMode && filteredCmds.length > 0 && (
-            <div className="absolute bottom-full mb-2 w-full rounded-xl border border-xibe-border-subtle bg-xibe-surface/95 backdrop-blur-md shadow-lg overflow-hidden animate-slide-up z-20">
+            <div className="absolute bottom-full mb-2 w-full rounded-lg border border-xibe-border bg-xibe-surface shadow-none overflow-hidden animate-slide-up z-20">
               {filteredCmds.slice(0, 6).map((cmd, i) => (
-                <button key={cmd.name} onClick={() => { setInput(cmd.name + ' '); inputRef.current?.focus(); }} className={`flex w-full items-center justify-between px-4 py-2.5 text-left text-sm transition-colors ${i === selectedCmd ? 'bg-xibe-surface-hover text-xibe-text' : 'text-xibe-text-secondary hover:bg-xibe-surface-hover/50'}`}>
+                <button key={cmd.name} onClick={() => { setInput(cmd.name + ' '); inputRef.current?.focus(); }} className={`flex w-full items-center justify-between px-4 py-2 text-left text-sm transition-colors ${i === selectedCmd ? 'bg-xibe-surface-hover text-xibe-text' : 'text-xibe-text-secondary hover:bg-xibe-surface-hover/50'}`}>
                   <span className="font-mono font-medium text-xibe-text">{cmd.name}</span>
                   <span className="text-xs text-xibe-text-dim truncate ml-4">{cmd.description}</span>
                 </button>
@@ -190,8 +190,8 @@ export default function ChatPanel({
             </div>
           )}
 
-          {/* Floating Pill input */}
-          <div className="relative flex items-end rounded-2xl bg-xibe-surface transition-all duration-200">
+          {/* Input Box */}
+          <div className="relative flex items-end rounded-lg bg-xibe-surface border border-xibe-border focus-within:border-xibe-border-focus transition-colors duration-200">
             <textarea
               ref={inputRef}
               value={input}
@@ -205,21 +205,21 @@ export default function ChatPanel({
               placeholder={isRunning ? 'Thinking...' : 'Ask anything or type / for commands'}
               disabled={isRunning}
               rows={1}
-              className="flex-1 resize-none bg-transparent pl-4 pr-12 py-3.5 text-[15px] leading-relaxed text-xibe-text placeholder-xibe-text-dim/50 focus:outline-none disabled:opacity-40"
-              style={{ minHeight: '52px', maxHeight: '400px' }}
+              className="flex-1 resize-none bg-transparent pl-4 pr-12 py-3 text-[14px] leading-relaxed text-xibe-text placeholder-xibe-text-dim/50 focus:outline-none disabled:opacity-40"
+              style={{ minHeight: '44px', maxHeight: '400px' }}
               onInput={(e) => { const t = e.target as HTMLTextAreaElement; t.style.height = 'auto'; t.style.height = Math.min(t.scrollHeight, 400) + 'px'; }}
             />
             <button
               onClick={submit}
               disabled={isRunning || !input.trim()}
-              className="absolute right-2 bottom-2 h-9 w-9 rounded-xl bg-xibe-surface-raised border border-xibe-border-subtle flex items-center justify-center text-xibe-text hover:bg-xibe-text hover:text-xibe-bg disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-200 shadow-sm"
+              className="absolute right-2 bottom-1.5 h-8 w-8 rounded bg-xibe-surface-raised flex items-center justify-center text-xibe-text-secondary hover:bg-xibe-text hover:text-xibe-bg disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
-              <Send className="h-4 w-4 ml-0.5" />
+              <Send className="h-4 w-4" />
             </button>
           </div>
           <div className="mt-2 text-center">
             <p className="text-[11px] font-medium text-xibe-text-dim/40">
-              <span className="hidden sm:inline">Use <kbd className="font-sans px-1 rounded border border-xibe-border-subtle bg-xibe-surface-raised/50">Enter</kbd> to send, <kbd className="font-sans px-1 rounded border border-xibe-border-subtle bg-xibe-surface-raised/50">Shift + Enter</kbd> for new line</span>
+              <span className="hidden sm:inline">Use <kbd className="font-sans px-1 rounded bg-xibe-surface-raised/50">Enter</kbd> to send, <kbd className="font-sans px-1 rounded bg-xibe-surface-raised/50">Shift + Enter</kbd> for new line</span>
             </p>
           </div>
         </div>
diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx
index 91a5acb..c11f7ee 100644
--- a/packages/desktop/src/renderer/components/MessageBubble.tsx
+++ b/packages/desktop/src/renderer/components/MessageBubble.tsx
@@ -15,7 +15,7 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
   if (isUser) {
     return (
       <div className="flex justify-end animate-fade-in w-full group">
-        <div className="max-w-[85%] sm:max-w-[75%] rounded-2xl rounded-tr-sm bg-xibe-surface px-4 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
+        <div className="max-w-[85%] sm:max-w-[75%] rounded-lg bg-xibe-surface px-4 py-2.5 text-[14px] leading-relaxed text-xibe-text whitespace-pre-wrap">
           {content}
         </div>
       </div>
@@ -24,26 +24,26 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
 
   return (
     <div className="animate-fade-in flex flex-col w-full group">
-      <div className="prose prose-invert max-w-none text-[15px] leading-relaxed text-xibe-text
+      <div className="prose prose-invert max-w-none text-[14px] leading-relaxed text-xibe-text
         prose-p:my-3 prose-headings:my-4 prose-ul:my-3 prose-ol:my-3 prose-li:my-1
         prose-pre:my-4 prose-pre:bg-transparent prose-pre:p-0
         prose-blockquote:my-4 prose-blockquote:border-l-xibe-border-focus prose-blockquote:text-xibe-text-dim
-        prose-a:text-xibe-brand-blue prose-a:no-underline hover:prose-a:underline hover:prose-a:underline-offset-2
+        prose-a:text-xibe-text-secondary prose-a:underline hover:prose-a:text-xibe-text
         prose-strong:text-xibe-text prose-strong:font-semibold
-        prose-code:text-xibe-text-secondary prose-code:bg-xibe-surface/50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:font-medium prose-code:before:content-none prose-code:after:content-none
+        prose-code:text-xibe-text-secondary prose-code:bg-transparent prose-code:px-0 prose-code:py-0 prose-code:rounded-none prose-code:font-mono prose-code:before:content-none prose-code:after:content-none
         prose-h1:text-xl prose-h2:text-lg prose-h3:text-base prose-h1:font-semibold prose-h2:font-semibold prose-h3:font-semibold">
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
           components={{
             pre: ({ children }) => (
-              <pre className="overflow-x-auto rounded-xl bg-xibe-bg border border-xibe-border-subtle p-4 text-[13px] font-mono leading-relaxed shadow-sm my-4">{children}</pre>
+              <pre className="overflow-x-auto bg-transparent border-y border-xibe-border py-4 text-[13px] font-mono leading-relaxed my-4">{children}</pre>
             ),
             code: ({ className, children }) => {
               const isInline = !className;
               return isInline ? (
-                <code className="rounded-md bg-xibe-surface-raised border border-xibe-border-subtle/50 px-1.5 py-0.5 text-[13px] font-mono text-xibe-text-secondary">{children}</code>
+                <code className="text-[13px] font-mono text-xibe-text-secondary bg-xibe-surface px-1.5 py-0.5 rounded-md">{children}</code>
               ) : (
-                <code className={`${className ?? ''} text-[13px] font-mono`}>{children}</code>
+                <code className={`${className ?? ''} text-[13px] font-mono text-xibe-text-secondary`}>{children}</code>
               );
             },
           }}
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index e6450c6..f67e2b0 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -1,31 +1,31 @@
 @import "tailwindcss";
 
 @theme {
-  --color-xibe-bg: #111111;
-  --color-xibe-surface: #1A1A1A;
-  --color-xibe-surface-raised: #2A2A2A;
-  --color-xibe-surface-hover: #222222;
-  --color-xibe-border: #333333;
-  --color-xibe-border-subtle: #222222;
-  --color-xibe-border-focus: #444444;
-  --color-xibe-muted: #888888;
-  --color-xibe-text: #fafafa;
-  --color-xibe-text-secondary: #e4e4e7;
-  --color-xibe-text-dim: #a1a1aa;
-  --color-xibe-accent: #f4f4f5;
-  --color-xibe-accent-hover: #e4e4e7;
+  --color-xibe-bg: #09090b; /* zinc-950 */
+  --color-xibe-surface: #18181b; /* zinc-900 */
+  --color-xibe-surface-raised: #27272a; /* zinc-800 */
+  --color-xibe-surface-hover: #27272a; /* zinc-800 */
+  --color-xibe-border: #3f3f46; /* zinc-700 */
+  --color-xibe-border-subtle: #27272a; /* zinc-800 */
+  --color-xibe-border-focus: #52525b; /* zinc-600 */
+  --color-xibe-muted: #71717a; /* zinc-500 */
+  --color-xibe-text: #fafafa; /* zinc-50 */
+  --color-xibe-text-secondary: #e4e4e7; /* zinc-200 */
+  --color-xibe-text-dim: #a1a1aa; /* zinc-400 */
+  --color-xibe-accent: #f4f4f5; /* zinc-100 */
+  --color-xibe-accent-hover: #e4e4e7; /* zinc-200 */
   --color-xibe-accent-muted: rgba(244, 244, 245, 0.15);
-  --color-xibe-brand-blue: #60A5FA;
-  --color-xibe-brand-green: #34D399;
-  --color-xibe-brand-orange: #FBBF24;
-  --color-xibe-brand-purple: #A78BFA;
-  --color-xibe-brand-red: #F87171;
-  --color-xibe-suggestion: #93C5FD;
-  --color-xibe-user-bubble: #27272a;
-  --color-xibe-warning: #F59E0B;
-  --color-xibe-error: #EF4444;
-  --color-xibe-info: #0EA5E9;
-  --color-xibe-success: #10B981;
+  --color-xibe-brand-blue: #a1a1aa; /* zinc-400 */
+  --color-xibe-brand-green: #a1a1aa; /* zinc-400 */
+  --color-xibe-brand-orange: #a1a1aa; /* zinc-400 */
+  --color-xibe-brand-purple: #a1a1aa; /* zinc-400 */
+  --color-xibe-brand-red: #a1a1aa; /* zinc-400 */
+  --color-xibe-suggestion: #d4d4d8; /* zinc-300 */
+  --color-xibe-user-bubble: #27272a; /* zinc-800 */
+  --color-xibe-warning: #a1a1aa; /* zinc-400 */
+  --color-xibe-error: #f87171; /* red-400 */
+  --color-xibe-info: #a1a1aa; /* zinc-400 */
+  --color-xibe-success: #a1a1aa; /* zinc-400 */
 
   --font-mono: 'JetBrains Mono', ui-monospace, monospace;
   --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
diff --git a/packages/desktop/tailwind.config.js b/packages/desktop/tailwind.config.js
index 6efe480..b76df9e 100644
--- a/packages/desktop/tailwind.config.js
+++ b/packages/desktop/tailwind.config.js
@@ -5,16 +5,16 @@ export default {
     extend: {
       colors: {
         xibe: {
-          bg: '#0D0D12',
-          surface: '#16161D',
-          border: '#2A2A35',
-          muted: '#6b7280',
-          text: '#E2E2E9',
-          accent: '#3B82F6',
-          'accent-dim': '#2563EB',
-          warning: '#F59E0B',
-          error: '#EF4444',
-          info: '#0EA5E9',
+          bg: '#09090b',
+          surface: '#18181b',
+          border: '#3f3f46',
+          muted: '#71717a',
+          text: '#fafafa',
+          accent: '#f4f4f5',
+          'accent-dim': '#e4e4e7',
+          warning: '#a1a1aa',
+          error: '#f87171',
+          info: '#a1a1aa',
         },
       },
       fontFamily: {