UI changed; Added Admin Secrete for storage management for HF space

index.html

@@ -638,6 +638,650 @@
     .reference-item:last-child {
       margin-bottom: 0;
     }
+
+    /* Modern UI refresh */
+    :root {
+      --bg: #f3f6ff;
+      --surface: #ffffff;
+      --surface-soft: #f8faff;
+      --text: #1f2937;
+      --muted: #5b6472;
+      --border: #dbe3f0;
+      --primary: #2563eb;
+      --primary-dark: #1d4ed8;
+      --primary-soft: #e7efff;
+      --secondary-soft: #e9f7ff;
+      --success: #1f9d66;
+      --bg-glow-primary: rgba(37, 99, 235, 0.12);
+      --bg-glow-secondary: rgba(56, 189, 248, 0.1);
+      --accent-shadow: rgba(37, 99, 235, 0.22);
+      --focus-ring: rgba(37, 99, 235, 0.18);
+      --chat-user-top: #e5f7ec;
+      --chat-user-bottom: #d5f0df;
+      --chat-user-border: #bee6cb;
+      --chat-ai-top: #ebf2ff;
+      --chat-ai-bottom: #dbe8ff;
+      --chat-ai-border: #c5d8ff;
+      --progress-gradient: linear-gradient(90deg, #4285F4, #34a853);
+      --scrollbar-thumb: #c3d2ef;
+      --scrollbar-track: #edf2fd;
+      --shadow-sm: 0 2px 8px rgba(24, 39, 75, 0.08);
+      --shadow-md: 0 12px 30px rgba(24, 39, 75, 0.1);
+      --radius-sm: 8px;
+      --radius-md: 14px;
+      --radius-lg: 20px;
+    }
+
+    html[data-mode="QA"] {
+      --bg: #f1f7ff;
+      --primary: #2563eb;
+      --primary-dark: #1d4ed8;
+      --primary-soft: #e7efff;
+      --secondary-soft: #e7f7ff;
+      --border: #d5e2fb;
+      --bg-glow-primary: rgba(37, 99, 235, 0.14);
+      --bg-glow-secondary: rgba(14, 165, 233, 0.1);
+      --accent-shadow: rgba(37, 99, 235, 0.24);
+      --focus-ring: rgba(37, 99, 235, 0.2);
+      --chat-ai-top: #ebf2ff;
+      --chat-ai-bottom: #dbe8ff;
+      --chat-ai-border: #c5d8ff;
+      --progress-gradient: linear-gradient(90deg, #2563eb, #0ea5e9);
+      --scrollbar-thumb: #bfd2f7;
+      --scrollbar-track: #eaf1ff;
+    }
+
+    html[data-mode="System Chart Extraction"] {
+      --bg: #f2fbf8;
+      --primary: #0f766e;
+      --primary-dark: #0f5f58;
+      --primary-soft: #dbf6ee;
+      --secondary-soft: #e9fbf3;
+      --border: #cce8df;
+      --bg-glow-primary: rgba(15, 118, 110, 0.15);
+      --bg-glow-secondary: rgba(16, 185, 129, 0.1);
+      --accent-shadow: rgba(15, 118, 110, 0.25);
+      --focus-ring: rgba(15, 118, 110, 0.2);
+      --chat-user-top: #e6f8ee;
+      --chat-user-bottom: #d6f0e3;
+      --chat-user-border: #bce2cd;
+      --chat-ai-top: #e3faf6;
+      --chat-ai-bottom: #d2f2ea;
+      --chat-ai-border: #b9e5da;
+      --progress-gradient: linear-gradient(90deg, #0f766e, #10b981);
+      --scrollbar-thumb: #b7ddd3;
+      --scrollbar-track: #e8f7f3;
+    }
+
+    html[data-mode="Hypotheses Generation"] {
+      --bg: #f7f3ff;
+      --primary: #7c3aed;
+      --primary-dark: #6d28d9;
+      --primary-soft: #efe6ff;
+      --secondary-soft: #f6ebff;
+      --border: #e2d5fb;
+      --bg-glow-primary: rgba(124, 58, 237, 0.15);
+      --bg-glow-secondary: rgba(236, 72, 153, 0.08);
+      --accent-shadow: rgba(124, 58, 237, 0.26);
+      --focus-ring: rgba(124, 58, 237, 0.2);
+      --chat-user-top: #f0e8ff;
+      --chat-user-bottom: #e4d7ff;
+      --chat-user-border: #d4c0f7;
+      --chat-ai-top: #f8edff;
+      --chat-ai-bottom: #efddff;
+      --chat-ai-border: #dfc7f8;
+      --progress-gradient: linear-gradient(90deg, #7c3aed, #ec4899);
+      --scrollbar-thumb: #d6c3f2;
+      --scrollbar-track: #f0e8ff;
+    }
+
+    body {
+      background:
+        radial-gradient(circle at top right, var(--bg-glow-primary), transparent 40%),
+        radial-gradient(circle at top left, var(--bg-glow-secondary), transparent 42%),
+        var(--bg);
+      color: var(--text);
+    }
+
+    #app,
+    .mode-selection {
+      border: 1px solid rgba(255, 255, 255, 0.7);
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow-md);
+      backdrop-filter: blur(2px);
+    }
+
+    #app {
+      max-width: 980px;
+      padding: 2rem 2rem 1.75rem;
+      background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--primary-soft) 18%, #ffffff 82%) 100%);
+    }
+
+    .app-header h1 {
+      color: #0f172a;
+      letter-spacing: -0.02em;
+    }
+
+    .app-header p {
+      color: var(--muted);
+      font-size: 0.95rem;
+    }
+
+    .mode-selection {
+      background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
+      border: 1px solid var(--border);
+    }
+
+    .mode-selection h2 {
+      color: #0f172a;
+      letter-spacing: -0.02em;
+    }
+
+    .mode-selection p {
+      color: var(--muted);
+    }
+
+    .mode-card {
+      border: 1px solid var(--border);
+      background: #ffffff;
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-sm);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .mode-card:hover {
+      border-color: color-mix(in srgb, var(--primary) 45%, #ffffff 55%);
+      box-shadow: 0 10px 24px var(--accent-shadow);
+    }
+
+    /* Landing page has a distinct neutral background */
+    html[data-mode=""] body {
+      background:
+        radial-gradient(circle at 0% 0%, rgba(251, 146, 60, 0.14), transparent 35%),
+        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.12), transparent 38%),
+        linear-gradient(180deg, #f6f2eb 0%, #eceff7 100%);
+    }
+
+    html[data-mode=""] .mode-selection {
+      background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
+      border-color: #d7ddeb;
+    }
+
+    html[data-mode=""] .mode-card::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+      border-top-left-radius: var(--radius-md);
+      border-top-right-radius: var(--radius-md);
+    }
+
+    html[data-mode=""] .mode-card[data-mode="QA"] {
+      border-color: #c8dafc;
+      background: linear-gradient(180deg, #f4f8ff 0%, #eaf1ff 100%);
+    }
+
+    html[data-mode=""] .mode-card[data-mode="QA"]::before {
+      background: linear-gradient(90deg, #2563eb, #0ea5e9);
+    }
+
+    html[data-mode=""] .mode-card[data-mode="System Chart Extraction"] {
+      border-color: #bedfd4;
+      background: linear-gradient(180deg, #edf9f5 0%, #e4f5ef 100%);
+    }
+
+    html[data-mode=""] .mode-card[data-mode="System Chart Extraction"]::before {
+      background: linear-gradient(90deg, #0f766e, #10b981);
+    }
+
+    html[data-mode=""] .mode-card[data-mode="Hypotheses Generation"] {
+      border-color: #d9caf6;
+      background: linear-gradient(180deg, #f5f0ff 0%, #efe7ff 100%);
+    }
+
+    html[data-mode=""] .mode-card[data-mode="Hypotheses Generation"]::before {
+      background: linear-gradient(90deg, #7c3aed, #ec4899);
+    }
+
+    html[data-mode=""] .mode-card[data-mode="QA"]:hover {
+      box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);
+    }
+
+    html[data-mode=""] .mode-card[data-mode="System Chart Extraction"]:hover {
+      box-shadow: 0 12px 24px rgba(15, 118, 110, 0.24);
+    }
+
+    html[data-mode=""] .mode-card[data-mode="Hypotheses Generation"]:hover {
+      box-shadow: 0 12px 24px rgba(124, 58, 237, 0.24);
+    }
+
+    .section-title {
+      margin-top: 1.8rem;
+      margin-bottom: 0.8rem;
+      color: #0f172a;
+      font-size: 1.02rem;
+      letter-spacing: 0.01em;
+    }
+
+    #apiKeyForm,
+    #uploadForm,
+    #askForm,
+    #conversationForm,
+    #hypotheses-conversation-section,
+    #conversation-section,
+    .references-section {
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--surface);
+      box-shadow: var(--shadow-sm);
+    }
+
+    #apiKeyForm,
+    #uploadForm,
+    #askForm,
+    #conversationForm {
+      padding: 1rem 1rem 0.9rem;
+    }
+
+    #hypotheses-conversation-section,
+    #conversation-section {
+      margin-top: 1rem;
+      padding: 1rem;
+      background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--secondary-soft) 40%, #ffffff 60%) 100%);
+    }
+
+    .references-section {
+      background: color-mix(in srgb, var(--primary-soft) 35%, #ffffff 65%);
+      border-color: color-mix(in srgb, var(--primary) 20%, #ffffff 80%);
+    }
+
+    form label {
+      color: #1f2a3d;
+      font-weight: 500;
+      gap: 0.2rem;
+    }
+
+    form input[type="text"],
+    form select,
+    form input[type="file"],
+    form input[type="password"],
+    form input[type="number"],
+    textarea,
+    #followUpQuestion,
+    #hypothesis-chat-input,
+    #hypothesis-text-input,
+    #original-paper-content-input {
+      margin-top: 0.3rem;
+      border: 1px solid #c8d6ec !important;
+      border-radius: 10px !important;
+      background-color: #ffffff !important;
+      color: var(--text);
+      box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
+      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
+    }
+
+    form input[type="text"]:focus,
+    form select:focus,
+    form input[type="file"]:focus,
+    form input[type="password"]:focus,
+    form input[type="number"]:focus,
+    textarea:focus,
+    #followUpQuestion:focus,
+    #hypothesis-chat-input:focus,
+    #hypothesis-text-input:focus,
+    #original-paper-content-input:focus {
+      border-color: color-mix(in srgb, var(--primary) 55%, #ffffff 45%) !important;
+      box-shadow: 0 0 0 3px var(--focus-ring) !important;
+      outline: none;
+    }
+
+    form button,
+    #start-hypothesis-conversation-btn,
+    #send-hypothesis-message-btn,
+    #loadConversationBtn {
+      border-radius: 10px !important;
+      border: 1px solid transparent !important;
+      background: linear-gradient(180deg, #2f76ff 0%, var(--primary) 100%) !important;
+      color: #ffffff !important;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+      box-shadow: 0 8px 16px var(--accent-shadow);
+    }
+
+    form button:hover,
+    #start-hypothesis-conversation-btn:hover,
+    #send-hypothesis-message-btn:hover,
+    #loadConversationBtn:hover {
+      background: linear-gradient(180deg, #3f83ff 0%, var(--primary-dark) 100%) !important;
+      box-shadow: 0 12px 22px var(--accent-shadow);
+    }
+
+    .info-box {
+      background: linear-gradient(180deg, var(--secondary-soft) 0%, var(--primary-soft) 100%);
+      border-left: 4px solid var(--primary);
+      border-radius: var(--radius-sm);
+    }
+
+    #advancedParameters {
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      background: var(--surface-soft);
+    }
+
+    #advancedParameters summary {
+      color: #2a3550;
+      font-weight: 500;
+    }
+
+    #chat-area,
+    #hypothesis-chat-messages,
+    #conversation-messages {
+      border: 1px solid var(--border) !important;
+      border-radius: var(--radius-md) !important;
+      background: linear-gradient(180deg, #fbfcff 0%, color-mix(in srgb, var(--primary-soft) 35%, #ffffff 65%) 100%) !important;
+      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
+    }
+
+    .chat-bubble {
+      border-radius: 14px;
+      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
+    }
+
+    .user-bubble {
+      background: linear-gradient(180deg, var(--chat-user-top) 0%, var(--chat-user-bottom) 100%);
+      border: 1px solid var(--chat-user-border);
+    }
+
+    .ai-bubble {
+      background: linear-gradient(180deg, var(--chat-ai-top) 0%, var(--chat-ai-bottom) 100%);
+      border: 1px solid var(--chat-ai-border);
+    }
+
+    .model-selection-banner,
+    #visualizationContainer,
+    .progress-container {
+      border-radius: var(--radius-md);
+      border-color: var(--border);
+      background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
+    }
+
+    .progress-bar {
+      border-radius: 99px;
+      background: #e8eefb;
+    }
+
+    .progress-bar-fill {
+      border-radius: 99px;
+      background: var(--progress-gradient);
+    }
+
+    /* QA response typography */
+    .qa-result-card {
+      margin-top: 12px;
+      padding: 14px 16px;
+      background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--primary-soft) 24%, #ffffff 76%) 100%);
+      border: 1px solid color-mix(in srgb, var(--primary) 22%, #ffffff 78%);
+      border-left: 4px solid var(--primary);
+      border-radius: 12px;
+    }
+
+    .qa-response {
+      color: #1f2937;
+      line-height: 1.65;
+      font-size: 0.96rem;
+    }
+
+    .qa-response .qa-h {
+      margin: 0.95rem 0 0.5rem;
+      color: #0f172a;
+      line-height: 1.3;
+      font-weight: 700;
+      letter-spacing: -0.01em;
+    }
+
+    .qa-response .qa-h1 { font-size: 1.25rem; }
+    .qa-response .qa-h2 { font-size: 1.15rem; }
+    .qa-response .qa-h3 { font-size: 1.06rem; }
+    .qa-response .qa-h4,
+    .qa-response .qa-h5,
+    .qa-response .qa-h6 { font-size: 1rem; }
+
+    .qa-response .qa-p {
+      margin: 0.45rem 0;
+      color: #1f2937;
+    }
+
+    .qa-response .qa-list {
+      margin: 0.55rem 0;
+      padding-left: 1.25rem;
+    }
+
+    .qa-response .qa-li {
+      margin: 0.3rem 0;
+    }
+
+    .qa-response .qa-hr {
+      margin: 0.8rem 0;
+      border: none;
+      border-top: 1px solid #dbe3f0;
+    }
+
+    .qa-response .qa-blockquote {
+      margin: 0.7rem 0;
+      padding: 0.7rem 0.9rem;
+      border-left: 4px solid var(--primary);
+      border-radius: 0 8px 8px 0;
+      background: color-mix(in srgb, var(--primary-soft) 42%, #ffffff 58%);
+      color: #334155;
+    }
+
+    .qa-response .qa-pre {
+      margin: 0.65rem 0;
+      padding: 0.75rem 0.85rem;
+      background: #0f172a;
+      color: #e2e8f0;
+      border-radius: 10px;
+      border: 1px solid #1e293b;
+      overflow-x: auto;
+      font-size: 0.88rem;
+      line-height: 1.55;
+    }
+
+    .qa-response .qa-code-inline {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      background: color-mix(in srgb, var(--primary-soft) 55%, #ffffff 45%);
+      color: #1f3a8a;
+      border: 1px solid color-mix(in srgb, var(--primary) 20%, #ffffff 80%);
+      border-radius: 5px;
+      padding: 0.08rem 0.3rem;
+      font-size: 0.88em;
+    }
+
+    .qa-response .qa-table-wrap {
+      margin: 0.75rem 0;
+      overflow-x: auto;
+      border: 1px solid #dbe3f0;
+      border-radius: 10px;
+      background: #ffffff;
+    }
+
+    .qa-response .qa-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.9rem;
+      min-width: 520px;
+    }
+
+    .qa-response .qa-table th,
+    .qa-response .qa-table td {
+      border-bottom: 1px solid #e4ebf7;
+      padding: 0.55rem 0.65rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .qa-response .qa-table th {
+      background: color-mix(in srgb, var(--primary-soft) 55%, #ffffff 45%);
+      color: #0f172a;
+      font-weight: 700;
+      border-bottom: 1px solid #cfdcf4;
+    }
+
+    .qa-response .qa-table tr:last-child td {
+      border-bottom: none;
+    }
+
+    .qa-sources-toggle {
+      margin-top: 10px;
+    }
+
+    .qa-sources-toggle summary {
+      cursor: pointer;
+      font-weight: 600;
+      color: var(--primary);
+    }
+
+    .qa-sources-body {
+      margin-top: 10px;
+      padding: 12px;
+      border-radius: 10px;
+      background: color-mix(in srgb, var(--primary-soft) 35%, #ffffff 65%);
+      border: 1px solid color-mix(in srgb, var(--primary) 20%, #ffffff 80%);
+    }
+
+    ::-webkit-scrollbar {
+      width: 9px;
+      height: 9px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-thumb);
+      border-radius: 999px;
+      border: 2px solid var(--scrollbar-track);
+    }
+
+    ::-webkit-scrollbar-track {
+      background: var(--scrollbar-track);
+      border-radius: 999px;
+    }
+
+    /* Admin controls */
+    #adminFab {
+      position: fixed;
+      right: 20px;
+      bottom: 20px;
+      z-index: 1100;
+      border: 1px solid #d0d0d0;
+      background: #fff;
+      color: #333;
+      border-radius: 999px;
+      padding: 8px 14px;
+      font-size: 0.85rem;
+      cursor: pointer;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+
+    #adminFab:hover {
+      background: #f7f7f7;
+    }
+
+    #adminPanel {
+      position: fixed;
+      right: 20px;
+      bottom: 64px;
+      z-index: 1100;
+      width: min(360px, calc(100vw - 2rem));
+      background: #fff;
+      border: 1px solid #e2e2e2;
+      border-radius: 10px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+      padding: 0.85rem;
+      display: none;
+    }
+
+    #adminPanel h4 {
+      margin: 0 0 0.45rem 0;
+      font-size: 0.95rem;
+      color: #333;
+    }
+
+    #adminPanel .admin-row {
+      margin-bottom: 0.55rem;
+    }
+
+    #adminPanel label {
+      display: flex;
+      flex-direction: column;
+      font-size: 0.83rem;
+      color: #444;
+      gap: 0.2rem;
+    }
+
+    #adminPanel input[type="password"],
+    #adminPanel input[type="text"] {
+      width: 100%;
+      padding: 0.45rem;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: #fafafa;
+    }
+
+    #adminPanel .admin-actions {
+      display: flex;
+      gap: 0.5rem;
+      margin-top: 0.45rem;
+    }
+
+    #adminPanel button {
+      border: 1px solid #cfcfcf;
+      border-radius: 5px;
+      background: #f9f9f9;
+      color: #333;
+      cursor: pointer;
+      padding: 0.4rem 0.65rem;
+      font-size: 0.82rem;
+    }
+
+    #adminPanel button:hover {
+      background: #f2f2f2;
+    }
+
+    #adminPanel .danger-btn {
+      border-color: #f44336;
+      color: #f44336;
+      background: #fff5f5;
+    }
+
+    #adminPanel .danger-btn:hover {
+      background: #ffe9e9;
+    }
+
+    #adminPanelStatus {
+      margin-top: 0.45rem;
+      font-size: 0.8rem;
+      line-height: 1.35;
+      color: #555;
+      min-height: 1.1rem;
+    }
+
+    @media (max-width: 900px) {
+      body {
+        padding: 1rem;
+      }
+
+      #app,
+      .mode-selection {
+        padding: 1.25rem;
+        border-radius: 16px;
+      }
+
+      .mode-cards {
+        grid-template-columns: 1fr;
+      }
+    }
   </style>
 </head>
 <body>
