diff --git a/packages/extension/e2e.mjs b/packages/extension/e2e.mjs
index 077024e..6f7d373 100644
--- a/packages/extension/e2e.mjs
+++ b/packages/extension/e2e.mjs
@@ -86,6 +86,7 @@
 
   // --- target page: pick an element and submit a note ---
   const page = await context.newPage();
+  await context.grantPermissions(["clipboard-read", "clipboard-write"], { origin: `http://localhost:${PAGE_PORT}` });
   page.on("console", (msg) => {
     if (msg.type() === "error") console.log("[page error]", msg.text());
   });
@@ -130,6 +131,15 @@
     report.element?.selector?.includes("buggy-button") &&
     report.attachments?.length > 0;
 
+  // the share link must land in the clipboard automatically after submit
+  let clipboardOk = false;
+  try {
+    const clipboard = await page.evaluate(() => navigator.clipboard.readText());
+    clipboardOk = clipboard === `${SERVER}/r/${items[0].share_token}`;
+  } catch (error) {
+    console.log("[clipboard read failed]", String(error).slice(0, 120));
+  }
+
   // --- recorder: start, click the button, type, stop → recording report ---
   await worker.evaluate(() => self.__lttToggleRecorder());
   await page.waitForTimeout(800);
@@ -185,10 +195,31 @@
     steps.some((s) => s.type === "input" && s.data?.value === "Hello recorder") &&
     steps.some((s) => s.screenshot_attachment_id != null);
 
-  const ok = noteOk && recorderOk;
+  // --- popup: mode buttons, latest report, delete from the popup ---
+  const popup = await context.newPage();
+  await popup.goto(`chrome-extension://${extensionId}/src/popup/popup.html`);
+  await popup.waitForSelector("text=Element note", { timeout: 10000 });
+  const hasRecord = await popup.locator("text=Record steps").count();
+  const latestTitle = await popup.locator(".popup-report-title").textContent();
+  const latestOk = Boolean(latestTitle && latestTitle.length > 0);
+  // two-step delete: arm then confirm
+  await popup.click(".popup-mini-danger");
+  await popup.click(".popup-mini-danger");
+  await popup.waitForTimeout(1500);
+  await popup.close();
+  const itemsAfterDelete = (await api(`/api/projects/${project.id}/reports`, {
+    headers: { Authorization: `Bearer ${login.token}` },
+  }));
+  const deleteOk = (itemsAfterDelete.items ?? itemsAfterDelete).length === all.length - 1;
+  const popupOk = hasRecord > 0 && latestOk && deleteOk;
+  console.log("popup:", JSON.stringify({ hasRecord: hasRecord > 0, latestOk, deleteOk }));
+
+  const ok = noteOk && recorderOk && clipboardOk && popupOk;
   console.log("background log:", JSON.stringify(await worker.evaluate(() => self.__lttDebug()), null, 1));
   console.log(noteOk ? "note flow OK" : "note flow MISMATCH");
   console.log(recorderOk ? "recorder flow OK" : "recorder flow MISMATCH");
