Add synced MSR character DOM fields

js/msr_character.js

@@ -103,6 +103,8 @@ function refreshCharacterPreview(node) {
 
   const description = findWidget(node, "description")?.value || "";
   const alias = findWidget(node, "alias")?.value || "";
+  const aliasWidget = findWidget(node, "alias");
+  const descriptionWidget = findWidget(node, "description");
 
   const topRow = document.createElement("div");
   Object.assign(topRow.style, {
@@ -160,6 +162,72 @@ function refreshCharacterPreview(node) {
 
   container.appendChild(topRow);
   container.appendChild(meta);
+
+  const form = document.createElement("div");
+  Object.assign(form.style, {
+    marginTop: "10px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+  });
+
+  const aliasLabel = document.createElement("label");
+  aliasLabel.textContent = "Alias";
+  Object.assign(aliasLabel.style, {
+    fontSize: "11px",
+    color: "#bbb",
+  });
+
+  const aliasInput = document.createElement("input");
+  aliasInput.type = "text";
+  aliasInput.value = alias || "";
+  aliasInput.placeholder = "optional alias, e.g. bob";
+  Object.assign(aliasInput.style, {
+    width: "100%",
+    boxSizing: "border-box",
+    background: "#1c1c1c",
+    color: "#eee",
+    border: "1px solid #444",
+    borderRadius: "6px",
+    padding: "6px 8px",
+    fontSize: "12px",
+  });
+  aliasInput.addEventListener("input", () => {
+    setWidgetValue(node, aliasWidget, aliasInput.value);
+  });
+
+  const descLabel = document.createElement("label");
+  descLabel.textContent = "Description";
+  Object.assign(descLabel.style, {
+    fontSize: "11px",
+    color: "#bbb",
+  });
+
+  const descInput = document.createElement("textarea");
+  descInput.value = description || "";
+  descInput.placeholder = "Character description...";
+  Object.assign(descInput.style, {
+    width: "100%",
+    minHeight: "86px",
+    boxSizing: "border-box",
+    resize: "vertical",
+    background: "#1c1c1c",
+    color: "#eee",
+    border: "1px solid #444",
+    borderRadius: "6px",
+    padding: "8px",
+    fontSize: "12px",
+    lineHeight: "1.35",
+  });
+  descInput.addEventListener("input", () => {
+    setWidgetValue(node, descriptionWidget, descInput.value);
+  });
+
+  form.appendChild(aliasLabel);
+  form.appendChild(aliasInput);
+  form.appendChild(descLabel);
+  form.appendChild(descInput);
+  container.appendChild(form);
 }
 
 async function analyzeCharacterNode(node, buttonWidget) {
@@ -233,7 +301,7 @@ app.registerExtension({
             getValue: () => "",
             setValue: () => {},
           });
-          this._msrPreviewWidget.computeSize = () => [Math.max(10, (this.size?.[0] || 320) - 30), 124];
+          this._msrPreviewWidget.computeSize = () => [Math.max(10, (this.size?.[0] || 320) - 30), 260];
         }
 
         const originalConnectionsChange = this.onConnectionsChange;
@@ -250,6 +318,14 @@ app.registerExtension({
           return result;
         };
 
+        ["alias", "description"].forEach((widgetName) => {
+          const widget = findWidget(this, widgetName);
+          if (!widget) return;
+          widget.hidden = true;
+          if (!widget.options) widget.options = {};
+          widget.options.hidden = true;
+        });
+
         this.size[0] = Math.max(this.size[0] || 0, 330);
         refreshCharacterPreview(this);
       };