feat(ext/popup): Login detail view + coming-soon for other types

Rewrites item-detail.ts to dispatch on item.type: login gets the full
detail view (url, username, masked password + copy, TOTP with 30s
countdown, notes, group, autofill/edit/trash/back buttons). Non-login
types get a coming-soon placeholder; those grow full UIs in later slices.

Fixes Slice 4 review I1: the old autofill path sent a malformed
fill_credentials payload ({ username, password } — no id/capturedTab).
The new handler uses the (capturedTabId, capturedUrl) pair snapshotted
at popup-open and calls fill_credentials with { id, capturedTabId,
capturedUrl }, matching the SW's handler signature that enforces the
M5 + TOCTOU checks.

TOTP poll now calls get_totp on a 1s timer and renders the 30s countdown
bar against expires_at. @ts-nocheck removed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

extension/src/popup/components/item-detail.ts

@@ -1,8 +1,12 @@
-// @ts-nocheck — transitional: downstream files updated in Slice 6 (item-* rewrites) / Slice 4 (vitest setup) / Slice 5 (content + setup rewires)
+/// Typed-item detail view — dispatches on `item.type`. Slice 6 delivers
-/// Entry detail view — shows fields, TOTP countdown, copy/fill shortcuts.
+/// full Login parity; all other types show a "coming soon" placeholder.
+///
+/// Autofill uses the (capturedTabId, capturedUrl) pair snapshotted at
+/// popup-open (see PopupState + router/popup-only.ts#handleFillCredentials)
+/// so the SW can reject the fill if the tab navigated.
 
 import { getState, setState, sendMessage, navigate, escapeHtml } from '../popup';
-import type { ManifestEntry } from '../../shared/types';
+import type { Item, ItemId, ManifestEntry, LoginCore, TotpConfig } from '../../shared/types';
 
 let totpInterval: ReturnType<typeof setInterval> | null = null;
 
