From 6b369c54d6dde67f41f499f9ad79f357eb079517 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Thu, 31 Oct 2024 10:52:23 +0100
Subject: [PATCH 01/11] start replacing DeviceData with DeviceWithUsage

---
 src/frontend/src/flows/manage/index.ts | 5 ++++-
 src/frontend/src/flows/manage/types.ts | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/flows/manage/index.ts b/src/frontend/src/flows/manage/index.ts
index 8d51f4d9ea..bd4e4d305d 100644
--- a/src/frontend/src/flows/manage/index.ts
+++ b/src/frontend/src/flows/manage/index.ts
@@ -1,5 +1,6 @@
 import {
   DeviceData,
+  DeviceWithUsage,
   IdentityAnchorInfo,
 } from "$generated/internet_identity_types";
 import identityCardBackground from "$src/assets/identityCardBackground.png";
@@ -303,6 +304,7 @@ export const displayManage = (
       connection,
       reload: resolve,
     });
+
     if (devices.dupPhrase) {
       toast.error(
         "More than one recovery phrases are registered, which is unexpected. Only one will be shown."
@@ -441,7 +443,7 @@ export const devicesFromDeviceDatas = ({
   connection,
   userNumber,
 }: {
-  devices: DeviceData[];
+  devices: DeviceWithUsage[];
   reload: (connection?: AuthenticatedConnection) => void;
   connection: AuthenticatedConnection;
   userNumber: bigint;
@@ -470,6 +472,7 @@ export const devicesFromDeviceDatas = ({
 
       const authenticator = {
         alias: device.alias,
+        last_usage: device.last_usage,
         warn: domainWarning(device),
         rename: () => renameDevice({ connection, device, reload }),
         remove: hasSingleDevice
diff --git a/src/frontend/src/flows/manage/types.ts b/src/frontend/src/flows/manage/types.ts
index de42117240..f909ea5164 100644
--- a/src/frontend/src/flows/manage/types.ts
+++ b/src/frontend/src/flows/manage/types.ts
@@ -3,6 +3,7 @@ import { TemplateResult } from "lit-html";
 // A simple authenticator (non-recovery device)
 export type Authenticator = {
   alias: string;
+  last_usage: [] | [BigInt];
   rename: () => void;
   remove?: () => void;
   warn?: TemplateResult;

From 73dc3c8bdc3c366b61d15a061bf4a25a16d1f6eb Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Thu, 31 Oct 2024 15:10:12 +0100
Subject: [PATCH 02/11] finish replacing DeviceData with DeviceWithUsage,
 display last_usage formatted in devices list if available

---
 .../src/flows/manage/authenticatorsSection.ts | 20 ++++++++++++++++++-
 src/frontend/src/flows/manage/index.ts        |  6 +++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/flows/manage/authenticatorsSection.ts b/src/frontend/src/flows/manage/authenticatorsSection.ts
index 7e43fd8523..0785d658ad 100644
--- a/src/frontend/src/flows/manage/authenticatorsSection.ts
+++ b/src/frontend/src/flows/manage/authenticatorsSection.ts
@@ -47,6 +47,7 @@ export const authenticatorsSection = ({
   ];
 
   const authenticators = dedupLabels(authenticators_);
+  console.log(authenticators);
 
   return html`
     <aside class=${wrapClasses.join(" ")} data-role="passkeys">
@@ -109,7 +110,7 @@ export const authenticatorsSection = ({
 };
 
 export const authenticatorItem = ({
-  authenticator: { alias, dupCount, warn, remove, rename },
+  authenticator: { alias, last_usage, dupCount, warn, remove, rename },
   index,
   icon,
 }: {
@@ -125,6 +126,20 @@ export const authenticatorItem = ({
     settings.push({ action: "remove", caption: "Remove", fn: () => remove() });
   }
 
+  let lastUsageTimeStamp: Date | undefined;
+  let lastUsageFormattedString: string | undefined;
+
+  if (last_usage.length > 0 && typeof last_usage[0] === "bigint") {
+    lastUsageTimeStamp = new Date(Number(last_usage[0] / BigInt(1000000)));
+  }
+
+  if (lastUsageTimeStamp) {
+    lastUsageFormattedString = new Intl.DateTimeFormat(undefined, {
+      dateStyle: "short",
+      timeStyle: "short",
+    }).format(lastUsageTimeStamp);
+  }
+
   return html`
     <li class="c-action-list__item" data-device=${alias}>
       ${isNullish(warn) ? undefined : itemWarning({ warn })}
@@ -134,6 +149,9 @@ export const authenticatorItem = ({
         ${nonNullish(dupCount) && dupCount > 0
           ? html`<i class="t-muted">&nbsp;(${dupCount})</i>`
           : undefined}
+        ${nonNullish(lastUsageFormattedString)
+          ? html`<i class="t-muted">&nbsp;Last used: ${lastUsageFormattedString}</i>`
+          : undefined}
       </div>
       ${settingsDropdown({
         alias,
diff --git a/src/frontend/src/flows/manage/index.ts b/src/frontend/src/flows/manage/index.ts
index bd4e4d305d..03e5ecaf4c 100644
--- a/src/frontend/src/flows/manage/index.ts
+++ b/src/frontend/src/flows/manage/index.ts
@@ -291,14 +291,14 @@ function isPinAuthenticated(
 export const displayManage = (
   userNumber: bigint,
   connection: AuthenticatedConnection,
-  devices_: DeviceData[],
+  devices_: DeviceWithUsage[],
   identityBackground: PreLoadImage
 ): Promise<void | AuthenticatedConnection> => {
   // Fetch the dapps used in the teaser & explorer
   // (dapps are suffled to encourage discovery of new dapps)
   const dapps = shuffleArray(getDapps());
   return new Promise((resolve) => {
-    const devices = devicesFromDeviceDatas({
+    const devices = devicesFromDevicesWithUsage({
       devices: devices_,
       userNumber,
       connection,
@@ -437,7 +437,7 @@ export const readRecovery = ({
 
 // Convert devices read from the canister into types that are easier to work with
 // and that better represent what we expect.
-export const devicesFromDeviceDatas = ({
+export const devicesFromDevicesWithUsage = ({
   devices: devices_,
   reload,
   connection,

From 9f417018f4e6e339fc2d01094d21548e69eedd14 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Thu, 31 Oct 2024 15:18:41 +0100
Subject: [PATCH 03/11] remove unnecessary console log

---
 src/frontend/src/flows/manage/authenticatorsSection.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/src/flows/manage/authenticatorsSection.ts b/src/frontend/src/flows/manage/authenticatorsSection.ts
index 0785d658ad..fc89d9bd03 100644
--- a/src/frontend/src/flows/manage/authenticatorsSection.ts
+++ b/src/frontend/src/flows/manage/authenticatorsSection.ts
@@ -47,7 +47,6 @@ export const authenticatorsSection = ({
   ];
 
   const authenticators = dedupLabels(authenticators_);
-  console.log(authenticators);
 
   return html`
     <aside class=${wrapClasses.join(" ")} data-role="passkeys">

From ccdfc2251e1efbd2a07ca34301aa441d79c9123e Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Thu, 31 Oct 2024 15:22:03 +0100
Subject: [PATCH 04/11] BigInt in types -> bigint

---
 src/frontend/src/flows/manage/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/flows/manage/types.ts b/src/frontend/src/flows/manage/types.ts
index f909ea5164..468415999f 100644
--- a/src/frontend/src/flows/manage/types.ts
+++ b/src/frontend/src/flows/manage/types.ts
@@ -3,7 +3,7 @@ import { TemplateResult } from "lit-html";
 // A simple authenticator (non-recovery device)
 export type Authenticator = {
   alias: string;
-  last_usage: [] | [BigInt];
+  last_usage: [] | [bigint];
   rename: () => void;
   remove?: () => void;
   warn?: TemplateResult;

From 37f1faf415f488038432f482688ac234f8b44bc7 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Thu, 31 Oct 2024 15:26:06 +0100
Subject: [PATCH 05/11] adjust formatting

---
 src/frontend/src/flows/manage/authenticatorsSection.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/flows/manage/authenticatorsSection.ts b/src/frontend/src/flows/manage/authenticatorsSection.ts
index fc89d9bd03..e837de15a8 100644
--- a/src/frontend/src/flows/manage/authenticatorsSection.ts
+++ b/src/frontend/src/flows/manage/authenticatorsSection.ts
@@ -149,7 +149,9 @@ export const authenticatorItem = ({
           ? html`<i class="t-muted">&nbsp;(${dupCount})</i>`
           : undefined}
         ${nonNullish(lastUsageFormattedString)
-          ? html`<i class="t-muted">&nbsp;Last used: ${lastUsageFormattedString}</i>`
+          ? html`<i class="t-muted"
+              >&nbsp;Last used: ${lastUsageFormattedString}</i
+            >`
           : undefined}
       </div>
       ${settingsDropdown({

From 31d8d5c3ea4c53c1b3d1ac71f0030dbca24b6187 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Fri, 1 Nov 2024 14:00:55 +0100
Subject: [PATCH 06/11] rearrange and use relative time format

---
 .../src/flows/manage/authenticatorsSection.ts | 40 +++++++++++--------
 src/frontend/src/styles/main.css              |  4 ++
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/flows/manage/authenticatorsSection.ts b/src/frontend/src/flows/manage/authenticatorsSection.ts
index e837de15a8..cbc16dbe66 100644
--- a/src/frontend/src/flows/manage/authenticatorsSection.ts
+++ b/src/frontend/src/flows/manage/authenticatorsSection.ts
@@ -133,32 +133,38 @@ export const authenticatorItem = ({
   }
 
   if (lastUsageTimeStamp) {
-    lastUsageFormattedString = new Intl.DateTimeFormat(undefined, {
-      dateStyle: "short",
-      timeStyle: "short",
-    }).format(lastUsageTimeStamp);
+    const now = new Date();
+    const diffInDays = Math.round((lastUsageTimeStamp.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+    
+    lastUsageFormattedString = new Intl.RelativeTimeFormat('en', {
+      numeric: 'auto',
+      style: 'long'
+    }).format(diffInDays, 'day');
   }
 
   return html`
     <li class="c-action-list__item" data-device=${alias}>
       ${isNullish(warn) ? undefined : itemWarning({ warn })}
       ${isNullish(icon) ? undefined : html`${icon}`}
-      <div class="c-action-list__label">
-        ${alias}
-        ${nonNullish(dupCount) && dupCount > 0
-          ? html`<i class="t-muted">&nbsp;(${dupCount})</i>`
-          : undefined}
+      <div class="c-action-list__label--stacked c-action-list__label">
+        <div class="c-action-list__label c-action-list__label--spacer">
+          ${alias}
+          ${nonNullish(dupCount) && dupCount > 0
+            ? html`<i class="t-muted">&nbsp;(${dupCount})</i>`
+            : undefined}
+            <div class="c-action-list__label"></div>
+            ${settingsDropdown({
+              alias,
+              id: `authenticator-${index}`,
+              settings,
+            })}
+        </div>
+        <div>
         ${nonNullish(lastUsageFormattedString)
-          ? html`<i class="t-muted"
-              >&nbsp;Last used: ${lastUsageFormattedString}</i
-            >`
+          ? html`<div class="t-muted">Last used: ${lastUsageFormattedString}</div>`
           : undefined}
+        </div>
       </div>
-      ${settingsDropdown({
-        alias,
-        id: `authenticator-${index}`,
-        settings,
-      })}
     </li>
   `;
 };
diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
index a9116f7467..6347652696 100644
--- a/src/frontend/src/styles/main.css
+++ b/src/frontend/src/styles/main.css
@@ -2751,6 +2751,10 @@ a.c-action-list__item {
   justify-content: center;
 }
 
+.c-action-list__label--spacer {
+  width: 100%;
+}
+
 .c-action-list__action {
   cursor: pointer;
   color: var(--rc-text);

From d5651d7a2201d0c7d4b7a3e816271566121234c5 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Fri, 1 Nov 2024 14:03:43 +0100
Subject: [PATCH 07/11] format

---
 .../src/flows/manage/authenticatorsSection.ts | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/flows/manage/authenticatorsSection.ts b/src/frontend/src/flows/manage/authenticatorsSection.ts
index cbc16dbe66..abb33cbc18 100644
--- a/src/frontend/src/flows/manage/authenticatorsSection.ts
+++ b/src/frontend/src/flows/manage/authenticatorsSection.ts
@@ -134,12 +134,14 @@ export const authenticatorItem = ({
 
   if (lastUsageTimeStamp) {
     const now = new Date();
-    const diffInDays = Math.round((lastUsageTimeStamp.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
-    
-    lastUsageFormattedString = new Intl.RelativeTimeFormat('en', {
-      numeric: 'auto',
-      style: 'long'
-    }).format(diffInDays, 'day');
+    const diffInDays = Math.round(
+      (lastUsageTimeStamp.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+    );
+
+    lastUsageFormattedString = new Intl.RelativeTimeFormat("en", {
+      numeric: "auto",
+      style: "long",
+    }).format(diffInDays, "day");
   }
 
   return html`
@@ -152,17 +154,19 @@ export const authenticatorItem = ({
           ${nonNullish(dupCount) && dupCount > 0
             ? html`<i class="t-muted">&nbsp;(${dupCount})</i>`
             : undefined}
-            <div class="c-action-list__label"></div>
-            ${settingsDropdown({
-              alias,
-              id: `authenticator-${index}`,
-              settings,
-            })}
+          <div class="c-action-list__label"></div>
+          ${settingsDropdown({
+            alias,
+            id: `authenticator-${index}`,
+            settings,
+          })}
         </div>
         <div>
-        ${nonNullish(lastUsageFormattedString)
-          ? html`<div class="t-muted">Last used: ${lastUsageFormattedString}</div>`
-          : undefined}
+          ${nonNullish(lastUsageFormattedString)
+            ? html`<div class="t-muted">
+                Last used: ${lastUsageFormattedString}
+              </div>`
+            : undefined}
         </div>
       </div>
     </li>

From 773dffbc0e350eaf7501b0970870cc1d014454f1 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Fri, 1 Nov 2024 14:21:05 +0100
Subject: [PATCH 08/11] create time format helper utility and tests

---
 .../src/flows/manage/authenticatorsSection.ts | 11 +----
 src/frontend/src/utils/time.test.ts           | 45 +++++++++++++++++++
 src/frontend/src/utils/time.ts                | 30 +++++++++++++
 3 files changed, 77 insertions(+), 9 deletions(-)
 create mode 100644 src/frontend/src/utils/time.test.ts
 create mode 100644 src/frontend/src/utils/time.ts

diff --git a/src/frontend/src/flows/manage/authenticatorsSection.ts b/src/frontend/src/flows/manage/authenticatorsSection.ts
index abb33cbc18..c0903ce80f 100644
--- a/src/frontend/src/flows/manage/authenticatorsSection.ts
+++ b/src/frontend/src/flows/manage/authenticatorsSection.ts
@@ -3,6 +3,7 @@ import { isNullish, nonNullish } from "@dfinity/utils";
 import { TemplateResult, html } from "lit-html";
 import { settingsDropdown } from "./settingsDropdown";
 import { Authenticator } from "./types";
+import { formatLastUsage } from "$src/utils/time";
 
 // The maximum number of authenticator (non-recovery) devices we allow.
 // The canister limits the _total_ number of devices (recovery included) to 10,
@@ -133,15 +134,7 @@ export const authenticatorItem = ({
   }
 
   if (lastUsageTimeStamp) {
-    const now = new Date();
-    const diffInDays = Math.round(
-      (lastUsageTimeStamp.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
-    );
-
-    lastUsageFormattedString = new Intl.RelativeTimeFormat("en", {
-      numeric: "auto",
-      style: "long",
-    }).format(diffInDays, "day");
+    lastUsageFormattedString = formatLastUsage(lastUsageTimeStamp);
   }
 
   return html`
diff --git a/src/frontend/src/utils/time.test.ts b/src/frontend/src/utils/time.test.ts
new file mode 100644
index 0000000000..9de183bf92
--- /dev/null
+++ b/src/frontend/src/utils/time.test.ts
@@ -0,0 +1,45 @@
+import { formatLastUsage } from './time';
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+
+describe('formatLastUsage', () => {
+  const NOW = new Date();
+  
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(NOW);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('formats time within the last hour', () => {
+    const timestamp = new Date(NOW.getTime() - 30 * 60 * 1000); // 30 minutes ago
+    expect(formatLastUsage(timestamp)).toBe(`today at ${timestamp.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })}`);
+  });
+
+  test('formats time from earlier today', () => {
+    const timestamp = new Date(NOW.getTime() - 7 * 60 * 60 * 1000); // 7 hours ago
+    expect(formatLastUsage(timestamp)).toBe(`today at ${timestamp.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })}`);
+  });
+
+  test('formats time from yesterday', () => {
+    const timestamp = new Date(NOW.getTime() - 24 * 60 * 60 * 1000); // 24 hours ago
+    expect(formatLastUsage(timestamp)).toBe('yesterday');
+  });
+
+  test('formats time from several days ago', () => {
+    const timestamp = new Date(NOW.getTime() - 5 * 24 * 60 * 60 * 1000); // 5 days ago
+    expect(formatLastUsage(timestamp)).toBe('5 days ago');
+  });
+
+  test('formats time from last month', () => {
+    const timestamp = new Date(NOW.getTime() - 30 * 24 * 60 * 60 * 1000); // ~1 month ago
+    expect(formatLastUsage(timestamp)).toBe('last month');
+  });
+
+  test('formats time from 5 months ago', () => {
+    const timestamp = new Date(NOW.getTime() - 5 * 30 * 24 * 60 * 60 * 1000); // ~1 month ago
+    expect(formatLastUsage(timestamp)).toBe('5 months ago');
+  });
+});
\ No newline at end of file
diff --git a/src/frontend/src/utils/time.ts b/src/frontend/src/utils/time.ts
new file mode 100644
index 0000000000..3f0bbebe3d
--- /dev/null
+++ b/src/frontend/src/utils/time.ts
@@ -0,0 +1,30 @@
+export const formatLastUsage = (timestamp: Date): string => {
+    const now = new Date();
+    const diffInMillis = timestamp.getTime() - now.getTime();
+    const diffInDays = Math.round(diffInMillis / (1000 * 60 * 60 * 24));
+    
+    // If more than 25 days, use months
+    if (Math.abs(diffInDays) >= 25) {
+      const diffInMonths = Math.round(diffInDays / 30);
+      return new Intl.RelativeTimeFormat("en", {
+        numeric: "auto",
+        style: "long",
+      }).format(diffInMonths, "month");
+    }
+  
+    const relativeTime = new Intl.RelativeTimeFormat("en", {
+      numeric: "auto",
+      style: "long",
+    }).format(diffInDays, "day");
+  
+    // If within last 24 hours, append the time
+    if (Math.abs(diffInDays) < 1) {
+      const timeString = new Intl.DateTimeFormat("en", {
+        hour: "numeric",
+        minute: "numeric",
+      }).format(timestamp);
+      return `${relativeTime} at ${timeString}`;
+    }
+  
+    return relativeTime;
+  };
\ No newline at end of file

From eae18cd5ab842c4b61286a63841d85cc0ded0959 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Fri, 1 Nov 2024 14:23:43 +0100
Subject: [PATCH 09/11] format

---
 .../src/flows/manage/authenticatorsSection.ts |  2 +-
 src/frontend/src/utils/time.test.ts           | 44 +++++++++------
 src/frontend/src/utils/time.ts                | 54 +++++++++----------
 3 files changed, 55 insertions(+), 45 deletions(-)

diff --git a/src/frontend/src/flows/manage/authenticatorsSection.ts b/src/frontend/src/flows/manage/authenticatorsSection.ts
index c0903ce80f..c88519cfbb 100644
--- a/src/frontend/src/flows/manage/authenticatorsSection.ts
+++ b/src/frontend/src/flows/manage/authenticatorsSection.ts
@@ -1,9 +1,9 @@
 import { warningIcon } from "$src/components/icons";
+import { formatLastUsage } from "$src/utils/time";
 import { isNullish, nonNullish } from "@dfinity/utils";
 import { TemplateResult, html } from "lit-html";
 import { settingsDropdown } from "./settingsDropdown";
 import { Authenticator } from "./types";
-import { formatLastUsage } from "$src/utils/time";
 
 // The maximum number of authenticator (non-recovery) devices we allow.
 // The canister limits the _total_ number of devices (recovery included) to 10,
diff --git a/src/frontend/src/utils/time.test.ts b/src/frontend/src/utils/time.test.ts
index 9de183bf92..9b02a84748 100644
--- a/src/frontend/src/utils/time.test.ts
+++ b/src/frontend/src/utils/time.test.ts
@@ -1,9 +1,9 @@
-import { formatLastUsage } from './time';
-import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { formatLastUsage } from "./time";
 
-describe('formatLastUsage', () => {
+describe("formatLastUsage", () => {
   const NOW = new Date();
-  
+
   beforeEach(() => {
     vi.useFakeTimers();
     vi.setSystemTime(NOW);
@@ -13,33 +13,43 @@ describe('formatLastUsage', () => {
     vi.useRealTimers();
   });
 
-  test('formats time within the last hour', () => {
+  test("formats time within the last hour", () => {
     const timestamp = new Date(NOW.getTime() - 30 * 60 * 1000); // 30 minutes ago
-    expect(formatLastUsage(timestamp)).toBe(`today at ${timestamp.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })}`);
+    expect(formatLastUsage(timestamp)).toBe(
+      `today at ${timestamp.toLocaleTimeString("en-US", {
+        hour: "numeric",
+        minute: "numeric",
+      })}`
+    );
   });
 
-  test('formats time from earlier today', () => {
+  test("formats time from earlier today", () => {
     const timestamp = new Date(NOW.getTime() - 7 * 60 * 60 * 1000); // 7 hours ago
-    expect(formatLastUsage(timestamp)).toBe(`today at ${timestamp.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })}`);
+    expect(formatLastUsage(timestamp)).toBe(
+      `today at ${timestamp.toLocaleTimeString("en-US", {
+        hour: "numeric",
+        minute: "numeric",
+      })}`
+    );
   });
 
-  test('formats time from yesterday', () => {
+  test("formats time from yesterday", () => {
     const timestamp = new Date(NOW.getTime() - 24 * 60 * 60 * 1000); // 24 hours ago
-    expect(formatLastUsage(timestamp)).toBe('yesterday');
+    expect(formatLastUsage(timestamp)).toBe("yesterday");
   });
 
-  test('formats time from several days ago', () => {
+  test("formats time from several days ago", () => {
     const timestamp = new Date(NOW.getTime() - 5 * 24 * 60 * 60 * 1000); // 5 days ago
-    expect(formatLastUsage(timestamp)).toBe('5 days ago');
+    expect(formatLastUsage(timestamp)).toBe("5 days ago");
   });
 
-  test('formats time from last month', () => {
+  test("formats time from last month", () => {
     const timestamp = new Date(NOW.getTime() - 30 * 24 * 60 * 60 * 1000); // ~1 month ago
-    expect(formatLastUsage(timestamp)).toBe('last month');
+    expect(formatLastUsage(timestamp)).toBe("last month");
   });
 
-  test('formats time from 5 months ago', () => {
+  test("formats time from 5 months ago", () => {
     const timestamp = new Date(NOW.getTime() - 5 * 30 * 24 * 60 * 60 * 1000); // ~1 month ago
-    expect(formatLastUsage(timestamp)).toBe('5 months ago');
+    expect(formatLastUsage(timestamp)).toBe("5 months ago");
   });
-});
\ No newline at end of file
+});
diff --git a/src/frontend/src/utils/time.ts b/src/frontend/src/utils/time.ts
index 3f0bbebe3d..dbafd75af0 100644
--- a/src/frontend/src/utils/time.ts
+++ b/src/frontend/src/utils/time.ts
@@ -1,30 +1,30 @@
 export const formatLastUsage = (timestamp: Date): string => {
-    const now = new Date();
-    const diffInMillis = timestamp.getTime() - now.getTime();
-    const diffInDays = Math.round(diffInMillis / (1000 * 60 * 60 * 24));
-    
-    // If more than 25 days, use months
-    if (Math.abs(diffInDays) >= 25) {
-      const diffInMonths = Math.round(diffInDays / 30);
-      return new Intl.RelativeTimeFormat("en", {
-        numeric: "auto",
-        style: "long",
-      }).format(diffInMonths, "month");
-    }
-  
-    const relativeTime = new Intl.RelativeTimeFormat("en", {
+  const now = new Date();
+  const diffInMillis = timestamp.getTime() - now.getTime();
+  const diffInDays = Math.round(diffInMillis / (1000 * 60 * 60 * 24));
+
+  // If more than 25 days, use months
+  if (Math.abs(diffInDays) >= 25) {
+    const diffInMonths = Math.round(diffInDays / 30);
+    return new Intl.RelativeTimeFormat("en", {
       numeric: "auto",
       style: "long",
-    }).format(diffInDays, "day");
-  
-    // If within last 24 hours, append the time
-    if (Math.abs(diffInDays) < 1) {
-      const timeString = new Intl.DateTimeFormat("en", {
-        hour: "numeric",
-        minute: "numeric",
-      }).format(timestamp);
-      return `${relativeTime} at ${timeString}`;
-    }
-  
-    return relativeTime;
-  };
\ No newline at end of file
+    }).format(diffInMonths, "month");
+  }
+
+  const relativeTime = new Intl.RelativeTimeFormat("en", {
+    numeric: "auto",
+    style: "long",
+  }).format(diffInDays, "day");
+
+  // If within last 24 hours, append the time
+  if (Math.abs(diffInDays) < 1) {
+    const timeString = new Intl.DateTimeFormat("en", {
+      hour: "numeric",
+      minute: "numeric",
+    }).format(timestamp);
+    return `${relativeTime} at ${timeString}`;
+  }
+
+  return relativeTime;
+};

From 9a5c60aa862f65272ee781e9e551980dfb079498 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Fri, 1 Nov 2024 15:26:52 +0100
Subject: [PATCH 10/11] fix showcase

---
 src/frontend/src/flows/manage/authenticatorsSection.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/flows/manage/authenticatorsSection.ts b/src/frontend/src/flows/manage/authenticatorsSection.ts
index c88519cfbb..dea5c39974 100644
--- a/src/frontend/src/flows/manage/authenticatorsSection.ts
+++ b/src/frontend/src/flows/manage/authenticatorsSection.ts
@@ -129,7 +129,7 @@ export const authenticatorItem = ({
   let lastUsageTimeStamp: Date | undefined;
   let lastUsageFormattedString: string | undefined;
 
-  if (last_usage.length > 0 && typeof last_usage[0] === "bigint") {
+  if (last_usage?.length > 0 && typeof last_usage[0] === "bigint") {
     lastUsageTimeStamp = new Date(Number(last_usage[0] / BigInt(1000000)));
   }
 

From bfed34b15a3ae7819722470cd3d27dce1d436317 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Fri, 1 Nov 2024 16:05:31 +0100
Subject: [PATCH 11/11] add mock data for showcase

---
 src/showcase/src/pages/displayManage.astro       | 3 +++
 src/showcase/src/pages/displayManageSingle.astro | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/showcase/src/pages/displayManage.astro b/src/showcase/src/pages/displayManage.astro
index 1ad34d2bf9..210fd80655 100644
--- a/src/showcase/src/pages/displayManage.astro
+++ b/src/showcase/src/pages/displayManage.astro
@@ -23,16 +23,19 @@ import Screen from "../layouts/Screen.astro";
             alias: "Chrome on iPhone",
             remove: () => toast.info("remove"),
             rename: () => toast.info("rename"),
+            last_usage: [BigInt(Date.now() * 1000000)],
           },
           {
             alias: "Yubikey Blue",
             remove: () => toast.info("remove"),
             rename: () => toast.info("rename"),
+            last_usage: [BigInt(Date.now() * 1000000 - 1_000_000_000 * 60 * 60 * 24 * 7)],
           },
           {
             alias: "Yubikey Blue",
             remove: () => toast.info("remove"),
             rename: () => toast.info("rename"),
+            last_usage: [BigInt(Date.now() * 1000000 - 1_000_000_000 * 60 * 60 * 24 * 30)],
             warn: html`Something is rotten in the state of Device`,
           },
         ],
diff --git a/src/showcase/src/pages/displayManageSingle.astro b/src/showcase/src/pages/displayManageSingle.astro
index f7dbb13068..7cded001a9 100644
--- a/src/showcase/src/pages/displayManageSingle.astro
+++ b/src/showcase/src/pages/displayManageSingle.astro
@@ -21,6 +21,7 @@ import Screen from "../layouts/Screen.astro";
           {
             alias: "Chrome on iPhone",
             rename: () => toast.info("rename"),
+            last_usage: [BigInt(Date.now() * 1000000)],
           },
         ],
         recoveries: {},