@volter/twin-tiktok 0.1.37 → 1.0.0

package/client/tiktok-mirror.css

@@ -1,137 +0,0 @@
-/* TikTok mirror — tiktok.com's own look, copied on purpose. A vendor-mirror stylesheet: exempt from the
-   Volter brand (the .githooks brand check reads only the Volter-branded sheets). */
-:root {
-  --bg: #fff;
-  --text: #161823;
-  --muted: rgba(22, 24, 35, 0.5);
-  --line: rgba(22, 24, 35, 0.12);
-  --fill: rgba(22, 24, 35, 0.06);
-  --fill-hover: rgba(22, 24, 35, 0.12);
-  --red: #fe2c55;
-  --red-hover: #ef2950;
-  --cyan: #25f4ee;
-  --font: "TikTokFont", "ProximaNova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-}
-* { box-sizing: border-box; }
-html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.35; }
-a { color: inherit; text-decoration: none; }
-button { font-family: inherit; color: inherit; }
-code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
-.muted { color: var(--muted); }
-.loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
-
-/* ── the logo ────────────────────────────────────────────────────────────── */
-.logo { display: inline-flex; align-items: center; gap: 4px; color: #000; }
-.logo-word { font-size: 27px; font-weight: 800; letter-spacing: -0.8px; }
-
-/* ── layout: the left nav and the main column ────────────────────────────── */
-.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
-.sidenav { position: sticky; top: 0; height: 100vh; padding: 16px 8px 12px 16px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
-.nav-logo { padding: 2px 8px 14px; }
-.nav-search { margin: 0 8px 10px 0; height: 40px; border-radius: 92px; background: var(--fill); color: var(--muted); display: flex; align-items: center; padding: 0 16px; font-size: 15px; }
-.nav-item { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px; border: 0; background: transparent; border-radius: 6px; font-size: 18px; font-weight: 700; cursor: pointer; text-align: left; }
-.nav-item:hover { background: var(--fill); }
-.nav-item.active { color: var(--red); }
-.nav-item .avatar { font-size: 14px !important; }
-.nav-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
-.nav-signout { border: 0; background: transparent; padding: 0; text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
-.nav-signout:hover { color: var(--text); }
-.main { min-width: 0; padding: 32px 24px 48px 40px; }
-
-/* ── avatars, badges ─────────────────────────────────────────────────────── */
-.avatar { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; user-select: none; }
-.verified { position: relative; display: inline-flex; color: #20d5ec; flex: none; }
-.verified-check { position: absolute; inset: 0; color: #fff; }
-
-/* ── the profile header ──────────────────────────────────────────────────── */
-.profile { max-width: 1320px; }
-.profile-header { display: flex; gap: 28px; align-items: flex-start; }
-.profile-info { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; min-width: 0; }
-.profile-names { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.profile-username { margin: 0; font-size: 32px; line-height: 38px; font-weight: 700; }
-.profile-nickname { margin: 0; font-size: 18px; font-weight: 600; }
-.profile-buttons { display: flex; gap: 8px; }
-.btn { height: 40px; min-width: 104px; padding: 0 20px; border-radius: 8px; border: 0; font-size: 16px; font-weight: 600; cursor: pointer; }
-.btn-red { background: var(--red); color: #fff; }
-.btn-red:hover { background: var(--red-hover); }
-.btn-gray { background: var(--fill); }
-.btn-gray:hover { background: var(--fill-hover); }
-.profile-stats { display: flex; gap: 20px; font-size: 16px; }
-.stat strong { font-weight: 700; margin-right: 6px; }
-.stat-label { color: var(--muted); }
-.profile-bio { margin: 0; white-space: pre-wrap; max-width: 560px; }
-.profile-missing { padding: 120px 0; text-align: center; }
-
-/* ── tabs, sort ──────────────────────────────────────────────────────────── */
-.profile-tabs { margin-top: 28px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
-.ptab { display: inline-flex; align-items: center; gap: 6px; height: 44px; min-width: 140px; justify-content: center; border: 0; background: transparent; font-size: 18px; font-weight: 600; color: var(--muted); cursor: pointer; position: relative; }
-.ptab:hover { color: var(--text); }
-.ptab.active { color: var(--text); }
-.ptab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); }
-.sort { margin-left: auto; margin-bottom: 6px; display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--fill); font-size: 14px; font-weight: 600; }
-.sort span { padding: 6px 12px; border-radius: 4px; color: var(--muted); }
-.sort .sort-on { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
-
-/* ── the grid: 9:16 tiles ────────────────────────────────────────────────── */
-.grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 24px 16px; }
-.tile { position: relative; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden; background: #000; cursor: pointer; }
-.tile-video { width: 100%; height: 100%; object-fit: cover; display: block; }
-.tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); pointer-events: none; }
-.tile-views { position: absolute; z-index: 1; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: 16px; font-weight: 700; }
-.tile-views svg { fill: none; stroke: #fff; }
-.tile-fallback { position: absolute; inset: 0; padding: 16px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 600; background: linear-gradient(160deg, #2b2b35, #111); }
-.caption .tag { font-weight: 700; }
-.empty { padding: 96px 0; text-align: center; }
-.empty h3 { margin: 0 0 8px; font-size: 24px; }
-.show-more { margin: 24px auto 0; display: block; height: 40px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--fill); font-weight: 600; cursor: pointer; }
-
-/* ── the vertical player ─────────────────────────────────────────────────── */
-.player-page { position: fixed; inset: 0; background: #000; color: #fff; overflow: hidden; }
-.player-backdrop { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(40px) brightness(0.3) saturate(0.8); transform: scale(1.1); }
-.player-close { position: absolute; z-index: 3; top: 20px; left: 20px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(84, 84, 84, 0.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
-.player-close:hover { background: rgba(120, 120, 120, 0.6); }
-.player-logo { position: absolute; z-index: 3; top: 22px; left: 76px; }
-.player-logo .logo { color: #fff; }
-.player-logo .logo-word { font-size: 24px; }
-.player-stage { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding: 12px 0; }
-.player-frame { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; }
-.player-video { width: 100%; height: 100%; object-fit: cover; display: block; }
-.player-sound-toggle { position: absolute; z-index: 2; top: 14px; left: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(84, 84, 84, 0.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
-.player-paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); pointer-events: none; }
-.player-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); pointer-events: none; }
-.player-caption { position: absolute; left: 16px; right: 16px; bottom: 44px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); pointer-events: none; }
-.player-author { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 700; }
-.player-text { max-height: 60px; overflow: hidden; }
-.player-sound { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
-.player-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; }
-.player-toggle { width: 24px; height: 24px; border: 0; padding: 0; background: transparent; color: #fff; cursor: pointer; }
-.player-track { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.34); overflow: hidden; }
-.player-progress { height: 100%; background: #fff; }
-.player-time { font-size: 12px; font-variant-numeric: tabular-nums; }
-.player-missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
-.rail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 40px; }
-.rail-avatar { position: relative; margin-bottom: 10px; }
-.rail-avatar .avatar { border: 1px solid #fff; }
-.rail-plus { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 18px; font-weight: 700; line-height: 21px; text-align: center; }
-.rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; min-height: 70px; }
-.rail-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(84, 84, 84, 0.5); display: flex; align-items: center; justify-content: center; color: #fff; }
-.player-nav { position: absolute; z-index: 3; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; }
-.player-nav button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(84, 84, 84, 0.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
-.player-nav button:disabled { opacity: 0.35; cursor: default; }
-
-/* ── the login form ──────────────────────────────────────────────────────── */
-.login-backdrop { min-height: 100vh; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
-.login { width: 483px; max-width: 94vw; background: #fff; border-radius: 8px; padding: 48px 48px 0; display: flex; flex-direction: column; align-items: stretch; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25); }
-.login-logo { display: flex; justify-content: center; margin-bottom: 8px; }
-.login-form { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; }
-.login-form h1 { margin: 8px 0 12px; text-align: center; font-size: 32px; font-weight: 700; }
-.login-sub { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
-.login-input { height: 44px; padding: 0 12px; border-radius: 4px; border: 1px solid rgba(22, 24, 35, 0.12); background: rgba(22, 24, 35, 0.06); font-size: 16px; font-family: inherit; outline: none; }
-.login-input:focus { border-color: rgba(22, 24, 35, 0.2); }
-.login-error { color: var(--red); font-size: 13px; }
-.btn-login { height: 46px; border: 0; border-radius: 4px; background: var(--red); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 12px; }
-.btn-login:disabled { background: rgba(22, 24, 35, 0.06); color: rgba(22, 24, 35, 0.34); cursor: default; }
-.login-note { font-size: 12px; line-height: 16px; }
-.link { border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
-.login-foot { margin: 0 -48px; padding: 18px; border-top: 1px solid var(--line); text-align: center; font-size: 15px; }
-.link-red { color: var(--red); font-weight: 600; }

package/client/tiktok-mirror.tsx

@@ -1,497 +0,0 @@
-// TikTok mirror — React/TSX client. tiktok.com's own view of the twin's state: log in as the creator,
-// read their profile over the Videos grid, and open a post in the vertical player. Every read is the
-// twin's OWN Display API on the same origin (GET /v2/user/info/, POST /v2/video/list/); the player
-// plays the posted bytes from the twin's media route. Nothing is kept but the signed-in username and
-// token, in the tab's sessionStorage.
-import { createRoot } from 'react-dom/client';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  avatarHue, avatarInitial, BASIC_FIELDS, captionOf, captionSegments, clock, compactCount, mediaSource, PROFILE_FIELDS, profileStats,
-  VIDEO_PAGE_SIZE, VIDEO_READ_FIELDS, type TtRow,
-} from '../src/tiktok-mirror-ui.ts';
-
-// WHERE THIS MIRROR LIVES. Served at a vendor root the base is '' (fetches are root-relative); served
-// under a path prefix with a <base> tag, every read resolves inside that prefix.
-const WIRE_BASE = typeof document === 'undefined' || document.querySelector('base[href]') === null ? '' : new URL('.', document.baseURI).pathname.replace(/\/$/, '');
-
-const SESSION_HANDLE = 'tiktok-mirror.username';
-const SESSION_TOKEN = 'tiktok-mirror.token';
-
-type Session = { handle: string; token: string };
-type Wire = { status: number; body: TtRow };
-
-function readSession(): Session | null {
-  if (typeof sessionStorage === 'undefined') return null;
-  // the World signed these screens in as the account its config names (`signIn.as`): taken once, as a sign-in would
-  // (off the page once taken, and not again in this tab once the person signs out)
-  const w = window as { __VOLTER_SIGN_IN__?: { account: string; token: string } };
-  const given = sessionStorage.getItem('volter.signedOut') ? undefined : w.__VOLTER_SIGN_IN__; delete w.__VOLTER_SIGN_IN__;
-  if (given && !sessionStorage.getItem(SESSION_TOKEN)) { sessionStorage.setItem(SESSION_HANDLE, given.account); sessionStorage.setItem(SESSION_TOKEN, given.token); }
-  const handle = sessionStorage.getItem(SESSION_HANDLE);
-  const token = sessionStorage.getItem(SESSION_TOKEN);
-  return handle && token ? { handle, token } : null;
-}
-
-async function wire(token: string, path: string, init?: { method?: string; body?: unknown }): Promise<Wire> {
-  const res = await fetch(`${WIRE_BASE}${path}`, {
-    method: init?.method ?? 'GET',
-    headers: { authorization: `Bearer ${token}`, ...(init?.body !== undefined ? { 'content-type': 'application/json' } : {}) },
-    ...(init?.body !== undefined ? { body: JSON.stringify(init.body) } : {}),
-  });
-  let body: TtRow = {};
-  try { body = await res.json() as TtRow; } catch { body = {}; }
-  return { status: res.status, body };
-}
-
-/** TikTok's nested error, as one sentence for the screen. */
-const errorText = (w: Wire): string => String(w.body?.error?.message ?? `HTTP ${w.status}`);
-const errorCode = (w: Wire): string => String(w.body?.error?.code ?? '');
-
-/** The signed-in creator: every profile field, or — for a token without the profile/stats scopes —
- *  the basic ones, so the header shows what the twin returns and nothing it does not. */
-async function readMe(token: string): Promise<Wire> {
-  const full = await wire(token, `/v2/user/info/?fields=${PROFILE_FIELDS}`);
-  if (full.status === 401 && errorCode(full) === 'scope_not_authorized') return wire(token, `/v2/user/info/?fields=${BASIC_FIELDS}`);
-  return full;
-}
-
-// ── routing: hash routes, so the shell answers every screen under any mount ─────────────────────
-type Route = { page: 'login' } | { page: 'profile'; handle: string } | { page: 'video'; handle: string; id: string };
-
-function parseRoute(hash: string): Route | null {
-  const parts = hash.replace(/^#\/?/, '').split('/').filter(Boolean);
-  if (parts.length === 0) return null;
-  if (parts[0] === 'login') return { page: 'login' };
-  const handle = decodeURIComponent(parts[0]!).replace(/^@/, '');
-  if (parts[1] === 'video' && parts[2]) return { page: 'video', handle, id: parts[2] };
-  return { page: 'profile', handle };
-}
-const go = (path: string) => { location.hash = `#/${path}`; };
-
-// ── icons (vendor mirror: tiktok.com's look, drawn here) ────────────────────────────────────────
-const NOTE = 'M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6 0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64 0 3.33 2.76 5.7 5.69 5.7 3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48z';
-export function Logo({ size = 34, word = true }: { size?: number; word?: boolean }) {
-  return (
-    <span className="logo">
-      <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
-        <path d={NOTE} fill="#25F4EE" transform="translate(-0.9 -0.7)" />
-        <path d={NOTE} fill="#FE2C55" transform="translate(0.9 0.7)" />
-        <path d={NOTE} fill="currentColor" />
-      </svg>
-      {word ? <span className="logo-word">TikTok</span> : null}
-    </span>
-  );
-}
-function Icon({ d, size = 24, fill = false, className }: { d: string[]; size?: number; fill?: boolean; className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" width={size} height={size} aria-hidden="true"
-      fill={fill ? 'currentColor' : 'none'} stroke={fill ? 'none' : 'currentColor'} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
-      {d.map((p) => <path key={p} d={p} />)}
-    </svg>
-  );
-}
-const I_HOME = ['M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3z'];
-const I_EXPLORE = ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z', 'm16.2 7.8-2.1 6.3-6.3 2.1 2.1-6.3z'];
-const I_FOLLOWING = ['M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2', 'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z', 'M19 8v6', 'M22 11h-6'];
-const I_FRIENDS = ['M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2', 'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z', 'M23 21v-2a4 4 0 0 0-3-3.87', 'M16 3.13a4 4 0 0 1 0 7.75'];
-const I_LIVE = ['M4 6h16v12H4z', 'm10 9 5 3-5 3z'];
-const I_UPLOAD = ['M12 5v14', 'M5 12h14'];
-const I_PROFILE = ['M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2', 'M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'];
-const I_PLAY = ['M7 4.5v15l12-7.5z'];
-const I_PAUSE = ['M7 4h3.5v16H7z', 'M13.5 4H17v16h-3.5z'];
-const I_CLOSE = ['M18 6 6 18', 'm6 6 12 12'];
-const I_UP = ['m18 15-6-6-6 6'];
-const I_DOWN = ['m6 9 6 6 6-6'];
-const I_SHARE_ARROW = ['M14 4.5V9C7 9 3.5 13 3 19.5c2-3.5 5-5 11-5V19l7-7.25z'];
-const I_HEART = ['M12 21s-7.5-4.6-9.6-9.2C.9 8.4 2.9 4.5 6.7 4.5c2.2 0 3.7 1.2 5.3 3 1.6-1.8 3.1-3 5.3-3 3.8 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'];
-const I_COMMENT = ['M12 3C6.5 3 2 6.9 2 11.7c0 2.6 1.3 4.9 3.4 6.5L4.7 22l4.6-2.4c.9.2 1.8.3 2.7.3 5.5 0 10-3.9 10-8.7S17.5 3 12 3z'];
-const I_BOOKMARK = ['M6 2.5h12a1 1 0 0 1 1 1V22l-7-4.5L5 22V3.5a1 1 0 0 1 1-1z'];
-const I_VERIFIED = ['M12 1.5 14.6 3.4l3.2-.2.9 3.1 2.8 1.6-1 3.1 1 3.1-2.8 1.6-.9 3.1-3.2-.2L12 22.5l-2.6-1.9-3.2.2-.9-3.1-2.8-1.6 1-3.1-1-3.1 2.8-1.6.9-3.1 3.2.2z'];
-const I_CHECK = ['m7.5 12.2 3 3 6-6.4'];
-const I_MUSIC = ['M9 18V5l12-2v13', 'M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z', 'M18 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'];
-const I_VOLUME = ['M11 5 6 9H2v6h4l5 4z', 'M15.5 8.5a5 5 0 0 1 0 7', 'M19 5a10 10 0 0 1 0 14'];
-const I_MUTED = ['M11 5 6 9H2v6h4l5 4z', 'm22 9-6 6', 'm16 9 6 6'];
-const I_LOCK = ['M5 11h14v10H5z', 'M8 11V7a4 4 0 0 1 8 0v4'];
-const I_GRID = ['M4 4h7v7H4z', 'M13 4h7v7h-7z', 'M4 13h7v7H4z', 'M13 13h7v7h-7z'];
-
-// ── pieces ───────────────────────────────────────────────────────────────────────────────────────
-export function Avatar({ user, size }: { user: TtRow | undefined; size: number }) {
-  return (
-    <div className="avatar" style={{ width: size, height: size, fontSize: size * 0.42, background: `hsl(${avatarHue(user?.union_id ?? user?.username)} 55% 45%)` }} aria-hidden="true">
-      {avatarInitial(user)}
-    </div>
-  );
-}
-
-function Verified({ size = 20 }: { size?: number }) {
-  return (
-    <span className="verified" title="Verified account">
-      <Icon d={I_VERIFIED} fill size={size} />
-      <Icon d={I_CHECK} size={size} className="verified-check" />
-    </span>
-  );
-}
-
-export function Caption({ text }: { text: unknown }) {
-  return (
-    <span className="caption">
-      {captionSegments(text).map((s, i) => s.kind === 'text' ? <span key={i}>{s.value}</span> : <strong key={i} className="tag">{s.value}</strong>)}
-    </span>
-  );
-}
-
-/** The profile header: avatar, @username (h1) with the verified tick, the nickname, the buttons a
- *  creator sees on their own page, the three counts (only those the twin returned) and the bio. */
-export function ProfileHeader({ user, own }: { user: TtRow; own: boolean }) {
-  const stats = profileStats(user);
-  return (
-    <header className="profile-header">
-      <Avatar user={user} size={212} />
-      <div className="profile-info">
-        <div className="profile-names">
-          <h1 className="profile-username">{String(user.username ?? user.display_name ?? '')}</h1>
-          {user.is_verified === true ? <Verified /> : null}
-          <h2 className="profile-nickname">{String(user.display_name ?? '')}</h2>
-        </div>
-        <div className="profile-buttons">
-          {own ? (
-            <>
-              <button className="btn btn-red">Edit profile</button>
-              <button className="btn btn-gray">Promote post</button>
-            </>
-          ) : (
-            <>
-              <button className="btn btn-red">Follow</button>
-              <button className="btn btn-gray">Message</button>
-            </>
-          )}
-        </div>
-        {stats.length > 0 ? (
-          <div className="profile-stats">
-            {stats.map((s) => <span key={s.label} className="stat" data-stat={s.label}><strong>{s.value}</strong><span className="stat-label">{s.label}</span></span>)}
-          </div>
-        ) : null}
-        {typeof user.bio_description === 'string' && user.bio_description !== '' ? <p className="profile-bio">{user.bio_description}</p> : <p className="profile-bio muted">No bio yet.</p>}
-      </div>
-    </header>
-  );
-}
-
-/** One grid tile: the post's own first frame (the twin serves no cover image), 9:16, with the play
- *  count at the bottom left. A post whose bytes the twin does not hold shows its caption instead. */
-export function VideoTile({ video, src, onOpen }: { video: TtRow; src: string; onOpen: () => void }) {
-  const [broken, setBroken] = useState(false);
-  return (
-    <div className="tile" data-video-id={String(video.id)} onClick={onOpen} role="link" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter') onOpen(); }}>
-      {broken ? <div className="tile-fallback"><Caption text={captionOf(video)} /></div> : (
-        <video className="tile-video" src={`${src}#t=0.1`} preload="metadata" muted playsInline onError={() => setBroken(true)}
-          onMouseEnter={(e) => { void e.currentTarget.play().catch(() => undefined); }}
-          onMouseLeave={(e) => { e.currentTarget.pause(); }} />
-      )}
-      {typeof video.view_count === 'number' ? (
-        <span className="tile-views"><Icon d={I_PLAY} size={16} />{compactCount(video.view_count)}</span>
-      ) : null}
-    </div>
-  );
-}
-
-export function VideoGrid({ videos, sourceOf, onOpen }: { videos: TtRow[]; sourceOf: (id: string) => string; onOpen: (id: string) => void }) {
-  return (
-    <div className="grid">
-      {videos.map((v) => <VideoTile key={String(v.id)} video={v} src={sourceOf(String(v.id))} onOpen={() => onOpen(String(v.id))} />)}
-    </div>
-  );
-}
-
-/** The player's overlay: @handle, the caption with its tags, and the sound line TikTok prints for a
- *  video's own audio ("original sound - <nickname>"). */
-export function PlayerCaption({ user, video }: { user: TtRow; video: TtRow }) {
-  return (
-    <div className="player-caption">
-      <div className="player-author">@{String(user.username ?? user.display_name ?? '')}{user.is_verified === true ? <Verified size={16} /> : null}</div>
-      <div className="player-text"><Caption text={captionOf(video)} /></div>
-      <div className="player-sound"><Icon d={I_MUSIC} size={14} /><span>original sound - {String(user.display_name ?? user.username ?? '')}</span></div>
-    </div>
-  );
-}
-
-/** The right-hand action rail: the creator's avatar, then like / comment / save / share, each with the
- *  count the Video Object carries — and no number where the Display API returns none (saves). */
-export function ActionRail({ user, video }: { user: TtRow; video: TtRow }) {
-  const count = (raw: unknown) => (typeof raw === 'number' ? compactCount(raw) : '');
-  return (
-    <div className="rail">
-      <div className="rail-avatar"><Avatar user={user} size={48} /><span className="rail-plus">+</span></div>
-      <div className="rail-item"><span className="rail-btn"><Icon d={I_HEART} fill size={26} /></span><strong>{count(video.like_count)}</strong></div>
-      <div className="rail-item"><span className="rail-btn"><Icon d={I_COMMENT} fill size={26} /></span><strong>{count(video.comment_count)}</strong></div>
-      <div className="rail-item"><span className="rail-btn"><Icon d={I_BOOKMARK} fill size={24} /></span><strong /></div>
-      <div className="rail-item"><span className="rail-btn"><Icon d={I_SHARE_ARROW} fill size={26} /></span><strong>{count(video.share_count)}</strong></div>
-    </div>
-  );
-}
-
-/** The full-height vertical player: the post playing, looped, in a 9:16 frame as tall as the window,
- *  over a blurred copy of itself; tap to pause; the caption and the rail over it; up/down to the
- *  neighbouring posts; close back to the profile. */
-function Player({ user, video, src, prev, next, onClose }: { user: TtRow; video: TtRow; src: string; prev?: string; next?: string; onClose: () => void }) {
-  const ref = useRef<HTMLVideoElement | null>(null);
-  const [paused, setPaused] = useState(false);
-  const [muted, setMuted] = useState(false);
-  const [time, setTime] = useState({ at: 0, of: Number(video.duration) || 0 });
-  const toggle = () => {
-    const el = ref.current;
-    if (!el) return;
-    if (el.paused) { void el.play().catch(() => undefined); setPaused(false); } else { el.pause(); setPaused(true); }
-  };
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-      if (e.key === 'ArrowUp' && prev) go(`@${user.username}/video/${prev}`);
-      if (e.key === 'ArrowDown' && next) go(`@${user.username}/video/${next}`);
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [prev, next, onClose, user.username]);
-  return (
-    <div className="player-page" data-video-id={String(video.id)}>
-      <video className="player-backdrop" src={src} muted autoPlay loop playsInline aria-hidden="true" />
-      <button className="player-close" aria-label="Close" onClick={onClose}><Icon d={I_CLOSE} size={24} /></button>
-      <div className="player-logo"><Logo size={30} /></div>
-      <div className="player-stage">
-        <div className="player-frame" onClick={toggle}>
-          <button className="player-sound-toggle" aria-label={muted ? 'Unmute' : 'Mute'} onClick={(e) => { e.stopPropagation(); setMuted(!muted); }}><Icon d={muted ? I_MUTED : I_VOLUME} size={20} /></button>
-          <video ref={ref} className="player-video" src={src} autoPlay loop playsInline muted={muted}
-            onTimeUpdate={(e) => setTime({ at: e.currentTarget.currentTime, of: e.currentTarget.duration || time.of })}
-            onPlay={() => setPaused(false)} onPause={() => setPaused(true)} />
-          {paused ? <span className="player-paused"><Icon d={I_PLAY} fill size={64} /></span> : null}
-          <div className="player-shade" />
-          <PlayerCaption user={user} video={video} />
-          <div className="player-bar" onClick={(e) => e.stopPropagation()}>
-            <button className="player-toggle" aria-label={paused ? 'Play' : 'Pause'} onClick={toggle}><Icon d={paused ? I_PLAY : I_PAUSE} fill size={18} /></button>
-            <div className="player-track"><div className="player-progress" style={{ width: `${time.of > 0 ? Math.min(100, (time.at / time.of) * 100) : 0}%` }} /></div>
-            <span className="player-time">{clock(time.at)}/{clock(time.of)}</span>
-          </div>
-        </div>
-        <ActionRail user={user} video={video} />
-      </div>
-      <div className="player-nav">
-        <button aria-label="Previous video" disabled={!prev} onClick={() => prev && go(`@${user.username}/video/${prev}`)}><Icon d={I_UP} size={26} /></button>
-        <button aria-label="Next video" disabled={!next} onClick={() => next && go(`@${user.username}/video/${next}`)}><Icon d={I_DOWN} size={26} /></button>
-      </div>
-    </div>
-  );
-}
-
-// ── the creator's videos: POST /v2/video/list/, newest first, paged on the vendor's own cursor ────
-function useVideos(session: Session | null, reloadKey: number): { videos: TtRow[]; error: string | null; more: (() => void) | null; loaded: boolean } {
-  const [videos, setVideos] = useState<TtRow[]>([]);
-  const [cursor, setCursor] = useState<number | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [loaded, setLoaded] = useState(false);
-  const load = useCallback(async (from: number | null, prev: TtRow[]) => {
-    if (!session) return;
-    const w = await wire(session.token, `/v2/video/list/?fields=${VIDEO_READ_FIELDS}`, { method: 'POST', body: { max_count: VIDEO_PAGE_SIZE, ...(from !== null ? { cursor: from } : {}) } });
-    setLoaded(true);
-    if (w.status !== 200) { setError(errorCode(w) === 'scope_not_authorized' ? "This token can't read the account's videos (it needs video.list)." : errorText(w)); return; }
-    setError(null);
-    const page = Array.isArray(w.body?.data?.videos) ? w.body.data.videos as TtRow[] : [];
-    setVideos([...prev, ...page]);
-    setCursor(w.body?.data?.has_more === true ? Number(w.body.data.cursor) : null);
-  }, [session]);
-  useEffect(() => { setVideos([]); setCursor(null); setLoaded(false); void load(null, []); }, [load, reloadKey]);
-  return { videos, error, loaded, more: cursor !== null ? () => void load(cursor, videos) : null };
-}
-
-// ── screens ──────────────────────────────────────────────────────────────────────────────────────
-function SideNav({ me, active, onSignOut }: { me: TtRow | null; active: 'profile' | 'none'; onSignOut: () => void }) {
-  const item = (icon: string[], label: string, on = false, onClick?: () => void) => (
-    <button className={on ? 'nav-item active' : 'nav-item'} onClick={onClick}><Icon d={icon} size={26} /><span>{label}</span></button>
-  );
-  return (
-    <nav className="sidenav">
-      <a className="nav-logo" href={me ? `#/@${me.username}` : '#/'}><Logo /></a>
-      <div className="nav-search"><span>Search</span></div>
-      {item(I_HOME, 'For You')}
-      {item(I_EXPLORE, 'Explore')}
-      {item(I_FOLLOWING, 'Following')}
-      {item(I_FRIENDS, 'Friends')}
-      {item(I_UPLOAD, 'Upload')}
-      {item(I_LIVE, 'LIVE')}
-      {me ? (
-        <button className={active === 'profile' ? 'nav-item active' : 'nav-item'} onClick={() => go(`@${me.username}`)}>
-          <Avatar user={me} size={32} /><span>Profile</span>
-        </button>
-      ) : item(I_PROFILE, 'Profile')}
-      <div className="nav-foot">
-        {me ? <button className="nav-signout" onClick={onSignOut}>Log out @{String(me.username ?? '')}</button> : null}
-        <div className="muted">© 2026 TikTok</div>
-      </div>
-    </nav>
-  );
-}
-
-function ProfileScreen({ session, me, handle }: { session: Session; me: TtRow; handle: string }) {
-  const own = handle === String(me.username ?? '');
-  const read = useVideos(own ? session : null, 0);
-  const [tab, setTab] = useState<'videos' | 'reposts' | 'favorites' | 'liked'>('videos');
-  if (!own) {
-    // The Display API reads only the token's own account; another creator's page is not readable here.
-    return <div className="profile-missing"><h2>Couldn't find this account</h2><p className="muted">Looking for videos? Try browsing our trending creators, hashtags, and sounds.</p></div>;
-  }
-  return (
-    <div className="profile">
-      <ProfileHeader user={me} own />
-      <div className="profile-tabs">
-        <button className={tab === 'videos' ? 'ptab active' : 'ptab'} onClick={() => setTab('videos')}><Icon d={I_GRID} size={18} />Videos</button>
-        <button className={tab === 'reposts' ? 'ptab active' : 'ptab'} onClick={() => setTab('reposts')}>Reposts</button>
-        <button className={tab === 'favorites' ? 'ptab active' : 'ptab'} onClick={() => setTab('favorites')}><Icon d={I_LOCK} size={16} />Favorites</button>
-        <button className={tab === 'liked' ? 'ptab active' : 'ptab'} onClick={() => setTab('liked')}><Icon d={I_LOCK} size={16} />Liked</button>
-        {tab === 'videos' ? <div className="sort"><span className="sort-on">Latest</span><span>Popular</span><span>Oldest</span></div> : null}
-      </div>
-      {tab !== 'videos' ? <div className="empty"><h3>Nothing here yet</h3><p className="muted">This twin models the account's own posts.</p></div>
-        : read.error ? <div className="empty" role="alert">{read.error}</div>
-        : read.loaded && read.videos.length === 0 ? <div className="empty"><h3>Upload your first video</h3><p className="muted">Your videos will appear here</p></div>
-        : (
-          <>
-            <VideoGrid videos={read.videos} sourceOf={(id) => mediaSource(WIRE_BASE, id, session.token)} onOpen={(id) => go(`@${me.username}/video/${id}`)} />
-            {read.more ? <button className="show-more" onClick={read.more}>Load more</button> : null}
-          </>
-        )}
-    </div>
-  );
-}
-
-function VideoScreen({ session, me, id }: { session: Session; me: TtRow; id: string }) {
-  const read = useVideos(session, 0);
-  const at = read.videos.findIndex((v) => String(v.id) === id);
-  const close = useCallback(() => go(`@${me.username}`), [me.username]);
-  if (!read.loaded) return <div className="player-page" />;
-  if (at < 0) return <div className="player-page"><div className="player-missing">Video currently unavailable</div><button className="player-close" aria-label="Close" onClick={close}><Icon d={I_CLOSE} size={24} /></button></div>;
-  return (
-    <Player key={id} user={me} video={read.videos[at]!} src={mediaSource(WIRE_BASE, id, session.token)}
-      {...(at > 0 ? { prev: String(read.videos[at - 1]!.id) } : {})}
-      {...(at < read.videos.length - 1 ? { next: String(read.videos[at + 1]!.id) } : {})}
-      onClose={close} />
-  );
-}
-
-function LoginScreen({ onSignedIn }: { onSignedIn: (s: Session, me: TtRow) => void }) {
-  const [step, setStep] = useState<'username' | 'token'>('username');
-  const [handle, setHandle] = useState('');
-  const [token, setToken] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [busy, setBusy] = useState(false);
-  const clean = handle.trim().replace(/^@/, '');
-  const next = () => {
-    if (!/^[A-Za-z0-9_.]{2,24}$/.test(clean)) { setError("Couldn't find this account"); return; }
-    setError(null); setStep('token');
-  };
-  const login = async () => {
-    setBusy(true);
-    const w = await readMe(token.trim());
-    setBusy(false);
-    if (w.status === 401 && errorCode(w) === 'access_token_invalid') { setError('Incorrect account or password'); return; }
-    if (w.status !== 200 || !w.body?.data?.user) { setError(errorText(w)); return; }
-    const me = w.body.data.user as TtRow;
-    // Is this token THIS account's? The Display API answers the token's own account, so the answer says.
-    if (me.username !== undefined && String(me.username) !== clean) { setError(`That token does not log in as @${clean}.`); return; }
-    onSignedIn({ handle: clean, token: token.trim() }, { ...me, username: me.username ?? clean });
-  };
-  return (
-    <div className="login-backdrop">
-      <div className="login">
-        <div className="login-logo"><Logo size={40} word={false} /></div>
-        {step === 'username' ? (
-          <form className="login-form" onSubmit={(e) => { e.preventDefault(); next(); }}>
-            <h1>Log in to TikTok</h1>
-            <div className="login-sub">Username</div>
-            <input autoFocus name="username" className="login-input" placeholder="Username" value={handle} onChange={(e) => setHandle(e.target.value)} autoComplete="username" />
-            {error ? <div className="login-error" role="alert">{error}</div> : null}
-            <button className="btn-login" type="submit" disabled={clean === ''}>Next</button>
-            <div className="muted login-note">This twin logs you in with the access token it issued for the account (<code>/_twin/tokens</code>), in place of a password.</div>
-          </form>
-        ) : (
-          <form className="login-form" onSubmit={(e) => { e.preventDefault(); void login(); }}>
-            <h1>Log in</h1>
-            <div className="login-sub">@{clean} <button type="button" className="link" onClick={() => { setStep('username'); setError(null); }}>Change</button></div>
-            <input autoFocus name="token" className="login-input" type="password" placeholder="Access token" value={token} onChange={(e) => setToken(e.target.value)} autoComplete="current-password" />
-            {error ? <div className="login-error" role="alert">{error}</div> : null}
-            <button className="btn-login" type="submit" disabled={token.trim() === '' || busy}>Log in</button>
-          </form>
-        )}
-        <div className="login-foot">Don't have an account? <span className="link-red">Sign up</span></div>
-      </div>
-    </div>
-  );
-}
-
-function App() {
-  const [session, setSession] = useState<Session | null>(readSession);
-  const [me, setMe] = useState<TtRow | null>(null);
-  const [route, setRoute] = useState<Route | null>(() => parseRoute(typeof location === 'undefined' ? '' : location.hash));
-
-  useEffect(() => {
-    const onHash = () => { setRoute(parseRoute(location.hash)); window.scrollTo(0, 0); };
-    // a `#/…` link is one of the mirror's own routes; under a World's <base> the browser would resolve
-    // it against the base and leave the shell, so it moves the hash here
-    const onClick = (e: MouseEvent) => {
-      const a = (e.target as Element | null)?.closest?.('a[href^="#/"]');
-      if (!a || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-      e.preventDefault();
-      location.hash = a.getAttribute('href')!;
-    };
-    window.addEventListener('hashchange', onHash);
-    document.addEventListener('click', onClick, true);
-    return () => { window.removeEventListener('hashchange', onHash); document.removeEventListener('click', onClick, true); };
-  }, []);
-
-  const signOut = useCallback(() => {
-    sessionStorage.removeItem(SESSION_HANDLE);
-    sessionStorage.removeItem(SESSION_TOKEN); sessionStorage.setItem('volter.signedOut', '1');
-    setSession(null);
-    setMe(null);
-    go('login');
-  }, []);
-
-  // who am I: the signed-in creator, read back through the vendor's own user read
-  useEffect(() => {
-    if (!session) { setMe(null); return; }
-    void readMe(session.token).then((w) => {
-      if (w.status === 200 && w.body?.data?.user) setMe({ ...w.body.data.user, username: w.body.data.user.username ?? session.handle });
-      else if (w.status === 401) signOut();
-    });
-  }, [session, signOut]);
-
-  const signIn = (s: Session, user: TtRow) => {
-    sessionStorage.setItem(SESSION_HANDLE, s.handle);
-    sessionStorage.setItem(SESSION_TOKEN, s.token);
-    setSession(s);
-    setMe(user);
-    go(`@${s.handle}`);
-  };
-
-  if (!session || route?.page === 'login') {
-    return session && route?.page === 'login' ? <LoginRedirect handle={session.handle} /> : <LoginScreen onSignedIn={signIn} />;
-  }
-  if (!me) return <div className="loading"><Logo /></div>;
-  const current: Route = route ?? { page: 'profile', handle: String(me.username) };
-  if (current.page === 'video') return <VideoScreen session={session} me={me} id={current.id} />;
-  return (
-    <div className="layout">
-      <SideNav me={me} active={current.page === 'profile' && current.handle === me.username ? 'profile' : 'none'} onSignOut={signOut} />
-      <main className="main">
-        <ProfileScreen session={session} me={me} handle={current.page === 'profile' ? current.handle : String(me.username)} />
-      </main>
-    </div>
-  );
-}
-
-function LoginRedirect({ handle }: { handle: string }) {
-  useEffect(() => { go(`@${handle}`); }, [handle]);
-  return null;
-}
-
-if (typeof document !== 'undefined') {
-  const el = document.getElementById('root');
-  if (el) createRoot(el).render(<App />);
-}