add changes

.claude/settings.json

@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git push *)",
+      "Bash(git reset *)",
+      "Bash(git commit -m ' *)",
+      "Bash(ls /Users/sekponakokou/Documents/folder/data-analyst-mcp/*.css)",
+      "Bash(./venv/bin/pip show *)",
+      "Bash(git add *)",
+      "Bash(git commit -m 'fix: lock layout to viewport height in HF Spaces *)"
+    ]
+  }
+}

style.css

@@ -1,198 +1,494 @@
-html, body {
-    height: 100vh !important; max-height: 100vh !important;
-    margin: 0 !important; padding: 0 !important; overflow: hidden !important;
-}
-/* Cible tous les wrappers intermédiaires Gradio */
-.gradio-container,
-.gradio-container > *,
-.gradio-container > .main,
-.gradio-container > .main > .wrap,
-.gradio-container > .main > .wrap > *,
-.app, .app > *, svelte-scoped, #svelte {
-    height: 100vh !important; max-height: 100vh !important;
-    overflow: hidden !important; margin: 0 !important; padding: 0 !important;
-}
-.gradio-container { max-width: 100% !important; }
-.gradio-container > .main > .wrap { gap: 0 !important; }
-footer { display: none !important; }
-
-/* ── sidebar  style ── */
+:root {
+    --bg: #0f1117;
+    --panel: #151926;
+    --panel-2: #1c2130;
+    --line: #2a3144;
+    --text: #e8edf8;
+    --muted: #9ca6bd;
+    --accent: #fbbf24;
+    --accent-strong: #f59e0b;
+}
+
+html,
+body {
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    height: 100% !important;
+    background: var(--bg);
+    color: var(--text);
+}
+
+footer {
+    display: none !important;
+}
+
 #sidebar {
-    position: fixed; left:0; top:0; bottom:0; width:260px;
-    background:#171717; display:flex; flex-direction:column;
-    padding:8px; box-sizing:border-box; z-index:200;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 272px;
+    background: linear-gradient(180deg, #101420 0%, #0f1117 100%);
+    border-right: 1px solid var(--line);
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    box-sizing: border-box;
+    z-index: 200;
 }
+
 .sb-top {
-    display:flex; align-items:center; justify-content:space-between;
-    padding:6px 6px 4px 6px; margin-bottom:4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
 }