@@ -931,6 +1575,33 @@
 
   </div>
 
+  <button id="adminFab" type="button" title="Owner admin controls">Admin</button>
+  <div id="adminPanel" role="dialog" aria-modal="false" aria-label="Admin panel">
+    <h4>Owner Admin</h4>
+    <div class="admin-row">
+      <label>
+        Admin Password
+        <input type="password" id="adminPasswordInput" placeholder="Enter owner password">
+      </label>
+    </div>
+    <div class="admin-actions">
+      <button type="button" id="verifyAdminBtn">Verify</button>
+    </div>
+
+    <div id="adminDangerZone" style="display: none; margin-top: 0.7rem; border-top: 1px dashed #ddd; padding-top: 0.65rem;">
+      <div class="admin-row">
+        <label>
+          Type confirmation phrase
+          <input type="text" id="adminDeleteConfirmInput" placeholder="DELETE /data">
+        </label>
+      </div>
+      <div class="admin-actions">
+        <button type="button" id="wipeDataBtn" class="danger-btn">Delete all /data contents</button>
+      </div>
+    </div>
+    <div id="adminPanelStatus"></div>
+  </div>
+
   <!-- JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script>
@@ -1505,18 +2176,18 @@
 
                 // Build collapsible resources box
                 const resourcesBox = (prettySources) ? `
-                  <details style="margin-top: 10px;">
-                    <summary style="cursor: pointer; font-weight: 600; color: #4285F4;">Show sources and context</summary>
-                    <div style="margin-top: 10px; padding: 12px; background: #f1f3f4; border-radius: 6px; border-left: 4px solid #90CAF9; white-space: pre-wrap;">
-                      ${renderedSources}
+                  <details class="qa-sources-toggle">
+                    <summary>Show sources and context</summary>
+                    <div class="qa-sources-body">
+                      <div class="qa-response">${renderedSources}</div>
                     </div>
                   </details>
                 ` : '';
 
                 resultsDiv.innerHTML = `
                   <strong>✓ Q&A Complete!</strong><br>
-                  <div style="margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 6px; border-left: 4px solid #4285F4;">
-                    ${renderedAnswer}
+                  <div class="qa-result-card">
+                    <div class="qa-response">${renderedAnswer}</div>
                   </div>
                   ${resourcesBox}
                 `;
