From ad714c9ffc3aa9abf8deacb92c6b675e65a6e723 Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Tue, 26 May 2026 06:14:55 +0000
Subject: [PATCH] feat(desktop): refine UI to sleek grayscale minimalist
 aesthetic

- Updated global CSS variables for a uniform dark zinc theme
- Removed borders from ChatPanel input for a flat terminal look
- Flattened MessageBubble rendering and simplified code blocks
- Removed excessive backgrounds and borders from ChatHistory and SettingsPanel
---
 packages/desktop/src/renderer/App.tsx               |  8 ++++----
 .../desktop/src/renderer/components/ChatHistory.tsx | 12 ++++++------
 .../desktop/src/renderer/components/ChatPanel.tsx   | 13 ++++---------
 .../src/renderer/components/MessageBubble.tsx       |  8 ++++----
 .../src/renderer/components/SettingsPanel.tsx       |  8 ++++----
 packages/desktop/src/renderer/styles/global.css     | 10 +++++-----
 6 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx
index c7b3de8..c3e589c 100644
--- a/packages/desktop/src/renderer/App.tsx
+++ b/packages/desktop/src/renderer/App.tsx
@@ -372,7 +372,7 @@ export default function App() {
       <div className="flex flex-1 min-h-0 overflow-hidden relative">
         {/* Left panel: Chat history + settings shortcut */}
         <aside
-          className="shrink-0 bg-[#0c0c0f] flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border/40"
+          className="shrink-0 bg-xibe-bg flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border-subtle"
           style={{ width: leftPanelOpen ? 240 : 0 }}
         >
             <div className="flex-1 min-h-0 flex flex-col p-3.5 pb-2">
@@ -383,12 +383,12 @@ export default function App() {
               />
             </div>
             {/* Settings shortcut at bottom */}
-            <div className="shrink-0 p-3 border-t border-xibe-border/30 bg-[#0c0c0f]/80 backdrop-blur-sm">
+            <div className="shrink-0 p-3 bg-xibe-bg/80 backdrop-blur-sm">
               <button
                 onClick={() => setSettingsOpen(true)}
-                className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover/60 hover:text-xibe-text transition-all duration-200 group border border-transparent hover:border-xibe-border/30"
+                className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-all duration-200 group border border-transparent"
               >
-                <Settings className="h-4 w-4 text-xibe-text-dim group-hover:text-xibe-brand-purple group-hover:rotate-45 transition-transform duration-300" />
+                <Settings className="h-4 w-4 text-xibe-text-dim group-hover:text-xibe-text transition-transform duration-300" />
                 <span>Settings</span>
               </button>
             </div>
diff --git a/packages/desktop/src/renderer/components/ChatHistory.tsx b/packages/desktop/src/renderer/components/ChatHistory.tsx
index 3ab5bd5..f68e175 100644
--- a/packages/desktop/src/renderer/components/ChatHistory.tsx
+++ b/packages/desktop/src/renderer/components/ChatHistory.tsx
@@ -178,21 +178,21 @@ const ChatHistory = memo(function ChatHistory({ activeSessionId, onSelectSession
   return (
     <div className="flex h-full flex-col">
       {/* Top navigation actions */}
-      <div className="space-y-2.5 mb-5 shrink-0">
+      <div className="space-y-2 mb-5 shrink-0">
         <button
           onClick={onNewChat}
-          className="flex w-full items-center gap-2.5 rounded-lg border border-xibe-border/60 bg-xibe-surface-raised/40 hover:bg-xibe-surface-hover/80 hover:border-xibe-border-focus/50 px-3 py-2.5 text-[13px] font-medium text-xibe-text transition-all duration-200 cursor-pointer select-none group"
+          className="flex w-full items-center gap-2.5 rounded-lg border border-transparent hover:bg-xibe-surface-hover hover:border-xibe-border-subtle px-3 py-2 text-[13px] font-medium text-xibe-text transition-all duration-200 cursor-pointer select-none group"
         >
-          <Plus className="h-4 w-4 text-xibe-brand-purple group-hover:scale-110 transition-transform duration-200" />
+          <Plus className="h-4 w-4 text-xibe-text-dim group-hover:text-xibe-text transition-colors duration-200" />
           <span className="font-sans">New Conversation</span>
         </button>
 
-        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] font-medium text-xibe-text bg-xibe-surface-hover/40 border border-xibe-border/20 select-none cursor-pointer">
-          <History className="h-4 w-4 text-xibe-brand-purple" />
+        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-xibe-text bg-xibe-surface-hover border border-transparent select-none cursor-pointer">
+          <History className="h-4 w-4 text-xibe-text-dim" />
           <span className="font-sans">Conversation History</span>
         </div>
 
-        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover/30 hover:text-xibe-text transition-colors select-none cursor-pointer">
+        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-colors select-none cursor-pointer border border-transparent">
           <Clock className="h-4 w-4 text-xibe-text-dim" />
           <span className="font-sans">Scheduled Tasks</span>
         </div>
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 82974f1..cc64bc6 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -179,8 +179,8 @@ export default function ChatPanel({
             </div>
           )}
 
-          {/* Floating Pill input */}
-          <div className="relative flex flex-col rounded-3xl bg-xibe-surface border border-xibe-border-subtle focus-within:border-xibe-border-focus focus-within:bg-xibe-surface transition-all duration-200">
+          {/* Borderless flat input */}
+          <div className="relative flex flex-col rounded-lg bg-xibe-surface focus-within:bg-xibe-surface-hover transition-colors duration-200">
             <div className="flex items-center px-4 pt-2 pb-1 text-xs text-xibe-text-dim">
                 <span className="flex items-center gap-1.5">
                     {MODES.map((m) => (
@@ -188,7 +188,7 @@ export default function ChatPanel({
                           key={m.id}
                           onClick={() => onModeSwitch(m.id, `Switched to ${m.label}`)}
                           className={cn(
-                            "rounded-full px-2 py-0.5 font-medium transition-colors duration-200",
+                            "rounded-md px-2 py-0.5 font-medium transition-colors duration-200",
                             modeState.current === m.id
                               ? "bg-xibe-surface-hover text-xibe-text"
                               : "text-xibe-text-dim hover:text-xibe-text"
@@ -220,17 +220,12 @@ export default function ChatPanel({
               <button
                 onClick={submit}
                 disabled={isRunning || !input.trim()}
-                className="absolute right-3 bottom-2 h-8 w-8 rounded-full flex items-center justify-center text-xibe-bg bg-xibe-text hover:opacity-90 disabled:opacity-30 disabled:bg-xibe-text-dim disabled:text-xibe-surface disabled:cursor-not-allowed transition-all duration-200"
+                className="absolute right-3 bottom-2.5 h-7 w-7 rounded-md flex items-center justify-center text-xibe-bg bg-xibe-text hover:opacity-90 disabled:opacity-30 disabled:bg-xibe-text-dim disabled:text-xibe-surface disabled:cursor-not-allowed transition-all duration-200"
               >
                 <Send className="h-3.5 w-3.5 ml-0.5" />
               </button>
             </div>
           </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 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>
       </div>
     </div>
diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx
index da57468..eede427 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-[90%] sm:max-w-[80%] rounded-2xl bg-xibe-surface-raised px-5 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
+        <div className="max-w-[90%] sm:max-w-[80%] rounded-xl bg-xibe-surface-hover px-4 py-2.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
           {content}
         </div>
       </div>
@@ -30,18 +30,18 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
         prose-blockquote:my-4 prose-blockquote:border-l-2 prose-blockquote:border-xibe-border prose-blockquote:pl-4 prose-blockquote:text-xibe-text-dim
         prose-a:text-xibe-text-secondary hover:prose-a:text-xibe-text prose-a:underline prose-a:underline-offset-2
         prose-strong:text-xibe-text prose-strong:font-semibold
-        prose-code:text-xibe-text-secondary prose-code:bg-xibe-surface-raised 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:px-1 prose-code:py-0.5 prose-code:rounded prose-code:font-medium 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-surface-raised border border-xibe-border-subtle p-4 text-[13px] font-mono leading-relaxed my-4">{children}</pre>
+              <pre className="overflow-x-auto rounded bg-[#131316] p-4 text-[13px] font-mono leading-relaxed my-4 border border-xibe-border-subtle">{children}</pre>
             ),
             code: ({ className, children }) => {
               const isInline = !className;
               return isInline ? (
-                <code className="rounded-md bg-xibe-surface-raised px-1.5 py-0.5 text-[13px] font-mono text-xibe-text-secondary">{children}</code>
+                <code className="rounded bg-[#131316] px-1 py-0.5 text-[13px] font-mono text-xibe-text-secondary border border-xibe-border-subtle/50">{children}</code>
               ) : (
                 <code className={`${className ?? ''} text-[13px] font-mono`}>{children}</code>
               );
diff --git a/packages/desktop/src/renderer/components/SettingsPanel.tsx b/packages/desktop/src/renderer/components/SettingsPanel.tsx
index 87a7ac8..6a65299 100644
--- a/packages/desktop/src/renderer/components/SettingsPanel.tsx
+++ b/packages/desktop/src/renderer/components/SettingsPanel.tsx
@@ -599,7 +599,7 @@ export default function SettingsPanel({ onClose, onModelChange, onProviderChange
                     />
                   </div>
 
-                  <div className="bg-xibe-surface-raised/40 border border-xibe-border/40 rounded-xl p-5 space-y-4">
+                  <div className="bg-xibe-surface-hover/50 border border-xibe-border-subtle rounded-xl p-5 space-y-4">
                     <h4 className="text-[10px] font-bold text-xibe-text-secondary uppercase tracking-wider">Host URL Presets</h4>
                     <div className="flex flex-wrap gap-2.5">
                       {[
@@ -611,7 +611,7 @@ export default function SettingsPanel({ onClose, onModelChange, onProviderChange
                         <button
                           key={preset.label}
                           onClick={() => setBaseUrl(preset.url)}
-                          className="text-[10px] bg-xibe-surface-raised border border-xibe-border/60 text-xibe-text-secondary hover:text-xibe-text hover:border-xibe-border-focus px-3 py-2 rounded-lg transition-all cursor-pointer font-semibold shadow-sm"
+                          className="text-[10px] bg-xibe-surface border border-xibe-border-subtle text-xibe-text-secondary hover:text-xibe-text hover:border-xibe-border-focus px-3 py-2 rounded-lg transition-all cursor-pointer font-semibold"
                         >
                           {preset.label}
                         </button>
@@ -725,7 +725,7 @@ export default function SettingsPanel({ onClose, onModelChange, onProviderChange
                     />
                   </div>
 
-                  <div className="bg-xibe-surface-raised/40 border border-xibe-border/40 rounded-xl p-5 space-y-4">
+                  <div className="bg-xibe-surface-hover/50 border border-xibe-border-subtle rounded-xl p-5 space-y-4">
                     <h4 className="text-[10px] font-bold text-xibe-text-secondary uppercase tracking-wider">Quick Preset Tags</h4>
                     <div className="flex flex-wrap gap-2.5">
                       {[
@@ -737,7 +737,7 @@ export default function SettingsPanel({ onClose, onModelChange, onProviderChange
                         <button
                           key={preset}
                           onClick={() => setEconomyModel(preset)}
-                          className="text-[10px] font-mono bg-xibe-surface-raised border border-xibe-border/60 text-xibe-text-secondary hover:text-xibe-text hover:border-xibe-border-focus px-3.5 py-2 rounded-lg transition-all cursor-pointer font-semibold"
+                          className="text-[10px] font-mono bg-xibe-surface border border-xibe-border-subtle text-xibe-text-secondary hover:text-xibe-text hover:border-xibe-border-focus px-3.5 py-2 rounded-lg transition-all cursor-pointer font-semibold"
                         >
                           {preset}
                         </button>
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index 214243c..46b5dc7 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -2,9 +2,9 @@
 
 @theme {
   --color-xibe-bg: #09090b;
-  --color-xibe-surface: #121214;
+  --color-xibe-surface: #09090b;
   --color-xibe-surface-raised: #18181b;
-  --color-xibe-surface-hover: #27272a;
+  --color-xibe-surface-hover: #18181b;
   --color-xibe-border: #27272a;
   --color-xibe-border-subtle: #18181b;
   --color-xibe-border-focus: #52525b;
@@ -50,8 +50,8 @@ body {
 
 ::-webkit-scrollbar { width: 5px; height: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
+::-webkit-scrollbar-thumb { background: var(--color-xibe-border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--color-xibe-border-focus); }
 
 ::selection { background: rgba(250, 250, 250, 0.2); color: #fff; }
 pre, code { font-family: var(--font-mono); }
@@ -60,4 +60,4 @@ pre, code { font-family: var(--font-mono); }
 @keyframes slide-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes pulse-dot { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
 
-*:focus-visible { outline: 2px solid var(--color-xibe-border-focus); outline-offset: -2px; border-radius: 4px; }
+*:focus-visible { outline: 1px solid var(--color-xibe-border-focus); outline-offset: -1px; border-radius: 4px; }