Refresh Streamlit UI styling

app.py

@@ -95,7 +95,10 @@ if not IMPORTS_SUCCESSFUL:
 # Debug: Show that app is loading
 print("Rendering initial content...", file=sys.stderr)
 sys.stderr.flush()  # Force flush to ensure logs appear
-st.write("🚀 App is loading...")
+st.markdown(
+    '<div class="pill on">🚀 Playground Ready</div>',
+    unsafe_allow_html=True,
+)
 print("✓ Initial content rendered", file=sys.stderr)
 sys.stderr.flush()
 
@@ -171,6 +174,80 @@ else:
             st.error(f"Failed to delete profile for '{persona_name}'.")
     st.divider()
 
+# ──────────────────────────────────────────────────────────────
+# Hero / Context panels
+# ──────────────────────────────────────────────────────────────
+persona_badge = persona_name if persona_name == selected_persona else f"{persona_name} • custom"
+
+hero_html = f"""
+<div class="hero-card">
+  <div>
+    <p class="eyebrow">Live Persona Playground</p>
+    <h2>MemMachine Conversational Memory</h2>
+    <p>Use rapid persona rewrites, compare against control personas, and stream
+    LLM output from your preferred provider without leaving this panel.</p>
+  </div>
+  <div class="status-chip">
+    <span>Active model</span>
+    <strong>{model_id}</strong>
+    <small>{provider.title()}</small>
+  </div>
+</div>
+"""
+st.markdown(hero_html, unsafe_allow_html=True)
+
+stat_cols = st.columns(3)
+stat_cols[0].markdown(
+    f"""
+    <div class="stat-card">
+        <span>Persona</span>
+        <h4>{persona_badge}</h4>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
+stat_cols[1].markdown(
+    f"""
+    <div class="stat-card">
+        <span>Comparison mode</span>
+        <h4>{"Control vs Persona" if compare_personas else "Single persona"}</h4>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
+stat_cols[2].markdown(
+    f"""
+    <div class="stat-card">
+        <span>Rewrite</span>
+        <h4>{"Enabled" if not skip_rewrite else "Skipped"}</h4>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
+
+st.markdown(
+    f"""
+    <div class="pill-group">
+        <span class="pill {'on' if not skip_rewrite else ''}">Rewrite</span>
+        <span class="pill {'on' if compare_personas else ''}">Compare personas</span>
+        <span class="pill {'on' if show_rationale else ''}">Persona rationale</span>
+        <span class="pill on">Backend: {os.getenv("MEMORY_SERVER_URL", "default")}</span>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
+
+with st.expander("How to use this playground", expanded=False):
+    st.markdown(
+        """
+        1. Pick a model + persona in the sidebar.  
+        2. Toggle rewrite / comparison to control how memories are applied.  
+        3. Type a message below — MemMachine will rewrite user input if enabled, call the model, and stream the response.  
+        4. Use *Clear chat* or *Delete profile* to reset memories.
+        """
+    )
+
+# ──────────────────────────────────────────────────────────────
 # ──────────────────────────────────────────────────────────────
 # Session state
 # ──────────────────────────────────────────────────────────────

styles.css

@@ -1,26 +1,165 @@
-/* -- Sidebar width & padding -- */
-section[data-testid="stSidebar"]          { width: 230px !important; }
-section[data-testid="stSidebarContent"]   { width: 230px !important;
-                                            padding: 0.75rem; }
+/* Layout + Theme -------------------------------------------------------- */
+.stApp {
+  background: radial-gradient(circle at top, #1e2433 0%, #0f131d 55%, #0c0f17 100%);
+  color: #f7f8fc;
+  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
 
-/* -- Title size -- */
-h1 { font-size: 2.1rem !important; margin-bottom: 1rem; }
+/* Sidebar --------------------------------------------------------------- */
+section[data-testid="stSidebar"] {
+  width: 240px !important;
+}
 
-/* -- Ensure long links wrap inside comparison columns -- */
-div.answer { white-space: pre-wrap; overflow-wrap: anywhere; }
+section[data-testid="stSidebarContent"] {
+  width: 240px !important;
+  padding: 1rem;
+  background: rgba(10, 12, 20, 0.85);
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+section[data-testid="stSidebar"] h4,
+section[data-testid="stSidebar"] label,
+section[data-testid="stSidebar"] p,
+section[data-testid="stSidebar"] span {
+  color: #f5f6fa !important;
+}
+
+.stButton button {
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.04);
+  color: #f7f8fc;
+}
+
+.stButton button:hover {
+  border-color: rgba(88, 130, 255, 0.9);
+  background: rgba(88, 130, 255, 0.15);
+}
+
+/* Headlines ------------------------------------------------------------- */
+h1 {
+  font-size: 2.4rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 0.3rem;
+}
+
+/* Hero + Stat cards ----------------------------------------------------- */
+.hero-card {
+  display: flex;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  margin: 0.5rem 0 1rem;
+  border-radius: 18px;
+  background: linear-gradient(130deg, rgba(73, 99, 255, 0.15), rgba(9, 10, 18, 0.85));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.hero-card h2 {
+  margin: 0 0 0.4rem;
+  font-size: 1.6rem;
+}
+
+.hero-card p {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.status-chip {
+  align-self: center;
+  text-align: right;
+  padding: 0.8rem 1rem;
+  border-radius: 16px;
+  background: rgba(12, 18, 35, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  min-width: 170px;
+}
+
+.status-chip span {
+  display: block;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.status-chip strong {
+  font-size: 1.1rem;
+}
+
+.status-chip small {
+  display: block;
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.stat-card {
+  border-radius: 16px;
+  padding: 1rem 1.25rem;
+  background: rgba(15, 22, 38, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  height: 100%;
+}
+
+.stat-card span {
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.stat-card h4 {
+  margin: 0.35rem 0 0;
+  font-size: 1.1rem;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border-radius: 999px;
+  padding: 0.2rem 0.85rem;
+  font-size: 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.pill.on {
+  border-color: rgba(87, 214, 141, 0.6);
+  background: rgba(87, 214, 141, 0.12);
+  color: #8ef2c9;
+}
+
+.pill-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0.75rem 0 1.25rem;
+}
+
+/* Chat history columns -------------------------------------------------- */
+div.answer {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
 
-/* Tighten spacing between comparison columns */
 div[data-testid="column"] {
-    padding-left: 0.25rem !important;
-    padding-right: 0.25rem !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    flex-grow: 1;
-  }
-  
-  /* Align vertical divider better */
-  .vertical-divider {
-    height: 100%;
-    border-left: 1px solid #ccc;
-    margin: 0 0.4rem;
-  }
+  padding-left: 0.25rem !important;
+  padding-right: 0.25rem !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  flex-grow: 1;
+}
+
+.vertical-divider {
+  height: 100%;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  margin: 0 0.4rem;
+}