@@ -2068,7 +2739,12 @@
                 aiDiv.classList.add('chat-bubble', 'ai-bubble');
                 
                 // For regular results
-                aiDiv.innerHTML = formatMarkdownResponse(data.response ?? data.answer ?? '');
+                const rendered = formatMarkdownResponse(data.response ?? data.answer ?? '');
+                if (window.selectedMode === 'QA') {
+                  aiDiv.innerHTML = `<div class="qa-response">${rendered}</div>`;
+                } else {
+                  aiDiv.innerHTML = rendered;
+                }
                 
                 chatArea.appendChild(aiDiv);
                 
@@ -2704,17 +3380,101 @@
       }
     }
 
+    function normalizeMarkdownText(text) {
+      let normalized = String(text ?? '');
+
+      // Normalize line endings and trim excessive outer whitespace
+      normalized = normalized.replace(/\r\n/g, '\n').trim();
+
+      // Fix a common malformed pattern from model outputs: "*Title**" -> "**Title**"
+      normalized = normalized.replace(/^\*([^*\n][\s\S]*?)\*\*(\s|$)/, '**$1**$2');
+
+      // Ensure list items are on their own line (e.g., "text: - **A:** ... - **B:** ...")
+      normalized = normalized.replace(/:\s+-\s+/g, ':\n- ');
+      normalized = normalized.replace(/\s+-\s+\*\*/g, '\n- **');
+
+      // Ensure headings/paragraph transitions don't collapse unexpectedly
+      normalized = normalized.replace(/\n{3,}/g, '\n\n');
+
+      return normalized;
+    }
+
+    function escapeHtml(text) {
+      return String(text ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    }
+
+    function basicMarkdownToHtml(text) {
+      const input = normalizeMarkdownText(text);
+      const lines = input.split('\n');
+      let html = '';
+      let inList = false;
+
+      function inlineFormat(line) {
+        let s = escapeHtml(line);
+        s = s.replace(/`([^`]+)`/g, '<code class="qa-code-inline">$1</code>');
+        s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        s = s.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
+        return s;
+      }
+
+      for (const rawLine of lines) {
+        const line = rawLine.trim();
+
+        if (!line) {
+          if (inList) {
+            html += '</ul>';
+            inList = false;
+          }
+          continue;
+        }
+
+        const listMatch = line.match(/^[-*]\s+(.+)/);
+        if (listMatch) {
+          if (!inList) {
+            html += '<ul class="qa-list">';
+            inList = true;
+          }
+          html += `<li class="qa-li">${inlineFormat(listMatch[1])}</li>`;
+          continue;
+        }
+
+        if (inList) {
+          html += '</ul>';
+          inList = false;
+        }
+
+        if (/^#{1,6}\s+/.test(line)) {
+          const level = Math.min(6, (line.match(/^#+/)?.[0]?.length || 1));
+          const content = line.replace(/^#{1,6}\s+/, '');
+          html += `<h${level} class="qa-h qa-h${level}">${inlineFormat(content)}</h${level}>`;
+        } else {
+          html += `<p class="qa-p">${inlineFormat(line)}</p>`;
+        }
+      }
+
+      if (inList) {
+        html += '</ul>';
+      }
+
+      return html || `<p class="qa-p">${escapeHtml(input)}</p>`;
+    }
+
     // Function to format markdown responses using marked.js library
     function formatMarkdownResponse(text) {
       // Type guard - ensure text is a string
       if (typeof text !== 'string') {
         text = String(text ?? '');
       }
+
+      text = normalizeMarkdownText(text);
       
       // Guard against marked.js CDN being unavailable
       if (typeof marked === 'undefined') {
         console.warn('⚠️  Marked.js not loaded – falling back to plain text');
-        return text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+        return basicMarkdownToHtml(text);
       }
       
       // Configure marked for scientific content
@@ -2731,88 +3491,173 @@
       
       // Custom table rendering
       renderer.table = function(header, body) {
-        return `<table style="border-collapse: collapse; margin: 15px 0; width: 100%; font-size: 0.9rem; background: white; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
-          <thead style="background: #4285F4; color: white;">${header}</thead>
-          <tbody>${body}</tbody>
-        </table>`;
+        return `<div class="qa-table-wrap"><table class="qa-table"><thead>${header}</thead><tbody>${body}</tbody></table></div>`;
       };
       
       // Custom table header rendering
       renderer.tablecell = function(content, flags) {
         const type = flags.header ? 'th' : 'td';
-        const style = flags.header 
-          ? 'padding: 12px 8px; border: 1px solid #ddd; text-align: left; font-weight: 500;'
-          : 'padding: 10px 8px; border: 1px solid #ddd;';
-        return `<${type} style="${style}">${content}</${type}>`;
+        return `<${type}>${content}</${type}>`;
       };
       
       // Custom header rendering
       renderer.heading = function(text, level) {
-        const sizes = {
-          1: '1.4rem',
-          2: '1.3rem',
-          3: '1.2rem',
-          4: '1.1rem',
-          5: '1.05rem',
-          6: '1rem'
-        };
-        const margins = {
-          1: '25px 0 15px 0',
-          2: '20px 0 10px 0',
-          3: '20px 0 10px 0',
-          4: '15px 0 10px 0',
-          5: '15px 0 8px 0',
-          6: '15px 0 8px 0'
-        };
-        return `<h${level} style="margin: ${margins[level]}; color: #333; font-size: ${sizes[level]}; font-weight: 600;">${text}</h${level}>`;
+        return `<h${level} class="qa-h qa-h${level}">${text}</h${level}>`;
       };
       
       // Custom paragraph rendering
       renderer.paragraph = function(text) {
-        return `<p style="margin: 8px 0; line-height: 1.5;">${text}</p>`;
+        return `<p class="qa-p">${text}</p>`;
       };
       
       // Custom horizontal rule
       renderer.hr = function() {
-        return '<hr style="margin: 15px 0; border: none; border-top: 2px solid #ddd; border-radius: 1px;">';
+        return '<hr class="qa-hr">';
       };
       
       // Custom blockquote
       renderer.blockquote = function(quote) {
-        return `<blockquote style="margin: 10px 0; padding: 10px 15px; border-left: 4px solid #4285F4; background: #f8f9fa; font-style: italic; color: #555;">${quote}</blockquote>`;
+        return `<blockquote class="qa-blockquote">${quote}</blockquote>`;
       };
       
       // Custom code
       renderer.code = function(code, language) {
-        return `<pre style="background: #f1f3f4; padding: 12px; border-radius: 4px; margin: 10px 0; overflow-x: auto; font-family: monospace; font-size: 0.9em; color: #333;"><code>${code}</code></pre>`;
+        return `<pre class="qa-pre"><code>${code}</code></pre>`;
       };
       
       // Custom inline code
       renderer.codespan = function(code) {
-        return `<code style="background: #f1f3f4; padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 0.9em; color: #d73a49;">${code}</code>`;
+        return `<code class="qa-code-inline">${code}</code>`;
       };
       
       // Custom list rendering
       renderer.list = function(body, ordered) {
         const type = ordered ? 'ol' : 'ul';
-        return `<${type} style="margin: 10px 0; padding-left: 20px; line-height: 1.5;">${body}</${type}>`;
+        return `<${type} class="qa-list">${body}</${type}>`;
       };
       
       renderer.listitem = function(text) {
-        return `<li style="margin: 5px 0;">${text}</li>`;
+        return `<li class="qa-li">${text}</li>`;
       };
       
       // Parse markdown with custom renderer
       try {
         const html = marked(text, { renderer: renderer });
+        // If markdown markers still survive parsing, use robust fallback renderer.
+        if (/\*\*|`|(^|\s)-\s+\S/m.test(html.replace(/<[^>]+>/g, ''))) {
+          return basicMarkdownToHtml(text);
+        }
         return html;
       } catch (error) {
         console.error('Error parsing markdown:', error);
-        // Fallback to basic HTML escaping
-        return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return basicMarkdownToHtml(text);
       }
     }
 
