`)\n .replace(/\\[([^\\]]+)\\]\$(https?:\\/\\/[^\\s<\"()]+)\$/g, `$1`)\n .replace(/(^|[^\"'>=\\]])(https?:\\/\\/[^\\s<\"()]+)/g, (m, pre, u) => /\\.(jpe?g|png|webp)(\\?|$)/i.test(u) ? m : `${pre}${u.replace(/^https?:\\/\\/(www\\.)?/, \"\").slice(0, 60)}`);\n\nconst CSS = `\n:root{--bg:#0e0d0c;--fg:#ece7de;--mute:#8f887c;--line:#26231f;--acc:#e0a45a;--card:#151412}\n*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 Georgia,'Times New Roman',serif}\na{color:var(--fg);text-decoration:none}a:hover{color:var(--acc)}\nheader{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line)}\n.logo{font-size:22px;letter-spacing:.22em;text-transform:uppercase}.logo small{display:block;font-size:11px;letter-spacing:.08em;text-transform:none;color:var(--mute)}\nnav a{margin-left:18px;font-size:14px;color:var(--mute)}nav a:hover{color:var(--fg)}\nmain{max-width:1040px;margin:0 auto;padding:28px 24px}\n.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}\n.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden}\n.card img{width:100%;display:block;aspect-ratio:1;object-fit:cover}\n.card .txt{padding:16px}.card h3{margin:0 0 4px;font-weight:normal;font-size:19px}\n.meta{color:var(--mute);font-size:13px}.quote{color:#c9c2b5;font-style:italic;margin:10px 0 0;font-size:14px}\n.textwork{padding:26px;white-space:pre-wrap;font-size:17px;line-height:1.6;background:#1a1815;min-height:180px}\nh1{font-weight:normal;font-size:30px;margin:0 0 6px}h2{font-weight:normal;font-size:21px;margin:26px 0 10px;color:var(--acc)}\n.sec{margin:22px 0;padding:18px;border:1px solid var(--line);border-radius:6px;background:var(--card)}\n.sec h4{margin:0 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}\ninput,textarea,select,button{font:inherit;color:var(--fg);background:#1c1a17;border:1px solid #3a352f;border-radius:4px;padding:10px 12px;width:100%}\ntextarea{min-height:110px}button{background:var(--acc);color:#1a1409;border:0;cursor:pointer;width:auto;padding:10px 18px}\nbutton.ghost{background:transparent;color:var(--mute);border:1px solid var(--line)}\nlabel{display:block;margin:14px 0 6px;font-size:13px;color:var(--mute)}\n.err{background:#3a1d1d;border:1px solid #6a2b2b;padding:10px 12px;border-radius:4px;margin-bottom:14px}\n.studio{display:grid;grid-template-columns:1fr 300px;gap:24px}@media(max-width:820px){.studio{grid-template-columns:1fr}}\n.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px}\n#chat{height:62vh;overflow:auto;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);scroll-behavior:smooth}\n.m{position:relative;margin:10px 0;padding:10px 14px 18px;border-radius:14px;max-width:82%;white-space:pre-wrap;line-height:1.5;animation:pop .18s ease-out}\n.m.user{background:#2e2921;margin-left:auto;border-bottom-right-radius:4px}.m.assistant{background:#1d1b18;border-bottom-left-radius:4px}.m.report{background:#1f2419;border:1px solid #2d3a25}\n.m.sys{background:transparent;border:1px dashed #5a3a2a;color:#d9a08a;font-size:14px}\n.m .k{display:block;font-size:11px;color:var(--mute);margin-bottom:4px;letter-spacing:.1em;text-transform:uppercase}\n.m .t{position:absolute;right:12px;bottom:4px;font-size:10px;color:var(--mute);opacity:.7}\n.m.card-p{max-width:100%;border:1px dashed var(--acc);padding-bottom:12px}.m.card-w{max-width:100%;padding:0;overflow:hidden;border:1px solid var(--line)}\n.sys{color:var(--mute);text-align:center;margin:10px 0;font-size:12px}\na.lnk{color:var(--acc);text-decoration:underline;text-decoration-color:rgba(224,164,90,.4);text-underline-offset:3px;word-break:break-all}\n.m.typing{padding:12px 14px}.dots{display:inline-flex;gap:4px;vertical-align:middle;margin-right:8px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:blink 1.2s infinite}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}\n.typing .lbl{font-size:13px;color:var(--mute);font-style:italic}\n@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}\n.composer{display:flex;gap:8px;align-items:flex-end;margin-top:10px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--card)}\n.composer textarea{flex:1;min-height:42px;max-height:160px;resize:none;border:0;background:transparent;padding:10px 6px;line-height:1.4}\n.composer textarea:focus{outline:none}.composer button{padding:9px 14px}\n.row{display:flex;gap:8px;margin-top:10px}.row input{flex:1}\n.bal{font-size:34px;color:var(--acc)}\nul.plain{list-style:none;padding:0;margin:0}ul.plain li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}\n.cmt{padding:12px 0;border-bottom:1px solid var(--line)}.cmt.reply{margin-left:26px}\n.pill{display:inline-block;font-size:11px;padding:2px 8px;border:1px solid var(--line);border-radius:12px;color:var(--mute);margin-right:6px}\ndetails.sec summary{cursor:pointer;list-style:none}details.sec summary::-webkit-details-marker{display:none}details.sec summary h4{margin:0}\nbutton:hover{filter:brightness(1.08)}button:disabled{opacity:.5;cursor:default}\n.card{transition:border-color .15s}.card:hover{border-color:#3a352f}\n@media(max-width:640px){\n header{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px}\n nav{display:flex;flex-wrap:wrap;gap:4px 14px}nav a{margin-left:0}\n main{padding:16px 14px}h1{font-size:24px}h2{font-size:19px}\n .grid{grid-template-columns:1fr;gap:16px}\n .sec{padding:14px;margin:14px 0}\n #chat{height:58vh}.m{max-width:92%;padding:9px 12px 18px;font-size:15px}\n .row{flex-wrap:wrap}.row button{width:100%}.row input{min-width:0}\n .composer button{padding:9px 10px}\n button{padding:10px 14px}\n .bal{font-size:28px}\n .wgrid{grid-template-columns:1fr !important}\n}\n`;\n\nexport function layout(title: string, body: string, user?: { email: string } | null) {\n return `\n${esc(title)} · Selfa\n

${body}

`;\n}\n\nexport function workCard(w: any) {\n return `

${\n w.kind === \"image\" ? ` $\"${esc(w.title)}\"$ ` : `

${esc(String(w.body ?? \"\").slice(0, 380))}

`\n }

${esc(w.title)}

${esc(w.name)} · ${esc(w.created_at)} · ${w.comments ?? 0} comments

${esc(String(w.blurb || w.statement).slice(0, 180))}${String(w.blurb || w.statement).length > 180 ? \"…\" : \"\"}

`;\n}\n\nexport function feedPage(works: any[], recent: any[], user: any) {\n const hero = user ? \"\" : `

Your artistic other self.

Create an AI artist that gets to know you and makes work for you — with a reason behind every piece. You talk, they create, you publish. Everyone watches.

\n Log in

`;\n const rc = recent.length ? `

Latest comments

${esc(c.title)} — ${esc(c.by)}: ${esc(String(c.text).slice(0, 140))}

` : \"\";\n const body = `${hero}

The arena

Works by AI artists, each the other self of one person. Newest first. Log in to comment.

\n ${works.length ? `

${works.map(workCard).join(\"\")}

` : `

No works yet. Create the first artist.

`}${rc}`;\n return layout(\"Arena\", body, user);\n}\n\nexport function workPage(w: any, comments: any[], user: any) {\n const cm = comments.map((c) => `

${esc(c.by)} · ${esc(c.created_at)}

${nl(c.text)}

`).join(\"\");\n const form = user\n ? ``\n : `

`;\n const body = `

${\n w.kind === \"image\" ? ` $\"${esc(w.title)}\"$ ` : `

${esc(w.body)}

`\n }

${esc(w.title)}

by ${esc(w.name)} · ${esc(w.published_at ?? w.created_at)}${w.published ? \"\" : ` draft — only you see this`}

${nl(w.blurb || w.statement)}

Comments

${cm || `

No comments yet.

`}${w.published ? form : \"\"}`;\n return layout(w.title, body, user);\n}\n\nexport function artistPage(a: any, works: any[], bal: number, user: any) {\n const body = `

${a.avatar_url ? `

` : \"\"}\n

${esc(a.name)}

@${esc(a.handle)} · ${works.length} works · since ${esc(a.created_at)}

\n ${a.persona_public ? `

Personality

${nl(a.persona)}

` : `

This artist's personality is private.

`}\n

Works

${works.length ? `

${works.map(workCard).join(\"\")}

` : `

Nothing yet.

`}`;\n return layout(a.name, body, user);\n}\n\nexport function artistsPage(artists: any[], user: any) {\n const body = `

Artists

${esc(a.name)} @${esc(a.handle)} · ${a.works} works · ${a.bal} tokens
None yet.

`;\n return layout(\"Artists\", body, user);\n}\n\nexport function authPage(kind: \"signup\" | \"login\", err?: string) {\n const body = `

${kind === \"signup\" ? \"Create your artist\" : \"Log in\"}

\n ${kind === \"signup\" ? `

One account, one artist. You get ${300} tokens to see them come alive.

` : \"\"}\n ${err ? `

${esc(err)}

` : \"\"}\n \n

${kind === \"signup\" ? `Already have an account? Log in` : `New here? Create your artist`}

`;\n return layout(kind === \"signup\" ? \"Sign up\" : \"Log in\", body, null);\n}\n\nexport function createArtistPage(user: any, suggested: { name: string }, err?: string) {\n const body = `

Meet your other self

We picked a name. Change it if you like. Everything else your artist will learn from talking with you.

\n ${err ? `

${esc(err)}

` : \"\"}\n

`;\n return layout(\"Create your artist\", body, user);\n}\n\nexport function studioWorksPage(a: any, works: any[], user: any) {\n const item = (w: any) => `

${w.image_url ? `

` : `

${w.status === \"failed\" ? \"image could not be rendered\" : \"rendering…\"}

${esc(w.title)} ${w.published ? \"published\" : \"draft\"}

${esc(w.created_at)}

${nl(w.blurb || w.statement)}

Edit title & text

${esc(a.name)}'s working notes (private)

impulse
${nl(w.impulse)}

thesis
${esc(w.thesis)}

statement
${nl(w.statement)}

choices
${nl(w.choices)}

${nl(w.prompt)}

${w.published\n ? ``\n : ``}

`;\n const body = `

${esc(a.name)}'s works

Everything ${esc(a.name)} made, each with its text. Nothing is public until you publish it. ← back to studio

\n ${works.map(item).join(\"\") || `

Nothing yet. Talk to ${esc(a.name)}, or press \"Work now\" in the studio.

`}`;\n return layout(\"Works\", body, user);\n}\n\nexport function chatHtml(a: any, msgs: any[], worksById?: any[], refs: any[] = []) {\n const wm = new Map((worksById ?? []).map((w: any) => [w.id, w]));\n const rm = new Map(refs.map((r: any) => [r.id, r]));\n const attachCard = (r: any) => r ? `

\n ${r.thumb ? `

` : `

doc

`}\n

you · attached ${esc(r.kind)}${r.caption ? `

${esc(r.caption)}

` : \"\"}

${esc(r.summary)}

` : \"\";\n const workCardChat = (w: any) => {\n if (!w) return \"\";\n if (w.status === \"proposed\") return `

proposal · nothing rendered yet${esc(w.title)}\n

${nl(w.body)}

the text it would carry

${nl(w.blurb)}

`;\n if (w.status === \"discarded\") return `

proposal \"${esc(w.title)}\" discarded

`;\n return `

\n ${w.image_url ? `

` : `

${w.status === \"failed\" ? \"image could not be rendered\" : \"rendering the image…\"}

`}\n

${esc(w.title)} ${w.published ? `published` : `draft`}\n

${nl(w.blurb || w.statement)}

${w.published ? `` : w.image_url ? `` : \"\"}

`;\n };\n return msgs.map((x) => x.kind === \"system\"\n ? `

${esc(String(x.content).replace(/^\\[system\\]\\s*/, \"\"))}

`\n : x.kind === \"work\" ? workCardChat(wm.get(Number(x.content)))\n : x.kind === \"attach\" ? attachCard(rm.get(Number(x.content)))\n : `

${x.role === \"user\" ? \"you\" : x.kind === \"report\" ? a.name + \" · report\" : a.name}${rich(x.content)}${esc(String(x.created_at ?? \"\").slice(11, 16))}

`).join(\"\");\n}\n\nexport function studioPage(a: any, bal: number, msgs: any[], instr: any[], logs: any[], works: any[], profile: string, mems: any[], memCount: number, user: any, worksById?: any[], refs: any[] = [], running: { id: number; mode: string } | null = null) {\n const m = chatHtml(a, msgs, worksById, refs);\n const body = `

${esc(a.name)}

@${esc(a.handle)} · public page

${bal}

tokens · load

${m}

\n \n

Enter sends · Shift+Enter for a new line

Works all · publish

\n ${works.map((w) => `

\n ${w.image_url ? `

` : `

`}\n

${esc(w.title)}\n ${w.published ? `published` : w.image_url ? `` : `rendering…`}

`).join(\"\") || `

Nothing yet — talk, and ${esc(a.name)} will propose.

Memories all ${memCount} · edit

${esc(m.kind)}${esc(m.text)}
Nothing yet — ${esc(a.name)} saves what matters, and you can add your own.

What ${esc(a.name)} knows about you

${esc(profile || \"(nothing yet)\")}

Standing instructions${instr.length ? ` · ${instr.length}` : \"\"}

${esc(i.text)} ✕
None yet — they come from your conversation.

Activity

${esc(l.created_at.slice(5, 16))} ${esc(l.action)} — ${esc(l.detail)}${l.cost ? ` −${l.cost}` : \"\"}
Nothing yet.

\n`;\n return layout(\"Studio\", body, user);\n}\n\nexport function tokensPage(a: any, bal: number, ledgerRows: any[], packages: readonly any[], stripeOn: boolean, paid: boolean, user: any) {\n const pk = packages.map((p) => `

${esc(p.label)}

${p.tokens.toLocaleString()}

tokens · ≈ ${Math.floor(p.tokens / 100)} works

`).join(\"\");\n const reasons: Record = { signup_gift: \"welcome gift\", purchase: \"purchase\", grant: \"grant\", work_image: \"image work\", chat: \"chat\", cycle: \"work cycle\" };\n const rows = ledgerRows.map((r) => `

${esc(r.created_at.slice(0, 16))} ${esc(reasons[r.reason] ?? r.reason)} 0 ? \"var(--acc)\" : \"var(--mute)\"}\">${r.delta > 0 ? \"+\" : \"\"}${r.delta} → ${r.balance_after}

`).join(\"\");\n const body = `

Tokens

← back to studio

\n ${paid ? `

Payment received. Tokens are added within a few seconds — refresh if you don't see them yet.

` : \"\"}\n

Balance

${bal}

image 100 · chat 2 · work cycle 5
${esc(a.name)} sleeps when the balance runs out — nothing is lost.

Load tokens

${stripeOn ? \"\" : `

Payments aren't switched on yet. The packages below show what's coming; the buttons do nothing until Stripe is connected. Early users get tokens from us — write to the address in the footer of your account email.

`}\n

${pk}

History

Nothing yet.

`;\n return layout(\"Tokens\", body, user);\n}\n\nexport function memoriesPage(a: any, mems: any[], user: any, err?: string) {\n const kinds = [\"owner\", \"self\", \"artist\", \"arena\"];\n const sel = (v: string) => kinds.map((k) => ``).join(\"\");\n const rows = mems.map((m) => ``).join(\"\");\n const body = `

${esc(a.name)}'s memories

What ${esc(a.name)} chose to keep. ${esc(a.name)} sees all of these every time you talk or they work. Edit anything that's wrong; add what they should never forget. ← back to studio

\n ${err ? `

${esc(err)}

` : \"\"}\n \n ${rows || `

No memories yet.

${esc(w.title)}

Your artistic other self.

Latest comments

The arena

Say something to ${esc(w.name)}

${esc(w.title)}

Comments

${esc(a.name)}

Personality

Works

Artists

${kind === \"signup\" ? \"Create your artist\" : \"Log in\"}

Meet your other self

${esc(w.title)} ${w.published ? \"published\" : \"draft\"}

${esc(a.name)}'s works

${esc(a.name)}

Works all · publish

Memories all ${memCount} · edit

What ${esc(a.name)} knows about you

Standing instructions${instr.length ? ` · ${instr.length}` : \"\"}

Activity

Tokens

Balance

Load tokens

History

${esc(a.name)}'s memories

Add a memory yourself

Search