diff --git a/internal/gui/assets/app.css b/internal/gui/assets/app.css
index d2fa99d3..9a518d1d 100644
--- a/internal/gui/assets/app.css
+++ b/internal/gui/assets/app.css
@@ -338,17 +338,17 @@ body.window .ag-handle { width: 28px; height: 28px; }
 .ag-handle:hover, .ag-handle.open { background: var(--pill); }
 .ag-handle:focus-visible { background: var(--pill); outline: 1.5px solid var(--fg-2); outline-offset: 0; }
 .agent-fold .ag-handle { cursor: default; }
-/* a row in the list carries a faint grip in its left margin (#479, #537),
-   always there, so that a row can be taken hold of, and hidden from its
-   menu, is seen without hovering or right-clicking; it darkens while the row
-   is under the pointer, dragged, or its handle has the keyboard or its menu
-   open. It is the handle's own, so a drag or a click on it does what the
-   logo does, and it takes no room from the row; the logo stays the logo. */
+/* a row in the list carries a grip in its left margin, drawn only while the
+   row is under the pointer, dragged, or its handle has the keyboard or its
+   menu open: always there it is clutter (the owner: 一直出现太丑了), as on
+   the Providers list. It is the handle's own, so a drag or a click on it does
+   what the logo does, and it takes no room from the row; the logo stays the
+   logo. Hide is in the handle's menu and the row's right-click menu. */
 #agents > .row .ag-handle { position: relative; }
-#agents > .row .ag-handle::before { content: ""; position: absolute; left: -6px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--grip-dot) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; --grip-dot: var(--faint); }
+#agents > .row .ag-handle::before { content: ""; position: absolute; left: -6px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--muted) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; opacity: 0; transition: opacity .15s; }
 body.panel #agents > .row .ag-handle::before { left: -9px; }
-#agents > .row:is(:hover, .dragging) .ag-handle::before, #agents > .row .ag-handle.open::before { --grip-dot: var(--muted); }
-#agents > .row .ag-handle:focus-visible::before { --grip-dot: var(--muted); }
+#agents > .row:is(:hover, .dragging) .ag-handle::before, #agents > .row .ag-handle.open::before { opacity: 1; }
+#agents > .row .ag-handle:focus-visible::before { opacity: 1; }
 /* one hidden by hand reads as put away, with its way back beside its name */
 .agent-fold .row.put-away .ag-handle > .ic, .agent-fold .row.put-away .name { opacity: .6; }
 .agent-fold .row.put-away .who { display: flex; align-items: center; gap: 8px; }
