Update app.py

app.py

@@ -8,6 +8,7 @@ External access: hf sync hf://buckets/aidn/AnyAgent-storage ./local
 """
 
 import os
+import re
 import json
 import datetime
 import gradio as gr
@@ -17,17 +18,13 @@ from huggingface_hub import InferenceClient
 HF_TOKEN  = os.environ.get("HF_TOKEN", "")
 MODEL_ID  = os.environ.get("MODEL_ID", "meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8")
 
-# HF Bucket is auto-mounted at /data — just use it like a local filesystem
-BUCKET_DIR    = "/data"
-AGENTS_FILE   = os.path.join(BUCKET_DIR, "agents.jsonl")
-
-# Ensure /data exists (it always should when bucket is mounted, but be safe)
+BUCKET_DIR  = "/data"
+AGENTS_FILE = os.path.join(BUCKET_DIR, "agents.jsonl")
 os.makedirs(BUCKET_DIR, exist_ok=True)
 
-# ── Bucket Storage — simple file I/O ─────────────────────────────────────────
+# ── Storage ───────────────────────────────────────────────────────────────────
 
 def _fetch_all() -> list:
-    """Read all agents from the bucket-mounted JSONL file."""
     if not os.path.exists(AGENTS_FILE):
         return []
     entries = []
@@ -46,7 +43,6 @@ def _fetch_all() -> list:
 
 
 def _push_agent(agent: dict) -> str:
-    """Append one agent as a new JSONL line to the bucket file."""
     try:
         with open(AGENTS_FILE, "a", encoding="utf-8") as f:
             f.write(json.dumps(agent, ensure_ascii=False) + "\n")
@@ -61,7 +57,6 @@ def _collection_agents() -> list:
 # ── File Processing ───────────────────────────────────────────────────────────
 
 def files_to_prompt(files, current: str) -> str:
-    """Read uploaded files and append/merge their content into the prompt textarea."""
     if not files:
         return current
     parts = [current.strip()] if current.strip() else []
@@ -79,9 +74,6 @@ def files_to_prompt(files, current: str) -> str:
 # ── Chat ──────────────────────────────────────────────────────────────────────
 
 def _bot_stream(history: list, system_prompt: str, max_tokens: int):
-    """Generator: yields updated history list with streaming assistant response.
-    Gradio 6 default: messages format — dicts with role/content.
-    """
     if not history:
         return
 
@@ -111,21 +103,15 @@ def _bot_stream(history: list, system_prompt: str, max_tokens: int):
         history[-1]["content"] += f"\n\n⚠️ Error: {e}"
         yield history
 
-
-def _user_submit(msg: str, history: list):
-    """Add user message + empty assistant placeholder to history."""
-    history = history + [[msg, None]]
-    return "", history
-
 # ── Activate Agent ────────────────────────────────────────────────────────────
 
 def activate_agent(name: str, prompt: str, in_coll: bool):
-    name   = name.strip()   or "Unnamed Agent"
+    name   = name.strip() or "Unnamed Agent"
     prompt = prompt.strip()
 
     if not prompt:
         return (
-            "",          # system_prompt_state
+            "",
             _status_html("⚠️ Please add a system prompt before activating.", "warn"),
             _render_collection(),
             _render_quick_list(),
@@ -147,7 +133,7 @@ def activate_agent(name: str, prompt: str, in_coll: bool):
         else:
             status_msg += (
                 '  🌐 Saved to collection '
-                '<span style="color:#888;font-size:.75rem;">· /data/agents.jsonl</span>'
+                '<span style="color:#666;font-size:.75rem;">· /data/agents.jsonl</span>'
             )
 
     return (
@@ -158,15 +144,15 @@ def activate_agent(name: str, prompt: str, in_coll: bool):
         name,
     )
 
-# ── Load from collection signal (JS → Python) ─────────────────────────────────
+# ── Load from collection (JS → Python via hidden state) ──────────────────────
 
 def _load_signal(signal: str):
-    """Parse the JSON signal emitted by agentForgeLoad() in JS and activate the agent."""
-    if not signal or signal.strip() == "":
+    """Parse JSON signal from agentForgeLoad() JS call."""
+    if not signal or not signal.strip():
         return gr.update(), gr.update(), gr.update(), gr.update()
     try:
         data = json.loads(signal)
-        name = data.get("name", "")
+        name   = data.get("name",   "")
         prompt = data.get("prompt", "")
         return name, prompt, prompt, name
     except Exception:
@@ -176,13 +162,13 @@ def _load_signal(signal: str):
 
 def _status_html(msg: str, kind: str = "ok") -> str:
     colors = {
-        "ok":   ("rgba(74,222,128,.12)", "#4ade80", "#166534"),
-        "warn": ("rgba(251,191,36,.12)", "#fbbf24", "#92400e"),
-        "err":  ("rgba(248,113,113,.12)", "#f87171", "#7f1d1d"),
+        "ok":   ("rgba(74,222,128,.10)",   "#4ade80", "#a7f3d0"),
+        "warn": ("rgba(251,191,36,.10)",   "#fbbf24", "#fde68a"),
+        "err":  ("rgba(248,113,113,.10)",  "#f87171", "#fca5a5"),
     }
     bg, border, text = colors.get(kind, colors["ok"])
     return (
-        f'<div style="background:{bg};border:1px solid {border}33;border-left:3px solid {border};'
+        f'<div style="background:{bg};border:1px solid {border}44;border-left:3px solid {border};'
         f'border-radius:8px;padding:10px 14px;font-size:.83rem;color:{text};line-height:1.6;">'
         f'{msg}</div>'
     )
@@ -195,172 +181,175 @@ def _agent_color(i: int) -> str:
     return _PALETTE[i % len(_PALETTE)]
 
 
-def _render_collection() -> str:
-    agents = _collection_agents()
-    count  = len(agents)
+def _prompt_preview(prompt: str, max_len: int = 90) -> str:
+    """One-line preview: strip all newlines, truncate."""
+    clean = re.sub(r'\s+', ' ', prompt).strip()
+    return (clean[:max_len] + "…") if len(clean) > max_len else clean
+
+
+def _js_escape(s: str) -> str:
+    """Escape a string for safe embedding inside JS single-quoted string."""
+    return (s
+            .replace("\\", "\\\\")
+            .replace("'",  "\\'")
+            .replace("\n", "\\n")
+            .replace("\r", "")
+            .replace('"',  '\\"'))
 
+
+def _render_collection() -> str:
+    agents      = _collection_agents()
+    count       = len(agents)
     total_count = len(_fetch_all())
+
     bucket_badge = (
-        f'<span style="font-size:.7rem;color:#888;border:1px solid #2a2a3a;'
-        f'border-radius:99px;padding:2px 10px;margin-left:auto;font-family:JetBrains Mono,monospace;"'
-        f' title="hf sync hf://buckets/aidn/AnyAgent-storage ./local">'
-        f'🗄️ /data &nbsp;·&nbsp; {total_count} total</span>'
+        f'<span style="font-size:.68rem;color:#666;border:1px solid #2a2a3a;'
+        f'border-radius:99px;padding:2px 10px;font-family:\'JetBrains Mono\',monospace;'
+        f'white-space:nowrap;" title="hf sync hf://buckets/aidn/AnyAgent-storage ./local">'
+        f'🗄️ /data · {total_count}</span>'
+    )
+    refresh_btn = (
+        '<button onclick="document.getElementById(\'hidden_refresh_btn\').click()"'
+        ' style="background:transparent;border:1px solid #2a2a3a;color:#666;'
+        'font-size:.68rem;border-radius:99px;padding:2px 8px;cursor:pointer;transition:all .15s;"'
+        ' onmouseover="this.style.color=\'#f97316\';this.style.borderColor=\'#f97316\';"'
+        ' onmouseout="this.style.color=\'#666\';this.style.borderColor=\'#2a2a3a\';">🔄</button>'
     )
 
     if not agents:
-        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:#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>
-        </div>"""
+        return (
+            '<div style="text-align:center;padding:50px 20px;">'
+            '<div style="font-size:2.5rem;margin-bottom:12px;">⚗️</div>'
+            '<div style="font-weight:700;font-size:.9rem;color:#888;margin-bottom:6px;">The forge is cold.</div>'
+            '<div style="font-size:.8rem;color:#666;max-width:260px;margin:0 auto;line-height:1.6;">'
+            'Activate an agent and check <strong style="color:#f97316;">Add to Collection</strong>'
+            ' to be the first.</div></div>'
+        )
 
     cards = ""
     for i, agent in enumerate(reversed(agents)):
         name    = agent.get("name", "Unnamed Agent")
         prompt  = agent.get("system_prompt", "")