+    function setAdminStatus(message, isError = false) {
+      const statusEl = document.getElementById('adminPanelStatus');
+      if (!statusEl) return;
+      statusEl.textContent = message || '';
+      statusEl.style.color = isError ? '#d32f2f' : '#2e7d32';
+    }
+
+    function initAdminPanel() {
+      const adminFab = document.getElementById('adminFab');
+      const adminPanel = document.getElementById('adminPanel');
+      const verifyAdminBtn = document.getElementById('verifyAdminBtn');
+      const wipeDataBtn = document.getElementById('wipeDataBtn');
+      const adminDangerZone = document.getElementById('adminDangerZone');
+      const adminPasswordInput = document.getElementById('adminPasswordInput');
+      const adminDeleteConfirmInput = document.getElementById('adminDeleteConfirmInput');
+
+      if (!adminFab || !adminPanel || !verifyAdminBtn || !wipeDataBtn) {
+        return;
+      }
+
+      adminFab.addEventListener('click', () => {
+        const nextDisplay = adminPanel.style.display === 'block' ? 'none' : 'block';
+        adminPanel.style.display = nextDisplay;
+        if (nextDisplay === 'block') {
+          setAdminStatus('');
+          adminPasswordInput.focus();
+        }
+      });
+
+      verifyAdminBtn.addEventListener('click', async () => {
+        const password = (adminPasswordInput.value || '').trim();
+        if (!password) {
+          setAdminStatus('Please enter the admin password.', true);
+          return;
+        }
+
+        try {
+          const formData = new FormData();
+          formData.append('password', password);
+
+          const response = await fetch('/admin/verify_password', {
+            method: 'POST',
+            body: formData
+          });
+
+          const data = await response.json();
+          if (!response.ok || !data.ok) {
+            adminDangerZone.style.display = 'none';
+            setAdminStatus(data.message || 'Password verification failed.', true);
+            return;
+          }
+
+          adminDangerZone.style.display = 'block';
+          setAdminStatus('Verified. Danger zone unlocked for this session.');
+        } catch (error) {
+          setAdminStatus(`Verification error: ${error.message || error}`, true);
+        }
+      });
+
+      wipeDataBtn.addEventListener('click', async () => {
+        const password = (adminPasswordInput.value || '').trim();
+        const confirmation = (adminDeleteConfirmInput.value || '').trim();
+        if (!password) {
+          setAdminStatus('Enter password before deleting.', true);
+          return;
+        }
+        if (!confirmation) {
+          setAdminStatus('Type confirmation phrase before deleting.', true);
+          return;
+        }
+
+        const proceed = window.confirm(
+          'This will permanently delete all files/folders inside /data. Continue?'
+        );
+        if (!proceed) {
+          return;
+        }
+
+        try {
+          const formData = new FormData();
+          formData.append('password', password);
+          formData.append('confirmation_text', confirmation);
+
+          const response = await fetch('/admin/wipe_data', {
+            method: 'POST',
+            body: formData
+          });
+
+          const data = await response.json();
+          if (!response.ok || !data.ok) {
+            setAdminStatus(data.message || 'Failed to delete /data contents.', true);
+            return;
+          }
+
+          setAdminStatus(
+            `Deleted /data contents (files: ${data.deleted_files ?? 0}, folders: ${data.deleted_dirs ?? 0}).`
+          );
+          adminDeleteConfirmInput.value = '';
+        } catch (error) {
+          setAdminStatus(`Delete request failed: ${error.message || error}`, true);
+        }
+      });
+    }
+
     // Event listeners for hypothesis conversation
     document.getElementById('start-hypothesis-conversation-btn').addEventListener('click', startHypothesisConversation);
     document.getElementById('send-hypothesis-message-btn').addEventListener('click', sendHypothesisMessage);