diff --git a/internal/gui/tests/README.md b/internal/gui/tests/README.md
index 58dccdbb..73d13f58 100644
--- a/internal/gui/tests/README.md
+++ b/internal/gui/tests/README.md
@@ -1445,11 +1445,11 @@ WebKit, in English and Chinese:
 node --test internal/gui/tests/seg-contrast.test.cjs
 ```
 
-`agent-grip.test.cjs` checks that hiding an agent can be found without a
-right-click or hovering (#479, #537): every row in the Agents list draws a
-faint grip in its left margin, beside its logo, with the pointer away, and the
-row under the pointer draws it darker; the logo stays the logo on hover (no
-second grip over it); dragging the grip
+`agent-grip.test.cjs` checks an agent row's grip: with the pointer away no
+row in the Agents list draws it (always there it was clutter, the owner:
+一直出现太丑了), the row under the pointer draws it in its left margin, beside
+its logo, and it goes again when the pointer leaves; the logo stays the logo
+on hover (no second grip over it); dragging the grip
 moves the row, and clicking it opens the row's menu, whose Hide puts the row in the fold
 at the foot of the list. Opened, the fold's Show button is there without the
 pointer on its row, and brings the row back; no click moves the page. It runs
diff --git a/internal/gui/tests/agent-grip.test.cjs b/internal/gui/tests/agent-grip.test.cjs
index 1e507506..af841b93 100644
--- a/internal/gui/tests/agent-grip.test.cjs
+++ b/internal/gui/tests/agent-grip.test.cjs
@@ -3,12 +3,11 @@
 // Hide) showed nothing until the pointer was on it, so hiding an agent was
 // found only by right-clicking, and a hidden one's way back, the Show button
 // in the fold at the foot of the list, came up only with the pointer on its
-// row. Every row in the list then carried a faint grip in its left margin;
-// v0.1.619 took the logo's second grip on hover away and drew the margin grip
-// only under the pointer, which hid the way to Hide again (#537). Now the
-// margin grip is there, faint, with the pointer away, darker on the row under
-// the pointer, and the logo stays the logo: the grip is the handle's own, so
-// dragging it moves the row and clicking it opens the menu. Hidden from that
+// row. A grip in each row's left margin, always there (#479, #537), was
+// clutter (the owner: 一直出现太丑了), so it is drawn only on the row under
+// the pointer, as on the Providers list, and the logo stays the logo: the
+// grip is the handle's own, so dragging it moves the row and clicking it
+// opens the menu. Hidden from that
 // menu, the row goes into the fold, whose Show button
 // is there without the pointer on it and brings the row back. No click moves
 // the page. In the window and the tray panel, Chromium and WebKit, English
@@ -79,29 +78,30 @@ for (const engine of (process.env.BROWSER ? [process.env.BROWSER] : ["chromium",
         await page.locator("#agents > .row.agent").nth(2).waitFor();
         await page.mouse.move(1, 1);
 
-        // with the pointer away every row's grip is drawn, faint, in its
-        // margin; the row under the pointer has it darker, and the logo stays
-        // as it was
+        // with the pointer away no row's grip is drawn (always there it is
+        // clutter, the owner: 一直出现太丑了); the row under the pointer has
+        // it, and the logo stays as it was
         let g = await grips(page);
         for (const x of g) {
-          assert.notEqual(x.content, "none", `${x.id} has no grip with the pointer away`);
+          assert.notEqual(x.content, "none", `${x.id} has no grip`);
           assert.match(x.image, /gradient/, `${x.id}'s grip draws nothing`);
-          assert(x.opacity === 1 && x.visibility === "visible" && x.w >= 4 && x.ht >= 8, `${x.id}'s grip can't be seen with the pointer away: ${JSON.stringify(x)}`);
+          assert(x.w >= 4 && x.ht >= 8, `${x.id}'s grip is too small: ${JSON.stringify(x)}`);
+          assert.equal(x.opacity, 0, `${x.id}'s grip is drawn with the pointer away`);
           assert(x.inRow, `${x.id}'s grip is off its row or over its logo: ${JSON.stringify(x)}`);
         }
-        const faint = g[0].image;
-        assert(g.every((x) => x.image === faint), "the grips differ with the pointer away");
         assert.equal(await page.locator("#agents .ag-handle .grip").count(), 0, "the logo still has a grip of its own");
+        const shown = () => page.evaluate(() => [...document.querySelectorAll("#agents > .row.agent .ag-handle")].map((h) => getComputedStyle(h, "::before").opacity));
         const row1 = page.locator("#agents > .row.agent").nth(1);
         await row1.locator(".name").hover();
-        await page.waitForFunction((faint) => {
-          const rs = [...document.querySelectorAll("#agents > .row.agent .ag-handle")].map((h) => getComputedStyle(h, "::before").backgroundImage);
-          return rs[1] !== faint && rs.every((o, i) => i === 1 || o === faint);
-        }, faint);
+        await page.waitForFunction(() => {
+          const os = [...document.querySelectorAll("#agents > .row.agent .ag-handle")].map((h) => getComputedStyle(h, "::before").opacity);
+          return os[1] === "1" && os.every((o, i) => i === 1 || o === "0");
+        });
         await row1.locator(".ag-handle").hover();
         assert.equal(await row1.locator(".ag-handle > .ic").evaluate((i) => getComputedStyle(i).opacity), "1", "the logo changes on hover");
         await page.mouse.move(1, 1);
-        await page.waitForFunction((faint) => [...document.querySelectorAll("#agents > .row.agent .ag-handle")].every((h) => getComputedStyle(h, "::before").backgroundImage === faint), faint);
+        await page.waitForFunction(() => [...document.querySelectorAll("#agents > .row.agent .ag-handle")].every((h) => getComputedStyle(h, "::before").opacity === "0"));
+        assert.deepEqual(await shown(), g.map(() => "0"));
 
         // dragging by the grip moves the row
         const before = await order(page);