From b317890b169a1f102748ac022117e860a8d3a2d5 Mon Sep 17 00:00:00 2001
From: Abian Suarez <abiansuarezbrito@gmail.com>
Date: Fri, 25 Sep 2026 11:39:54 +0100
Subject: [PATCH 1/2] fix(extension): treat custom text sizes as font sizes in
 cn

---
 apps/extension/lib/utils.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/extension/lib/utils.ts b/apps/extension/lib/utils.ts
index ab99730..e490954 100644
--- a/apps/extension/lib/utils.ts
+++ b/apps/extension/lib/utils.ts
@@ -1,5 +1,11 @@
 import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+
+// Our custom type scale (`text-2xs`, `text-ui`, see theme.css) must count as font
+// sizes: otherwise tailwind-merge reads them as colors and drops the real text color.
+const twMerge = extendTailwindMerge({
+  extend: { classGroups: { "font-size": [{ text: ["2xs", "ui"] }] } },
+});
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));

From 03e19e62497eb0e14e46e3c508d9f36350c9105c Mon Sep 17 00:00:00 2001
From: Abian Suarez <abiansuarezbrito@gmail.com>
Date: Fri, 25 Sep 2026 11:39:55 +0100
Subject: [PATCH 2/2] feat(extension): redesign the toolbar popup

---
 apps/extension/entrypoints/popup/App.tsx      | 254 ++++++++++++------
 .../entrypoints/popup/components/RecDot.tsx   |  10 +
 .../popup/components/RecentRecordings.tsx     |  47 ++++
 .../popup/components/RecordGlyph.tsx          |  41 +++
 .../entrypoints/popup/components/TabCard.tsx  |  71 +++++
 .../popup/core/__test__/unit/format.test.ts   |  68 +++++
 .../entrypoints/popup/core/format.ts          |  52 ++++
 .../entrypoints/popup/hooks/use-popup-data.ts | 116 ++++++++
 apps/extension/entrypoints/popup/style.css    |  46 ++++
 apps/extension/lib/db.ts                      |  12 +
 10 files changed, 638 insertions(+), 79 deletions(-)
 create mode 100644 apps/extension/entrypoints/popup/components/RecDot.tsx
 create mode 100644 apps/extension/entrypoints/popup/components/RecentRecordings.tsx
 create mode 100644 apps/extension/entrypoints/popup/components/RecordGlyph.tsx
 create mode 100644 apps/extension/entrypoints/popup/components/TabCard.tsx
 create mode 100644 apps/extension/entrypoints/popup/core/__test__/unit/format.test.ts
 create mode 100644 apps/extension/entrypoints/popup/core/format.ts
 create mode 100644 apps/extension/entrypoints/popup/hooks/use-popup-data.ts

diff --git a/apps/extension/entrypoints/popup/App.tsx b/apps/extension/entrypoints/popup/App.tsx
index a9f7988..f6c3b66 100644
--- a/apps/extension/entrypoints/popup/App.tsx
+++ b/apps/extension/entrypoints/popup/App.tsx
@@ -1,27 +1,36 @@
-import { ArrowUpRight, Circle, MousePointerClick, Square } from "lucide-react";
-import { useEffect, useState } from "react";
+import {
+  ArrowUpRight,
+  MousePointerClick,
+  Square,
+  TriangleAlert,
+} from "lucide-react";
 import { browser } from "wxt/browser";
 import { MadeByRustrak } from "@/components/brand/made-by-rustrak";
 import { OpenShowcaseWordmark } from "@/components/brand/openshowcase-wordmark";
 import { Button } from "@/components/ui/button";
 import { useColorScheme } from "@/hooks/use-color-scheme";
