feat(console): My account lists the browsers of the extension, and disconnects one (FRU-249)

apps/console/app/api.ts

@@ -384,6 +384,30 @@ export async function signOut(): Promise<boolean> {
  */
 export type ConsoleSession = { id: string; createdAt: string; lastUsedAt: string; current: boolean; browser?: string };
 
+/**
+ * A browser where the extension is connected to the account (FRU-238, FRU-249): its short label, when
+ * it connected, and when it last refreshed its tokens.
+ */
+export type ExtensionBrowser = { id: string; browser: string; connectedAt: string; usedAt: string };
+
+/** The browsers of the extension of the person. A refusal is no list. */
+export async function extensionBrowsers(): Promise<Answer<ExtensionBrowser[]>> {
+  const listed = await call<{ browsers?: ExtensionBrowser[] }>('GET', '/console/me/browsers');
+  if (!listed.ok) return listed;
+
+  return Array.isArray(listed.data?.browsers)
+    ? { ok: true, data: listed.data.browsers }
+    : { ok: false, status: 200, error: 'unknown' };
+}
+
+/** Ends the session of the extension in one browser: its next refresh is refused. */
+export async function endExtensionBrowser(id: string): Promise<'ended' | 'unknown' | 'failed'> {
+  const ended = await call('DELETE', `/console/me/browsers/${encodeURIComponent(id)}`);
+  if (ended.ok) return 'ended';
+
+  return ended.status === 404 ? 'unknown' : 'failed';
+}
+
 /** The providers that an account links (FRU-249). */
 export const LINKABLE = ['github', 'google'] as const;
 export type Linkable = (typeof LINKABLE)[number];

apps/console/app/messages.fr.ts

@@ -665,4 +665,14 @@ export const FRENCH: Readonly<Record<string, string>> = {
     'Vous ne vous connectez plus avec {provider}. Votre compte et ses notes restent.',
   'Link {provider}': 'Lier {provider}',
   'Console · {browser}': 'Console · {browser}',
+  // My account, the browsers of the extension (FRU-249).
+  'Extension · {browser}': 'Extension · {browser}',
+  'Connected {day} · used {last}': 'Connectée le {day} · utilisée {last}',
+  'Disconnect the extension in {browser}': 'Déconnecter l’extension dans {browser}',
+  'It stops showing notes at once. It connects again from its popup, with your approval here.':
+    'Elle cesse d’afficher les notes tout de suite. Elle se reconnecte depuis son popup, avec votre accord ici.',
+  'Fruitback did not answer. The browsers of the extension could not be read.':
+    'Fruitback n’a pas répondu. Les navigateurs de l’extension n’ont pas pu être lus.',
+  'This extension is still connected: Fruitback did not end its session. Try again.':
+    'Cette extension est toujours connectée : Fruitback n’a pas mis fin à sa session. Réessayez.',
 };

apps/console/app/routes/account.tsx

@@ -2,12 +2,15 @@ import { type FormEvent, type ReactNode, useCallback, useEffect, useRef, useStat
 import { useNavigate, useSearchParams } from 'react-router';
 import {
   type ConsoleSession,
+  type ExtensionBrowser,
   LINKABLE,
   type Linkable,
   type SignInMethods,
   call,
   consoleSessions,
   endConsoleSession,
+  endExtensionBrowser,
+  extensionBrowsers,
   linkAddress,
   renameMe,
   saveLanguage,
@@ -16,6 +19,7 @@ import {
   signOutEverywhere,
   unlinkProvider,
 } from '../api';
+import { ago } from '../ago';
 import { type Listed, edited } from '../listed';
 import { problemOf } from '../problems';
 import { Button, Choice, Field, LinkButton, Problem } from '../ui';
@@ -76,6 +80,15 @@ const DELETION_PROBLEMS: Readonly<Record<string, string>> = {
 };
 const WORKSPACE_NOT_DELETED = msg('The workspace was not deleted. Try again.');
 
+/** « 12 Oct », as the mockup writes the day a browser connected. */
+function dayOf(iso: string): string {
+  const date = new Date(iso);
+
+  return Number.isNaN(date.getTime())
+    ? iso
+    : date.toLocaleDateString(locale() === 'fr' ? 'fr' : 'en-GB', { day: 'numeric', month: 'short' });
+}
+
 /** A day and a time, in the language of the console. */
 function moment(iso: string): string {
   const date = new Date(iso);
@@ -146,12 +159,36 @@ export default function Account() {
   const [unsent, setUnsent] = useState(false);
 
   // The browsers where the console is signed in. No list is not an empty list (FRU-162).
+  // The browsers of the extension come in the same list, read together: the rows are drawn once, and
+  // nothing under them moves when the second answer comes (FRU-271).
   const [sessions, setSessions] = useState<Listed<ConsoleSession>>('loading');
+  // The browsers of the extension that could not be read do not take the browsers of the console
+  // with them: those stay, with their « Disconnect », and a line says what is missing.
+  const [extensions, setExtensions] = useState<ExtensionBrowser[]>([]);
+  const [extensionsFailed, setExtensionsFailed] = useState(false);
   const read = useCallback(async () => {
     setSessions('loading');
-    const listed = await consoleSessions();
+    const [listed, connected] = await Promise.all([consoleSessions(), extensionBrowsers()]);
+    setExtensions(connected.ok ? connected.data : []);
+    setExtensionsFailed(!connected.ok);
     setSessions(listed.ok ? listed.data : 'failed');
   }, []);
+  const [extensionStuck, setExtensionStuck] = useState<string | undefined>();
+
+  async function disconnectExtension(browser: ExtensionBrowser) {
+    setExtensionStuck(undefined);
+    const ended = await endExtensionBrowser(browser.id);
+    if (ended === 'failed') return setExtensionStuck(browser.id);
+    if (ended === 'unknown') {
+      // Ended since the list was read, or a worker with no such route: only the list says which.
+      const connected = await extensionBrowsers();
+      // A list that could not be read says nothing of this browser: the line of a failed read says so.
+      if (!connected.ok) return setExtensionsFailed(true);
+      if (connected.data.some((each) => each.id === browser.id)) return setExtensionStuck(browser.id);
+      return setExtensions(connected.data);
+    }
+    setExtensions((current) => current.filter((each) => each.id !== browser.id));
+  }
   useEffect(() => void read(), [read]);
   // The browser whose session did not end, by the id of its session.
   const [stuck, setStuck] = useState<string | undefined>();
@@ -359,6 +396,46 @@ export default function Account() {
                   </Row>
                 ),
               )}
+              {[...extensions]
+                .sort((one, other) => other.usedAt.localeCompare(one.usedAt))
+                .map((browser) => (
+                  <Row
+                    key={browser.id}
+                    title={t('Extension · {browser}', { browser: browser.browser })}
+                    detail={t('Connected {day} · used {last}', {
+                      day: dayOf(browser.connectedAt),
+                      last: ago(browser.usedAt),
+                    })}
+                    under={
+                      extensionStuck === browser.id ? (
+                        <Problem>
+                          {t('This extension is still connected: Fruitback did not end its session. Try again.')}
+                        </Problem>
+                      ) : undefined
+                    }
+                  >
+                    <AsksTwice
+                      space="normal"
+                      label={t('Disconnect')}
+                      confirmLabel={t('Disconnect the extension in {browser}', { browser: browser.browser })}
+                      keepLabel={t('Keep it')}
+                      consequence={t(
+                        'It stops showing notes at once. It connects again from its popup, with your approval here.',
+                      )}
+                      onConfirm={() => void disconnectExtension(browser)}
+                    />
+                  </Row>
+                ))}
+              {extensionsFailed ? (
+                <li className={`${ONE_ROW} gap-[12px] border-t-0`}>
+                  <p role="alert" className="min-w-0 flex-1 text-small text-muted">
+                    {t('Fruitback did not answer. The browsers of the extension could not be read.')}
+                  </p>
+                  <Button tone="outline" onClick={() => void read()}>
+                    {t('Try again')}
+                  </Button>
+                </li>
+              ) : null}
             </ul>
           )}
         </section>

docs/decisions/console.md

@@ -312,7 +312,14 @@ The console of the Cloud, `apps/console`: its words, its kit, and what it shows
   taken from the address; « Unlink » asks twice, and the last way to sign in stays and says why
   (`409 last-sign-in`, `403 sign-in-again`). The three rows of « How you sign in » are drawn before
   the worker answers, so nothing under them moves. The worker keeps no login of a provider: « Linked »,
-  not « Linked as ». No extension is listed yet: their route comes with FRU-238. The deletion of the
+  not « Linked as ». **The browsers of the extension are rows of the same list** (`GET
+/console/me/browsers`, FRU-238): « Extension · Chrome on macOS », « Connected 12 Oct · used 2 h ago »,
+  after the browsers of the console. The two lists are read together and drawn once, so nothing under
+  them moves when the second answer comes. A list of the console that could not be read is no list; a
+  list of the extension that could not be read leaves the browsers of the console and their
+  « Disconnect », with a line that says what is missing and « Try again ».
+  « Disconnect » of an extension asks twice (it reconnects only with an approval here), and ends its
+  session on the worker (`DELETE /console/me/browsers/<id>`): its next refresh is refused. The deletion of the
   workspace stays at the bottom, for its owner: the mockup does not draw it, and it is nowhere else.
   `e2e/console-account.spec.ts` holds the screen on stubs, and the sessions on a worker with accounts: one browser disconnects the other,
   which learns it at its next call, and « Sign out everywhere » ends every one.

e2e/console-account.spec.ts

@@ -51,6 +51,10 @@ type Stubbed = {
   refuses: boolean;
   /** The sessions are ended already: the worker knows no session by these ids. */
   gone: boolean;
+  /** The browsers of the extension (FRU-249); `undefined`: the worker does not answer. */
+  extensions: unknown[] | undefined;
+  /** The worker ends no extension when it is asked to. */
+  extensionRefuses: boolean;
   /** How the person signs in (FRU-249); `undefined`: the worker does not answer. */
   methods: Record<string, unknown> | undefined;
   /** What the worker answers to « Unlink », and to a name, when it refuses. */
@@ -70,6 +74,8 @@ async function workerWith(page: Page, role: Role = 'owner', locale: 'en' | 'fr'
     refuses: false,
     gone: false,
     methods: { email: true, github: { linked: true }, google: { linked: false } },
+    extensions: [],
+    extensionRefuses: false,
     sent: [],
     bodies: {},
   };
@@ -109,6 +115,19 @@ async function workerWith(page: Page, role: Role = 'owner', locale: 'en' | 'fr'
 
       return route.fulfill({ json: { account: { id: 'a1', email: '[email protected]', name: body.name } } });
     }
+    if (pathname === '/console/me/browsers') {
+      return worker.extensions === undefined
+        ? route.fulfill({ status: 500, json: { error: 'unknown' } })
+        : route.fulfill({ json: { browsers: worker.extensions } });
+    }
+    if (pathname.startsWith('/console/me/browsers/')) {
+      worker.sent.push(`${method} ${pathname}`);
+      if (worker.extensionRefuses) return route.fulfill({ status: 502, json: { error: 'auth-unavailable' } });
+      const id = pathname.split('/').at(-1);
+      worker.extensions = (worker.extensions ?? []).filter((each) => (each as { id: string }).id !== id);
+
+      return route.fulfill({ status: 204 });
+    }
     if (pathname === '/console/sessions') {
       return worker.sessions === undefined
         ? route.fulfill({ status: 500, json: { error: 'unknown' } })
@@ -605,6 +624,60 @@ test.describe('the browsers of a person, on a worker with accounts', () => {
     return { sites: sites.status, refresh: refreshed.status, next };
   }
 
+  test('an extension connected to the account is listed, and « Disconnect » ends it on the worker', async ({
+    browser,
+  }) => {
+    const first = await browserOf(browser, '[email protected]');
+    const cookie = await cookieOf(first.context);
+    const consoleCall = (path: string, method = 'GET', body?: unknown) =>
+      fetch(`${worker.origin}${path}`, {
+        method,
+        headers: { Origin: WORKER_CONSOLE, Cookie: cookie, 'Content-Type': 'application/json' },
+        ...(body === undefined ? {} : { body: JSON.stringify(body) }),
+      });
+
+    // The extension asks (FRU-238), the console approves with the word and the account, the extension
+    // claims its session.
+    const asked = await fetch(`${worker.origin}/session/connect`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ browser: 'Chrome on macOS' }),
+    });
+    expect(asked.status).toBe(201);
+    const { request, claim, word } = (await asked.json()) as { request: string; claim: string; word: string };
+    const me = (await (await consoleCall('/console/me')).json()) as { account: { id: string } };
+    expect(
+      (await consoleCall(`/console/connect/${request}/approve`, 'POST', { word, account: me.account.id })).status,
+    ).toBe(200);
+    const claimed = await fetch(`${worker.origin}/session/connect/claim`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ claim }),
+    });
+    expect(claimed.status).toBe(200);
+    const session = (await claimed.json()) as { accessToken: string; refreshToken: string };
+
+    // My account lists it after the browsers of the console.
+    await first.page.getByRole('link', { name: 'My account' }).click();
+    const browsers = first.page.getByRole('region', { name: 'Where you are signed in' }).getByRole('listitem');
+    await expect(browsers).toHaveCount(2);
+    const extension = browsers.filter({ hasText: 'Extension · Chrome on macOS' });
+    await expect(extension).toContainText(/Connected \d+ \w+ · used (Just now|\d+ min ago)/);
+
+    // Disconnected in two presses: the row goes, and the worker refuses its refresh.
+    await extension.getByRole('button', { name: 'Disconnect', exact: true }).click();
+    await extension.getByRole('button', { name: 'Disconnect the extension in Chrome on macOS' }).click();
+    await expect(browsers).toHaveCount(1);
+    const refreshed = await fetch(`${worker.origin}/session/refresh`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refreshToken: session.refreshToken }),
+    });
+    expect(refreshed.status).toBe(401);
+    // The browser of the console is not the one that ended.
+    expect(await accepted(first.context)).toBe(200);
+  });
+
   test('the extension stays connected when My account disconnects a browser, and when it signs out everywhere', async ({
     browser,
   }) => {
@@ -783,6 +856,88 @@ test('a provider is « Not set up » when the worker has none, and the three row
   await expect(section(page, 'How you sign in').getByRole('link')).toHaveCount(0);
 });
 
+/** Noon of a fixed day: « used 2 h ago » is read on a clock of the browser set there. */
+const NOON = new Date(2026, 9, 13, 12, 0, 0);
+const EXTENSIONS = [
+  {
+    id: 'e1',
+    browser: 'Chrome on macOS',
+    connectedAt: new Date(2026, 9, 12, 9, 0).toISOString(),
+    usedAt: new Date(NOON.getTime() - 2 * 3_600_000).toISOString(),
+  },
+  {
+    id: 'e2',
+    browser: 'Firefox on Linux',
+    connectedAt: new Date(2026, 9, 2, 9, 0).toISOString(),
+    usedAt: new Date(2026, 9, 10, 9, 0).toISOString(),
+  },
+];
+
+test('the browsers of the extension are rows of the list, as the mockup draws them', async ({ page }) => {
+  await page.clock.setFixedTime(NOON);
+  const worker = await workerWith(page);
+  worker.extensions = EXTENSIONS;
+  await open(page);
+  const browsers = section(page, 'Where you are signed in').getByRole('listitem');
+  // The browsers of the console first, then those of the extension, the one used last first.
+  await expect(browsers).toHaveCount(5);
+  await expect(browsers.nth(3)).toContainText('Extension · Chrome on macOS');
+  await expect(browsers.nth(3)).toContainText('Connected 12 Oct · used 2 h ago');
+  await expect(browsers.nth(4)).toContainText('Extension · Firefox on Linux');
+  await expect(browsers.nth(4)).toContainText('Connected 2 Oct · used 3 days ago');
+  // The row is the one of the console: its title at 600, its line at 13 px.
+  expect.soft(await styles(browsers.nth(3).getByText('Extension · Chrome on macOS'), ['font-weight'])).toEqual({
+    'font-weight': '600',
+  });
+  expect.soft(await styles(browsers.nth(3).getByText(/^Connected/), ['font-size'])).toEqual({ 'font-size': '13px' });
+  await expectNoViolation(page, 'the browsers of the extension');
+});
+
+test('an extension is disconnected in two presses, and one that is still connected says so', async ({ page }) => {
+  await page.clock.setFixedTime(NOON);
+  const worker = await workerWith(page);
+  worker.extensions = EXTENSIONS;
+  await open(page);
+  const browsers = section(page, 'Where you are signed in').getByRole('listitem');
+  const chrome = browsers.filter({ hasText: 'Extension · Chrome on macOS' });
+
+  worker.extensionRefuses = true;
+  await chrome.getByRole('button', { name: 'Disconnect', exact: true }).click();
+  await expect(chrome).toContainText('It stops showing notes at once.');
+  await chrome.getByRole('button', { name: 'Disconnect the extension in Chrome on macOS' }).click();
+  await expect(chrome.getByRole('alert')).toHaveText(
+    'This extension is still connected: Fruitback did not end its session. Try again.',
+  );
+  await expect(browsers).toHaveCount(5);
+
+  worker.extensionRefuses = false;
+  await chrome.getByRole('button', { name: 'Disconnect the extension in Chrome on macOS' }).click();
+  await expect(browsers).toHaveCount(4);
+  await expect(page.getByText('Extension · Chrome on macOS')).toHaveCount(0);
+  expect(worker.sent.filter((each) => each.includes('/me/browsers/'))).toEqual([
+    'DELETE /console/me/browsers/e1',
+    'DELETE /console/me/browsers/e1',
+  ]);
+});
+
+test('a list of the extension that was not read leaves the browsers of the console, and says so', async ({ page }) => {
+  const worker = await workerWith(page);
+  worker.extensions = undefined;
+  await page.goto(`${CONSOLE}/w/w1/account`);
+  const where = section(page, 'Where you are signed in');
+  // The browsers of the console are there, with their « Disconnect ».
+  await expect(where.getByRole('listitem').filter({ hasText: 'Console · this browser' })).toBeVisible();
+  await expect(where.getByRole('button', { name: 'Disconnect', exact: true })).toHaveCount(2);
+  // And a line says what is missing, with the way to read it again.
+  await expect(where.getByRole('alert')).toHaveText(
+    'Fruitback did not answer. The browsers of the extension could not be read.',
+  );
+  worker.extensions = EXTENSIONS;
+  await where.getByRole('button', { name: 'Try again' }).click();
+  await expect(where.getByText('Extension · Chrome on macOS')).toBeVisible();
+  await expect(where.getByRole('alert')).toHaveCount(0);
+});
+
 test('a browser is named as the worker names it', async ({ page }) => {
   const worker = await workerWith(page);
   worker.sessions = [