Update app.py

app.py

@@ -209,8 +209,8 @@ def _render_collection() -> str:
         return f"""
         <div style="text-align:center;padding:60px 20px;color:#555;">
           <div style="font-size:3rem;margin-bottom:14px;">⚗️</div>
-          <div style="font-weight:700;font-size:.95rem;color:#666;margin-bottom:8px;">The forge is cold.</div>
-          <div style="font-size:.82rem;color:#555;max-width:280px;margin:0 auto;line-height:1.6;">
+          <div style="font-weight:700;font-size:.95rem;color:#888;margin-bottom:8px;">The forge is cold.</div>
+          <div style="font-size:.82rem;color:#777;max-width:280px;margin:0 auto;line-height:1.6;">
             Activate an agent and check <strong style="color:#f97316;">Add to Collection</strong>
             to be the first to light it up.
           </div>
@@ -250,7 +250,7 @@ def _render_collection() -> str:
                          flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
               {name}
             </span>
-            <span style="font-size:.68rem;color:#444;white-space:nowrap;">{date}</span>
+            <span style="font-size:.68rem;color:#6b6b88;white-space:nowrap;">{date}</span>
           </div>
           <div style="font-size:.74rem;color:#555;line-height:1.5;font-family:'JetBrains Mono',monospace;
                       white-space:pre-wrap;max-height:54px;overflow:hidden;">
@@ -261,7 +261,7 @@ def _render_collection() -> str:
                          background:{color}11;border-radius:99px;padding:1px 8px;font-weight:600;">
               Load into Forge →
             </span>
-            <span style="margin-left:auto;font-size:.67rem;color:#444;">
+            <span style="margin-left:auto;font-size:.67rem;color:#6b6b88;">
               {chars:,} chars
             </span>
           </div>
@@ -316,7 +316,7 @@ def _render_quick_list() -> str:
           <div style="width:6px;height:6px;border-radius:50%;background:{color};flex-shrink:0;"></div>
           <span style="font-size:.8rem;color:#bbb;flex:1;overflow:hidden;
                        text-overflow:ellipsis;white-space:nowrap;">{name}</span>
-          <span style="font-size:.67rem;color:#444;white-space:nowrap;">Load →</span>
+          <span style="font-size:.67rem;color:#6b6b88;white-space:nowrap;">Load →</span>
         </div>"""
     extra = (f'<div style="font-size:.68rem;color:#555;padding:4px 8px;margin-top:2px;">'
              f'+ {len(agents)-10} more in collection</div>') if len(agents) > 10 else ""
@@ -339,11 +339,28 @@ JS_HEAD = """
 <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <script>
 function agentForgeLoad(name, prompt) {
-    const el = document.querySelector('#agent_load_signal textarea');
-    if (!el) return;
-    const decoded = prompt.replace(/\\n/g, '\n');
-    el.value = JSON.stringify({ name: name, prompt: decoded });
-    el.dispatchEvent(new Event('input', { bubbles: true }));
+    const decoded = prompt.replace(/\n/g, "
+");
+    const signal  = JSON.stringify({ name: name, prompt: decoded });
+
+    let el = document.querySelector("#agent_load_signal textarea");
+    if (!el) el = document.querySelector("#agent_load_signal input");
+    if (!el) {
+        const wrap = document.getElementById("agent_load_signal");
+        if (wrap) el = wrap.querySelector("textarea, input");
+    }
+    if (!el) { console.warn("PromptHub: signal el not found"); return; }
+
+    // React/Svelte-compatible value setter
+    const proto = el.tagName === "TEXTAREA"
+        ? window.HTMLTextAreaElement.prototype
+        : window.HTMLInputElement.prototype;
+    const setter = Object.getOwnPropertyDescriptor(proto, "value");
+    if (setter && setter.set) setter.set.call(el, signal);
+    else el.value = signal;
+
+    el.dispatchEvent(new Event("input",  { bubbles: true }));
+    el.dispatchEvent(new Event("change", { bubbles: true }));
 }
 </script>
 """
@@ -544,6 +561,27 @@ button.secondary:hover {
 .chatbot-wrap { border-color: var(--border2) !important; }
 .message-bubble-border { border-color: var(--border2) !important; }
 
+/* Gradio 6: fix vertical letter stacking in assistant messages */
+[class*="message"] p,
+[class*="message"] span,
+[class*="message"] div,
+[class*="bot"] p,
+[class*="assistant"] p {
+    word-break: break-word !important;
+    white-space: pre-wrap !important;
+    overflow-wrap: break-word !important;
+    min-width: 0 !important;
+    width: auto !important;
+    writing-mode: horizontal-tb !important;
+    text-orientation: mixed !important;
+}
+/* Ensure message container has proper width */
+.message-wrap, [class*="message-wrap"], [class*="bubble"] {
+    max-width: 85% !important;
+    min-width: 60px !important;
+    width: auto !important;
+}
+
 /* ── Accordion ── */
 .accordion > .label-wrap {
     background: var(--card2) !important;
@@ -578,7 +616,7 @@ input[type="range"] { accent-color: var(--orange) !important; }
 
 /* ── Hidden helpers ── */
 #hidden_refresh_btn { display: none !important; }
-#agent_load_signal  { display: none !important; }
+#agent_load_signal  { display: none !important; position: absolute !important; pointer-events: none !important; }
 
 /* ── Misc ── */
 footer { display: none !important; }
@@ -667,7 +705,7 @@ with gr.Blocks(title="PromptHub ⚡") as demo:
                 value="",
                 elem_id="agent_load_signal",
                 label="",
-                visible=False,
+                visible=True,   # hidden via CSS — visible=False skips DOM render in Gr6
             )
 
         # ── RIGHT: Chat ───────────────────────────────────────────────────────