-.sb-logo { color:#fff; font-size:0.95rem; font-weight:600; display:flex; align-items:center; gap:8px; }
-.sb-logo svg { width:18px; height:18px; fill:#fff; flex-shrink:0; }
+
+.sb-logo {
+    font-size: 0.9rem;
+    font-weight: 650;
+    color: #dce4f7;
+}
+
+.sb-icon-btn,
+.sb-new-chat,
+.sb-item,
+.sb-bottom-item {
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--muted);
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
 .sb-icon-btn {
-    width:36px; height:36px; border-radius:8px; background:transparent;
-    border:none; color:#8e8ea0; cursor:pointer;
-    display:flex; align-items:center; justify-content:center; font-size:1rem;
+    width: 34px;
+    height: 34px;
+    border-radius: 9px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
-.sb-icon-btn:hover { background:#2a2a2a; color:#fff; }
+
+.sb-icon-btn:hover {
+    color: var(--text);
+    background: var(--panel-2);
+    border-color: var(--line);
+}
+
 .sb-new-chat {
-    display:flex; align-items:center; gap:10px;
-    padding:10px 10px; border-radius:10px; cursor:pointer;
-    color:#ececf1; font-size:0.88rem; margin-bottom:8px;
-    border:none; background:transparent; width:100%; text-align:left;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px;
+    border-radius: 10px;
+    font-size: 0.85rem;
+    margin-bottom: 8px;
+    text-align: left;
+}
+
+.sb-new-chat svg {
+    width: 16px;
+    height: 16px;
+}
+
+.sb-new-chat:hover {
+    color: var(--text);
+    background: var(--panel-2);
+    border-color: var(--line);
 }
-.sb-new-chat:hover { background:#2a2a2a; }
-.sb-new-chat svg { width:16px; height:16px; stroke:#ececf1; flex-shrink:0; }
+
 .sb-section-label {
-    color:#8e8ea0; font-size:0.7rem; font-weight:600;
-    letter-spacing:.06em; padding:8px 10px 4px 10px;
+    color: #7f8aa5;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin: 8px 8px 4px;
 }
+
 .sb-item {
-    padding:8px 10px; border-radius:8px; cursor:pointer;
-    color:#ececf1; font-size:0.83rem; white-space:nowrap;
-    overflow:hidden; text-overflow:ellipsis;
-}
-.sb-item:hover { background:#2a2a2a; }
-.sb-spacer { flex:1; }
-.sb-divider { border:none; border-top:1px solid #2a2a2a; margin:6px 0; }
-.sb-bottom { padding:4px 0; }
-.sb-user {
-    display:flex; align-items:center; gap:10px;
-    padding:10px; border-radius:10px; cursor:pointer;
-}
-.sb-user:hover { background:#2a2a2a; }
-.sb-avatar {
-    width:32px; height:32px; border-radius:50%;
-    background:#FF9D00; display:flex; align-items:center;
-    justify-content:center; color:#fff; font-size:0.8rem; font-weight:700; flex-shrink:0;
-}
-.sb-username { color:#ececf1; font-size:0.85rem; font-weight:500; }
-.sb-dots { margin-left:auto; color:#8e8ea0; font-size:1rem; }
-
-/* ── main area ── */
+    width: 100%;
+    text-align: left;
+    padding: 9px 10px;
+    border-radius: 9px;
+    font-size: 0.83rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sb-item:hover,
+.sb-item.is-active {
+    color: var(--text);
+    background: var(--panel-2);
+    border-color: var(--line);
+}
+
+.sb-spacer {
+    flex: 1;
+}
+
+.sb-bottom {
+    display: grid;
+    gap: 6px;
+}
+
+.sb-bottom-item {
+    width: 100%;
+    text-align: left;
+    padding: 9px 10px;
+    border-radius: 9px;
+    font-size: 0.8rem;
+}
+
+.sb-bottom-item:hover {
+    color: var(--text);
+    background: var(--panel-2);
+    border-color: var(--line);
+}
+
 #main-col {
-    display:flex; flex-direction:column;
-    height:100vh; max-height:100vh; overflow:hidden;
-    background:#212121 !important; padding:0 !important;
-    margin-left:260px; width:calc(100vw - 260px) !important;
+    position: fixed !important;
+    top: 0;
+    bottom: 0;
+    left: 272px;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    background: radial-gradient(circle at 20% 0%, #151a2b 0%, #0f1117 45%);
+    overflow: hidden;
+    padding: 0 !important;
+    margin: 0 !important;
 }
 
-/* ── welcome screen ── */
 #welcome {
-    flex:1; min-height:0; display:flex; flex-direction:column;
-    align-items:center; justify-content:center; gap:20px;
-    padding-bottom:120px; overflow:hidden; background:#212121;
-}
-#welcome-logo { font-size:3rem; }
-#welcome-title { font-size:1.5rem; font-weight:700; color:#fff; margin:0; }
-#welcome-sub { font-size:0.88rem; color:#666; margin:0; }
-#pills-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:620px; }
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 0 24px 150px;
+}
+
+#welcome-kicker {
+    margin: 0;
+    color: #f6d88e;
+    font-size: 0.84rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+#welcome-title {
+    margin: 0;
+    color: #f5f7fd;
+    font-size: clamp(1.5rem, 2.7vw, 2.2rem);
+    font-weight: 680;
+    text-align: center;
+}
+
+#welcome-sub {
+    margin: 0;
+    color: var(--muted);
+    font-size: 0.92rem;
+    text-align: center;
+}
+
+#pills-row {
+    margin-top: 10px;
+    max-width: 760px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+}
+
 .pill {
-    background:#2f2f2f; border:1px solid #3a3a3a; border-radius:20px;
-    padding:6px 14px; font-size:0.8rem; color:#bbb; cursor:pointer;
-    transition: background .15s;
+    background: rgba(28, 33, 48, 0.92);
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    padding: 8px 14px;
+    color: #d1d9eb;
+    font-size: 0.82rem;
+    cursor: pointer;
+}
+
+.pill:hover {
+    background: #22283a;
+    border-color: #39445f;
 }
-.pill:hover { background:#3a3a3a; border-color:#555; color:#fff; }
 
-/* ── chatbot ── */
 #chatbot {
-    flex:1; min-height:0; overflow-y:auto;
-    border:none !important; border-radius:0 !important;
-    box-shadow:none !important; background:#212121 !important;
-    padding-bottom:160px !important;
-}
-#chatbot > div { max-width:760px; margin:0 auto; padding:16px 8px; background:#212121 !important; }
-#chatbot .bubble-wrap { background:#212121 !important; }
-#chatbot [data-testid="bot"] .prose { color:#e0e0e0 !important; }
-#chatbot [data-testid="user"] .prose { color:#fff !important; }
-#chatbot img { border-radius:10px; max-width:100%; margin-top:8px; }
-
-/* ── reasoning steps ── */
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    padding-bottom: 170px !important;
+}
+
+#chatbot > div {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 20px 14px;
+    background: transparent !important;
+}
+
+#chatbot .bubble-wrap {
+    background: transparent !important;
+}
+
+#chatbot [data-testid="user"] > div {
+    background: #1c2130 !important;
+    border: 1px solid var(--line);
+    border-radius: 14px !important;
+}
+
+#chatbot [data-testid="assistant"] > div {
+    background: transparent !important;
+}
+
+#chatbot .prose {
+    color: #e7ecf7 !important;
+    line-height: 1.55;
+}
+
+#chatbot img {
+    border-radius: 12px;
+    margin-top: 8px;
+    border: 1px solid var(--line);
+}
+
 #steps-box {
