@volter/twin-x 0.1.2 → 0.1.4

package/src/index.ts

@@ -51,6 +51,9 @@ export {
   xMirrorStyles,
 } from './x-mirror-ui.ts';
 export type { TextSegment, XRow } from './x-mirror-ui.ts';
+export { serveXWeb, X_PBS_PATHS, X_VIDEO_PATHS, X_WEB_HOSTS, X_WEB_PATHS } from './x-web.ts';
+export { xWebPost, xWebProfile } from './x-twin.ts';
+export type { XWebPost, XWebProfile } from './x-twin.ts';
 export { missingScopes, parseScopeList, REQUIRED_SCOPES, X_SCOPES } from './x-scopes.ts';
 // The client-side rate budget — the fail-closed backstop `liveXExecute` routes every live
 // request through. The mechanism is the kernel's (`@volter/world-core` -> rateBudget.ts); these are
@@ -71,6 +74,7 @@ export type { XBudgetErrorKind, XBudgetOptions, XBudgetReservation, XBudgetSnaps
 
 import type { TwinPack } from '@volter/world-core';
 import { X_RATE_BUDGET as RATE_BUDGET } from './x-budget.ts';
+import { X_PBS_PATHS, X_VIDEO_PATHS, X_WEB_HOSTS, X_WEB_PATHS } from './x-web.ts';
 
 /**
  * The api.x.com / api.twitter.com paths THIS pack serves, as a RegExp SOURCE for the descriptor's
@@ -126,9 +130,21 @@ export const pack: TwinPack = {
   // api.x.com — DMs, spaces, lists, media metadata — stays unclaimed, so an unmodelled X call
   // refuses loudly rather than landing in a twin that cannot serve it. api.twitter.com is claimed
   // alongside api.x.com because that is the host X's own legacy clients still target.
+  //
+  // x.com / twitter.com carry X's PUBLIC PAGES — a post (`/<handle>/status/<id>`) and a profile
+  // (`/<handle>`) — which an app links a person to once it has posted (x-web.ts). The www. and
+  // mobile. names and twitter.com answer those paths with X's own moves toward x.com (X_WEB_HOSTS).
+  // x.com is also where `xidentity` serves the OAuth
+  // consent screen (`^/i/oauth2/authorize/?$|^/_twin/`); X_WEB_PATHS never admits `i` or `_twin` as
+  // a handle, so the two claims stay disjoint (scripts/vendor-hosts.test.ts pins it). pbs.twimg.com
+  // and video.twimg.com are where those pages (and every API media `url`) load images and video
+  // from, claimed for exactly the paths x-server.ts serves from the blob store.
   hosts: [
     { host: 'api.x.com', pathPattern: X_API_PATHS },
     { host: 'api.twitter.com', pathPattern: X_API_PATHS },
+    ...X_WEB_HOSTS.map((host) => ({ host, pathPattern: X_WEB_PATHS })),
+    { host: 'pbs.twimg.com', pathPattern: X_PBS_PATHS },
+    { host: 'video.twimg.com', pathPattern: X_VIDEO_PATHS },
   ],
   browserRouting: { apiPathPrefix: '/2/', loaderHost: 'https://api.x.com' },
 };

package/src/x-capabilities.ts

@@ -19,7 +19,7 @@ import { applyTwinWrite } from '@volter/world-core';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { PostRow, ProfileHeader } from '../client/x-mirror.tsx';
-import { createXMirrorServer, joinedLabel, POST_READ_QUERY, PROFILE_READ_QUERY, tweetsById, usersById, type XRow } from './x-mirror-ui.ts';
+import { createXMirrorServer, fullTimestamp, joinedLabel, POST_READ_QUERY, PROFILE_READ_QUERY, tweetsById, usersById, type XRow } from './x-mirror-ui.ts';
 
 type Body = Record<string, any>;
 type Step = { m: string; p: string; b?: unknown; headers?: Record<string, string>; readOnly?: boolean };
@@ -1322,6 +1322,102 @@ export const X_CAPABILITIES: CapabilitySpec[] = [
       rmSync(root, { recursive: true, force: true });
     }
   }),
+  // ══ x.com's PUBLIC PAGES (x-web.ts) — what a link an app hands the person opens: the post page and
+  // the profile page on x.com itself, served from the store to a request the World routed from x.com ══
+  done('x.web.post_page', 'web', "x.com/<handle>/status/<id> (the host the World routed it from named in Host) answers the post's page from the store: the author's name and @handle, the text, the time, and each photo from pbs.twimg.com's path; a deleted post and an id no post has are 404 (x.com's own status for them, observed 2026-09-28) with X's page-not-found words", 'ui', 'core', () =>
+    withWorld(async (h, root) => {
+      const fetchTwin = createXTwinFetch({ root });
+      await mediaToken(h);
+      const media = ((await h({ m: 'POST', p: '/2/media/upload', b: { media: b64(tinyPng()), media_category: 'tweet_image' }, headers: MEDIA_AUTH })).body as Body).data;
+      const posted = ((await h({ m: 'POST', p: '/2/tweets', b: { text: 'the release is out <b>now</b>', media: { media_ids: [String(media?.id)] } }, headers: MEDIA_AUTH })).body as Body).data;
+      const gone = ((await h({ m: 'POST', p: '/2/tweets', b: { text: 'about to go' } })).body as Body).data.id as string;
+      await h({ m: 'DELETE', p: `/2/tweets/${gone}` });
+      const read = (await h({ m: 'GET', p: `/2/tweets/${posted.id}?tweet.fields=created_at&expansions=attachments.media_keys&media.fields=url` })).body as Body;
+      const page = (path: string, host = 'x.com') => fetchTwin(new Request(`http://127.0.0.1:9${path}`, { headers: { host } }));
+      const found = await page(`/orgvoice/status/${posted.id}`);
+      const html = await found.text();
+      const photo = /\/media\/([0-9a-f]{64})\.png$/.exec(String(read.includes?.media?.[0]?.url))?.[1];
+      const deleted = await page(`/orgvoice/status/${gone}`);
+      const missing = await page('/orgvoice/status/404404404404404404');
+      const missingHtml = await missing.text();
+      return found.status === 200 && (found.headers.get('content-type') ?? '').startsWith('text/html')
+        && html.includes('Org Voice') && html.includes('@orgvoice') && html.includes('the release is out &lt;b&gt;now&lt;/b&gt;') && !html.includes('<b>now</b>')
+        && photo !== undefined && html.includes(`src="https://pbs.twimg.com/media/${photo}.png"`)
+        && html.includes(`datetime="${read.data.created_at}"`) && html.includes(fullTimestamp(read.data.created_at, 'UTC'))
+        && deleted.status === 404 && !(await deleted.text()).includes('about to go')
+        && missing.status === 404 && missingHtml.includes('this page doesn’t exist');
+    })),
+  done('x.web.profile_page', 'web', "x.com/<handle> answers the account's profile from the store — name, @handle, bio, joined date — over its own posts newest first, each linking to its post page; replies stay off it, the handle is case-insensitive, and a handle no account has is 404", 'ui', 'core', () =>
+    withWorld(async (h, root) => {
+      const fetchTwin = createXTwinFetch({ root });
+      await h({ m: 'POST', p: '/_twin/accounts', b: { id: '3000', username: 'profiled', name: 'Profiled Org', description: 'we build things' }, headers: {} });
+      await h({ m: 'POST', p: '/_twin/tokens', b: { token: 'profiled-token', account_id: '3000', scopes: FULL_SCOPES }, headers: {} });
+      const as = { authorization: 'Bearer profiled-token' };
+      const older = ((await h({ m: 'POST', p: '/2/tweets', b: { text: 'the older post' }, headers: as })).body as Body).data.id as string;
+      const newer = ((await h({ m: 'POST', p: '/2/tweets', b: { text: 'the newer post' }, headers: as })).body as Body).data.id as string;
+      const mention = await seedMention(h, 'hey @profiled');
+      const reply = await h({ m: 'POST', p: '/2/tweets', b: { text: 'a reply, not a post', reply: { in_reply_to_tweet_id: mention } }, headers: as });
+      if (reply.status !== 201) return false;
+      const page = (path: string) => fetchTwin(new Request(`http://127.0.0.1:9${path}`, { headers: { host: 'x.com' } }));
+      const found = await page('/Profiled');
+      const html = await found.text();
+      const missing = await page('/nobodyhere');
+      const iNewer = html.indexOf(`href="/profiled/status/${newer}"`);
+      const iOlder = html.indexOf(`href="/profiled/status/${older}"`);
+      return found.status === 200 && html.includes('Profiled Org') && html.includes('@profiled') && html.includes('we build things') && html.includes('Joined ')
+        && iNewer !== -1 && iOlder !== -1 && iNewer < iOlder && html.includes('the newer post') && !html.includes('a reply, not a post')
+        && missing.status === 404 && (await missing.text()).includes('This account doesn’t exist');
+    })),
+  done('x.web.other_hosts_move_to_x_com', 'web', "X's other web names answer a page path with X's own moves (observed 2026-09-28): twitter.com 301 to x.com, www.x.com and www.twitter.com 301 to twitter.com, mobile.twitter.com 302 to twitter.com, mobile.x.com 302 to x.com; the API host serves no page at those paths", 'ui', 'common', () =>
+    withWorld(async (h, root) => {
+      const fetchTwin = createXTwinFetch({ root });
+      const id = ((await h({ m: 'POST', p: '/2/tweets', b: { text: 'linked from an app' } })).body as Body).data.id as string;
+      const path = `/orgvoice/status/${id}`;
+      const at = (host: string) => fetchTwin(new Request(`http://127.0.0.1:9${path}`, { headers: { host } }));
+      const expected: Array<[string, number, string]> = [
+        ['twitter.com', 301, 'https://x.com'], ['www.x.com', 301, 'https://twitter.com'], ['www.twitter.com', 301, 'https://twitter.com'],
+        ['mobile.twitter.com', 302, 'https://twitter.com'], ['mobile.x.com', 302, 'https://x.com'],
+      ];
+      for (const [host, status, to] of expected) {
+        const r = await at(host);
+        if (r.status !== status || r.headers.get('location') !== `${to}${path}`) return false;
+      }
+      const api = await at('api.x.com');
+      return api.status === 404 && !(await api.text()).includes('linked from an app');
+    })),
+  done('x.web.canonical_post_url', 'web', "A post's page under another handle, or its author's handle in another case, is X's 307 to the author's own /<handle>/status/<id>; a trailing slash is a 307 to the path without it; the canonical URL is the 200 page", 'ui', 'core', () =>
+    withWorld(async (h, root) => {
+      const fetchTwin = createXTwinFetch({ root });
+      const id = ((await h({ m: 'POST', p: '/2/tweets', b: { text: 'where it lives' } })).body as Body).data.id as string;
+      const at = (path: string) => fetchTwin(new Request(`http://127.0.0.1:9${path}`, { headers: { host: 'x.com' } }));
+      const canonical = `https://x.com/orgvoice/status/${id}`;
+      const wrong = await at(`/member/status/${id}`);
+      const cased = await at(`/OrgVoice/status/${id}`);
+      const slash = await at(`/orgvoice/status/${id}/`);
+      const right = await at(`/orgvoice/status/${id}`);
+      return wrong.status === 307 && wrong.headers.get('location') === canonical && cased.status === 307 && cased.headers.get('location') === canonical
+        && slash.status === 307 && slash.headers.get('location') === canonical && right.status === 200 && (await right.text()).includes('where it lives');
+    })),
+  done('x.web.default_avatar', 'web', "An account without a photo is drawn with X's default avatar on its x.com pages (the grey silhouette at the default profile_image_url the API answers for it, redrawn inline: the twin claims no abs.twimg.com), on its profile and beside its posts; an account with a photo is not given the default", 'ui', 'common', () =>
+    withWorld(async (h, root) => {
+      const fetchTwin = createXTwinFetch({ root });
+      await h({ m: 'POST', p: '/_twin/accounts', b: { id: '3200', username: 'plainface', name: 'Plain Face' }, headers: {} });
+      await h({ m: 'POST', p: '/_twin/accounts', b: { id: '3201', username: 'photoface', name: 'Photo Face', profile_image_url: 'https://pbs.twimg.com/profile_images/2/photoface_normal.jpg' }, headers: {} });
+      await h({ m: 'POST', p: '/_twin/tokens', b: { token: 'plainface-token', account_id: '3200', scopes: FULL_SCOPES }, headers: {} });
+      const posted = ((await h({ m: 'POST', p: '/2/tweets', b: { text: 'no photo yet' }, headers: { authorization: 'Bearer plainface-token' } })).body as Body).data.id as string;
+      const api = ((await h({ m: 'GET', p: '/2/users/3200?user.fields=profile_image_url' })).body as Body).data?.profile_image_url;
+      const page = async (path: string) => (await fetchTwin(new Request(`http://127.0.0.1:9${path}`, { headers: { host: 'x.com' } }))).text();
+      const drawn = (html: string) => /class="avatar avatar-default"[^>]*data-src="([^"]+)"[^>]*><svg[^>]*><rect[^>]*fill="#ccd6dd"\/><path fill="#657786"/.exec(html)?.[1];
+      const profile = await page('/plainface');
+      const post = await page(`/plainface/status/${posted}`);
+      const photo = await page('/photoface');
+      return typeof api === 'string' && api.includes('default_profile_images')
+        && drawn(profile) === api && drawn(post) === api
+        && !photo.includes('avatar-default') && photo.includes('Photo Face');
+    })),
+  todo('x.web.profile_photo', 'web', "A photo the account set drawn on its x.com pages (the twin serves no profile photos: pbs.twimg.com/profile_images is not claimed, so the page keeps the initial on its hue)", 'ui', 'niche'),
+  todo('x.web.post_page_replies', 'web', "The replies under a post on its x.com page (the conversation), and the parent a reply answers", 'ui', 'common'),
+  todo('x.web.logged_out_prompts', 'web', "x.com's logged-out chrome around a public page (the Log in / Sign up bar and its flows)", 'ui', 'niche'),
   todo('x.mirror.notifications_all', 'mirror', "Notifications beyond Mentions (likes, reposts, follows) — the twin models no engagement events to list", 'ui', 'common'),
   todo('x.mirror.profile_counts', 'mirror', "The Following / Followers counts under the profile header (needs user public_metrics)", 'ui', 'common'),
 

package/src/x-server.ts

@@ -12,11 +12,14 @@
 //     pbs.twimg.com's `/media/<name>.<ext>` for an image and `/ext_tw_video_thumb/<id>/pu/img/…`
 //     for a video's preview, video.twimg.com's `/ext_tw_video/<id>/pu/vid/avc1/<w>x<h>/<name>.mp4`
 //     for the video file — with HTTP Range (206), so a <video> can seek. Those hosts are public
-//     at X (an <img> or <video> carries no bearer), so these routes are too.
+//     at X (an <img> or <video> carries no bearer), so these routes are too;
+//   - x.com's own HTML pages — a post at `/<handle>/status/<id>`, a profile at `/<handle>` — for a
+//     request routed from x.com or twitter.com (x-web.ts).
 //
 // The server is one line of Bun.serve around that same closure.
 import { readMediaRecord, readXBlob, readXBlobType, videoPosterSvg } from './x-media.ts';
 import { handleXTwinRequest } from './x-twin.ts';
+import { serveXWeb } from './x-web.ts';
 import { createTwinFetchFromHandler, runWithCorrelationId, serveHttp, statefulTwinManifest, twinPublicBase, worldNow } from '@volter/world-core';
 
 /** Options every X-twin HTTP surface needs, independent of who owns the socket. */
@@ -118,6 +121,9 @@ export function createXTwinFetch(options: XTwinFetchOptions = {}): (request: Req
       if (!bytes || !type) return new Response('Not Found', { status: 404 });
       return bytesResponse(request, bytes, type);
     }
+    // x.com's own post and profile pages (x-web.ts), for a request the World routed from x.com / twitter.com
+    const page = reading ? serveXWeb(request, { ...(options.root !== undefined ? { root: options.root } : {}), nowMs: Date.parse(worldNow()) }) : null;
+    if (page) return page;
     const thumb = reading ? VIDEO_THUMB_PATH.exec(url.pathname) : null;
     if (thumb) {
       const record = await readMediaRecord(thumb[1]!, options.root);

package/src/x-twin.ts

@@ -1489,6 +1489,52 @@ function armedRateRefusal(all: Resource[]): XResponse | undefined {
   });
 }
 
