+ const avatar = svgAvatarMarker(character, entry, size * 0.42, -size - 16, Math.max(22, Math.min(32, size + 8)));
+ const haloSize = size + Math.min(18, 7 + characterPresence(entry)[0].score);
+ return `
+ ${html(`${character} ${expressionFor(entry, character)}: ${entry.title || "memory"}`)}
+
${html(char)}
+ ${avatar}
${label}`;
}).join("");
graph.innerHTML = `${rings}${clusterEdges}${edges}${clusterNodes}${nodes}`;
@@ -3529,15 +3742,17 @@ HIDDEN_APP_HTML = r"""
if (state.camera.k < 0.16) return "";
const scale = labelScale();
const text = truncate(cluster.label, state.camera.k > 0.35 ? 46 : 28);
- const width = Math.max(180, text.length * 8 + 34);
+ const width = Math.max(210, text.length * 8 + 68);
const height = state.camera.k > 0.34 ? 68 : 40;
const labelPos = { x: pos.x - width * scale / 2, y: pos.y + size + 28 };
if (!reserveLabel(labelPos, width * scale, height * scale, occupied)) return "";
const detail = state.camera.k > 0.34 ? `${cluster.entries.length} memories / ${html(layerName(cluster.depth))}` : "";
+ const avatar = cluster.character ? svgAvatarMarker(cluster.character, cluster.entries[0] || { characters: [cluster.character] }, 10, 8, 28, "cluster-label-avatar") : "";
return `
- ${html(text)}
- ${detail}
+ ${avatar}
+ ${html(text)}
+ ${detail.replace('x="14"', `x="${avatar ? 48 : 14}"`)}
`;
}
@@ -3548,9 +3763,10 @@ HIDDEN_APP_HTML = r"""
if (!isWorldVisible(pos.x, pos.y, 260)) return "";
const scale = labelScale();
const deep = state.camera.k > 1.25 || selected;
+ const character = primaryCharacter(entry);
const text = truncate(entry.title, deep ? 72 : state.camera.k > 0.85 ? 42 : 24);
- const meta = `${entry.type || "memory"} / ${entry.emotionalTone || "warm"}`;
- const width = Math.max(190, Math.min(420, text.length * 8 + 42));
+ const meta = `${character} / ${entry.type || "memory"} / ${entry.emotionalTone || "warm"}`;
+ const width = Math.max(220, Math.min(450, text.length * 8 + 76));
const height = deep ? 92 : 44;
const labelPos = { x: pos.x + size + 18, y: pos.y - height * scale / 2 };
if (!selected && !reserveLabel(labelPos, width * scale, height * scale, occupied)) return "";
@@ -3558,8 +3774,9 @@ HIDDEN_APP_HTML = r"""
const metaLine = deep ? `${html(meta)}` : "";
return `
- ${html(text)}
- ${metaLine}${snippet}
+ ${svgAvatarMarker(character, entry, 10, 8, 28, "node-label-avatar")}
+ ${html(text)}
+ ${metaLine.replace('x="14"', 'x="48"')}${snippet.replace('x="14"', 'x="48"')}
`;
}
@@ -3585,7 +3802,7 @@ HIDDEN_APP_HTML = r"""
function renderBreadcrumb(scope) {
const filters = activeFilters();
const parts = [``, ``];
- filters.forEach((filter) => parts.push(``));
+ filters.forEach((filter) => parts.push(``));
if (scope.focusedCluster) parts.push(``);
if (state.focusIds) parts.push(``);
$("breadcrumb").innerHTML = parts.join("");
@@ -3598,7 +3815,7 @@ HIDDEN_APP_HTML = r"""
const value = (id) => $(id).value;
if (value("search")) filters.push({ id: "search", label: `Search: ${value("search")}`, help: "Only memories matching this text are visible." });
if (value("layerFilter")) filters.push({ id: "layerFilter", label: `Depth: ${layerName(value("layerFilter"))}`, help: "Only this depth layer is visible." });
- if (value("characterFilter")) filters.push({ id: "characterFilter", label: `Character: ${value("characterFilter")}`, help: "Only memories in this character territory are visible." });
+ if (value("characterFilter")) filters.push({ id: "characterFilter", label: `Character: ${value("characterFilter")}`, character: value("characterFilter"), help: "Only memories in this character territory are visible." });
if (value("toneFilter")) filters.push({ id: "toneFilter", label: `Tone: ${value("toneFilter")}`, help: "Only this emotional tone is visible." });
if (value("rarityFilter")) filters.push({ id: "rarityFilter", label: `Rarity: ${value("rarityFilter")}`, help: "Only this rarity is visible." });
return filters;
@@ -3614,7 +3831,7 @@ HIDDEN_APP_HTML = r"""
$("activeState").innerHTML = `Whole sky visible. You can always return here.`;
return;
}
- $("activeState").innerHTML = active.map((item) => `${html(item.label)}`).join("") + ``;
+ $("activeState").innerHTML = active.map((item) => `${item.character ? avatarHtml(item.character, "xs") : ""}${html(item.label)}`).join("") + ``;
$("activeState").querySelectorAll("[data-clear]").forEach((button) => button.addEventListener("click", () => clearExplorationPart(button.dataset.clear)));
$("activeState").querySelector("[data-action='soft']")?.addEventListener("click", softReset);
$("activeState").querySelector("[data-action='full']")?.addEventListener("click", fullReset);
@@ -4081,14 +4298,18 @@ HIDDEN_APP_HTML = r"""
}
function renderPreview(entry) {
const body = html(entry.content || "").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1");
- $("preview").innerHTML = `${body || "This memory is waiting for words."}${html(layerName(depth(entry)))}${html(entry.emotionalTone)}${html(entry.rarity)}${(entry.symbols || []).map((item) => `${html(item)}`).join("")}
`;
+ $("preview").innerHTML = `${body || "This memory is waiting for words."}${characterPresence(entry).slice(0, 3).map((item) => avatarChip(item.character, entry)).join("")}${html(layerName(depth(entry)))}${html(entry.emotionalTone)}${html(entry.rarity)}${(entry.symbols || []).map((item) => `${html(item)}`).join("")}
`;
+ }
+ function renderCharacterPreview(entry = null) {
+ const draft = entry || { characters: normalizeCharacters($("characters").value), title: $("title").value, content: $("content").value, triggerConditions: $("triggerConditions").value, emotionalRole: $("emotionalRole").value, mysteryLevel: $("mysteryLevel").value, tags: splitList($("tags").value), symbols: splitList($("symbols").value), narrativeArcs: splitList($("narrativeArcs").value), pageLocation: $("pageLocation").value, familyLayer: $("familyLayer").value };
+ $("characterPreview").innerHTML = characterPresence(draft).slice(0, 6).map((item) => avatarChip(item.character, draft)).join("") || "z will keep this memory company until another character is chosen.";
}
function renderConnections(entry) {
const ids = new Set([...(entry.continuationLinks || []), ...(entry.echoes || []), ...(entry.thematicLinks || []), ...(entry.symbolicLinks || []), ...(entry.triggerLinks || []), ...(entry.parentLinks || []), ...(entry.childLinks || []), ...(entry.mirroredEntries || [])]);
const sameCharacter = state.entries.filter((other) => other.id !== entry.id && (entry.characters || []).some((name) => (other.characters || []).includes(name))).slice(0, 4);
const linked = [...ids].map((id) => state.entries.find((item) => item.id === id)).filter(Boolean);
const items = [...linked, ...sameCharacter].slice(0, 10);
- $("connections").innerHTML = items.length ? items.map((item) => ``).join("") : "No nearby memories yet. Drag from this node to another to begin a thread.
";
+ $("connections").innerHTML = items.length ? items.map((item) => ``).join("") : "No nearby memories yet. Drag from this node to another to begin a thread.
";
$("connections").querySelectorAll("button").forEach((button) => button.addEventListener("click", () => selectNode(button.dataset.id)));
}
function newEntry(type = "quote") {
@@ -4163,6 +4384,11 @@ HIDDEN_APP_HTML = r"""
$("toneFilter").innerHTML = opt("", "All tones") + state.meta.tones.map((value) => opt(value)).join("");
$("rarityFilter").innerHTML = opt("", "All rarities") + state.meta.rarities.map((value) => opt(value)).join("");
$("layerKey").innerHTML = (state.meta.layers || []).map((layer) => `${html(layer.id)}${html(layer.name)}${html(layer.meaning)}
`).join("");
+ document.querySelectorAll("[data-guide-character]").forEach((item) => {
+ if (item.querySelector(".avatar")) return;
+ const character = item.dataset.guideCharacter;
+ item.insertAdjacentHTML("afterbegin", avatarHtml(character, "xs", characterConfig(character).avatar?.mood || "soft"));
+ });
}
async function save() {
applyFormToState();