@volter/twin-tiktok 0.1.0

package/client/tiktok-consent.tsx

@@ -0,0 +1,154 @@
+// TikTok's AUTHORIZATION PAGE, as React — the vendor's own product UI, not a dashboard mirror.
+//
+// These components are the ONE renderer for the screen: the twin server-renders them with
+// `renderToStaticMarkup` to answer `GET https://www.tiktok.com/v2/auth/authorize`, the capability
+// verifies render the SAME exported components over the SAME projection, and the Playwright
+// journey drives the HTML they emit. There is no second implementation to drift from.
+//
+// NO BROWSER BUNDLE, DELIBERATELY. The whole screen is a plain `<form>`: one checkbox per
+// requested scope and two submit buttons. Nothing on it needs JavaScript, so this pack ships no
+// browser entry and no committed bundle — the served page is server-rendered markup plus an
+// inline stylesheet (`tiktok-consent-ui.ts`). That keeps the serve path free of a bundler
+// (runtime contract R12b) and free of a generated artifact to drift, and it means `curl`,
+// redirect-following HTTP libraries and headless browsers all complete an OAuth round trip
+// against this twin identically.
+//
+// WHY THE CHECKBOXES ARE THE DESIGN. TikTok's documented callback carries a `scopes` parameter —
+// "the authorization scope(s) which the user has granted" — and the token response's `scope` is
+// "the scopes the user has agreed to authorize". Both are only meaningful if the granted set can
+// be a SUBSET of the requested set, so the decision this page collects is per scope. LAYOUT
+// PROVENANCE: the app/account header, the permission list and the Cancel/Continue pair reproduce
+// TikTok's authorization sheet as widely screenshotted; the live DOM was not captured from a
+// vendor artefact, so visual fidelity is certified by the journey filmstrip review and pinned by
+// `tiktok.consent.optional_scope_toggles` / `tiktok.consent.button_wording` (todo), never
+// asserted as vendor fact.
+
+export type ConsentAccount = {
+  /** The account's `union_id` — the twin's subject key for a TikTok human. */
+  unionId: string;
+  username: string;
+  displayName: string;
+};
+// NO `avatarUrl` HERE, deliberately (§9 nit): the state builder used to carry one that nothing
+// rendered — a field on the view model that no pixel depends on is a data-coupling claim with
+// nothing behind it. The live sheet does show an avatar; serving one would mean an `<img>` at a
+// tiktokcdn.com URL, and a twin never reaches a vendor CDN (see TikTokMark, drawn rather than
+// fetched). When the avatar is worth rendering it comes back as bytes the twin serves, with a
+// data-coupled UI capability that asserts the seeded persona's own image — not before.
+
+export type ConsentScopeRow = {
+  scope: string;
+  label: string;
+  product: string;
+  known: boolean;
+};
+
+export type ConsentApp = {
+  clientKey: string;
+  name: string;
+};
+
+export type ConsentView = {
+  requestId: string;
+  /** Where the twin is reachable — the form action posts back here. */
+  origin: string;
+  app: ConsentApp;
+  /** The tiktok.com session this browser is signed in as — the account that will consent. */
+  account: ConsentAccount;
+  scopes: ConsentScopeRow[];
+  /** Host of the validated redirect_uri, shown in the "you'll be redirected to" notice. */
+  redirectHost: string;
+};
+
+/** The TikTok note mark, drawn rather than fetched — a twin never reaches out to a vendor CDN. */
+function TikTokMark() {
+  return (
+    <span className="tt-mark" aria-hidden="true">
+      ♪
+    </span>
+  );
+}
+
+/** The authorization page — TikTok's consent sheet for the app named by the pending request. */
+export function ConsentPage({ view }: { view: ConsentView }) {
+  const appName = view.app.name;
+  return (
+    <div className="card">
+      <header className="tt-header">
+        <TikTokMark />
+        <span className="tt-wordmark">TikTok</span>
+      </header>
+      <div className="signed-in">
+        <span className="account-text">
+          {/* A partially-pulled persona may lack a display name or handle; the fallback shows the
+              REAL union id rather than an empty pill or a bare "@" (never an invented placeholder). */}
+          <span className="account-name">{view.account.displayName || view.account.username || view.account.unionId}</span>
+          {view.account.username ? <span className="account-username">@{view.account.username}</span> : null}
+        </span>
+      </div>
+      <h1 className="title">
+        <strong className="app-name">{appName}</strong> would like to access your TikTok account
+      </h1>
+      <form method="POST" action={`${view.origin}/_twin/consent`} className="consent-form">
+        <input type="hidden" name="auth_request" value={view.requestId} />
+        <p className="scope-lead">This will allow {appName} to:</p>
+        <ul className="scope-list">
+          {view.scopes.map((row) => (
+            <li key={row.scope} className="scope-row">
+              <label className="scope-label">
+                <input className="scope-check" type="checkbox" name="scope" value={row.scope} defaultChecked />
+                <span className="scope-text">{row.label}</span>
+              </label>
+              {row.known ? null : <span className="scope-tag scope-tag-unknown">not in the twin&apos;s scope catalog</span>}
+            </li>
+          ))}
+        </ul>
+        <div className="actions">
+          <button className="btn btn-secondary" type="submit" name="decision" value="deny">
+            Cancel
+          </button>
+          <button className="btn btn-primary" type="submit" name="decision" value="allow">
+            Continue
+          </button>
+        </div>
+      </form>
+      <p className="legal">
+        You&apos;ll be redirected to <strong className="redirect-host">{view.redirectHost}</strong>. You can remove this
+        app at any time from Manage app permissions in your TikTok settings.
+      </p>
+    </div>
+  );
+}
+
+export type ErrorPageProps = {
+  status: number;
+  /** The OAuth error code the failure classifies as (e.g. `invalid_request`). */
+  code: string;
+  detail: string;
+  /** The offending parameter, echoed for the developer. */
+  requestParam?: string;
+};
+
+/**
+ * The authorize-endpoint error PAGE — what a browser sees when the twin cannot trust the
+ * redirect_uri (unknown client_key, unregistered callback) and therefore must not bounce the error
+ * back to it. TikTok's live page for this case was not captured, so this page states the failure
+ * plainly and machine-readably rather than imitating unverified vendor prose
+ * (`tiktok.authorize.error_page_fidelity`, todo).
+ */
+export function ErrorPage({ status, code, detail, requestParam }: ErrorPageProps) {
+  return (
+    <div className="card card-error">
+      <header className="tt-header">
+        <TikTokMark />
+        <span className="tt-wordmark">TikTok</span>
+      </header>
+      <h1 className="title">Something went wrong</h1>
+      <p className="error-detail">You weren&apos;t able to give access to the app. {detail}</p>
+      <p className="error-code">
+        Error {status}: {code}
+      </p>
+      {requestParam ? <p className="error-request">Request details: {requestParam}</p> : null}
+    </div>
+  );
+}

package/client/tiktok-mirror.css

@@ -0,0 +1,137 @@
+/* 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; }