Refactor UI components and remove deprecated elements for improved clarity

- Updated `smoke-disciplinas-browser.mjs` to enhance the online status check by removing the status badge dependency and focusing on the send button and message input.
- Refactored CSS in `discipline-panel.css` and `theme.css` to remove outdated styles related to the active discipline badge, improving overall design consistency.
- Adjusted `entrance.js` and `ui.js` to eliminate references to the status badge and active discipline badge, streamlining the initialization process.
- Enhanced `StatusBadge.js` to maintain API compatibility while removing UI elements, ensuring cleaner code and better maintainability.
- Updated `index.html` to reflect the removal of the active discipline badge and status badge, improving accessibility and user experience.

Author: GaabDevWeb

bin/smoke-disciplinas-browser.mjs

@@ -158,9 +158,9 @@ async function preparePage(page) {
 async function waitForOnline(page, timeoutMs = 90_000) {
   await page.waitForFunction(
     () => {
-      const badge = document.getElementById("status-badge");
       const send = document.getElementById("send-button");
-      return badge?.textContent?.trim() === "Online" && send && !send.disabled;
+      const input = document.getElementById("message-input");
+      return send && !send.disabled && input;
     },
     { timeout: timeoutMs },
   );
@@ -210,9 +210,9 @@ async function askQuestion(page, question, index, disciplineId) {
   await page.waitForTimeout(200);
 
   const feBeforeSend = await page.evaluate(() => ({
-    status: document.getElementById("status-badge")?.textContent?.trim(),
-    activeDiscipline: document.querySelector(".active-discipline-badge__label")?.textContent?.trim() || null,
-    activeBadgeVisible: document.getElementById("active-discipline-badge")?.hidden === false,
+    sendReady: Boolean(document.getElementById("send-button") && !document.getElementById("send-button")?.disabled),
+    activeDiscipline: document.querySelector(".silo-pill__name")?.textContent?.trim() || null,
+    siloPillVisible: document.getElementById("silo-pill")?.hidden === false,
     scopeItems: document.querySelectorAll("#scope-menu-list .scope-option").length,
     sendDisabled: document.getElementById("send-button")?.disabled,
   }));
@@ -255,7 +255,6 @@ async function askQuestion(page, question, index, disciplineId) {
         richSources: botRow?.querySelectorAll(".source-card--rich").length || 0,
         sourcesHeading: botRow?.querySelector(".message-sources__heading")?.textContent?.trim() || null,
         sourceMeta,
-        status: document.getElementById("status-badge")?.textContent?.trim(),
         pinVisible: document.getElementById("context-pin-badge")?.hidden === false,
         thinkingSeen: !!document.querySelector(".thinking-indicator"),
       };
@@ -269,7 +268,6 @@ async function askQuestion(page, question, index, disciplineId) {
     feAfter = await page.evaluate(() => ({
       userText: document.querySelector(".message-row.user .message")?.textContent?.trim(),
       botLen: [...document.querySelectorAll(".message-row.bot .message")].pop()?.textContent?.length || 0,
-      status: document.getElementById("status-badge")?.textContent?.trim(),
     }));
   }
 
@@ -296,11 +294,11 @@ async function askQuestion(page, question, index, disciplineId) {
       pageErrors,
       networkLog,
       checks: {
-        statusOnline: (feAfter.status || feBeforeSend.status) === "Online",
+        sendReady: feBeforeSend.sendReady,
         userMessageMatch: feAfter.userText === question,
         gotBotReply: (feAfter.botLen || 0) > 20,
         scopeMenuPopulated: feBeforeSend.scopeItems >= 7,
-        activeBadgeWhenCommand: !hasCommand || feBeforeSend.activeBadgeVisible,
+        siloPillWhenCommand: !hasCommand || feBeforeSend.siloPillVisible,
         hasSources: (feAfter.richSources || 0) > 0 || (sources.length || 0) > 0,
       },
     },
@@ -380,7 +378,7 @@ async function main() {
       (r) =>
         r.frontend.consoleErrors.length ||
         r.frontend.pageErrors.length ||
-        !r.frontend.checks.statusOnline ||
+        !r.frontend.checks.sendReady ||
         !r.frontend.checks.gotBotReply,
     ).length,
     byDiscipline: DISCIPLINES.map((d) => {

frontend/assets/css/discipline-panel.css

@@ -160,19 +160,6 @@
     background: var(--brand-surface);
 }
 
-.active-discipline-badge {
-    cursor: pointer;
-}
-
-.active-discipline-badge:focus-visible {
-    outline: 2px solid var(--brand-primary);
-    outline-offset: 2px;
-}
-
-.active-discipline-badge--panel-open {
-    box-shadow: 0 0 0 1px var(--brand-primary);
-}
-
 @media (prefers-reduced-motion: reduce) {
     .discipline-panel {
         transition: none;

frontend/assets/css/entrance.css

@@ -105,7 +105,7 @@ body.ui-landing .app .entrance-suggestion {
   font-size: 0.92rem;
   font-weight: 600;
   line-height: 1.35;
-  color: #e4e4e7;
+  color: var(--text);
   word-wrap: break-word;
   overflow-wrap: anywhere;
 }
@@ -114,7 +114,7 @@ body.ui-landing .app .entrance-suggestion {
   font-size: 0.84rem;
   font-weight: 500;
   line-height: 1.3;
-  color: #f4f4f5;
+  color: var(--white);
 }
 
 /* Keep all the real UI above the globe backdrop. */
@@ -165,7 +165,7 @@ body.ui-landing .app .entrance-suggestion {
   font-size: 0.72rem;
   letter-spacing: 0.42em;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--white);
   opacity: 0.85;
   margin-bottom: 14px;
 }
@@ -175,7 +175,7 @@ body.ui-landing .app .entrance-suggestion {
   line-height: 1.12;
   font-weight: 700;
   letter-spacing: -0.01em;
-  background: linear-gradient(120deg, #ffffff 0%, #d9dadf 45%, #a9aab0 100%);
+  background: linear-gradient(120deg, var(--white) 0%, #d9dadf 45%, #a9aab0 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
@@ -219,7 +219,7 @@ body.ui-landing .app .entrance-suggestion {
 
 .entrance-discipline-pills .cmd-pill:hover {
   border-color: var(--brand-primary);
-  color: #fff;
+  color: var(--white);
   background: var(--brand-surface);
 }
 

frontend/assets/css/theme.css

@@ -2,6 +2,7 @@
 /* Brand accent: #B0933E — use tokens, never hardcode. Error red is semantic only (--error). */
 :root {
     --bg: #0a0a0a;
+    --white: #F5F5F5;
     --surface: #27272A;
     --surface-2: #2F2F33;
     --border: #3F3F46;
@@ -13,7 +14,7 @@
     --accent: var(--brand-primary);
     --color-hint: var(--text-muted);
     --color-code-inline: #D4BC82;
-    --text: #E4E4E7;
+    --text: var(--white);
     --text-muted: #B4B4BC;
     --bot-bg: #27272A;
     --error: #F87171;
@@ -157,7 +158,7 @@ body.ui-landing .header-conversation-label {
     margin-bottom: 0;
 }
 
-/* Pinned-context badge — same look as the silo: gray bg, white icon + text. */
+/* Pinned-context badge — same look as the silo: gray bg, bright icon + text. */
 .context-pin-badge {
     display: inline-flex;
     align-items: center;
@@ -186,68 +187,6 @@ body.ui-landing .header-conversation-label {
     white-space: nowrap;
 }
 
-.header-badge {
-    font-size: 11px;
-    font-weight: 600;
-    padding: 3px 8px;
-    border: 1px solid var(--border);
-    color: var(--text-muted);
-    text-transform: uppercase;
-    border-radius: var(--radius-2xl);
-}
-
-.header-badge.online {
-    border-color: var(--success);
-    color: var(--success);
-}
-
-.header-badge.warning {
-    border-color: var(--warning);
-    color: var(--warning);
-    background: var(--warning-bg);
-}
-
-/* ===== Disciplina activa (header) ===== */
-.active-discipline-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    max-width: min(52vw, 320px);
-    padding: 4px 10px;
-    border: 1px solid var(--accent);
-    background: var(--brand-surface);
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--text);
-    overflow: hidden;
-}
-
-.active-discipline-badge[hidden] {
-    display: none;
-}
-
-.active-discipline-badge__dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background: var(--accent);
-    flex-shrink: 0;
-    box-shadow: 0 0 8px var(--brand-muted);
-}
-
-.active-discipline-badge__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.active-discipline-badge__cmd {
-    font-family: var(--font-mono);
-    font-size: 10px;
-    color: var(--text-muted);
-    flex-shrink: 0;
-}
-
 /* ===== Chat Area ===== */
 .chat-box {
     overflow-y: auto;
@@ -439,18 +378,9 @@ body.ui-landing .header-conversation-label {
 .message-toolbar {
     display: flex;
     gap: 6px;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.15s ease;
     margin-top: 2px;
 }
 
-.message-row:hover .message-toolbar,
-.message-row:focus-within .message-toolbar {
-    opacity: 1;
-    pointer-events: auto;
-}
-
 .message-row.user .message-toolbar {
     justify-content: flex-end;
     max-width: 82%;
@@ -462,18 +392,48 @@ body.ui-landing .header-conversation-label {
 }
 
 .message-toolbar__btn {
-    font-size: 10px;
-    padding: 2px 8px;
-    border: 1px solid var(--border);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
     border-radius: var(--radius-sm);
     background: transparent;
     color: var(--text-muted);
     cursor: pointer;
+    transition: opacity 0.15s ease;
 }
 
-.message-toolbar__btn:hover {
-    color: var(--text);
-    border-color: var(--brand-muted);
+.message-toolbar__icon {
+    display: block;
+    width: 14px;
+    height: 14px;
+    object-fit: contain;
+    opacity: 0.72;
+    pointer-events: none;
+    transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
+        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
+    transform: scale(1);
+}
+
+.message-toolbar__icon--fade {
+    opacity: 0 !important;
+    transform: scale(0.88);
+}
+
+.message-toolbar__btn:hover .message-toolbar__icon {
+    opacity: 1;
+}
+
+.message-toolbar__btn--copied .message-toolbar__icon {
+    opacity: 1;
+}
+
+.message-toolbar__btn:focus-visible {
+    outline: 2px solid var(--brand-primary);
+    outline-offset: 2px;
 }
 
 .acl-disclaimer-collapsible {
@@ -595,12 +555,6 @@ body.ui-landing .header-conversation-label {
     animation: fade-in-up 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
 }
 
-body.chat-active .input-area {
-    max-width: min(var(--chat-read-max), 82%);
-    margin-left: 24px;
-    margin-right: auto;
-}
-
 body.chat-active .composer-wrap {
     max-width: 100%;
 }
@@ -787,16 +741,10 @@ body.chat-active .composer-wrap {
 
 #send-button.send-button--streaming::after {
     content: "";
-    width: 16px;
-    height: 16px;
-    border: 2px solid rgba(10, 10, 10, 0.25);
-    border-top-color: var(--brand-on-primary);
-    border-radius: 50%;
-    animation: send-spin 0.75s linear infinite;
-}
-
-@keyframes send-spin {
-    to { transform: rotate(360deg); }
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+    background: var(--brand-on-primary);
 }
 
 .composer-input--streaming {
@@ -1702,7 +1650,7 @@ body.chat-active .app-shell {
     border: none;
     border-radius: var(--radius-md);
     background: transparent;
-    color: #E1E2E6;
+    color: var(--text);
     cursor: pointer;
     flex-shrink: 0;
     transition: background 0.15s ease, opacity 0.15s ease;
@@ -1829,7 +1777,7 @@ body.chat-active .app-shell {
     border: none;
     border-radius: var(--radius-md);
     background: transparent;
-    color: #E1E2E6;
+    color: var(--text);
     cursor: pointer;
     transition: background 0.15s ease;
 }
@@ -2305,11 +2253,6 @@ textarea:focus-visible,
         padding: 5px;
     }
 
-    body.chat-active .input-area {
-        margin-left: 16px;
-        max-width: min(var(--chat-read-max), 94%);
-    }
-
     .input-row {
         gap: 6px;
         padding: 3px 4px 3px 3px;
@@ -2361,12 +2304,9 @@ textarea:focus-visible,
         transform: none;
     }
 
-    #send-button.send-button--streaming::after {
-        animation: none;
-    }
-
     .scroll-to-bottom-fab,
     .message-toolbar,
+    .message-toolbar__icon,
     .conversation-sidebar__menu-trigger,
     .code-copy-btn {
         transition: none;