@bongos/core 1.23.22 → 1.24.1

package/modules/hall-ui/public/ai-studio-lib.js

@@ -0,0 +1,268 @@
+// modules/hall-ui/public/ai-studio-lib.js — the pure rules of the Studio's AI
+// pages, /builders/ai-studio (task 1004921, goal 1000136, ADR 0392).
+//
+// Built 1:1 on the owner's pick, option C of the AI Studio options canvas
+// ("Three steps: pick, describe, make"), with the owner's addition that the
+// results page lets the request be changed and made again. Everything here is
+// pure: money in words, the receipt, the month's summary of the ledger, the
+// waiting checklist, which view a URL names, and the reply's safe markup.
+// ai-studio.js does the reads, the writes and the painting.
+//
+// Money is integer micro-dollars everywhere (1,000,000 = $1), as the server
+// sends it. A PRICE with sub-cent digits shows four decimals ($0.0421); a
+// whole-cent amount and a BALANCE show two ($12.40). A balance rounds DOWN, so
+// the page never promises a cent that is not there.
+//
+// The file limits below are the upload checks' (modules/ai-studio/studio.js),
+// repeated so the page can say no before a 4 MB upload starts. The server
+// still checks every file; these only spare the wait.
+//
+// Node-require-safe: assignment to window is the only side effect, and only
+// when a window exists (tests/hall_ai_studio.mjs requires it directly).
+
+(function (root) {
+  'use strict';
+
+  const MICRO_PER_USD = 1000000;
+  const MICRO_PER_CENT = 10000;
+  const MAX_FILES = 6;
+  const MAX_IMAGE_BYTES = 4 * 1024 * 1024;
+  const MAX_PDF_BYTES = 8 * 1024 * 1024;
+  const IMAGE_TYPES = Object.freeze(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);
+  const PDF_TYPE = 'application/pdf';
+  const FINISHED = Object.freeze(['done', 'failed', 'refused']);
+  const STEPS = Object.freeze(['pick', 'describe', 'make']);
+  const TOPUP_CHOICES = Object.freeze([5, 10, 20, 50]);
+  // The waiting checklist is paced by the clock: the server reports a request
+  // as queued or running, not which call it is on, so "wrote the answer" is
+  // ticked once a run has gone on long enough for the reply to be back.
+  const ANSWER_AFTER_SEC = 25;
+
+  function isMicro(v) { return Number.isSafeInteger(v); }
+
+  // "$0.0421", "$0.50", "$12.40". Sub-cent amounts keep four decimals.
+  function usd(micro) {
+    if (!isMicro(micro)) return '';
+    const neg = micro < 0;
+    const a = Math.abs(micro);
+    const text = a % MICRO_PER_CENT === 0
+      ? (a / MICRO_PER_USD).toFixed(2)
+      : (Math.round(a / 100) / 10000).toFixed(4);
+    return `${neg ? '−' : ''}$${text}`;
+  }
+
+  // A balance: two decimals, rounded down.
+  function balanceUsd(micro) {
+    if (!isMicro(micro)) return '';
+    const cents = Math.floor(micro / MICRO_PER_CENT);
+    return `$${(cents / 100).toFixed(2)}`;
+  }
+
+  function sizeText(bytes) {
+    const n = Number(bytes) || 0;
+    if (n >= 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+    if (n >= 1024) return `${Math.round(n / 1024)} KB`;
+    return `${n} B`;
+  }
+
+  // Which page the address names. ?request=N is the waiting page or the
+  // result; ?view=balance the balance; otherwise one of the three steps.
+  function routeOf(search) {
+    const q = new URLSearchParams(String(search || ''));
+    const request = q.get('request');
+    if (request && /^\d{1,18}$/.test(request)) return { view: 'request', id: request };
+    if (q.get('view') === 'balance') return { view: 'balance', all: q.get('all') === '1' };
+    const step = STEPS.includes(q.get('step')) ? q.get('step') : 'pick';
+    const from = q.get('from');
+    return { view: 'step', step, from: from && /^\d{1,18}$/.test(from) ? from : null };
+  }
+
+  // Says no to a file before it is sent, in the same words the server would.
+  function checkFile(file, count) {
+    if (count >= MAX_FILES) return `Send up to ${MAX_FILES} files at a time.`;
+    const type = String(file && file.type || '');
+    if (type !== PDF_TYPE && !IMAGE_TYPES.includes(type)) return 'Pictures (PNG, JPG, GIF, WebP) or a PDF only.';
+    const max = type === PDF_TYPE ? MAX_PDF_BYTES : MAX_IMAGE_BYTES;
+    if ((Number(file.size) || 0) > max) return type === PDF_TYPE ? 'PDFs up to 8 MB.' : 'Pictures up to 4 MB.';
+    return null;
+  }
+
+  function isImage(contentType) { return IMAGE_TYPES.includes(String(contentType || '')); }
+
+  // The step header: "1 Pick ✓", "2 Describe", "3 Make".
+  function stepMarks(step) {
+    const at = STEPS.indexOf(step);
+    return [['1', 'Pick'], ['2', 'Describe'], ['3', 'Make']].map(([n, label], i) => ({
+      text: `${n} ${label}${i < at ? ' ✓' : ''}`,
+      state: i < at ? 'done' : (i === at ? 'now' : 'later'),
+    }));
+  }
+
+  // The prompt as one quoted line for step 3's summary row.
+  function quoteLine(prompt, max) {
+    const t = String(prompt || '').replace(/\s+/g, ' ').trim();
+    const cap = max || 64;
+    return `“${t.length > cap ? `${t.slice(0, cap - 1).trimEnd()}…` : t}”`;
+  }
+
+  // The own key the server will run on: OpenRouter first, as keys.chooseKey
+  // prefers it (it reports its cost). null when none is saved.
+  function ownKey(keys) {
+    const list = (keys && keys.keys) || [];
+    const set = (p) => list.find((k) => k && k.provider === p && k.set);
+    const k = set('openrouter') || set('gemini');
+    if (!k) return null;
+    return k.provider === 'openrouter'
+      ? { provider: 'openrouter', name: 'OpenRouter', billedBy: 'OpenRouter', last4: k.last4 }
+      : { provider: 'gemini', name: 'Gemini', billedBy: 'Google', last4: k.last4 };
+  }
+
+  // Step 3's two cards. balance is GET /ai-studio/balance's body.
+  function payChoices(keys, balance) {
+    const own = ownKey(keys);
+    const b = balance || {};
+    const avail = b.balance ? b.balance.available_micro : null;
+    const max = isMicro(b.max_cost_micro) ? b.max_cost_micro : null;
+    const payments = !!b.balance;
+    return {
+      own,
+      payments,
+      setAside: max === null ? '' : usd(max),
+      left: payments ? `${balanceUsd(avail)} left` : '',
+      short: payments && max !== null && avail < max,
+    };
+  }
+
+  // The waiting page's three lines, from the request's status and how long it
+  // has run.
+  function waitSteps(status, elapsedSec, fileCount) {
+    const n = Number(fileCount) || 0;
+    const files = n === 1 ? 'Read your file' : `Read your ${n} files`;
+    const running = status === 'running';
+    const answered = running && elapsedSec >= ANSWER_AFTER_SEC;
+    return [
+      { text: files, state: running ? 'done' : 'now' },
+      { text: 'Wrote the answer', state: answered ? 'done' : (running ? 'now' : 'later') },
+      { text: 'Drawing the pictures', state: answered ? 'now' : 'later' },
+    ];
+  }
+
+  function clock(sec) {
+    const s = Math.max(0, Math.floor(Number(sec) || 0));
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+  }
+
+  function isFinished(status) { return FINISHED.includes(status); }
+
+  // The receipt on the results page: rows of [label, value] and a note.
+  // (The stored request does not name which of the builder's keys ran.)
+  // key_source 'ours' is the balance; 'own' with a reported cost is an
+  // OpenRouter key; 'own' with none is a Gemini key (Google reports no price).
+  // A request that did not finish has no receipt: its error line already says
+  // what was (not) charged.
+  function receipt(req, multiplier) {
+    const r = req || {};
+    if (r.status !== 'done') return { rows: [], note: '' };
+    if (r.key_source === 'ours' && isMicro(r.price_micro)) {
+      const pct = Number(multiplier) > 1 ? Math.round((Number(multiplier) - 1) * 100) : null;
+      return {
+        rows: [
+          ['Paid with', 'your balance'],
+          ['OpenRouter', usd(r.provider_cost_micro)],
+          [pct === null ? 'Ours' : `Our ${pct}%`, usd(r.markup_micro)],
+          ['You paid', usd(r.price_micro)],
+        ],
+        note: '',
+      };
+    }
+    if (r.key_source === 'own' && isMicro(r.provider_cost_micro)) {
+      return {
+        rows: [['Paid with', 'your own OpenRouter key'], ['Cost', usd(r.provider_cost_micro)]],
+        note: 'OpenRouter bills you for it directly. We charged nothing.',
+      };
+    }
+    if (r.key_source === 'own') {
+      return {
+        rows: [['Paid with', 'your own Gemini key'], ['Cost', 'not reported']],
+        note: "Google doesn't tell us the price on your own key, so check your Google bill. We charged nothing.",
+      };
+    }
+    return { rows: [], note: '' };
+  }
+
+  // "Same 3 files, paid the same way."
+  function againLine(uploadCount) {
+    const n = Number(uploadCount) || 0;
+    return `Change the words and make it again. Same ${n === 1 ? 'file' : `${n} files`}, paid the same way.`;
+  }
+
+  // The month's summary of the ledger rows that fall in `now`'s month.
+  function monthSummary(ledger, now) {
+    const d = now instanceof Date ? now : new Date();
+    const inMonth = (row) => {
+      const t = new Date(row.created_at);
+      return !Number.isNaN(t.getTime()) && t.getFullYear() === d.getFullYear() && t.getMonth() === d.getMonth();
+    };
+    const rows = (ledger || []).filter(inMonth);
+    const sum = (kind) => rows.filter((r) => r.kind === kind).reduce((a, r) => a + (Number(r.amount_micro) || 0), 0);
+    const count = (kind) => rows.filter((r) => r.kind === kind).length;
+    const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+    const lines = [];
+    if (count('topup')) lines.push({ label: 'Added', value: `+${usd(sum('topup'))}`, tone: 'ok' });
+    if (count('capture')) lines.push({ label: `Spent on ${plural(count('capture'), 'request', 'requests')}`, value: usd(-sum('capture')), tone: '' });
+    if (count('release')) lines.push({ label: `Money back from ${plural(count('release'), 'failed request', 'failed requests')}`, value: `${usd(sum('release'))} returned`, tone: 'ok' });
+    if (count('own_key')) lines.push({ label: `On your own keys, ${plural(count('own_key'), 'request', 'requests')}`, value: 'free', tone: 'dim' });
+    return { month: d.toLocaleString('en', { month: 'long' }), lines };
+  }
+
+  // One line of the full ledger. `prompts` maps request id to its prompt.
+  function ledgerLine(row, prompts) {
+    const r = row || {};
+    const what = (r.request_id && prompts && prompts[String(r.request_id)])
+      ? quoteLine(prompts[String(r.request_id)], 40).slice(1, -1)
+      : 'A request';
+    const amt = Number(r.amount_micro) || 0;
+    switch (r.kind) {
+      case 'topup': return { what: 'Top up', detail: String(r.note || '').replace(/^card charged /, 'card '), value: `+${usd(amt)}`, tone: 'ok' };
+      case 'hold': return { what, detail: 'set aside while it ran', value: usd(amt), tone: 'dim' };
+      case 'capture': return { what, detail: `${usd(Number(r.provider_cost_micro) || 0)} + ${usd(Number(r.markup_micro) || 0)}`, value: usd(-amt), tone: '' };
+      case 'release': return { what, detail: 'failed, all money back', value: `${usd(amt)} returned`, tone: 'ok' };
+      case 'own_key': return { what, detail: 'your own key', value: 'free', tone: 'dim' };
+      default: return { what, detail: '', value: usd(amt), tone: '' };
+    }
+  }
+
+  // The model's reply as paragraphs, **bold** kept, everything else escaped by
+  // the hall's ONE escaper, handed in (window.OTB.escapeHtml in the page).
+  function replyHtml(md, escape) {
+    const text = String(md || '').replace(/\r\n/g, '\n').trim();
+    if (!text || typeof escape !== 'function') return '';
+    return text.split(/\n{2,}/).map((para) => {
+      const safe = escape(para.trim()).replace(/\*\*([^*\n]+)\*\*/g, '<b>$1</b>').replace(/\n/g, '<br>');
+      return `<p>${safe}</p>`;
+    }).join('');
+  }
+
+  // The home's AI action line: the newest request, while it is being made or
+  // when it finished in the last day, is what the line points at.
+  function homeLine(requests, now) {
+    const newest = (requests || [])[0];
+    const t = now instanceof Date ? now.getTime() : Date.now();
+    if (newest && (newest.status === 'queued' || newest.status === 'running')) {
+      return { detail: 'one is being made now', href: `/builders/ai-studio?request=${newest.id}` };
+    }
+    const fin = newest && newest.finished_at ? new Date(newest.finished_at).getTime() : NaN;
+    if (newest && newest.status === 'done' && t - fin < 24 * 3600 * 1000) {
+      return { detail: 'your newest pictures are ready', href: `/builders/ai-studio?request=${newest.id}` };
+    }
+    return { detail: 'sketches in, ideas and pictures out', href: '/builders/ai-studio' };
+  }
+
+  const lib = {
+    MAX_FILES, MAX_IMAGE_BYTES, MAX_PDF_BYTES, IMAGE_TYPES, PDF_TYPE, STEPS, TOPUP_CHOICES, ANSWER_AFTER_SEC,
+    usd, balanceUsd, sizeText, routeOf, checkFile, isImage, stepMarks, quoteLine, ownKey, payChoices,
+    waitSteps, clock, isFinished, receipt, againLine, monthSummary, ledgerLine, replyHtml, homeLine,
+  };
+  if (typeof module !== 'undefined' && module.exports) module.exports = lib;
+  if (root) root.OTBAiStudioLib = lib;
+})(typeof window !== 'undefined' ? window : null);

package/modules/hall-ui/public/ai-studio.css

@@ -0,0 +1,193 @@
+/* modules/hall-ui/public/ai-studio.css — the studio's AI pages,
+   /builders/ai-studio (task 1004921, goal 1000136).
+
+   Built 1:1 on option C of the AI Studio options canvas, the owner's pick: the
+   three steps, the waiting page, the result with its request to change and
+   make again, and the balance. It rides studio.css: the room, its night and
+   day tokens (--st-*) and the glass action rows are the studio's own, and this
+   sheet spends only those tokens, never a colour of its own. Where it differs
+   from the canvas, and why, is in modules/hall-ui/records/ai-studio.md. */
+
+.ais-page { position: relative; z-index: 1; width: min(580px, 100%); display: flex; flex-direction: column; gap: 22px; }
+.ais[data-view="result"] .ais-page { width: 100%; }
+.ais-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+
+.ais-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.ais-quiet, .ais-note { margin: 0; font-size: 17px; line-height: 1.5; color: var(--st-ink-soft); }
+.ais-soft { color: var(--st-ink-soft); }
+.ais-faint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--st-ink-faint); }
+.ais-dim { font-size: 13px; color: var(--st-ink-dim); white-space: nowrap; }
+.ais-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ais-wrap { white-space: normal; }
+.ais-head { font-family: var(--st-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink-faint); }
+.ais-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; }
+.ais [data-head]:focus { outline: none; }
+.ais [data-head]:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 4px; }
+
+/* The step line: back, then "1 Pick ✓  2 Describe  3 Make". */
+.ais-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
+.ais-marks { margin-left: auto; display: flex; gap: 18px; font-size: 13px; }
+.ais-mark--done { color: var(--st-link); }
+.ais-mark--now { color: var(--st-ink); font-weight: 500; }
+.ais-mark--later { color: var(--st-ink-dim); }
+
+.ais-ask { margin: 20px 0 0; font-size: 44px; font-weight: 200; letter-spacing: -.03em; line-height: 1.1; color: var(--st-ink); }
+.ais-ask label { cursor: text; }
+
+/* Step 1: the drop zone and the one-line file rows. */
+.ais-drop {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+  min-height: 120px; padding: 16px; box-sizing: border-box; text-align: center;
+  border-radius: 18px; border: 1.5px dashed var(--st-rule); color: var(--st-ink-soft); font-size: 14px;
+}
+.ais-drop--over { border-color: var(--st-focus); background: var(--st-glass); }
+.ais-link {
+  display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; padding: 0; border: 0; background: none;
+  font: inherit; color: var(--st-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
+}
+.ais-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.ais-row {
+  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 18px; box-sizing: border-box;
+  border-radius: 16px; background: var(--st-glass); border: 1px solid var(--st-glass-edge); font-size: 14px; color: var(--st-ink);
+}
+.ais-row--summary { min-height: 56px; }
+.ais-thumb { flex: none; width: 28px; height: 28px; border-radius: 7px; object-fit: cover; background: var(--st-track); }
+.ais-thumb--pdf { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--st-link); }
+.ais-remove {
+  min-height: 24px; min-width: 24px; padding: 0 2px; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 13px; color: var(--st-ink-dim);
+}
+.ais-remove:hover { color: var(--st-ink); }
+.ais-err-inline { font-size: 13px; color: var(--st-danger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
+
+/* Buttons: the studio's accent pill and its quiet ghost. */
+.ais-go { display: flex; align-items: center; gap: 16px; }
+.ais-go--wrap { flex-wrap: wrap; gap: 10px; }
+.ais-btn {
+  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border-radius: 999px;
+  border: 0; background: var(--st-accent); color: var(--st-on-accent); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
+}
+.ais-btn:disabled { opacity: .5; cursor: default; }
+.ais-ghost {
+  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 999px;
+  border: 0; background: var(--st-close); color: var(--st-ink); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
+}
+.ais a.ais-ghost:hover { color: var(--st-ink); border-color: var(--st-focus); }
+.ais-btn:focus-visible, .ais-ghost:focus-visible, .ais-link:focus-visible, .ais-remove:focus-visible,
+.ais-chip:focus-visible, .ais-pick:focus-visible, .ais-back:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 3px; }
+
+/* Step 2: the request box (also the result's "Your request"). */
+.ais-field {
+  width: 100%; box-sizing: border-box; min-height: 96px; padding: 16px 18px; resize: vertical;
+  border-radius: 18px; background: var(--st-glass); border: 1px solid var(--st-panel-edge);
+  color: var(--st-ink); font: inherit; font-size: 15px; line-height: 1.5; font-weight: 300;
+}
+.ais-field--tall { min-height: 160px; font-size: 16px; }
+.ais-field::placeholder { color: var(--st-ink-dim); }
+.ais-field:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }
+
+/* Step 3: the two pay cards, the studio's glass action rows made tall. */
+.ais-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.ais .ais-card { min-height: 150px; justify-content: flex-start; padding-top: 22px; font: inherit; }
+.ais .ais-card--ours { background: var(--st-glass); border-color: var(--st-glass-edge); }
+.ais .ais-card:disabled { opacity: .55; cursor: default; }
+.ais .ais-card[aria-busy="true"] { border-color: var(--st-focus); }
+.ais-card__line { font-size: 13.5px; line-height: 1.45; color: var(--st-ink-soft); }
+.ais-card__foot { margin-top: 10px; font-size: 13px; color: var(--st-ink-dim); }
+
+.ais-err { margin: 0; font-size: 14px; line-height: 1.5; color: var(--st-danger); }
+.ais-err[hidden] { display: none; }
+
+/* The waiting page: the clock, the three lines, and the lamp turned up. */
+.ais-wait { margin-top: 70px; display: flex; flex-direction: column; gap: 18px; }
+.ais-clock { margin: 0; font-family: var(--st-mono); font-size: 56px; font-weight: 200; letter-spacing: -.03em; line-height: 1; color: var(--st-ink); font-variant-numeric: tabular-nums; }
+.ais-wait > .ais-soft { margin: -10px 0 0; }
+.ais-checks { list-style: none; margin: 0; padding: 0; width: min(420px, 100%); }
+.ais-check { display: flex; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--st-track); font-size: 14px; color: var(--st-ink); }
+.ais-check:first-child { border-top: 0; }
+.ais-check__mark { width: 22px; flex: none; color: var(--st-link); }
+.ais-check--now .ais-check__mark::before {
+  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+  background: var(--st-accent); box-shadow: 0 0 0 4px var(--st-resume);
+}
+.ais-check--later { color: var(--st-ink-dim); }
+/* By day the room's lamp is off; while a request runs it is on in either sky,
+   so "the lamp stays on until it's done" holds at noon too. */
+.ais[data-making="on"] .st-glow { opacity: 1; transform: scale(1.35); background: radial-gradient(circle, var(--st-glow) 0%, var(--st-glow) 20%, var(--st-glow-out) 65%); }
+.ais[data-making="on"] .st-lamp-shade { box-shadow: 0 18px 40px var(--st-glow); }
+
+/* The result: the picture on the left, the words, the request and the receipt
+   on the right. The canvas draws it over the bare floor, so the window steps
+   back. */
+.ais[data-view="result"] .st-window,
+.ais[data-view="result"] .st-glow,
+.ais[data-view="result"] .st-lamp-stem,
+.ais[data-view="result"] .st-lamp-shade,
+.ais[data-view="result"] .st-mug,
+.ais[data-view="result"] .st-leaf { display: none; }
+.ais-result { display: flex; gap: 40px; align-items: flex-start; }
+.ais-result__art { width: min(640px, 55%); flex: none; display: flex; flex-direction: column; gap: 12px; }
+.ais-result__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 44px; }
+.ais-big { display: block; width: 100%; height: 520px; object-fit: cover; border-radius: 16px; background: var(--st-track); }
+.ais-big--none { display: flex; align-items: center; justify-content: center; height: 240px; background: var(--st-glass); border: 1px solid var(--st-glass-edge); box-sizing: border-box; }
+.ais-thumbs { display: flex; align-items: center; gap: 10px; }
+.ais-pick { width: 96px; height: 64px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; }
+.ais-pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.ais-pick--on { outline: 2px solid var(--st-accent); outline-offset: 0; }
+.ais-reply p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--st-ink-sub); font-weight: 300; }
+.ais-reply b { color: var(--st-ink); font-weight: 500; }
+.ais-again { display: flex; flex-direction: column; gap: 8px; }
+.ais-receipt, .ais-topup {
+  display: flex; flex-direction: column; padding: 10px 20px; border-radius: 22px;
+  background: var(--st-glass); border: 1px solid var(--st-glass-edge);
+}
+.ais-line { display: flex; align-items: center; gap: 14px; min-height: 40px; border-top: 1px solid var(--st-track); font-size: 14px; color: var(--st-ink); }
+.ais-line:first-child, .ais-head + .ais-line { border-top: 0; }
+.ais-line a { color: var(--st-link); display: inline-flex; align-items: center; min-height: 24px; }
+
+/* The balance. */
+.ais-balance { display: flex; flex-direction: column; gap: 24px; margin-top: 20px; }
+.ais-figure { margin: 0; display: flex; align-items: baseline; gap: 16px; font-weight: 400; font-size: 17px; }
+.ais-big-num { font-family: var(--st-mono); font-size: 56px; font-weight: 200; letter-spacing: -.03em; line-height: 1; color: var(--st-ink); font-variant-numeric: tabular-nums; }
+.ais-topup { gap: 10px; padding: 18px 20px; background: none; border: 0; padding-left: 0; padding-right: 0; }
+.ais-chips { display: flex; gap: 8px; flex-wrap: wrap; }
+.ais-chip {
+  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--st-chip-edge); background: none; color: var(--st-ink); font: inherit; font-size: 13.5px;
+}
+.ais-chip[aria-pressed="true"] { background: var(--st-resume); border-color: var(--st-resume-edge); }
+.ais-other { display: flex; align-items: center; gap: 12px; }
+.ais-other input {
+  width: 120px; height: 40px; padding: 0 12px; box-sizing: border-box; border-radius: 12px;
+  border: 1px solid var(--st-panel-edge); background: var(--st-glass); color: var(--st-ink); font: inherit;
+}
+.ais-ledger { display: flex; flex-direction: column; margin-top: 8px; }
+.ais-ledger > .ais-head { margin-bottom: 4px; }
+.ais-all { display: flex; flex-direction: column; }
+.ais-date { width: 64px; flex: none; font-family: var(--st-mono); font-size: 12px; color: var(--st-ink-dim); }
+.ais-detail { white-space: nowrap; font-size: 12.5px; }
+.ais-num { font-family: var(--st-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ais-tone-ok { color: var(--st-link); }
+.ais-tone-dim { color: var(--st-ink-dim); }
+
+@media (max-width: 1100px) {
+  .ais-result { flex-direction: column; gap: 20px; }
+  .ais-result__art { width: 100%; }
+  .ais-result__words { padding-top: 0; width: 100%; }
+}
+/* On a phone the studio scales its window into the top right and stands the
+   desk on the floor at the bottom; the words start below the window and end
+   above the plant, so no line is read over the drawing. */
+@media (max-width: 760px) {
+  .studio.ais { padding-bottom: 240px; }
+  .ais-page { gap: 18px; }
+  .ais-ask { margin-top: 196px; font-size: 32px; }
+  .ais-marks { margin-left: 0; width: 100%; gap: 14px; }
+  .ais-cards { grid-template-columns: minmax(0, 1fr); }
+  .ais .ais-card { min-height: 120px; }
+  .ais-wait { margin-top: 210px; }
+  .ais-balance { margin-top: 210px; }
+  .ais-big { height: auto; aspect-ratio: 4 / 3; }
+  .ais-detail { display: none; }
+  .ais-err-inline { max-width: 40%; }
+}

package/modules/hall-ui/public/ai-studio.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<!-- data-artist="on": the studio's mode marker, as on studio.html. These pages
+     are rooms of the studio, so entering them is still entering the mode. -->
+<html lang="en" data-artist="on">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Studio — {{worldName}}</title>
+  <meta name="description" content="Make something with AI in the studio: bring sketches, pictures or a PDF, say what you want, and get an answer and pictures back.">
+  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/studio.css?v=2026-10-09-day">
+  <link rel="stylesheet" href="/builders/ai-studio.css?v=2026-10-29-ais1">
+</head>
+<!-- THE STUDIO'S AI PAGES (task 1004921, goal 1000136; ADR 0392). Built 1:1 on
+     the owner's pick, option C of the AI Studio options canvas ("Three steps:
+     pick, describe, make"), plus the owner's addition: the results page lets
+     the request be changed and made again. One page, four views, each a FULL
+     page in the studio's own room (never a dialog):
+       ?step=pick|describe|make   the three steps
+       ?request=N                 the waiting page, then the result
+       ?view=balance              what is left, add money, every charge
+     data-page="ai-studio" is the page's own id (page-inventory.js); studio.css
+     names it beside "studio" on the room's rules, so the room, its tokens and
+     its two skies apply unchanged. The words and rules are
+     ai-studio-lib.js; the record is modules/hall-ui/records/ai-studio.md. A key
+     is NEVER asked for here: it is entered only in Settings. -->
+<body data-page="ai-studio" data-page-title="Studio" data-fullscreen-switch>
+
+<div class="app">
+  <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
+  <div class="app-scrim" id="app-scrim" hidden></div>
+  <div class="app-body">
+    <header class="app-topbar" id="app-topbar"></header>
+    <div class="app-content">
+
+      <main id="hall-main" class="studio ais" data-view="step">
+        <!-- The studio's room, drawn as studio.html draws it. -->
+        <div class="st-room" aria-hidden="true">
+          <div class="st-window">
+            <span class="st-moon"></span>
+            <span class="st-star st-star--1"></span>
+            <span class="st-star st-star--2"></span>
+            <span class="st-star st-star--3"></span>
+            <span class="st-star st-star--4"></span>
+            <span class="st-star st-star--5"></span>
+            <span class="st-cloud st-cloud--1"></span>
+            <span class="st-cloud st-cloud--2"></span>
+            <span class="st-tower st-tower--1"></span>
+            <span class="st-tower st-tower--2"></span>
+            <span class="st-tower st-tower--3"></span>
+            <span class="st-tower st-tower--4"></span>
+            <span class="st-tower st-tower--5"></span>
+            <span class="st-light st-light--1"></span>
+            <span class="st-light st-light--2"></span>
+            <span class="st-light st-light--3"></span>
+            <span class="st-light st-light--4"></span>
+            <span class="st-light st-light--5"></span>
+            <span class="st-light st-light--6"></span>
+            <span class="st-light st-light--7"></span>
+            <span class="st-mullion"></span>
+          </div>
+          <div class="st-floor"></div>
+          <div class="st-sunpatch"></div>
+          <div class="st-glow"></div>
+          <div class="st-lamp-stem"></div>
+          <div class="st-lamp-shade"></div>
+          <div class="st-mug"></div>
+          <div class="st-leaf st-leaf--1"></div>
+          <div class="st-leaf st-leaf--2"></div>
+        </div>
+
+        <!-- The view, painted by ai-studio.js. The page's one <h1> is each
+             view's own question or figure. -->
+        <div class="ais-page" id="ais-page">
+          <p class="ais-quiet">Opening…</p>
+        </div>
+        <input type="file" id="ais-file" class="ais-file" multiple accept="image/png,image/jpeg,image/gif,image/webp,application/pdf" tabindex="-1" aria-hidden="true">
+      </main>
+
+      <footer class="app-foot" id="app-foot"></footer>
+    </div>
+  </div>
+</div>
+
+<div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
+
+<script src="/builders/dom-utils.js?v=2026-10-25-escape"></script>
+<script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3"></script>
+<script src="/builders/shell.js?v=2026-10-25-escape"></script>
+<script src="/builders/palette.js" defer></script>
+<script src="/builders/tweak-editor-lib.js?v=2026-09-28-tw23"></script>
+<script src="/builders/studio-lib.js?v=2026-10-09-day"></script>
+<script src="/builders/ai-studio-lib.js?v=2026-10-29-ais1"></script>
+<script src="/builders/ai-studio.js?v=2026-10-29-ais1"></script>
+</body>
+</html>