-    max-width:760px; margin:0 auto 8px auto; width:100%;
-    background:transparent !important; border:none !important; padding:0 !important;
+    max-width: 860px;
+    width: 100%;
+    margin: 0 auto 8px;
+    background: transparent !important;
+    border: none !important;
+    padding: 0 14px !important;
 }
+
 .steps-toggle {
-    background:none; border:none; color:#444; font-size:0.7rem;
-    cursor:pointer; padding:2px 0 2px 2px;
-    display:flex; align-items:center; gap:4px; line-height:1;
+    background: none;
+    border: none;
+    color: #7f8aa5;
+    font-size: 0.73rem;
+    cursor: pointer;
+    padding: 3px 2px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
 }
-.steps-toggle:hover { color:#888; }
+
+.steps-toggle:hover {
+    color: #abb6cf;
+}
+
 .steps-content {
-    display:none; margin-top:6px; padding:10px 12px;
-    background:#161616; border-radius:7px; border:1px solid #252525;
-    font-size:0.78rem; color:#aaa; overflow-x:auto;
+    display: none;
+    margin-top: 6px;
+    background: #151927;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    padding: 11px 12px;
+    color: #c8d1e5;
+    font-size: 0.78rem;
 }
+
 .steps-content pre {
-    background:#1e1e1e; padding:6px 8px; border-radius:5px;
-    font-size:0.72rem; color:#ccc; overflow-x:auto;
+    margin: 0;
+    background: #1d2434;
+    border: 1px solid #303b55;
+    border-radius: 8px;
+    padding: 7px 8px;
+    color: #dce5f8;
+    white-space: pre-wrap;
 }
+
 .step-tool {
-    font-family:monospace; background:#2a2a2a; padding:1px 5px;
-    border-radius:4px; font-size:0.72rem; color:#FF9D00;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    background: #29314a;
+    border: 1px solid #3a4665;
+    color: #f7d794;
+    border-radius: 7px;
+    padding: 2px 6px;
+    margin-left: 8px;
+    font-size: 0.72rem;
 }
 
-/* ── input bar (fixed bottom) ── */
 #input-bar {
-    position:fixed !important;
-    bottom:0; left:260px; right:0;
-    background:linear-gradient(to top, #212121 70%, transparent);
-    padding:20px calc(50% - 390px + 130px) 12px;
-    z-index:100;
+    position: fixed !important;
+    left: 272px;
+    right: 0;
+    bottom: 0;
+    z-index: 110;
+    padding: 20px clamp(14px, calc(50% - 430px), 110px) 12px;
+    background: linear-gradient(to top, #0f1117 74%, rgba(15, 17, 23, 0));
 }
+
 #input-container {
-    display:flex; flex-direction:column;
-    background:#2f2f2f; border:1px solid #424242;
-    border-radius:16px; overflow:hidden;
-    transition:border-color .2s;
+    display: flex;
+    flex-direction: column;
+    border-radius: 16px;
+    background: #161b29;
+    border: 1px solid #2f3850;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+#input-container:focus-within {
+    border-color: #4a5980;
+}
+
+#input-container #msg-box {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent;
 }
