From 5bb991d35b6b40c496defbd833ac9ffec2de645b Mon Sep 17 00:00:00 2001 From: Ammar Date: Thu, 23 Oct 2025 10:32:57 -0500 Subject: [PATCH 01/15] =?UTF-8?q?=F0=9F=A4=96=20Restore=20original=20syste?= =?UTF-8?q?m=20font=20definitions=20after=20Tailwind=20migration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace IBM Plex Sans and JetBrains Mono with system fonts for better native appearance and cross-platform compatibility. - Restore --font-primary to system-ui stack (macOS, Windows, Linux) - Restore --font-monospace to Monaco/Menlo/Ubuntu Mono stack - Update all font-family declarations to use CSS variables consistently --- src/styles/globals.css | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index 2f08dafe2..b7dd04e42 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -205,16 +205,21 @@ --color-token-cached: hsl(0 0% 50%); /* Font Variables */ - --font-primary: IBM Plex Sans, sans-serif; - --font-monospace: JetBrains Mono, Consolas, Monaco, monospace; + /* Primary UI Font - System fonts for best native appearance */ + --font-primary: + system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", + Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + + /* Monospace Font - Code and technical content */ + --font-monospace: + "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "Courier New", monospace, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } body { background-color: var(--color-background); color: var(--color-foreground); - font-family: - IBM Plex Sans, - sans-serif; + font-family: var(--font-primary); font-size: 14px; } @@ -271,11 +276,7 @@ body, } code { - font-family: - JetBrains Mono, - Consolas, - Monaco, - monospace; + font-family: var(--font-monospace); } /* Native tooltips */ From 529c3220b3e3e50f4282c0519a7dab93eaa6e081 Mon Sep 17 00:00:00 2001 From: Ammar Date: Thu, 23 Oct 2025 10:34:57 -0500 Subject: [PATCH 02/15] =?UTF-8?q?=F0=9F=A4=96=20Add=20font=20utility=20cla?= =?UTF-8?q?sses=20for=20Tailwind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add .font-primary and .font-monospace utility classes to support the Tailwind-based components that use these classes for typography. This ensures file names in CodeReview HunkViewer and FileTree components properly use monospace fonts as they did before the Tailwind migration. --- src/styles/globals.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/styles/globals.css b/src/styles/globals.css index b7dd04e42..f21c45272 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -774,3 +774,13 @@ pre code { background-position: 0% 50%; } } + +/* Font utility classes */ +.font-primary { + font-family: var(--font-primary); +} + +.font-monospace { + font-family: var(--font-monospace); +} + From dbbcd741f07722e36ba578bfef3b351949b25dc5 Mon Sep 17 00:00:00 2001 From: Ammar Date: Thu, 23 Oct 2025 10:41:26 -0500 Subject: [PATCH 03/15] =?UTF-8?q?=F0=9F=A4=96=20Simplify=20HelpIndicator?= =?UTF-8?q?=20styling=20to=20match=201M=20context=20pattern?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace complex HelpIndicator styling (border, rounded-full, fixed sizing) with simpler, cleaner design matching the 1M context checkbox help indicator. Before: Small bordered circle with tiny text (7px, border, 10px height) After: Clean text indicator (10px, no border, better alignment) This provides: - Better visual consistency across the UI - Improved readability with larger text - Cleaner, less cluttered appearance - DRY - single source of truth for help indicator styling --- src/components/Tooltip.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index d164f0e2b..5c30f4fa7 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -242,14 +242,7 @@ export const HelpIndicator: React.FC<{ className?: string; children?: React.Reac className, children, }) => ( - + {children} ); From 38673312435983963c2b33ff8da18765b1d9ab83 Mon Sep 17 00:00:00 2001 From: Ammar Date: Thu, 23 Oct 2025 10:43:20 -0500 Subject: [PATCH 04/15] =?UTF-8?q?=F0=9F=A4=96=20Fix=20help=20indicator=20a?= =?UTF-8?q?lignment=20in=20ChatInput?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove wrapper spans and fixed height constraint to allow proper flex alignment of help indicators next to model selector and mode switch. Changes: - Remove help-indicator-wrapper spans (unnecessary extra nesting) - Remove h-[11px] height constraint that prevented proper alignment - Change gap from gap-1 to gap-1.5 to match Context1MCheckbox pattern - Remove @container query that was hiding indicators (no longer needed) Now help indicators properly align with adjacent elements using flex items-center, matching the pattern used in Context1MCheckbox. --- src/components/ChatInput.tsx | 68 +++++++++++++++++------------------- 1 file changed, 32 insertions(+), 36 deletions(-) diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index 47fa65aa2..6ec09c3b6 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -748,7 +748,7 @@ export const ChatInput: React.FC = ({ )}
-
+
= ({ recentModels={recentModels} onComplete={() => inputRef.current?.focus()} /> - - - ? - - Click to edit or use{" "} - {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)} -
-
- Abbreviations: -
• /model opus - Claude Opus 4.1 -
• /model sonnet - Claude Sonnet 4.5 -
-
- Full format: -
- /model provider:model-name -
- (e.g., /model anthropic:claude-sonnet-4-5) - - - + + ? + + Click to edit or use{" "} + {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)} +
+
+ Abbreviations: +
• /model opus - Claude Opus 4.1 +
• /model sonnet - Claude Sonnet 4.5 +
+
+ Full format: +
+ /model provider:model-name +
+ (e.g., /model anthropic:claude-sonnet-4-5) + +
@@ -799,20 +797,18 @@ export const ChatInput: React.FC = ({ onChange={setMode} />
- - - ? - - Exec Mode: AI edits files and execute commands -
-
- Plan Mode: AI proposes plans but does not edit files -
-
- Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)} - - - + + ? + + Exec Mode: AI edits files and execute commands +
+
+ Plan Mode: AI proposes plans but does not edit files +
+
+ Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)} + +
From 1fc7d6a992952d9bbdac51beccb41e0344145836 Mon Sep 17 00:00:00 2001 From: Ammar Date: Thu, 23 Oct 2025 10:47:14 -0500 Subject: [PATCH 05/15] =?UTF-8?q?=F0=9F=A4=96=20Fix=20FileTree=20graying?= =?UTF-8?q?=20out=20for=20files=20without=20hunks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Tailwind migration introduced invalid 'text-text-dim' classes which prevented proper graying out of files without hunks in Code Review. Changes: - Replace all 'text-text-dim' → 'text-dim' across entire codebase (13 instances) - Add .text-dim utility class mapping to --color-dim (#666) - Fixes graying out in FileTree for files without hunks - FileTree now properly displays files without changes in dim gray Affected components: FileTree, StreamingBarrier, ConsumerBreakdown, VerticalTokenMeter, ReviewControls, ReviewPanel, CostsTab, SecretsModal, ProjectSidebar --- src/components/Messages/ChatBarrier/StreamingBarrier.tsx | 2 +- src/components/ProjectSidebar.tsx | 8 ++++---- src/components/RightSidebar/CodeReview/FileTree.tsx | 8 ++++---- src/components/RightSidebar/CodeReview/ReviewControls.tsx | 2 +- src/components/RightSidebar/CodeReview/ReviewPanel.tsx | 2 +- src/components/RightSidebar/ConsumerBreakdown.tsx | 4 ++-- src/components/RightSidebar/CostsTab.tsx | 2 +- src/components/RightSidebar/VerticalTokenMeter.tsx | 2 +- src/components/SecretsModal.tsx | 4 ++-- src/styles/globals.css | 5 +++++ 10 files changed, 22 insertions(+), 17 deletions(-) diff --git a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx index 98a007875..3a947ace0 100644 --- a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx +++ b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx @@ -24,7 +24,7 @@ export const StreamingBarrier: React.FC = ({ ~{tokenCount.toLocaleString()} tokens {tps !== undefined && tps > 0 && ( - @ {tps} t/s + @ {tps} t/s )} )} diff --git a/src/components/ProjectSidebar.tsx b/src/components/ProjectSidebar.tsx index 35732ab8b..17ada1e8e 100644 --- a/src/components/ProjectSidebar.tsx +++ b/src/components/ProjectSidebar.tsx @@ -137,7 +137,7 @@ const ProjectDragLayer: React.FC = () => {
- ⠿ + ⠿ ▶
@@ -482,7 +482,7 @@ const ProjectSidebarInner: React.FC = ({ ⠿ @@ -596,12 +596,12 @@ const ProjectSidebarInner: React.FC = ({ >
Older than {formatOldWorkspaceThreshold()} - + ({old.length})
@@ -181,8 +181,8 @@ const TreeNodeContent: React.FC<{ className={cn( "flex-1", isFullyRead && - "text-text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]", - isUnknownState && !isFullyRead && "text-text-dim", + "text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]", + isUnknownState && !isFullyRead && "text-dim", !isFullyRead && !isUnknownState && "text-foreground" )} > diff --git a/src/components/RightSidebar/CodeReview/ReviewControls.tsx b/src/components/RightSidebar/CodeReview/ReviewControls.tsx index b97918755..a4989c207 100644 --- a/src/components/RightSidebar/CodeReview/ReviewControls.tsx +++ b/src/components/RightSidebar/CodeReview/ReviewControls.tsx @@ -93,7 +93,7 @@ export const ReviewControls: React.FC = ({ onBlur={handleBaseBlur} onKeyDown={handleBaseKeyDown} placeholder="HEAD, main, etc." - className="bg-dark text-foreground border-border-medium hover:border-accent focus:border-accent placeholder:text-text-dim w-36 rounded border px-2 py-1 font-mono text-[11px] transition-[border-color] duration-200 focus:outline-none" + className="bg-dark text-foreground border-border-medium hover:border-accent focus:border-accent placeholder:text-dim w-36 rounded border px-2 py-1 font-mono text-[11px] transition-[border-color] duration-200 focus:outline-none" />
{consumer.fixedTokens && consumer.variableTokens && ( -
+
Tool definition: {formatTokens(consumer.fixedTokens)} • Usage:{" "} {formatTokens(consumer.variableTokens)}
diff --git a/src/components/RightSidebar/CostsTab.tsx b/src/components/RightSidebar/CostsTab.tsx index c4699e365..5808da625 100644 --- a/src/components/RightSidebar/CostsTab.tsx +++ b/src/components/RightSidebar/CostsTab.tsx @@ -449,7 +449,7 @@ const CostsTabComponent: React.FC = ({ workspaceId }) => { {isNegligible ? ( - {costDisplay} + {costDisplay} ) : ( costDisplay )} diff --git a/src/components/RightSidebar/VerticalTokenMeter.tsx b/src/components/RightSidebar/VerticalTokenMeter.tsx index 83785e391..f4eee373c 100644 --- a/src/components/RightSidebar/VerticalTokenMeter.tsx +++ b/src/components/RightSidebar/VerticalTokenMeter.tsx @@ -88,7 +88,7 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data {data.maxTokens && ` / ${formatTokens(data.maxTokens)}`} {data.maxTokens && ` (${data.totalPercentage.toFixed(1)}%)`}
-
+
💡 Expand your viewport to see full details
diff --git a/src/components/SecretsModal.tsx b/src/components/SecretsModal.tsx index 13845920a..b05c1fac9 100644 --- a/src/components/SecretsModal.tsx +++ b/src/components/SecretsModal.tsx @@ -155,7 +155,7 @@ const SecretsModal: React.FC = ({ onChange={(e) => updateSecret(index, "key", e.target.value)} placeholder="SECRET_NAME" disabled={isLoading} - className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none" + className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none" /> = ({ onChange={(e) => updateSecret(index, "value", e.target.value)} placeholder="secret value" disabled={isLoading} - className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none" + className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none" />