@volter/twin-x 0.1.3 → 0.1.4

package/dist/src/x-capabilities.js

@@ -1336,6 +1336,23 @@ export const X_CAPABILITIES = [
         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.data.id;
+        const api = (await h({ m: 'GET', p: '/2/users/3200?user.fields=profile_image_url' })).body.data?.profile_image_url;
+        const page = async (path) => (await fetchTwin(new Request(`http://127.0.0.1:9${path}`, { headers: { host: 'x.com' } }))).text();
+        const drawn = (html) => /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'),

package/dist/src/x-twin.js

@@ -1484,7 +1484,7 @@ function armedRateRefusal(all) {
 /** 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'
+    + '&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) {
     const shape = parseReadShape(new URL(`http://twin.local/?${WEB_READ_SHAPE}`), (publicBase ?? PBS_BASE).replace(/\/+$/, ''));

package/dist/src/x-web.js

@@ -15,7 +15,7 @@
 // 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 } from "./x-mirror-ui.js";
-import { xWebPost, xWebProfile } from "./x-twin.js";
+import { X_DEFAULT_PROFILE_IMAGE_URL, xWebPost, xWebProfile } from "./x-twin.js";
 /** 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,
@@ -154,7 +154,21 @@ const ICON = (d) => `<svg viewBox="0 0 24 24" width="18" height="18" fill="none"
 function header(title, back, sub = '') {
     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, size) {
+    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, tail) {
@@ -230,7 +244,7 @@ a{color:inherit;text-decoration:none}
 .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;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
+.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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter/twin-x",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Local X (Twitter) API v2 twin (post, reply, delete, timelines, user lookup) with an x.com mirror, built on @volter/world-core.",
   "author": "Volter (https://github.com/volter-ai)",
   "license": "Apache-2.0",
@@ -36,14 +36,14 @@
     "postpack": "node ../../../scripts/publish/prepare-publish.mjs postpack"
   },
   "peerDependencies": {
-    "@volter/world-core": "2.0.3"
+    "@volter/world-core": "2.0.4"
   },
   "devDependencies": {
     "@types/bun": "^1.2.20",
     "@types/node": "^24.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@volter/world-core": "2.0.3",
+    "@volter/world-core": "2.0.4",
     "@volter/world-tooling": "0.1.0",
     "twitter-api-v2": "^1.29.1",
     "typescript": "^5.9.0"

package/src/x-capabilities.ts

@@ -1398,6 +1398,24 @@ export const X_CAPABILITIES: CapabilitySpec[] = [
       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'),

package/src/x-twin.ts

@@ -1498,7 +1498,7 @@ function armedRateRefusal(all: Resource[]): XResponse | undefined {
 /** 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'
+  + '&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 {

package/src/x-web.ts

@@ -15,7 +15,7 @@
 // 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 { xWebPost, xWebProfile } from './x-twin.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
@@ -169,7 +169,22 @@ 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>`;
 }
 
@@ -248,7 +263,7 @@ a{color:inherit;text-decoration:none}
 .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;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
+.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}