From d5af4d155479e5bfb288c1a0ef3fc7082474b5fc Mon Sep 17 00:00:00 2001
From: SunZhiQiang <71381346+panda-student@users.noreply.github.com>
Date: Sat, 7 Nov 2026 13:34:28 -0800
Subject: [PATCH] fix(ui): readable selection colours, unified agent control
 sizing and Home width (#2064)

Closes #1985

The SQL console and GraphQL editors draw transparent text over their highlighting, so a selection showed only an empty highlight; they now get selection colours from the tokens, so selected text stays readable in light and dark themes. Agent action buttons share one size, and the Home composer uses the same width token as the conversation composer. Verified on macOS in light and dark themes.

Co-authored-by: panda-student <71381346+panda-student@users.noreply.github.com>
---
 src/features/agents/AgentsView.tsx        | 12 +++---------
 src/features/agents/BuiltinAgents.tsx     |  9 ++-------
 src/features/agents/Home.module.css       |  3 ++-
 src/features/database/Database.module.css |  6 ++++++
 src/features/graphql/GraphQL.module.css   |  2 +-
 5 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/features/agents/AgentsView.tsx b/src/features/agents/AgentsView.tsx
index 30651b9d6..a83b73761 100644
--- a/src/features/agents/AgentsView.tsx
+++ b/src/features/agents/AgentsView.tsx
@@ -26,7 +26,7 @@ import { useTx } from "@/platform/i18n";
 import { executeAction } from "@/platform/actions";
 
 export function AgentsHeaderActions() {
-  return <IconButton icon="plus" action="agents.newTask" size="small" />;
+  return <IconButton icon="plus" action="agents.newTask" />;
 }
 
 export function AgentsLocationActions() {
@@ -34,13 +34,8 @@ export function AgentsLocationActions() {
   const tx = useTx();
   return (
     <div role="group" aria-label={tx("Conversation location")} className={styles.location}>
-      <IconButton
-        icon="open-in-tool-window"
-        action="agents.useToolWindow"
-        pressed={location === "toolWindow"}
-        size="small"
-      />
-      <IconButton icon="editor-only" action="agents.useEditor" pressed={location === "editor"} size="small" />
+      <IconButton icon="open-in-tool-window" action="agents.useToolWindow" pressed={location === "toolWindow"} />
+      <IconButton icon="editor-only" action="agents.useEditor" pressed={location === "editor"} />
     </div>
   );
 }
@@ -242,7 +237,6 @@ export function AgentsView() {
                 ref={historyRef}
                 icon="history"
                 title="Agent sessions"
-                size="small"
                 aria-haspopup="dialog"
                 aria-expanded={historyOpen}
                 onClick={() => {
diff --git a/src/features/agents/BuiltinAgents.tsx b/src/features/agents/BuiltinAgents.tsx
index 9b32a16bf..d9e728973 100644
--- a/src/features/agents/BuiltinAgents.tsx
+++ b/src/features/agents/BuiltinAgents.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import type { AgentProvider } from "@/bindings";
 import { tx, useTxTemplate } from "@/platform/i18n";
 import clsx from "clsx";
-import { Button, Icon, IconButton, Input, List, Spinner, T } from "@/ui";
+import { Icon, IconButton, Input, List, Spinner, T } from "@/ui";
 import { useSettingsForm } from "@/workbench/contributions";
 import { providerIcon } from "./model";
 import type { CommandsBackend } from "./registry";
@@ -148,7 +148,6 @@ function Details({
             />
             <IconButton
               icon="folder-open"
-              size="small"
               title="Browse…"
               disabled={saving}
               onClick={async () => {
@@ -161,11 +160,7 @@ function Details({
                 }
               }}
             />
-            {value && (
-              <Button size="small" disabled={saving} onClick={() => set("")}>
-                <T>Reset</T>
-              </Button>
-            )}
+            {value && <IconButton icon="undo" title="Reset" disabled={saving} onClick={() => set("")} />}
           </div>
           <p className={styles.hint}>
             <T>Leave empty to find the executable on PATH. Changes apply to new sessions.</T>
diff --git a/src/features/agents/Home.module.css b/src/features/agents/Home.module.css
index 67cad0ade..f5238baf1 100644
--- a/src/features/agents/Home.module.css
+++ b/src/features/agents/Home.module.css
@@ -11,7 +11,8 @@
   color: var(--fg);
 }
 .inner {
-  width: min(720px, 100%);
+  /* The same width as a running session's composer and conversation. */
+  width: min(var(--agent-conversation-width), 100%);
   display: flex;
   flex-direction: column;
   gap: 8px;
diff --git a/src/features/database/Database.module.css b/src/features/database/Database.module.css
index 924f93121..d53fa8808 100644
--- a/src/features/database/Database.module.css
+++ b/src/features/database/Database.module.css
@@ -1237,6 +1237,12 @@
   color: transparent !important;
   caret-color: var(--fg-strong);
 }
+/* The input's own glyphs are transparent so the highlight layer below paints them; without
+   this the selection would be an empty highlight. */
+.sqlInputText::selection {
+  background: var(--bg-editor-selection);
+  color: var(--fg-strong);
+}
 .sqlHighlight {
   position: absolute;
   inset: 0;
diff --git a/src/features/graphql/GraphQL.module.css b/src/features/graphql/GraphQL.module.css
index 0dec8518b..480de69c7 100644
--- a/src/features/graphql/GraphQL.module.css
+++ b/src/features/graphql/GraphQL.module.css
@@ -196,7 +196,7 @@
 }
 .variables::selection {
   background: var(--bg-editor-selection);
-  color: transparent;
+  color: var(--fg);
 }
 
 /*