wren/glyph Public Public: anyone can read this; nobody can change it.

/**

 * The page, rendered on the server: the first paint is complete HTML,

 * `static/live.js` keeps the board fresh afterwards, and `static/glyph.js`

 * adds what only a script can (copy, the palette swapped in place). When a second page

 * arrives, move `layout` to `src/pages/layout.ts` and give each page a file.

 */

import { canDelete, svgsOf, type Drawing } from "./actions.ts";

import {

  COUNT,

  inPalette,

  isPalette,

  KINDS,

  nameOf,

  PALETTES,

  PROMPT_MAX,

  type Palette,

} from "./glyph.ts";

import {

  commit,

  description,

  env,

  publicOrigin,

  ssh,

  title,

  where,

} from "./env.ts";

import { asset, escape } from "./http.ts";

import { token, tokensHref } from "./tokens.ts";

import type { Who } from "./who.ts";

/**

 * The frame every page shares: the tokens and the look, who you are, and

 * what a link to the page says when it is shared — a title, a sentence

 * and the address, for Open Graph and the card a chat app unfurls.

 */

export function layout(body: string, who: Who, path = "/"): string {

  const door =

    who.role === "anon"

      ? `<a class="button button-quiet" href="/__forge/signin?to=/">Sign in</a>`

      : `<span class="you"><b>${escape(who.name)}</b>${who.role === "admin" ? " · admin" : ""}</span>

        <a class="button button-quiet" href="/__forge/signout">Sign out</a>`;

  return `<!doctype html>

<html lang="en">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="color-scheme" content="light dark">

<meta name="theme-color" content="${token("color-bg")}" media="(prefers-color-scheme: light)">

<meta name="theme-color" content="${token("color-bg", "dark")}" media="(prefers-color-scheme: dark)">

<link rel="icon" href="data:,">

<title>${escape(title)}</title>

<meta name="description" content="${escape(description)}">

<meta property="og:type" content="website">

<meta property="og:site_name" content="${escape(title)}">

<meta property="og:title" content="${escape(title)}">

<meta property="og:description" content="${escape(description)}">

<meta property="og:url" content="${escape(publicOrigin + path)}">

<meta name="twitter:card" content="summary">

<meta name="twitter:title" content="${escape(title)}">

<meta name="twitter:description" content="${escape(description)}">

<link rel="stylesheet" href="${tokensHref}">

<link rel="stylesheet" href="${asset("app.css")}">

<script type="module" src="${asset("live.js")}"></script>

<script type="module" src="${asset("glyph.js")}"></script>

<body>

<div class="page">

  <header class="head">

    <div>

      <h1>${escape(title)}</h1>

      <p class="muted">${escape(description)}</p>

    </div>

    <nav class="row">

      <span class="pill" data-env="${escape(env)}">${escape(where)}</span>${commit ? `<span class="muted mono">${escape(commit)}</span>` : ""}

      ${door}

    </nav>

  </header>

  <main>${body}</main>

  <footer class="muted">

    ${ssh === undefined ? "" : `<p>Terminal: <code>${escape(ssh)}</code></p>`}

    <p>Also at <a href="/api/drawings">/api/drawings</a> (<a href="/openapi.json">described</a>) and <code>POST /mcp</code>, with the same rules. Drawn by Claude; every SVG is rebuilt from an allowlist before it is kept.</p>

    <p>Something wrong? <a href="/__forge/report">Report a problem</a>, no account needed.</p>

  </footer>

</div>

</body>

</html>

`;

}

export function home(input: {

  who: Who;

  drawings: readonly Drawing[];

  palette?: string | null;

  notice?: string | undefined;

}): string {

  const { who, drawings, notice } = input;

  const palette: Palette = isPalette(input.palette) ? input.palette : "sage";

  const composer =

    who.role === "anon"

      ? `<p class="muted">Drawings are made for whoever asks. <a href="/__forge/signin?to=/">Sign in</a> to draw.</p>`

      : `<form class="compose" method="post" action="/drawings">

        <label class="label" for="prompt">What should Claude draw?</label>

        <textarea class="input prompt" id="prompt" name="prompt" rows="2" required maxlength="${PROMPT_MAX}" placeholder="a fox made of circuit traces, for a home lab" autocomplete="off"></textarea>

        <div class="examples" hidden>${EXAMPLES.map((e) => `<button type="button" class="chip" data-example="${escape(e)}">${escape(e)}</button>`).join("")}</div>

        <div class="row wrap">

          <fieldset class="kinds" aria-label="Kind">

            ${Object.entries(KINDS)

              .map(

                ([k, label], i) =>

                  `<label class="chip"><input type="radio" name="kind" value="${k}"${i === 0 ? " checked" : ""}> ${escape(label)}</label>`,

              )

              .join("")}

          </fieldset>

          <span class="spacer"></span>

          <button class="button">Draw</button>

        </div>

      </form>`;

  return layout(

    `<section class="card">${composer}</section>

  ${palettes(palette)}

  <section id="board" data-live="drawing.added drawing.changed drawing.removed">${board(drawings, who, palette)}</section>

  ${notice === undefined ? "" : `<p class="toast" role="status">${escape(notice)}</p>`}`,

    who,

  );

}

