From 885f96425817fff7d2e1a9e070b08202f1ec4e4a Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Sat, 16 May 2026 05:57:42 +0000
Subject: [PATCH] ui(desktop): refine styling to match Claude/Cursor minimal
 aesthetic

- Update global CSS colors to softer zinc variants.
- Remove harsh borders from app layout and sidebar.
- Soften message bubble backgrounds and border radii.
- Improve markdown rendering styles in assistant messages.
- Redesign chat input as a floating pill with shadow.
- Enhance hover states and empty state styling.
---
 packages/desktop/src/renderer/App.tsx         |  4 +--
 .../src/renderer/components/ChatHistory.tsx   |  2 +-
 .../src/renderer/components/ChatPanel.tsx     |  4 +--
 .../src/renderer/components/MessageBubble.tsx |  6 ++---
 .../desktop/src/renderer/styles/global.css    | 14 +++++------
 screenshot.py                                 | 25 -------------------
 6 files changed, 15 insertions(+), 40 deletions(-)
 delete mode 100644 screenshot.py

diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx
index 2c22b75..6af52f3 100644
--- a/packages/desktop/src/renderer/App.tsx
+++ b/packages/desktop/src/renderer/App.tsx
@@ -319,7 +319,7 @@ export default function App() {
   return (
     <div className="flex h-screen flex-col bg-xibe-bg text-xibe-text font-sans overflow-hidden">
       {/* Header */}
-      <header className="flex h-12 items-center justify-between px-3 shrink-0 bg-xibe-bg z-10 border-b border-xibe-border-subtle">
+      <header className="flex h-12 items-center justify-between px-3 shrink-0 bg-xibe-bg z-10">
         <div className="flex items-center gap-3">
           <button
             onClick={() => setLeftPanelOpen((v) => !v)}
@@ -370,7 +370,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 border-r border-xibe-border-subtle"
+          className="shrink-0 bg-xibe-surface flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out"
           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/ChatHistory.tsx b/packages/desktop/src/renderer/components/ChatHistory.tsx
index 3f08573..af0eece 100644
--- a/packages/desktop/src/renderer/components/ChatHistory.tsx
+++ b/packages/desktop/src/renderer/components/ChatHistory.tsx
@@ -70,7 +70,7 @@ const ChatHistory = memo(function ChatHistory({ activeSessionId, onSelectSession
       {/* New chat button */}
       <button
         onClick={onNewChat}
-        className="flex items-center gap-2 rounded-lg bg-xibe-surface px-3 py-2.5 text-xs font-medium text-xibe-text hover:bg-xibe-surface-hover transition-colors mb-4"
+        className="flex items-center gap-2 rounded-lg bg-xibe-surface-raised px-3 py-2.5 text-xs font-medium text-xibe-text hover:bg-xibe-border transition-colors mb-4"
       >
         <Plus className="h-4 w-4 text-xibe-text" />
         New Chat
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 23b20aa..21160f5 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -153,7 +153,7 @@ export default function ChatPanel({
                       <button
                         key={q.text}
                         onClick={() => onSendMessage(q.text)}
-                        className="group flex items-center gap-3 rounded-xl border border-xibe-border-subtle bg-transparent px-4 py-3 text-sm text-xibe-text-secondary hover:bg-xibe-surface/50 hover:text-xibe-text transition-colors"
+                        className="group flex items-center gap-3 rounded-xl bg-xibe-surface px-4 py-3 text-sm text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-colors"
                       >
                         <div className="rounded-lg p-1.5 text-xibe-text-dim group-hover:text-xibe-text transition-colors">
                           {q.icon}
@@ -203,7 +203,7 @@ export default function ChatPanel({
           )}
 
           {/* Floating Pill input */}
-          <div className="relative flex items-end rounded-2xl border border-xibe-border-subtle bg-xibe-bg focus-within:border-xibe-border-focus focus-within:ring-1 focus-within:ring-xibe-border-focus transition-all duration-200">
+          <div className="relative flex items-end rounded-3xl border border-xibe-border-subtle bg-xibe-surface focus-within:border-xibe-border-focus focus-within:ring-1 focus-within:ring-xibe-border-focus transition-all duration-200 shadow-sm">
             <textarea
               ref={inputRef}
               value={input}
diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx
index 83457f3..5d7c358 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 bg-xibe-surface px-5 py-3.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap border border-xibe-border-subtle">
+        <div className="max-w-[85%] sm:max-w-[75%] rounded-3xl bg-xibe-surface-raised px-5 py-3.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
           {content}
         </div>
       </div>
@@ -26,11 +26,11 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
     <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-pre:my-3 prose-pre:bg-transparent prose-pre:p-0
+        prose-pre:my-3 prose-pre:bg-xibe-surface-raised prose-pre:p-4 prose-pre:rounded-xl
         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 prose-code:bg-xibe-surface-raised prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md 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]}
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index ed9565e..d3760bb 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -1,13 +1,13 @@
 @import "tailwindcss";
 
 @theme {
-  --color-xibe-bg: #09090b;
-  --color-xibe-surface: #18181b;
-  --color-xibe-surface-raised: #27272a;
-  --color-xibe-surface-hover: #27272a;
-  --color-xibe-border: #27272a;
-  --color-xibe-border-subtle: #27272a;
-  --color-xibe-border-focus: #52525b;
+  --color-xibe-bg: #18181b;
+  --color-xibe-surface: #27272a;
+  --color-xibe-surface-raised: #3f3f46;
+  --color-xibe-surface-hover: #3f3f46;
+  --color-xibe-border: #3f3f46;
+  --color-xibe-border-subtle: #3f3f46;
+  --color-xibe-border-focus: #a1a1aa;
   --color-xibe-muted: #71717a;
   --color-xibe-text: #fafafa;
   --color-xibe-text-secondary: #a1a1aa;
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()