+import { sendMessage } from "@/lib/messaging";
+import { RecDot } from "./components/RecDot";
+import { RecentRecordings } from "./components/RecentRecordings";
+import { RecordGlyph } from "./components/RecordGlyph";
+import { TabCard } from "./components/TabCard";
+import { formatElapsed, isRecordableUrl } from "./core/format";
 import {
-  defaultRecordingSessionState,
-  type RecordingSessionState,
-  sendMessage,
-} from "@/lib/messaging";
-import { recordingSession } from "@/lib/recording-storage";
+  useActiveTab,
+  useNow,
+  useRecentRecordings,
+  useRecordingSession,
+  useRecordingStart,
+  useTab,
+} from "./hooks/use-popup-data";
+
+const RECENT_LIMIT = 3;
 
 function App() {
   useColorScheme();
-  const [state, setState] = useState<RecordingSessionState>(
-    defaultRecordingSessionState,
-  );
-
-  useEffect(() => {
-    recordingSession.getValue().then(setState);
-    return recordingSession.watch((newState) => setState(newState));
-  }, []);
+  const session = useRecordingSession();
+  const activeTab = useActiveTab();
+  const recent = useRecentRecordings(RECENT_LIMIT);
 
   async function send(type: "startRecording" | "stopRecording") {
     await sendMessage(type, undefined).catch((error) => {
@@ -35,79 +44,40 @@ function App() {
     window.close();
   }
 
-  async function openEditor() {
-    if (!state.recordingId) return;
+  async function openEditor(recordingId: string) {
     await browser.tabs.create({
-      url: browser.runtime.getURL(
-        `/editor.html?recordingId=${state.recordingId}`,
-      ),
+      url: browser.runtime.getURL(`/editor.html?recordingId=${recordingId}`),
     });
+    window.close();
   }
 
-  const hasFinishedRecording = !state.active && Boolean(state.recordingId);
-
   return (
-    <div className="flex w-[300px] flex-col gap-4 bg-background p-4 text-foreground">
-      <header className="flex h-6 items-center justify-between">
+    <div className="flex w-[320px] flex-col bg-window text-foreground">
+      <header className="flex h-11 items-center justify-between px-4">
         <OpenShowcaseWordmark className="h-[14px] w-auto" />
-        {state.active && (
-          <span className="flex items-center gap-1.5 rounded-full bg-destructive/10 px-2 py-0.5 text-2xs font-semibold tracking-wide text-destructive">
-            <span className="relative flex size-1.5">
-              <span className="absolute inset-0 animate-ping rounded-full bg-destructive opacity-60 motion-reduce:hidden" />
-              <span className="relative size-1.5 rounded-full bg-destructive" />
-            </span>
-            REC
-          </span>
-        )}
+        {session.active && <ElapsedChip recordingId={session.recordingId} />}
       </header>
 
-      {state.active ? (
-        <div className="flex flex-col gap-3 animate-in fade-in-0 duration-200">
-          <div className="flex items-center gap-3 rounded-xl bg-muted px-3 py-3">
-            <span className="flex size-9 items-center justify-center rounded-lg bg-background text-foreground shadow-card">
-              <MousePointerClick className="size-4" />
-            </span>
-            <div className="flex flex-col">
-              <span className="text-ui font-semibold tabular-nums">
-                {state.clickCount ?? 0}{" "}
-                {state.clickCount === 1 ? "step" : "steps"}
-              </span>
-              <span className="text-2xs text-muted-foreground">
-                Every click becomes a step
-              </span>
-            </div>
-          </div>
-          <Button
-            className="h-10 w-full gap-2 bg-foreground text-background hover:bg-foreground/85"
-            onClick={() => send("stopRecording")}
-          >
-            <Square className="size-3 fill-current" /> Stop & edit
-          </Button>
-        </div>
-      ) : (
-        <div className="flex flex-col gap-3 animate-in fade-in-0 duration-200">
-          <p className="text-ui leading-relaxed text-muted-foreground">
-            Use this tab normally. Clicks become steps, scrolling and typing
-            become short clips — the editor opens when you stop.
-          </p>
-          <Button className="h-10 w-full gap-2" onClick={startRecording}>
-            <Circle className="size-3 fill-destructive text-destructive" />{" "}
-            Record this tab
-          </Button>
-          {hasFinishedRecording && (
-            <Button
-              variant="ghost"
-              className="h-9 w-full justify-between text-xs text-muted-foreground"
-              onClick={openEditor}
-            >
-              Open last recording
-              <ArrowUpRight className="size-3.5" />
-            </Button>
-          )}
-        </div>
-      )}
+      <main className="flex flex-col gap-3 px-3 pb-3">
+        {session.active ? (
+          <RecordingView
+            tabId={session.tabId}
+            activeTabId={activeTab?.id}
+            clickCount={session.clickCount ?? 0}
+            onStop={() => send("stopRecording")}
+          />
+        ) : (
+          <IdleView
+            tab={activeTab}
+            onStart={startRecording}
+            recent={
+              <RecentRecordings recordings={recent} onOpen={openEditor} />
+            }
+          />
+        )}
+      </main>
 
-      <footer className="-mx-4 -mb-4 flex items-center justify-between border-t border-border/60 px-4 py-2.5">
+      <footer className="flex items-center justify-between border-t border-border/60 bg-background px-4 py-2.5">
         <span className="text-2xs text-muted-foreground">
           Open source · self-hosted
         </span>
@@ -117,4 +87,130 @@ function App() {
   );
 }
 
+function IdleView({
+  tab,
+  onStart,
+  recent,
+}: {
+  tab: ReturnType<typeof useActiveTab>;
+  onStart: () => void;
+  recent: React.ReactNode;
+}) {
+  const loading = tab === undefined;
+  const recordable = isRecordableUrl(tab?.url ?? undefined);
+
+  return (
+    <div className="flex flex-col gap-3 animate-in fade-in-0 slide-in-from-bottom-1 duration-200 ease-(--ease-out-strong)">
+      <div className="flex flex-col gap-2 rounded-2xl bg-background p-2 shadow-card">
+        <TabCard tab={tab} className="shadow-none" />
+        {!loading && !recordable ? (
+          <p className="flex items-start gap-2 rounded-lg bg-muted px-2.5 py-2 text-2xs leading-relaxed text-muted-foreground">
+            <TriangleAlert className="mt-px size-3.5 shrink-0" />
+            Chrome doesn't let extensions record this page. Open a website to
+            start.
+          </p>
+        ) : (
+          <p className="flex items-start gap-2 px-2.5 py-1 text-2xs leading-relaxed text-muted-foreground">
+            <MousePointerClick className="mt-0.5 size-3.5 shrink-0" />
+            Clicks become steps. Scrolling and typing become short clips.
+          </p>
+        )}
+        <Button
+          size="lg"
+          variant={recordable || loading ? "default" : "secondary"}
+          className="h-10 w-full gap-2 rounded-xl text-ui font-semibold tracking-[-0.005em] shadow-card transition-[background-color,scale] duration-150 ease-(--ease-out-strong) hover:bg-primary/90 active:scale-[0.985] disabled:shadow-none"
+          disabled={loading || !recordable}
+          onClick={onStart}
+        >
+          <RecordGlyph />
+          Record this tab
+        </Button>
+      </div>
+      {recent}
+    </div>
+  );
+}
+
+function RecordingView({
+  tabId,
+  activeTabId,
+  clickCount,
+  onStop,
+}: {
+  tabId: number | undefined;
+  activeTabId: number | undefined;
+  clickCount: number;
+  onStop: () => void;
+}) {
+  const tab = useTab(tabId);
+  const elsewhere =
+    tab?.id != null && activeTabId != null && tab.id !== activeTabId;
+
+  async function goToTab() {
+    if (tab?.id == null) return;
+    await browser.tabs.update(tab.id, { active: true });
+    if (tab.windowId != null) {
+      await browser.windows.update(tab.windowId, { focused: true });
+    }
+    window.close();
+  }
+
+  return (
+    <div className="flex flex-col gap-3 animate-in fade-in-0 slide-in-from-bottom-1 duration-200 ease-(--ease-out-strong)">
+      <div className="flex flex-col gap-2 rounded-2xl bg-background p-2 shadow-card">
+        <TabCard
+          tab={tab}
+          recording
+          className="shadow-none"
+          trailing={
+            elsewhere && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label="Go to the recorded tab"
+                onClick={goToTab}
+              >
+                <ArrowUpRight />
+              </Button>
+            )
+          }
+        />
+        <div className="flex items-center justify-between rounded-lg bg-muted px-3 py-2">
+          <span className="flex items-center gap-2 text-2xs text-muted-foreground">
+            <MousePointerClick className="size-3.5" />
+            Steps captured
+          </span>
+          <span
+            key={clickCount}
+            className="text-ui font-semibold tabular-nums animate-in fade-in-0 zoom-in-90 duration-200"
+          >
+            {clickCount}
+          </span>
+        </div>
+        <Button
+          size="lg"
+          className="h-10 w-full gap-2 rounded-xl bg-foreground text-ui font-semibold tracking-[-0.005em] text-background shadow-card transition-[background-color,scale] duration-150 ease-(--ease-out-strong) hover:bg-foreground/85 active:scale-[0.985]"
+          onClick={onStop}
+        >
+          <Square className="size-3 fill-current" /> Stop & edit
+        </Button>
+      </div>
+      <p className="px-1 text-center text-2xs text-muted-foreground">
+        The editor opens as soon as you stop.
+      </p>
+    </div>
+  );
+}
+
+function ElapsedChip({ recordingId }: { recordingId: string | undefined }) {
+  const start = useRecordingStart(recordingId);
+  const now = useNow(true);
+  return (
+    <span className="flex items-center gap-1.5 rounded-full bg-destructive/10 py-0.5 pr-2 pl-1.5 text-2xs font-semibold text-destructive tabular-nums">
+      <RecDot className="size-1.5" />
+      {start == null ? "REC" : formatElapsed(now - start)}
+    </span>
+  );
+}
+
 export default App;
diff --git a/apps/extension/entrypoints/popup/components/RecDot.tsx b/apps/extension/entrypoints/popup/components/RecDot.tsx
new file mode 100644
index 0000000..2f516e1
--- /dev/null
+++ b/apps/extension/entrypoints/popup/components/RecDot.tsx
@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils";
+
+export function RecDot({ className }: { className?: string }) {
+  return (
+    <span className={cn("relative flex size-2 shrink-0", className)}>
+      <span className="absolute inset-0 animate-ping rounded-full bg-destructive opacity-60 motion-reduce:hidden" />
+      <span className="relative size-full rounded-full bg-destructive" />
+    </span>
+  );
+}
diff --git a/apps/extension/entrypoints/popup/components/RecentRecordings.tsx b/apps/extension/entrypoints/popup/components/RecentRecordings.tsx
new file mode 100644
index 0000000..e17f19f
--- /dev/null
+++ b/apps/extension/entrypoints/popup/components/RecentRecordings.tsx
@@ -0,0 +1,47 @@
+import { ChevronRight, Film } from "lucide-react";
+import { displayHost, formatElapsed, formatRelativeTime } from "../core/format";
+import type { RecentRecording } from "../hooks/use-popup-data";
+
+export function RecentRecordings({
+  recordings,
+  onOpen,
+}: {
+  recordings: RecentRecording[];
+  onOpen: (id: string) => void;
+}) {
+  if (recordings.length === 0) return null;
+  const now = Date.now();
+  return (
+    <section className="flex flex-col gap-1">
+      <h2 className="px-1 text-2xs font-medium text-muted-foreground">
+        Recent recordings
+      </h2>
+      <ul className="-mx-1 flex flex-col">
+        {recordings.map((recording) => (
+          <li key={recording.id}>
+            <button
+              type="button"
+              onClick={() => onOpen(recording.id)}
+              className="group flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left outline-none transition-colors hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50"
+            >
+              <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-background group-hover:text-foreground">
+                <Film className="size-3.5" />
+              </span>
+              <span className="flex min-w-0 flex-1 flex-col">
+                <span className="truncate text-xs font-medium">
+                  {displayHost(recording.pageUrl) || "Recording"}
+                </span>
+                <span className="text-2xs text-muted-foreground tabular-nums">
+                  {formatRelativeTime(recording.createdAt, now)}
+                  {recording.durationSec != null &&
+                    ` · ${formatElapsed(recording.durationSec * 1000)}`}
+                </span>
+              </span>
+              <ChevronRight className="size-3.5 text-muted-foreground opacity-0 transition-[opacity,translate] duration-150 ease-(--ease-out-strong) group-hover:translate-x-0.5 group-hover:opacity-100" />
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/apps/extension/entrypoints/popup/components/RecordGlyph.tsx b/apps/extension/entrypoints/popup/components/RecordGlyph.tsx
new file mode 100644
index 0000000..5380215
--- /dev/null
+++ b/apps/extension/entrypoints/popup/components/RecordGlyph.tsx
@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * Record mark: a dot with a ripple that keeps expanding into the ring, drawn in
+ * `currentColor` so it follows the button. Static under `prefers-reduced-motion`.
+ */
+export function RecordGlyph({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className={cn("size-4 shrink-0 overflow-visible", className)}
+    >
+      <circle
+        cx="8"
+        cy="8"
+        r="6.75"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        opacity="0.3"
+      />
+      <circle
+        cx="8"
+        cy="8"
+        r="6.75"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        className="record-ripple"
+      />
+      <circle
+        cx="8"
+        cy="8"
+        r="3.5"
+        fill="currentColor"
+        className="record-dot"
+      />
+    </svg>
+  );
+}
diff --git a/apps/extension/entrypoints/popup/components/TabCard.tsx b/apps/extension/entrypoints/popup/components/TabCard.tsx
new file mode 100644
index 0000000..d4dd8ae
--- /dev/null
+++ b/apps/extension/entrypoints/popup/components/TabCard.tsx
@@ -0,0 +1,71 @@
+import { Globe } from "lucide-react";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { displayHost } from "../core/format";
+import type { TabInfo } from "../hooks/use-popup-data";
+
+/** The page that is (or would be) recorded: favicon, title and host. */
+export function TabCard({
+  tab,
+  recording = false,
+  trailing,
+  className,
+}: {
+  tab: TabInfo | null | undefined;
+  recording?: boolean;
+  trailing?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 items-center gap-3 rounded-xl bg-card p-2.5 shadow-card",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "relative flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted",
+          recording &&
+            "ring-2 ring-destructive/70 ring-offset-2 ring-offset-card",
+        )}
+      >
+        <Favicon src={tab?.favIconUrl} />
+      </span>
+      <div className="flex min-w-0 flex-1 flex-col">
+        {tab === undefined ? (
+          <>
+            <span className="h-3.5 w-3/4 animate-pulse rounded bg-muted" />
+            <span className="mt-1.5 h-3 w-1/3 animate-pulse rounded bg-muted" />
+          </>
+        ) : (
+          <>
+            <span className="truncate text-ui font-medium">
+              {tab?.title || "Untitled page"}
+            </span>
+            <span className="truncate text-2xs text-muted-foreground">
+              {displayHost(tab?.url) || "No page"}
+            </span>
+          </>
+        )}
+      </div>
+      {trailing}
+    </div>
+  );
+}
+
+function Favicon({ src }: { src: string | undefined }) {
+  const [failed, setFailed] = useState(false);
+  // chrome:// favicons don't load from an extension page.
+  if (!src || failed || !/^(https?|data):/.test(src)) {
+    return <Globe className="size-4 text-muted-foreground" />;
+  }
+  return (
+    <img
+      src={src}
+      alt=""
+      className="size-4 rounded-[3px]"
+      onError={() => setFailed(true)}
+    />
+  );
+}
diff --git a/apps/extension/entrypoints/popup/core/__test__/unit/format.test.ts b/apps/extension/entrypoints/popup/core/__test__/unit/format.test.ts
new file mode 100644
index 0000000..586a004
--- /dev/null
+++ b/apps/extension/entrypoints/popup/core/__test__/unit/format.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import {
+  displayHost,
+  formatElapsed,
+  formatRelativeTime,
+  isRecordableUrl,
+} from "../../format";
+
+describe("isRecordableUrl", () => {
+  it("accepts regular web pages", () => {
+    expect(isRecordableUrl("https://app.example.com/dashboard")).toBe(true);
+    expect(isRecordableUrl("http://localhost:3000/")).toBe(true);
+  });
+
+  it("rejects browser, extension and Web Store pages", () => {
+    expect(isRecordableUrl("chrome://extensions/")).toBe(false);
+    expect(isRecordableUrl("chrome-extension://abc/editor.html")).toBe(false);
+    expect(isRecordableUrl("https://chromewebstore.google.com/detail/x")).toBe(
+      false,
+    );
+    expect(isRecordableUrl("https://chrome.google.com/webstore/detail/x")).toBe(
+      false,
+    );
+  });
+
+  it("rejects missing or malformed URLs", () => {
+    expect(isRecordableUrl(undefined)).toBe(false);
+    expect(isRecordableUrl("not a url")).toBe(false);
+  });
+});
+
+describe("displayHost", () => {
+  it("strips www and keeps the port-less hostname", () => {
+    expect(displayHost("https://www.example.com/a?b")).toBe("example.com");
+    expect(displayHost("http://localhost:3000/")).toBe("localhost");
+  });
+
+  it("falls back to the raw value", () => {
+    expect(displayHost("nope")).toBe("nope");
+    expect(displayHost(undefined)).toBe("");
+  });
+});
+
+describe("formatElapsed", () => {
+  it("formats minutes and seconds", () => {
+    expect(formatElapsed(0)).toBe("0:00");
+    expect(formatElapsed(65_900)).toBe("1:05");
+  });
+
+  it("adds hours past an hour and clamps negatives", () => {
+    expect(formatElapsed(3_723_000)).toBe("1:02:03");
+    expect(formatElapsed(-5)).toBe("0:00");
+  });
+});
+
+describe("formatRelativeTime", () => {
+  const now = 1_000_000_000_000;
+
+  it("collapses the last minute into 'just now'", () => {
+    expect(formatRelativeTime(now - 30_000, now)).toBe("just now");
+  });
+
+  it("uses minutes, hours and days", () => {
+    expect(formatRelativeTime(now - 5 * 60_000, now)).toBe("5 minutes ago");
+    expect(formatRelativeTime(now - 3 * 3_600_000, now)).toBe("3 hours ago");
+    expect(formatRelativeTime(now - 26 * 3_600_000, now)).toBe("yesterday");
+  });
+});
diff --git a/apps/extension/entrypoints/popup/core/format.ts b/apps/extension/entrypoints/popup/core/format.ts
new file mode 100644
index 0000000..accefd4
--- /dev/null
+++ b/apps/extension/entrypoints/popup/core/format.ts
@@ -0,0 +1,52 @@
+/**
+ * Chrome never lets an extension capture or inject into browser UI, other extensions
+ * or the Web Store. Recording there fails, so the popup says so up front.
+ */
+export function isRecordableUrl(url: string | undefined): boolean {
+  if (!url) return false;
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return false;
+  }
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return false;
+  const isWebStore =
+    parsed.hostname === "chromewebstore.google.com" ||
+    (parsed.hostname === "chrome.google.com" &&
+      parsed.pathname.startsWith("/webstore"));
+  return !isWebStore;
+}
+
+/** Hostname without `www.`, or the raw URL if it doesn't parse. */
+export function displayHost(url: string | undefined): string {
+  if (!url) return "";
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+/** Elapsed recording time: `m:ss`, or `h:mm:ss` past an hour. */
+export function formatElapsed(ms: number): string {
+  const total = Math.floor(Math.max(0, ms) / 1000);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
+}
+
+const relative = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+/** `just now`, `5 min ago`, `yesterday`… — coarse on purpose, it labels a list. */
+export function formatRelativeTime(then: number, now: number): string {
+  const seconds = Math.round((then - now) / 1000);
+  if (Math.abs(seconds) < 60) return "just now";
+  const minutes = Math.round(seconds / 60);
+  if (Math.abs(minutes) < 60) return relative.format(minutes, "minute");
+  const hours = Math.round(minutes / 60);
+  if (Math.abs(hours) < 24) return relative.format(hours, "hour");
+  return relative.format(Math.round(hours / 24), "day");
+}
diff --git a/apps/extension/entrypoints/popup/hooks/use-popup-data.ts b/apps/extension/entrypoints/popup/hooks/use-popup-data.ts
new file mode 100644
index 0000000..d216246
--- /dev/null
+++ b/apps/extension/entrypoints/popup/hooks/use-popup-data.ts
@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+import { browser } from "wxt/browser";
+import {
+  getMarkersByRecording,
+  getRecording,
+  listRecentRecordings,
+} from "@/lib/db";
+import {
+  defaultRecordingSessionState,
+  type RecordingSessionState,
+} from "@/lib/messaging";
+import { recordingSession } from "@/lib/recording-storage";
+
+export interface TabInfo {
+  id?: number;
+  windowId?: number;
+  title?: string;
+  url?: string;
+  favIconUrl?: string;
+}
+
+export interface RecentRecording {
+  id: string;
+  createdAt: number;
+  durationSec: number | null;
+  pageUrl?: string;
+}
+
+export function useRecordingSession(): RecordingSessionState {
+  const [state, setState] = useState<RecordingSessionState>(
+    defaultRecordingSessionState,
+  );
+  useEffect(() => {
+    recordingSession.getValue().then(setState);
+    return recordingSession.watch((next) => setState(next));
+  }, []);
+  return state;
+}
+
+/** The tab the popup would record: the active tab of the window it was opened from. */
+export function useActiveTab(): TabInfo | null | undefined {
+  const [tab, setTab] = useState<TabInfo | null>();
+  useEffect(() => {
+    browser.tabs
+      .query({ active: true, currentWindow: true })
+      .then(([active]) => setTab(active ?? null))
+      .catch(() => setTab(null));
+  }, []);
+  return tab;
+}
+
+export function useTab(tabId: number | undefined): TabInfo | null {
+  const [tab, setTab] = useState<TabInfo | null>(null);
+  useEffect(() => {
+    if (tabId == null) return setTab(null);
+    browser.tabs
+      .get(tabId)
+      .then(setTab)
+      .catch(() => setTab(null));
+  }, [tabId]);
+  return tab;
+}
+
+/** Wall-clock time the recording started, for the live timer. */
+export function useRecordingStart(recordingId: string | undefined) {
+  const [start, setStart] = useState<number | null>(null);
+  useEffect(() => {
+    if (!recordingId) return setStart(null);
+    getRecording(recordingId)
+      .then((record) =>
+        setStart(record?.startedAt ?? record?.createdAt ?? null),
+      )
+      .catch(() => setStart(null));
+  }, [recordingId]);
+  return start;
+}
+
+export function useNow(enabled: boolean, intervalMs = 1000): number {
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    if (!enabled) return;
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), intervalMs);
+    return () => clearInterval(id);
+  }, [enabled, intervalMs]);
+  return now;
+}
+
+export function useRecentRecordings(limit: number): RecentRecording[] {
+  const [recent, setRecent] = useState<RecentRecording[]>([]);
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const records = await listRecentRecordings(limit);
+      // Recordings don't store where they were made; the first marker's page does.
+      const withPages = await Promise.all(
+        records.map(async (record) => {
+          const [first] = await getMarkersByRecording(record.id);
+          return {
+            id: record.id,
+            createdAt: record.createdAt,
+            durationSec: record.durationSec,
+            pageUrl: first?.pageUrl,
+          };
+        }),
+      );
+      if (!cancelled) setRecent(withPages);
+    })().catch((error) =>
+      console.error("[openshowcase:popup] failed to list recordings", error),
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [limit]);
+  return recent;
+}
diff --git a/apps/extension/entrypoints/popup/style.css b/apps/extension/entrypoints/popup/style.css
index 20e9158..dfddb05 100644
--- a/apps/extension/entrypoints/popup/style.css
+++ b/apps/extension/entrypoints/popup/style.css
@@ -1 +1,47 @@
 @import "../../assets/theme.css";
+
+/* Record glyph (components/RecordGlyph.tsx): a ripple grows from the dot into the ring
+   and fades, while the dot breathes slightly in step with it. */
+.record-ripple,
+.record-dot {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.record-ripple {
+  opacity: 0;
+  animation: record-ripple 2s var(--ease-out-strong) infinite;
+}
+
+.record-dot {
+  animation: record-dot 2s var(--ease-in-out-strong) infinite;
+}
+
+@keyframes record-ripple {
+  0% {
+    transform: scale(0.5);
+    opacity: 0.7;
+  }
+  70%,
+  100% {
+    transform: scale(1.25);
+    opacity: 0;
+  }
+}
+
+@keyframes record-dot {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  15% {
+    transform: scale(0.85);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .record-ripple,
+  .record-dot {
+    animation: none;
+  }
+}
diff --git a/apps/extension/lib/db.ts b/apps/extension/lib/db.ts
index 06d76c7..707f66e 100644
--- a/apps/extension/lib/db.ts
+++ b/apps/extension/lib/db.ts
@@ -141,3 +141,15 @@ export async function getMarkersByRecording(
   );
   return markers.sort((a, b) => a.capturedAt - b.capturedAt);
 }
+
+/** Finished recordings, newest first. */
+export async function listRecentRecordings(
+  limit: number,
+): Promise<RecordingRecord[]> {
+  const db = await getDb();
+  const all = await db.getAll("recordings");
+  return all
+    .filter((record) => record.status === "complete")
+    .sort((a, b) => b.createdAt - a.createdAt)
+    .slice(0, limit);
+}