+  console.log(clipboardOk ? "clipboard link OK" : "clipboard link MISMATCH");
+  console.log(popupOk ? "popup OK" : "popup MISMATCH");
   console.log(ok ? "E2E OK" : "E2E FAILED");
   process.exitCode = ok ? 0 : 1;
 } catch (error) {
diff --git a/packages/extension/manifest.template.json b/packages/extension/manifest.template.json
index 38eba83..ac24029 100644
--- a/packages/extension/manifest.template.json
+++ b/packages/extension/manifest.template.json
@@ -6,7 +6,8 @@
   "permissions": ["activeTab", "scripting", "storage", "tabs"],
   "host_permissions": ["<all_urls>"],
   "action": {
-    "default_title": "Capture a bug report"
+    "default_title": "Live Testing Tool",
+    "default_popup": "src/popup/popup.html"
   },
   "web_accessible_resources": [
     {
diff --git a/packages/extension/scripts/build.mjs b/packages/extension/scripts/build.mjs
index a15275b..1973b70 100644
--- a/packages/extension/scripts/build.mjs
+++ b/packages/extension/scripts/build.mjs
@@ -22,7 +22,7 @@
 
 // order matters: every pass writes assets/style.css (cssCodeSplit:false), so
 // the content pass — whose stylesheet is the union of all styles — runs last
-const entries = ["background", "options", "content"];
+const entries = ["background", "options", "popup", "content"];
 
 function run(entry) {
   return new Promise((resolve, reject) => {
diff --git a/packages/extension/src/background/index.ts b/packages/extension/src/background/index.ts
index f6f12c0..d9dd059 100644
--- a/packages/extension/src/background/index.ts
+++ b/packages/extension/src/background/index.ts
@@ -1,7 +1,7 @@
 import browser from "webextension-polyfill";
 import type { Runtime } from "webextension-polyfill";
 import { submitNoteReport, submitRecordingReport } from "./api";
-import { getSettings, saveSettings, login, logout, getHttpClient } from "./settings";
+import { getSettings, saveSettings, login, logout, getHttpClient, panelBase } from "./settings";
 import type {
   BackgroundResponse,
   RecordEvent,
@@ -209,6 +209,32 @@
   return state;
 }
 
+async function toggleRecorder(tabId: number): Promise<RecorderState> {
+  const buffer = recorder(tabId);
+  if (buffer.recording) {
+    const state = await recorderStop(tabId);
+    await browser.tabs.sendMessage(tabId, { type: "recorder_state", recording: false }).catch(() => {});
+    return state;
+  }
+  return startRecorder(tabId);
+}
+
+/** Latest report of the default project + its project share token (for the panel link). */
+async function latestReport(): Promise<{
+  report: { title: string; type: string; status: string; created_at: string; share_token: string } | null;
+  project_token: string | null;
+} | null> {
+  const settings = await getSettings();
+  if (!settings.token || !settings.defaultProjectId) return null;
+  const client = await getHttpClient();
+  const projects = await client.get<{ id: string; share_token: string }[]>("/api/projects");
+  const project = projects.find((p) => p.id === settings.defaultProjectId);
+  const list = await client.get<{ items: { title: string; type: string; status: string; created_at: string; share_token: string }[] }>(
+    `/api/projects/${settings.defaultProjectId}/reports?limit=1`
+  );
+  return { report: list.items[0] ?? null, project_token: project?.share_token ?? null };
+}
+
 // ---------- wiring ----------
 
 browser.action.onClicked.addListener(async (tab) => {
@@ -293,6 +319,49 @@
     case "ping":
       return { ok: true, data: "pong" };
 
+    // popup actions: the popup has no tab context, resolve the active tab here
+    case "start_picker": {
+      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+      if (tab?.id == null) return { ok: false, error: "No active tab" };
+      await startPicker(tab.id).catch((error) => console.error("[ltt] failed to start picker:", error));
+      return { ok: true };
+    }
+
+    case "toggle_recorder": {
+      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+      if (tab?.id == null) return { ok: false, error: "No active tab" };
+      try {
+        const state = await toggleRecorder(tab.id);
+        return { ok: true, data: state };
+      } catch (error) {
+        return { ok: false, error: error instanceof Error ? error.message : String(error) };
+      }
+    }
+
+    case "latest_report": {
+      try {
+        return { ok: true, data: await latestReport() };
+      } catch (error) {
+        return { ok: false, error: error instanceof Error ? error.message : String(error) };
+      }
+    }
+
+    case "delete_report": {
+      try {
+        const client = await getHttpClient();
+        await client.del(`/api/reports/${msg.token as string}`);
+        return { ok: true };
+      } catch (error) {
+        return { ok: false, error: error instanceof Error ? error.message : String(error) };
+      }
+    }
+
+    case "open_panel": {
+      const settings = await getSettings();
+      await browser.tabs.create({ url: panelBase(settings) });
+      return { ok: true };
+    }
+
     case "capture": {
       debugLog("capture requested");
       try {
diff --git a/packages/extension/src/background/settings.ts b/packages/extension/src/background/settings.ts
index 3390ed1..96facd9 100644
--- a/packages/extension/src/background/settings.ts
+++ b/packages/extension/src/background/settings.ts
@@ -4,6 +4,8 @@
 /** Server settings persisted in storage.local. */
 export interface Settings {
   serverUrl: string;
+  /** web panel base URL; falls back to serverUrl when unset (same origin in prod) */
+  panelUrl: string | null;
   token: string | null;
   tokenExpiresAt: string | null;
   defaultProjectId: string | null;
@@ -12,6 +14,7 @@
 
 const DEFAULTS: Settings = {
   serverUrl: "http://localhost:8001",
+  panelUrl: null,
   token: null,
   tokenExpiresAt: null,
   defaultProjectId: null,
@@ -70,4 +73,9 @@
 export async function getHttpClient(): Promise<HttpClient> {
   const settings = await getSettings();
   return createHttpClient({ baseUrl: settings.serverUrl, token: settings.token });
+}
+
+/** Base URL of the web panel for share links and the "open panel" shortcut. */
+export function panelBase(settings: Settings): string {
+  return (settings.panelUrl ?? settings.serverUrl).replace(/\/+$/, "");
 }
\ No newline at end of file
diff --git a/packages/extension/src/content/overlay/App.vue b/packages/extension/src/content/overlay/App.vue
index 5332acc..2be4f68 100644
--- a/packages/extension/src/content/overlay/App.vue
+++ b/packages/extension/src/content/overlay/App.vue
@@ -14,6 +14,9 @@
 /** screenshot chosen in the region selector, passed to the composer */
 const screenshotDataUrl = ref<string | null>(null);
 const composerOpen = ref(false);
+/** brief confirmation after the report link was copied */
+const linkCopied = ref(false);
+let linkCopiedTimer: number | null = null;
 
 function onPick(element: ElementContext) {
   pickedElement.value = element;
@@ -24,6 +27,44 @@
   composerOpen.value = true;
 }
 
+async function onSubmitted(reportToken: string) {
+  closeComposer();
+  await copyReportLink(reportToken);
+}
+
+/**
+ * Share links are copied automatically so they can go straight into the
+ * bug tracker. The page is usually focused (the user just clicked around),
+ * but a hidden textarea fallback covers the unfocused case.
+ */
+async function copyReportLink(reportToken: string) {
+  try {
+    const settings = (await browser.runtime.sendMessage({ type: "settings_get" })) as {
+      ok: boolean;
+      data?: { serverUrl: string; panelUrl: string | null };
+    };
+    const base = (settings?.data?.panelUrl ?? settings?.data?.serverUrl ?? "").replace(/\/+$/, "");
+    const url = `${base}/r/${reportToken}`;
+    try {
+      await navigator.clipboard.writeText(url);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = url;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      textarea.remove();
+    }
+    linkCopied.value = true;
+    if (linkCopiedTimer) window.clearTimeout(linkCopiedTimer);
+    linkCopiedTimer = window.setTimeout(() => (linkCopied.value = false), 2500);
+  } catch (error) {
+    console.error("[ltt] failed to copy report link:", error);
+  }
+}
+
 function onRegionCancelled() {
   pickedElement.value = null;
   // keep the picker alive while recording so another element can be picked
@@ -73,7 +114,7 @@
       :element="pickedElement"
       :screenshot-data-url="screenshotDataUrl"
       @close="closeComposer"
-      @submitted="closeComposer"
+      @submitted="onSubmitted"
     />
     <RecorderBar
       v-if="state.recording && !composerOpen"
@@ -81,5 +122,27 @@
       @note="state.mode = 'picker'"
       @stop="stopRecorder"
     />
+
+    <div v-if="linkCopied" class="ltt-copied-toast">
+      <i class="ph ph-check-circle" /> Link copied to clipboard
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.ltt-copied-toast {
+  position: fixed;
+  left: 50%;
+  bottom: 32px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--color-surface, #1f2335);
+  border: 2px solid var(--color-success, #9ece6a);
+  color: var(--color-text, #c0caf5);
+  font-size: 13px;
+  z-index: 2;
+}
+</style>
\ No newline at end of file
diff --git a/packages/extension/src/options/Options.vue b/packages/extension/src/options/Options.vue
index 6fade5f..de7cbd9 100644
--- a/packages/extension/src/options/Options.vue
+++ b/packages/extension/src/options/Options.vue
@@ -5,6 +5,7 @@
 
 interface SettingsView {
   serverUrl: string;
+  panelUrl: string | null;
   token: string | null;
   user: { id: string; nickname: string; email: string } | null;
   defaultProjectId: string | null;
@@ -15,7 +16,7 @@
   name: string;
 }
 
-const settings = ref<SettingsView>({ serverUrl: "http://localhost:8001", token: null, user: null, defaultProjectId: null });
+const settings = ref<SettingsView>({ serverUrl: "http://localhost:8001", panelUrl: null, token: null, user: null, defaultProjectId: null });
 const projects = ref<ProjectView[]>([]);
 const email = ref("");
 const password = ref("");
@@ -24,6 +25,12 @@
 const busy = ref(false);
 
 /** GnSelect is a native <select>: a null modelValue matches no option and blanks it. */
+const panelUrl = computed({
+  get: () => settings.value.panelUrl ?? "",
+  set: (value: string) => {
+    settings.value = { ...settings.value, panelUrl: value.trim() || null };
+  },
+});
 const defaultProjectId = computed({
   get: () => settings.value.defaultProjectId ?? "",
   set: (value: string) => {
@@ -83,7 +90,13 @@
   busy.value = true;
   error.value = null;
   try {
-    await sendMessage({ type: "settings_save", patch: { serverUrl: settings.value.serverUrl.replace(/\/+$/, "") } });
+    await sendMessage({
+      type: "settings_save",
+      patch: {
+        serverUrl: settings.value.serverUrl.replace(/\/+$/, ""),
+        panelUrl: settings.value.panelUrl ? settings.value.panelUrl.replace(/\/+$/, "") : null,
+      },
+    });
     status.value = "Server URL saved";
   } catch (err) {
     error.value = err instanceof Error ? err.message : String(err);
@@ -113,6 +126,12 @@
     <GnCard class="options-card">
       <h2 class="options-card-title">Server</h2>
       <GnInput v-model="settings.serverUrl" label="Server URL" icon="ph-plugs" type="url" />
+      <GnInput
+        v-model="panelUrl"
+        label="Web panel URL (optional, defaults to the server URL)"
+        icon="ph-monitor"
+        type="url"
+      />
       <div class="options-actions">
         <GnButton variant="secondary" size="sm" icon="ph-floppy-disk" :disabled="busy" @click="saveServerUrl">
           Save server URL
diff --git a/packages/extension/src/popup/Popup.vue b/packages/extension/src/popup/Popup.vue
new file mode 100644
index 0000000..17807be
--- /dev/null
+++ b/packages/extension/src/popup/Popup.vue
@@ -0,0 +1,383 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import browser from "webextension-polyfill";
+import { GnButton } from "gnexus-ui-kit/vue";
+
+interface LatestReport {
+  title: string;
+  type: string;
+  status: string;
+  created_at: string;
+  share_token: string;
+}
+
+interface SettingsView {
+  serverUrl: string;
+  panelUrl: string | null;
+  token: string | null;
+  user: { nickname: string } | null;
+  defaultProjectId: string | null;
+}
+
+interface RecorderStateView {
+  recording: boolean;
+  stepCount: number;
+}
+
+const settings = ref<SettingsView | null>(null);
+const latest = ref<LatestReport | null>(null);
+const projectToken = ref<string | null>(null);
+const recorder = ref<RecorderStateView>({ recording: false, stepCount: 0 });
+const busy = ref(false);
+const error = ref<string | null>(null);
+/** two-step delete: first click arms the button, second deletes */
+const confirmingDelete = ref(false);
+
+async function sendMessage<T>(message: Record<string, unknown>): Promise<T> {
+  const response = (await browser.runtime.sendMessage(message)) as { ok: boolean; data?: T; error?: string };
+  if (!response?.ok) throw new Error(response?.error ?? "Request failed");
+  return response.data as T;
+}
+
+async function load() {
+  error.value = null;
+  try {
+    settings.value = await sendMessage<SettingsView>({ type: "settings_get" });
+    if (!settings.value.token || !settings.value.defaultProjectId) return;
+    const data = await sendMessage<{ report: LatestReport | null; project_token: string | null }>({
+      type: "latest_report",
+    });
+    latest.value = data?.report ?? null;
+    projectToken.value = data?.project_token ?? null;
+    recorder.value = await sendMessage<RecorderStateView>({ type: "recorder_state_request" });
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : String(err);
+  }
+}
+
+async function startNote() {
+  await sendMessage({ type: "start_picker" });
+  window.close();
+}
+
+async function toggleRecording() {
+  busy.value = true;
+  try {
+    recorder.value = await sendMessage<RecorderStateView>({ type: "toggle_recorder" });
+    window.close();
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : String(err);
+  } finally {
+    busy.value = false;
+  }
+}
+
+function reportUrl(report: LatestReport): string {
+  return `${panelBase()}/r/${report.share_token}`;
+}
+
+function panelHome(): string {
+  return projectToken.value ? `${panelBase()}/p/${projectToken.value}` : panelBase();
+}
+
+function panelBase(): string {
+  return (settings.value?.panelUrl ?? settings.value?.serverUrl ?? "").replace(/\/+$/, "");
+}
+
+async function open(url: string) {
+  await browser.tabs.create({ url });
+  window.close();
+}
+
+async function openOptions() {
+  await browser.runtime.sendMessage({ type: "open_options" });
+  window.close();
+}
+
+async function deleteLatest() {
+  if (!latest.value) return;
+  if (!confirmingDelete.value) {
+    confirmingDelete.value = true;
+    return;
+  }
+  busy.value = true;
+  try {
+    await sendMessage({ type: "delete_report", token: latest.value.share_token });
+    confirmingDelete.value = false;
+    await load();
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : String(err);
+  } finally {
+    busy.value = false;
+  }
+}
+
+const statusColor: Record<string, string> = {
+  open: "var(--ltt-warning, #e0af68)",
+  fixed: "var(--ltt-success, #9ece6a)",
+  wont_fix: "var(--ltt-text-dim, #787c99)",
+};
+
+onMounted(load);
+</script>
+
+<template>
+  <div class="popup">
+    <header class="popup-head">
+      <i class="ph ph-bug popup-logo" />
+      <span class="popup-title">Live Testing Tool</span>
+      <button type="button" class="popup-gear" title="Settings" @click="openOptions">
+        <i class="ph ph-gear" />
+      </button>
+    </header>
+
+    <!-- signed out -->
+    <div v-if="settings && !settings.token" class="popup-signin">
+      <i class="ph ph-sign-in" />
+      <span>Sign in to capture reports</span>
+      <GnButton variant="accent" size="sm" icon="ph-sign-in" @click="openOptions">Open settings</GnButton>
+    </div>
+
+    <template v-else>
+      <!-- mode choice -->
+      <div class="popup-actions">
+        <button type="button" class="popup-action" :disabled="busy" @click="startNote">
+          <i class="ph ph-crosshair" />
+          <span class="popup-action-label">Element note</span>
+          <span class="popup-action-hint">Pick an element, add a screenshot</span>
+        </button>
+        <button type="button" class="popup-action" :class="{ 'is-recording': recorder.recording }" :disabled="busy" @click="toggleRecording">
+          <i class="ph" :class="recorder.recording ? 'ph-stop' : 'ph-record'" />
+          <span class="popup-action-label">{{ recorder.recording ? `Stop recording (${recorder.stepCount})` : "Record steps" }}</span>
+          <span class="popup-action-hint">{{ recorder.recording ? "Finish and submit the track" : "Capture clicks and input as steps" }}</span>
+        </button>
+      </div>
+
+      <!-- latest report -->
+      <div class="popup-section">
+        <span class="popup-section-title">Last report</span>
+        <div v-if="latest" class="popup-report">
+          <a class="popup-report-title" :href="reportUrl(latest)" @click.prevent="open(reportUrl(latest))">{{ latest.title }}</a>
+          <div class="popup-report-meta">
+            <span class="popup-report-type">
+              <i class="ph" :class="latest.type === 'recording' ? 'ph-film-strip' : 'ph-crosshair'" />
+              {{ latest.type === "recording" ? "recording" : "note" }}
+            </span>
+            <span class="popup-report-status" :style="{ color: statusColor[latest.status] }">{{ latest.status }}</span>
+            <span class="popup-report-date">{{ new Date(latest.created_at).toLocaleDateString() }}</span>
+          </div>
+          <div class="popup-report-actions">
+            <button type="button" class="popup-mini" title="Open in web panel" @click="open(reportUrl(latest))">
+              <i class="ph ph-arrow-square-out" /> Open
+            </button>
+            <button
+              type="button"
+              class="popup-mini popup-mini-danger"
+              :class="{ 'is-armed': confirmingDelete }"
+              :title="confirmingDelete ? 'Click again to delete' : 'Delete report'"
+              @click="deleteLatest"
+            >
+              <i class="ph" :class="confirmingDelete ? 'ph-warning' : 'ph-trash'" />
+              {{ confirmingDelete ? "Delete?" : "Delete" }}
+            </button>
+          </div>
+        </div>
+        <div v-else class="popup-empty">No reports yet in this project</div>
+      </div>
+
+      <!-- web panel -->
+      <button type="button" class="popup-panel" @click="open(panelHome())">
+        <i class="ph ph-monitor" /> Open web panel
+        <i class="ph ph-arrow-up-right popup-panel-arrow" />
+      </button>
+    </template>
+
+    <p v-if="error" class="popup-error">
+      <i class="ph ph-warning-octagon" /> {{ error }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.popup {
+  width: 340px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--ltt-bg, #10121c);
+  color: var(--ltt-text, #c0caf5);
+}
+.popup-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.popup-logo {
+  font-size: 20px;
+  color: var(--ltt-accent, #7aa2f7);
+}
+.popup-title {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-right: auto;
+}
+.popup-gear {
+  border: none;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+}
+.popup-gear:hover {
+  opacity: 1;
+  color: var(--ltt-accent, #7aa2f7);
+}
+.popup-signin {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  opacity: 0.85;
+}
+.popup-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.popup-action {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 10px;
+  align-items: center;
+  text-align: left;
+  padding: 10px 12px;
+  border: 2px solid var(--ltt-border, #2f334d);
+  background: var(--ltt-surface, #1f2335);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.popup-action:hover {
+  border-color: var(--ltt-accent, #7aa2f7);
+}
+.popup-action > i {
+  grid-row: span 2;
+  font-size: 20px;
+  color: var(--ltt-accent, #7aa2f7);
+}
+.popup-action-label {
+  font-size: 13px;
+  font-weight: 700;
+}
+.popup-action-hint {
+  font-size: 11px;
+  opacity: 0.6;
+}
+.popup-action.is-recording {
+  border-color: var(--ltt-danger, #f7768e);
+}
+.popup-action.is-recording > i {
+  color: var(--ltt-danger, #f7768e);
+}
+.popup-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  border: 2px solid var(--ltt-border, #2f334d);
+  background: var(--ltt-surface, #1f2335);
+}
+.popup-section-title {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  opacity: 0.55;
+}
+.popup-report {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.popup-report-title {
+  color: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+.popup-report-title:hover {
+  color: var(--ltt-accent, #7aa2f7);
+}
+.popup-report-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 11px;
+  opacity: 0.75;
+}
+.popup-report-type i {
+  margin-right: 3px;
+}
+.popup-report-actions {
+  display: flex;
+  gap: 6px;
+}
+.popup-mini {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border: 1px solid var(--ltt-border, #2f334d);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.popup-mini:hover {
+  border-color: var(--ltt-accent, #7aa2f7);
+  color: var(--ltt-accent, #7aa2f7);
+}
+.popup-mini-danger:hover,
+.popup-mini-danger.is-armed {
+  border-color: var(--ltt-danger, #f7768e);
+  color: var(--ltt-danger, #f7768e);
+}
+.popup-report-empty,
+.popup-panel {
+  font-size: 12px;
+}
+.popup-panel {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 2px solid var(--ltt-border, #2f334d);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.popup-panel:hover {
+  border-color: var(--ltt-accent, #7aa2f7);
+  color: var(--ltt-accent, #7aa2f7);
+}
+.popup-panel-arrow {
+  margin-left: auto;
+}
+.popup-error {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  color: var(--ltt-danger, #f7768e);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+</style>
\ No newline at end of file
diff --git a/packages/extension/src/popup/main.ts b/packages/extension/src/popup/main.ts
new file mode 100644
index 0000000..8316521
--- /dev/null
+++ b/packages/extension/src/popup/main.ts
@@ -0,0 +1,9 @@
+// The popup is a plain extension page (like the options page): kit's global
+// CSS applies directly, font URLs resolve inside the extension bundle.
+import "gnexus-ui-kit/dist/css/kit.css";
+import "gnexus-ui-kit/dist/assets/fonts/phosphor-icons/src/css/icons.css";
+import { createApp } from "vue";
+import { GnexusUiVue } from "gnexus-ui-kit/vue";
+import Popup from "./Popup.vue";
+
+createApp(Popup).use(GnexusUiVue).mount("#app");
\ No newline at end of file
diff --git a/packages/extension/src/popup/popup.html b/packages/extension/src/popup/popup.html
new file mode 100644
index 0000000..883c1c4
--- /dev/null
+++ b/packages/extension/src/popup/popup.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Live Testing Tool</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/extension/vite.config.ts b/packages/extension/vite.config.ts
index d83a52c..5dad29e 100644
--- a/packages/extension/vite.config.ts
+++ b/packages/extension/vite.config.ts
@@ -9,13 +9,14 @@
 // One build pass per entry (LTT_ENTRY), driven by scripts/build.mjs:
 // Vite/Rollup cannot emit IIFE for a code-splitting (multi-entry) build, and
 // content scripts / MV3 service workers must be single self-contained files.
-const entryNames = ["background", "content", "options"] as const;
+const entryNames = ["background", "content", "options", "popup"] as const;
 type EntryName = (typeof entryNames)[number];
 
 const entryPaths: Record<EntryName, string> = {
   background: resolve(__dirname, "src/background/index.ts"),
   content: resolve(__dirname, "src/content/index.ts"),
   options: resolve(__dirname, "src/options/options.html"),
+  popup: resolve(__dirname, "src/popup/popup.html"),
 };
 
 // Build targets: --mode chrome | --mode firefox
@@ -61,9 +62,11 @@
           chunkFileNames: "assets/[name].js",
           assetFileNames: () => {
             // cssCodeSplit:false funnels each pass's CSS into one file; give the
-            // options page its own name so the content pass (which runs last and
-            // owns assets/style.css for the overlay) cannot overwrite it
-            return only === "options" ? "assets/options.css" : "assets/style.css";
+            // extension pages their own names so the content pass (which runs
+            // last and owns assets/style.css for the overlay) cannot overwrite them
+            if (only === "options") return "assets/options.css";
+            if (only === "popup") return "assets/popup.css";
+            return "assets/style.css";
           },
         },
       },