@echomem/mcp 1.4.7 → 1.4.9

package/assets/hud/claude.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"></path></svg>

package/assets/hud/codex.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Codex</title><path d="M19.503 0H4.496A4.496 4.496 0 000 4.496v15.007A4.496 4.496 0 004.496 24h15.007A4.496 4.496 0 0024 19.503V4.496A4.496 4.496 0 0019.503 0z" fill="#fff"></path><path d="M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388zm3.482 10.565a.637.637 0 000 1.272h3.636a.637.637 0 100-1.272h-3.636zM8.462 9.23a.637.637 0 00-1.106.631l1.272 2.224-1.266 2.136a.636.636 0 101.095.649l1.454-2.455a.636.636 0 00.005-.64L8.462 9.23z" fill="url(#lobe-icons-codex-gradient)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-codex-gradient" x1="12" x2="12" y1="3" y2="21"><stop stop-color="#B1A7FF"></stop><stop offset=".5" stop-color="#7A9DFF"></stop><stop offset="1" stop-color="#3941FF"></stop></linearGradient></defs></svg>

package/assets/hud/session-viewer.html

@@ -1668,6 +1668,40 @@
       document.body.prepend(bar);
     }
 
+    // Session switcher: one tab per recent Codex / Claude Code / Claude Desktop session (from the HUD).
+    async function injectSessionTabs(currentPath, mode) {
+      if (document.getElementById("echoSessionBar")) return;
+      let sessions = [];
+      try {
+        const state = await (await fetch("/state")).json();
+        sessions = (state && state.recentSessions) || [];
+      } catch { return; }
+      if (!sessions.length) return;
+      const clientName = (c) => c === "codex" ? "Codex" : c === "claude-code" ? "Claude Code" : c === "claude-desktop" ? "Claude Desktop" : c;
+      const bar = document.createElement("div");
+      bar.id = "echoSessionBar";
+      bar.style.cssText = "position:sticky;top:0;z-index:61;display:flex;gap:6px;align-items:center;padding:8px 14px;background:#010409;border-bottom:1px solid #30363d;overflow-x:auto;font:12px system-ui,-apple-system,sans-serif";
+      const tag = document.createElement("span");
+      tag.textContent = "session:"; tag.style.cssText = "color:#8b949e;margin-right:2px;flex:0 0 auto";
+      bar.append(tag);
+      sessions.forEach((sess) => {
+        const active = sess.sourcePath === currentPath;
+        const b = document.createElement("button");
+        const title = (sess.title || "").length > 24 ? (sess.title || "").slice(0, 23) + "…" : (sess.title || "");
+        b.textContent = (sess.live ? "● " : "") + clientName(sess.client) + " · " + title;
+        b.title = clientName(sess.client) + " · " + (sess.title || "");
+        b.style.cssText = "flex:0 0 auto;padding:6px 12px;border-radius:999px;cursor:pointer;color:#c9d1d9;white-space:nowrap;border:1px solid " + (active ? "#1f6feb" : "#30363d") + ";background:" + (active ? "#132f5e" : "#161b22");
+        b.onclick = () => {
+          const u = new URL(window.location.href);
+          u.searchParams.set("path", sess.sourcePath);
+          u.searchParams.set("mode", mode);
+          window.location.href = u.toString();
+        };
+        bar.append(b);
+      });
+      document.body.prepend(bar); // above the mode bar → session on top, then event-log/payload
+    }
+
     async function initFromQuery() {
       const params = new URLSearchParams(window.location.search);
       const sessionPath = params.get("path");
@@ -1675,6 +1709,7 @@
       let src = params.get("src");
       if (sessionPath) {
         injectModeToggle(sessionPath, mode);
+        await injectSessionTabs(sessionPath, mode);
         src = (mode === "payload" ? "/session-payload" : "/session-raw") + "?path=" + encodeURIComponent(sessionPath);
       }
       if (!src) return;

package/dist/city/chaos-to-clarity-pencil.html

@@ -0,0 +1,582 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Chaos to Clarity — Pencil Study</title>
+  <style>
+    * { box-sizing: border-box; }
+    html, body { min-height: 100%; }
+    body {
+      margin: 0;
+      display: grid;
+      place-items: center;
+      padding: clamp(12px, 4vw, 48px);
+      background: #d8d4ca;
+    }
+    .sheet {
+      position: relative;
+      width: min(92vw, 900px);
+      aspect-ratio: 1;
+      overflow: hidden;
+      background: #f2eee4;
+      box-shadow: 0 24px 70px rgba(39, 38, 31, .18), 0 2px 5px rgba(39, 38, 31, .12);
+    }
+    canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+<body>
+  <main class="sheet" aria-label="混乱经过透镜转化为清晰方向的铅笔插画">
+    <canvas id="art" width="1200" height="1200"></canvas>
+  </main>
+
+  <script>
+    const canvas = document.getElementById("art");
+    const g = canvas.getContext("2d");
+    const TAU = Math.PI * 2;
+    const ink = "#292a25";
+    const paper = "#f2eee4";
+
+    function randomFactory(seed) {
+      return function random() {
+        let t = seed += 0x6D2B79F5;
+        t = Math.imul(t ^ t >>> 15, t | 1);
+        t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+        return ((t ^ t >>> 14) >>> 0) / 4294967296;
+      };
+    }
+
+    function pencil(path, width = 2, alpha = .72, repeats = 2, seed = 1) {
+      const random = randomFactory(seed);
+      for (let i = 0; i < repeats; i++) {
+        g.save();
+        g.translate((random() - .5) * 2.1, (random() - .5) * 1.6);
+        path();
+        g.strokeStyle = ink;
+        g.globalAlpha = alpha / Math.max(1, repeats * .7);
+        g.lineWidth = width + random() * .7;
+        g.lineCap = "round";
+        g.lineJoin = "round";
+        g.stroke();
+        g.restore();
+      }
+    }
+
+    function line(x1, y1, x2, y2, width = 1.5, alpha = .6, seed = 1) {
+      pencil(() => {
+        g.beginPath();
+        g.moveTo(x1, y1);
+        g.lineTo(x2, y2);
+      }, width, alpha, 2, seed);
+    }
+
+    function poly(points, close = false, width = 1.8, alpha = .7, seed = 1) {
+      pencil(() => {
+        g.beginPath();
+        g.moveTo(points[0][0], points[0][1]);
+        for (let i = 1; i < points.length; i++) g.lineTo(points[i][0], points[i][1]);
+        if (close) g.closePath();
+      }, width, alpha, 2, seed);
+    }
+
+    function ellipse(cx, cy, rx, ry, width = 1.7, alpha = .68, seed = 1) {
+      pencil(() => {
+        g.beginPath();
+        g.ellipse(cx, cy, rx, ry, 0, 0, TAU);
+      }, width, alpha, 2, seed);
+    }
+
+    function arrow(x1, y1, x2, y2, seed = 1, alpha = .68) {
+      line(x1, y1, x2, y2, 1.5, alpha, seed);
+      const angle = Math.atan2(y2 - y1, x2 - x1);
+      const size = 12;
+      poly([
+        [x2 - Math.cos(angle - .55) * size, y2 - Math.sin(angle - .55) * size],
+        [x2, y2],
+        [x2 - Math.cos(angle + .55) * size, y2 - Math.sin(angle + .55) * size]
+      ], false, 1.5, alpha, seed + 2);
+    }
+
+    /*
+      PencilLight is the reusable drawing model for this document.
+
+      1. Curve tangent = direction of the form.
+      2. Curve normal = candidate side for light or shadow.
+      3. Depth controls width, contrast and spacing: far is thin/light/open;
+         near is heavier/darker/closer.
+      4. Shadow is made from continuous pressure strokes following the form,
+         never from mechanical dashed fills.
+      5. A ribbon is a perspective surface: its two edges come from the curve
+         normal, while its width grows toward the viewer.
+    */
+    const PencilLight = Object.freeze({
+      light: { x: -.82, y: -.57 },
+
+      cubic(p0, p1, p2, p3, steps = 36) {
+        const points = [];
+        for (let i = 0; i <= steps; i++) {
+          const t = i / steps;
+          const u = 1 - t;
+          points.push({
+            x: u*u*u*p0.x + 3*u*u*t*p1.x + 3*u*t*t*p2.x + t*t*t*p3.x,
+            y: u*u*u*p0.y + 3*u*u*t*p1.y + 3*u*t*t*p2.y + t*t*t*p3.y,
+            depth: t
+          });
+        }
+        return points;
+      },
+
+      frames(points) {
+        return points.map((point, i) => {
+          const a = points[Math.max(0, i - 1)];
+          const b = points[Math.min(points.length - 1, i + 1)];
+          const tx = b.x - a.x;
+          const ty = b.y - a.y;
+          const length = Math.hypot(tx, ty) || 1;
+          return { ...point, tx: tx / length, ty: ty / length, nx: -ty / length, ny: tx / length };
+        });
+      },
+
+      curve(points, { width = 1.4, alpha = .58, seed = 1, repeats = 2 } = {}) {
+        pencil(() => {
+          g.beginPath();
+          g.moveTo(points[0].x, points[0].y);
+          for (let i = 1; i < points.length; i++) g.lineTo(points[i].x, points[i].y);
+        }, width, alpha, repeats, seed);
+      },
+
+      ribbon(points, widthAt, { seed = 1 } = {}) {
+        const frames = this.frames(points);
+        const left = [];
+        const right = [];
+        frames.forEach((frame, i) => {
+          const half = widthAt(frame.depth, i) * .5;
+          left.push({ x: frame.x + frame.nx * half, y: frame.y + frame.ny * half });
+          right.push({ x: frame.x - frame.nx * half, y: frame.y - frame.ny * half });
+        });
+
+        g.beginPath();
+        g.moveTo(left[0].x, left[0].y);
+        for (let i = 1; i < left.length; i++) g.lineTo(left[i].x, left[i].y);
+        for (let i = right.length - 1; i >= 0; i--) g.lineTo(right[i].x, right[i].y);
+        g.closePath();
+        g.fillStyle = "rgba(244,241,233,.96)";
+        g.fill();
+
+        this.curve(left, { width: 1.2, alpha: .54, seed });
+        this.curve(right, { width: 1.2, alpha: .54, seed: seed + 1 });
+
+        // The edge whose normal points away from the light receives pressure.
+        const mid = frames[Math.floor(frames.length * .58)];
+        const shadowSign = mid.nx * -this.light.x + mid.ny * -this.light.y >= 0 ? 1 : -1;
+        const shadowEdge = shadowSign > 0 ? left : right;
+        for (let band = 0; band < 4; band++) {
+          const shaded = shadowEdge.map((point, i) => {
+            const frame = frames[i];
+            const depth = frame.depth;
+            const distance = 2 + band * (2.2 + depth * 1.8);
+            return {
+              x: point.x + frame.nx * shadowSign * distance,
+              y: point.y + frame.ny * shadowSign * distance
+            };
+          });
+          this.curve(shaded, {
+            width: .75 + band * .08,
+            alpha: .34 - band * .055,
+            seed: seed + 20 + band,
+            repeats: 1
+          });
+        }
+      },
+
+      slopeFacet({ ridge, foot, spread, strokes, darkness, seed }) {
+        const random = randomFactory(seed);
+        for (let i = 0; i < strokes; i++) {
+          const lane = strokes === 1 ? 0 : i / (strokes - 1) - .5;
+          const start = {
+            x: ridge.x + lane * spread,
+            y: ridge.y + Math.abs(lane) * spread * .28
+          };
+          const end = {
+            x: foot.x + lane * spread * 1.5,
+            y: foot.y - random() * 8
+          };
+          const points = this.cubic(
+            start,
+            { x: start.x + (end.x - start.x) * .22, y: start.y + (end.y - start.y) * .4 },
+            { x: start.x + (end.x - start.x) * .72, y: start.y + (end.y - start.y) * .82 },
+            end,
+            18
+          );
+          this.curve(points, {
+            width: .65 + darkness * .55,
+            alpha: .12 + darkness * .3,
+            seed: seed + i,
+            repeats: 1
+          });
+        }
+      },
+
+      meshSurface({ height, project, columns = 17, rows = 12, samples = 58, seed = 1 }) {
+        const clamp = value => Math.max(0, Math.min(1, value));
+
+        // Depth rows behave like soft contour lines across the terrain.
+        for (let row = 0; row < rows; row++) {
+          const v = row / (rows - 1);
+          const points = [];
+          for (let i = 0; i <= samples; i++) {
+            const u = -1 + i / samples * 2;
+            points.push(project(u, v, height(u, v)));
+          }
+          this.curve(points, {
+            width: .52 + v * .42,
+            alpha: .13 + v * .16,
+            seed: seed + row,
+            repeats: 1
+          });
+        }
+
+        // Flow lines run continuously from the far ridge toward the viewer.
+        // Their pressure is derived from surface slope relative to the light.
+        for (let column = 0; column < columns; column++) {
+          const u = -1 + column / (columns - 1) * 2;
+          const points = [];
+          for (let i = 0; i <= samples; i++) {
+            const v = i / samples;
+            points.push(project(u, v, height(u, v)));
+          }
+          const slope = height(Math.min(1, u + .025), .42) - height(Math.max(-1, u - .025), .42);
+          const darkness = clamp(.48 + slope * 2.4);
+          this.curve(points, {
+            width: .55 + darkness * .36,
+            alpha: .15 + darkness * .2,
+            seed: seed + 100 + column,
+            repeats: 1
+          });
+        }
+      }
+    });
+
+    function drawPaper() {
+      const random = randomFactory(8041);
+      g.fillStyle = paper;
+      g.fillRect(0, 0, canvas.width, canvas.height);
+      const colors = ["rgba(58,55,46,.025)", "rgba(255,255,255,.065)"];
+      for (let pass = 0; pass < 2; pass++) {
+        g.beginPath();
+        for (let i = 0; i < 4200; i++) {
+          const x = random() * canvas.width;
+          const y = random() * canvas.height;
+          const w = .35 + random() * 1.5;
+          g.rect(x, y, w, w * (.4 + random()));
+        }
+        g.fillStyle = colors[pass];
+        g.fill();
+      }
+      g.beginPath();
+      for (let i = 0; i < 180; i++) {
+        const x = random() * canvas.width;
+        const y = random() * canvas.height;
+        g.moveTo(x, y);
+        g.lineTo(x + 8 + random() * 24, y + (random() - .5) * 3);
+      }
+      g.strokeStyle = "rgba(69,65,54,.028)";
+      g.lineWidth = .55;
+      g.stroke();
+    }
+
+    function dottedJourney() {
+      g.save();
+      g.strokeStyle = "rgba(41,42,37,.45)";
+      g.lineWidth = 1.5;
+      g.setLineDash([3, 11]);
+      g.lineCap = "round";
+      g.beginPath();
+      g.moveTo(88, 130);
+      g.bezierCurveTo(55, 240, 232, 225, 178, 330);
+      g.bezierCurveTo(130, 430, 348, 366, 336, 510);
+      g.bezierCurveTo(325, 635, 118, 608, 182, 742);
+      g.bezierCurveTo(225, 822, 336, 788, 397, 862);
+      g.stroke();
+      g.restore();
+    }
+
+    function drawChaos() {
+      const random = randomFactory(3319);
+      const cx = 238;
+      const cy = 550;
+      for (let layer = 0; layer < 3; layer++) {
+        g.beginPath();
+        const strands = 17 + layer * 7;
+        for (let strand = 0; strand < strands; strand++) {
+          let x = cx + (random() - .5) * (174 - layer * 22);
+          let y = cy + (random() - .5) * (184 - layer * 20);
+          g.moveTo(x, y);
+          const steps = 8 + Math.floor(random() * 7);
+          for (let step = 0; step < steps; step++) {
+            const pull = .06 + layer * .018;
+            x += (random() - .5) * (72 - layer * 9) + (cx - x) * pull;
+            y += (random() - .5) * (68 - layer * 8) + (cy - y) * pull;
+            g.lineTo(x, y);
+          }
+        }
+        g.strokeStyle = `rgba(35,36,32,${.11 + layer * .045})`;
+        g.lineWidth = .74 + layer * .14;
+        g.lineCap = "round";
+        g.stroke();
+      }
+      for (let i = 0; i < 7; i++) {
+        const x = cx + (random() - .5) * 200;
+        const y = cy + (random() - .5) * 200;
+        ellipse(x, y, 16 + random() * 46, 10 + random() * 34, .9, .24, 500 + i);
+      }
+    }
+
+    function drawQuestion(x, y, s, seed) {
+      pencil(() => {
+        g.beginPath();
+        g.moveTo(x - s * .25, y - s * .28);
+        g.bezierCurveTo(x - s * .1, y - s * .66, x + s * .55, y - s * .48, x + s * .34, y - s * .08);
+        g.bezierCurveTo(x + s * .22, y + s * .12, x, y + s * .12, x, y + s * .38);
+      }, 1.6, .57, 2, seed);
+      ellipse(x, y + s * .62, 2.4, 2.4, 1.2, .65, seed + 1);
+    }
+
+    function drawGear(x, y, r, seed) {
+      ellipse(x, y, r * .58, r * .58, 1.4, .55, seed);
+      ellipse(x, y, r * .16, r * .16, 1.2, .55, seed + 1);
+      for (let i = 0; i < 9; i++) {
+        const a = i / 9 * TAU;
+        line(x + Math.cos(a) * r * .63, y + Math.sin(a) * r * .63,
+             x + Math.cos(a) * r, y + Math.sin(a) * r, 1.4, .55, seed + i + 2);
+      }
+    }
+
+    function drawCloud(x, y, s, seed) {
+      pencil(() => {
+        g.beginPath();
+        g.moveTo(x - s * .65, y + s * .2);
+        g.bezierCurveTo(x - s * .82, y - s * .18, x - s * .42, y - s * .4, x - s * .16, y - s * .24);
+        g.bezierCurveTo(x, y - s * .72, x + s * .5, y - s * .55, x + s * .48, y - s * .2);
+        g.bezierCurveTo(x + s * .86, y - s * .18, x + s * .82, y + s * .25, x + s * .55, y + s * .26);
+        g.lineTo(x - s * .65, y + s * .2);
+      }, 1.4, .5, 2, seed);
+    }
+
+    function drawDoodles() {
+      drawQuestion(40, 298, 32, 10);
+      drawQuestion(122, 756, 25, 11);
+      drawQuestion(390, 430, 20, 12);
+      drawGear(210, 206, 26, 20);
+      drawCloud(67, 377, 30, 31);
+      drawCloud(120, 850, 22, 32);
+      poly([[252,137],[306,115],[278,171],[268,143],[252,137]], true, 1.4, .6, 40);
+      line(268,143,306,115,1.1,.46,41);
+      poly([[389,207],[398,226],[419,229],[402,241],[407,262],[389,250],[372,263],[377,241],[359,229],[381,226]], true, 1.2, .55, 50);
+      poly([[296,825],[315,790],[322,812],[344,810],[318,853],[314,827]], true, 1.5, .62, 60);
+      poly([[94,698],[123,684],[145,699],[142,725],[110,730],[91,715]], false, 1.3, .45, 70);
+      ellipse(360,886,19,19,1.3,.5,80);
+      line(341,886,379,886,1,.34,81);
+      line(360,867,360,905,1,.34,82);
+      poly([[39,526],[51,510],[66,526],[51,542]], true, 1.2,.47,90);
+      ellipse(418,745,9,9,1.1,.5,91);
+      line(418,754,418,779,1.2,.48,92);
+      line(405,766,431,766,1.2,.48,93);
+      poly([[151,278],[166,265],[183,273],[181,293],[160,299],[148,288]], true, 1.1,.45,94);
+      line(55,214,85,214,1.2,.42,95);
+      line(70,199,70,229,1.2,.42,96);
+      ellipse(69,214,22,22,1.1,.38,97);
+    }
+
+    function lensPath() {
+      g.beginPath();
+      g.moveTo(501, 242);
+      g.bezierCurveTo(552, 335, 551, 676, 501, 785);
+      g.bezierCurveTo(451, 682, 450, 340, 501, 242);
+      g.closePath();
+    }
+
+    function drawLens() {
+      lensPath();
+      g.fillStyle = "rgba(231,226,215,.82)";
+      g.fill();
+      g.save();
+      lensPath();
+      g.clip();
+      g.beginPath();
+      for (let x = 452; x < 550; x += 9) {
+        g.moveTo(x, 210);
+        g.lineTo(x - 84, 830);
+      }
+      g.strokeStyle = "rgba(39,40,35,.17)";
+      g.lineWidth = .8;
+      g.stroke();
+      g.restore();
+      pencil(lensPath, 2.3, .82, 4, 301);
+      pencil(() => {
+        g.beginPath();
+        g.moveTo(494,252);
+        g.bezierCurveTo(468,382,469,647,494,775);
+      }, .8, .35, 2, 302);
+    }
+
+    function drawRays() {
+      const rays = [
+        [512,395,760,285],
+        [520,440,790,380],
+        [523,492,756,492],
+        [521,545,792,612],
+        [512,594,756,742]
+      ];
+      rays.forEach((ray, i) => arrow(...ray, 410 + i, .55));
+      g.save();
+      g.setLineDash([2,8]);
+      g.strokeStyle = "rgba(39,40,35,.28)";
+      g.lineWidth = 1;
+      g.beginPath();
+      g.moveTo(510,348); g.lineTo(900,202);
+      g.moveTo(516,646); g.lineTo(920,840);
+      g.stroke();
+      g.restore();
+    }
+
+    function drawSunAndCloud() {
+      ellipse(925,203,42,42,1.8,.68,500);
+      for (let i = 0; i < 12; i++) {
+        const a = i / 12 * TAU;
+        line(925 + Math.cos(a)*55, 203 + Math.sin(a)*55,
+             925 + Math.cos(a)*82, 203 + Math.sin(a)*82, 1.1,.45,510+i);
+      }
+      drawCloud(780,220,48,540);
+    }
+
+    function drawMountain() {
+      const bell = (u, v, cu, cv, su, sv, amplitude) => {
+        const du = (u - cu) / su;
+        const dv = (v - cv) / sv;
+        return amplitude * Math.exp(-(du * du + dv * dv));
+      };
+      const height = (u, v) => Math.max(-.1,
+        bell(u,v,.02,.18,.43,.34,1.02) +
+        bell(u,v,-.7,.42,.29,.31,.58) +
+        bell(u,v,.69,.39,.3,.3,.66) -
+        bell(u,v,.02,.78,.42,.2,.2)
+      );
+      const project = (u, v, elevation) => ({
+        x: 895 + u * (176 + v * 78),
+        y: 326 + v * 182 - elevation * 154,
+        depth: v
+      });
+
+      PencilLight.meshSurface({
+        height,
+        project,
+        columns: 17,
+        rows: 12,
+        samples: 62,
+        seed: 600
+      });
+
+      const road = [
+        ...PencilLight.cubic(
+          {x:930,y:220},{x:858,y:264},{x:966,y:303},{x:890,y:345},18
+        ).slice(0,-1),
+        ...PencilLight.cubic(
+          {x:890,y:345},{x:808,y:382},{x:937,y:411},{x:831,y:455},20
+        ).slice(0,-1),
+        ...PencilLight.cubic(
+          {x:831,y:455},{x:762,y:483},{x:831,y:511},{x:758,y:544},18
+        )
+      ];
+      road.forEach((point, i) => point.depth = i / (road.length - 1));
+      PencilLight.ribbon(road, depth => 8 + Math.pow(depth, 1.7) * 28, { seed: 710 });
+    }
+
+    function drawBars(x,y) {
+      line(x-12,y+61,x+102,y+61,1.5,.55,800);
+      line(x-12,y+61,x-12,y-10,1.5,.55,801);
+      const heights=[21,40,69,52,88];
+      heights.forEach((h,i)=>{
+        const bx=x+i*21;
+        poly([[bx,y+60],[bx,y+60-h],[bx+13,y+60-h],[bx+13,y+60]],false,1.2,.5,810+i);
+        for(let yy=y+56;yy>y+60-h;yy-=7) line(bx+2,yy,bx+11,yy,0.7,.22,830+i+yy);
+      });
+    }
+
+    function drawNetwork(x,y) {
+      const nodes=[[0,0],[55,-28],[95,18],[74,70],[20,82],[-22,42],[42,32]];
+      const edges=[[0,1],[1,2],[2,3],[3,4],[4,5],[5,0],[0,6],[1,6],[2,6],[3,6],[4,6]];
+      edges.forEach((e,i)=>line(x+nodes[e[0]][0],y+nodes[e[0]][1],x+nodes[e[1]][0],y+nodes[e[1]][1],1.1,.45,900+i));
+      nodes.forEach((n,i)=>ellipse(x+n[0],y+n[1],7,7,1.4,.6,930+i));
+    }
+
+    function drawGlobe(x,y,r) {
+      ellipse(x,y,r,r,1.7,.62,950);
+      pencil(()=>{g.beginPath();g.ellipse(x,y,r*.46,r,0,0,TAU);},1,.42,2,951);
+      pencil(()=>{g.beginPath();g.ellipse(x,y,r,r*.42,0,0,TAU);},1,.42,2,952);
+      pencil(()=>{
+        g.beginPath();
+        g.moveTo(x-r*.72,y-r*.18);
+        g.bezierCurveTo(x-r*.25,y-r*.52,x-r*.08,y-r*.18,x+r*.12,y-r*.35);
+        g.bezierCurveTo(x+r*.32,y-r*.51,x+r*.5,y-r*.12,x+r*.72,y-r*.1);
+        g.moveTo(x-r*.58,y+r*.15);
+        g.bezierCurveTo(x-r*.28,y+r*.02,x-r*.18,y+r*.5,x+r*.18,y+r*.28);
+        g.bezierCurveTo(x+r*.36,y+r*.14,x+r*.55,y+r*.44,x+r*.66,y+r*.22);
+      },1.2,.5,2,953);
+    }
+
+    function drawPlant(x,y) {
+      line(x,y+80,x,y,1.8,.58,1000);
+      pencil(()=>{g.beginPath();g.moveTo(x,y+47);g.bezierCurveTo(x-48,y+24,x-50,y-9,x-6,y+17);g.bezierCurveTo(x+6,y+26,x+3,y+39,x,y+47);},1.5,.54,2,1001);
+      pencil(()=>{g.beginPath();g.moveTo(x,y+58);g.bezierCurveTo(x+48,y+35,x+53,y+4,x+7,y+29);g.bezierCurveTo(x-1,y+38,x-2,y+49,x,y+58);},1.5,.54,2,1002);
+      line(x-38,y+82,x+39,y+82,1.2,.42,1003);
+    }
+
+    function drawPeople(x,y) {
+      const people=[[-38,3,20],[0,-7,24],[41,4,19]];
+      people.forEach((p,i)=>{
+        ellipse(x+p[0],y+p[1]-p[2]*1.8,p[2]*.36,p[2]*.36,1.4,.55,1050+i);
+        pencil(()=>{
+          g.beginPath();
+          g.moveTo(x+p[0],y+p[1]-p[2]*1.35);
+          g.lineTo(x+p[0],y+p[1]+p[2]*.45);
+          g.moveTo(x+p[0]-p[2]*.65,y+p[1]-p[2]*.48);
+          g.lineTo(x+p[0]+p[2]*.65,y+p[1]-p[2]*.48);
+          g.moveTo(x+p[0],y+p[1]+p[2]*.45);
+          g.lineTo(x+p[0]-p[2]*.42,y+p[1]+p[2]*1.25);
+          g.moveTo(x+p[0],y+p[1]+p[2]*.45);
+          g.lineTo(x+p[0]+p[2]*.42,y+p[1]+p[2]*1.25);
+        },1.4,.55,2,1060+i);
+      });
+    }
+
+    function drawRightSymbols() {
+      drawBars(1062,554);
+      drawNetwork(835,670);
+      drawGlobe(1050,760,60);
+      drawPlant(748,865);
+      drawPeople(925,915);
+      ellipse(1114,890,9,9,1.2,.44,1100);
+      poly([[1110,899],[1120,925],[1104,925]],false,1.1,.4,1101);
+    }
+
+    function render() {
+      drawPaper();
+      dottedJourney();
+      drawChaos();
+      drawDoodles();
+      drawSunAndCloud();
+      drawRays();
+      drawMountain();
+      drawRightSymbols();
+      drawLens();
+    }
+
+    render();
+  </script>
+</body>
+</html>