@entropy-softworks/ui 2026.8.34 → 2026.8.36

package/src/demos/extension-popup.tsx

@@ -0,0 +1,2051 @@
+/**
+ * The Vault browser-extension popup, as a shared component.
+ *
+ * A faithful recreation of `clients/extension` — the real popup's routes,
+ * layout, copy, field labels, sort options and tag/folder structure — running on
+ * sample data that never leaves the device. Interactive: open an item, copy a
+ * field, reveal a TOTP, switch tabs, walk into settings.
+ *
+ * It lives HERE rather than in either consumer because both the marketing site
+ * and the Vault app show it, and two copies of a 1,000-line recreation would
+ * drift the moment the real extension changed. Same reasoning as sharing
+ * `PasswordGenerator` instead of rewriting it per app.
+ *
+ * Two things the website's original did that this deliberately does not:
+ *
+ *  * **No `auto` mode.** That drove a synthetic cursor with `querySelector` and
+ *    `getBoundingClientRect`, which has no meaning on native. It belongs to that
+ *    page's choreography, not to the extension, so the showcase keeps it.
+ *  * **No drag-and-drop in the tags tab.** It used `@dnd-kit`, which is DOM-only.
+ *    The grip handles remain as affordances because removing them would change
+ *    the layout this exists to reproduce, but they do not drag.
+ *
+ * Everything else is the original, moved rather than rewritten.
+ */
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Image,
+  Linking,
+  Pressable,
+  ScrollView,
+  Text as RNText,
+  TextInput,
+  View,
+} from "react-native";
+import { useColorScheme, vars } from "nativewind";
+import {
+  ArrowDownUp,
+  ArrowLeft,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle as CircleIcon,
+  Copy,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  Fingerprint,
+  Folder,
+  FolderPlus,
+  GripVertical,
+  KeyRound,
+  Lock,
+  LogOut,
+  Pencil,
+  Plus,
+  Search,
+  Send,
+  Server,
+  Settings as SettingsIcon,
+  ShieldAlert,
+  SquarePen,
+  Star,
+  Tag as TagIcon,
+  Trash2,
+} from "lucide-react-native";
+import { MutedText, Text } from "../components/text";
+import { Button } from "../components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../components/card";
+
+/**
+ * The real popup's frame, in px.
+ *
+ * `HEIGHT` is Chrome's *maximum* for a browser action popup, not a fixed size —
+ * the real popup is as tall as it needs to be, up to this. So a host with less
+ * vertical room may render it shorter (see the `height` prop) without the thing
+ * on screen becoming a lie about what the extension looks like; the item list
+ * scrolls inside, exactly as it does at full height.
+ */
+export const EXTENSION_POPUP_WIDTH = 380;
+export const EXTENSION_POPUP_HEIGHT = 600;
+/** Below this the chrome crowds out the list and it stops reading as the popup. */
+export const EXTENSION_POPUP_MIN_HEIGHT = 320;
+
+export function useInk() {
+  const { colorScheme: scheme } = useColorScheme();
+  const dark = scheme === "dark";
+  // Vault's own palette (pure white in light), matching .vault-surface.
+  return {
+    fg: dark ? "#ffffff" : "#000000",
+    muted: dark ? "#a3a3a3" : "#737373",
+    bg: dark ? "#000000" : "#ffffff",
+    border: dark ? "#262626" : "#e5e5e5",
+    secondary: dark ? "#262626" : "#f5f5f5",
+    danger: "#ef4444",
+    star: "#f59e0b",
+  };
+}
+
+// Demo graphics are react-native-web, which SSRs markup that then re-lays-out
+// on hydration ("pops in") and would render with the pre-mount theme guess
+// (a dark flash on a light page). Gate them to mount client-side, behind a
+// theme-correct placeholder, so they appear once, already in the right theme.
+
+export function vaultVars(dark: boolean) {
+  return vars(
+    dark
+      ? {
+          "--background-rgb": "0 0 0",
+          "--foreground-rgb": "255 255 255",
+          "--card": "#0a0a0a",
+          "--card-foreground": "#ffffff",
+          "--secondary": "#262626",
+          "--secondary-foreground": "#ffffff",
+          "--muted": "#262626",
+          "--muted-foreground": "#a3a3a3",
+          "--border": "#262626",
+          "--primary": "#ffffff",
+          "--primary-foreground": "#000000",
+        }
+      : {
+          "--background-rgb": "255 255 255",
+          "--foreground-rgb": "0 0 0",
+          "--card": "#ffffff",
+          "--card-foreground": "#000000",
+          "--secondary": "#f5f5f5",
+          "--secondary-foreground": "#000000",
+          "--muted": "#f5f5f5",
+          "--muted-foreground": "#737373",
+          "--border": "#e5e5e5",
+          "--primary": "#000000",
+          "--primary-foreground": "#ffffff",
+        }
+  );
+}
+
+// ── sample data (shape mirrors DecryptedVaultItem.plaintext) ─────────────────
+export interface Account {
+  username: string;
+  password: string;
+  totp_secret?: string;
+  notes?: string;
+}
+// Tags mirror the app's user-created tags: a name, a color, and an icon
+// (pricetag / circle / star). Rendered as a colored-border chip with the icon.
+export interface Tag {
+  name: string;
+  color: string;
+  icon?: "tag" | "circle" | "star";
+}
+export interface Item {
+  id: string;
+  name: string;
+  url: string;
+  favorite: boolean;
+  tags: Tag[];
+  accounts: Account[];
+  created: string;
+  updated: string;
+}
+
+export const T = {
+  social: { name: "social", color: "#3b82f6", icon: "circle" } as Tag,
+  shopping: { name: "shopping", color: "#22c55e", icon: "tag" } as Tag,
+  finance: { name: "finance", color: "#f59e0b", icon: "star" } as Tag,
+  streaming: { name: "streaming", color: "#a855f7", icon: "circle" } as Tag,
+  gaming: { name: "gaming", color: "#06b6d4", icon: "tag" } as Tag,
+};
+
+export const ITEMS: Item[] = [
+  {
+    id: "1",
+    name: "Netflix",
+    url: "https://netflix.com",
+    favorite: true,
+    tags: [T.streaming],
+    created: "2024-02-11",
+    updated: "2025-05-30",
+    accounts: [
+      {
+        username: "example@entropysoftworks.com",
+        password: "tR0ub4dour&3xplsion",
+        totp_secret: "JBSWY3DPEHPK3PXP",
+        notes: "Shared family plan.",
+      },
+    ],
+  },
+  {
+    id: "2",
+    name: "Amazon",
+    url: "https://amazon.com",
+    favorite: true,
+    tags: [T.shopping],
+    created: "2024-01-04",
+    updated: "2025-05-22",
+    accounts: [
+      {
+        username: "example@entropysoftworks.com",
+        password: "correct-horse-battery",
+        totp_secret: "KRSXG5CTMVRXEZLU",
+      },
+    ],
+  },
+  {
+    id: "3",
+    name: "Instagram",
+    url: "https://instagram.com",
+    favorite: true,
+    tags: [T.social],
+    created: "2024-03-02",
+    updated: "2025-06-01",
+    accounts: [
+      { username: "yourhandle", password: "9xQvM2pL7wE4z", totp_secret: "MFRGGZDFMZTWQ2LK" },
+    ],
+  },
+  {
+    id: "4",
+    name: "PayPal",
+    url: "https://paypal.com",
+    favorite: false,
+    tags: [T.finance],
+    created: "2024-04-20",
+    updated: "2025-05-12",
+    accounts: [
+      {
+        username: "example@entropysoftworks.com",
+        password: "Zx8kLp2qWn5vR",
+        totp_secret: "GEZDGNBVGY3TQOJQ",
+      },
+    ],
+  },
+  {
+    id: "5",
+    name: "Chase",
+    url: "https://chase.com",
+    favorite: false,
+    tags: [T.finance],
+    created: "2024-02-18",
+    updated: "2025-04-28",
+    accounts: [
+      {
+        username: "example@entropysoftworks.com",
+        password: "Sf6!nQ9xK3mD2p",
+        notes: "Checking + card.",
+      },
+    ],
+  },
+  {
+    id: "6",
+    name: "Spotify",
+    url: "https://spotify.com",
+    favorite: false,
+    tags: [T.streaming],
+    created: "2024-05-30",
+    updated: "2025-03-19",
+    accounts: [{ username: "example@entropysoftworks.com", password: "Vb7nQ9xK3mD2p" }],
+  },
+  {
+    id: "7",
+    name: "Steam",
+    url: "https://steampowered.com",
+    favorite: false,
+    tags: [T.gaming],
+    created: "2024-06-01",
+    updated: "2025-02-09",
+    accounts: [{ username: "yourhandle", password: "Lr4!tWp2qZ", totp_secret: "NB2W45DFOIZA" }],
+  },
+  {
+    id: "8",
+    name: "Reddit",
+    url: "https://reddit.com",
+    favorite: false,
+    tags: [T.social],
+    created: "2024-01-22",
+    updated: "2025-01-15",
+    accounts: [{ username: "u/yourhandle", password: "Dx2!mNp9qR" }],
+  },
+];
+
+export const SORT_OPTIONS = [
+  {
+    value: "name_asc",
+    label: "Name (A-Z)",
+    cmp: (a: Item, b: Item) => a.name.localeCompare(b.name),
+  },
+  {
+    value: "name_desc",
+    label: "Name (Z-A)",
+    cmp: (a: Item, b: Item) => b.name.localeCompare(a.name),
+  },
+  {
+    value: "updated_newest",
+    label: "Recently updated",
+    cmp: (a: Item, b: Item) => b.updated.localeCompare(a.updated),
+  },
+  {
+    value: "created_newest",
+    label: "Newest first",
+    cmp: (a: Item, b: Item) => b.created.localeCompare(a.created),
+  },
+  {
+    value: "created_oldest",
+    label: "Oldest first",
+    cmp: (a: Item, b: Item) => a.created.localeCompare(b.created),
+  },
+] as const;
+
+/** The sort used when an index somehow falls outside SORT_OPTIONS. */
+const DEFAULT_SORT = SORT_OPTIONS[0];
+
+// ── helpers ───────────────────────────────────────────────────────────────
+export function host(url: string) {
+  return url.replace(/^https?:\/\//, "").replace(/\/.*$/, "");
+}
+// Real ItemIcon renders the site favicon; reproduce with the same favicon
+// service the app's icon resolver falls back to.
+export function favicon(url: string) {
+  return `https://www.google.com/s2/favicons?domain=${host(url)}&sz=64`;
+}
+
+export function ItemIcon({
+  url,
+  size = 40,
+  radius = 8,
+}: {
+  url: string;
+  size?: number;
+  radius?: number;
+}) {
+  return (
+    <View
+      style={
+        {
+          width: size,
+          height: size,
+          borderRadius: radius,
+          overflow: "hidden",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#ffffff",
+          borderWidth: 1,
+          borderColor: "#e5e5e5",
+        } as never
+      }
+    >
+      {/* RN `Image`, not a DOM `<img>`: this component renders on native too,
+          where `<img>` is not a thing. `resizeMode="contain"` is the RN
+          spelling of `object-fit: contain`. */}
+      <Image
+        source={{ uri: favicon(url) }}
+        accessibilityIgnoresInvertColors
+        style={{ width: size * 0.6, height: size * 0.6 }}
+        resizeMode="contain"
+      />
+    </View>
+  );
+}
+
+export function useCopy() {
+  const [copied, setCopied] = useState<string | null>(null);
+  const copy = useCallback((key: string, text: string) => {
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      navigator.clipboard.writeText(text).catch(() => {});
+    }
+    setCopied(key);
+    setTimeout(() => setCopied((k) => (k === key ? null : k)), 1300);
+  }, []);
+  return { copied, copy };
+}
+
+// Deterministic 6-digit code that rolls every 30s (stand-in for real TOTP).
+export function totpCode(seed: string, step: number) {
+  let h = 0;
+  for (const c of seed) {
+    h = (h * 31 + c.charCodeAt(0)) >>> 0;
+  }
+  return Math.abs((h ^ (step * 2654435761)) % 1_000_000)
+    .toString()
+    .padStart(6, "0");
+}
+export function useTotp(secret?: string) {
+  const [now, setNow] = useState(0);
+  useEffect(() => {
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    setNow(Date.now());
+    return () => clearInterval(t);
+  }, []);
+  if (!secret || !now) {
+    return { code: "------", remaining: 30 };
+  }
+  const epoch = Math.floor(now / 1000);
+  return { code: totpCode(secret, Math.floor(epoch / 30)), remaining: 30 - (epoch % 30) };
+}
+
+// Matches the app's RingCountdown widget.
+export function RingCountdown({
+  remaining,
+  size = 48,
+  period = 30,
+  color,
+}: {
+  remaining: number;
+  size?: number;
+  period?: number;
+  color: string;
+}) {
+  const r = size / 2 - 3;
+  const c = 2 * Math.PI * r;
+  const frac = remaining / period;
+  const warn = remaining <= 5;
+  const stroke = warn ? "#ef4444" : color;
+  return (
+    <View style={{ width: size, height: size } as never}>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={r}
+          fill="none"
+          stroke={color}
+          strokeOpacity={0.2}
+          strokeWidth={3}
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={r}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={3}
+          strokeLinecap="round"
+          strokeDasharray={c}
+          strokeDashoffset={c * (1 - frac)}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+        <text
+          x={size / 2}
+          y={size / 2 + 4}
+          textAnchor="middle"
+          fontSize={12}
+          fontFamily="var(--font-geist-mono)"
+          fill={stroke}
+        >
+          {remaining}
+        </text>
+      </svg>
+    </View>
+  );
+}
+
+// ── phone frame ─────────────────────────────────────────────────────────────
+
+export function VaultItemRow({
+  item,
+  ink,
+  onPress,
+  highlight,
+}: {
+  item: Item;
+  ink: ReturnType<typeof useInk>;
+  onPress: () => void;
+  highlight?: boolean;
+}) {
+  // Sample data always has one; the guard is for the type checker, and
+  // rendering nothing beats crashing if that ever stops being true.
+  const acc = item.accounts[0];
+  return (
+    <Pressable
+      nativeID={`vrow-${item.id}`}
+      onPress={onPress}
+      className="mb-1.5 flex-row items-center overflow-hidden rounded-lg bg-card p-3.5 active:opacity-80"
+      style={highlight ? ({ backgroundColor: ink.secondary } as never) : undefined}
+    >
+      <View className="mr-3">
+        <ItemIcon url={item.url} />
+      </View>
+      <View className="flex-1">
+        <Text className="text-sm font-semibold" numberOfLines={1}>
+          {item.name}
+        </Text>
+        <MutedText className="text-xs" numberOfLines={1}>
+          {acc?.username || host(item.url)}
+        </MutedText>
+      </View>
+      {item.favorite && <Star size={14} color={ink.fg} fill={ink.fg} />}
+      <Pressable
+        className="ml-1 px-1.5 py-1 active:opacity-70"
+        onPress={() => void Linking.openURL(item.url).catch(() => undefined)}
+      >
+        <ExternalLink size={18} color={ink.muted} />
+      </Pressable>
+      <ChevronRight size={18} color={ink.muted} />
+    </Pressable>
+  );
+}
+
+export function Dropdown({
+  open,
+  onToggle,
+  label,
+  icon,
+  children,
+  ink,
+}: {
+  open: boolean;
+  onToggle: () => void;
+  label: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  ink: ReturnType<typeof useInk>;
+}) {
+  return (
+    <View style={{ position: "relative" } as never}>
+      <Pressable
+        onPress={onToggle}
+        className="flex-row items-center gap-1 rounded-md border border-border px-2 py-1 active:opacity-70"
+      >
+        {icon}
+        <MutedText className="text-xs">{label}</MutedText>
+        {open ? (
+          <ChevronUp size={10} color={ink.muted} />
+        ) : (
+          <ChevronDown size={10} color={ink.muted} />
+        )}
+      </Pressable>
+      {open && (
+        <View
+          className="absolute right-0 top-8 z-50 rounded-lg border border-border bg-card py-1"
+          style={{ minWidth: 160 } as never}
+        >
+          {children}
+        </View>
+      )}
+    </View>
+  );
+}
+
+export function VaultList({
+  ink,
+  onOpen,
+  items = ITEMS,
+  scrollRef,
+  highlightId,
+}: {
+  ink: ReturnType<typeof useInk>;
+  onOpen: (id: string) => void;
+  items?: Item[];
+  scrollRef?: React.Ref<ScrollView>;
+  highlightId?: string | null;
+}) {
+  const [query, setQuery] = useState("");
+  const [sortIdx, setSortIdx] = useState(0);
+  const [showSort, setShowSort] = useState(false);
+  // `?? SORT_OPTIONS[0]!` rather than a non-null assertion on the index:
+  // sortIdx is driven by the picker below and cannot leave range, but under
+  // noUncheckedIndexedAccess the compiler cannot know that, and falling back to
+  // the default sort is the right behaviour if it ever did.
+  // Falls back to the first option rather than asserting non-null: sortIdx is
+  // driven by the picker and cannot leave range, but the default sort is the
+  // right behaviour if it ever did.
+  const sort = SORT_OPTIONS[sortIdx] ?? DEFAULT_SORT;
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return items.filter(
+      (i) =>
+        !q ||
+        i.name.toLowerCase().includes(q) ||
+        i.accounts.some((a) => a.username.toLowerCase().includes(q)) ||
+        host(i.url).includes(q)
+    );
+  }, [query, items]);
+  const favorites = filtered.filter((i) => i.favorite);
+  const all = [...filtered.filter((i) => !i.favorite)].sort(sort.cmp);
+
+  return (
+    <View className="flex-1">
+      <View className="px-4 pb-2 pt-1">
+        <View
+          className="flex-row items-center rounded-lg border border-border px-3"
+          style={{ height: 40 } as never}
+        >
+          <Search size={18} color={ink.muted} />
+          <TextInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder="Search passwords"
+            placeholderTextColor={ink.muted}
+            className="ml-2 flex-1 text-sm text-foreground"
+            style={{ outlineStyle: "none" } as never}
+          />
+        </View>
+      </View>
+
+      <ScrollView
+        ref={scrollRef}
+        className="flex-1"
+        contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 20 } as never}
+      >
+        {favorites.length > 0 && (
+          <View className="pt-2">
+            <View className="mb-2 flex-row items-center gap-1.5 px-1">
+              <Star size={14} color={ink.fg} />
+              <Text className="text-xs font-semibold uppercase tracking-wider">Favorites</Text>
+              <MutedText className="text-xs">({favorites.length})</MutedText>
+            </View>
+            {favorites.map((i) => (
+              <VaultItemRow
+                key={i.id}
+                item={i}
+                ink={ink}
+                onPress={() => onOpen(i.id)}
+                highlight={highlightId === i.id}
+              />
+            ))}
+            <View className="my-3 h-px bg-border" />
+          </View>
+        )}
+
+        {all.length > 0 && (
+          <View style={{ zIndex: 50 } as never}>
+            <View
+              className="relative mb-2 flex-row items-center justify-between px-1"
+              style={{ zIndex: 50 } as never}
+            >
+              <View className="flex-row items-center gap-1.5">
+                <Text className="text-xs font-semibold uppercase tracking-wider">All Items</Text>
+                <MutedText className="text-xs">({all.length})</MutedText>
+              </View>
+              <Dropdown
+                ink={ink}
+                open={showSort}
+                onToggle={() => setShowSort((v) => !v)}
+                label={sort.label}
+                icon={<ArrowDownUp size={12} color={ink.muted} />}
+              >
+                {SORT_OPTIONS.map((o, idx) => (
+                  <Pressable
+                    key={o.value}
+                    onPress={() => {
+                      setSortIdx(idx);
+                      setShowSort(false);
+                    }}
+                    className={`px-3 py-1.5 active:opacity-70 ${idx === sortIdx ? "bg-secondary" : ""}`}
+                  >
+                    <Text className={`text-xs ${idx === sortIdx ? "font-semibold" : ""}`}>
+                      {o.label}
+                    </Text>
+                  </Pressable>
+                ))}
+              </Dropdown>
+            </View>
+            {all.map((i) => (
+              <VaultItemRow
+                key={i.id}
+                item={i}
+                ink={ink}
+                onPress={() => onOpen(i.id)}
+                highlight={highlightId === i.id}
+              />
+            ))}
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+// ── item detail (app/(tabs)/vault/[id]/index.tsx) ────────────────────────────
+export function FieldRow({
+  label,
+  value,
+  ink,
+  copied,
+  copy,
+  secret,
+  totp,
+}: {
+  label: string;
+  value: string;
+  ink: ReturnType<typeof useInk>;
+  copied: string | null;
+  copy: (k: string, t: string) => void;
+  secret?: boolean;
+  totp?: ReturnType<typeof useTotp>;
+}) {
+  const [show, setShow] = useState(false);
+  const isCopied = copied === label;
+  const display = totp ? totp.code : secret && !show ? "••••••••••••" : value;
+  return (
+    <View className="mb-4">
+      <Text className="mb-1 text-xs text-muted-foreground">{label}</Text>
+      <View className="flex-row items-center justify-between rounded-lg bg-secondary p-3">
+        <RNText
+          className="flex-1 font-mono text-sm text-foreground"
+          numberOfLines={1}
+          style={{ color: ink.fg } as never}
+        >
+          {display}
+        </RNText>
+        <View className="flex-row items-center gap-2">
+          {secret && (
+            <Pressable onPress={() => setShow((v) => !v)} className="active:opacity-60">
+              {show ? <EyeOff size={18} color={ink.muted} /> : <Eye size={18} color={ink.muted} />}
+            </Pressable>
+          )}
+          {totp && (
+            <View className="mr-1">
+              <RingCountdown remaining={totp.remaining} color={ink.fg} />
+            </View>
+          )}
+          <Pressable
+            nativeID={totp ? "fcopy-totp" : undefined}
+            onPress={() => copy(label, totp ? totp.code : value)}
+            className="active:opacity-60"
+          >
+            {isCopied ? <Check size={18} color="#22c55e" /> : <Copy size={18} color={ink.muted} />}
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export function ItemDetail({
+  item,
+  ink,
+  onBack,
+  onDelete,
+  forceCopiedLabel,
+  scrollRef,
+}: {
+  item: Item;
+  ink: ReturnType<typeof useInk>;
+  onBack: () => void;
+  onDelete?: () => void;
+  forceCopiedLabel?: string | null;
+  scrollRef?: React.Ref<ScrollView>;
+}) {
+  // Sample data always has one; the guard is for the type checker, and
+  // rendering nothing beats crashing if that ever stops being true.
+  const acc = item.accounts[0];
+  const accSecret = acc?.totp_secret;
+  const { copied, copy } = useCopy();
+  const totp = useTotp(accSecret);
+  const [editing, setEditing] = useState(false);
+  const [confirm, setConfirm] = useState(false);
+  // In autoplay the copied highlight is driven externally; otherwise the
+  // real per-field copy state.
+  const effCopied = forceCopiedLabel ?? copied;
+
+  if (editing) {
+    return <ExtItemForm ink={ink} item={item} onCancel={() => setEditing(false)} />;
+  }
+  // After the hooks, so the hook order never changes. Sample items always carry
+  // an account; this is the type checker's guard, and rendering nothing beats
+  // crashing if that ever stops being true.
+  if (!acc) {
+    return null;
+  }
+
+  function launch() {
+    void Linking.openURL(item.url).catch(() => undefined);
+  }
+
+  return (
+    <ScrollView ref={scrollRef} className="flex-1" contentContainerStyle={{ padding: 16 } as never}>
+      {/* top bar */}
+      <View className="mb-4 flex-row items-center justify-between">
+        <Pressable onPress={onBack} className="active:opacity-70">
+          <ArrowLeft size={22} color={ink.fg} />
+        </Pressable>
+        <View className="flex-row gap-4">
+          <Pressable onPress={launch} hitSlop={8} className="active:opacity-60">
+            <ExternalLink size={20} color={ink.fg} />
+          </Pressable>
+          <Pressable onPress={() => setEditing(true)} hitSlop={8} className="active:opacity-60">
+            <SquarePen size={20} color={ink.fg} />
+          </Pressable>
+          <Pressable onPress={() => setConfirm(true)} hitSlop={8} className="active:opacity-60">
+            <Trash2 size={20} color={ink.danger} />
+          </Pressable>
+        </View>
+      </View>
+
+      {confirm && (
+        <ExtModal title="Delete item" ink={ink}>
+          <Text className="text-sm text-muted-foreground">
+            Delete &quot;{item.name}&quot;? This can&apos;t be undone.
+          </Text>
+          <View className="flex-row gap-2">
+            <View className="flex-1">
+              <Button variant="outline" onPress={() => setConfirm(false)}>
+                Cancel
+              </Button>
+            </View>
+            <View className="flex-1">
+              <Button
+                variant="destructive"
+                onPress={() => {
+                  setConfirm(false);
+                  (onDelete ?? onBack)();
+                }}
+              >
+                Delete
+              </Button>
+            </View>
+          </View>
+        </ExtModal>
+      )}
+
+      {/* header */}
+      <View className="mb-6 flex-row items-center gap-3">
+        <ItemIcon url={item.url} size={56} radius={14} />
+        <View className="flex-1">
+          <View className="flex-row items-center gap-2">
+            <Text className="text-xl font-bold">{item.name}</Text>
+            {item.favorite && <Star size={18} color={ink.star} fill={ink.star} />}
+          </View>
+          <MutedText className="text-sm" numberOfLines={1}>
+            {host(item.url)}
+          </MutedText>
+        </View>
+      </View>
+
+      {/* fields */}
+      <View className="rounded-lg border border-border bg-card p-4">
+        <FieldRow
+          label="Username / Email"
+          value={acc.username}
+          ink={ink}
+          copied={effCopied}
+          copy={copy}
+        />
+        <FieldRow
+          label="Password"
+          value={acc.password}
+          ink={ink}
+          copied={effCopied}
+          copy={copy}
+          secret
+        />
+        <FieldRow label="URL" value={item.url} ink={ink} copied={effCopied} copy={copy} />
+        {acc.totp_secret && (
+          <FieldRow
+            label="TOTP Code"
+            value={acc.totp_secret}
+            ink={ink}
+            copied={effCopied}
+            copy={copy}
+            totp={totp}
+          />
+        )}
+      </View>
+
+      {/* notes */}
+      <View className="mt-4 rounded-lg border border-border bg-card p-4">
+        <Text className="mb-2 text-xs font-semibold uppercase text-muted-foreground">Notes</Text>
+        {acc.notes ? (
+          <Text className="text-sm">{acc.notes}</Text>
+        ) : (
+          <Text className="text-sm italic text-muted-foreground">
+            No notes — tap Edit to add some.
+          </Text>
+        )}
+      </View>
+
+      {/* details */}
+      <View className="mt-4 rounded-lg border border-border bg-card p-4">
+        <Text className="mb-2 text-xs font-semibold uppercase text-muted-foreground">Details</Text>
+        <MutedText className="mb-1 text-xs">Created: {item.created}</MutedText>
+        <MutedText className="text-xs">Updated: {item.updated}</MutedText>
+        <View className="mt-3">
+          <MutedText className="mb-1.5 text-xs">Tags</MutedText>
+          <View className="flex-row flex-wrap gap-1.5">
+            {item.tags.map((t) => {
+              const Icon = t.icon === "circle" ? CircleIcon : t.icon === "star" ? Star : TagIcon;
+              return (
+                <View
+                  key={t.name}
+                  className="flex-row items-center gap-1 rounded-md border px-2 py-1"
+                  style={{ borderColor: `${t.color}55` } as never}
+                >
+                  <Icon size={12} color={t.color} />
+                  <Text className="text-xs">{t.name}</Text>
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+// ── generator (entropy-ui PasswordGenerator, reproduced) ──────────────────────
+
+function ExtBottomNav({
+  active,
+  onChange,
+  ink,
+}: {
+  active: string;
+  onChange: (t: ExtTab) => void;
+  ink: ReturnType<typeof useInk>;
+}) {
+  const tabs: [ExtTab, string, typeof Lock][] = [
+    ["vault", "Login Items", Lock],
+    ["tags", "Tags", Folder],
+    ["send", "Send", Send],
+    ["secrets", "Secrets", KeyRound],
+  ];
+  return (
+    <View className="flex-row border-t border-border">
+      {tabs.map(([id, label, Icon]) => {
+        const on = id === active;
+        return (
+          <Pressable
+            key={id}
+            onPress={() => onChange(id)}
+            className="flex-1 items-center justify-center gap-0.5 py-2 active:opacity-70"
+          >
+            <Icon size={18} color={on ? ink.fg : ink.muted} />
+            <RNText
+              style={
+                {
+                  fontSize: 10,
+                  fontWeight: on ? "600" : "400",
+                  color: on ? ink.fg : ink.muted,
+                } as never
+              }
+            >
+              {label}
+            </RNText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+function ExtComingSoon({
+  icon,
+  desc,
+  ink,
+}: {
+  icon: React.ReactNode;
+  desc: string;
+  ink: ReturnType<typeof useInk>;
+}) {
+  return (
+    <View className="flex-1 items-center justify-center px-8" style={{ gap: 10 } as never}>
+      {icon}
+      <MutedText className="text-center text-sm" style={{ maxWidth: 260 } as never}>
+        {desc}
+      </MutedText>
+      <RNText style={{ fontSize: 11, fontStyle: "italic", color: ink.muted } as never}>
+        Coming soon
+      </RNText>
+    </View>
+  );
+}
+
+/**
+ * The mark in the popup header.
+ *
+ * Supplied by the caller rather than loaded from a path. The original pointed
+ * at `/products/vault_light.png`, which only resolves on the marketing site —
+ * a shared package cannot reach into one consumer's public directory. Falls
+ * back to the wordmark so the header is never empty.
+ */
+export function VaultMark({ logo }: { logo?: React.ReactNode }) {
+  if (logo) {
+    return <>{logo}</>;
+  }
+  return <Text className="text-base font-bold">Vault</Text>;
+}
+
+function ExtHeader({
+  tab,
+  ink,
+  onAdd,
+  onAddFolder,
+  onSettings,
+  logo,
+}: {
+  tab: ExtTab;
+  ink: ReturnType<typeof useInk>;
+  onAdd: () => void;
+  onAddFolder: () => void;
+  onSettings: () => void;
+  logo?: React.ReactNode;
+}) {
+  return (
+    <View className="flex-row items-center gap-3 border-b border-border px-4 py-3">
+      <VaultMark logo={logo} />
+      <View className="flex-1" />
+      {tab === "tags" && (
+        <Pressable onPress={onAddFolder} className="active:opacity-70">
+          <FolderPlus size={18} color={ink.fg} strokeWidth={1.75} />
+        </Pressable>
+      )}
+      <Pressable onPress={onAdd} className="active:opacity-70">
+        <Plus size={20} color={ink.fg} strokeWidth={1.75} />
+      </Pressable>
+      <Pressable onPress={onSettings} className="active:opacity-70">
+        <SettingsIcon size={20} color={ink.fg} strokeWidth={1.75} />
+      </Pressable>
+    </View>
+  );
+}
+
+// ── Tags & folders (clients/extension TagsAndFoldersScreen) ──────────────────
+
+interface DTag {
+  id: string;
+  name: string;
+  color: string;
+  icon?: "tag" | "circle" | "star";
+  folderId: string | null;
+}
+interface DFolder {
+  id: string;
+  name: string;
+}
+
+const SEED_FOLDERS: DFolder[] = [
+  { id: "f1", name: "Personal" },
+  { id: "f2", name: "Finance" },
+  { id: "f3", name: "Gaming" },
+];
+const SEED_TAGS: DTag[] = [
+  { id: "t1", ...T.social, folderId: "f1" },
+  { id: "t2", ...T.streaming, folderId: "f1" },
+  { id: "t3", ...T.finance, folderId: "f2" },
+  { id: "t4", ...T.gaming, folderId: "f3" },
+  { id: "t5", ...T.shopping, folderId: null },
+];
+
+function TagChip({ tag }: { tag: DTag }) {
+  const Icon = tag.icon === "circle" ? CircleIcon : tag.icon === "star" ? Star : TagIcon;
+  return (
+    <View
+      className="flex-row items-center gap-1 self-start rounded-md border px-2 py-1"
+      style={{ borderColor: `${tag.color}55` } as never}
+    >
+      <Icon size={11} color={tag.color} />
+      <Text className="text-xs">{tag.name}</Text>
+    </View>
+  );
+}
+
+function ExtDragHandle({ ink }: { ink: ReturnType<typeof useInk> }) {
+  // Affordance only. The website's version wires this to @dnd-kit, which is
+  // DOM-only and cannot ship in a component React Native also renders. The grip
+  // stays because removing it would change the extension's actual layout, which
+  // is the thing this demo exists to reproduce.
+  return (
+    <View>
+      <GripVertical size={14} color={ink.muted} strokeWidth={1.75} />
+    </View>
+  );
+}
+
+function ExtTagRow({
+  tag,
+  ink,
+  onEdit,
+  onDelete,
+}: {
+  tag: DTag;
+  ink: ReturnType<typeof useInk>;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  return (
+    <View className="flex-row items-center gap-2 rounded-md px-1.5 py-1.5">
+      <ExtDragHandle ink={ink} />
+      <View className="flex-1">
+        <TagChip tag={tag} />
+      </View>
+      <Pressable onPress={onEdit} hitSlop={6} className="active:opacity-60">
+        <Pencil size={13} color={ink.muted} strokeWidth={1.75} />
+      </Pressable>
+      <Pressable onPress={onDelete} hitSlop={6} className="active:opacity-60">
+        <Trash2 size={13} color={ink.danger} strokeWidth={1.75} />
+      </Pressable>
+    </View>
+  );
+}
+
+function ExtFolderBlock({
+  folder,
+  tags,
+  collapsed,
+  ink,
+  onToggle,
+  onAdd,
+  onEdit,
+  onDelete,
+  onEditTag,
+  onDeleteTag,
+}: {
+  folder: DFolder;
+  tags: DTag[];
+  collapsed: boolean;
+  ink: ReturnType<typeof useInk>;
+  onToggle: () => void;
+  onAdd: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  onEditTag: (t: DTag) => void;
+  onDeleteTag: (id: string) => void;
+}) {
+  return (
+    <View className="overflow-hidden rounded-lg border bg-card" style={{ borderColor: ink.border }}>
+      <View className="flex-row items-center gap-2 px-2.5 py-2.5">
+        <ExtDragHandle ink={ink} />
+        <Pressable onPress={onToggle} hitSlop={4} className="active:opacity-60">
+          {collapsed ? (
+            <ChevronRight size={14} color={ink.muted} strokeWidth={1.75} />
+          ) : (
+            <ChevronDown size={14} color={ink.muted} strokeWidth={1.75} />
+          )}
+        </Pressable>
+        <Folder size={14} color={ink.fg} strokeWidth={1.75} />
+        <Pressable onPress={onToggle} className="flex-1">
+          <Text className="text-[13px] font-semibold">{folder.name}</Text>
+        </Pressable>
+        <Text className="text-[11px] text-muted-foreground">{tags.length}</Text>
+        <Pressable onPress={onAdd} hitSlop={6} className="active:opacity-60">
+          <Plus size={14} color={ink.muted} strokeWidth={1.75} />
+        </Pressable>
+        <Pressable onPress={onEdit} hitSlop={6} className="active:opacity-60">
+          <Pencil size={14} color={ink.muted} strokeWidth={1.75} />
+        </Pressable>
+        <Pressable onPress={onDelete} hitSlop={6} className="active:opacity-60">
+          <Trash2 size={14} color={ink.danger} strokeWidth={1.75} />
+        </Pressable>
+      </View>
+      {!collapsed && (
+        <View className="px-2.5 pb-2.5" style={{ gap: 6 } as never}>
+          {tags.length === 0 ? (
+            <Text className="py-1 text-[11px] italic text-muted-foreground">
+              Drop tags here, or use + to add
+            </Text>
+          ) : (
+            tags.map((t) => (
+              <ExtTagRow
+                key={t.id}
+                tag={t}
+                ink={ink}
+                onEdit={() => onEditTag(t)}
+                onDelete={() => onDeleteTag(t.id)}
+              />
+            ))
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+function ExtUngrouped({
+  tags,
+  ink,
+  onEditTag,
+  onDeleteTag,
+}: {
+  tags: DTag[];
+  ink: ReturnType<typeof useInk>;
+  onEditTag: (t: DTag) => void;
+  onDeleteTag: (id: string) => void;
+}) {
+  return (
+    <View
+      className="mt-1 rounded-lg border bg-card p-2.5"
+      style={{ borderColor: ink.border, gap: 6 }}
+    >
+      <Text className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+        Ungrouped
+      </Text>
+      {tags.length === 0 ? (
+        <Text className="py-1 text-[11px] italic text-muted-foreground">No tags</Text>
+      ) : (
+        tags.map((t) => (
+          <ExtTagRow
+            key={t.id}
+            tag={t}
+            ink={ink}
+            onEdit={() => onEditTag(t)}
+            onDelete={() => onDeleteTag(t.id)}
+          />
+        ))
+      )}
+    </View>
+  );
+}
+
+function ExtTagsTab({ ink }: { ink: ReturnType<typeof useInk> }) {
+  const [folders, setFolders] = useState<DFolder[]>(SEED_FOLDERS);
+  const [tags, setTags] = useState<DTag[]>(SEED_TAGS);
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [modal, setModal] = useState<
+    { kind: "tag"; tag?: DTag } | { kind: "folder"; folder?: DFolder } | null
+  >(null);
+  function toggle(id: string) {
+    setCollapsed((s) => {
+      const n = new Set(s);
+      if (n.has(id)) {
+        n.delete(id);
+      } else {
+        n.add(id);
+      }
+      return n;
+    });
+  }
+  function deleteTag(id: string) {
+    setTags((s) => s.filter((t) => t.id !== id));
+  }
+  function deleteFolder(id: string) {
+    setFolders((s) => s.filter((f) => f.id !== id));
+    setTags((s) => s.map((t) => (t.folderId === id ? { ...t, folderId: null } : t)));
+  }
+
+  const ungrouped = tags.filter((t) => !t.folderId);
+  return (
+    <View className="flex-1">
+      <ScrollView className="flex-1" contentContainerStyle={{ padding: 12, gap: 8 } as never}>
+        {folders.map((f) => (
+          <ExtFolderBlock
+            key={f.id}
+            folder={f}
+            tags={tags.filter((t) => t.folderId === f.id)}
+            collapsed={collapsed.has(f.id)}
+            ink={ink}
+            onToggle={() => toggle(f.id)}
+            onAdd={() => setModal({ kind: "tag" })}
+            onEdit={() => setModal({ kind: "folder", folder: f })}
+            onDelete={() => deleteFolder(f.id)}
+            onEditTag={(t) => setModal({ kind: "tag", tag: t })}
+            onDeleteTag={deleteTag}
+          />
+        ))}
+        <ExtUngrouped
+          tags={ungrouped}
+          ink={ink}
+          onEditTag={(t) => setModal({ kind: "tag", tag: t })}
+          onDeleteTag={deleteTag}
+        />
+      </ScrollView>
+      {modal?.kind === "tag" && (
+        <ExtTagModal ink={ink} tag={modal.tag} onClose={() => setModal(null)} />
+      )}
+      {modal?.kind === "folder" && (
+        <ExtFolderModal ink={ink} folder={modal.folder} onClose={() => setModal(null)} />
+      )}
+    </View>
+  );
+}
+
+function ExtSettingsRow({
+  icon,
+  label,
+  ink,
+  onPress,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  ink: ReturnType<typeof useInk>;
+  onPress?: () => void;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      className="flex-row items-center gap-3 rounded-lg border border-border px-3 py-3 active:bg-secondary"
+    >
+      {icon}
+      <Text className="flex-1 text-sm">{label}</Text>
+      <ChevronRight size={16} color={ink.muted} />
+    </Pressable>
+  );
+}
+
+// Settings flow (clients/extension SettingsScreen + PasskeyListScreen +
+// ServerConfigScreen). Owns its own little sub-router so the gear is a full
+// port: menu → Passkeys → Add passkey, and menu → Server URL.
+function ExtSettings({ ink, onBack }: { ink: ReturnType<typeof useInk>; onBack: () => void }) {
+  const [sub, setSub] = useState<"menu" | "passkeys" | "enroll" | "server">("menu");
+
+  if (sub === "passkeys") {
+    return <ExtPasskeys ink={ink} onBack={() => setSub("menu")} onAdd={() => setSub("enroll")} />;
+  }
+  if (sub === "enroll") {
+    return <ExtEnroll ink={ink} onBack={() => setSub("passkeys")} />;
+  }
+  if (sub === "server") {
+    return <ExtServerConfig ink={ink} onBack={() => setSub("menu")} />;
+  }
+
+  return (
+    <View className="flex-1 p-5" style={{ gap: 12 } as never}>
+      <View className="flex-row items-center justify-between">
+        <VaultMark />
+        <Pressable onPress={onBack} hitSlop={8} className="active:opacity-60">
+          <Text className="text-[13px] font-medium text-muted-foreground">Done</Text>
+        </Pressable>
+      </View>
+      <Text className="mt-2 text-lg font-semibold">Settings</Text>
+      <ScrollView className="flex-1" contentContainerStyle={{ gap: 8, paddingBottom: 16 } as never}>
+        <ExtSettingsRow
+          ink={ink}
+          icon={<KeyRound size={18} color={ink.fg} strokeWidth={1.75} />}
+          label="Passkeys"
+          onPress={() => setSub("passkeys")}
+        />
+        <ExtSettingsRow
+          ink={ink}
+          icon={<Server size={18} color={ink.fg} strokeWidth={1.75} />}
+          label="Server URL"
+          onPress={() => setSub("server")}
+        />
+        <View style={{ height: 8 } as never} />
+        <Button variant="destructive" onPress={() => {}}>
+          <View className="flex-row items-center justify-center gap-2">
+            <LogOut size={16} color="#ffffff" strokeWidth={2} />
+            <Text className="text-sm font-medium" style={{ color: "#ffffff" } as never}>
+              Sign out
+            </Text>
+          </View>
+        </Button>
+        <Text className="mt-1 text-xs text-muted-foreground">
+          Signing out clears your session token. Your encrypted vault stays on the server.
+        </Text>
+      </ScrollView>
+    </View>
+  );
+}
+
+// Passkey management (PasskeyListScreen) — popup directs rename/delete to the
+// main app behind the MFA gate; "Add passkey" stays one click away.
+function ExtPasskeys({
+  ink,
+  onBack,
+  onAdd,
+}: {
+  ink: ReturnType<typeof useInk>;
+  onBack: () => void;
+  onAdd: () => void;
+}) {
+  return (
+    <View className="flex-1 p-5" style={{ gap: 12 } as never}>
+      <View className="flex-row items-center justify-between">
+        <View className="flex-row items-center gap-2">
+          <Pressable onPress={onBack} hitSlop={8} className="active:opacity-60">
+            <ChevronLeft size={20} color={ink.fg} strokeWidth={1.75} />
+          </Pressable>
+          <VaultMark />
+        </View>
+        <Text className="text-base font-semibold">Passkeys</Text>
+      </View>
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{ gap: 16, paddingBottom: 16 } as never}
+      >
+        <View style={{ gap: 8 } as never}>
+          <Button onPress={onAdd}>
+            <View className="flex-row items-center justify-center gap-2">
+              <Plus size={16} color={ink.bg} strokeWidth={2} />
+              <Text className="text-sm font-medium" style={{ color: ink.bg } as never}>
+                Add passkey
+              </Text>
+            </View>
+          </Button>
+          <Text className="text-xs text-muted-foreground">
+            Register a new passkey for this account using your browser&apos;s built-in WebAuthn
+            dialog.
+          </Text>
+        </View>
+        <View className="rounded-lg border border-border p-3" style={{ gap: 8 } as never}>
+          <View className="flex-row items-center gap-2">
+            <ShieldAlert size={16} color={ink.fg} strokeWidth={1.75} />
+            <Text className="flex-1 text-sm font-medium">
+              Rename or remove passkeys in the main app
+            </Text>
+          </View>
+          <Text className="text-xs leading-4 text-muted-foreground">
+            Renaming and deleting passkeys requires multi-factor verification. The extension popup
+            doesn&apos;t surface a TOTP prompt today, so those actions live in the main Vault app
+            (web or mobile).
+          </Text>
+          <View className="mt-1">
+            <Button variant="outline" onPress={() => {}}>
+              <View className="flex-row items-center justify-center gap-2">
+                <ExternalLink size={14} color={ink.fg} strokeWidth={1.75} />
+                <Text className="text-[13px] font-medium">Open the main app</Text>
+              </View>
+            </Button>
+            <Text className="mt-1 text-[11px] text-muted-foreground" numberOfLines={1}>
+              vault.example.com
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+function ExtEnroll({ ink, onBack }: { ink: ReturnType<typeof useInk>; onBack: () => void }) {
+  return (
+    <View className="flex-1">
+      <View className="flex-row items-center gap-2 px-4 py-3">
+        <Pressable onPress={onBack} hitSlop={8} className="active:opacity-60">
+          <ChevronLeft size={20} color={ink.fg} strokeWidth={1.75} />
+        </Pressable>
+        <VaultMark />
+      </View>
+      <ScrollView className="flex-1" contentContainerStyle={{ padding: 16 } as never}>
+        <PasskeyEnroll ink={ink} />
+      </ScrollView>
+    </View>
+  );
+}
+
+// Server URL editor (ServerConfigScreen). Test runs a (mocked) reachability
+// check and shows the same success banner the real screen does.
+// Real reachability probe — ports api/health.ts. Parses the URL, GETs
+// `<url>/health`, and only reports success on a JSON `{status:"healthy"}`.
+// A bad URL or unreachable host genuinely fails (no mock), so a typo can't
+// "pass". Cross-origin servers without CORS show as unreachable — honest for
+// a probe fired from the browser.
+type HealthResult = { ok: boolean; message: string } | null;
+
+async function probeServer(rawUrl: string): Promise<HealthResult> {
+  const trimmed = rawUrl.trim();
+  let parsed: URL;
+  try {
+    parsed = new URL(trimmed);
+  } catch {
+    return { ok: false, message: "Invalid URL format" };
+  }
+  const target = `${trimmed.replace(/\/+$/, "")}/health`;
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), 8000);
+  try {
+    const res = await fetch(target, { method: "GET", credentials: "omit", signal: ctrl.signal });
+    if (!res.ok) {
+      return { ok: false, message: `Server responded with HTTP ${res.status}` };
+    }
+    let body: { status?: string; version?: string } = {};
+    try {
+      body = (await res.json()) as { status?: string; version?: string };
+    } catch {
+      return { ok: false, message: "Unexpected response body" };
+    }
+    if (body.status !== "healthy") {
+      return { ok: false, message: `Server reported status: ${body.status ?? "unknown"}` };
+    }
+    return {
+      ok: true,
+      message: body.version ? `Server reachable (version ${body.version})` : "Server reachable",
+    };
+  } catch (e) {
+    const reason = e instanceof Error ? e.message : "network error";
+    if (parsed.protocol === "https:" && reason.toLowerCase().includes("certificate")) {
+      return { ok: false, message: "TLS certificate validation failed" };
+    }
+    if (reason.toLowerCase().includes("abort") || reason.toLowerCase().includes("timeout")) {
+      return { ok: false, message: "Request timed out" };
+    }
+    return { ok: false, message: `Could not reach server (${reason})` };
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+function ExtServerConfig({ ink, onBack }: { ink: ReturnType<typeof useInk>; onBack: () => void }) {
+  const DEFAULT_URL = "https://vault.example.com/api";
+  const [url, setUrl] = useState(DEFAULT_URL);
+  const [testing, setTesting] = useState(false);
+  const [result, setResult] = useState<HealthResult>(null);
+
+  async function test() {
+    setTesting(true);
+    setResult(null);
+    const r = await probeServer(url);
+    setResult(r);
+    setTesting(false);
+  }
+
+  return (
+    <ScrollView className="flex-1" contentContainerStyle={{ padding: 24, gap: 16 } as never}>
+      <View className="items-start" style={{ marginBottom: 8 } as never}>
+        <VaultMark />
+      </View>
+      <View style={{ gap: 4, marginBottom: 4 } as never}>
+        <Text className="text-[22px] font-semibold">Server URL</Text>
+        <Text className="text-[13px] text-muted-foreground">
+          Point this extension at your self-hosted Vault server. HTTPS required (loopback may use
+          HTTP).
+        </Text>
+      </View>
+      <ExtField
+        label="URL"
+        placeholder="https://vault.example.com/api"
+        value={url}
+        onChange={(v) => {
+          setUrl(v);
+          setResult(null);
+        }}
+        ink={ink}
+      />
+      {result && (
+        <View
+          className="rounded-lg border p-2.5"
+          style={
+            {
+              borderColor: result.ok ? "rgb(34,197,94)" : ink.danger,
+              backgroundColor: result.ok ? "rgba(34,197,94,0.08)" : "rgba(239,68,68,0.08)",
+            } as never
+          }
+        >
+          <Text
+            className="text-[13px] font-medium"
+            style={{ color: result.ok ? "rgb(34,197,94)" : ink.danger } as never}
+          >
+            {result.ok ? "✓ " : "✗ "}
+            {result.message}
+          </Text>
+        </View>
+      )}
+      <View className="flex-row gap-2">
+        <View className="flex-1">
+          <Button variant="outline" onPress={test} isLoading={testing}>
+            {testing ? "" : "Test"}
+          </Button>
+        </View>
+        <View className="flex-1">
+          <Button onPress={onBack}>Save</Button>
+        </View>
+      </View>
+      <Button
+        variant="ghost"
+        onPress={() => {
+          setUrl(DEFAULT_URL);
+          setResult(null);
+        }}
+      >
+        Reset to default
+      </Button>
+      <Pressable
+        onPress={onBack}
+        className="items-center active:opacity-60"
+        style={{ marginTop: 4 } as never}
+      >
+        <Text className="text-[13px] text-muted-foreground">Back</Text>
+      </Pressable>
+    </ScrollView>
+  );
+}
+
+function ExtField({
+  label,
+  placeholder,
+  value,
+  onChange,
+  ink,
+  secret,
+}: {
+  label: string;
+  placeholder: string;
+  value: string;
+  onChange: (v: string) => void;
+  ink: ReturnType<typeof useInk>;
+  secret?: boolean;
+}) {
+  const [show, setShow] = useState(false);
+  return (
+    <View style={{ gap: 6 } as never}>
+      <Text className="text-xs text-muted-foreground">{label}</Text>
+      <View
+        className="flex-row items-center rounded-lg border border-border px-3"
+        style={{ height: 40 } as never}
+      >
+        <TextInput
+          value={value}
+          onChangeText={onChange}
+          placeholder={placeholder}
+          placeholderTextColor={ink.muted}
+          secureTextEntry={secret && !show}
+          className="flex-1 text-sm text-foreground"
+          style={{ outlineStyle: "none" } as never}
+        />
+        {secret && (
+          <Pressable onPress={() => setShow((s) => !s)} className="active:opacity-60">
+            {show ? <EyeOff size={16} color={ink.muted} /> : <Eye size={16} color={ink.muted} />}
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}
+
+// New / edit login form (clients/extension VaultItemFormScreen). With `item`
+// the fields prefill and the screen acts as the editor.
+function ExtItemForm({
+  ink,
+  onCancel,
+  item,
+}: {
+  ink: ReturnType<typeof useInk>;
+  onCancel: () => void;
+  item?: Item;
+}) {
+  const acc = item?.accounts[0];
+  const [fav, setFav] = useState(item?.favorite ?? false);
+  const [picked, setPicked] = useState<string[]>(item?.tags.map((t) => t.name) ?? []);
+  const [f, setF] = useState({
+    name: item?.name ?? "",
+    url: item?.url ?? "",
+    label: "",
+    username: acc?.username ?? "",
+    password: acc?.password ?? "",
+    totp: acc?.totp_secret ?? "",
+    notes: acc?.notes ?? "",
+  });
+  const set = (k: keyof typeof f) => (v: string) => setF((s) => ({ ...s, [k]: v }));
+  const allTags = Object.values(T);
+  return (
+    <View className="flex-1">
+      <View className="flex-row items-center justify-between border-b border-border px-4 py-3">
+        <Pressable onPress={onCancel} className="active:opacity-70">
+          <ArrowLeft size={20} color={ink.fg} />
+        </Pressable>
+        <Text className="text-base font-bold">{item ? "Edit item" : "New item"}</Text>
+        <Pressable onPress={() => setFav((v) => !v)} className="active:opacity-70">
+          <Star
+            size={20}
+            color={fav ? ink.star : ink.muted}
+            fill={fav ? ink.star : "transparent"}
+          />
+        </Pressable>
+      </View>
+      <ScrollView className="flex-1" contentContainerStyle={{ padding: 16, gap: 14 } as never}>
+        <ExtField
+          label="Name"
+          placeholder="e.g. Google"
+          value={f.name}
+          onChange={set("name")}
+          ink={ink}
+        />
+        <ExtField
+          label="URL"
+          placeholder="https://example.com"
+          value={f.url}
+          onChange={set("url")}
+          ink={ink}
+        />
+        <View style={{ gap: 6 } as never}>
+          <Text className="text-xs text-muted-foreground">Tags</Text>
+          <View className="flex-row flex-wrap gap-1.5">
+            {allTags.map((t) => {
+              const on = picked.includes(t.name);
+              const Icon = t.icon === "circle" ? CircleIcon : t.icon === "star" ? Star : TagIcon;
+              return (
+                <Pressable
+                  key={t.name}
+                  onPress={() =>
+                    setPicked((s) => (on ? s.filter((x) => x !== t.name) : [...s, t.name]))
+                  }
+                  className="flex-row items-center gap-1 rounded-md border px-2 py-1"
+                  style={
+                    {
+                      borderColor: `${t.color}${on ? "" : "55"}`,
+                      backgroundColor: on ? `${t.color}22` : "transparent",
+                    } as never
+                  }
+                >
+                  <Icon size={11} color={t.color} />
+                  <Text className="text-xs">{t.name}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+        <View className="rounded-lg border border-border bg-card p-3" style={{ gap: 12 } as never}>
+          <ExtField
+            label="Label"
+            placeholder="e.g. Personal, Work"
+            value={f.label}
+            onChange={set("label")}
+            ink={ink}
+          />
+          <ExtField
+            label="Username"
+            placeholder="you@example.com"
+            value={f.username}
+            onChange={set("username")}
+            ink={ink}
+          />
+          <ExtField
+            label="Password"
+            placeholder="••••••••"
+            value={f.password}
+            onChange={set("password")}
+            ink={ink}
+            secret
+          />
+          <ExtField
+            label="TOTP secret (base32)"
+            placeholder="JBSWY3DPEHPK3PXP"
+            value={f.totp}
+            onChange={set("totp")}
+            ink={ink}
+          />
+          <ExtField
+            label="Notes"
+            placeholder="Optional"
+            value={f.notes}
+            onChange={set("notes")}
+            ink={ink}
+          />
+        </View>
+        <Pressable
+          onPress={() => {}}
+          className="flex-row items-center justify-center gap-2 rounded-lg border border-border py-2.5 active:opacity-80"
+        >
+          <Plus size={16} color={ink.fg} />
+          <Text className="text-sm font-medium">Add account</Text>
+        </Pressable>
+        <View className="flex-row gap-2 pt-1">
+          <View className="flex-1">
+            <Button variant="outline" onPress={onCancel}>
+              Cancel
+            </Button>
+          </View>
+          <View className="flex-1">
+            <Button onPress={onCancel}>{item ? "Save changes" : "Create"}</Button>
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+function ExtModal({
+  title,
+  ink,
+  children,
+}: {
+  title: string;
+  ink: ReturnType<typeof useInk>;
+  children: React.ReactNode;
+}) {
+  void ink;
+  return (
+    <View
+      className="absolute inset-0 z-50 items-center justify-center p-5"
+      style={{ backgroundColor: "rgba(0,0,0,0.4)" } as never}
+    >
+      <View
+        className="w-full rounded-xl border border-border bg-card p-4"
+        style={{ maxWidth: 320, gap: 14 } as never}
+      >
+        <Text className="text-sm font-bold">{title}</Text>
+        {children}
+      </View>
+    </View>
+  );
+}
+
+const TAG_COLORS = ["#3b82f6", "#22c55e", "#f59e0b", "#a855f7", "#06b6d4", "#ef4444"];
+
+function ExtTagModal({
+  ink,
+  onClose,
+  tag,
+}: {
+  ink: ReturnType<typeof useInk>;
+  onClose: () => void;
+  tag?: DTag;
+}) {
+  const [name, setName] = useState(tag?.name ?? "");
+  const [color, setColor] = useState(tag?.color ?? TAG_COLORS[0]);
+  return (
+    <ExtModal title={tag ? "Edit tag" : "New tag"} ink={ink}>
+      <ExtField label="Name" placeholder="Personal" value={name} onChange={setName} ink={ink} />
+      <View style={{ gap: 6 } as never}>
+        <Text className="text-xs text-muted-foreground">Color</Text>
+        <View className="flex-row gap-2">
+          {TAG_COLORS.map((c) => (
+            <Pressable
+              key={c}
+              onPress={() => setColor(c)}
+              style={
+                {
+                  width: 28,
+                  height: 28,
+                  borderRadius: 999,
+                  backgroundColor: c,
+                  borderWidth: color === c ? 2 : 0,
+                  borderColor: ink.fg,
+                } as never
+              }
+            />
+          ))}
+        </View>
+      </View>
+      <View className="flex-row gap-2">
+        <View className="flex-1">
+          <Button variant="outline" onPress={onClose}>
+            Cancel
+          </Button>
+        </View>
+        <View className="flex-1">
+          <Button onPress={onClose}>{tag ? "Save" : "Create"}</Button>
+        </View>
+      </View>
+    </ExtModal>
+  );
+}
+
+function ExtFolderModal({
+  ink,
+  onClose,
+  folder,
+}: {
+  ink: ReturnType<typeof useInk>;
+  onClose: () => void;
+  folder?: DFolder;
+}) {
+  const [name, setName] = useState(folder?.name ?? "");
+  return (
+    <ExtModal title={folder ? "Edit folder" : "New folder"} ink={ink}>
+      <ExtField label="Name" placeholder="Work" value={name} onChange={setName} ink={ink} />
+      <View className="flex-row gap-2">
+        <View className="flex-1">
+          <Button variant="outline" onPress={onClose}>
+            Cancel
+          </Button>
+        </View>
+        <View className="flex-1">
+          <Button onPress={onClose}>{folder ? "Save" : "Create"}</Button>
+        </View>
+      </View>
+    </ExtModal>
+  );
+}
+
+type ExtTab = "vault" | "tags" | "send" | "secrets";
+export type ExtRoute =
+  | { r: "main" }
+  | { r: "detail"; id: string }
+  | { r: "settings" }
+  | { r: "new" };
+
+// External controller — lets a parent scene drive the popup (route, the
+// highlighted row, the "copied" field, and the list/detail scroll positions)
+// instead of the popup's own internal autoplay. Used by TotpScene so a single
+// scene-level cursor can hand the code off to a browser window.
+function PasskeyEnroll({ ink }: { ink: ReturnType<typeof useInk> }) {
+  const [label, setLabel] = useState("My iPhone");
+  return (
+    <Card
+      className="w-full max-w-[480px] self-center"
+      style={vaultVars(ink.fg === "#ffffff") as never}
+    >
+      <CardHeader className="items-center">
+        <View className="mb-3 h-16 w-16 items-center justify-center rounded-full bg-secondary">
+          <KeyRound size={30} color={ink.fg} />
+        </View>
+        <CardTitle className="text-center">Add a passkey</CardTitle>
+        <CardDescription className="text-center">
+          Passkeys are a faster, phishing-resistant way to sign in. Use Face ID, Touch ID, or a
+          hardware key.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="gap-4">
+        <View className="flex-row items-start gap-2 rounded-lg bg-secondary p-3">
+          <View className="mt-0.5">
+            <Fingerprint size={16} color={ink.muted} />
+          </View>
+          <MutedText className="flex-1 text-xs leading-4">
+            Your passkey stays on this device (or in iCloud Keychain / Google Password Manager).
+            Vault never sees the private key.
+          </MutedText>
+        </View>
+        <View className="gap-1.5">
+          <Text className="text-xs text-muted-foreground">Passkey name</Text>
+          <View className="rounded-lg border border-border px-3 py-2.5">
+            <TextInput
+              value={label}
+              onChangeText={setLabel}
+              placeholder="My iPhone"
+              placeholderTextColor={ink.muted}
+              className="text-sm text-foreground"
+              style={{ outlineStyle: "none" } as never}
+            />
+          </View>
+          <MutedText className="text-xs">
+            Used to identify this passkey in your settings list.
+          </MutedText>
+        </View>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 border-t-0">
+        <Button className="w-full">Create passkey</Button>
+      </CardFooter>
+    </Card>
+  );
+}
+
+// ── embedded single demo (registry) ───────────────────────────────────────────
+
+/**
+ * A parent-driven view of the popup.
+ *
+ * Lets a scene puppet the popup — scroll the list, highlight a row, open it,
+ * show a field as copied — while the popup keeps owning how any of that looks.
+ * All of it is RN-safe, which is why it survived the move.
+ *
+ * What did NOT survive is the original's self-driving `auto` mode: it steered a
+ * synthetic cursor with `querySelector` and `getBoundingClientRect`, which have
+ * no meaning on native. A scene that wants that keeps its own cursor and drives
+ * this controller instead.
+ */
+export interface ExtensionPopupController {
+  route: ExtRoute;
+  highlightId: string | null;
+  autoCopied: string | null;
+  listScrollRef: React.Ref<ScrollView>;
+  detailScrollRef: React.Ref<ScrollView>;
+}
+
+/**
+ * The browser-extension popup.
+ *
+ * Interactive by default. Pass `external` to have a parent scene drive it.
+ */
+export function ExtensionPopup({
+  logo,
+  external,
+  height = EXTENSION_POPUP_HEIGHT,
+}: {
+  logo?: React.ReactNode;
+  external?: ExtensionPopupController;
+  /** Frame height. Defaults to the full 600; see `EXTENSION_POPUP_HEIGHT`. */
+  height?: number;
+} = {}) {
+  const ink = useInk();
+  const dark = ink.fg === "#ffffff";
+  const [tab, setTab] = useState<ExtTab>("vault");
+  const [route, setRoute] = useState<ExtRoute>({ r: "main" });
+  const [modal, setModal] = useState<"tag" | "folder" | null>(null);
+  const [items, setItems] = useState<Item[]>(ITEMS);
+  const driven = !!external;
+  const vroute = external ? external.route : route;
+  const openItem = vroute.r === "detail" ? (items.find((i) => i.id === vroute.id) ?? null) : null;
+
+  return (
+    <View
+      className="relative self-center overflow-hidden rounded-xl border border-border bg-background"
+      style={[vaultVars(dark), { width: EXTENSION_POPUP_WIDTH, height }] as never}
+      // A driven popup is a picture, not a control: taps would fight the scene.
+      pointerEvents={driven ? "none" : "auto"}
+    >
+      {vroute.r === "detail" && openItem ? (
+        <ItemDetail
+          item={openItem}
+          ink={ink}
+          onBack={() => setRoute({ r: "main" })}
+          onDelete={() => {
+            const id = openItem.id;
+            setItems((s) => s.filter((i) => i.id !== id));
+            setRoute({ r: "main" });
+          }}
+          forceCopiedLabel={driven ? external?.autoCopied : undefined}
+          scrollRef={external?.detailScrollRef}
+        />
+      ) : vroute.r === "settings" ? (
+        <ExtSettings ink={ink} onBack={() => setRoute({ r: "main" })} />
+      ) : vroute.r === "new" ? (
+        <ExtItemForm ink={ink} onCancel={() => setRoute({ r: "main" })} />
+      ) : (
+        <View className="flex-1">
+          {/* Vault + Tags tabs show the logo header (matches the app); Send and
+              Secrets are full-screen "coming soon" with no header. */}
+          {(tab === "vault" || tab === "tags") && (
+            <ExtHeader
+              logo={logo}
+              tab={tab}
+              ink={ink}
+              onAdd={() => (tab === "tags" ? setModal("tag") : setRoute({ r: "new" }))}
+              onAddFolder={() => setModal("folder")}
+              onSettings={() => setRoute({ r: "settings" })}
+            />
+          )}
+
+          <View className="flex-1">
+            {tab === "vault" && (
+              <VaultList
+                ink={ink}
+                items={items}
+                onOpen={(id) => setRoute({ r: "detail", id })}
+                scrollRef={external?.listScrollRef}
+                highlightId={external?.highlightId}
+              />
+            )}
+            {tab === "tags" && <ExtTagsTab ink={ink} />}
+            {tab === "send" && (
+              <ExtComingSoon
+                ink={ink}
+                icon={<Send size={28} color={ink.muted} />}
+                desc="Send files securely via link or email with permissions, auto-expiry, and encryption."
+              />
+            )}
+            {tab === "secrets" && (
+              <ExtComingSoon
+                ink={ink}
+                icon={<KeyRound size={28} color={ink.muted} />}
+                desc="Manage API keys, tokens, environment variables, and other developer secrets."
+              />
+            )}
+          </View>
+
+          <ExtBottomNav
+            active={tab}
+            onChange={(t) => {
+              setTab(t);
+              setRoute({ r: "main" });
+            }}
+            ink={ink}
+          />
+
+          {modal === "tag" && <ExtTagModal ink={ink} onClose={() => setModal(null)} />}
+          {modal === "folder" && <ExtFolderModal ink={ink} onClose={() => setModal(null)} />}
+        </View>
+      )}
+    </View>
+  );
+}
+
+export default ExtensionPopup;