const EXAMPLES = [

  "a hex chip with a circuit b",

  "a lighthouse for a monitoring app",

  "a rocket leaving a git branch",

  "a fox made of circuit traces",

];

/** The palette switch: links that work without JavaScript, swapped in place with it. */

const palettes = (current: Palette): string => `<nav class="palettes row wrap" id="palettes" aria-label="Palette">

  ${Object.entries(PALETTES)

    .map(

      ([key, p]) =>

        `<a class="chip swatch" href="?palette=${key}" data-palette="${key}"${key === current ? ` aria-current="true"` : ""}><span class="dots" style="background:${p.ground}"><i style="background:${p.ink}"></i><i style="background:${p.glow}"></i></span>${escape(p.label)}</a>`,

    )

    .join("")}

</nav>`;

function board(drawings: readonly Drawing[], who: Who, palette: Palette): string {

  if (drawings.length === 0)

    return `<p class="empty">Nothing drawn yet. Describe something above: Claude draws ${COUNT} different takes in about a minute.</p>`;

  return `<ul class="list">${drawings.map((d) => card(d, who, palette)).join("")}</ul>`;

}

function card(d: Drawing, who: Who, palette: Palette): string {

  const { ground } = PALETTES[palette]!;

  const svgs = svgsOf(d);

  const body =

    d.status === "drawing"

      ? `<div class="tiles" aria-busy="true">${Array.from({ length: COUNT }, () => `<div class="tile pending" style="background:${ground}"></div>`).join("")}</div>

        <p class="muted small" data-since="${escape(d.created_at)}">Claude is drawing…</p>`

      : d.status === "failed"

        ? `<p class="error">${escape(d.error ?? "Something went wrong.")}</p>`

        : `<div class="tiles">${svgs

            .map((svg, n) => {

              const name = nameOf(svg);

              const href = `/drawings/${d.id}/${n}.svg?palette=${palette}`;

              return `<figure class="tile-wrap">

            <div class="tile" style="background:${ground}"><img alt="${escape(name)}" src="data:image/svg+xml,${encodeURIComponent(inPalette(svg, palette))}"></div>

            <figcaption>

              <span class="name">${escape(name)}</span>

              <span class="row tight">

                <button type="button" class="button button-quiet small js-copy" data-href="${href}" hidden>Copy</button>

                <a class="button button-quiet small" href="${href}" download>Save</a>

              </span>

            </figcaption>

          </figure>`;

            })

            .join("")}</div>`;

  return `<li class="drawing" id="drawing-${d.id}">

  <div class="drawing-head">

    <div>

      <p class="prompt-text">${escape(d.prompt)}</p>

      <small class="muted">${escape(KINDS[d.kind] ?? d.kind)}${d.author_id === (who.role === "anon" ? "" : who.id) ? "" : ` · ${escape(d.author_name)}`} · <time datetime="${escape(d.created_at)}">${ago(d.created_at)}</time></small>

    </div>

    ${

      canDelete(who, d) && d.status !== "drawing"

        ? `<form method="post" action="/drawings/${d.id}/delete"><button class="button button-quiet" aria-label="Remove this drawing">Remove</button></form>`

        : ""

    }

  </div>

  ${body}

</li>`;

}

const ago = (iso: string): string => {

  const s = Math.max(0, (Date.now() - Date.parse(iso)) / 1000);

  if (s < 60) return "just now";

  if (s < 3600) return `${Math.floor(s / 60)}m ago`;

  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;

  return new Date(iso).toLocaleDateString("en", {

    month: "short",

    day: "numeric",

  });

};