From 6fa55d78ce5392a1956e79cac6880101241dad15 Mon Sep 17 00:00:00 2001
From: Egor Kraev <egor.kraev@gmail.com>
Date: Tue, 20 Oct 2026 13:00:46 +0200
Subject: [PATCH 1/4] Frame the Hubs menu and the worktree-deletion dialog in
 the selected tab's blue

Both get a 3px border in --accent, the selected tab's background. The
confirm dialog is shared with repo removal and host actions; only the
worktree deletion gets the frame, via a delete-worktree modifier class.
---
 src/web/main/styles.css  |  6 ++++++
 src/web/ui/app.tsx       |  4 ++--
 test/e2e/contract.ts     |  4 +++-
 test/e2e/fixture.ts      | 15 ++++++++++++++-
 test/e2e/hubs.spec.ts    | 22 +++++++++++++++++++++-
 test/e2e/sidebar.spec.ts | 24 +++++++++++++++++++++++-
 6 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/src/web/main/styles.css b/src/web/main/styles.css
index b95959f..c555e6e 100644
--- a/src/web/main/styles.css
+++ b/src/web/main/styles.css
@@ -512,6 +512,12 @@ input:focus-visible,
   box-shadow: 0 12px 36px rgb(0 0 0 / 55%);
 }
 
+/* Framed thick in the selected tab's blue. */
+.hubs-list,
+.confirm-dialog.delete-worktree {
+  border: 3px solid var(--accent);
+}
+
 /* Undo the user agent's centring and colours of an open dialog. */
 dialog.preset-picker,
 dialog.close-dialog,