-        preview = (prompt[:100] + "…") if len(prompt) > 100 else prompt
         date    = agent.get("timestamp", "")[:10]
         color   = _agent_color(i)
         chars   = len(prompt)
+        preview = _prompt_preview(prompt, 80)
+
+        n_js = _js_escape(name)
+        p_js = _js_escape(prompt)
+
+        safe_preview = preview.replace("<", "&lt;").replace(">", "&gt;")
+
+        cards += (
+            f'<div style="background:#0c0c1a;border:1px solid #1e1e30;border-left:3px solid {color};'
+            f'border-radius:10px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:background .15s;"'
+            f' onmouseover="this.style.background=\'#12122a\';"'
+            f' onmouseout="this.style.background=\'#0c0c1a\';"'
+            f' onclick="agentForgeLoad(\'{n_js}\', \'{p_js}\')">'
+
+            f'<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">'
+            f'<span style="font-weight:700;color:#ddddf0;font-size:.86rem;flex:1;'
+            f'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{name}</span>'
+            f'<span style="font-size:.65rem;color:#555;white-space:nowrap;">{date}</span>'
+            f'</div>'
+
+            # Expandable preview using <details>
+            f'<details style="margin-bottom:8px;">'
+            f'<summary style="font-size:.72rem;color:#777;cursor:pointer;'
+            f'list-style:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
+            f'font-family:\'JetBrains Mono\',monospace;">{safe_preview}</summary>'
+            f'<div style="margin-top:8px;font-size:.72rem;color:#999;font-family:\'JetBrains Mono\',monospace;'
+            f'white-space:pre-wrap;line-height:1.5;max-height:180px;overflow-y:auto;'
+            f'background:#080812;padding:8px;border-radius:6px;">'
+            f'{prompt[:800].replace("<","&lt;").replace(">","&gt;")}{"…" if len(prompt)>800 else ""}'
+            f'</div></details>'
+
+            f'<div style="display:flex;align-items:center;gap:8px;">'
+            f'<span style="font-size:.65rem;color:{color};border:1px solid {color}44;'
+            f'background:{color}11;border-radius:99px;padding:1px 8px;font-weight:600;white-space:nowrap;">'
+            f'Load into Forge →</span>'
+            f'<span style="margin-left:auto;font-size:.65rem;color:#555;">{chars:,} chars</span>'
+            f'</div>'
+            f'</div>'
+        )
 