@@ -31,54 +35,63 @@ async function copyToClipboard(text: string): Promise<void> {
 
 export function renderItemDetail(app: HTMLElement): void {
   const state = getState();
-  const entry = state.selectedEntry;
+  const item = state.selectedItem;
-  const id = state.selectedId;
+  if (!item) {
-  if (!entry || !id) {
     navigate('list');
     return;
   }
 
   stopTotpTimer();
 
+  if (item.type === 'login') {
+    renderLogin(app, item);
+  } else {
+    renderComingSoon(app, item);
+  }
+}
+
+// --- Login detail ------------------------------------------------------
+
+function renderLogin(app: HTMLElement, item: Item): void {
+  const core = item.core as (LoginCore & { type: 'login' });
+  const hasTotp = core.totp !== undefined;
+
   let html = `
     <div class="detail-header">
-      <span class="detail-title">${escapeHtml(entry.name)}</span>
+      <span class="detail-title">${escapeHtml(item.title)}</span>
       <button class="btn" id="back-btn" style="font-size:11px;">esc</button>
     </div>
   `;
 
-  // URL
+  if (core.url) {
-  if (entry.url) {
     html += `
       <div class="field">
         <div class="label">url</div>
-        <div class="field-value">${escapeHtml(entry.url)}</div>
+        <div class="field-value"><a href="${escapeHtml(core.url)}" target="_blank" rel="noopener noreferrer" style="color:#58a6ff; text-decoration:none;">${escapeHtml(core.url)}</a></div>
       </div>
     `;
   }
 
-  // Username
+  if (core.username) {
-  if (entry.username) {
     html += `
       <div class="field">
         <div class="label">username</div>
-        <div class="field-value" id="username-val">${escapeHtml(entry.username)}</div>
+        <div class="field-value" id="username-val" style="cursor:pointer;" title="click to copy">${escapeHtml(core.username)}</div>
       </div>
     `;
   }
 
-  // Password (masked by default)
   html += `
     <div class="field">
       <div class="label">password</div>
-      <div class="field-value" id="password-val" style="cursor:pointer;">
+      <div class="field-value" id="password-val" style="cursor:pointer;" title="click to toggle">
         <span id="password-display">********</span>
+        <button class="btn" id="password-copy" style="font-size:10px; margin-left:8px; padding:2px 6px;">copy</button>
       </div>
     </div>
   `;
 
-  // TOTP
+  if (hasTotp) {
-  if (entry.totp_secret) {
     html += `
       <div class="field">
         <div class="label">totp</div>
@@ -88,42 +101,46 @@ export function renderItemDetail(app: HTMLElement): void {
     `;
   }
 
-  // Notes
+  if (item.notes) {
-  if (entry.notes) {
     html += `
       <div class="field">
         <div class="label">notes</div>
-        <div class="field-value">${escapeHtml(entry.notes)}</div>
+        <div class="field-value" style="white-space:pre-wrap;">${escapeHtml(item.notes)}</div>
       </div>
     `;
   }
 
-  // Group
+  if (item.group) {
-  if (entry.group) {
     html += `
       <div class="field">
         <div class="label">group</div>
-        <div class="field-value">${escapeHtml(entry.group)}</div>
+        <div class="field-value">${escapeHtml(item.group)}</div>
       </div>
     `;
   }
 
-  // Metadata
   html += `
     <div class="field">
-      <div class="muted">updated ${escapeHtml(entry.updated_at)}</div>
+      <div class="muted">modified ${escapeHtml(new Date(item.modified * 1000).toISOString())}</div>
+    </div>
+  `;
+
+  html += `
+    <div class="form-actions" style="padding:8px 12px;">
+      <button class="btn btn-primary" id="fill-btn">autofill</button>
+      <button class="btn" id="edit-btn">edit</button>
+      <button class="btn btn-danger" id="trash-btn" style="margin-left:auto;">trash</button>
     </div>
   `;
 
-  // Key hints
   html += `
     <div class="keyhints">
       <span><kbd>c</kbd> copy user</span>
       <span><kbd>p</kbd> copy pass</span>
-      ${entry.totp_secret ? '<span><kbd>t</kbd> copy totp</span>' : ''}
+      ${hasTotp ? '<span><kbd>t</kbd> copy totp</span>' : ''}
       <span><kbd>f</kbd> autofill</span>
       <span><kbd>e</kbd> edit</span>
-      <span><kbd>d</kbd> delete</span>
+      <span><kbd>d</kbd> trash</span>
     </div>
   `;
 
@@ -131,25 +148,65 @@ export function renderItemDetail(app: HTMLElement): void {
 
   // --- Password toggle ---
   let passwordVisible = false;
-  const passwordDisplay = document.getElementById('password-display')!;
+  const passwordDisplay = document.getElementById('password-display');
-  const passwordVal = document.getElementById('password-val')!;
+  const passwordVal = document.getElementById('password-val');
-  passwordVal?.addEventListener('click', () => {
+  const password = core.password ?? '';
+  passwordVal?.addEventListener('click', (e) => {
+    // Ignore clicks originating on the copy button.
+    if ((e.target as HTMLElement).id === 'password-copy') return;
     passwordVisible = !passwordVisible;
-    passwordDisplay.textContent = passwordVisible ? entry.password : '********';
+    if (passwordDisplay) passwordDisplay.textContent = passwordVisible ? password : '********';
+  });
+  document.getElementById('password-copy')?.addEventListener('click', async (e) => {
+    e.stopPropagation();
+    await copyToClipboard(password);
   });
 
-  // --- Back button ---
+  if (core.username) {
+    document.getElementById('username-val')?.addEventListener('click', async () => {
+      await copyToClipboard(core.username ?? '');
+    });
+  }
+
   document.getElementById('back-btn')?.addEventListener('click', goBack);
 
+  document.getElementById('fill-btn')?.addEventListener('click', async () => {
+    const { capturedTabId, capturedUrl } = getState();
+    if (capturedTabId === null) {
+      setState({ error: 'No active tab captured' });
+      return;
+    }
+    const resp = await sendMessage({
+      type: 'fill_credentials',
+      id: item.id,
+      capturedTabId,
+      capturedUrl,
+    });
+    if (!resp.ok) {
+      setState({ error: resp.error });
+      return;
+    }
+    window.close();
+  });
+
+  document.getElementById('edit-btn')?.addEventListener('click', () => {
+    document.removeEventListener('keydown', handler);
+    stopTotpTimer();
+    navigate('edit');
+  });
+
+  document.getElementById('trash-btn')?.addEventListener('click', () => {
+    showDeleteConfirm(item.id, item.title, handler);
+  });
+
   // --- TOTP timer ---
-  if (entry.totp_secret) {
+  if (hasTotp) {
-    refreshTotp(id);
+    void refreshTotp(item.id);
-    totpInterval = setInterval(() => refreshTotp(id), 1000);
+    totpInterval = setInterval(() => { void refreshTotp(item.id); }, 1000);
   }
 
   // --- Keyboard shortcuts ---
   const handler = async (e: KeyboardEvent) => {
-    // Ignore if typing in an input.
     if ((e.target as HTMLElement).tagName === 'INPUT') return;
 
     switch (e.key) {
@@ -159,27 +216,34 @@ export function renderItemDetail(app: HTMLElement): void {
         break;
 
       case 'c':
-        if (entry.username) await copyToClipboard(entry.username);
+        if (core.username) await copyToClipboard(core.username);
         break;
 
       case 'p':
-        await copyToClipboard(entry.password);
+        await copyToClipboard(password);
         break;
 
       case 't':
-        if (entry.totp_secret) {
+        if (hasTotp) {
           const codeEl = document.getElementById('totp-code');
           if (codeEl) await copyToClipboard(codeEl.textContent ?? '');
         }
         break;
 
       case 'f': {
+        const { capturedTabId, capturedUrl } = getState();
+        if (capturedTabId === null) {
+          setState({ error: 'No active tab captured' });
+          break;
+        }
         const resp = await sendMessage({
           type: 'fill_credentials',
-          username: entry.username ?? '',
+          id: item.id,
-          password: entry.password,
+          capturedTabId,
+          capturedUrl,
         });
         if (!resp.ok) setState({ error: resp.error });
+        else window.close();
         break;
       }
 
@@ -191,7 +255,7 @@ export function renderItemDetail(app: HTMLElement): void {
 
       case 'd':
         e.preventDefault();
-        showDeleteConfirm(id, entry.name, handler);
+        showDeleteConfirm(item.id, item.title, handler);
         break;
     }
   };
@@ -199,40 +263,88 @@ export function renderItemDetail(app: HTMLElement): void {
   document.addEventListener('keydown', handler);
 }
 
-async function refreshTotp(id: string): Promise<void> {
+async function refreshTotp(id: ItemId): Promise<void> {
   const resp = await sendMessage({ type: 'get_totp', id });
   if (resp.ok) {
-    const data = resp.data as { code: string; remaining_seconds: number };
+    const data = resp.data as { code: string; expires_at: number };
     const codeEl = document.getElementById('totp-code');
     const barEl = document.getElementById('totp-bar-fill');
     if (codeEl) codeEl.textContent = data.code;
-    if (barEl) barEl.style.width = `${(data.remaining_seconds / 30) * 100}%`;
+    if (barEl) {
+      const now = Math.floor(Date.now() / 1000);
+      const remaining = Math.max(0, data.expires_at - now);
+      // Period is 30 by default; compute ratio against 30.
+      barEl.style.width = `${(remaining / 30) * 100}%`;
     }
   }
+  // Suppress unused warning; TotpConfig referenced for typing only below.
+  void ({} as TotpConfig);
+}
+
+// --- Coming-soon for non-login types -----------------------------------
+
+function renderComingSoon(app: HTMLElement, item: Item): void {
+  app.innerHTML = `
+    <div class="detail-header">
+      <span class="detail-title">${escapeHtml(item.title)}</span>
+      <button class="btn" id="back-btn" style="font-size:11px;">esc</button>
+    </div>
+    <div class="pad" style="text-align:center; padding:32px 16px;">
+      <div style="font-size:32px; margin-bottom:12px;">${typeEmoji(item.type)}</div>
+      <div style="font-size:14px; color:#c9d1d9; margin-bottom:4px;">${escapeHtml(item.type.replace('_', ' '))}</div>
+      <p class="muted">read/write for this type is coming in a later slice.</p>
+      <p class="muted" style="margin-top:8px;">use the CLI for now.</p>
+    </div>
+  `;
+
+  document.getElementById('back-btn')?.addEventListener('click', goBack);
+
+  const handler = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      document.removeEventListener('keydown', handler);
+      goBack();
+    }
+  };
+  document.addEventListener('keydown', handler);
+}
+
+function typeEmoji(t: Item['type']): string {
+  switch (t) {
+    case 'login':       return '🔑';
+    case 'secure_note': return '📝';
+    case 'identity':    return '🪪';
+    case 'card':        return '💳';
+    case 'key':         return '🗝';
+    case 'document':    return '📄';
+    case 'totp':        return '⏱';
+  }
+}
+
+// --- Shared helpers ----------------------------------------------------
 
 function goBack(): void {
   stopTotpTimer();
-  // Reload the entry list.
+  // Reload the item list.
-  sendMessage({ type: 'list_entries' }).then(resp => {
+  void sendMessage({ type: 'list_items' }).then(resp => {
     if (resp.ok) {
-      const data = resp.data as { entries: Array<[string, ManifestEntry]> };
+      const data = resp.data as { items: Array<[ItemId, ManifestEntry]> };
       navigate('list', {
-        entries: data.entries,
+        entries: data.items,
         selectedId: null,
-        selectedEntry: null,
+        selectedItem: null,
       });
     }
   });
 }
 
-function showDeleteConfirm(id: string, name: string, parentHandler: (e: KeyboardEvent) => void): void {
+function showDeleteConfirm(id: ItemId, title: string, parentHandler: (e: KeyboardEvent) => void): void {
   const overlay = document.createElement('div');
   overlay.className = 'confirm-overlay';
   overlay.innerHTML = `
     <div class="confirm-box">
-      <p>Delete <strong>${escapeHtml(name)}</strong>?</p>
+      <p>Trash <strong>${escapeHtml(title)}</strong>?</p>
       <button class="btn" id="cancel-delete">cancel</button>
-      <button class="btn btn-danger" id="confirm-delete">delete</button>
+      <button class="btn btn-danger" id="confirm-delete">trash</button>
     </div>
   `;
   document.body.appendChild(overlay);
@@ -244,7 +356,7 @@ function showDeleteConfirm(id: string, name: string, parentHandler: (e: Keyboard
   document.getElementById('confirm-delete')?.addEventListener('click', async () => {
     overlay.remove();
     setState({ loading: true });
-    const resp = await sendMessage({ type: 'delete_entry', id });
+    const resp = await sendMessage({ type: 'delete_item', id });
     if (resp.ok) {
       document.removeEventListener('keydown', parentHandler);
       stopTotpTimer();