+// ── the public web read: what x.com shows a visitor (x-web.ts renders it) ───────────────────
+// x.com's post page and profile page read the SAME posts and accounts the API serves, through the
+// SAME projections (projectPost / projectUser / projectMedia / buildIncludes), with a fixed shape
+// instead of a caller's query. No bearer: X shows a public post and profile to anyone. A deleted
+// post is gone here as it is from every read.
+
+/** The fields and expansions the web pages draw (the mirror's POST_READ_QUERY, plus the profile's user fields). */
+const WEB_READ_SHAPE = 'tweet.fields=created_at,author_id,conversation_id,in_reply_to_user_id,referenced_tweets'
+  + '&expansions=author_id,in_reply_to_user_id,referenced_tweets.id,referenced_tweets.id.author_id,attachments.media_keys'
+  + '&user.fields=created_at,description,location,url,verified,protected,profile_image_url'
+  + '&media.fields=url,type,width,height,duration_ms,preview_image_url,variants';
+
+function webShape(publicBase?: string): ReadShape {
+  const shape = parseReadShape(new URL(`http://twin.local/?${WEB_READ_SHAPE}`), (publicBase ?? PBS_BASE).replace(/\/+$/, ''));
+  if (!isShape(shape)) throw new Error('x: the web read shape is not one the read parser accepts');
+  return shape;
+}
+
+export type XWebPost = { post: Record<string, unknown>; includes: Record<string, unknown> };
+export type XWebProfile = { user: Record<string, unknown>; posts: Record<string, unknown>[]; includes: Record<string, unknown> };
+
+/** One live post as its page shows it, or undefined when no live post has that id. Media URLs are
+ *  X's own hosts (pbs.twimg.com, video.twimg.com) unless a served base is given. */
+export function xWebPost(id: string, options: { root?: string; publicBase?: string } = {}): XWebPost | undefined {
+  if (!/^\d{1,19}$/.test(id)) return undefined;
+  const all = resources(options.root);
+  const post = findPost(all, id);
+  if (!post) return undefined;
+  const shape = webShape(options.publicBase);
+  return { post: projectPost(post, shape.fields), includes: buildIncludes([post], all, shape) };
+}
+
+/** An account's profile and its posts (not its replies), newest first, at most `limit`; undefined
+ *  when no account has that handle (case-insensitive, as X's are). */
+export function xWebProfile(username: string, options: { root?: string; publicBase?: string; limit?: number } = {}): XWebProfile | undefined {
+  if (!/^[A-Za-z0-9_]{1,15}$/.test(username)) return undefined;
+  const all = resources(options.root);
+  const account = ofType(all, 'account').find((a) => String(a.username).toLowerCase() === username.toLowerCase());
+  if (!account) return undefined;
+  const shape = webShape(options.publicBase);
+  const own = newestFirst(livePosts(all).filter((p) => String(p.author_id) === String(account.id) && p.in_reply_to_user_id === undefined
+    && !(Array.isArray(p.referenced_tweets) && p.referenced_tweets.some((r: Resource) => r?.type === 'replied_to'))))
+    .slice(0, options.limit ?? 100);
+  return { user: projectUser(account, shape.userFields, all), posts: own.map((p) => projectPost(p, shape.fields)), includes: buildIncludes(own, all, shape) };
+}
+
 // ── the router ──────────────────────────────────────────────────────────────────────────────
 
 const TWEETS_PATH = '/2/tweets';