-        # Escape for JS
-        p_js = (prompt
-                .replace("\\", "\\\\")
-                .replace("'", "\\'")
-                .replace("\n", "\\n")
-                .replace("\r", ""))
-        n_js = name.replace("'", "\\'")
-
-        cards += f"""
-        <div style="background:#0f0f1c;border:1px solid #1e1e30;border-left:3px solid {color};
-                    border-radius:10px;padding:16px 18px;margin-bottom:10px;cursor:pointer;
-                    transition:all .18s;box-shadow:0 2px 8px rgba(0,0,0,.4);"
-             onmouseover="this.style.background='#14142a';this.style.boxShadow='0 4px 16px rgba(0,0,0,.5)';"
-             onmouseout="this.style.background='#0f0f1c';this.style.boxShadow='0 2px 8px rgba(0,0,0,.4)';"
-             onclick="agentForgeLoad('{n_js}', '{p_js}')">
-          <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
-            <div style="width:26px;height:26px;border-radius:7px;
-                        background:{color}1a;border:1px solid {color}44;
-                        display:flex;align-items:center;justify-content:center;font-size:.8rem;">
-              🤖
-            </div>
-            <span style="font-weight:700;color:#e0e0ff;font-size:.88rem;
-                         flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
-              {name}
-            </span>
-            <span style="font-size:.68rem;color:#6b6b88;white-space:nowrap;">{date}</span>
-          </div>
-          <div style="font-size:.74rem;color:#aaa;line-height:1.5;font-family:'JetBrains Mono',monospace;
-                      white-space:pre-wrap;max-height:42px;overflow:hidden;">
-            {preview.replace('<','&lt;').replace('>','&gt;')}
-          </div>
-          <div style="margin-top:10px;display:flex;align-items:center;gap:8px;">
-            <span style="font-size:.68rem;color:{color};border:1px solid {color}44;
-                         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:#6b6b88;">
-              {chars:,} chars
-            </span>
-          </div>
-        </div>"""
-
-    refresh_btn = """
-        <button onclick="document.getElementById('hidden_refresh_btn').click()"
-                style="background:transparent;border:1px solid #2a2a3a;color:#555;
-                       font-size:.68rem;border-radius:99px;padding:2px 8px;cursor:pointer;
-                       transition:all .15s;"
-                onmouseover="this.style.color='#f97316';this.style.borderColor='#f97316';"
-                onmouseout="this.style.color='#555';this.style.borderColor='#2a2a3a';">
-          🔄
-        </button>"""
-
-    return f"""
-    <div>
-      <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;">
-        <span style="font-weight:700;color:#f97316;font-size:.75rem;
-                     text-transform:uppercase;letter-spacing:.6px;">
-          ⚡ {count} Agent{'s' if count != 1 else ''} Forged
-        </span>
-        {bucket_badge}
-        {refresh_btn}
-      </div>
-      {cards}
-    </div>"""
+    return (
+        f'<div>'
+        f'<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;">'
+        f'<span style="font-weight:700;color:#f97316;font-size:.72rem;'
+        f'text-transform:uppercase;letter-spacing:.6px;">⚡ {count} Agent{"s" if count!=1 else ""} Forged</span>'
+        f'<div style="margin-left:auto;display:flex;gap:6px;align-items:center;">'
+        f'{bucket_badge}{refresh_btn}'
+        f'</div></div>'
+        f'{cards}'
+        f'</div>'
+    )
 
 
 def _render_quick_list() -> str:
     agents = _collection_agents()
     if not agents:
-        return ('<div style="color:#444;font-size:.78rem;padding:6px 2px;">'
-                'No agents yet — forge the first one! ⚡</div>')
+        return '<div style="color:#555;font-size:.78rem;padding:6px 2px;">No agents yet — forge the first one! ⚡</div>'
     items = ""
     for i, agent in enumerate(reversed(agents[:10])):
         name   = agent.get("name", "Unnamed")
         prompt = agent.get("system_prompt", "")
         color  = _agent_color(i)
-        p_js   = (prompt
-                  .replace("\\", "\\\\")
-                  .replace("'", "\\'")
-                  .replace("\n", "\\n")
-                  .replace("\r", ""))
-        n_js   = name.replace("'", "\\'")
-        items += f"""
-        <div style="display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;
-                    cursor:pointer;transition:background .15s;"
-             onmouseover="this.style.background='#14142a';"
-             onmouseout="this.style.background='transparent';"
-             onclick="agentForgeLoad('{n_js}', '{p_js}')">
-          <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:#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 ""
-    return items + extra
+        n_js   = _js_escape(name)
+        p_js   = _js_escape(prompt)
+        items += (
+            f'<div style="display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;'
+            f'cursor:pointer;transition:background .15s;"'
+            f' onmouseover="this.style.background=\'#14142a\';"'
+            f' onmouseout="this.style.background=\'transparent\';"'
+            f' onclick="agentForgeLoad(\'{n_js}\', \'{p_js}\')">'
+            f'<div style="width:5px;height:5px;border-radius:50%;background:{color};flex-shrink:0;"></div>'
+            f'<span style="font-size:.8rem;color:#ccc;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{name}</span>'
+            f'<span style="font-size:.65rem;color:#555;white-space:nowrap;">Load →</span>'
+            f'</div>'
+        )
+    if len(agents) > 10:
+        items += f'<div style="font-size:.67rem;color:#555;padding:4px 6px;">+ {len(agents)-10} more</div>'
+    return items
 
 
 def _render_active_badge(name: str) -> str:
     if not name or name == "No agent active":
-        return ('<div class="agent-badge inactive">'
-                '<div class="dot-inactive"></div>No agent active</div>')
+        return '<div class="agent-badge inactive"><div class="dot-inactive"></div>No agent active</div>'
     safe = name[:40] + ("…" if len(name) > 40 else "")
-    return (f'<div class="agent-badge active">'
-            f'<div class="dot-active"></div>Active: <strong>{safe}</strong></div>')
+    return f'<div class="agent-badge active"><div class="dot-active"></div>Active: <strong>{safe}</strong></div>'
 
 # ── JS ────────────────────────────────────────────────────────────────────────
+# NOTE: head= is passed to demo.launch() in Gradio 6
 
-JS_HEAD = """
+JS_HEAD = r"""
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <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 decoded = prompt.replace(/\n/g, "
-");
-    const signal  = JSON.stringify({ name: name, prompt: decoded });
+    // Decode escaped newlines back to real newlines
+    var decoded = prompt.split("\\n").join("\n");
+    var signal  = JSON.stringify({ name: name, prompt: decoded });
 
-    let el = document.querySelector("#agent_load_signal textarea");
-    if (!el) el = document.querySelector("#agent_load_signal input");
+    // Find the hidden signal textarea — try multiple selectors
+    var el = document.querySelector("#agent_load_signal textarea");
+    if (!el) el = document.querySelector("#agent_load_signal input[type='text']");
     if (!el) {
-        const wrap = document.getElementById("agent_load_signal");
+        var 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;
-
+    if (!el) { console.warn("PromptHub: signal element not found"); return; }
+
+    // Use native setter so Svelte/React reactivity picks it up
+    var nativeProto = Object.getPrototypeOf(el);
+    var descriptor  = Object.getOwnPropertyDescriptor(nativeProto, "value")
+                   || Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+    if (descriptor && descriptor.set) {
+        descriptor.set.call(el, signal);
+    } else {
+        el.value = signal;
+    }
     el.dispatchEvent(new Event("input",  { bubbles: true }));
     el.dispatchEvent(new Event("change", { bubbles: true }));
 }
@@ -370,7 +359,6 @@ function agentForgeLoad(name, prompt) {
 # ── CSS ───────────────────────────────────────────────────────────────────────
 
 CSS = """