-#input-container:focus-within { border-color:#666; }
-#input-container #msg-box { flex:1; background:transparent; border:none !important; box-shadow:none !important; }
+
 #input-container #msg-box textarea {
-    background:transparent !important; border:none !important;
-    box-shadow:none !important; outline:none !important;
-    color:#ececf1 !important; font-size:0.93rem !important;
-    padding:12px 16px 4px 16px !important; resize:none !important;
-    min-height:44px !important;
+    min-height: 48px !important;
+    max-height: 160px !important;
+    padding: 14px 16px 6px !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    color: var(--text) !important;
+    font-size: 0.95rem !important;
+    line-height: 1.4;
+    resize: none !important;
+}
+
+#input-container #msg-box textarea::placeholder {
+    color: #73809f !important;
 }
-#input-container #msg-box textarea::placeholder { color:#555 !important; }
+
 #input-bottom {
-    display:flex; align-items:center; justify-content:space-between;
-    padding:4px 10px 8px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px 10px;
+}
+
+.input-left,
+.input-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
-.input-left { display:flex; align-items:center; gap:8px; }
+
 .add-btn {
-    width:28px; height:28px; border-radius:50%;
-    background:#3a3a3a; border:1px solid #4a4a4a;
-    color:#888; font-size:1rem; cursor:pointer;
-    display:flex; align-items:center; justify-content:center;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    border: 1px solid #394560;
+    background: #20273a;
+    color: #bcc7e2;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.add-btn:hover {
+    background: #27304a;
 }
-.add-btn:hover { background:#444; color:#ccc; }
+
 .mcp-pill {
-    display:flex; align-items:center; gap:5px;
-    background:#3a3a3a; border:1px solid #4a4a4a;
-    border-radius:20px; padding:3px 10px;
-    font-size:0.74rem; color:#aaa; cursor:pointer;
-}
-.mcp-pill:hover { background:#444; }
-.mcp-dot { width:7px; height:7px; border-radius:50%; background:#FF9D00; }
-.input-right { display:flex; align-items:center; gap:6px; }
-.mic-btn {
-    width:32px; height:32px; border-radius:50%;
-    background:transparent; border:none;
-    color:#555; font-size:1rem; cursor:pointer;
-    display:flex; align-items:center; justify-content:center;
-}
-.mic-btn:hover { color:#888; }
-#send-btn { display:none !important; }
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    border-radius: 999px;
+    border: 1px solid #394560;
+    background: #20273a;
+    padding: 4px 10px;
+    color: #c7d2ec;
+    font-size: 0.75rem;
+}
+
+.mcp-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    background: #34d399;
+}
+
+#send-btn {
+    display: none !important;
+}
+
 .send-visual-btn {
-    width:32px; height:32px; border-radius:50%;
-    background:#FF9D00; border:none;
-    color:#fff; font-size:1rem; font-weight:700;
-    cursor:pointer; display:flex; align-items:center; justify-content:center;
-    transition:background .15s;
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    border: none;
+    background: var(--accent);
+    color: #1b1300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.send-visual-btn:hover {
+    background: var(--accent-strong);
 }
-.send-visual-btn:hover { background:#e68c00; }
+
 #input-note {
-    text-align:center; font-size:0.68rem; color:#3a3a3a;
-    padding:4px 0 8px 0;
+    text-align: center;
+    color: #73809f;
+    font-size: 0.7rem;
+    padding: 5px 0 7px;
+}
+
+@media (max-width: 880px) {
+    #sidebar {
+        width: 76px;
+        padding: 10px 8px;
+    }
+
+    .sb-logo,
+    .sb-section-label,
+    .sb-item,
+    .sb-bottom-item,
+    .sb-new-chat span {
+        display: none;
+    }
+
+    .sb-new-chat {
+        justify-content: center;
+    }
+
+    #main-col,
+    #input-bar {
+        left: 76px;
+    }
+}
+
+@media (max-width: 620px) {
+    #sidebar {
+        display: none;
+    }
+
+    #main-col,
+    #input-bar {
+        left: 0;
+    }
+
+    #input-bar {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    #chatbot > div {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    .mcp-pill {
+        display: none;
+    }
 }

templates.py

@@ -16,7 +16,6 @@ function fillInput(text) {
     ta.dispatchEvent(new Event('input', { bubbles: true }));
 }
 
