From 6c3b39485af07d312034000acffe9b311660db20 Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Tue, 19 May 2026 06:22:26 +0000
Subject: [PATCH] feat(desktop): polish UI to match modern dark-mode AI
 aesthetic

Refined the desktop React UI in `packages/desktop` to align with the
sleek, minimalist, grayscale aesthetic requested by the user, comparable
to tools like Claude Desktop and Cursor.

Changes:
- **App Header:** Softened title color and added subtle panel dividers
  for a cleaner shell layout.
- **Chat Panel:** Updated typography on the welcome screen, adjusted
  button radii (rounded-full) for action buttons, and modernized the
  floating input textarea with refined focus rings and padding.
- **Message Bubbles:** Widened user message bubbles for better readable
  space, swapped heavy backgrounds for a subtle transparent border
  aesthetic, and tightened vertical prose spacing for assistant messages.
- **Tool Calls:** Streamlined ToolCallCard padding and removed heavy
  backgrounds from the expanded state to ensure it remains a secondary
  visual element.
- **Theme:** Tweaked Tailwind configuration in `global.css` to use
  slightly darker, zinc-like tones for `--color-xibe-surface-raised`
  and `--color-xibe-border-subtle`, establishing better depth without
  heavy contrast.
---
 packages/desktop/src/renderer/App.tsx                     | 5 ++---
 packages/desktop/src/renderer/components/ChatPanel.tsx    | 8 ++++----
 .../desktop/src/renderer/components/MessageBubble.tsx     | 4 ++--
 packages/desktop/src/renderer/components/ToolCallCard.tsx | 4 ++--
 packages/desktop/src/renderer/styles/global.css           | 6 +++---
 5 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx
index 56c0a3e..3a76459 100644
--- a/packages/desktop/src/renderer/App.tsx
+++ b/packages/desktop/src/renderer/App.tsx
@@ -333,8 +333,7 @@ export default function App() {
           >
             <PanelLeft className="h-4 w-4" />
           </button>
-          <span className="text-sm font-semibold tracking-tight text-xibe-text">XibeCode</span>
-          <div className="h-4 w-px bg-xibe-border-subtle mx-1" />
+          <span className="text-sm font-semibold tracking-tight text-xibe-text-secondary">XibeCode</span>
           <button
             onClick={() => setSettingsOpen(true)}
             className="flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-colors"
@@ -370,7 +369,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-xibe-bg flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out"
+          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 overflow-y-auto p-3">
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 3349074..12602e9 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -117,7 +117,7 @@ export default function ChatPanel({
                 <div className="mx-auto w-12 h-12 flex items-center justify-center mb-4">
                   <Terminal className="h-6 w-6 text-xibe-text" />
                 </div>
-                <h1 className="text-3xl font-semibold text-xibe-text tracking-tight">How can I help you today?</h1>
+                <h1 className="text-2xl font-semibold text-xibe-text tracking-tight">How can I help you today?</h1>
                 <p className="text-sm text-xibe-text-dim mt-2 max-w-md mx-auto">I can write code, fix bugs, explain concepts, and help you navigate your codebase.</p>
               </div>
 
@@ -133,7 +133,7 @@ export default function ChatPanel({
                         key={m.id}
                         onClick={() => onModeSwitch(m.id, `Switched to ${m.label}`)}
                         className={cn(
-                          "rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200",
+                          "rounded-full px-4 py-1.5 text-xs font-medium transition-colors duration-200",
                           modeState.current === m.id
                             ? "bg-xibe-surface-raised text-xibe-text"
                             : "text-xibe-text-dim hover:text-xibe-text hover:bg-xibe-surface-raised"
@@ -203,7 +203,7 @@ export default function ChatPanel({
           )}
 
           {/* Floating Pill input */}
-          <div className="relative flex items-end rounded-2xl bg-xibe-surface-raised border-none transition-all duration-200">
+          <div className="relative flex items-end rounded-2xl bg-xibe-surface-raised border border-transparent focus-within:border-xibe-border-focus focus-within:bg-xibe-bg transition-all duration-200">
             <textarea
               ref={inputRef}
               value={input}
@@ -224,7 +224,7 @@ export default function ChatPanel({
             <button
               onClick={submit}
               disabled={isRunning || !input.trim()}
-              className="absolute right-2 bottom-2 h-9 w-9 rounded-lg bg-transparent flex items-center justify-center text-xibe-text hover:bg-xibe-surface-hover disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-200"
+              className="absolute right-2 bottom-2 h-9 w-9 rounded-lg flex items-center justify-center text-xibe-text bg-xibe-surface hover:bg-xibe-surface-hover disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-200"
             >
               <Send className="h-4 w-4 ml-0.5" />
             </button>
diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx
index f073842..68df0fe 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-xl bg-xibe-surface-raised px-5 py-3.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap border-none">
+        <div className="max-w-[90%] sm:max-w-[80%] rounded-xl bg-xibe-surface border border-xibe-border-subtle px-5 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
           {content}
         </div>
       </div>
@@ -25,7 +25,7 @@ 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
-        prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0.5
+        prose-p:my-1.5 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0.5
         prose-pre:my-3 prose-pre:bg-transparent prose-pre:p-0
         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
diff --git a/packages/desktop/src/renderer/components/ToolCallCard.tsx b/packages/desktop/src/renderer/components/ToolCallCard.tsx
index dabcf7b..efaa667 100644
--- a/packages/desktop/src/renderer/components/ToolCallCard.tsx
+++ b/packages/desktop/src/renderer/components/ToolCallCard.tsx
@@ -19,7 +19,7 @@ const ToolCallCard = memo(function ToolCallCard({ toolName, toolInput, toolOutpu
     <div className="rounded-xl border border-xibe-border-subtle overflow-hidden animate-fade-in my-3 group">
       <button
         onClick={() => setOpen(!open)}
-        className="flex w-full items-center gap-3 px-3 py-1.5 text-left hover:bg-xibe-surface-hover transition-colors"
+        className="flex w-full items-center gap-3 px-2.5 py-1 text-left hover:bg-xibe-surface-hover transition-colors"
       >
         <ChevronRight className={cn("h-4 w-4 shrink-0 transition-transform text-xibe-text-dim", open && "rotate-90")} />
 
@@ -44,7 +44,7 @@ const ToolCallCard = memo(function ToolCallCard({ toolName, toolInput, toolOutpu
       </button>
 
       {open && (
-        <div className="border-t border-xibe-border-subtle px-4 py-3 space-y-4 animate-fade-in bg-xibe-surface/30">
+        <div className="border-t border-xibe-border-subtle px-4 py-3 space-y-4 animate-fade-in bg-transparent">
           {inputStr && (
             <div>
               <div className="flex items-center gap-2 mb-2">
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index 99f2183..7a53bb0 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -3,10 +3,10 @@
 @theme {
   --color-xibe-bg: #09090b;
   --color-xibe-surface: #09090b;
-  --color-xibe-surface-raised: #18181b;
-  --color-xibe-surface-hover: #18181b;
+  --color-xibe-surface-raised: #121214;
+  --color-xibe-surface-hover: #27272a;
   --color-xibe-border: #27272a;
-  --color-xibe-border-subtle: #18181b;
+  --color-xibe-border-subtle: #27272a;
   --color-xibe-border-focus: #52525b;
   --color-xibe-muted: #71717a;
   --color-xibe-text: #fafafa;