-/* ── Tokens ── */
 :root {
     --bg:         #08080f;
     --card:       #0d0d1a;
@@ -380,16 +368,14 @@ CSS = """
     --orange:     #f97316;
     --orange-dim: rgba(249,115,22,.15);
     --orange-glow:rgba(249,115,22,.25);
-    --violet:     #a78bfa;
     --text:       #e0e0f0;
-    --muted:      #555570;
+    --muted:      #44445a;
     --muted2:     #888;
     --green:      #4ade80;
     --font-head:  'Chakra Petch', sans-serif;
     --font-mono:  'JetBrains Mono', monospace;
 }
 
-/* ── Base ── */
 body, .gradio-container {
     background: var(--bg) !important;
     font-family: var(--font-head) !important;
@@ -402,8 +388,8 @@ body, .gradio-container {
     background: linear-gradient(135deg, #0d0d1a 0%, #130a20 50%, #0a1020 100%);
     border: 1px solid var(--border2);
     border-radius: 14px;
-    padding: 26px 30px;
-    margin-bottom: 18px;
+    padding: 24px 28px;
+    margin-bottom: 16px;
     position: relative;
     overflow: hidden;
 }
@@ -418,16 +404,14 @@ body, .gradio-container {
 }
 .forge-header h1 {
     font-family: var(--font-head) !important;
-    font-size: 2rem !important;
+    font-size: 1.9rem !important;
     font-weight: 800 !important;
     color: var(--text) !important;
-    margin: 0 0 5px 0 !important;
-    letter-spacing: -0.3px !important;
+    margin: 0 0 4px 0 !important;
     position: relative;
 }
-.forge-header h1 em { font-style: normal; color: var(--orange); }
 .forge-header p {
-    font-size: .83rem !important;
+    font-size: .8rem !important;
     color: var(--muted2) !important;
     margin: 0 !important;
     position: relative;
@@ -444,45 +428,14 @@ body, .gradio-container {
     font-size: .78rem;
     font-weight: 700;
     font-family: var(--font-head);
-    letter-spacing: .2px;
     border: 1px solid;
     margin-bottom: 8px;
 }
-.agent-badge.active {
-    background: rgba(249,115,22,.08);
-    border-color: rgba(249,115,22,.3);
-    color: var(--orange);
-}
-.agent-badge.inactive {
-    background: rgba(85,85,112,.08);
-    border-color: var(--border2);
-    color: var(--muted2);
-}
-.dot-active {
-    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
-    box-shadow: 0 0 7px var(--green);
-    animation: pulse-dot 2s ease-in-out infinite;
-}
-.dot-inactive { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
-@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }
-
-/* ── Section cards ── */
-.section-card {
-    background: var(--card2);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 16px 18px;
-    margin-bottom: 10px;
-}
-.section-title {
-    font-size: .68rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: .7px;
-    color: var(--orange);
-    margin-bottom: 12px;
-    font-family: var(--font-head);
-}
+.agent-badge.active   { background: rgba(249,115,22,.08); border-color: rgba(249,115,22,.3); color: var(--orange); }
+.agent-badge.inactive { background: rgba(85,85,112,.06);  border-color: var(--border2);      color: var(--muted2); }
+.dot-active   { width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:pulse-dot 2s ease-in-out infinite; }
+.dot-inactive { width:7px;height:7px;border-radius:50%;background:var(--muted); }
+@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
 
 /* ── Labels ── */
 label > span {
@@ -502,6 +455,7 @@ textarea, input[type="text"] {
     border-radius: 8px !important;
     font-size: .87rem !important;
     font-family: var(--font-mono) !important;
+    writing-mode: horizontal-tb !important;
 }
 textarea:focus, input[type="text"]:focus {
     border-color: var(--orange) !important;
@@ -513,6 +467,35 @@ textarea::placeholder, input[type="text"]::placeholder {
     font-family: var(--font-mono) !important;
 }
 
+/* ── Chatbot — fix vertical letter stacking ── */
+/* Force horizontal writing mode on ALL chatbot children */
+.chatbot,
+.chatbot *,
+[class*="chatbot"] *,
+[data-testid="bot"] *,
+[data-testid="user"] * {
+    writing-mode: horizontal-tb !important;
+    text-orientation: mixed !important;
+}
+/* Message bubble width */
+[data-testid="bot"],
+[data-testid="user"] {
+    max-width: 85% !important;
+    min-width: 80px !important;
+    width: fit-content !important;
+}
+/* Ensure text wraps properly inside bubbles */
+[data-testid="bot"] p,
+[data-testid="user"] p,
+[data-testid="bot"] span,
+[data-testid="user"] span {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+    display: block !important;
+    width: 100% !important;
+}
+
 /* ── File drop ── */
 .file-upload-container, .upload-box {
     background: var(--card) !important;
@@ -536,15 +519,10 @@ button.primary {
     font-weight: 700 !important;
     font-family: var(--font-head) !important;
     color: #fff !important;
-    padding: 10px 28px !important;
     box-shadow: 0 4px 16px var(--orange-glow) !important;
     transition: all .15s !important;
-    letter-spacing: .3px !important;
-}
-button.primary:hover {
-    box-shadow: 0 6px 22px rgba(249,115,22,.45) !important;
-    transform: translateY(-1px) !important;
 }
+button.primary:hover { box-shadow: 0 6px 22px rgba(249,115,22,.45) !important; }
 button.secondary {
     background: transparent !important;
     border: 1px solid var(--border2) !important;
@@ -554,25 +532,7 @@ button.secondary {
     font-weight: 600 !important;
     transition: all .15s !important;
 }
-button.secondary:hover {
-    border-color: var(--orange) !important;
-    color: var(--orange) !important;
-}
-
-/* ── Chatbot ── */
-.chatbot-wrap { border-color: var(--border2) !important; }
-.message-bubble-border { border-color: var(--border2) !important; }
-
-/* Gradio 6: ensure chat messages use full available width */
-.chatbot .message-wrap {
-    max-width: 85% !important;
-    min-width: 120px !important;
-}
-.chatbot .message-wrap p {
-    white-space: pre-wrap !important;
-    word-break: break-word !important;
-    overflow-wrap: break-word !important;
-}
+button.secondary:hover { border-color: var(--orange) !important; color: var(--orange) !important; }
 
 /* ── Accordion ── */
 .accordion > .label-wrap {
@@ -584,16 +544,12 @@ button.secondary:hover {
     font-weight: 700 !important;
 }
 .accordion > .label-wrap:hover { background: var(--card) !important; }
-.accordion .icon { color: var(--orange) !important; }
-
-/* ── Sliders ── */
-input[type="range"] { accent-color: var(--orange) !important; }
 
 /* ── Tabs ── */
 .tab-nav button {
     font-family: var(--font-head) !important;
     font-weight: 700 !important;
-    font-size: .78rem !important;
+    font-size: .75rem !important;
     text-transform: uppercase !important;
     letter-spacing: .4px !important;
     color: var(--muted2) !important;
@@ -601,29 +557,30 @@ input[type="range"] { accent-color: var(--orange) !important; }
     border-bottom: 2px solid transparent !important;
     transition: all .15s !important;
 }
-.tab-nav button.selected {
-    color: var(--orange) !important;
-    border-bottom-color: var(--orange) !important;
-}
+.tab-nav button.selected { color: var(--orange) !important; border-bottom-color: var(--orange) !important; }
 
 /* ── Hidden helpers ── */
 #hidden_refresh_btn { display: none !important; }
-#agent_load_signal  { display: none !important; position: absolute !important; pointer-events: none !important; }
+/* Signal box: in DOM but invisible */
+#agent_load_signal {
+    position: absolute !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    height: 0 !important;
+    overflow: hidden !important;
+    width: 1px !important;
+}
 
-/* ── Misc ── */
 footer { display: none !important; }
-.no-border { border: none !important; box-shadow: none !important; }
 """
 
 # ── Build UI ──────────────────────────────────────────────────────────────────
 
 with gr.Blocks(title="PromptHub ⚡") as demo:
 
-    # ── Global state ──────────────────────────────────────────────────────────
     system_prompt_state = gr.State("")
     active_name_state   = gr.State("No agent active")
 
-    # ── Header ────────────────────────────────────────────────────────────────
     gr.HTML("""
     <div class="forge-header">
       <h1>Prompt<em style="font-style:normal;color:#f97316;">Hub</em> ⚡</h1>
@@ -631,101 +588,88 @@ with gr.Blocks(title="PromptHub ⚡") as demo:
     </div>
     """)
 
-    # ── Main layout ────────────��──────────────────────────────────────────────
     with gr.Row(equal_height=False):
 
-        # ── LEFT: Forge panel ─────────────────────────────────────────────────
-        with gr.Column(scale=4, min_width=300):
+        # ── LEFT ──────────────────────────────────────────────────────────────
+        with gr.Column(scale=4, min_width=280):
 
-            # File upload
-            gr.HTML('<div class="section-title">📁 Drop Files</div>')
+            gr.HTML('<div style="font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#f97316;margin-bottom:8px;">📁 Drop Files</div>')
             file_upload = gr.File(
                 label="",
                 file_count="multiple",
                 file_types=[".md", ".txt", ".skill", ".yaml", ".yml",
                             ".json", ".py", ".ts", ".js", ".toml"],
-                height=120,
+                height=110,
             )
 
-            # System prompt textarea
             prompt_box = gr.Textbox(
                 label="System Prompt",
                 placeholder="Paste or type your system prompt…\nOr drop files above ↑\n\nTip: multiple files are auto-concatenated.",
-                lines=10,
-                max_lines=24,
+                lines=9,
+                max_lines=22,
             )
 
-            # Agent name
             agent_name_box = gr.Textbox(
                 label="Agent Name",
                 placeholder="e.g. Code Reviewer · Sales Coach · SQL Expert",
                 max_lines=1,
             )
 
-            # Collection checkbox
             in_coll_check = gr.Checkbox(
                 label="🌐 Add to public Agent Collection",
                 value=False,
-                info="Saves the raw system prompt string to the shared HF Dataset.",
+                info="Saves the raw system prompt string to the shared HF Bucket.",
             )
 
-            # Activate button
             activate_btn = gr.Button("⚡ Activate Agent", variant="primary", size="lg")
+            status_out   = gr.HTML("")
 
-            # Status feedback
-            status_out = gr.HTML("")
-
-            # Max tokens (hidden, accessible via accordion)
             with gr.Accordion("⚙️ Model Settings", open=False):
                 max_tokens_slider = gr.Slider(
                     minimum=256, maximum=8192, value=1024, step=128,
                     label="Max output tokens",
                 )
-                gr.Markdown(
-                    f"*Model: `{MODEL_ID}`*",
-                    elem_classes=["no-border"],
-                )
+                gr.Markdown(f"*Model: `{MODEL_ID}`*")
 
-            gr.HTML("<div style='height:6px;'></div>")
+            gr.HTML("<div style='height:4px;'></div>")
 
-            # Quick-load from collection
             with gr.Accordion("📚 Quick Load from Collection", open=True):
                 quick_list_html = gr.HTML(_render_quick_list())
 
-            # Hidden: JS → Python signal for loading an agent
+            # Signal textbox: visible=True but hidden via CSS (display:none breaks Gr6 reactivity)
             agent_load_signal = gr.Textbox(
                 value="",
                 elem_id="agent_load_signal",
                 label="",
-                visible=True,   # hidden via CSS — visible=False skips DOM render in Gr6
+                visible=True,
             )
 
-        # ── RIGHT: Chat ───────────────────────────────────────────────────────
+        # ── RIGHT ─────────────────────────────────────────────────────────────
         with gr.Column(scale=6):
 
             active_badge_html = gr.HTML(_render_active_badge("No agent active"))
 
             chatbot = gr.Chatbot(
-                height=430,
+                height=440,
                 show_label=False,
             )
 
+            # Chat input row — no container=False to avoid layout collapse on mobile
             with gr.Row():
-                msg_box = gr.Textbox(
+                msg_box  = gr.Textbox(
                     placeholder="Message your agent…",
                     show_label=False,
-                    container=False,
-                    scale=8,
+                    scale=7,
                     max_lines=4,
                 )
-                send_btn  = gr.Button("Send",  variant="primary",   scale=1, min_width=72)
-                clear_btn = gr.Button("Clear", variant="secondary", scale=1, min_width=72)
+                send_btn  = gr.Button("Send",  variant="primary",   scale=2, min_width=80)
+                clear_btn = gr.Button("Clear", variant="secondary", scale=1, min_width=70)
 
-    # ── Full collection tab ────────────────────────────────────────────────────
-    gr.HTML("<div style='height:10px;'></div>")
+    # ── Tabs ──────────────────────────────────────────────────────────────────
+    gr.HTML("<div style='height:8px;'></div>")
     with gr.Tabs():
         with gr.Tab("🌐 Agent Collection"):
-            collection_out = gr.HTML(_render_collection())
+            collection_out     = gr.HTML(_render_collection())
             hidden_refresh_btn = gr.Button("refresh", elem_id="hidden_refresh_btn", visible=False)
 
         with gr.Tab("ℹ️ About"):
@@ -734,9 +678,8 @@ with gr.Blocks(title="PromptHub ⚡") as demo:
 
 **Forge any AI agent from plain text files.**
 
-Drop `.md`, `.skill`, `.txt`, `.yaml`, or any text file — PromptHub reads them, 
-concatenates their content, and uses it as the system prompt for a live chat session 
-with a large language model.
+Drop `.md`, `.skill`, `.txt`, `.yaml`, or any text file — PromptHub reads them,
+concatenates their content, and uses it as the system prompt for a live chat session.
 
 ### How it works
 1. **Drop files** or paste text directly into the *System Prompt* box
@@ -744,46 +687,33 @@ with a large language model.
 3. Optionally **add it to the Collection** so others can load and use it
 4. Hit **⚡ Activate Agent** — then chat!
 
-### The Collection & Dataset
-Every agent added to the Collection is stored as a raw JSON line in a public 
-Hugging Face Dataset. The schema is intentionally minimal:
+### Storage
+All agents are stored in `/data/agents.jsonl` via HF Bucket (auto-mounted).
 
-```json
-{
-  "name": "My Agent",
-  "system_prompt": "...",
-  "in_collection": true,
-  "timestamp": "2025-01-01T00:00:00Z"
-}
+```bash
+# Download the bucket
+hf sync hf://buckets/aidn/AnyAgent-storage ./local
 ```
 
-This lets you fine-tune models, run evals, or build RAG pipelines directly 
-from community-forged prompts.
-
-### Environment secrets
+### Secrets
 | Secret | Purpose |
 |--------|---------|
-| `HF_TOKEN` | Required for inference + dataset writes |
-| `DATASET_REPO` | Your HF dataset repo, e.g. `yourname/agent-forge` |
-| `MODEL_ID` | Optional override (default: Llama 4 Maverick) |
+| `HF_TOKEN` | Required for inference |
+| `MODEL_ID` | Optional model override |
             """)
 
-    # ── Config warnings ───────────────────────────────────────────────────────
     if not HF_TOKEN:
         gr.HTML(_status_html(
-            "No <code>HF_TOKEN</code> found — add it in <em>Settings → Secrets</em>. "
-            "Inference and dataset writes will fail.", "warn"))
+            "No <code>HF_TOKEN</code> — add it in <em>Settings → Secrets</em>.", "warn"))
 
-    # ── Event wiring ──────────────────────────────────────────────────────────
+    # ── Events ────────────────────────────────────────────────────────────────
 
-    # 1. Files → append to prompt textarea
     file_upload.change(
         fn=files_to_prompt,
         inputs=[file_upload, prompt_box],
         outputs=[prompt_box],
     )
 
-    # 2. Activate agent
     activate_btn.click(
         fn=activate_agent,
         inputs=[agent_name_box, prompt_box, in_coll_check],
@@ -795,7 +725,6 @@ from community-forged prompts.
         outputs=[active_badge_html],
     )
 
-    # 3. Chat: user message submit
     def _submit(msg, hist):
         if not msg.strip():
             return gr.update(), hist
@@ -824,10 +753,8 @@ from community-forged prompts.
         outputs=[chatbot],
     )
 
-    # 4. Clear chat
     clear_btn.click(fn=lambda: [], outputs=[chatbot])
 
-    # 5. Load agent from JS signal (collection card click) → also activates
     agent_load_signal.change(
         fn=_load_signal,
         inputs=[agent_load_signal],
@@ -838,7 +765,6 @@ from community-forged prompts.
         outputs=[active_badge_html],
     )
 
-    # 6. Refresh collection (triggered by hidden button from JS)
     hidden_refresh_btn.click(
         fn=lambda: (_render_collection(), _render_quick_list()),
         outputs=[collection_out, quick_list_html],