-// Force viewport-locked layout (fixes HF Spaces iframe height issue)
 function lockViewportHeight() {
     const vh = window.innerHeight;
     document.documentElement.style.setProperty('height', vh + 'px', 'important');
@@ -25,7 +24,7 @@ function lockViewportHeight() {
     document.body.style.setProperty('height', vh + 'px', 'important');
     document.body.style.setProperty('max-height', vh + 'px', 'important');
     document.body.style.setProperty('overflow', 'hidden', 'important');
-    // Also constrain the gradio container
+
     const gc = document.querySelector('.gradio-container');
     if (gc) {
         gc.style.setProperty('height', vh + 'px', 'important');
@@ -42,49 +41,40 @@ setTimeout(lockViewportHeight, 1000);
 SIDEBAR_HTML = """
 <div id="sidebar">
   <div class="sb-top">
-    <div class="sb-logo">
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/>
-      </svg>
-      SO Analyst
-    </div>
     <button class="sb-icon-btn" onclick="document.getElementById('new-chat-btn').click()" title="New chat">
-      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M12 5v14M5 12h14"/>
       </svg>
     </button>
+    <div class="sb-logo">SO Analyst</div>
   </div>
 
   <button class="sb-new-chat" onclick="document.getElementById('new-chat-btn').click()">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 5v14M5 12h14"/>
     </svg>
-    New chat
+    <span>New chat</span>
   </button>
 
-  <div class="sb-section-label">TODAY</div>
-  <div class="sb-item">Sub-options per question</div>
+  <div class="sb-section-label">Recents</div>
+  <div class="sb-item is-active">Sub-options per question</div>
   <div class="sb-item">Distribution by question type</div>
   <div class="sb-item">Questions above average</div>
 
   <div class="sb-spacer"></div>
-  <hr class="sb-divider">
 
   <div class="sb-bottom">
-    <div class="sb-user">
-      <div class="sb-avatar">S</div>
-      <span class="sb-username">sitsope</span>
-      <span class="sb-dots">···</span>
-    </div>
+    <button class="sb-bottom-item">Explore assistants</button>
+    <button class="sb-bottom-item">Settings</button>
   </div>
 </div>
 """
 
 WELCOME_HTML = """
 <div id="welcome">
-  <div id="welcome-logo">📊</div>
-  <p id="welcome-title">Stack Overflow Analyst</p>
-  <p id="welcome-sub">Ask anything about the survey data — charts generated automatically.</p>
+  <p id="welcome-kicker">SO Analyst</p>
+  <p id="welcome-title">How can I help you today?</p>
+  <p id="welcome-sub">Ask anything about your survey data and I will generate stats and charts.</p>
   <div id="pills-row">
     {pills}
   </div>
@@ -97,12 +87,16 @@ WELCOME_HTML = """
 INPUT_HTML = """
 <div id="input-bottom">
   <div class="input-left">
-    <button class="add-btn">+</button>
-    <div class="mcp-pill"><span class="mcp-dot"></span> MCP (2)</div>
+    <button class="add-btn" title="Attach">+</button>
+    <div class="mcp-pill"><span class="mcp-dot"></span> MCP connected</div>
   </div>
   <div class="input-right">
-    <button class="mic-btn">🎤</button>
-    <button class="send-visual-btn" onclick="document.getElementById('send-btn').click()">↑</button>
+    <button class="send-visual-btn" onclick="document.getElementById('send-btn').click()">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M22 2L11 13"/>
+        <path d="M22 2L15 22L11 13L2 9L22 2Z"/>
+      </svg>
+    </button>
   </div>
 </div>
 """
@@ -112,7 +106,7 @@ def steps_to_html(agent_steps: list) -> str:
         return ""
     rows = "".join(f"""
     <div style="margin-bottom:10px">
-      <span style="font-size:0.72rem;color:#888">Step {i}</span>
+      <span style="font-size:0.72rem;color:#7e8797">Step {i}</span>
       <span class="step-tool">{name}</span>
       <pre style="margin:4px 0 2px 0">{inp}</pre>
       <pre style="margin:0">{obs}</pre>
@@ -122,7 +116,7 @@ def steps_to_html(agent_steps: list) -> str:
       <button class="steps-toggle"
         onclick="var c=this.nextElementSibling;c.style.display=c.style.display==='block'?'none':'block';
                  this.querySelector('span').textContent=c.style.display==='block'?'▾':'▸'">
-        · reasoning steps <span>▸</span>
+        reasoning steps <span>▸</span>
       </button>
       <div class="steps-content">{rows}</div>
     </div>"""