package/src/x-web.ts

@@ -0,0 +1,283 @@
+// X's PUBLIC WEB PAGES — what x.com serves a visitor at `https://x.com/<handle>/status/<id>` (a post) and
+// `https://x.com/<handle>` (a profile with its posts), from the twin's own store. An application that
+// posts links the person to the post where it was published (Postiz's x.provider.ts `releaseURL`:
+// `https://twitter.com/${profile}/status/${id}`), and in a World that link has to open the post as X
+// shows it: author, text, media, time.
+//
+// These are x.com's own paths on x.com's own host, not the mirror (the mirror is the signed-in app on
+// the twin's origin, x-mirror-ui.ts). The page reads the same projections the API serves
+// (x-twin.ts `xWebPost` / `xWebProfile`) and draws them with the mirror's own pure helpers, server-side:
+// no bearer, as x.com shows a public post to anyone. twitter.com answers as X does, with a permanent
+// redirect to the same path on x.com. Media is drawn from X's own media hosts (pbs.twimg.com,
+// video.twimg.com), which this pack claims beside x.com and serves from its blob store (x-server.ts).
+//
+// x.com is the whole X web property and `xidentity` serves its OAuth consent screen there, so the
+// claim is two anchored path shapes and nothing else (X_WEB_PATHS); the router below answers exactly
+// those shapes, only for a request the World routed from one of X's web hosts (X_WEB_HOSTS).
+import { avatarHue, avatarInitial, displayUrl, durationLabel, fullTimestamp, joinedLabel, linkHref, mediaByKey, postMedia, referencedId, relativeTime, textSegments, tweetsById, usersById, videoSource, type XRow } from './x-mirror-ui.ts';
+import { X_DEFAULT_PROFILE_IMAGE_URL, xWebPost, xWebProfile } from './x-twin.ts';
+
+/** x.com's top-level routes that are not accounts (and the twin's own doors): never a profile. Each was
+ *  observed as a route of its own at x.com (2026-09-28, logged out, `curl -A 'Mozilla/5.0' -o /dev/null
+ *  -w '%{http_code} %{redirect_url}' https://x.com/<name>`): home, explore, notifications, settings,
+ *  search, login, signup answer 307 to the login flow; messages 307 to /i/chat; i 301 to /; premium 301;
+ *  tos and privacy 302 to /en/…; about 301 to about.twitter.com; grok, jobs, communities, lists,
+ *  bookmarks, compose, account, share, hashtag, download and creators 200 with a page of their own.
+ *  `intent` and `twin`/`_twin` are held back for X's intent URLs and the twin's doors. */
+const RESERVED = 'i|en|home|explore|notifications|messages|settings|search|compose|login|logout|signup|tos|privacy|about|account|intent|share|hashtag|lists|bookmarks|jobs|download|grok|premium|communities|creators|twin|_twin';
+const PROFILE_PATH = `^/(?!(?:${RESERVED})/?$)[A-Za-z0-9_]{1,15}/?$`;
+const STATUS_PATH = '^/(?!_twin/)[A-Za-z0-9_]{1,15}/status/[0-9]{1,19}/?$';
+
+/** The x.com / twitter.com paths this pack serves, as a RegExp SOURCE for the descriptor's `hosts`
+ *  rule: a post page and a profile page. ANCHORED, and disjoint from xidentity's
+ *  `^/i/oauth2/authorize/?$|^/_twin/` by construction (`i` and `_twin` are never a handle here). */
+export const X_WEB_PATHS = `${STATUS_PATH}|${PROFILE_PATH}`;
+
+/** X's image and video-thumbnail paths on pbs.twimg.com, and its video file path on video.twimg.com —
+ *  the shapes x-server.ts serves from the blob store. */
+export const X_PBS_PATHS = '^/media/[0-9a-f]{64}\\.(?:jpg|png|gif|webp)$|^/ext_tw_video_thumb/[0-9]{1,19}/pu/img/[0-9a-f]{64}\\.svg$';
+export const X_VIDEO_PATHS = '^/ext_tw_video/[0-9]{1,19}/pu/vid/avc1/[0-9]+x[0-9]+/[0-9a-f]{64}\\.mp4$';
+
+/** X's web hosts and what each answers a page path with, as observed (2026-09-28, the curl above over
+ *  `/jack/status/20`): x.com serves it; twitter.com 301s to x.com; www.x.com and www.twitter.com 301 to
+ *  twitter.com (which then moves to x.com); mobile.twitter.com 302s to twitter.com and mobile.x.com to x.com. */
+export const X_WEB_HOSTS = ['x.com', 'twitter.com', 'www.x.com', 'www.twitter.com', 'mobile.twitter.com', 'mobile.x.com'] as const;
+const MOVES: Record<string, { status: number; to: string }> = {
+  'twitter.com': { status: 301, to: 'https://x.com' },
+  'www.x.com': { status: 301, to: 'https://twitter.com' },
+  'www.twitter.com': { status: 301, to: 'https://twitter.com' },
+  'mobile.twitter.com': { status: 302, to: 'https://twitter.com' },
+  'mobile.x.com': { status: 302, to: 'https://x.com' },
+};
+const WEB_HOSTS = new Set<string>(X_WEB_HOSTS);
+const STATUS = /^\/([A-Za-z0-9_]{1,15})\/status\/([0-9]{1,19})\/?$/;
+const PROFILE = new RegExp(PROFILE_PATH);
+
+const esc = (value: unknown): string => String(value ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]!);
+
+/** The host a request was made to: the World's proxy keeps it in Host, or names it when it rewrote Host. */
+function namedHost(request: Request): string {
+  const named = request.headers.get('x-volter-twin-original-host') ?? request.headers.get('host') ?? '';
+  return named.replace(/:\d+$/, '').toLowerCase();
+}
+
+/**
+ * x.com's post and profile pages. Null for any request that is not a GET/HEAD to one of those paths on
+ * x.com or twitter.com — the caller serves it as the API. `nowMs` is the World's instant (a profile's
+ * "5m" is drawn against it).
+ */
+export function serveXWeb(request: Request, options: { root?: string; nowMs: number }): Response | null {
+  if (request.method !== 'GET' && request.method !== 'HEAD') return null;
+  const host = namedHost(request);
+  if (!WEB_HOSTS.has(host)) return null;
+  const url = new URL(request.url);
+  const status = STATUS.exec(url.pathname);
+  const profile = status ? null : PROFILE.test(url.pathname) ? url.pathname.replace(/^\/|\/$/g, '') : null;
+  if (!status && profile === null) return null;
+  const move = MOVES[host];
+  if (move) return new Response(null, { status: move.status, headers: { location: `${move.to}${url.pathname}${url.search}` } });
+  // x.com drops a trailing slash with a 307 (observed: /jack/status/20/ and /XDevelopers/)
+  if (url.pathname.length > 1 && url.pathname.endsWith('/')) return new Response(null, { status: 307, headers: { location: `https://x.com${url.pathname.replace(/\/+$/, '')}${url.search}` } });
+  const page = status ? postPage(status[1]!, status[2]!, options) : profilePage(profile!, options);
+  if (page.location) return new Response(null, { status: page.status, headers: { location: page.location } });
+  return new Response(request.method === 'HEAD' ? null : page.html, { status: page.status, headers: { 'content-type': 'text/html; charset=utf-8' } });
+}
+
+// ── the pages ──────────────────────────────────────────────────────────────────────────────────
+
+// STATUS CODES, as observed at x.com (2026-09-28, logged out, the curl above): a live post under its
+// author's handle 200 (/jack/status/20); the same post under another handle or another case 307 to its
+// author's (/JACK/status/20 and /nosuchaccountzzq9/status/20 → /jack/status/20); an id no post has 404
+// (/XDevelopers/status/404404404404404404); a profile 200 in any case (/xdevelopers); a handle no
+// account has 404 (/nosuchaccountzzq9). X is an SPA and draws the page's words client-side; the words
+// here are the ones its page shows, the codes the ones its server sends.
+type Page = { status: number; html: string; location?: string };
+
+function postPage(handle: string, id: string, options: { root?: string; nowMs: number }): Page {
+  const read = xWebPost(id, { root: options.root });
+  if (!read) return notFound("Hmm...this page doesn’t exist. Try searching for something else.");
+  const post = read.post as XRow;
+  const users = usersById(read.includes);
+  const tweets = tweetsById(read.includes);
+  const media = mediaByKey(read.includes);
+  const author = users.get(String(post.author_id));
+  if (author && String(author.username) !== handle) return { status: 307, html: '', location: `https://x.com/${String(author.username)}/status/${String(post.id)}` };
+  if (author?.protected === true) {
+    return { status: 200, html: shell('Post / X', header('Post', true) + `<div class="notice"><div class="notice-title">These posts are protected</div><div class="muted">Only approved followers can see @${esc(author.username)}’s posts.</div></div>`) };
+  }
+  const repliedTo = post.in_reply_to_user_id ? users.get(String(post.in_reply_to_user_id)) : undefined;
+  const quotedId = referencedId(post, 'quoted');
+  const quoted = quotedId ? tweets.get(quotedId) : undefined;
+  const body = header('Post', true)
+    + `<article class="post-detail" data-post-id="${esc(post.id)}">`
+    + `<div class="detail-head">${avatar(author, 40)}<div class="detail-names">${nameLine(author, '')}</div></div>`
+    + (repliedTo ? `<div class="muted replying">Replying to <a class="entity" href="/${esc(repliedTo.username)}">@${esc(repliedTo.username)}</a></div>` : '')
+    + (post.text ? postText(post.text, true) : '')
+    + mediaBlock(postMedia(post, media), true)
+    + (quoted ? quoteCard(quoted, users, options.nowMs) : '')
+    + `<div class="detail-time muted"><a href="/${esc(author?.username ?? 'i')}/status/${esc(post.id)}"><time datetime="${esc(post.created_at)}">${esc(fullTimestamp(post.created_at, 'UTC'))}</time></a></div>`
+    + actions(true)
+    + '</article>';
+  const title = `${String(author?.name ?? author?.username ?? 'X')} on X: "${String(post.text ?? '')}" / X`;
+  return { status: 200, html: shell(title, body) };
+}
+
+function profilePage(handle: string, options: { root?: string; nowMs: number }): Page {
+  const read = xWebProfile(handle, { root: options.root });
+  if (!read) return notFound('This account doesn’t exist', 'Try searching for another.');
+  const user = read.user as XRow;
+  const users = usersById(read.includes);
+  users.set(String(user.id), { ...users.get(String(user.id)), ...user });
+  const tweets = tweetsById(read.includes);
+  const media = mediaByKey(read.includes);
+  const count = read.posts.length;
+  const meta = [
+    typeof user.location === 'string' && user.location ? `<span>${esc(user.location)}</span>` : '',
+    typeof user.url === 'string' && user.url ? `<span><a class="entity" href="${esc(linkHref(user.url))}" rel="noreferrer">${esc(displayUrl(user.url))}</a></span>` : '',
+    joinedLabel(user.created_at, 'UTC') ? `<span>${esc(joinedLabel(user.created_at, 'UTC'))}</span>` : '',
+  ].join('');
+  const posts = user.protected === true
+    ? `<div class="notice"><div class="notice-title">These posts are protected</div><div class="muted">Only approved followers can see @${esc(user.username)}’s posts.</div></div>`
+    : count === 0
+      ? `<div class="notice"><div class="notice-title">@${esc(user.username)} hasn’t posted</div><div class="muted">When they do, their posts will show up here.</div></div>`
+      : `<div class="timeline">${read.posts.map((p) => postRow(p as XRow, users, tweets, media, options.nowMs)).join('')}</div>`;
+  const body = header(String(user.name ?? user.username), true, `${count} post${count === 1 ? '' : 's'}`)
+    + '<div class="profile"><div class="banner"></div>'
+    + `<div class="profile-top"><div class="profile-avatar">${avatar(user, 134)}</div></div>`
+    + '<div class="profile-info">'
+    + `<div class="profile-name"><span>${esc(user.name)}</span>${user.verified === true ? VERIFIED_SVG : ''}${user.protected === true ? '<span class="lock">🔒</span>' : ''}</div>`
+    + `<div class="muted profile-handle">@${esc(user.username)}</div>`
+    + (typeof user.description === 'string' && user.description ? `<div class="profile-bio">${postText(user.description, false)}</div>` : '')
+    + (meta ? `<div class="muted profile-meta">${meta}</div>` : '')
+    + '</div></div>'
+    + '<div class="tabs"><span class="tab active">Posts</span><span class="tab">Replies</span><span class="tab">Media</span></div>'
+    + posts;
+  return { status: 200, html: shell(`${String(user.name ?? user.username)} (@${String(user.username)}) / X`, body) };
+}
+
+function notFound(title: string, sub = ''): Page {
+  return { status: 404, html: shell('Page not found / X', header('', true) + `<div class="notice"><div class="notice-title">${esc(title)}</div>${sub ? `<div class="muted">${esc(sub)}</div>` : ''}</div>`) };
+}
+
+// ── pieces ─────────────────────────────────────────────────────────────────────────────────────
+
+const X_LOGO_SVG = '<svg viewBox="0 0 24 24" width="30" height="30" aria-label="X"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>';
+const VERIFIED_SVG = '<svg class="badge" viewBox="0 0 24 24" width="18" height="18" aria-label="Verified account"><path fill="currentColor" d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"/></svg>';
+const ICON = (d: string) => `<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${d}"/></svg>`;
+
+function header(title: string, back: boolean, sub = ''): string {
+  return `<div class="col-header">${back ? '<button type="button" class="back" onclick="history.back()" aria-label="Back">←</button>' : ''}<div><div class="col-title">${esc(title)}</div>${sub ? `<div class="muted col-sub">${esc(sub)}</div>` : ''}</div></div>`;
+}
+
+/** X's default avatar as x.com draws it for an account without a photo — the image at
+ *  `X_DEFAULT_PROFILE_IMAGE_URL`, redrawn inline because the twin claims no abs.twimg.com: a #657786
+ *  head and shoulders on #ccd6dd (its colours and shape read off that PNG, 2026-09-28: the palette's
+ *  background entry and the silhouette's pixels, head 124–276 × 88–256 and a shoulder circle centred
+ *  at 200,409 radius 131 in its 400×400 rendition). */
+const DEFAULT_AVATAR_SVG = '<svg viewBox="0 0 400 400" width="100%" height="100%" aria-hidden="true"><rect width="400" height="400" fill="#ccd6dd"/>'
+  + '<path fill="#657786" d="M200 88C240 88 276 120 276 176C276 234 240 256 200 256C160 256 124 234 124 176C124 120 160 88 200 88Z"/>'
+  + '<circle cx="200" cy="409" r="131" fill="#657786"/></svg>';
+
+/** An account's picture: X's default avatar when it has none (its `profile_image_url` is the default,
+ *  as the API answers it). A photo the account set is not drawn: the twin serves no profile photos
+ *  (x.web.profile_photo, todo), so it keeps the initial on its hue. */
+function avatar(user: XRow | undefined, size: number): string {
+  if (user?.profile_image_url === X_DEFAULT_PROFILE_IMAGE_URL) {
+    return `<div class="avatar avatar-default" style="width:${size}px;height:${size}px" data-src="${esc(X_DEFAULT_PROFILE_IMAGE_URL)}" aria-hidden="true">${DEFAULT_AVATAR_SVG}</div>`;
+  }
+  return `<div class="avatar" style="width:${size}px;height:${size}px;font-size:${Math.round(size * 0.42)}px;background:hsl(${avatarHue(user?.username)} 45% 38%)" aria-hidden="true">${esc(avatarInitial(user))}</div>`;
+}
+
+function nameLine(user: XRow | undefined, tail: string): string {
+  return `<div class="name-line"><a class="display-name" href="/${esc(user?.username ?? 'i')}">${esc(user?.name ?? 'Unknown')}</a>${user?.verified === true ? VERIFIED_SVG : ''}<span class="muted handle">@${esc(user?.username ?? 'unknown')}</span>${tail}</div>`;
+}
+
+function postText(text: unknown, big: boolean): string {
+  const parts = textSegments(text).map((s) => {
+    if (s.kind === 'text') return esc(s.value);
+    if (s.kind === 'url') return `<a class="entity" href="${esc(linkHref(s.value))}" target="_blank" rel="noreferrer">${esc(displayUrl(s.value))}</a>`;
+    if (s.kind === 'mention') return `<a class="entity" href="/${esc(s.value.slice(1))}">${esc(s.value)}</a>`;
+    return `<span class="entity">${esc(s.value)}</span>`;
+  });
+  return `<div class="${big ? 'post-text post-text-big' : 'post-text'}">${parts.join('')}</div>`;
+}
+
+function mediaBlock(media: XRow[], big: boolean): string {
+  if (media.length === 0) return '';
+  const cls = big ? 'media media-big' : 'media';
+  const video = media.find((m) => m.type === 'video');
+  if (video) {
+    const src = videoSource(video);
+    const ratio = Number(video.width) > 0 && Number(video.height) > 0 ? `${video.width} / ${video.height}` : '16 / 9';
+    const badge = durationLabel(video.duration_ms);
+    return `<div class="${cls}" data-media-key="${esc(video.media_key)}">${src ? `<video class="media-video" style="aspect-ratio:${ratio}" src="${esc(src)}#t=0.001" controls playsinline preload="metadata"></video>` : ''}${badge ? `<span class="media-badge">${esc(badge)}</span>` : ''}</div>`;
+  }
+  const photos = media.filter((m) => m.type === 'photo' && typeof m.url === 'string').slice(0, 4);
+  if (photos.length === 0) return '';
+  return `<div class="${cls} media-${photos.length}">${photos.map((m) => {
+    const ratio = photos.length === 1 && Number(m.width) > 0 && Number(m.height) > 0 ? ` style="aspect-ratio:${m.width} / ${m.height}"` : '';
+    return `<img class="media-img" src="${esc(m.url)}" alt="Image"${ratio}>`;
+  }).join('')}</div>`;
+}
+
+function quoteCard(quoted: XRow, users: Map<string, XRow>, nowMs: number): string {
+  const author = users.get(String(quoted.author_id));
+  return `<a class="quote" href="/${esc(author?.username ?? 'i')}/status/${esc(quoted.id)}"><div class="quote-head">${avatar(author, 20)}${nameLine(author, `<span class="muted">·</span><span class="muted">${esc(relativeTime(quoted.created_at, nowMs, 'UTC'))}</span>`)}</div>${postText(quoted.text, false)}</a>`;
+}
+
+/** The engagement row. The twin models no public_metrics, so it carries no counts, never an invented zero. */
+function actions(big: boolean): string {
+  const icons = ['M7.9 20A9 9 0 1 0 4 16.1L2 22Z', 'M2 9l3-3 3 3M13 18H7a2 2 0 0 1-2-2V6M22 15l-3 3-3-3M11 6h6a2 2 0 0 1 2 2v10', 'M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z', 'M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z', 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'];
+  return `<div class="${big ? 'actions actions-big' : 'actions'}">${icons.map((d) => `<span class="action">${ICON(d)}</span>`).join('')}</div>`;
+}
+
+function postRow(post: XRow, users: Map<string, XRow>, tweets: Map<string, XRow>, media: Map<string, XRow>, nowMs: number): string {
+  const author = users.get(String(post.author_id));
+  const quotedId = referencedId(post, 'quoted');
+  const quoted = quotedId ? tweets.get(quotedId) : undefined;
+  const href = `/${esc(author?.username ?? 'i')}/status/${esc(post.id)}`;
+  return `<article class="post-row" data-post-id="${esc(post.id)}">${avatar(author, 40)}<div class="post-body">`
+    + nameLine(author, `<span class="muted">·</span><a class="muted" href="${href}"><time datetime="${esc(post.created_at)}" title="${esc(fullTimestamp(post.created_at, 'UTC'))}">${esc(relativeTime(post.created_at, nowMs, 'UTC'))}</time></a>`)
+    + (post.text ? postText(post.text, false) : '')
+    + mediaBlock(postMedia(post, media), false)
+    + (quoted ? quoteCard(quoted, users, nowMs) : '')
+    + actions(false)
+    + '</div></article>';
+}
+
+function shell(title: string, column: string): string {
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${esc(title)}</title><style>${STYLES}</style></head>
+<body><div class="layout"><header class="sidenav"><a class="nav-logo" href="/">${X_LOGO_SVG}</a></header><main class="column">${column}</main><aside class="rail"></aside></div></body></html>`;
+}
+
+// x.com's own look ("Lights out"), as the mirror's stylesheet draws it; exempt from the Volter brand.
+const STYLES = `
+:root{--bg:#000;--text:#e7e9ea;--muted:#71767b;--line:#2f3336;--blue:#1d9bf0;--banner:#333639}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--text);font-family:"TwitterChirp",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:20px}
+a{color:inherit;text-decoration:none}
+.muted{color:var(--muted)}.entity{color:var(--blue)}a.entity:hover{text-decoration:underline}
+.layout{display:grid;grid-template-columns:1fr minmax(0,600px) 1fr;min-height:100vh}
+.sidenav{justify-self:end;padding:4px 12px}.nav-logo{display:flex;align-items:center;justify-content:center;width:52px;height:52px}
+.column{border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100vh;min-width:0}
+.col-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:24px;min-height:53px;padding:0 16px;background:rgba(0,0,0,.65);backdrop-filter:blur(12px)}
+.col-title{font-size:20px;line-height:24px;font-weight:700}.col-sub{font-size:13px;line-height:16px}.back{font-size:20px;border:0;background:none;color:inherit;cursor:pointer;padding:0}
+.avatar{flex:none;border-radius:9999px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
+.name-line{display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap}.display-name{font-weight:700;overflow:hidden;text-overflow:ellipsis}.badge{color:var(--blue);flex:none}
+.post-row{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}.post-body{flex:1;min-width:0}
+.post-text{white-space:pre-wrap;overflow-wrap:anywhere}.post-text-big{font-size:17px;line-height:24px;margin-top:12px}
+.post-detail{padding:12px 16px 0;border-bottom:1px solid var(--line)}.detail-head{display:flex;gap:8px;align-items:center}.detail-names .name-line{flex-direction:row}
+.detail-time{padding:16px 0;border-bottom:1px solid var(--line)}.detail-time a:hover{text-decoration:underline}
+.replying{margin-top:4px}
+.media{margin-top:12px;border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;display:grid;gap:2px}
+.media-2,.media-3,.media-4{grid-template-columns:1fr 1fr}.media-img{width:100%;display:block;object-fit:cover;max-height:510px}.media-video{width:100%;display:block;background:#000}
+.media-badge{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.77);border-radius:4px;padding:0 4px;font-size:13px}
+.quote{display:block;margin-top:12px;border:1px solid var(--line);border-radius:16px;padding:12px}.quote-head{display:flex;gap:4px;align-items:center;margin-bottom:4px}
+.actions{display:flex;justify-content:space-between;max-width:425px;margin-top:12px;color:var(--muted)}.actions-big{max-width:none;padding:4px 0 12px;margin-top:12px}.action{display:inline-flex}
+.banner{height:200px;background:var(--banner)}.profile-top{position:relative;height:72px}.profile-avatar{position:absolute;left:16px;top:-72px;border:4px solid var(--bg);border-radius:9999px}
+.profile-info{padding:4px 16px 16px}.profile-name{display:flex;align-items:center;gap:4px;font-size:20px;line-height:24px;font-weight:800}.profile-bio{margin-top:12px}
+.profile-meta{display:flex;flex-wrap:wrap;column-gap:12px;row-gap:4px;margin-top:12px}
+.tabs{display:flex;border-bottom:1px solid var(--line)}.tab{flex:1;text-align:center;padding:16px 0;color:var(--muted);font-weight:500}.tab.active{color:var(--text);font-weight:700;box-shadow:inset 0 -4px 0 var(--blue)}
+.notice{padding:32px;max-width:400px;margin:0 auto}.notice-title{font-size:31px;line-height:36px;font-weight:800;margin-bottom:8px}
+`;