@@ -2823,6 +3668,8 @@
         sendHypothesisMessage();
       }
     });
+
+    initAdminPanel();
   </script>
 </body>
 </html>

main.py

@@ -9,6 +9,8 @@ import json
 import re
 import time
 import random
+import hmac
+import shutil
 from datetime import datetime
 from typing import List, Tuple, Optional, Dict, Any
 from contextlib import asynccontextmanager
@@ -645,6 +647,9 @@ embedding_model = None
 llm_QA = None
 llm_system_chart_extraction = None
 
+ADMIN_DELETE_CONFIRMATION_TEXT = "DELETE /data"
+DEFAULT_ADMIN_PURGE_PATH = "/data"
+
 def get_model_provider(model: str) -> Optional[str]:
     if model in OPENAI_MODELS:
         return "openai"
@@ -2879,6 +2884,127 @@ async def reload_databases():
         "total_files": sum(len(files) for files in FILE_REGISTRY.values())
     })
 
+def get_admin_password() -> Optional[str]:
+    password = os.environ.get("ADMIN_PASSWORD")
+    if password:
+        return password.strip()
+    return None
+
+def get_admin_purge_root() -> str:
+    configured = (os.environ.get("ADMIN_PURGE_PATH") or DEFAULT_ADMIN_PURGE_PATH).strip()
+    if not configured:
+        configured = DEFAULT_ADMIN_PURGE_PATH
+    return os.path.abspath(configured)
+
+def is_safe_admin_purge_root(path: str) -> bool:
+    normalized = os.path.abspath(path)
+    # Must be an absolute subpath, never root.
+    if normalized in {"/", ""}:
+        return False
+    if not normalized.startswith("/data"):
+        return False
+    return True
+
+def delete_directory_contents(path: str) -> Dict[str, int]:
+    deleted_files = 0
+    deleted_dirs = 0
+    for name in os.listdir(path):
+        target = os.path.join(path, name)
+        if os.path.isfile(target) or os.path.islink(target):
+            os.unlink(target)
+            deleted_files += 1
+        elif os.path.isdir(target):
+            shutil.rmtree(target)
+            deleted_dirs += 1
+    return {"deleted_files": deleted_files, "deleted_dirs": deleted_dirs}
+
+@app.post("/admin/verify_password")
+async def admin_verify_password(password: str = Form(...)):
+    admin_password = get_admin_password()
+    if not admin_password:
+        return JSONResponse(
+            content={"ok": False, "message": "ADMIN_PASSWORD is not configured on server."},
+            status_code=500
+        )
+
+    if not hmac.compare_digest(password or "", admin_password):
+        return JSONResponse(
+            content={"ok": False, "message": "Invalid admin password."},
+            status_code=403
+        )
+
+    return JSONResponse(content={"ok": True, "message": "Password verified."}, status_code=200)
+
+@app.post("/admin/wipe_data")
+async def admin_wipe_data(
+    password: str = Form(...),
+    confirmation_text: str = Form(...)
+):
+    admin_password = get_admin_password()
+    if not admin_password:
+        return JSONResponse(
+            content={"ok": False, "message": "ADMIN_PASSWORD is not configured on server."},
+            status_code=500
+        )
+
+    if not hmac.compare_digest(password or "", admin_password):
+        return JSONResponse(
+            content={"ok": False, "message": "Invalid admin password."},
+            status_code=403
+        )
+
+    if (confirmation_text or "").strip() != ADMIN_DELETE_CONFIRMATION_TEXT:
+        return JSONResponse(
+            content={
+                "ok": False,
+                "message": f"Invalid confirmation text. Type exactly: {ADMIN_DELETE_CONFIRMATION_TEXT}"
+            },
+            status_code=400
+        )
+
+    purge_root = get_admin_purge_root()
+    if not is_safe_admin_purge_root(purge_root):
+        return JSONResponse(
+            content={"ok": False, "message": f"Unsafe ADMIN_PURGE_PATH resolved to '{purge_root}'."},
+            status_code=400
+        )
+
+    if not os.path.exists(purge_root):
+        return JSONResponse(
+            content={"ok": False, "message": f"Purge path does not exist: {purge_root}"},
+            status_code=404
+        )
+
+    if not os.path.isdir(purge_root):
+        return JSONResponse(
+            content={"ok": False, "message": f"Purge path is not a directory: {purge_root}"},
+            status_code=400
+        )
+
+    try:
+        result = delete_directory_contents(purge_root)
+        logger.warning(
+            "Admin data wipe executed for %s (files=%s, dirs=%s)",
+            purge_root,
+            result["deleted_files"],
+            result["deleted_dirs"]
+        )
+        return JSONResponse(
+            content={
+                "ok": True,
+                "message": f"Deleted contents of {purge_root}.",
+                "deleted_files": result["deleted_files"],
+                "deleted_dirs": result["deleted_dirs"]
+            },
+            status_code=200
+        )
+    except Exception as e:
+        logger.exception("Admin data wipe failed: %s", str(e))
+        return JSONResponse(
+            content={"ok": False, "message": f"Failed to wipe data: {str(e)}"},
+            status_code=500
+        )
+
 def extract_citation_markers(hypothesis_text):
     """
     DEPRECATED: Extract citation markers like [1], [2], etc. from hypothesis text