@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/avatar/dino-avatar.ts

@@ -0,0 +1,541 @@
+/** What ta is doing, as its face and pose show it. */
+export type Mood = 'idle' | 'listening' | 'thinking' | 'working' | 'speaking' | 'attention' | 'done' | 'sleeping';
+
+export const MOODS: Mood[] = ['idle', 'listening', 'thinking', 'working', 'speaking', 'attention', 'done', 'sleeping'];
+
+/** The viewBox of assets/logo.svg with a little room around it for the marks. */
+export const AVATAR_VIEWBOX = '-8 -8 272 272';
+
+/** The outline of assets/logo.svg; dino-avatar.spec.ts keeps the two the same. */
+export const LOGO_PATH =
+    'M87.56 246.56C78.45 245.88 69.68 241.69 63.62 235.12C55.27 226.06 53.05 217.63 57.25 210.87C58.80 208.36 60.00 207.04 65.18 202.17C69.26 198.32 70.20 196.55 70.21 192.69C70.21 189.81 70.10 189.60 68.07 188.59C58.99 184.06 48.53 175.16 41.10 165.64C20.03 138.61 16.32 99.87 32.24 73.21C35.05 68.50 38.42 64.26 40.25 63.11C42.91 61.44 46.64 61.89 48.71 64.14C51.04 66.67 51.48 69.39 50.27 73.65C48.09 81.27 47.41 86.83 47.99 92.32C49.53 106.98 58.42 118.20 70.83 121.15C73.08 121.68 78.88 121.72 81.15 121.22C88.97 119.48 94.86 113.39 96.69 105.18C97.35 102.17 97.35 102.36 97.36 79.55C97.37 56.55 97.35 57.24 98.04 53.23C102.05 29.98 119.81 12.19 141.49 9.73C143.46 9.51 150.65 9.43 152.36 9.61C160.37 10.46 167.56 12.82 174.51 16.89C177.43 18.59 176.54 18.47 186.86 18.57C196.67 18.66 196.99 18.68 200.87 19.58C210.24 21.74 219.17 27.62 224.57 35.17C229.72 42.38 232.50 49.80 233.36 58.67C233.68 61.91 233.71 76.53 233.41 78.22C232.01 86.00 227.35 91.05 220.23 92.50C218.50 92.85 180.16 92.91 177.10 92.57C165.61 91.28 155.17 86.13 150.52 79.47C148.44 76.48 145.54 75.90 143.40 78.04C141.49 79.95 141.76 81.92 144.74 87.63C150.17 98.03 159.04 105.16 169.50 107.52C172.11 108.11 172.69 107.96 173.25 106.55C173.81 105.12 174.70 103.52 175.57 102.37C178.23 98.86 180.68 100.09 183.51 106.36C184.55 108.67 183.79 108.47 191.23 108.44C198.27 108.42 197.86 108.50 198.43 107.20C200.89 101.63 202.81 99.79 204.99 100.89C206.11 101.47 207.63 103.65 208.74 106.31C209.67 108.51 209.55 108.45 213.05 108.41C216.35 108.36 217.08 108.45 218.31 109.05C225.39 112.51 217.61 125.59 205.66 130.33C199.65 132.71 198.20 132.85 180.39 132.87C164.51 132.89 165.38 132.84 164.14 133.78C162.82 134.78 162.30 136.08 162.30 138.40C162.30 139.80 161.98 143.39 161.42 148.29C159.70 163.39 153.05 175.87 141.81 185.08C138.73 187.60 134.92 189.85 129.84 192.14C125.19 194.25 115.57 196.33 110.54 196.34C109.17 196.34 108.60 196.57 108.23 197.27C108.10 197.53 107.64 198.49 107.20 199.42C103.90 206.45 98.19 211.37 88.72 215.35C85.89 216.54 85.91 216.52 85.98 219.64C86.04 222.32 86.33 222.69 90.00 224.75C92.29 226.04 94.81 227.75 95.82 228.71C100.98 233.57 100.86 241.48 95.60 244.93C93.34 246.41 91.24 246.84 87.56 246.56ZM134.07 240.25C128.56 238.82 125.22 235.56 123.96 230.38C123.70 229.30 123.68 228.71 123.59 220.23C123.53 214.63 123.44 210.89 123.34 210.35C123.00 208.36 122.74 207.31 122.25 205.86C121.48 203.62 121.59 203.31 123.26 202.93C129.90 201.41 136.34 198.97 140.57 196.35C147.00 192.39 151.46 188.55 155.60 183.42C157.24 181.39 157.77 181.54 158.23 184.19C159.89 193.79 157.66 202.21 151.13 210.89C149.39 213.20 149.36 213.30 149.36 215.69C149.35 218.41 149.61 218.72 151.96 218.75C157.60 218.82 162.31 219.95 165.26 221.92C173.20 227.23 172.45 238.39 164.03 240.43C162.18 240.88 135.88 240.72 134.07 240.25ZM185.67 173.17C183.79 172.66 182.15 171.55 180.81 169.86C178.08 166.41 174.71 164.68 169.71 164.16C166.89 163.87 166.86 163.80 167.90 160.34C168.86 157.13 169.71 152.32 170.10 147.82C170.40 144.42 170.40 144.42 170.65 144.15C172.11 142.53 184.08 147.33 189.10 151.54C193.73 155.43 196.56 162.25 195.41 166.75C194.22 171.40 189.83 174.29 185.67 173.17ZM144.28 53.97C148.98 52.79 151.98 47.68 150.77 42.91C148.71 34.78 137.83 33.29 134.20 40.65C130.66 47.83 136.74 55.88 144.28 53.97Z';
+
+/** The eye of the logo (its last sub-path, a hole), in viewBox units. */
+const EYE = { x: 141.3, y: 44.6, r: 10.9 };
+const GREEN = '#10B981';
+const DARK = '#06281d';
+const RIDGE = '#047857';
+/** The front of the head or the chest as it turns toward you, and the far leg. */
+const LIT = '#34D399';
+const SHADE = '#0EA372';
+const WHITE = '#fff';
+
+/**
+ * How the dinosaur stands, in degrees and viewBox units; REST is the logo. Positive angles turn
+ * clockwise: they open the jaw, lower the head, and swing a leg back.
+ */
+export interface Pose {
+    /** Where it stands, from where the logo has it, and how it leans (forward is positive) and squashes on its feet. */
+    x: number;
+    y: number;
+    lean: number;
+    sx: number;
+    sy: number;
+    /** Which way it faces: 1 as the logo (right), -1 the other way; how wide it is seen from the side in between. */
+    face: number;
+    head: number;
+    /**
+     * 0 in profile, 1 with its head turned to look at you. The head turns as a solid: its snout comes
+     * toward you, the side you saw slides back, and its front and far eye come into view.
+     */
+    turn: number;
+    /** 0 in profile, 1 with its body turned three quarters toward you, its chest in view (turning round). */
+    spin: number;
+
+    jaw: number;
+    /** The tail at its root, and its tip bending on from there. */
+    tail: number;
+    tip: number;
+    /** The legs, how high each foot is lifted, and the arm. */
+    back: number;
+    backLift: number;
+    front: number;
+    frontLift: number;
+    arm: number;
+}
+
+export const REST: Pose = {
+    x: 0,
+    y: 0,
+    lean: 0,
+    sx: 1,
+    sy: 1,
+    face: 1,
+    head: 0,
+    turn: 0,
+    spin: 0,
+    jaw: 0,
+    tail: 0,
+    tip: 0,
+    back: 0,
+    backLift: 0,
+    front: 0,
+    frontLift: 0,
+    arm: 0,
+};
+
+/** Where the bones turn, in the coordinates of the logo. */
+export const JOINTS = {
+    feet: { x: 128, y: 244 },
+    neck: { x: 122, y: 124 },
+    jaw: { x: 150, y: 94 },
+    tail: { x: 54, y: 160 },
+    tip: { x: 40, y: 112 },
+    hip: { x: 86, y: 188 },
+    frontHip: { x: 146, y: 192 },
+    shoulder: { x: 171, y: 149 },
+};
+
+/** A 2D affine transform [a, b, c, d, e, f], as in SVG's matrix(). */
+export type Matrix = [number, number, number, number, number, number];
+
+function multiply(m: Matrix, n: Matrix): Matrix {
+    return [
+        m[0] * n[0] + m[2] * n[1],
+        m[1] * n[0] + m[3] * n[1],
+        m[0] * n[2] + m[2] * n[3],
+        m[1] * n[2] + m[3] * n[3],
+        m[0] * n[4] + m[2] * n[5] + m[4],
+        m[1] * n[4] + m[3] * n[5] + m[5],
+    ];
+}
+
+/** Turn by `degrees` around `at`, scaling by `sx`, `sy` there. */
+function around(at: { x: number; y: number }, degrees: number, sx = 1, sy = 1): Matrix {
+    const a = (degrees * Math.PI) / 180;
+    const cos = Math.cos(a);
+    const sin = Math.sin(a);
+    const m: Matrix = [cos * sx, sin * sx, -sin * sy, cos * sy, 0, 0];
+    m[4] = at.x - m[0] * at.x - m[2] * at.y;
+    m[5] = at.y - m[1] * at.x - m[3] * at.y;
+    return m;
+}
+
+const move = (x: number, y: number): Matrix => [1, 0, 0, 1, x, y];
+
+function smooth(edge0: number, edge1: number, x: number): number {
+    const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0)));
+    return t * t * (3 - 2 * t);
+}
+
+/** The outline of the body (the dinosaur and the hole of its eye) as numbers, and the letters that join them. */
+const SKIN = (() => {
+    const ops: { cmd: string; count: number }[] = [];
+    const points: number[] = [];
+    let index = -1;
+    for (const token of LOGO_PATH.match(/[MCZ]|-?\d*\.?\d+/g) ?? []) {
+        if (token === 'M') {
+            index++;
+        }
+        if (index !== 0 && index !== 3) {
+            continue;
+        }
+        if (token === 'M' || token === 'C' || token === 'Z') {
+            ops.push({ cmd: token, count: 0 });
+        } else {
+            points.push(Number(token));
+            ops[ops.length - 1].count++;
+        }
+    }
+    const eye = ops.findIndex((op, i) => i > 0 && op.cmd === 'M');
+    // How many numbers the outline of the body has before the hole of the eye.
+    const body = ops.slice(0, eye).reduce((sum, op) => sum + op.count, 0);
+    return { ops, points, eye, body };
+})();
+
+const [, FRONT_LEG, ARM] = LOGO_PATH.split(/(?<=Z)(?=M)/);
+
+type Bone = 'body' | 'head' | 'jaw' | 'tail' | 'tip' | 'back';
+
+/**
+ * How much each bone moves a point of the outline. The weights fade over a band at each joint, so
+ * the outline bends there like skin instead of breaking.
+ */
+export function weights(x: number, y: number): Record<Bone, number> {
+    // The neck: a band across it, from the back of the neck down to the throat.
+    const across = ((x - 92) * 42 - (y - 106) * 76) / 86.8;
+    const head = smooth(-4, 24, across) * smooth(78, 96, x);
+    // The jaw: below the line of the mouth, fading at the corner of the mouth and down the throat.
+    const mouth = x >= 177 ? 96.5 : 80 + ((x - 143) * 16.5) / 34;
+    const jaw = head * smooth(mouth - 3, mouth + 4, y) * smooth(140, 152, x) * (1 - smooth(132, 146, y));
+    // The tail from where it leaves the back, and again toward its tip.
+    const tail = smooth(178, 128, y) * (1 - smooth(52, 92, x));
+    const tip = smooth(128, 86, y) * (1 - smooth(48, 70, x));
+    const back = smooth(186, 204, y) * (1 - smooth(108, 124, x));
+    return { head: head - jaw, jaw, tail: tail - tip, tip, back, body: Math.max(0, 1 - head - tail - back) };
+}
+
+const SKIN_WEIGHTS = Array.from({ length: SKIN.points.length / 2 }, (_, i) =>
+    (Object.entries(weights(SKIN.points[i * 2], SKIN.points[i * 2 + 1])) as [Bone, number][]).filter(([, w]) => w > 0.001),
+);
+
+/** Mirror and narrow by `face` (1 as drawn, -1 mirrored) across the line the dinosaur stands on. */
+function facing(face: number): Matrix {
+    return [face, 0, 0, 1, JOINTS.feet.x * (1 - face), 0];
+}
+
+/** The upright axis the head turns about, in the coordinates of the logo. */
+const HEAD_AXIS = { x: 132, y: 60 };
+/**
+ * How many pieces the rounded side of the head and body is made of, from the far side to the near one.
+ * Between two pieces the outline is swept, not stacked, so the side is smooth at every angle.
+ */
+export const DEPTH = 4;
+/** How many straight pieces each curve of the outline is swept as. */
+const FLAT = 3;
+
+/** Where the head and the body are thickest: their slices round off toward these as they near the sides. */
+const HEAD_CENTER = { x: 160, y: 60 };
+const BODY_CENTER = { x: 112, y: 160 };
+/** How much the outermost slices draw in, turned fully toward you, so the solids look round rather than boxed. */
+const ROUND_HEAD = 0.1;
+const ROUND_BODY = 0.07;
+/** How far the turned head turns at most, in degrees. */
+const YAW = 58;
+/** Half the thickness of the head and of the body, in units of the logo. */
+const HEAD_DEPTH = 22;
+const BODY_DEPTH = 26;
+
+/** The bones of a pose, and which way (in the drawing) the near side of the head and of the body lies from their middle. */
+interface Rig {
+    bones: Record<Bone | 'front' | 'arm', Matrix>;
+    eye: Matrix;
+    /** How far the near side of a point of the head, and of the body, lies from its middle (the far side lies as far the other way). */
+    head: [number, number];
+    body: [number, number];
+    /** How far the head and the body are turned toward you (0 to 1), to round off their slices. */
+    turn: number;
+    spin: number;
+}
+
+/** Turn `m` by its linear part only. */
+const vector = (m: Matrix, x: number, y: number): [number, number] => [m[0] * x + m[2] * y, m[1] * x + m[3] * y];
+
+/**
+ * The transforms of a pose. Turning toward you is a turn about an upright axis: the side seen in
+ * profile narrows by the cosine and slides back by the sine of the angle times its depth, and the far
+ * side slides forward as far, so what lies between (its front) shows.
+ */
+export function rig(pose: Pose): Rig {
+    const { feet, neck, jaw, tail, tip, hip, frontHip, shoulder } = JOINTS;
+    const place = multiply(move(pose.x, pose.y), multiply(facing(pose.face), around(feet, pose.lean, pose.sx, pose.sy)));
+    const within = (m: Matrix) => multiply(place, m);
+    const yaw = (pose.turn * YAW * Math.PI) / 180;
+    const sin = Math.sin(yaw);
+    const turned = around(neck, pose.head);
+    const head = multiply(turned, around(HEAD_AXIS, 0, Math.cos(yaw), 1));
+    const tailBone = around(tail, pose.tail);
+    const headSide = vector(within(turned), -HEAD_DEPTH * sin, 0);
+    const bodySide = vector(place, -BODY_DEPTH * pose.spin, 0);
+    // The eye sits on the near side of the head, moving with it; seen at a slant it narrows less than the head does.
+    const eye = multiply(move(bodySide[0], bodySide[1]), within(multiply(head, around(EYE, 0, (1 - 0.3 * sin) / Math.cos(yaw), 1))));
+    return {
+        bones: {
+            body: place,
+            head: within(head),
+            jaw: within(multiply(head, around(jaw, pose.jaw))),
+            tail: within(tailBone),
+            tip: within(multiply(tailBone, around(tip, pose.tip))),
+            back: within(multiply(move(0, -pose.backLift), around(hip, pose.back))),
+            // The front leg is the far one, the arm the near one: they move with their sides.
+            front: multiply(move(-bodySide[0], -bodySide[1]), within(multiply(move(0, -pose.frontLift), around(frontHip, pose.front)))),
+            arm: multiply(move(bodySide[0], bodySide[1]), within(around(shoulder, pose.arm))),
+        },
+        eye: multiply(move(headSide[0], headSide[1]), eye),
+        head: headSide,
+        body: bodySide,
+        turn: sin,
+        spin: pose.spin,
+    };
+}
+
+const r1 = (n: number) => Math.round(n * 10) / 10;
+const round = (n: number) => Math.round(n * 100) / 100;
+
+/** How much of each point of the outline belongs to the head (and turns with it toward you). */
+const HEAD_WEIGHTS = SKIN_WEIGHTS.map(ws => ws.reduce((sum, [bone, w]) => sum + (bone === 'head' || bone === 'jaw' ? w : 0), 0));
+
+/**
+ * The points of the outline in a pose, each moved by its bones blended by its weights: `side` 1 for
+ * the side you see, -1 for the far side, and in between for the inside of the solid; `eye` with the
+ * points of the hole of the eye.
+ */
+function outline(r: Rig, side: number, eye: boolean): number[] {
+    const end = eye ? SKIN.points.length : SKIN.body;
+    const out: number[] = new Array(end);
+    // Toward its sides a solid draws in, round: the outline is made smaller about the thickest part.
+    const edge = 1 - Math.sqrt(Math.max(0, 1 - side * side));
+    for (let p = 0; p < end; p += 2) {
+        const h = HEAD_WEIGHTS[p / 2];
+        const inset = edge * (h * ROUND_HEAD * r.turn + (1 - h) * ROUND_BODY * r.spin);
+        const cx = h * HEAD_CENTER.x + (1 - h) * BODY_CENTER.x;
+        const cy = h * HEAD_CENTER.y + (1 - h) * BODY_CENTER.y;
+        const x = SKIN.points[p] + (cx - SKIN.points[p]) * inset;
+        const y = SKIN.points[p + 1] + (cy - SKIN.points[p + 1]) * inset;
+        let tx = h * side * r.head[0] + side * r.body[0];
+        let ty = h * side * r.head[1] + side * r.body[1];
+        for (const [bone, w] of SKIN_WEIGHTS[p / 2]) {
+            const m = r.bones[bone];
+            tx += w * (m[0] * x + m[2] * y + m[4]);
+            ty += w * (m[1] * x + m[3] * y + m[5]);
+        }
+        out[p] = tx;
+        out[p + 1] = ty;
+    }
+    return out;
+}
+
+/** The points as a path, joined as the logo joins them. */
+function path(points: number[]): string {
+    let d = '';
+    let p = 0;
+    for (const { cmd, count } of SKIN.ops) {
+        if (p >= points.length && cmd !== 'Z') {
+            break;
+        }
+        d += cmd;
+        for (let k = 0; k < count; k += 2, p += 2) {
+            d += `${k ? ' ' : ''}${r1(points[p])} ${r1(points[p + 1])}`;
+        }
+    }
+    return d;
+}
+
+/** The outline of the body as a polygon: each curve as `flat` straight pieces. */
+function polygon(points: number[], flat: number): number[] {
+    const out: number[] = [points[0], points[1]];
+    for (let p = 2; p + 5 < points.length; p += 6) {
+        const x0 = out[out.length - 2];
+        const y0 = out[out.length - 1];
+        for (let k = 1; k <= flat; k++) {
+            const t = k / flat;
+            const u = 1 - t;
+            const a = u * u * u;
+            const b = 3 * u * u * t;
+            const c = 3 * u * t * t;
+            const e = t * t * t;
+            out.push(a * x0 + b * points[p] + c * points[p + 2] + e * points[p + 4], a * y0 + b * points[p + 1] + c * points[p + 3] + e * points[p + 5]);
+        }
+    }
+    return out;
+}
+
+/**
+ * The side of the solid: every edge of the outline swept from one piece of the depth to the next, as
+ * a quadrilateral. All of them wind the same way, so together they fill the side without seams.
+ */
+function wall(pieces: number[][], flat: number): string {
+    const polygons = pieces.map(points => polygon(points, flat));
+    let d = '';
+    for (let k = 0; k + 1 < polygons.length; k++) {
+        const a = polygons[k];
+        const b = polygons[k + 1];
+        for (let i = 0; i < a.length; i += 2) {
+            const j = (i + 2) % a.length;
+            const quad = [a[i], a[i + 1], a[j], a[j + 1], b[j], b[j + 1], b[i], b[i + 1]];
+            let area = 0;
+            for (let q = 0; q < 8; q += 2) {
+                area += quad[q] * quad[(q + 3) % 8] - quad[(q + 2) % 8] * quad[q + 1];
+            }
+            // A sliver (an edge running along the sweep) covers nothing, and rounding could turn it the wrong way.
+            if (Math.abs(area) < 1) {
+                continue;
+            }
+            const order = area > 0 ? [0, 2, 4, 6] : [6, 4, 2, 0];
+            d += `M${order.map(q => `${r1(quad[q])} ${r1(quad[q + 1])}`).join('L')}Z`;
+        }
+    }
+    return d;
+}
+
+/** The outline of the body as you see it in a pose. */
+export function skin(r: Rig): string {
+    return path(outline(r, 1, true));
+}
+
+/** Where the middle of the head is in a pose, in the coordinates of the drawing; the eyes follow what is around it from there. */
+export function headAt(pose: Pose): { x: number; y: number } {
+    const m = rig(pose).bones.head;
+    return { x: m[0] * HEAD_CENTER.x + m[2] * HEAD_CENTER.y + m[4], y: m[1] * HEAD_CENTER.x + m[3] * HEAD_CENTER.y + m[5] };
+}
+
+export function matrix(m: Matrix): string {
+    return `matrix(${m.map(n => Math.round(n * 1000) / 1000).join(' ')})`;
+}
+
+type Eyes = 'open' | 'wide' | 'up' | 'down' | 'happy' | 'closed';
+
+const EYES: Record<Mood, Eyes> = {
+    idle: 'open',
+    listening: 'wide',
+    thinking: 'up',
+    working: 'down',
+    speaking: 'open',
+    attention: 'wide',
+    done: 'happy',
+    sleeping: 'closed',
+};
+
+/** Where the slit of the pupil looks, and how low the brow comes down over the eye (its back, its front over the snout). */
+const GAZE: Record<'open' | 'wide' | 'up' | 'down', { dx: number; dy: number; brow: [number, number] }> = {
+    open: { dx: 2.4, dy: 0.8, brow: [34, 43] },
+    wide: { dx: 1.2, dy: 0, brow: [32, 39] },
+    up: { dx: -0.4, dy: -2.4, brow: [33, 41] },
+    down: { dx: 3.4, dy: 2.6, brow: [35.5, 45] },
+};
+
+const IRIS =
+    '<stop offset="0" stop-color="#FEF08A"/><stop offset="0.35" stop-color="#FACC15"/><stop offset="0.75" stop-color="#F97316"/><stop offset="1" stop-color="#B91C1C"/>';
+
+function eye(kind: Eyes, id: string): string {
+    const { x, y, r } = EYE;
+    if (kind === 'closed') {
+        // Asleep, the eye is a heavy line cut out of the green, still frowning.
+        return `<circle cx="${x}" cy="${y}" r="${r + 0.6}" fill="${GREEN}"/><path d="M${x - 9} ${y - 3} Q${x} ${y + 3} ${x + 9} ${y + 2}" fill="none" stroke="${DARK}" stroke-width="3.6" stroke-linecap="round"/>`;
+    }
+    const defs =
+        `<radialGradient id="${id}-iris" cx="0.4" cy="0.6" r="0.62">${IRIS}</radialGradient>` +
+        `<clipPath id="${id}-eye"><circle cx="${x}" cy="${y}" r="${r + 0.8}"/></clipPath>`;
+    const ball = `<circle cx="${x}" cy="${y}" r="${r + 1}" fill="url(#${id}-iris)"/>`;
+    if (kind === 'happy') {
+        // Pleased with itself: a smug, narrowed eye, the lower lid pushed up under the brow.
+        return (
+            defs +
+            `<g clip-path="url(#${id}-eye)">${ball}<ellipse cx="${x + 2.4}" cy="${y}" rx="1.4" ry="6" fill="${DARK}"/>` +
+            `<path d="M${x - r - 1} ${y - r - 1} H${x + r + 1} V${y - 1} L${x - r - 1} ${y - 6}Z" fill="${GREEN}"/>` +
+            `<path d="M${x - r - 1} ${y + r + 1} V${y + 3} Q${x} ${y - 2} ${x + r + 1} ${y + 3} V${y + r + 1}Z" fill="${GREEN}"/></g>` +
+            brow(x - r - 4, y - 7, x + r + 5, y - 2)
+        );
+    }
+    const gaze = GAZE[kind];
+    const px = x + gaze.dx;
+    const py = y + gaze.dy;
+    const [back, front] = gaze.brow;
+    return (
+        defs +
+        `<g clip-path="url(#${id}-eye)">${ball}` +
+        `<g class="ta-dino-pupil"><path d="M${px} ${py - 8.6} Q${px + 2.6} ${py} ${px} ${py + 8.6} Q${px - 2.6} ${py} ${px} ${py - 8.6}Z" fill="${DARK}"/><circle cx="${px - 3.4}" cy="${py - 3}" r="1.2" fill="${WHITE}" opacity="0.9"/></g>` +
+        // The upper lid comes down to the brow, lowest over the snout, so it glares; the lower lid narrows it from below.
+        `<path d="M${x - r - 1} ${y - r - 2} H${x + r + 1} V${front} L${x - r - 1} ${back}Z" fill="${GREEN}"/>` +
+        `<path d="M${x - r - 1} ${y + r + 1} V${y + 6} Q${x} ${y + 9.5} ${x + r + 1} ${y + 8} V${y + r + 1}Z" fill="${GREEN}"/>` +
+        `<rect class="ta-dino-lid" x="${x - r - 1}" y="${y - r - 1}" width="${r * 2 + 2}" height="${r * 2 + 2}" fill="${GREEN}"/></g>` +
+        brow(x - r - 4, back - 1.6, x + r + 5, front + 0.4)
+    );
+}
+
+/** The ridge of the brow over the lid: a wedge, thin at the back, thick and low over the snout. */
+function brow(x1: number, y1: number, x2: number, y2: number): string {
+    const p = (x: number, y: number) => `${round(x)} ${round(y)}`;
+    return `<path class="ta-dino-brow" d="M${p(x1, y1 - 1)} Q${p((x1 + x2) / 2, (y1 + y2) / 2 - 4.4)} ${p(x2 + 1, y2 - 3.6)} Q${p(x2 + 3, y2 + 1.4)} ${p(x2 - 1, y2 + 2.2)} L${p(x1 + 1, y1 + 1.4)} Q${p(x1 - 1.4, y1 + 0.6)} ${p(x1, y1 - 1)}Z" fill="${RIDGE}"/>`;
+}
+
+/** A round mark above the tail, ringed in the color of the page so it stands off the dinosaur. */
+function badge(color: string, inner: string): string {
+    return `<g transform="translate(54 34) scale(1.3)"><g class="ta-dino-badge"><circle r="23" fill="${color}" stroke="var(--ta-main, #fff)" stroke-width="5"/>${inner}</g></g>`;
+}
+
+function mark(mood: Mood): string {
+    switch (mood) {
+        case 'attention':
+            return badge(
+                '#F59E0B',
+                `<path d="M0 -11 L0 2.5" stroke="${WHITE}" stroke-width="5.4" stroke-linecap="round"/><circle cy="10" r="3.2" fill="${WHITE}"/>`,
+            );
+        case 'working':
+            return badge('#3B82F6', [-9, 0, 9].map(x => `<circle class="ta-dino-dot" cx="${x}" r="3.4" fill="${WHITE}"/>`).join(''));
+        case 'listening':
+            return badge(
+                '#8B5CF6',
+                `<rect x="-5" y="-12" width="10" height="16" rx="5" fill="${WHITE}"/><path d="M-9.5 -1 Q-9.5 9 0 9 Q9.5 9 9.5 -1 M0 9 L0 13" fill="none" stroke="${WHITE}" stroke-width="3.2" stroke-linecap="round"/>`,
+            );
+        case 'thinking':
+            return [
+                [102, 24, 6],
+                [78, 10, 8.5],
+                [48, 4, 12],
+            ]
+                .map(([x, y, r]) => `<circle class="ta-dino-bubble" cx="${x}" cy="${y}" r="${r}" fill="var(--ta-muted, #8e8e93)"/>`)
+                .join('');
+        case 'sleeping':
+            return [
+                [86, 34, 0.9],
+                [54, 12, 1.35],
+            ]
+                .map(
+                    ([x, y, s]) =>
+                        `<path class="ta-dino-z" transform="translate(${x} ${y}) scale(${s})" d="M-8 -8 L8 -8 L-8 8 L8 8" fill="none" stroke="var(--ta-muted, #8e8e93)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>`,
+                )
+                .join('');
+        case 'speaking':
+            // Waves from the snout.
+            return [12, 22]
+                .map(
+                    r =>
+                        `<path class="ta-dino-wave" d="M${238 + r * 0.3} ${94 - r} Q${238 + r} 94 ${238 + r * 0.3} ${94 + r}" fill="none" stroke="${GREEN}" stroke-width="4.5" stroke-linecap="round"/>`,
+                )
+                .join('');
+        default:
+            return '';
+    }
+}
+
+/** The transforms and the outline a pose draws, ready for the attributes of the drawing. */
+export interface Frame {
+    skin: string;
+    /** The far side of the solid, and its side between the far side and the near one; in profile only the outline, and no side. */
+    far: string;
+    wall: string;
+    eye: string;
+    front: string;
+    arm: string;
+}
+
+/**
+ * What a pose draws. `fine` for a large drawing; a small one (a few dozen pixels) is swept in fewer
+ * pieces, which nobody can tell apart at that size and which take a fraction of the time.
+ */
+export function frame(pose: Pose, fine = true): Frame {
+    const r = rig(pose);
+    const near = skin(r);
+    const solid = r.turn > 0.001 || r.spin > 0.001;
+    const depth = fine ? DEPTH : 2;
+    const pieces = solid ? Array.from({ length: depth + 1 }, (_, i) => outline(r, -1 + (2 * i) / depth, false)) : [outline(r, 0, false)];
+    return {
+        skin: near,
+        far: path(pieces[0]),
+        wall: solid ? wall(pieces, fine ? FLAT : 1) : '',
+        eye: matrix(r.eye),
+        front: matrix(r.bones.front),
+        arm: matrix(r.bones.arm),
+    };
+}
+
+/**
+ * ta is Cell's dinosaur, drawn from the outline of assets/logo.svg; at REST it is the logo. A pose
+ * bends that outline on its bones like skin (dino-motion.ts makes the poses, ta-avatar.tsx plays
+ * them). Plain SVG markup; `id` keeps the gradients and clip paths of several drawings on one page apart.
+ */
+export namespace DinoAvatar {
+    /** The small mark that tells agents apart: its first two characters, as the user sees them; '' for none. */
+    export function markText(text: string | undefined): string {
+        return Array.from((text ?? '').trim())
+            .slice(0, 2)
+            .join('');
+    }
+
+    export function render(mood: Mood, id = 'ta', pose: Pose = REST): string {
+        const f = frame(pose);
+        return (
+            '<g class="ta-dino-body">' +
+            `<path class="ta-dino-front" d="${FRONT_LEG}" fill="${SHADE}" transform="${f.front}"/>` +
+            // Turned toward you, the head and body are solids: their far side and the side swept from it to
+            // the near one show their front (the face, the chest), lit.
+            `<path class="ta-dino-far" d="${f.far}" fill="${LIT}"/>` +
+            `<path class="ta-dino-wall" d="${f.wall}" fill="${LIT}"/>` +
+            `<path class="ta-dino-skin" d="${f.skin}" fill="${GREEN}" fill-rule="evenodd"/>` +
+            `<path class="ta-dino-arm" d="${ARM}" fill="${GREEN}" transform="${f.arm}"/>` +
+            `<g class="ta-dino-eye" transform="${f.eye}">${eye(EYES[mood], id)}</g>` +
+            `</g>${mark(mood)}`
+        );
+    }
+}