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 <[email protected]>

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={() => {

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>

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;

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;

src/features/graphql/GraphQL.module.css

@@ -196,7 +196,7 @@
 }
 .variables::selection {
   background: var(--bg-editor-selection);
-  color: transparent;
+  color: var(--fg);
 }
 
 /*