diff --git a/src/web/ui/app.tsx b/src/web/ui/app.tsx
index 00eeebd..2dfad91 100644
--- a/src/web/ui/app.tsx
+++ b/src/web/ui/app.tsx
@@ -189,7 +189,7 @@ const Hubs = ({ client }: { client: HubClient }) => {
             Hubs
           </button>
           {open && (
-            <div class="hubs-list" role="menu" tabIndex={-1} onKeyDown={closeOnEscape}>
+            <div class="hubs-list" data-testid="hubs-list" role="menu" tabIndex={-1} onKeyDown={closeOnEscape}>
               {entries.map((entry) => (
                 <button
                   key={entry.label}
@@ -296,7 +296,7 @@ const ConfirmDialog = ({ view, confirmation }: { view: View; confirmation: Confi
   return (
     <dialog
       open
-      class="confirm-dialog"
+      class={confirmation.t === 'removeWorktree' ? 'confirm-dialog delete-worktree' : 'confirm-dialog'}
       data-testid="confirm-dialog"
       aria-label="Confirm"
       tabIndex={-1}
diff --git a/test/e2e/contract.ts b/test/e2e/contract.ts
index b5f2bf7..ece1e19 100644
--- a/test/e2e/contract.ts
+++ b/test/e2e/contract.ts
@@ -34,7 +34,7 @@ export const TID = {
   hostLogin: 'host-login',
   /** Button inside a host banner: "Restart daemon" (outdated local), "Reinstall & restart" (outdated remote) or "Install" (down remote); opens the confirmation dialog, then sends `restartDaemon` or `reinstallDaemon`. */
   hostAction: 'host-action',
-  /** In-page confirmation of a host action or a repo removal; nothing is sent before it is confirmed; text says every running terminal on the host will be killed when it lists none. */
+  /** In-page confirmation of a host action or a repo removal; nothing is sent before it is confirmed; text says every running terminal on the host will be killed when it lists none; for a worktree deletion only, framed 3px in the selected repo tab's background colour. */
   confirmDialog: 'confirm-dialog',
   /** One running terminal the page last saw on the daemon instance the host reports; text holds its worktree label and preset. */
   confirmTarget: 'confirm-target',
@@ -132,6 +132,8 @@ export const TID = {
   terminal: 'terminal',
   /** Header button "Hubs", present only while there is a remote host; opens the list of `hubsEntry`. */
   hubsMenu: 'hubs-menu',
+  /** The open Hubs menu holding the `hubsEntry` items; framed 3px in the selected repo tab's background colour. */
+  hubsList: 'hubs-list',
   /** One per hub in the open Hubs menu, in order: text = "This machine" or the host name; `aria-current="true"` on the page's own hub. */
   hubsEntry: 'hubs-entry',
   /** Status line beside the Hubs menu for the latest hub opening: `Opening <host>…`, `<host> needs Tailscale login`, `<host>: <message>`, `Installing on <host>…` or `no host named <name>`. */
diff --git a/test/e2e/fixture.ts b/test/e2e/fixture.ts
index 01e46d9..88db499 100644
--- a/test/e2e/fixture.ts
+++ b/test/e2e/fixture.ts
@@ -1,4 +1,4 @@
-import { test as base, expect, type BrowserContext, type ElementHandle, type Page } from '@playwright/test';
+import { test as base, expect, type BrowserContext, type ElementHandle, type Locator, type Page } from '@playwright/test';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import type { DaemonClient } from '../support/daemon-client.js';
@@ -97,6 +97,19 @@ export const openHostAction = async (page: Page, host: number, label: string): P
   await expect(page.locator(byTestId(TID.confirmDialog))).toBeVisible();
 };
 
+/** `locator`'s computed border as `"<width> <colour>"` for the top, right, bottom and left sides. */
+export const borderOf = (locator: Locator): Promise<string[]> =>
+  locator.evaluate((el) => {
+    const style = getComputedStyle(el);
+    return ['top', 'right', 'bottom', 'left'].map(
+      (side) => `${style.getPropertyValue(`border-${side}-width`)} ${style.getPropertyValue(`border-${side}-color`)}`,
+    );
+  });
+
+/** The computed background colour of the selected repo tab. */
+export const selectedTabColour = (page: Page): Promise<string> =>
+  page.locator(`${byTestId(TID.repoTab)}[aria-selected="true"]`).evaluate((el) => getComputedStyle(el).backgroundColor);
+
 /** Confirms the open confirmation dialog. */
 export const confirmAction = async (page: Page): Promise<void> => {
   const dialog = page.locator(byTestId(TID.confirmDialog));
diff --git a/test/e2e/hubs.spec.ts b/test/e2e/hubs.spec.ts
index beda317..64ca427 100644
--- a/test/e2e/hubs.spec.ts
+++ b/test/e2e/hubs.spec.ts
@@ -4,7 +4,19 @@ import { makeRepo } from '../support/daemon-host.js';
 import { freePort, type HubHost } from '../support/hub-host.js';
 import { remoteHub } from '../support/remote-hub.js';
 import { byTestId, hubsEntry, repoTab, TID } from './contract.js';
-import { expect, hubRequests, makeRepoWith, nodeRemote, openUi, runUi, test, writeHubConfig, type HostConfig } from './fixture.js';
+import {
+  borderOf,
+  expect,
+  hubRequests,
+  makeRepoWith,
+  nodeRemote,
+  openUi,
+  runUi,
+  selectedTabColour,
+  test,
+  writeHubConfig,
+  type HostConfig,
+} from './fixture.js';
 
 const RESOLVE_ERROR = 'ssh: Could not resolve hostname box: Name or service not known';
 
@@ -70,6 +82,14 @@ test.describe('Hubs menu', () => {
     await expect(page.locator(byTestId(TID.hubsMenu))).toBeFocused();
   });
 
+  test("is framed 3px in the selected tab's colour", async ({ hub, page, ssh }) => {
+    ssh.failHost('box', RESOLVE_ERROR);
+    await home(hub, page, [{ name: 'box', ssh: 'box' }]);
+    await page.locator(byTestId(TID.hubsMenu)).click();
+    const blue = await selectedTabColour(page);
+    expect(await borderOf(page.locator(byTestId(TID.hubsList)))).toEqual(Array(4).fill(`3px ${blue}`));
+  });
+
   test('is absent without remote hosts', async ({ hub, page }) => {
     await home(hub, page, []);
     await expect(page.locator(byTestId(TID.hubsMenu))).toHaveCount(0);
diff --git a/test/e2e/sidebar.spec.ts b/test/e2e/sidebar.spec.ts
index 708da60..e226cd5 100644
--- a/test/e2e/sidebar.spec.ts
+++ b/test/e2e/sidebar.spec.ts
@@ -4,8 +4,9 @@ import { join } from 'node:path';
 import type { HubHost } from '../support/hub-host.js';
 import { fakeWorktrees, git } from '../support/daemon-host.js';
 import { COMMANDS, runIn } from './attention-helpers.js';
-import { byTestId, termTab, TID, worktreeEntry } from './contract.js';
+import { byTestId, repoTab, termTab, TID, worktreeEntry } from './contract.js';
 import {
+  borderOf,
   confirmClose,
   detachedWorktree,
   expect,
@@ -16,6 +17,7 @@ import {
   openPage,
   openUi,
   ready,
+  selectedTabColour,
   selectRepo,
   selectWorktree,
   test,
@@ -469,6 +471,26 @@ test.describe('worktree status and deletion', () => {
     expect(git(repo, 'rev-parse', 'feat')).toMatch(/^[0-9a-f]{40}$/);
   });
 
+  test("the deletion dialog is framed 3px in the selected tab's colour; a repo removal's is not", async ({ hub, page }) => {
+    const { repo, worktrees } = makeRepoWith(hub, 'app', ['feat']);
+    const feat = worktrees[0] ?? '';
+    withOrigin(hub, repo);
+    writeFileSync(join(feat, 'untracked'), 'new');
+    hub.writeRepos([repo]);
+    await openUi(hub, page);
+    const dialog = page.locator(byTestId(TID.confirmDialog));
+    await page.locator(worktreeEntry(feat)).click({ button: 'right' });
+    await page.locator(byTestId(TID.deleteWorktree)).click();
+    await expect(dialog).toBeVisible();
+    const blue = await selectedTabColour(page);
+    expect(await borderOf(dialog)).toEqual(Array(4).fill(`3px ${blue}`));
+    await dialog.locator(byTestId(TID.confirmCancel)).click();
+
+    await page.locator(repoTab(repo)).locator(byTestId(TID.removeRepo)).click();
+    await expect(dialog).toBeVisible();
+    expect((await borderOf(dialog)).every((side) => side.startsWith('1px ') && !side.endsWith(blue))).toBe(true);
+  });
+
   test('deleting a detached worktree with commits says they become unreachable and names its head', async ({ hub, page }) => {
     const { repo } = makeRepoWith(hub, 'app', []);
     withOrigin(hub, repo);

From 3c089b0e6afaea4d5e61195bd137f12a41219afc Mon Sep 17 00:00:00 2001
From: Egor Kraev <egor.kraev@gmail.com>
Date: Tue, 20 Oct 2026 16:02:22 +0200
Subject: [PATCH 2/4] Split the nested template literal in borderOf (Sonar
 S4624)

---
 test/e2e/fixture.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/test/e2e/fixture.ts b/test/e2e/fixture.ts
index 88db499..4934a63 100644
--- a/test/e2e/fixture.ts
+++ b/test/e2e/fixture.ts
@@ -101,9 +101,11 @@ export const openHostAction = async (page: Page, host: number, label: string): P
 export const borderOf = (locator: Locator): Promise<string[]> =>
   locator.evaluate((el) => {
     const style = getComputedStyle(el);
-    return ['top', 'right', 'bottom', 'left'].map(
-      (side) => `${style.getPropertyValue(`border-${side}-width`)} ${style.getPropertyValue(`border-${side}-color`)}`,
-    );
+    return ['top', 'right', 'bottom', 'left'].map((side) => {
+      const width = style.getPropertyValue(`border-${side}-width`);
+      const colour = style.getPropertyValue(`border-${side}-color`);
+      return `${width} ${colour}`;
+    });
   });
 
 /** The computed background colour of the selected repo tab. */

From 36d8d4ddfb08efd12cbf9e1e62504ff14558e7f4 Mon Sep 17 00:00:00 2001
From: Egor Kraev <egor.kraev@gmail.com>
Date: Wed, 21 Oct 2026 11:43:23 +0200
Subject: [PATCH 3/4] Wait for the remote page's token before reloading it in
 the Hubs e2e test

The fragment is removed before the one-time code is exchanged, so a
reload in between left the page without a credential (1 in 20 runs).
---
 test/e2e/hubs.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/e2e/hubs.spec.ts b/test/e2e/hubs.spec.ts
index 64ca427..870635d 100644
--- a/test/e2e/hubs.spec.ts
+++ b/test/e2e/hubs.spec.ts
@@ -123,6 +123,8 @@ test.describe('Hubs menu', () => {
     ]);
     await pick(page, 'box');
     await landedOn(page, originOf(port));
+    // The fragment goes before the code is exchanged; a reload before the token arrives has no credential.
+    await expect(page.locator(repoTab(box.repo))).toBeVisible();
 
     await page.reload();
     await expect(page).toHaveTitle('worktree-term — box');

From e7c31fca246a198e821be88434a3fb46d8dcb234 Mon Sep 17 00:00:00 2001
From: Egor Kraev <egor.kraev@gmail.com>
Date: Wed, 21 Oct 2026 12:24:22 +0200
Subject: [PATCH 4/4] Leave 10 ms slack in the HubOpener time-limit test

A 300 ms timer can fire 1 ms early on the Date.now() clock (CI saw 299),
as the other time-limit tests already allow for.
---
 src/hub/links/hub.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hub/links/hub.test.ts b/src/hub/links/hub.test.ts
index 5d072ca..405d7d0 100644
--- a/src/hub/links/hub.test.ts
+++ b/src/hub/links/hub.test.ts
@@ -145,7 +145,7 @@ describe('HubOpener', () => {
     const result = await open({ timeoutMs: 300 }).done;
     expect(result.kind).toBe('failed');
     expect(result.kind === 'failed' ? result.message : '').toMatch(/did not answer within/);
-    expect(Date.now() - started).toBeGreaterThanOrEqual(300);
+    expect(Date.now() - started).toBeGreaterThanOrEqual(290);
     await waitFor(() => pids().every((pid) => !alive(pid)), 'the SSH process to be killed');
   });