From 83399b7916b7dc9e490fdae31cb0cff7b8eeb748 Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Sat, 23 May 2026 06:01:02 +0000
Subject: [PATCH] feat(desktop): update UI to a cleaner, flat, minimalist
 grayscale aesthetic

- Unified the main panels (`App.tsx`, `TabbedRightPanel.tsx`) to use the core `bg-xibe-bg` color to remove unnecessary boxing.
- Changed `MessageBubble.tsx` to align all messages to the left with explicit "You" / "XibeCode" headers and corresponding `lucide-react` icons rather than using speech bubbles for user messages.
- Updated `ChatPanel.tsx` to use a modern, borderless flat text input instead of a large pill-shaped box.
- Tuned `global.css` for extremely flat layout by merging the surface color into the background.
---
 packages/desktop/src/renderer/App.tsx         |  2 +-
 .../src/renderer/components/ChatPanel.tsx     | 28 +++++++++----------
 .../src/renderer/components/MessageBubble.tsx | 21 ++++++++++----
 .../renderer/components/TabbedRightPanel.tsx  |  4 +--
 .../desktop/src/renderer/styles/global.css    |  2 +-
 screenshot.py                                 | 25 -----------------
 6 files changed, 33 insertions(+), 49 deletions(-)
 delete mode 100644 screenshot.py

diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx
index 3ce2516..6b23801 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-xibe-surface flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border-subtle"
+          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 82974f1..a0fa878 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -179,19 +179,19 @@ 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">
-            <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">
+          {/* Flat input */}
+          <div className="relative flex flex-col bg-xibe-bg border-t border-xibe-border-subtle pt-2">
+            <div className="flex items-center px-2 pt-1 pb-1 text-xs text-xibe-text-dim">
+                <span className="flex items-center gap-1">
                     {MODES.map((m) => (
                         <button
                           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-1 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"
+                              : "text-xibe-text-dim hover:text-xibe-text hover:bg-xibe-surface-hover/50"
                           )}
                         >
                           {m.label}
@@ -199,7 +199,7 @@ export default function ChatPanel({
                     ))}
                 </span>
             </div>
-            <div className="relative flex items-end">
+            <div className="relative flex items-end mt-1">
             <textarea
               ref={inputRef}
               value={input}
@@ -213,22 +213,22 @@ 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 pb-3.5 pt-1 text-[15px] leading-relaxed text-xibe-text placeholder-xibe-text-dim/50 focus:outline-none disabled:opacity-40"
-              style={{ minHeight: '36px', maxHeight: '400px' }}
+              className="flex-1 resize-none bg-transparent pl-2 pr-12 pb-2 pt-2 text-[15px] leading-relaxed text-xibe-text placeholder-xibe-text-dim/50 focus:outline-none disabled:opacity-40"
+              style={{ minHeight: '40px', 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-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-2 bottom-1 h-8 w-8 rounded-md flex items-center justify-center text-xibe-text hover:bg-xibe-surface-hover disabled:opacity-30 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-all duration-200"
               >
-                <Send className="h-3.5 w-3.5 ml-0.5" />
+                <Send className="h-4 w-4" />
               </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>
+          <div className="mt-1 text-left pl-2">
+            <p className="text-[11px] text-xibe-text-dim/40">
+              <span className="hidden sm:inline"><kbd className="font-sans">Enter</kbd> to send, <kbd className="font-sans">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 da57468..4b1959c 100644
--- a/packages/desktop/src/renderer/components/MessageBubble.tsx
+++ b/packages/desktop/src/renderer/components/MessageBubble.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { User, Sparkles } from 'lucide-react';
 
 interface Props {
   role: 'user' | 'assistant';
@@ -14,8 +15,12 @@ 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="flex flex-col animate-fade-in w-full group mb-6">
+        <div className="flex items-center gap-2 mb-2 text-xibe-text-dim font-medium text-xs">
+          <User className="h-4 w-4" />
+          <span>You</span>
+        </div>
+        <div className="text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap px-1">
           {content}
         </div>
       </div>
@@ -23,14 +28,18 @@ 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="animate-fade-in flex flex-col w-full group mb-6">
+      <div className="flex items-center gap-2 mb-2 text-xibe-text-dim font-medium text-xs">
+        <Sparkles className="h-4 w-4" />
+        <span>XibeCode</span>
+      </div>
+      <div className="px-1 prose prose-invert max-w-none text-[15px] leading-relaxed text-xibe-text
         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
         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.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-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]}
@@ -41,7 +50,7 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
             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-md px-1 py-0.5 text-[13px] font-mono text-xibe-text-secondary">{children}</code>
               ) : (
                 <code className={`${className ?? ''} text-[13px] font-mono`}>{children}</code>
               );
diff --git a/packages/desktop/src/renderer/components/TabbedRightPanel.tsx b/packages/desktop/src/renderer/components/TabbedRightPanel.tsx
index 5419b05..c3ba7db 100644
--- a/packages/desktop/src/renderer/components/TabbedRightPanel.tsx
+++ b/packages/desktop/src/renderer/components/TabbedRightPanel.tsx
@@ -21,9 +21,9 @@ export default function TabbedRightPanel({
   const [activeTab, setActiveTab] = useState<RightTab>('folder');
 
   return (
-    <div className="flex h-full flex-col bg-xibe-surface">
+    <div className="flex h-full flex-col bg-xibe-bg border-l border-xibe-border-subtle">
       {/* Tab bar */}
-      <div className="flex items-center shrink-0">
+      <div className="flex items-center shrink-0 border-b border-xibe-border-subtle">
         <button
           onClick={() => setActiveTab('folder')}
           className={`flex items-center gap-1.5 px-4 py-2 text-xs font-medium transition-colors border-b-2 ${
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index 214243c..8da8069 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -2,7 +2,7 @@
 
 @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-border: #27272a;
diff --git a/screenshot.py b/screenshot.py
deleted file mode 100644
index d2f1e39..0000000
--- a/screenshot.py
+++ /dev/null
@@ -1,25 +0,0 @@
-from playwright.sync_api import sync_playwright
-
-with sync_playwright() as p:
-    browser = p.chromium.launch()
-    # open a chat with user and assistant message and tool calls
-
-    # for simplicity, let's just use the current page
-    page = browser.new_page()
-    page.goto("http://localhost:5173/")
-    page.wait_for_timeout(2000)
-
-    # Click on the textarea, type some text, and send it
-    page.fill('textarea', 'Hello')
-    page.press('textarea', 'Enter')
-    page.wait_for_timeout(2000)
-
-    page.screenshot(path="/home/jules/verification/screenshots/screenshot_chat.png")
-
-    # Also open the settings to see it
-    page.goto("http://localhost:5173/")
-    page.wait_for_timeout(2000)
-    page.click('text=Settings')
-    page.wait_for_timeout(2000)
-    page.screenshot(path="/home/jules/verification/screenshots/screenshot_settings.png")
-    browser.close()