@runeditrun/rer 0.0.0-stage → 0.1.1

package/onboarding/ui/model-core.mjs

@@ -0,0 +1,127 @@
+export function createModel(seed) {
+const fields = seed.fields;
+const safeKeys = seed.safeKeys || Object.keys(fields).filter(key => fields[key].type !== 'password');
+const product = seed.product;
+const branding = seed.branding || product;
+const features = seed.features || {};
+// Browser editions opt specific safe values into the collapsed answer summary.
+const summaryDefaults = [...new Set((Array.isArray(seed.summaryDefaults) ? seed.summaryDefaults : []).filter(key => safeKeys.includes(key) && fields[key]?.type !== 'password'))];
+function normalizeWebsite(value) {
+  const text = typeof value === 'string' ? value.trim() : '';
+  if (!text) return '';
+  if (/^[a-z][a-z\d+.-]*:/i.test(text) && !/^[\w.-]+:\d+(?:[/?#]|$)/.test(text)) return text;
+  return text.startsWith('//') ? 'https:' + text : 'https://' + text;
+}
+function safeDraft(draft) { return Object.fromEntries(safeKeys.filter(key => typeof draft[key] === 'string').map(key => [key, draft[key]])); }
+function initialDraft(state) {
+  const draft = { ...safeDraft(seed.initialValues?.(state) || {}), ...safeDraft(state.draft || {}) };
+  const accounts = state.known?.providers?.cloudflare?.accounts || [];
+  if (features.hosting && !draft.accountId && accounts.length === 1) draft.accountId = accounts[0].id;
+  // This explicit edition feature makes the local/no-email starting choices reviewable in setup.
+  if (features.localTrialWithoutEmail === true) {
+    if (features.hosting && !draft.target && fields.target?.valid?.('local')) draft.target = 'local';
+  }
+  return normalizeAutomaticDraft(draft);
+}
+function secretReady(key, draft, known = {}) {
+  const readiness = known.secretReadiness || {};
+  if (readiness.scopes?.[key]) return readiness[key] === true && Object.entries(readiness.scopes[key]).every(([field,value]) => draft[field] === value);
+  return readiness[key] === true;
+}
+const hostingKeys = ['target', 'accountId', 'prefix', 'appOrigin', 'apiToken'];
+function hostingModel(draft, known = {}) {
+  if (!features.hosting) return { complete: true, accessReady: false };
+  const accessReady = Boolean(known.providers?.cloudflare?.authenticated || fields.apiToken.valid(draft.apiToken) || secretReady('apiToken', draft, known));
+  const complete = draft.target === 'local' || (draft.target === 'remote' && accessReady && ['accountId', 'prefix', 'appOrigin'].every(key => fields[key].valid(draft[key])));
+  return { complete, accessReady };
+}
+function setupModel(draft, known = {}) {
+  const keys = [...(seed.requiredKeys?.(draft, known) || Object.keys(fields).filter(key => !fields[key].optional))];
+  const connections = [];
+  if (features.hosting && draft.target === 'remote') {
+    keys.push('accountId', 'prefix', 'appOrigin');
+    if (!known.providers?.cloudflare?.authenticated && !fields.apiToken.valid(draft.apiToken) && !secretReady('apiToken', draft, known)) connections.push('cloudflare');
+  }
+  const missing = keys.filter(key => !fields[key].valid(draft[key]) && !(fields[key].type === 'password' && secretReady(key, draft, known)));
+  const complete = keys.filter(key => fields[key].valid(draft[key]) || (fields[key].type === 'password' && secretReady(key, draft, known)));
+  return { missing, complete, connections, remaining: missing.length + connections.length, ready: !missing.length && !connections.length };
+}
+function installInput(draft) {
+  if (seed.installInput) return seed.installInput(draft);
+  return { ...safeDraft(draft), ...Object.fromEntries(Object.keys(fields).filter(key => fields[key].type === 'password' && draft[key]).map(key => [key, draft[key]])) };
+}
+function displayValue(key, value) { return fields[key]?.options?.find(([option]) => option === value)?.[1] || value; }
+function summaryKeys(draft, state = {}) {
+  const answered = new Set(Array.isArray(state.answered) ? state.answered : []), sources = state.sources || {};
+  return safeKeys.filter(key => {
+    const field = fields[key], value = draft[key], source = sources[key];
+    if (typeof value !== 'string' || !value.trim() || field?.type === 'password' || typeof field?.valid !== 'function' || !field.valid(value)) return false;
+    return answered.has(key) || ['agent', 'browser', 'saved'].includes(source) || summaryDefaults.includes(key);
+  });
+}
+
+function failureDetails(state = {}) {
+  const error = typeof state.error === 'string' ? state.error : '';
+  // Commands append their private log path after the captured output. A child
+  // can print its own Log: lines, so only the final, anchored line is metadata.
+  const diagnostic = error.match(/\nLast output \(up to 40 lines\):\n([\s\S]*)\nLog: ([^\r\n]+)$/);
+  const commandOutput = diagnostic?.[1] || '';
+  return {
+    step: typeof state.step === 'string' && state.step ? state.step : 'the last installation step',
+    output: commandOutput === '(no output)' ? '' : commandOutput,
+    logPath: diagnostic?.[2] || '',
+  };
+}
+function failureNote(failure) {
+  const note = failure.output
+    ? `Output from ${failure.step} is shown above.`
+    : `Installation stopped during ${failure.step}. Review the installation activity above.`;
+  return note + (failure.logPath ? ` Installer log: ${failure.logPath}` : '');
+}
+
+function mergeAgentDraft(draft, state, appliedRevision = 0, pendingKeys = []) {
+  const update = state.lastUpdate;
+  if (!Number.isFinite(update?.revision) || update.revision <= appliedRevision) return draft;
+  const keys = new Set(Object.entries(state.sources || {}).filter(([, source]) => source === 'agent').map(([key]) => key));
+  if (update.source === 'agent' && Array.isArray(update.keys)) for (const key of update.keys) keys.add(key);
+  const pending = new Set(pendingKeys), values = safeDraft(state.draft || {}), merged = { ...draft }; let changed = false;
+  for (const key of keys) if (!pending.has(key) && Object.hasOwn(values, key) && values[key] !== draft[key]) { merged[key] = values[key]; changed = true; }
+  return changed ? merged : draft;
+}
+
+function derivePrefix(value) {
+  let slug = String(value || '').normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+  if (!slug) return '';
+  if (!/^[a-z]/.test(slug) || slug.length < 3) slug = (product.slugPrefix || 'app') + '-' + slug;
+  return slug.slice(0, 40).replace(/-+$/g, '');
+}
+function normalizeAutomaticDraft(value) {
+  const draft = { ...value };
+  if (!features.hosting) return draft;
+  draft.prefixMode ||= draft.prefix ? 'custom' : 'automatic';
+  draft.addressMode ||= draft.appOrigin ? 'custom' : 'automatic';
+  if (draft.prefixMode === 'automatic') draft.prefix = derivePrefix(draft[seed.nameKey]);
+  return draft;
+}
+// Navigation is deliberately separate from readiness: only the user advances a step.
+const setupGroups = seed.setupGroups.map(group => ({ ...group, complete: group.complete || (group.kind === 'hosting'
+ ? ((draft, known) => (!features.hosting || hostingModel(draft, known).complete))
+ : ((draft, known) => !setupModel(draft, known).missing.some(key => group.keys.includes(key)))) }));
+function readySummary(draft) { return seed.readySummary?.(draft) || `${draft[seed.nameKey] || product.name} is ready to be installed.`; }
+function nextIncompleteGroup(draft, known = {}) {
+  return setupGroups.find(group => !group.complete(draft, known))?.id || null;
+}
+
+// Retain steps the owner actually reached; only unvisited, complete groups drop out.
+// Editing known details is separate from the numbered setup journey.
+function setupProgress(draft, known = {}, { active = null, visited = [], editing = false } = {}) {
+  const group = setupGroups.find(group => group.id === active);
+  if (!group) return 'Your choices are ready';
+  if (editing) return `Editing ${group.title}`;
+  const reached = [...new Set([...visited, active])];
+  const remaining = setupGroups.filter(group => !reached.includes(group.id) && !group.complete(draft, known));
+  return `Step ${reached.indexOf(active) + 1} of ${reached.length + remaining.length}`;
+}
+
+return { fields, safeKeys, product, branding, features, summaryDefaults, normalizeWebsite, safeDraft, initialDraft, secretReady, hostingKeys, hostingModel, setupModel, installInput, displayValue, summaryKeys, failureDetails, failureNote, mergeAgentDraft, derivePrefix, normalizeAutomaticDraft, setupGroups, readySummary, nextIncompleteGroup, setupProgress };
+}

package/onboarding/ui/model.mjs

@@ -0,0 +1,5 @@
+import * as seed from './seed.mjs';
+import {readSetupManifestBytes,createInstallerModel} from './setup-manifest.mjs';
+const [manifestResponse,schemaResponse,optionsResponse]=await Promise.all([fetch('/rer-setup.json'),fetch('/SETUP.schema.json'),fetch('/model-options.json')]);
+const manifest=readSetupManifestBytes(new Uint8Array(await manifestResponse.arrayBuffer()),new Uint8Array(await schemaResponse.arrayBuffer()));
+export const { fields, safeKeys, product, branding, features, summaryDefaults, normalizeWebsite, safeDraft, initialDraft, secretReady, hostingKeys, hostingModel, setupModel, installInput, displayValue, summaryKeys, failureDetails, failureNote, mergeAgentDraft, derivePrefix, normalizeAutomaticDraft, setupGroups, readySummary, nextIncompleteGroup, setupProgress, fieldVisible, fieldDefinition, groupDefinition, groupKeys, secretScopes, nameKey } = createInstallerModel(manifest,seed,await optionsResponse.json());

package/onboarding/ui/style.css

@@ -0,0 +1,63 @@
+*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;color:#173753;font:15px/1.6 Inter,Arial,sans-serif}.scene{min-height:100vh;padding:64px 5vw;background:#164661 url('/ocean.png') center/cover}.layout{max-width:1360px;margin:auto;display:grid;grid-template-columns:minmax(290px,.9fr) minmax(0,1.5fr);column-gap:70px;row-gap:24px;align-items:start}.sidebar{padding:0 28px;color:#f7f8ff;background:transparent;border:0;box-shadow:none}.brand{grid-column:1/-1;font-size:22px;font-weight:700;color:#f7f8ff;margin:0;padding-left:28px}.known-row{padding:7px 0;display:grid;grid-template-columns:1fr auto;gap:2px 15px}.known-label{font-size:12px}.known-value{grid-column:1;font-weight:500;font-size:14px;overflow-wrap:anywhere}.known-source{grid-column:1;font-size:10px;line-height:1.3}.edit{border:0;background:none;color:#dfcaff;font:inherit;cursor:pointer;padding:0;align-self:center;grid-column:2;grid-row:1/4}summary{cursor:pointer}.panel{padding:38px 40px;border-radius:26px;background:rgba(251,252,255,.97);box-shadow:0 18px 64px #001c3b33;min-width:0}.panel h1{font-size:29px;letter-spacing:-.6px;line-height:1.25;margin:0 0 24px}.fields{display:grid;gap:18px}.field{border:1px solid #e0e8f6;border-radius:15px;padding:20px;background:rgba(255,255,255,.5);min-width:0}.field label,.field-title{font-size:15px;font-weight:600;display:block;margin:0 0 7px;color:#153b66}.input{display:block;width:100%;min-width:0;padding:12px 14px;border:1px solid #cdd6e5;border-radius:10px;background:#fff;color:#173753;font:inherit}.input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #b796ff;outline-offset:3px}.help{color:#64788e;font-size:13px;line-height:1.6;margin:8px 0 0}.status{color:#57728b;font-size:13px;margin:10px 0}.field .edit{color:#7542d3;display:block;margin-top:12px;font-size:13px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 24px;border-radius:25px;font:600 14px/1.5 Inter,Arial,sans-serif;cursor:pointer;text-decoration:none}.primary{border:0;background:linear-gradient(120deg,#9255fc,#6537e7);color:white;box-shadow:0 5px 12px #7949de28}.secondary{border:1px solid #d2dcea;background:transparent;color:#224567}.actions{display:flex;justify-content:flex-end;margin-top:26px}.primary:disabled{opacity:.5;cursor:default}.error{padding:14px;background:#fff0ee;border:1px solid #f0c6c0;border-radius:10px;color:#98291b}.logs{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;background:#edf1f8;padding:16px;border-radius:12px;font:12px/1.65 monospace}.known-editor{grid-column:1/-1}.known-editor .input{margin-top:6px}.editor-actions{display:flex;gap:15px;margin-top:10px}.editor-actions button{font:inherit;border:0;background:none;padding:0;color:#dfcaff;cursor:pointer}.known-editor .help{color:#d5dff0}.ready-summary{padding:20px;background:#f1ecfc;border-radius:14px;color:#4f4570;margin:0}.connection-editor .field{margin-top:12px;background:#fff;color:#173753}.connection-actions{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.token-field{margin-top:16px}.connected{color:#d1f2e9}.secret-value{font-size:13px}.badge{font-size:10px;color:#d0bcfa}
+@media(max-width:1000px){.layout{gap:28px;grid-template-columns:minmax(250px,.85fr) minmax(0,1.4fr)}.panel{padding:28px}.sidebar{padding:0 22px}.brand{padding-left:22px}.scene{padding:35px 24px}}
+@media(max-width:700px){.scene{padding:20px 16px;background-attachment:scroll}.layout{display:block}.brand{margin-bottom:24px}.sidebar{margin-bottom:24px;padding-left:0;padding-right:0}.panel{padding:25px 20px}.panel h1{font-size:25px}.field{padding:17px}.primary{width:100%}}
+
+ .agent-activity.known-group{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:0;border-radius:13px;background:linear-gradient(110deg,rgba(38,60,116,.5),rgba(132,118,143,.5));overflow:hidden;margin-bottom:16px}.known-group-header{display:flex;align-items:center;gap:16px;padding:16px 15px 7px}.known-group-title{font-size:16px;margin:0;font-weight:700;line-height:1.3}.category-icon{width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:linear-gradient(135deg,#aa98ff,#e5d1ff);color:#412199;box-shadow:inset 0 0 8px #ffffff44}.category-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.workspace .category-icon{background:linear-gradient(135deg,#a2dbff,#4fa9f5);color:#0070df}.hosting .category-icon,.email .category-icon{background:linear-gradient(135deg,#0ed4b6,#31f2cf);color:#005761}.known-group-body{padding:6px 16px 13px 23px}.known-group .known-row:last-child{padding-bottom:0}#known-summary .known-label{font-size:11px}.known-row{min-width:0}.known-editor{min-width:0}.group-symbols{position:absolute;width:0;height:0;overflow:hidden}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.known-group-header{gap:12px}.known-group-body{padding-left:15px}.known-group-title{font-size:15px}}
+
+#fields>.field[data-field]{border:0;border-radius:0;background:transparent;padding:0}#fields{gap:24px}.select-wrap{position:relative}.select-wrap:after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;border-right:1.5px solid #64788e;border-bottom:1.5px solid #64788e;transform:translateY(-70%) rotate(45deg);pointer-events:none}.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:44px}
+
+.known-value{display:flex;align-items:center;gap:7px;min-width:0}.known-value-text{min-width:0;overflow-wrap:anywhere}.value-icon,.colour-swatch{width:18px;height:18px;flex-shrink:0}.colour-swatch{width:16px;height:16px}.value-icon{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.colour-swatch{border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff70}
+
+.target-choices{border:0;margin:0 0 8px;padding:0;display:flex;gap:8px;flex-wrap:wrap}.target-choices legend{margin-bottom:7px;padding:0}.target-choice{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #ffffff35;border-radius:8px;font-size:12px;cursor:pointer;position:relative}.target-choice:has(input:checked){background:#ffffff20;border-color:#69efd0}.target-choice input{position:absolute;opacity:0;width:1px;height:1px}.target-choice:has(input:focus-visible){outline:3px solid #b796ff;outline-offset:3px}.target-tick{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1px solid #ffffff60;border-radius:50%;color:transparent;font-size:11px;flex-shrink:0}.target-choice input:checked+.target-tick{background:#69efd0;border-color:#69efd0;color:#005761}
+
+.panel .target-choices{margin:0}.panel .target-choices legend{color:#153b66;font-size:15px;font-weight:600}.panel .target-choice{color:#173753;border-color:#cdd6e5;font-size:14px}.panel .target-choice:has(input:checked){background:#e9e4ff;border-color:#7542d3}.panel .target-tick{border-color:#8296aa}
+
+.colour-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.colour-control input[type="color"]{width:52px;height:42px;padding:3px;flex-shrink:0;cursor:pointer}.colour-caption{font-size:14px}.known-editor .colour-control{margin-top:6px}.known-editor .colour-control .input{margin-top:0}
+
+.panel label.target-choice{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0;line-height:1.4;font-weight:500}.panel .target-choices{gap:10px}.target-choice .value-icon{display:block}
+
+.hosting-unit{display:grid;gap:18px}.hosting-unit>.field{border:0;border-radius:0;background:transparent;padding:0}.hosting-unit>[data-provider]{border-left:3px solid #ded3f8;padding-left:16px}.hosting-unit .field[data-field]{margin-top:14px}.hosting-unit>.field[data-field]{margin-top:0}.hosting-unit>.status{margin:0}
+
+.secondary:disabled{opacity:.5;cursor:default}
+
+.email-unit{display:grid;gap:18px}.email-unit>.field,.advanced>.field{border:0;border-radius:0;background:transparent;padding:0}.email-unit>.help{margin:0}.choice-copy{display:block}.choice-copy .help{display:block;margin:5px 0 0;font-weight:400;font-size:12px}.hosting-unit>.target-choices .target-choice{flex:1 1 200px;align-items:flex-start}.hosting-unit>.target-choices .target-tick{margin-top:3px}.hosting-unit>.target-choices .value-icon{margin-top:2px}.connection-row .field-title{font-size:14px}.connection-row>.help{margin-top:0}.connection-row .secondary{min-height:36px;padding:7px 15px;font-size:13px}.advanced{font-size:13px}.advanced summary{color:#64788e}.advanced-toggle{display:flex;align-items:center;gap:8px;margin:15px 0 8px}.advanced .field{margin-top:8px}.panel .advanced>.field>label{font-size:13px}.panel .edit{color:#7542d3}.email-unit .target-choices legend{font-size:15px;font-weight:600;color:#153b66;margin-bottom:7px}
+
+.step-progress{font-size:12px;color:#64788e;margin:0 0 8px}.actions{gap:12px}.actions #back{margin-right:auto}.known-group-header .edit{margin-left:auto;font-size:12px}.known-group-header .known-group-title{flex:1}#heading:focus{outline:none}
+
+.agent-activity{min-width:0;padding-bottom:16px;background:rgba(0,0,0,.5)}.agent-activity .known-group-header{padding-left:16px;padding-right:16px;justify-content:space-between;gap:12px;flex-wrap:wrap}.agent-activity .known-group-title{min-width:0}.agent-activity-message{font-size:13px;line-height:1.55;margin:6px 16px 0;color:#f7f8ff;overflow-wrap:anywhere}.agent-activity-history{margin:10px 16px 0;color:#d5e4f3;font-size:11px}.agent-activity-history summary{width:fit-content}.agent-activity-events{padding-left:15px;margin:8px 0 0;line-height:1.5}.agent-activity-events li{padding:3px 0;overflow-wrap:anywhere}
+
+.agent-connect{display:block;margin:0 0 0 auto;max-width:100%;padding:7px 12px;border:1px solid #ffffff80;border-radius:8px;background:transparent;color:#fff;font:600 12px/1.5 Inter,Arial,sans-serif;cursor:pointer}.agent-handoff{width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:26px;border:0;border-radius:20px;background:#fbfcff;color:#173753;box-shadow:0 18px 64px #001c3b55}.agent-handoff::backdrop{background:#001c3b80}.agent-handoff h2{margin:0;font-size:22px;line-height:1.3}.agent-handoff textarea{margin-top:18px;resize:vertical;font:12px/1.6 monospace;min-height:140px}.agent-handoff-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.agent-handoff .status{min-height:21px}.agent-handoff .primary{width:auto}@media(max-width:700px){.agent-handoff{padding:20px}}
+
+.agent-working{display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:#f7f8ff;font-size:12px;line-height:1.5;white-space:nowrap}.agent-working-spinner{width:12px;height:12px;border:1.5px solid #ffffff50;border-top-color:currentColor;border-radius:50%;animation:agent-working-spin .9s linear infinite}@keyframes agent-working-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.agent-working-spinner{animation:none}}
+
+textarea.input{resize:vertical;min-height:100px}
+
+
+
+.primary{background:var(--installer-accent,#7542d3);color:var(--installer-accent-text,#fff)}
+
+.known-summary{min-width:0;margin-top:16px;color:#173753}
+.known-summary>summary{width:fit-content;max-width:100%;padding:9px 12px;border:1px solid #d2dcea;border-radius:9px;background:#f4f6fb;color:#224567;font-weight:600}
+.known-summary[open]>summary{margin-bottom:12px}
+.known-summary #known{min-width:0}
+.connection-row .help{overflow-wrap:anywhere}
+#stop-installation{margin-top:14px}
+@media(max-width:700px){
+  .scene{padding:16px}
+  .layout{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
+  .brand{grid-column:1;grid-row:1;margin:0;padding:0}
+  .panel{grid-column:1;grid-row:2;padding:20px 18px}
+  .panel h1{font-size:24px;margin-bottom:16px}
+  .sidebar{grid-column:1;grid-row:3;display:grid;gap:12px;margin:8px 0 0;padding:0}
+  #form{padding-bottom:74px}
+  .actions{position:fixed;left:0;right:0;bottom:0;z-index:20;justify-content:flex-end;gap:10px;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e0e8f6;background:#fbfcff;box-shadow:0 -8px 24px #001c3b18}
+  .actions .primary{width:auto;min-width:0;flex:1}
+  .actions .secondary{width:auto;flex:0 0 auto;padding-inline:16px}
+  .known-summary>summary{max-width:100%}
+}
+
+.target-choice .help{color:#42546b}
+
+#known-summary .known-group{border:0;border-radius:13px;background:#f2f5fc;overflow:hidden;margin-bottom:16px}#known-summary .known-group.workspace{background:#eef7fc}#known-summary .known-group.hosting,#known-summary .known-group.email{background:#eaf8f6}#known-summary .known-label,#known-summary .known-source{color:#42546b}#known-summary .known-group-title,#known-summary .known-value{color:#173753}#known-summary .known-group .edit{color:#4d2e87}.help-link{color:#4d2e87;font-weight:600;text-decoration:underline}.failure-log-path{margin:12px 0 0;color:#42546b;font-size:12px;overflow-wrap:anywhere}#retry-installation{margin-top:14px}
+
+h1,h2,h3,legend{text-wrap:balance}p,.help,.status,.known-source,.agent-activity-message,.choice-copy{text-wrap:pretty}

package/onboarding/ui/theme.css

@@ -0,0 +1,37 @@
+/* Loaded only for a seed that declares a theme (rer-theme.css); every rule is
+   scoped to .rer-themed so an unthemed installer keeps style.css alone. */
+.rer-themed body{color:var(--rer-text);font-family:var(--rer-font-body,Inter,Arial,sans-serif)}
+.rer-themed .scene{background:var(--rer-page)}
+.rer-themed .brand,.rer-themed .panel h1,.rer-themed .agent-handoff h2,.rer-themed .known-group-title{font-family:var(--rer-font-heading,var(--rer-font-body,inherit))}
+.rer-themed .brand,.rer-themed .sidebar{color:var(--rer-text)}
+/* content toggles the mark only when --rer-logo is declared; the background draws it at size. */
+.rer-themed .brand{display:flex;align-items:center;gap:12px}
+.rer-themed .brand::before{content:var(--rer-logo,none);display:block;flex:none;width:36px;height:36px;overflow:hidden;text-indent:200%;white-space:nowrap;background:var(--rer-logo) center/contain no-repeat}
+.rer-themed .panel{background:var(--rer-surface);border-radius:var(--rer-radius,26px);box-shadow:0 1px 2px #0000000d,0 14px 36px #00000014}
+.rer-themed .field label,.rer-themed .field-title,.rer-themed .panel .target-choices legend,.rer-themed .email-unit .target-choices legend{color:var(--rer-text)}
+.rer-themed .input{border-color:var(--rer-border);background:var(--rer-surface);color:var(--rer-text);border-radius:calc(var(--rer-radius,20px) / 2)}
+.rer-themed .input:focus-visible,.rer-themed button:focus-visible,.rer-themed a:focus-visible,.rer-themed summary:focus-visible,.rer-themed .target-choice:has(input:focus-visible){outline-color:var(--rer-focus)}
+.rer-themed .help,.rer-themed .status,.rer-themed .step-progress,.rer-themed .advanced summary,.rer-themed .target-choice .help,.rer-themed .failure-log-path,.rer-themed .agent-activity-history,.rer-themed .known-editor .help{color:var(--rer-muted)}
+.rer-themed .select-wrap:after{border-color:var(--rer-muted)}
+.rer-themed .edit,.rer-themed .field .edit,.rer-themed .panel .edit,.rer-themed .help-link,.rer-themed #known-summary .known-group .edit,.rer-themed .editor-actions button{color:var(--rer-link,var(--rer-text))}
+.rer-themed .primary,.rer-themed .secondary,.rer-themed .agent-connect{font-family:inherit;border-radius:var(--rer-radius,25px)}
+.rer-themed .primary{background:var(--rer-accent,var(--installer-accent,#7542d3));color:var(--rer-accent-text,var(--installer-accent-text,#fff));box-shadow:none}
+.rer-themed .secondary,.rer-themed .agent-connect{border:1px solid var(--rer-border);background:transparent;color:var(--rer-text)}
+.rer-themed .logs,.rer-themed .ready-summary{background:var(--rer-page);color:var(--rer-text);border-radius:calc(var(--rer-radius,24px) / 2)}
+.rer-themed .panel .target-choice{color:var(--rer-text);border-color:var(--rer-border)}
+.rer-themed .panel .target-choice:has(input:checked){background:var(--rer-page);border-color:var(--rer-focus);box-shadow:inset 0 0 0 1px var(--rer-focus)}
+.rer-themed .target-tick,.rer-themed .panel .target-tick{border-color:var(--rer-muted)}
+.rer-themed .target-choice input:checked+.target-tick{background:var(--rer-accent,var(--rer-text));border-color:var(--rer-accent,var(--rer-text));color:var(--rer-accent-text,var(--rer-surface))}
+.rer-themed .hosting-unit>[data-provider]{border-left-color:var(--rer-border)}
+.rer-themed .connection-editor .field{background:var(--rer-surface);color:var(--rer-text)}
+.rer-themed .agent-activity.known-group,.rer-themed .agent-activity,.rer-themed .known-group{background:var(--rer-surface);color:var(--rer-text);backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:var(--rer-radius,13px);box-shadow:0 1px 2px #0000000d}
+.rer-themed .agent-activity-message,.rer-themed .agent-working,.rer-themed .connected,.rer-themed .badge{color:var(--rer-text)}
+.rer-themed .agent-working-spinner{border-color:var(--rer-border);border-top-color:currentColor}
+.rer-themed .category-icon,.rer-themed .workspace .category-icon,.rer-themed .hosting .category-icon,.rer-themed .email .category-icon{background:var(--rer-accent,var(--rer-page));color:var(--rer-accent-text,var(--rer-text));box-shadow:none;border-radius:calc(var(--rer-radius,22px) / 2)}
+.rer-themed .known-summary{color:var(--rer-text)}
+.rer-themed .known-summary>summary{border-color:var(--rer-border);background:var(--rer-page);color:var(--rer-text);border-radius:calc(var(--rer-radius,18px) / 2)}
+.rer-themed #known-summary .known-group,.rer-themed #known-summary .known-group.workspace,.rer-themed #known-summary .known-group.hosting,.rer-themed #known-summary .known-group.email{background:var(--rer-page);box-shadow:none}
+.rer-themed #known-summary .known-label,.rer-themed #known-summary .known-source{color:var(--rer-muted)}
+.rer-themed #known-summary .known-group-title,.rer-themed #known-summary .known-value{color:var(--rer-text)}
+.rer-themed .agent-handoff{background:var(--rer-surface);color:var(--rer-text);border-radius:var(--rer-radius,20px)}
+@media(max-width:700px){.rer-themed .actions{background:var(--rer-surface);border-top-color:var(--rer-border)}}

package/onboarding/ui/workspace-art.js

@@ -0,0 +1,30 @@
+
+// Art is requested only when the user commits a changed workspace field.
+export function workspaceArt({ request, read, save, model: {fields} }) {
+  const contextKeys = Object.keys(fields).filter(key => fields[key].artwork);
+  const activeKeys = draft => contextKeys.filter(key => fields[key].visible?.(draft) !== false);
+  const signature = draft => JSON.stringify(activeKeys(draft).map(key => [key, draft[key]]));
+  let dirty = false, attached = false, lastRequested = '', committing = Promise.resolve();
+  return {
+    update(state) { attached = state.agent?.attached === true; },
+    edited(key) { if (contextKeys.includes(key)) dirty = true; },
+    commit() {
+      committing = committing.catch(() => {}).then(async () => {
+        if (!dirty) return;
+        const draft = read(), current = signature(draft);
+        await save();
+        if (signature(read()) !== current) return;
+        if (!attached) return;
+        if (!activeKeys(draft).every(key => {
+          const definition = fields[key].definition?.(draft) ?? fields[key];
+          return (definition.optional && !draft[key]) || definition.valid(draft[key]);
+        })) return;
+        if (current === lastRequested) { dirty = false; return; }
+        await request('/api/workspace-art', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
+        lastRequested = current;
+        if (signature(read()) === current) dirty = false;
+      });
+      return committing;
+    },
+  };
+}

package/onboarding/wrangler-auth.mjs

@@ -0,0 +1,43 @@
+import { readFile, stat } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+export function assertProductionCloudflare(env) {
+  for(const name of ['WRANGLER_API_ENVIRONMENT','CLOUDFLARE_API_ENVIRONMENT'])if(env[name]&&env[name]!=='production')throw Error('The selected Cloudflare environment is not supported by this installer.');
+  for(const name of ['CLOUDFLARE_API_BASE_URL','CF_API_BASE_URL'])if(env[name]&&env[name].replace(/\/$/,'')!=='https://api.cloudflare.com/client/v4')throw Error('The selected Cloudflare API address is not supported by this installer.');
+  if(env.CLOUDFLARE_COMPLIANCE_REGION)throw Error('The selected Cloudflare environment is not supported by this installer.');
+}
+
+/** Wrangler 4.45.4's actual credential-file layout; no login, refresh, or profile switching. */
+export async function legacyWranglerCredentials(version, { env=process.env, home=homedir(), platform=process.platform, now=Date.now() }={}) {
+  if (version !== '4.45.4') throw Error('This Wrangler version does not provide a supported credential reader.');
+  assertProductionCloudflare(env);
+  if (env.WRANGLER_PROFILE) throw Error('The selected Wrangler environment is not supported by the credential reader.');
+  const legacy=join(home,'.wrangler');
+  let directory;
+  try { if((await stat(legacy)).isDirectory())directory=legacy; } catch(error) { if(error.code!=='ENOENT')throw error; }
+  if(!directory){
+    const base=env.XDG_CONFIG_HOME || (platform==='darwin'?join(home,'Library','Preferences'):platform==='win32'?join(env.APPDATA||join(home,'AppData','Roaming'),'xdg.config'):join(home,'.config'));
+    directory=join(base,'.wrangler');
+  }
+  const text=await readFile(join(directory,'config','default.toml'),'utf8');
+  if(text.length>65536)throw Error('Wrangler credential file is too large.');
+  // Wrangler emits simple quoted TOML scalar values. Reject other encodings instead of guessing.
+  const scalar=key=>{
+    const matches=[...text.matchAll(new RegExp('^'+key+'\\s*=\\s*("[^"\\r\\n]*"|\'[^\'\\r\\n]*\')\\s*(?:#.*)?$','gm'))];
+    if(matches.length!==1)return undefined;
+    const value=matches[0][1];return value[0]==='"'?JSON.parse(value):value.slice(1,-1);
+  };
+  const token=scalar('oauth_token'),expires=Date.parse(scalar('expiration_time'));
+  if(typeof token!=='string'||!token||/[\r\n]/.test(token)||!Number.isFinite(expires)||expires<=now)throw Error('Wrangler credentials are missing or expired.');
+  return {type:'oauth',token};
+}
+export async function wranglerCredentials(root, env, run) {
+  assertProductionCloudflare(env);
+  const options={cwd:root,env:{...env,CI:'true',WRANGLER_SEND_METRICS:'false'}};
+  try { return JSON.parse(await run('wrangler',['auth','token','--json'],options)); }
+  catch {
+    const version=(await run('wrangler',['--version'],options)).trim();
+    return legacyWranglerCredentials(version,{env});
+  }
+}

package/operations/README.md

@@ -0,0 +1,246 @@
+# Operations manifests and command inspection
+
+First-party seeds expose inspection through their portable RER command. From the
+seed root:
+
+```sh
+rer describe --json
+rer check --profile first-party --json
+```
+
+`describe` returns the command contract: profile, declared Node and pnpm pins,
+exposed verbs and supported flags, effects, matching package aliases, and local
+state/settings locations. It reads `OPERATIONS.json` and the declared command
+adapter; it does not return the operations manifest itself or test environment
+values.
+
+`check` validates declared command input files and required enabled loops.
+The first-party profile also enforces the manifest's `seedContract` marker,
+adapter hooks and flags, command targets, package aliases, tool pins, complete
+portable source inventory and copied source hashes. An explicit
+`--profile first-party` rejects a missing marker. With `--json`, it emits a
+result event containing `ok`, `exitCode` and individual clauses on stdout;
+without it, failed clauses are printed for the owner. Exit 0 means the structural
+checks passed; failures exit nonzero. Read the seed's `OPERATIONS.md` to resolve
+manifest or source problems.
+
+These commands require Node but no installed packages. They do not run setup,
+deployment, verification, configuration validators, environment readiness checks
+or network requests. Structural success does not establish installed tool
+versions, configured local inputs, provider access, remote health or product
+acceptance. `rer doctor --json` separately diagnoses installed
+tools and local inputs through the manifest inspector.
+
+## Internal manifest tooling
+
+The shared `operations.mjs` and `project-operations.mjs` modules implement
+`readOperations`, `describeOperations` and `inspectOperations` for RER and other
+local consumers. They ship together under the portable source tree. Manifest
+reading validates fields, referenced documents and configuration modules, and
+resolves declared command inputs. `describeOperations` returns the operations
+manifest after checking command availability; it is distinct from RER's public
+command descriptor.
+Run directly in a project that has `scripts/rer.mjs`, `operations.mjs describe`
+and `check` forward to that `scripts/rer.mjs` with `describe` and `check`. In an
+independent project without RER they print the inspector's own JSON and advice,
+naming the script by the path it was run from.
+
+`inspectOperations` checks required environment names, selected loop inputs and
+an optional pure `validateConfiguration(env)` module. It reports input names
+and suppresses validator details and values because parser exceptions may contain
+credentials. Consumers can pair the reported input names with
+`environmentSources` and operating documentation to guide setup. Missing inputs
+need configuration before readiness can pass; malformed supplied values are
+reported without exposing them. Inspection never executes the declared
+setup, deployment or verification commands. Generated deployment caches and build
+artifacts, provider identity and permissions, credential validity, delivery,
+deployed health and acceptance remain unchecked.
+
+An optional `environmentSources` map explains where declared inputs come from.
+Keys must name declared inputs; values must be short, plain source guidance
+without URLs or credentials. Add safe sources so owners can find inputs without
+putting values in the descriptor.
+
+Version 1 manifests require edition identity, `OPERATIONS.md`, `ACCEPTANCE.md`,
+`scripts/operations-config.mjs` and valid package command declarations for setup,
+deploy and verify. The adapter validates local configuration only. Version 2
+supports project-owned commands and documents as described below.
+
+Run `node --test operations/*.test.mjs` in Base. Composition copies the shared
+modules from its pinned Base commit. Configuration adapters stay project-owned;
+these modules do not create a shared deployment engine or change authentication.
+
+## Independent projects (version 2)
+
+The manifest inspector is optional tooling, not the RER management admission
+contract.
+Software can keep its own language, framework, package manager, source layout and
+operating procedures. A project choosing this inspector can use `OPERATIONS.json`
+version 2 without `edition.json`, `seed.json`, `package.json`, `pnpm`, or a fixed
+acceptance filename. Copy both `operations.mjs` and `project-operations.mjs` together.
+Version 1 uses the edition-specific requirements listed above.
+
+```json
+{
+  "version": 2,
+  "project": "publisher/project",
+  "runtime": { "requirements": [{ "name": "python", "version": ">=3.11" }] },
+  "requiredEnvironment": [],
+  "commands": {
+    "verify": {
+      "argv": ["python3", "tools/verify.py"],
+      "inputs": ["tools/verify.py"],
+      "effects": "Runs local checks; no remote writes."
+    }
+  }
+}
+```
+
+Command names and argument arrays are project-owned; consumers should invoke
+them directly without an implicit shell. Manifest inspection never invokes them.
+`inputs` lists checkout files required to invoke the command, including its
+script or build manifest. Missing inputs make that
+command unavailable. Absolute paths, traversal and symlinks outside the checkout
+are rejected. Declare accurate effects, including provider writes, migrations
+and destructive actions; a description is not execution authorization.
+
+Optional `documentation.document` and `acceptance.document` reference project-owned
+local documents. For a version 2 project, a declared `documentation.document`
+pointer is the setup guidance named by the internal inspector summary; without
+that pointer, it names the project setup documentation generally. If no setup command is declared, the
+summary reports that and directs the owner to the available setup guidance.
+Optional `configuration.module` references a local ES module
+exporting `validateConfiguration(env)`. It must only validate local configuration;
+`inspectOperations` imports and calls it, so inspect untrusted source before
+running a diagnostic that uses it, including RER doctor.
+Without a module, configuration checking covers required environment names only.
+Runtime requirements are descriptive: neither command availability in PATH nor
+installed versions are checked. All command inputs must be declared accurately;
+the inspector does not infer arbitrary language or build-system dependencies.
+
+An optional per-input source map can guide setup without putting values in the
+descriptor or diagnostic output:
+
+```json
+{
+  "requiredEnvironment": ["RESEND_API_KEY"],
+  "environmentSources": {
+    "RESEND_API_KEY": "1Password production vault, mail integration item"
+  }
+}
+```
+
+For v2, source keys may also name inputs selected by declared mail loops. Source
+text is limited to 8–180 characters and rejects URLs, equals assignments,
+credential labels containing values, and token-like values. Use a document pointer
+such as `OPERATIONS.md` or plain guidance such as `Team vault: production mail item`;
+never paste an environment assignment or credential into this metadata.
+`inspectOperations` still reports local inputs only; remote deployment,
+provider access, and acceptance remain unchecked.
+
+Agents can adapt any software and author operating knowledge in its repository.
+Provider targets must separately support and verify the actual declared effects,
+resources, migrations and recovery. This local descriptor does not admit a project
+to hosted execution, provision resources, or prove provider/runtime compatibility.
+
+## Required loops (version 2)
+
+A v2 descriptor may add a declarative `loops` array:
+
+```json
+"loops": [
+  { "id": "ticket-replies", "type": "mail", "required": true, "enabled": true, "provider": "resend" },
+  { "id": "nightly-summary", "type": "worker", "required": false, "enabled": false }
+]
+```
+
+`inspectOperations` fails for required disabled loops, missing/blank selected
+mail inputs or a conflicting `MAIL_PROVIDER`. SendGrid requires `SENDGRID_API_KEY`; Resend requires
+`RESEND_API_KEY`; Cloudflare Sending requires `CLOUDFLARE_EMAIL_API_TOKEN` and a
+32-hex `CLOUDFLARE_EMAIL_ACCOUNT_ID`. Other providers' keys cannot satisfy the
+selection. Disabled optional features stay optional. This is a local input check,
+not credential validity, DNS verification, delivery or remote runtime health.
+
+A mail loop can instead declare `binding` to follow a runtime-selected provider
+and project-owned environment names. `provider` and `binding` are mutually
+exclusive. For example:
+
+```json
+{
+  "id": "sign-in-mail",
+  "type": "mail",
+  "required": true,
+  "enabled": true,
+  "binding": {
+    "providerEnvironment": "MAIL_PROVIDER",
+    "providers": {
+      "sendgrid": { "apiKeyEnvironment": "MAIL_API_KEY", "requiredEnvironment": ["MAIL_FROM"] },
+      "resend": { "apiKeyEnvironment": "MAIL_API_KEY", "requiredEnvironment": ["MAIL_FROM"] },
+      "development": {
+        "requiredEnvironment": ["MAIL_FROM"],
+        "development": { "modeEnvironment": "ENVIRONMENT", "originEnvironment": "APP_URL" }
+      }
+    },
+    "whenUnset": {
+      "provider": "resend",
+      "apiKeyEnvironment": "RESEND_API_KEY",
+      "requiredEnvironment": ["RESEND_FROM_EMAIL"]
+    }
+  }
+}
+```
+
+Every environment name must match `[A-Z][A-Z0-9_]*`. A nonempty `providers` map
+supports `sendgrid`, `resend`, `cloudflare` and `development` only. Every provider
+entry declares `requiredEnvironment` (an empty array is allowed). Hosted entries
+also require `apiKeyEnvironment`; Cloudflare additionally requires
+`accountIdEnvironment`, checked as 32 hex characters. Those account declarations
+are exclusive to Cloudflare. Only the selected entry's inputs can satisfy its
+readiness check. The inspector checks presence and the declared guard; a project's
+configuration module remains responsible for its native sender and credential
+validation. A required mail loop still fails when foundation-only configuration
+is valid but mail has not been configured.
+
+Optional `whenUnset` declares a hosted provider and its inputs with the same
+shape. It applies only if the selector is absent (`undefined`), never for blank,
+unknown or non-string selectors. It cannot select development. Without
+`whenUnset`, an absent selector blocks readiness and names the selector input.
+
+Development entries require `development.modeEnvironment` and
+`development.originEnvironment` and cannot declare a credential. The mode must
+be exactly `development`. The origin must be a canonical HTTP(S) loopback origin
+(host exactly `localhost`, `127.0.0.1` or `[::1]`, with optional port and trailing
+slash), without user information, path, query or fragment. Alternate numeric
+hosts and normalization-dependent spellings are rejected. Preview, production
+and remote origins cannot satisfy this guard. No host lookup occurs. This only
+checks a declared development guard; it does not create or send to an outbox.
+
+Malformed loop or binding fields, unknown properties and unsupported providers
+are rejected even for disabled loops. Valid optional disabled loops continue to
+pass; required disabled loops continue to block readiness. `environmentSources`
+may name the selector and any input declared by any provider or `whenUnset`.
+Missing-input guidance uses the actual selected names and their declared source;
+Inspector results and summaries never include environment values. Both modules
+ship together; no additional runtime adapter is needed.
+
+The [deploy kit](../modules/deploy-kit/README.md) creates new v2 inspector and
+edition-authoring templates without overwriting an existing edition. Both inspector
+modules ship together.
+
+## First-party command profile
+
+OPERATIONS v2 may declare:
+
+```json
+"seedContract": {
+  "version": 1,
+  "profile": "first-party",
+  "adapter": "scripts/installer/local.mjs"
+}
+```
+
+The adapter exports `commandAdapter` and `install`. First-party adopters use the
+shared RER commands and contract described above. The manifest inspector retains
+its environment, configuration and loop diagnostics for RER doctor; RER check
+performs structural validation before dependency installation. Independent
+projects retain their own supported argument arrays and stack.