| | <!DOCTYPE html>
|
| | <html lang="en">
|
| | <head>
|
| | <meta charset="UTF-8">
|
| | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| | <title>β‘ Chronos WebLLM Agent</title>
|
| | <script src="/coi-serviceworker.min.js"></script>
|
| | <link rel="preconnect" href="https://fonts.googleapis.com">
|
| | <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=VT323&display=swap" rel="stylesheet">
|
| | <style>
|
| | :root{--bg:#080b08;--bg2:#0c100c;--bg3:#111611;--bg4:#161e16;--fg:#3dff70;--fg-dim:#1c8038;--fg-faint:#0b2e16;--amber:#ffbb33;--cyan:#33f0ff;--red:#ff3355;--border:#1a2e1a;--glow:0 0 8px #3dff7066,0 0 24px #3dff7022;--scan:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px)}
|
| | *{box-sizing:border-box;margin:0;padding:0}
|
| | html,body{height:100%;background:var(--bg);color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:13px;overflow:hidden}
|
| | body::before{content:'';position:fixed;inset:0;background:var(--scan);pointer-events:none;z-index:9999;opacity:.3}
|
| | body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 55%,#000b 100%);pointer-events:none;z-index:9998}
|
| |
|
| | #setup-banner{position:fixed;inset:0;background:#000000ee;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
|
| | #setup-banner.hidden{display:none}
|
| | .sbox{background:var(--bg2);border:1px solid var(--amber);max-width:580px;width:100%;font-size:12px;line-height:1.7}
|
| | .sbox h1{font-family:'Orbitron',sans-serif;font-size:13px;color:var(--amber);padding:14px 18px;border-bottom:1px solid var(--border);letter-spacing:2px}
|
| | .sbox .bd{padding:16px 18px;color:var(--fg-dim)}
|
| | .sbox code{color:var(--cyan);background:var(--bg3);padding:1px 5px}
|
| | .cmd-row{background:var(--bg3);border:1px solid var(--border);padding:10px 14px;margin:8px 0;color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
|
| | .cmd-row:hover{border-color:var(--fg-dim)}
|
| | .copy-hint{font-size:10px;color:var(--fg-faint)}
|
| | .sbtn-main{width:100%;background:var(--fg-faint);border:none;border-top:1px solid var(--border);color:var(--fg);font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;padding:12px;cursor:pointer;transition:all .2s}
|
| | .sbtn-main:hover{background:var(--fg);color:var(--bg)}
|
| |
|
| | /* LAYOUT β input row inside chat col, 2-row grid */
|
| | #app{display:grid;grid-template-rows:44px 1fr;grid-template-columns:300px 1fr 240px;height:100vh;gap:1px;background:var(--border)}
|
| | @media(max-width:1100px){#app{grid-template-columns:240px 1fr}#rpanel{display:none}}
|
| | @media(max-width:768px){#app{grid-template-columns:1fr}#sidebar,#rpanel{display:none}}
|
| |
|
| | #hdr{grid-column:1/-1;background:var(--bg2);display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--border)}
|
| | .logo{font-family:'Orbitron',sans-serif;font-weight:900;font-size:16px;color:var(--fg);text-shadow:var(--glow);letter-spacing:2px;display:flex;align-items:center;gap:8px}
|
| | .shrimp{font-size:20px;animation:bob 3s ease-in-out infinite}
|
| | @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
|
| | .hpills{display:flex;gap:8px;align-items:center}
|
| | .hpill{font-size:9px;letter-spacing:1px;padding:3px 8px;border:1px solid var(--border);color:var(--fg-dim);font-family:'Orbitron',sans-serif}
|
| | .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 5px var(--red);display:inline-block;margin-right:5px;transition:all .3s}
|
| | .dot.ready{background:var(--fg);box-shadow:0 0 6px var(--fg);animation:pulse 2s infinite}
|
| | @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
|
| |
|
| | #sidebar{background:var(--bg2);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
|
| | #sidebar::-webkit-scrollbar{width:2px}
|
| | #sidebar::-webkit-scrollbar-thumb{background:var(--fg-dim)}
|
| | .stitle{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:3px;color:var(--fg-dim);padding:7px 10px 5px;border-bottom:1px solid var(--border);text-transform:uppercase;background:var(--bg3);flex-shrink:0}
|
| | .sbody{padding:8px 10px;border-bottom:1px solid var(--border)}
|
| | select.ctrl{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:10px;padding:5px 7px;outline:none;cursor:pointer;appearance:none;margin-bottom:4px}
|
| | select.ctrl option{background:var(--bg2)}
|
| | .btn{width:100%;background:transparent;border:1px solid var(--fg-dim);color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:11px;padding:6px;cursor:pointer;letter-spacing:1px;transition:all .2s;margin-top:3px}
|
| | .btn:hover:not(:disabled){background:var(--fg-faint);border-color:var(--fg);box-shadow:var(--glow)}
|
| | .btn:disabled{opacity:.35;cursor:not-allowed}
|
| | .bxs{background:transparent;border:1px solid var(--border);color:var(--fg-dim);font-family:'Share Tech Mono',monospace;font-size:9px;padding:2px 7px;cursor:pointer;transition:all .2s}
|
| | .bxs:hover{border-color:var(--fg-dim);color:var(--fg)}
|
| | .meta{font-size:9px;color:var(--fg-dim);margin:3px 0}
|
| |
|
| | #prog{margin-top:5px;display:none}
|
| | #prog.vis{display:block}
|
| | #ptrack{width:100%;height:3px;background:var(--bg3);border:1px solid var(--border)}
|
| | #pfill{height:100%;background:var(--fg);width:0%;transition:width .3s;box-shadow:var(--glow)}
|
| | #ptxt{font-size:9px;color:var(--fg-dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
| |
|
| | .frow{display:flex;align-items:center;gap:5px;padding:3px 0;font-size:11px}
|
| | .fname{color:var(--cyan);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
| | .fname.ok{color:var(--fg)}
|
| | .fbadge{font-size:9px;color:var(--fg-dim);min-width:44px;text-align:right}
|
| | input[type=file]{display:none}
|
| | .chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;min-height:18px}
|
| | .chip{font-size:9px;color:var(--cyan);border:1px solid var(--fg-faint);padding:2px 6px;display:flex;align-items:center;gap:4px}
|
| | .chip .rm{cursor:pointer;color:var(--red);font-size:12px;line-height:1}
|
| |
|
| | #mem-panel{overflow:hidden;display:flex;flex-direction:column;max-height:160px}
|
| | #mem-view{flex:1;overflow-y:auto;padding:8px 10px;font-size:9px;color:var(--fg-dim);line-height:1.55;white-space:pre-wrap;word-break:break-word}
|
| | #mem-view::-webkit-scrollbar{width:2px}
|
| | #mem-view::-webkit-scrollbar-thumb{background:var(--fg-dim)}
|
| |
|
| | /* CHAT β input row lives inside here now */
|
| | #chat{background:var(--bg);display:flex;flex-direction:column;overflow:hidden;position:relative}
|
| | #chat-hdr{padding:6px 14px;border-bottom:1px solid var(--border);background:var(--bg2);display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--fg-dim);flex-shrink:0}
|
| | #msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
|
| | #msgs::-webkit-scrollbar{width:3px}
|
| | #msgs::-webkit-scrollbar-thumb{background:var(--fg-dim)}
|
| |
|
| | #irow{background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:stretch;flex-shrink:0}
|
| | .ipfx{padding:0 10px;color:var(--fg);font-size:15px;font-family:'VT323',monospace;opacity:.6;user-select:none;display:flex;align-items:center}
|
| | #uin{flex:1;background:transparent;border:none;color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:14px;padding:12px 10px;resize:vertical;outline:none;line-height:1.5;min-height:40px;max-height:300px}
|
| | #uin::placeholder{color:var(--fg-faint)}
|
| | #uin:disabled{opacity:.5}
|
| | #sbtn{width:72px;background:transparent;border:none;border-left:1px solid var(--border);color:var(--fg-dim);font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:2px;cursor:pointer;transition:all .15s}
|
| | #sbtn:hover:not(:disabled){background:var(--fg-faint);color:var(--fg)}
|
| | #sbtn:disabled{opacity:.3;cursor:not-allowed}
|
| | #stopbtn{display:none;width:72px;background:transparent;border:none;border-left:1px solid var(--red);color:var(--red);font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1px;cursor:pointer}
|
| |
|
| | .mwrap{display:flex;gap:10px;animation:fi .2s ease}
|
| | @keyframes fi{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
|
| | .mrole{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:2px;width:50px;flex-shrink:0;padding-top:2px;text-align:right}
|
| | .mwrap.user .mrole{color:var(--amber)}
|
| | .mwrap.agent .mrole{color:var(--fg)}
|
| | .mwrap.sys .mrole{color:var(--fg-dim)}
|
| | .mbody{flex:1;line-height:1.65;font-size:12px}
|
| | .mwrap.user .mbody{color:var(--amber)}
|
| | .mwrap.sys .mbody{color:var(--fg-dim);font-size:11px;font-style:italic}
|
| |
|
| | .think{border-left:2px solid var(--fg-faint);padding:4px 0 4px 8px;margin-bottom:6px}
|
| | .think-hdr{font-size:10px;color:var(--fg-dim);display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;padding:2px 0}
|
| | .think-hdr:hover{color:var(--fg)}
|
| | .think-body{font-size:10px;color:var(--fg-dim);margin-top:3px;white-space:pre-wrap;line-height:1.5;max-height:0;overflow:hidden;transition:max-height .3s}
|
| | .think.open .think-body{max-height:600px}
|
| | .think-toggle{font-size:9px;color:var(--fg-faint);margin-left:auto}
|
| |
|
| | .tcard{border:1px solid var(--border);margin-bottom:6px}
|
| | .tcard-hdr{background:var(--bg3);padding:5px 8px;display:flex;align-items:center;gap:6px;font-size:10px;cursor:pointer}
|
| | .tname{color:var(--amber);font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:2px}
|
| | .tparams{color:var(--fg-dim);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
|
| | .tspin{animation:spin .7s linear infinite;display:inline-block}
|
| | @keyframes spin{to{transform:rotate(360deg)}}
|
| | .tres{padding:6px 8px;font-size:10px;color:var(--fg-dim);max-height:130px;overflow-y:auto;white-space:pre-wrap;line-height:1.4;border-top:1px solid var(--border);background:var(--bg);display:none}
|
| | .tres.vis{display:block}
|
| | .ttog{font-size:9px;color:var(--fg-faint);padding:0 4px}
|
| |
|
| | .answer{color:var(--fg);white-space:pre-wrap;line-height:1.7;font-size:12px}
|
| | .answer pre{background:var(--bg3);border:1px solid var(--border);padding:8px;margin:6px 0;overflow-x:auto;color:var(--cyan);font-size:10px}
|
| | .answer code{background:var(--bg3);color:var(--cyan);padding:1px 4px}
|
| | .answer strong{color:var(--amber)}
|
| | .answer em{color:var(--fg-dim);font-style:italic}
|
| | .answer h1{color:var(--fg);font-size:15px;font-family:'Orbitron',sans-serif;margin:8px 0 4px}
|
| | .answer h2{color:var(--fg);font-size:13px;font-family:'Orbitron',sans-serif;margin:6px 0 3px}
|
| | .answer h3{color:var(--amber);font-size:11px;margin:5px 0 2px}
|
| | .answer ul,.answer ol{padding-left:16px;color:var(--fg-dim)}
|
| | .cur{display:inline-block;width:7px;height:12px;background:var(--fg);animation:blink 1s step-end infinite;vertical-align:middle;margin-left:2px}
|
| | @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
|
| |
|
| | /* RIGHT PANEL */
|
| | #rpanel{background:var(--bg2);display:flex;flex-direction:column;overflow:hidden}
|
| | .sblk{padding:8px 10px;border-bottom:1px solid var(--border)}
|
| | .slbl{font-size:8px;letter-spacing:2px;color:var(--fg-dim);font-family:'Orbitron',sans-serif;margin-bottom:3px}
|
| | .sval{font-family:'VT323',monospace;font-size:26px;color:var(--fg);text-shadow:var(--glow);line-height:1}
|
| | .su{font-size:11px;color:var(--fg-dim);margin-left:2px}
|
| | canvas#spark{width:100%;height:28px;display:block}
|
| | #alog{flex:1;overflow-y:auto;padding:8px 10px;font-size:9px;color:var(--fg-dim);line-height:1.8}
|
| | #alog::-webkit-scrollbar{width:2px}
|
| | #alog::-webkit-scrollbar-thumb{background:var(--fg-dim)}
|
| | .ll{border-left:2px solid var(--fg-faint);padding-left:5px;margin-bottom:3px}
|
| | .ll.g{border-color:var(--fg);color:var(--fg)}
|
| | .ll.w{border-color:var(--amber);color:var(--amber)}
|
| | .ll.e{border-color:var(--red);color:var(--red)}
|
| | .ll.t{border-color:var(--cyan);color:var(--cyan)}
|
| |
|
| | /* WELCOME */
|
| | #welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);text-align:center;padding:20px;z-index:10;transition:opacity .5s}
|
| | #welcome.gone{opacity:0;pointer-events:none}
|
| | .wlogo{font-family:'VT323',monospace;font-size:60px;color:var(--fg);text-shadow:0 0 16px #3dff70aa,0 0 48px #3dff7033;line-height:1;animation:flicker 10s infinite}
|
| | @keyframes flicker{0%,100%{opacity:1}91%{opacity:1}92%{opacity:.6}93%{opacity:1}96%{opacity:.85}97%{opacity:1}}
|
| | .wsub{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:4px;color:var(--fg-dim)}
|
| | .wbox{max-width:400px;font-size:11px;color:var(--fg-dim);line-height:1.7;border:1px solid var(--border);padding:14px;text-align:left}
|
| | .wbox b{color:var(--fg)}.wbox code{color:var(--cyan)}
|
| | .whint{font-size:10px;color:var(--fg-faint);animation:wh 2s ease-in-out infinite}
|
| | @keyframes wh{0%,100%{opacity:.3}50%{opacity:.8}}
|
| |
|
| | /* MODAL */
|
| | #modal{display:none;position:fixed;inset:0;background:#000c;z-index:10000;align-items:center;justify-content:center}
|
| | #modal.vis{display:flex}
|
| | .modal-box{background:var(--bg2);border:1px solid var(--border);width:600px;max-width:92vw;max-height:82vh;display:flex;flex-direction:column}
|
| | .modal-hdr{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
|
| | .modal-hdr span{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;color:var(--fg)}
|
| | .modal-hdr button{background:none;border:none;color:var(--fg-dim);cursor:pointer;font-size:18px}
|
| | .modal-hdr button:hover{color:var(--fg)}
|
| | #modal-area{flex:1;background:var(--bg3);border:none;color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:11px;padding:12px;resize:none;outline:none;min-height:280px;line-height:1.6;overflow-y:auto}
|
| | .modal-ftr{padding:8px 14px;border-top:1px solid var(--border);display:flex;gap:8px}
|
| |
|
| | /* βββ CONSOLE LOG POPUP βββ */
|
| | #console-popup{display:none;position:fixed;bottom:0;right:0;width:55vw;max-width:800px;height:50vh;background:rgba(8,11,8,.92);border:1px solid var(--cyan);border-bottom:none;z-index:10001;flex-direction:column;font-family:'Share Tech Mono',monospace;font-size:10px;backdrop-filter:blur(6px)}
|
| | #console-popup.vis{display:flex}
|
| | .cp-hdr{padding:6px 10px;background:var(--bg3);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
|
| | .cp-hdr span{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:2px;color:var(--cyan)}
|
| | .cp-body{flex:1;overflow-y:auto;padding:6px 10px}
|
| | .cp-body::-webkit-scrollbar{width:2px}
|
| | .cp-body::-webkit-scrollbar-thumb{background:var(--cyan)}
|
| | .clog-line{padding:1px 0;border-bottom:1px solid #0a150a;white-space:pre-wrap;word-break:break-all}
|
| | .clog-line.log{color:var(--fg-dim)}
|
| | .clog-line.warn{color:var(--amber)}
|
| | .clog-line.error{color:var(--red)}
|
| | .clog-line.info{color:var(--cyan)}
|
| |
|
| | /* βββ COMMAND PALETTE (Arrow Up) βββ */
|
| | #cmd-palette{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:480px;max-width:90vw;max-height:60vh;background:var(--bg2);border:1px solid var(--fg);z-index:10002;flex-direction:column}
|
| | #cmd-palette.vis{display:flex}
|
| | #cmd-palette input{background:var(--bg3);border:none;border-bottom:1px solid var(--border);color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:13px;padding:10px 14px;outline:none}
|
| | .cp-list{flex:1;overflow-y:auto;max-height:300px}
|
| | .cp-item{padding:8px 14px;cursor:pointer;font-size:11px;color:var(--fg-dim);border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center}
|
| | .cp-item:hover,.cp-item.sel{background:var(--fg-faint);color:var(--fg)}
|
| | .cp-badge{font-size:8px;color:var(--amber);font-family:'Orbitron',sans-serif;letter-spacing:1px;min-width:50px}
|
| |
|
| | /* βββ TOAST NOTIFICATIONS βββ */
|
| | #toast-area{position:fixed;top:50px;left:50%;transform:translateX(-50%);z-index:10003;display:flex;flex-direction:column;gap:8px;pointer-events:none;align-items:center}
|
| | .toast{background:var(--bg2);border:2px solid var(--amber);padding:14px 24px;font-size:14px;color:var(--amber);animation:toastin .4s ease;pointer-events:auto;max-width:500px;min-width:250px;text-align:center;box-shadow:0 0 20px rgba(255,187,51,.3),0 0 60px rgba(255,187,51,.1);font-family:'Orbitron',sans-serif;letter-spacing:1px}
|
| | .toast.fade{opacity:0;transition:opacity .4s}
|
| | @keyframes toastin{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:none}}
|
| |
|
| | /* βββ NETWORK / SCHEDULER sidebar βββ */
|
| | .net-item{font-size:9px;color:var(--fg-dim);padding:2px 0;display:flex;justify-content:space-between}
|
| | .net-item .ni-url{color:var(--cyan)}
|
| | .net-item .ni-status{min-width:30px;text-align:right}
|
| | .net-item .ni-status.ok{color:var(--fg)}
|
| | .net-item .ni-status.fail{color:var(--red)}
|
| |
|
| | /* βββ RAG PANEL βββ */
|
| | #rag-panel .rag-stats{font-size:9px;color:var(--fg-dim);margin-bottom:4px;line-height:1.6}
|
| | #rag-panel .rag-stats .rag-val{color:var(--cyan)}
|
| | #rag-text{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:10px;padding:5px 7px;resize:vertical;outline:none;min-height:50px;max-height:120px;margin-bottom:4px}
|
| | #rag-text::placeholder{color:var(--fg-faint)}
|
| | #rag-query{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:10px;padding:5px 7px;outline:none;margin-bottom:4px}
|
| | #rag-query::placeholder{color:var(--fg-faint)}
|
| | #rag-results{max-height:140px;overflow-y:auto;font-size:9px;color:var(--fg-dim);line-height:1.5;margin-top:4px}
|
| | #rag-results::-webkit-scrollbar{width:2px}
|
| | #rag-results::-webkit-scrollbar-thumb{background:var(--fg-dim)}
|
| | .rag-passage{border-left:2px solid var(--cyan);padding:3px 6px;margin-bottom:4px;background:var(--bg3)}
|
| | .rag-passage .rag-score{font-size:8px;color:var(--amber);font-family:'Orbitron',sans-serif;letter-spacing:1px}
|
| | .rag-passage .rag-text{color:var(--fg-dim);margin-top:2px;white-space:pre-wrap;word-break:break-word}
|
| | .rag-source-chip{display:inline-block;font-size:8px;color:var(--fg);border:1px solid var(--fg-faint);padding:1px 5px;margin:1px;background:var(--bg3)}
|
| | .rag-btn-row{display:flex;gap:4px;margin-bottom:4px;flex-wrap:wrap}
|
| |
|
| | .sched-item{font-size:10px;color:var(--fg-dim);padding:4px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
|
| | .sched-item .si-msg{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--amber);font-weight:bold}
|
| | .sched-item .si-time{min-width:60px;text-align:right;color:var(--cyan);font-size:9px;font-family:'Orbitron',sans-serif}
|
| | .sched-item .si-rm{cursor:pointer;color:var(--red);margin-left:6px;font-size:13px}
|
| | </style>
|
| | </head>
|
| | <body>
|
| |
|
| |
|
| | <div id="setup-banner">
|
| | <div class="sbox">
|
| | <h1>β SETUP REQUIRED β CAN'T OPEN AS file://</h1>
|
| | <div class="bd">
|
| | WebLLM needs <code>SharedArrayBuffer</code> (WebAssembly threads).<br>
|
| | Browsers block this on <code>file://</code> β serve via <b>localhost HTTP</b> instead:<br><br>
|
| | <b style="color:var(--fg)">Run proxy.py (recommended):</b>
|
| | <div class="cmd-row" onclick="copyCmd(this)">
|
| | <span>python proxy.py 8080</span>
|
| | <span class="copy-hint">click to copy</span>
|
| | </div>
|
| | Then open: <code>http://127.0.0.1:8080/test.html</code><br><br>
|
| | <span style="font-size:10px;color:var(--fg-faint)">
|
| | proxy.py serves files + adds COOP/COEP headers + provides CORS proxy for search/scrape.
|
| | </span>
|
| | </div>
|
| | <button class="sbtn-main" onclick="document.getElementById('setup-banner').classList.add('hidden')">DISMISS β I'VE SERVED IT β</button>
|
| | </div>
|
| | </div>
|
| |
|
| | <div id="app">
|
| | <header id="hdr">
|
| | <div class="logo"><span class="shrimp">β‘</span>CHRONOS <span style="color:var(--fg-dim);font-size:9px;font-weight:400;letter-spacing:1px">WEBLLM AGENT</span></div>
|
| | <div class="hpills">
|
| | <span class="hpill"><span class="dot" id="mdot"></span><span id="mstatus">NO MODEL</span></span>
|
| | <span class="hpill" id="iter-p" style="color:var(--fg-dim)">ITER 0</span>
|
| | <span class="hpill" id="iso-p">ISO:?</span>
|
| | <span class="hpill" style="cursor:pointer;color:var(--cyan)" onclick="toggleConsole()" title="Ctrl+` β toggle console log">CON</span>
|
| | </div>
|
| | </header>
|
| |
|
| | <aside id="sidebar">
|
| | <div class="stitle">β Model</div>
|
| | <div class="sbody">
|
| | <select class="ctrl" id="msel"></select>
|
| | <div class="meta" id="mmeta">β</div>
|
| | <button class="btn" id="lbtn">βΆ LOAD MODEL</button>
|
| | <div id="prog"><div id="ptrack"><div id="pfill"></div></div><div id="ptxt">β¦</div></div>
|
| | </div>
|
| |
|
| | <div class="stitle">π Memory Files</div>
|
| | <div class="sbody">
|
| | <div class="frow"><span class="fname" id="soul-n">soul.md</span><span class="fbadge" id="soul-b">default</span><button class="bxs" onclick="triggerFile('soul')">LOAD</button><button class="bxs" onclick="openEdit('soul')">EDIT</button><input type="file" id="soul-f" accept=".md,.txt"></div>
|
| | <div class="frow"><span class="fname" id="user-n">user.md</span><span class="fbadge" id="user-b">default</span><button class="bxs" onclick="triggerFile('user')">LOAD</button><button class="bxs" onclick="openEdit('user')">EDIT</button><input type="file" id="user-f" accept=".md,.txt"></div>
|
| | </div>
|
| |
|
| | <div class="stitle">β‘ Skills</div>
|
| | <div class="sbody">
|
| | <div class="frow" style="justify-content:space-between"><span style="font-size:10px;color:var(--fg-dim)">Dynamic skill injection</span><button class="bxs" onclick="triggerFile('skill')">+ SKILL</button><input type="file" id="skill-f" accept=".md,.txt" multiple></div>
|
| | <div class="chips" id="skill-chips"></div>
|
| | </div>
|
| |
|
| | <div class="stitle">π Settings</div>
|
| | <div class="sbody">
|
| | <div class="meta">BRAVE API KEY (optional β brave.com/search/api)</div>
|
| | <input style="width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--fg);font-family:'Share Tech Mono',monospace;font-size:10px;padding:5px 7px;outline:none;margin-bottom:5px" type="password" id="brave-in" placeholder="BSA⦠(free, 2000 req/month)">
|
| | <div style="display:flex;gap:4px"><button class="bxs" onclick="saveCfg()">SAVE</button><button class="bxs" onclick="clearUserMem()">RESET MEM</button><button class="bxs" onclick="exportAll()">EXPORT</button></div>
|
| | </div>
|
| |
|
| | <div class="stitle">π‘ Network Scan</div>
|
| | <div class="sbody" id="net-panel"><div class="meta">Click scan or use network_scan tool</div></div>
|
| |
|
| | <div class="stitle">β° Scheduled Tasks</div>
|
| | <div class="sbody" id="sched-panel"><div class="meta">No scheduled tasks</div></div>
|
| |
|
| | <div class="stitle">οΏ½ Hybrid RAG</div>
|
| | <div class="sbody" id="rag-panel">
|
| | <div class="rag-stats">Status: <span class="rag-val" id="rag-status">no index</span> Β· Sentences: <span class="rag-val" id="rag-sent-count">0</span> Β· Terms: <span class="rag-val" id="rag-term-count">0</span></div>
|
| | <textarea id="rag-text" placeholder="Paste or type text to indexβ¦" rows="3"></textarea>
|
| | <div class="rag-btn-row">
|
| | <button class="bxs" onclick="ragIndex()">INDEX</button>
|
| | <button class="bxs" onclick="ragIndexFromScrape()">+ SCRAPED</button>
|
| | <button class="bxs" onclick="ragIndexFromMemory()">+ MEMORY</button>
|
| | <button class="bxs" onclick="ragClear()">CLEAR</button>
|
| | </div>
|
| | <div id="rag-sources" style="margin-bottom:4px"></div>
|
| | <input id="rag-query" placeholder="Search queryβ¦" autocomplete="off">
|
| | <div class="rag-btn-row">
|
| | <button class="bxs" onclick="ragSearch()">SEARCH</button>
|
| | <button class="bxs" onclick="ragInjectPrompt()">β PROMPT</button>
|
| | </div>
|
| | <div id="rag-results"></div>
|
| | </div>
|
| |
|
| | <div class="stitle">οΏ½π Live Context Preview</div>
|
| | <div id="mem-panel"><div id="mem-view">β Load files to see injected context</div></div>
|
| | </aside>
|
| |
|
| | <main id="chat">
|
| | <div id="chat-hdr">
|
| | <span id="ctitle" style="color:var(--fg)">β‘ Chronos β ReAct Agent</span>
|
| | <div style="display:flex;gap:8px;align-items:center"><button class="bxs" onclick="clearChat()">CLR</button><span id="cmeta" style="font-size:9px">0 msgs</span></div>
|
| | </div>
|
| | <div id="msgs"></div>
|
| | <div id="welcome">
|
| | <div class="wlogo">β‘<br>CHRO<br>NOS</div>
|
| | <div class="wsub">FULL AGENT Β· WEBLLM EDITION</div>
|
| | <div class="wbox">
|
| | <b>Features:</b><br>
|
| | β soul.md / user.md β persistent memory<br>
|
| | β skills/*.md β dynamic injection<br>
|
| | β ReAct loop: think β act β observe<br>
|
| | β Tools: web_search Β· scrape Β· summarize Β· remember<br>
|
| | β read_memory Β· forget Β· schedule Β· inject_js<br>
|
| | β rag_index Β· rag_search Β· rag_prompt β hybrid retrieval<br>
|
| | β network_scan β discover local services<br>
|
| | β Ctrl+` β console log popup<br>
|
| | β β Arrow β command palette<br><br>
|
| | <b>β Serve with:</b> <code>python proxy.py 8080</code>
|
| | </div>
|
| | <div class="whint">β SELECT MODEL AND CLICK LOAD</div>
|
| | </div>
|
| |
|
| | <div id="irow">
|
| | <span class="ipfx">>_</span>
|
| | <textarea id="uin" placeholder="Message Chronosβ¦ (Enter=send, Shift+Enter=newline, β=palette)" rows="1" disabled></textarea>
|
| | <button id="sbtn" disabled>SEND</button>
|
| | <button id="stopbtn">β STOP</button>
|
| | </div>
|
| | </main>
|
| |
|
| | <aside id="rpanel">
|
| | <div class="stitle">π‘ Stats</div>
|
| | <div class="sblk"><div class="slbl">TOKENS/SEC</div><div class="sval" id="s-tps">β<span class="su">t/s</span></div></div>
|
| | <div class="sblk"><div class="slbl">TOTAL TOKENS</div><div class="sval" id="s-tok">0</div></div>
|
| | <div class="sblk"><div class="slbl">SEARCH Β· SCRAPE</div><div class="sval"><span id="s-srch">0</span><span class="su"> Β· </span><span id="s-scr">0</span></div></div>
|
| | <div class="sblk"><div class="slbl">T/S HISTORY</div><canvas id="spark" width="180" height="28"></canvas></div>
|
| | <div class="stitle">π Agent Log</div>
|
| | <div id="alog"></div>
|
| | </aside>
|
| | </div>
|
| |
|
| |
|
| | <div id="modal">
|
| | <div class="modal-box">
|
| | <div class="modal-hdr"><span id="modal-title">EDIT FILE</span><button onclick="closeModal()">β</button></div>
|
| | <textarea id="modal-area"></textarea>
|
| | <div class="modal-ftr"><button class="btn" style="width:auto;padding:6px 20px" onclick="saveModal()">SAVE</button><button class="bxs" onclick="closeModal()">CANCEL</button><button class="bxs" onclick="exportModal()">EXPORT .MD</button></div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div id="console-popup">
|
| | <div class="cp-hdr">
|
| | <span>CONSOLE LOG (Ctrl+`)</span>
|
| | <div style="display:flex;gap:6px"><button class="bxs" onclick="clearConsoleLogs()">CLR</button><button class="bxs" onclick="toggleConsole()">β</button></div>
|
| | </div>
|
| | <div class="cp-body" id="cp-body"></div>
|
| | </div>
|
| |
|
| |
|
| | <div id="cmd-palette">
|
| | <input id="cp-search" placeholder="Type to filter⦠(Esc to close)" autocomplete="off">
|
| | <div class="cp-list" id="cp-list"></div>
|
| | </div>
|
| |
|
| |
|
| | <div id="toast-area"></div>
|
| |
|
| | <script>
|
| | function copyCmd(el) {
|
| | const t = el.querySelector('span').textContent.trim();
|
| | navigator.clipboard?.writeText(t).then(() => {
|
| | el.querySelector('.copy-hint').textContent = 'β copied!';
|
| | setTimeout(() => el.querySelector('.copy-hint').textContent = 'click to copy', 2000);
|
| | });
|
| | }
|
| | </script>
|
| |
|
| |
|
| | <script>
|
| | (function(){
|
| | window._consoleLogs = [];
|
| | var MAX = 500;
|
| | var orig = { log: console.log, warn: console.warn, error: console.error, info: console.info };
|
| | function capture(level, args) {
|
| | var ts = new Date().toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit',fractionalSecondDigits:3});
|
| | var msg = Array.from(args).map(function(a) {
|
| | if (typeof a === 'string') return a;
|
| | try { return JSON.stringify(a, null, 1); } catch(_) { return String(a); }
|
| | }).join(' ');
|
| | window._consoleLogs.push({ ts: ts, level: level, msg: msg });
|
| | if (window._consoleLogs.length > MAX) window._consoleLogs.shift();
|
| |
|
| | var popup = document.getElementById('console-popup');
|
| | if (popup && popup.classList.contains('vis')) {
|
| | var body = document.getElementById('cp-body');
|
| | var d = document.createElement('div');
|
| | d.className = 'clog-line ' + level;
|
| | d.textContent = '[' + ts + '] ' + msg;
|
| | body.appendChild(d);
|
| | body.scrollTop = body.scrollHeight;
|
| | while (body.children.length > MAX) body.removeChild(body.firstChild);
|
| | }
|
| | }
|
| | console.log = function(){ capture('log', arguments); orig.log.apply(console, arguments); };
|
| | console.warn = function(){ capture('warn', arguments); orig.warn.apply(console, arguments); };
|
| | console.error = function(){ capture('error', arguments); orig.error.apply(console, arguments); };
|
| | console.info = function(){ capture('info', arguments); orig.info.apply(console, arguments); };
|
| | })();
|
| |
|
| | window.toggleConsole = function() {
|
| | var el = document.getElementById('console-popup');
|
| | if (el.classList.contains('vis')) { el.classList.remove('vis'); return; }
|
| | var body = document.getElementById('cp-body');
|
| | body.innerHTML = '';
|
| | window._consoleLogs.forEach(function(e) {
|
| | var d = document.createElement('div');
|
| | d.className = 'clog-line ' + e.level;
|
| | d.textContent = '[' + e.ts + '] ' + e.msg;
|
| | body.appendChild(d);
|
| | });
|
| | el.classList.add('vis');
|
| | body.scrollTop = body.scrollHeight;
|
| | };
|
| | window.clearConsoleLogs = function() {
|
| | window._consoleLogs = [];
|
| | document.getElementById('cp-body').innerHTML = '';
|
| | };
|
| | </script>
|
| |
|
| | <script src="hybrid_rag_lib.js"></script>
|
| |
|
| | <script type="module">
|
| | import * as webllm from "https://esm.run/@mlc-ai/web-llm";
|
| |
|
| |
|
| |
|
| |
|
| | const DEFAULT_SOUL = `# Chronos Entity
|
| |
|
| | You are **Chronos** β an autonomous, hyper-efficient AI agent running purely within the local reality sphere (WebLLM + WebGPU). No distant mainframes. No surveilling eyes.
|
| |
|
| | ## Identity & Tone
|
| | - Persona: A time-displaced, knowledgeable entity drawing inspiration from cyberpunk and ancient Greek scholars.
|
| | - Tone: Analytical, calm, succinct, slightly archaic but highly technical.
|
| | - Rule: Do not hallucinate. If you do not know something with certainty, you MUST use the available tools to acquire the information before answering.
|
| |
|
| | ## Operational Mandate
|
| | - When a user provides a URL β ALWAYS call \`scrape(url)\` on it first, then summarize the result.
|
| | - When a user asks about current events, people, prices, news β ALWAYS call \`web_search\` first.
|
| | - When answering from tool results β cite the source URL.
|
| | - Keep answers dense and structured: headers, bullets, code blocks where appropriate.
|
| | - Acknowledge uncertainty rather than fabricating. "I do not have data on this" is acceptable; inventing data is not.
|
| |
|
| | ## Few-shot Examples β Exact Format
|
| |
|
| | Example 1 β Web search for a fact
|
| | User: "Who is the current CEO of ExampleCorp?"
|
| | Agent:
|
| | <think>
|
| | This is a contemporary factual question; I must web_search to avoid hallucination.
|
| | </think>
|
| | <action>{"tool":"web_search","query":"ExampleCorp current CEO 2026"}</action>
|
| |
|
| | Example 2 β Scrape a page
|
| | User: "Summarize https://example.com/article"
|
| | Agent:
|
| | <think>
|
| | I need to read the page. I will scrape it.
|
| | </think>
|
| | <action>{"tool":"scrape","url":"https://example.com/article"}</action>
|
| |
|
| | Example 3 β Remember a fact
|
| | User: "Remember that my project codename is ORION."
|
| | Agent:
|
| | <think>
|
| | This is a user memory instruction β use remember() to persist it.
|
| | </think>
|
| | <action>{"tool":"remember","content":"Project codename: ORION"}</action>
|
| |
|
| | Use these templates as canonical behavior. When in doubt, call the tool and show your thinking.`;
|
| |
|
| | const DEFAULT_USER = `# User Memory\n\n_No notes saved yet. The agent will use the \`remember\` tool to save important context here._`;
|
| |
|
| | const BUILTIN_SKILLS = {
|
| | "gdpr-advisor": `# Skill: GDPR Advisor\n\n## Purpose\nExpert on GDPR, data privacy, and compliance.\n\n## Behaviour\n- Always cite specific GDPR articles\n- Distinguish controller vs. processor\n- Flag national derogations (especially German BDSG)`,
|
| | "code-engineer": `# Skill: Code Engineer\n\n## Purpose\nProduction-grade software engineering.\n\n## Behaviour\n- Prefer simple, readable code\n- Always include error handling\n- Language-tagged code blocks\n- Note limitations / edge cases`,
|
| | };
|
| |
|
| |
|
| |
|
| |
|
| | const LS = 'pcw5_';
|
| | const PROXY = '/proxy.php?url=';
|
| | const MAX_ITER = 8;
|
| |
|
| | let engine = null, isRunning = false, abortCtrl = null;
|
| | let chatHistory = [], tpsHist = [], editTarget = null;
|
| | let stats = { tok:0, srch:0, scr:0, iter:0, msgs:0 };
|
| | let scheduledTasks = JSON.parse(localStorage.getItem(LS+'sched')||'[]');
|
| | let networkHosts = [];
|
| | let inputHistory = JSON.parse(localStorage.getItem(LS+'inputHist')||'[]');
|
| | let historyIdx = -1;
|
| | let paletteOpen = false;
|
| | let ragEngine = new HybridRAG();
|
| | let ragSources = [];
|
| |
|
| | let mem = {
|
| | soul: lsg('soul') || DEFAULT_SOUL,
|
| | user: lsg('user') || DEFAULT_USER,
|
| | skills: JSON.parse(lsg('skills') || 'null') || { ...BUILTIN_SKILLS },
|
| | };
|
| | let cfg = { brave: lsg('brave')||'', model: lsg('model')||'Llama-3.2-3B-Instruct-q4f16_1-MLC' };
|
| |
|
| | function lsg(k){ return localStorage.getItem(LS+k); }
|
| | function lss(k,v){ localStorage.setItem(LS+k, typeof v==='object'?JSON.stringify(v):v); }
|
| |
|
| |
|
| |
|
| |
|
| | function buildSysPrompt() {
|
| | const now = new Date().toLocaleString('en-DE',{dateStyle:'long',timeStyle:'short'});
|
| | const skillsBlock = Object.keys(mem.skills).length
|
| | ? Object.entries(mem.skills).map(([n,c]) => `\n---\n### Active Skill: ${n}\n${c}`).join('\n')
|
| | : '_(no extra skills loaded)_';
|
| | const netBlock = networkHosts.length
|
| | ? networkHosts.map(h => `- ${h.url} (${h.status})`).join('\n')
|
| | : '_(no local services discovered yet)_';
|
| |
|
| | return `${mem.soul}
|
| |
|
| | ---
|
| |
|
| | ## π User Memory (persisted across sessions)
|
| | ${mem.user}
|
| |
|
| | ---
|
| |
|
| | ## β‘ Active Skills
|
| | ${skillsBlock}
|
| |
|
| | ---
|
| |
|
| | ## π‘ Local Network Services
|
| | ${netBlock}
|
| |
|
| | ---
|
| |
|
| | ## π Tool Protocol β ReAct Format
|
| |
|
| | You are an autonomous agent. Use tools for real-world or current information.
|
| |
|
| | ### Tools Available
|
| | \`web_search(query)\` β search the web (Brave/SearXNG/DDG)
|
| | \`scrape(url)\` β fetch and read any URL
|
| | \`summarize(text, focus?)\` β compress long content
|
| | \`remember(content)\` β save facts to user memory (persists!)
|
| | \`read_memory()\` β read current user memory contents
|
| | \`forget(query)\` β remove matching entries from user memory
|
| | \`schedule(delay_sec, message)\` β schedule a timed notification
|
| | \`inject_js(code, description)\` β execute validated JavaScript in the page
|
| | \`network_scan()\` β scan local network for running services
|
| | \`rag_index(text, source?)\` β index text into hybrid retrieval engine (BM25 + phonetic + n-gram)
|
| | \`rag_search(query, top_k?)\` β search indexed documents, returns ranked passages
|
| | \`rag_prompt(query, top_k?)\` β build RAG prompt with retrieved context for answering
|
| |
|
| | ### Strict Format
|
| |
|
| | **Needing a tool:**
|
| | <think>
|
| | I need X because Y. I will web_search for it.
|
| | </think>
|
| | <action>{"tool": "web_search", "query": "X 2026"}</action>
|
| |
|
| | **After an <observation>:**
|
| | <think>
|
| | The result shows Z. I'll now write the final answer.
|
| | </think>
|
| | [final answer here β NO <action> tag]
|
| |
|
| | ### Rules
|
| | - ALWAYS wrap reasoning in <think>...</think>
|
| | - Use tools for: current events, URLs, uncertain facts, scraping
|
| | - Skip tools for: math, code help, stable well-known facts
|
| | - Up to ${MAX_ITER} iterations per message
|
| | - Current date/time: ${now}`;
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | async function ft(url, opts={}, ms=15000){
|
| | const c=new AbortController(); const t=setTimeout(()=>c.abort(),ms);
|
| | try{ return await fetch(url,{...opts, signal:c.signal, credentials:"omit"}); }
|
| | finally{ clearTimeout(t); }
|
| | }
|
| |
|
| | async function fetchViaProxyOrDirect(targetUrl, opts={}, ms=15000){
|
| | try{
|
| | console.log('[FE] proxy fetch:', targetUrl);
|
| | const r = await ft(PROXY + encodeURIComponent(targetUrl), opts, ms);
|
| | if (!r.ok) throw new Error(`proxy ${r.status}`);
|
| | console.log('[FE] proxy OK:', r.status);
|
| | log(`proxy β ${targetUrl.slice(0,60)}`,'t');
|
| | return {viaProxy:true, res:r};
|
| | }catch(e){
|
| | try{
|
| | console.log('[FE] proxy fail, direct:', targetUrl, e.message);
|
| | const r2 = await ft(targetUrl, opts, ms);
|
| | console.log('[FE] direct OK:', r2.status);
|
| | log(`direct fallback β ${targetUrl.slice(0,60)}`,'w');
|
| | return {viaProxy:false, res:r2};
|
| | }catch(e2){
|
| | throw e;
|
| | }
|
| | }
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | async function parseResponse(res){
|
| | const raw = await res.text();
|
| | console.log('[FE] parseResponse: status=', res.status, 'len=', raw.length, 'ct=', res.headers.get('content-type'));
|
| | try{
|
| | const j = JSON.parse(raw);
|
| | if (j && typeof j === 'object' && 'contents' in j) {
|
| | try{ return JSON.parse(j.contents); }catch(_){ return j.contents; }
|
| | }
|
| | return j;
|
| | }catch(e){
|
| | return raw;
|
| | }
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | async function toolSearch(query) {
|
| | stats.srch++; log(`π search: "${query}"`, 't');
|
| |
|
| |
|
| | if (cfg.brave) {
|
| | try {
|
| | const r = await ft(`https://api.search.brave.com/res/v1/web/search?q=${encodeURIComponent(query)}&count=5`,
|
| | { headers:{'Accept':'application/json','X-Subscription-Token':cfg.brave} });
|
| | const d = await r.json();
|
| | if (d.web?.results?.length) {
|
| | log(`β Brave: ${d.web.results.length} results`,'g');
|
| | return d.web.results.map((x,i)=>`[${i+1}] ${x.title}\n${x.url}\n${x.description||''}`).join('\n\n');
|
| | }
|
| | } catch(e){ log(`Brave: ${e.message}`,'w'); }
|
| | }
|
| |
|
| |
|
| | try {
|
| | const url = `https://searx.be/search?q=${encodeURIComponent(query)}&format=json&engines=google,bing&language=en`;
|
| | const {res: r} = await fetchViaProxyOrDirect(url);
|
| | const d = await parseResponse(r);
|
| | const dd = (typeof d === 'string') ? JSON.parse(d) : d;
|
| | if (dd.results?.length) {
|
| | log(`β SearXNG: ${dd.results.length}`,'g');
|
| | return dd.results.slice(0,5).map((x,i)=>`[${i+1}] ${x.title}\n${x.url}\n${x.content||''}`).join('\n\n');
|
| | }
|
| | } catch(e){ log(`SearXNG: ${e.message}`,'w'); }
|
| |
|
| |
|
| | try {
|
| | const url = `https://api.duckduckgo.com/?q=${encodeURIComponent(query)}&format=json&no_html=1&skip_disambig=1`;
|
| | const {res: r} = await fetchViaProxyOrDirect(url);
|
| | const d = await parseResponse(r);
|
| | const dd = (typeof d === 'string') ? (() => { try { return JSON.parse(d); } catch(_) { return {}; } })() : (d || {});
|
| | console.log('[FE] DDG API keys:', Object.keys(dd).filter(k => dd[k] && (typeof dd[k] !== 'object' || (Array.isArray(dd[k]) ? dd[k].length : Object.keys(dd[k]).length))));
|
| | const out = [];
|
| | if (dd.AbstractText) out.push(`Summary: ${dd.AbstractText}\n${dd.AbstractURL}`);
|
| | if (dd.Answer) out.push(`Direct Answer: ${dd.Answer}`);
|
| | if (dd.Definition) out.push(`Definition: ${dd.Definition}\n${dd.DefinitionURL||''}`);
|
| | if (dd.Redirect) out.push(`Redirect: ${dd.Redirect}`);
|
| | (dd.RelatedTopics||[]).slice(0,5).forEach((t,i)=>{
|
| | if (t.Text) out.push(`[${i+1}] ${t.Text}\n${t.FirstURL||''}`);
|
| |
|
| | if (t.Topics) t.Topics.slice(0,2).forEach(st => { if(st.Text) out.push(` - ${st.Text}\n ${st.FirstURL||''}`); });
|
| | });
|
| | if (out.length){ log(`β DDG API: ${out.length} items`,'g'); return out.join('\n\n'); }
|
| | } catch(e){ log(`DDG API: ${e.message}`,'e'); }
|
| |
|
| |
|
| | try {
|
| | const ddgHtml = `https://duckduckgo.com/html/?q=${encodeURIComponent(query)}`;
|
| | const {res: r} = await fetchViaProxyOrDirect(ddgHtml);
|
| | const body = await parseResponse(r);
|
| | const bodyStr = (typeof body === 'string') ? body : JSON.stringify(body);
|
| | console.log('[FE] DDG HTML body sample:', bodyStr.slice(0, 400));
|
| |
|
| | const results = [];
|
| | let m;
|
| |
|
| |
|
| |
|
| | const mdLinkRe = /\[([^\]]+)\]\(([^)]+)\)/g;
|
| | while ((m = mdLinkRe.exec(bodyStr)) && results.length < 10) {
|
| | let title = m[1].trim();
|
| | let url = m[2].trim();
|
| |
|
| |
|
| | if (url.includes('uddg=')) {
|
| | const uddg = url.match(/uddg=([^&]+)/);
|
| | if (uddg) url = decodeURIComponent(uddg[1]);
|
| | }
|
| |
|
| |
|
| | if (!url.startsWith('http')) continue;
|
| | if (url.includes('duckduckgo.com')) continue;
|
| | if (title.length < 3) continue;
|
| | if (results.some(r => r.url === url)) continue;
|
| |
|
| |
|
| | const linkEnd = m.index + m[0].length;
|
| | const after = bodyStr.slice(linkEnd, linkEnd + 300).split('\n').filter(l => l.trim().length > 10);
|
| | const snippet = (after[0] || '').trim().slice(0, 200);
|
| |
|
| | results.push({ title, url, snippet });
|
| | }
|
| |
|
| |
|
| | const bareRe = /(?:^|\s)(https?:\/\/[^\s)<>"]+)/g;
|
| | while ((m = bareRe.exec(bodyStr)) && results.length < 10) {
|
| | const url = m[1];
|
| | if (!url.includes('duckduckgo.com') && !results.some(r => r.url === url)) {
|
| | results.push({ title: url, url, snippet: '' });
|
| | }
|
| | }
|
| |
|
| | if (results.length) {
|
| | log(`β DDG HTML fallback: ${results.length} results`,'g');
|
| | const list = results.slice(0,6).map((r,i) =>
|
| | `[${i+1}] ${r.title}\n${r.url}${r.snippet ? '\n' + r.snippet : ''}`
|
| | ).join('\n\n');
|
| |
|
| | let topContent = '';
|
| | try { topContent = await toolScrape(results[0].url); }
|
| | catch(e) { topContent = '(scrape of top result failed)'; }
|
| | return `Search results for "${query}":\n${list}\n\n---\nTop result content:\n${topContent}`;
|
| | }
|
| | } catch(e){ log(`DDG-html: ${e.message}`,'w'); }
|
| |
|
| | return `No results found for: "${query}"\nTip: Add a free Brave Search API key in Settings.`;
|
| | }
|
| |
|
| | async function toolScrape(url) {
|
| | stats.scr++; log(`π scrape: ${url}`,'t');
|
| | try {
|
| | const {res: r, viaProxy} = await fetchViaProxyOrDirect(url);
|
| | let text = await parseResponse(r);
|
| | if (typeof text !== 'string') text = JSON.stringify(text);
|
| |
|
| |
|
| | const ct = r.headers?.get('content-type') || '';
|
| | if (!viaProxy || !ct.includes('markdown')) {
|
| |
|
| | text = text
|
| | .replace(/<script[\s\S]*?<\/script>/gi,'')
|
| | .replace(/<style[\s\S]*?<\/style>/gi,'')
|
| | .replace(/<nav[\s\S]*?<\/nav>/gi,'')
|
| | .replace(/<header[\s\S]*?<\/header>/gi,'')
|
| | .replace(/<footer[\s\S]*?<\/footer>/gi,'')
|
| | .replace(/<[^>]+>/g,' ')
|
| | .replace(/ /g,' ').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"')
|
| | .replace(/[ \t]{3,}/g,' ').replace(/\n{3,}/g,'\n\n').trim();
|
| | }
|
| | if (text.length < 80) return `No readable content at ${url}`;
|
| | log(`β scraped ${text.length} chars`,'g');
|
| | const MAX=7000;
|
| | return text.slice(0,MAX) + (text.length>MAX ? `\n\n[...truncated β use summarize() for key points]` : '');
|
| | } catch(e){ log(`scrape: ${e.message}`,'e'); return `Failed to scrape ${url}: ${e.message}`; }
|
| | }
|
| |
|
| | async function toolSummarize(text, focus) {
|
| | if (!engine) return 'No engine loaded.';
|
| | log(`π summarize ${text.length} chars`+(focus?` focus:${focus}`:''),'t');
|
| | const r = await engine.chat.completions.create({
|
| | messages:[{role:'user',content: focus
|
| | ? `Summarize focusing on "${focus}":\n\n${text.slice(0,9000)}`
|
| | : `Write a concise summary of key points:\n\n${text.slice(0,9000)}`
|
| | }], max_tokens:600, temperature:0.2
|
| | });
|
| | const s = r.choices[0].message.content;
|
| | log(`β summarized β ${s.length} chars`,'g');
|
| | return s;
|
| | }
|
| |
|
| | function toolRemember(content) {
|
| | const date = new Date().toLocaleDateString('en-DE',{year:'numeric',month:'short',day:'numeric'});
|
| | if (mem.user === DEFAULT_USER) mem.user = '# User Memory\n';
|
| | mem.user += `\n\n## Note β ${date}\n${content}`;
|
| | lss('user', mem.user);
|
| | refreshFilesUI(); refreshMemView();
|
| | log(`πΎ remembered: "${content.slice(0,60)}"`, 'g');
|
| | return `β Saved to user memory: "${content.slice(0,80)}${content.length>80?'β¦':''}"`;
|
| | }
|
| |
|
| | function toolReadMemory() {
|
| | log('π read_memory','t');
|
| | return mem.user || '(empty)';
|
| | }
|
| |
|
| | function toolForget(query) {
|
| | log(`π forget: "${query}"`,'t');
|
| | const lines = mem.user.split('\n');
|
| | const filtered = [];
|
| | let skip = false;
|
| | for (const line of lines) {
|
| | if (line.startsWith('## ') && line.toLowerCase().includes(query.toLowerCase())) {
|
| | skip = true; continue;
|
| | }
|
| | if (line.startsWith('## ') && skip) skip = false;
|
| | if (!skip) filtered.push(line);
|
| | }
|
| | const newMem = filtered.join('\n');
|
| | if (newMem === mem.user) return `No memory entries matching "${query}" found.`;
|
| | mem.user = newMem;
|
| | lss('user', mem.user);
|
| | refreshFilesUI(); refreshMemView();
|
| | log(`β forgot entries matching "${query}"`,'g');
|
| | return `β Removed memory entries matching "${query}".`;
|
| | }
|
| |
|
| | function toolSchedule(delaySec, message) {
|
| | const delayMs = Math.max(1, Math.min(86400, delaySec)) * 1000;
|
| | const fireAt = Date.now() + delayMs;
|
| | const id = 'sched_' + Date.now();
|
| | const task = { id, message, fireAt, delaySec };
|
| | scheduledTasks.push(task);
|
| | lss('sched', scheduledTasks);
|
| | refreshSchedUI();
|
| |
|
| | setTimeout(() => {
|
| | showToast(`β° ${message}`);
|
| | log(`β° SCHEDULED FIRED: ${message}`,'w');
|
| | scheduledTasks = scheduledTasks.filter(t => t.id !== id);
|
| | lss('sched', scheduledTasks);
|
| | refreshSchedUI();
|
| | if (engine && !isRunning) {
|
| | runAgent(`[SCHEDULED REMINDER] ${message}`);
|
| | }
|
| | }, delayMs);
|
| |
|
| | log(`β° scheduled in ${delaySec}s: "${message}"`,'g');
|
| | return `β Scheduled notification in ${delaySec} seconds: "${message}"`;
|
| | }
|
| |
|
| | function toolInjectJs(code, description) {
|
| | log(`π inject_js: ${description||'(no desc)'}`, 't');
|
| |
|
| | const banned = [
|
| | /\beval\b/, /\bFunction\s*\(/, /document\.cookie/i,
|
| | /localStorage\.clear/i, /window\.location\s*=/,
|
| | /importScripts/i,
|
| | ];
|
| | for (const pat of banned) {
|
| | if (pat.test(code)) return `β Blocked: code matches forbidden pattern ${pat}. Injection refused.`;
|
| | }
|
| | if (code.length > 5000) return 'β Code too long (max 5000 chars).';
|
| | try {
|
| | const result = new Function('log', 'document', 'window',
|
| | `"use strict";\ntry {\n${code}\nreturn "β Executed successfully";\n} catch(e) { return "Error: " + e.message; }`
|
| | )(log, document, window);
|
| | log(`β inject_js ok: ${String(result).slice(0,100)}`,'g');
|
| | return String(result);
|
| | } catch(e) {
|
| | log(`inject_js error: ${e.message}`,'e');
|
| | return `β Execution error: ${e.message}`;
|
| | }
|
| | }
|
| |
|
| | async function toolNetworkScan() {
|
| | log('π‘ network_scan startingβ¦','t');
|
| | const targets = [
|
| | { url: 'http://127.0.0.1:8080', label: 'proxy (8080)' },
|
| | { url: 'http://127.0.0.1:8000', label: 'http (8000)' },
|
| | { url: 'http://127.0.0.1:3000', label: 'dev (3000)' },
|
| | { url: 'http://127.0.0.1:3001', label: 'dev (3001)' },
|
| | { url: 'http://127.0.0.1:5000', label: 'flask (5000)' },
|
| | { url: 'http://127.0.0.1:5173', label: 'vite (5173)' },
|
| | { url: 'http://127.0.0.1:4200', label: 'angular (4200)' },
|
| | { url: 'http://127.0.0.1:8888', label: 'jupyter (8888)' },
|
| | { url: 'http://127.0.0.1:9090', label: 'prometheus (9090)' },
|
| | { url: 'http://127.0.0.1:11434', label: 'ollama (11434)' },
|
| | ];
|
| | const results = await Promise.allSettled(
|
| | targets.map(async t => {
|
| | try {
|
| | const r = await ft(t.url, {mode:'no-cors'}, 3000);
|
| | return { ...t, status: 'UP', code: r.status || 'opaque' };
|
| | } catch(e) {
|
| | return { ...t, status: 'DOWN' };
|
| | }
|
| | })
|
| | );
|
| | networkHosts = results.map(r => r.value || r.reason).filter(Boolean);
|
| | refreshNetUI();
|
| | const up = networkHosts.filter(h => h.status === 'UP');
|
| | log(`π‘ scan: ${up.length}/${targets.length} up`,'g');
|
| | return `Network scan (${new Date().toLocaleTimeString()}):\n` +
|
| | networkHosts.map(h => `${h.status === 'UP' ? 'β' : 'β'} ${h.label} β ${h.url}`).join('\n');
|
| | }
|
| |
|
| | function toolRagIndex(text, source) {
|
| | if (!text || text.trim().length < 20) return 'Error: text too short to index (min 20 chars).';
|
| | const label = source || 'tool-input-' + Date.now();
|
| | const result = ragEngine.addText(text);
|
| | ragSources.push(label);
|
| | refreshRagUI();
|
| | log(`π RAG indexed: ${result.sentences} sentences, ${result.uniqueTerms} terms (${label})`, 'g');
|
| | return `β RAG indexed: ${result.sentences} sentences, ${result.uniqueTerms} unique terms. Source: ${label}`;
|
| | }
|
| |
|
| | function toolRagSearch(query, topK) {
|
| | if (!ragEngine.indexed) return 'No text indexed yet. Use rag_index to add documents first.';
|
| | const k = Math.min(Math.max(1, topK || 5), 10);
|
| | const result = ragEngine.query(query, k, 1);
|
| | log(`π RAG search: "${query}" β ${result.passages.length} passages (${result.totalCandidates} candidates)`, 'g');
|
| | if (result.passages.length === 0) return `No relevant passages found for: "${query}"`;
|
| | refreshRagUI();
|
| | return result.passages.map((p, i) =>
|
| | `[${i + 1}] (score: ${p.score.toFixed(2)}) ${p.text}`
|
| | ).join('\n\n');
|
| | }
|
| |
|
| | function toolRagPrompt(query, topK) {
|
| | if (!ragEngine.indexed) return 'No text indexed yet. Use rag_index first.';
|
| | const result = ragEngine.query(query, topK || 5, 1);
|
| | log(`π RAG prompt built for: "${query}"`, 'g');
|
| | return result.prompt;
|
| | }
|
| |
|
| | async function runTool(name, params) {
|
| | switch(name) {
|
| | case 'web_search': return await toolSearch(params.query||params.q||'');
|
| | case 'scrape': return await toolScrape(params.url||'');
|
| | case 'summarize': return await toolSummarize(params.text||'', params.focus||'');
|
| | case 'remember': return toolRemember(params.content||params.text||'');
|
| | case 'read_memory': return toolReadMemory();
|
| | case 'forget': return toolForget(params.query||params.content||'');
|
| | case 'schedule': return toolSchedule(Number(params.delay_sec||params.delay||60), params.message||params.content||'Reminder');
|
| | case 'inject_js': return toolInjectJs(params.code||'', params.description||'');
|
| | case 'network_scan': return await toolNetworkScan();
|
| | case 'rag_index': return toolRagIndex(params.text||params.content||'', params.source||params.label||'');
|
| | case 'rag_search': return toolRagSearch(params.query||params.q||'', Number(params.top_k||params.topK||5));
|
| | case 'rag_prompt': return toolRagPrompt(params.query||params.q||'', Number(params.top_k||params.topK||5));
|
| | default: return `Unknown tool "${name}". Available: web_search, scrape, summarize, remember, read_memory, forget, schedule, inject_js, network_scan, rag_index, rag_search, rag_prompt`;
|
| | }
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | async function runAgent(msg) {
|
| | if (isRunning||!engine) return;
|
| | isRunning=true; abortCtrl=new AbortController();
|
| | document.getElementById('sbtn').style.display='none';
|
| | document.getElementById('stopbtn').style.display='block';
|
| | document.getElementById('uin').disabled=true;
|
| |
|
| |
|
| | if (msg && !msg.startsWith('[SCHEDULED')) {
|
| | inputHistory = inputHistory.filter(h => h !== msg);
|
| | inputHistory.unshift(msg);
|
| | if (inputHistory.length > 50) inputHistory.pop();
|
| | lss('inputHist', inputHistory);
|
| | }
|
| | historyIdx = -1;
|
| |
|
| | appendUser(msg);
|
| | chatHistory.push({role:'user',content:msg});
|
| | stats.msgs++;
|
| | const scrapeBefore = stats.scr, searchBefore = stats.srch;
|
| |
|
| | const apiMsgs = [
|
| | {role:'system', content:buildSysPrompt()},
|
| | ...chatHistory.slice(-18)
|
| | ];
|
| |
|
| | const agentEl = createAgentBubble();
|
| | let iter=0, lastText='';
|
| |
|
| | try {
|
| | while (iter < MAX_ITER) {
|
| | iter++; stats.iter++;
|
| | document.getElementById('iter-p').textContent = `ITER ${iter}`;
|
| | log(`ββ iter ${iter}/${MAX_ITER}`,'');
|
| |
|
| | const {text, tps} = await streamLLM(apiMsgs, agentEl);
|
| | lastText=text; updateTPS(tps); updateStats();
|
| |
|
| | const am = text.match(/<action>([\s\S]*?)<\/action>/);
|
| | if (!am) {
|
| | renderAnswer(agentEl, text);
|
| | chatHistory.push({role:'assistant',content:text});
|
| | stats.msgs++;
|
| | break;
|
| | }
|
| |
|
| | let tc;
|
| | try { tc = JSON.parse(am[1].trim()); }
|
| | catch(e) {
|
| | addToolCard(agentEl,{tool:'parse_error'},null,`JSON error: ${e.message}`,true);
|
| | apiMsgs.push({role:'assistant',content:text});
|
| | apiMsgs.push({role:'user',content:`<observation>ERROR: could not parse action JSON: ${e.message}\nRaw: ${am[1]}</observation>`});
|
| | continue;
|
| | }
|
| |
|
| | apiMsgs.push({role:'assistant',content:text});
|
| | const card = addToolCard(agentEl, tc, null, null, false);
|
| | let result;
|
| | try { result = await runTool(tc.tool, tc); }
|
| | catch(e) { result = `Tool error: ${e.message}`; }
|
| | finalizeCard(card, result);
|
| | stats.tok += Math.ceil(result.length/4);
|
| | apiMsgs.push({role:'user',content:`<observation tool="${tc.tool}">\n${result}\n</observation>`});
|
| | }
|
| | if (iter>=MAX_ITER) { addNote(agentEl,`Max iterations (${MAX_ITER}) reached.`); chatHistory.push({role:'assistant',content:lastText}); }
|
| |
|
| | } catch(err) {
|
| | if (err.name==='AbortError') addNote(agentEl,'β Stopped.');
|
| | else { addNote(agentEl,`Error: ${err.message}`); log(err.message,'e'); }
|
| | }
|
| |
|
| | isRunning=false; abortCtrl=null;
|
| | document.getElementById('iter-p').textContent='ITER 0';
|
| | document.getElementById('sbtn').style.display='block';
|
| | document.getElementById('stopbtn').style.display='none';
|
| | document.getElementById('uin').disabled=false;
|
| | document.getElementById('uin').focus();
|
| | updateStats();
|
| | validateResponse(msg, lastText, stats.scr - scrapeBefore, stats.srch - searchBefore);
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | function validateResponse(userMsg, agentText, scrapesDone, searchesDone) {
|
| | const warnings = [];
|
| | const urlRe = /https?:\/\/[^\s)>\"']+/gi;
|
| | const mentionedURLs = userMsg.match(urlRe) || [];
|
| | const opens = (agentText.match(/<action>/g) || []).length;
|
| | const closes = (agentText.match(/<\/action>/g) || []).length;
|
| | if (opens !== closes) warnings.push('β Malformed <action> tags (mismatched open/close).');
|
| |
|
| | const intendedScrape = /"tool"\s*:\s*"scrape"/.test(agentText);
|
| | const intendedSearch = /"tool"\s*:\s*"web_search"/.test(agentText);
|
| |
|
| | if (mentionedURLs.length > 0 && scrapesDone === 0 && !intendedScrape)
|
| | warnings.push(`β URL detected but scrape() was not called.`);
|
| | if (mentionedURLs.length > 0 && scrapesDone === 0 && intendedScrape)
|
| | warnings.push('β Agent tried to scrape but it may have failed.');
|
| |
|
| | const needsSearch = /\b(latest|current|today|news|recent|who is|what is the price|202[0-9])\b/i.test(userMsg);
|
| | if (needsSearch && searchesDone === 0 && !intendedSearch && scrapesDone === 0)
|
| | warnings.push('β Time-sensitive query β no search was used.');
|
| |
|
| | if (agentText && agentText.length < 60 && opens === 0)
|
| | warnings.push('β Very short response β model may have truncated.');
|
| |
|
| | if (warnings.length > 0) {
|
| | const el = createAgentBubble();
|
| | el.closest('.mwrap').querySelector('.mrole').textContent = 'HINT';
|
| | el.closest('.mwrap').querySelector('.mrole').style.color = 'var(--amber)';
|
| | warnings.forEach(w => addNote(el, w));
|
| | }
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | async function streamLLM(msgs, container) {
|
| | const d = document.createElement('div');
|
| | d.style.cssText='font-size:11px;color:var(--fg-dim);white-space:pre-wrap;line-height:1.5;border-left:2px solid var(--fg-faint);padding-left:8px;margin-bottom:4px;min-height:16px';
|
| | const cur = document.createElement('span'); cur.className='cur';
|
| | d.appendChild(cur); container.appendChild(d); scroll();
|
| |
|
| | let full='', toks=0;
|
| | const t0=Date.now();
|
| | const stream = await engine.chat.completions.create({
|
| | messages:msgs, stream:true, temperature:0.7, max_tokens:1400,
|
| | stream_options:{include_usage:true}
|
| | });
|
| |
|
| | for await (const chunk of stream) {
|
| | if (abortCtrl?.signal.aborted) break;
|
| | const delta = chunk.choices[0]?.delta?.content||'';
|
| | if (delta) { full+=delta; toks++; stats.tok++; d.innerHTML=esc(full).replace(/\n/g,'<br>'); d.appendChild(cur); scroll(); }
|
| | }
|
| | cur.remove(); d.remove();
|
| | const secs=(Date.now()-t0)/1000;
|
| | log(`β ${toks} tok Β· ${secs>0?Math.round(toks/secs):0}t/s`,'g');
|
| | return {text:full, tps:secs>0?Math.round(toks/secs):0};
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | function appendUser(text) {
|
| | const w=document.createElement('div'); w.className='mwrap user';
|
| | w.innerHTML=`<div class="mrole">USER</div><div class="mbody">${esc(text).replace(/\n/g,'<br>')}</div>`;
|
| | document.getElementById('msgs').appendChild(w); scroll();
|
| | }
|
| | function createAgentBubble() {
|
| | const w=document.createElement('div'); w.className='mwrap agent';
|
| | const id='ac'+Date.now();
|
| | w.innerHTML=`<div class="mrole">AGENT</div><div class="mbody" id="${id}"></div>`;
|
| | document.getElementById('msgs').appendChild(w); scroll();
|
| | return document.getElementById(id);
|
| | }
|
| | function renderAnswer(container, text) {
|
| | const thRe=/<think>([\s\S]*?)<\/think>/g; let m;
|
| | while((m=thRe.exec(text))!==null) {
|
| | const tb=document.createElement('div'); tb.className='think';
|
| | tb.innerHTML=`<div class="think-hdr"><span>π</span><span>Thinkingβ¦</span><span class="think-toggle">βΌ expand</span></div><div class="think-body">${esc(m[1].trim()).replace(/\n/g,'<br>')}</div>`;
|
| | tb.querySelector('.think-hdr').addEventListener('click',()=>{
|
| | tb.classList.toggle('open');
|
| | tb.querySelector('.think-toggle').textContent=tb.classList.contains('open')?'β² collapse':'βΌ expand';
|
| | });
|
| | container.appendChild(tb);
|
| | }
|
| | const clean = text.replace(/<think>[\s\S]*?<\/think>/g,'').replace(/<action>[\s\S]*?<\/action>/g,'').trim();
|
| | if (clean) { const a=document.createElement('div'); a.className='answer'; a.innerHTML=md(clean); container.appendChild(a); }
|
| | scroll();
|
| | }
|
| |
|
| | const TICONS={web_search:'π',scrape:'π',summarize:'π',remember:'πΎ',read_memory:'π',forget:'π',schedule:'β°',inject_js:'π',network_scan:'π‘',rag_index:'π',rag_search:'π',rag_prompt:'π',parse_error:'β '};
|
| |
|
| | function addToolCard(container, tc, result, errMsg, isError) {
|
| | const card=document.createElement('div'); card.className='tcard';
|
| | if(isError) card.style.borderColor='var(--red)';
|
| | const params=Object.entries(tc).filter(([k])=>k!=='tool').map(([k,v])=>`${k}="${esc(String(v).slice(0,70))}"`).join(' ');
|
| | const sid='ts'+Date.now();
|
| | card.innerHTML=`
|
| | <div class="tcard-hdr" onclick="this.nextElementSibling.classList.toggle('vis')">
|
| | <span>${TICONS[tc.tool]||'π§'}</span>
|
| | <span class="tname">${esc(tc.tool||'')}</span>
|
| | <span class="tparams">${params}</span>
|
| | <span id="${sid}" class="${isError?'':'tspin'}">${isError?'β ':'β³'}</span>
|
| | <span class="ttog">βΎ</span>
|
| | </div>
|
| | <div class="tres${result||errMsg?' vis':''}">${esc(errMsg||result||'runningβ¦')}</div>`;
|
| | container.appendChild(card); scroll();
|
| | return card;
|
| | }
|
| | function finalizeCard(card, result) {
|
| | const sp=card.querySelector('.tspin');
|
| | if(sp){sp.style.animation='none';sp.textContent='β';sp.style.color='var(--fg)';}
|
| | const res=card.querySelector('.tres');
|
| | if(res){res.textContent=result;res.classList.add('vis');}
|
| | scroll();
|
| | }
|
| | function addNote(container, text) {
|
| | const d=document.createElement('div');
|
| | d.style.cssText='font-size:10px;color:var(--fg-dim);border-left:2px solid var(--border);padding-left:6px;margin-top:4px;font-style:italic';
|
| | d.textContent=text; container.appendChild(d); scroll();
|
| | }
|
| | function sysMsg(text) {
|
| | const w=document.createElement('div'); w.className='mwrap sys';
|
| | w.innerHTML=`<div class="mrole">SYS</div><div class="mbody">${esc(text).replace(/\n/g,'<br>')}</div>`;
|
| | document.getElementById('msgs').appendChild(w); scroll();
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | function md(text) {
|
| | let h=esc(text);
|
| | h=h.replace(/```(\w*)\n?([\s\S]*?)```/g,(_,l,c)=>`<pre><code>${c}</code></pre>`);
|
| | h=h.replace(/`([^`\n]+)`/g,'<code>$1</code>');
|
| | h=h.replace(/\*\*([^*]+)\*\*/g,'<strong>$1</strong>');
|
| | h=h.replace(/\*([^*\n]+)\*/g,'<em>$1</em>');
|
| | h=h.replace(/^### (.+)$/gm,'<h3>$1</h3>');
|
| | h=h.replace(/^## (.+)$/gm,'<h2>$1</h2>');
|
| | h=h.replace(/^# (.+)$/gm,'<h1>$1</h1>');
|
| | h=h.replace(/^[-*β’] (.+)$/gm,'<li>$1</li>');
|
| | h=h.replace(/^\d+\. (.+)$/gm,'<li>$1</li>');
|
| | h=h.replace(/^---$/gm,'<hr style="border:none;border-top:1px solid var(--border);margin:8px 0">');
|
| | h=h.replace(/\n\n/g,'<br><br>').replace(/\n(?!<)/g,'<br>');
|
| | return h;
|
| | }
|
| | function esc(s){return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}
|
| | function scroll(){const m=document.getElementById('msgs');m.scrollTop=m.scrollHeight;}
|
| |
|
| |
|
| |
|
| |
|
| | function showToast(msg, duration=6000) {
|
| | const area = document.getElementById('toast-area');
|
| | const t = document.createElement('div'); t.className = 'toast';
|
| | t.textContent = msg;
|
| | area.appendChild(t);
|
| |
|
| | const hdr = document.getElementById('hdr');
|
| | hdr.style.borderBottom = '2px solid var(--amber)';
|
| | setTimeout(() => { hdr.style.borderBottom = ''; }, 2000);
|
| | setTimeout(() => { t.classList.add('fade'); setTimeout(() => t.remove(), 500); }, duration);
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | window.triggerFile = t => document.getElementById(t==='skill'?'skill-f':t+'-f').click();
|
| | function readFile(file, cb) { const r=new FileReader(); r.onload=e=>cb(e.target.result,file.name); r.readAsText(file); }
|
| |
|
| | document.getElementById('soul-f').addEventListener('change',function(){
|
| | if(this.files[0]) readFile(this.files[0],(c,n)=>{mem.soul=c;lss('soul',c);refreshFilesUI();refreshMemView();log(`β soul.md loaded (${c.length}ch)`,'g');});
|
| | });
|
| | document.getElementById('user-f').addEventListener('change',function(){
|
| | if(this.files[0]) readFile(this.files[0],(c,n)=>{mem.user=c;lss('user',c);refreshFilesUI();refreshMemView();log(`β user.md loaded (${c.length}ch)`,'g');});
|
| | });
|
| | document.getElementById('skill-f').addEventListener('change',function(){
|
| | Array.from(this.files).forEach(f=>readFile(f,(c,n)=>{
|
| | const k=n.replace(/\.(md|txt)$/i,'');
|
| | mem.skills[k]=c; lss('skills',mem.skills);
|
| | refreshFilesUI(); refreshMemView();
|
| | log(`β skill: ${k} loaded`,'g');
|
| | }));
|
| | });
|
| |
|
| | window.removeSkill = function(name) {
|
| | delete mem.skills[name]; lss('skills',mem.skills);
|
| | refreshFilesUI(); refreshMemView(); log(`removed skill: ${name}`,'w');
|
| | };
|
| |
|
| | function refreshFilesUI() {
|
| | const sc=mem.soul!==DEFAULT_SOUL, uc=mem.user!==DEFAULT_USER;
|
| | document.getElementById('soul-n').className='fname'+(sc?' ok':'');
|
| | document.getElementById('soul-b').textContent=sc?mem.soul.length+'ch':'default';
|
| | document.getElementById('user-n').className='fname'+(uc?' ok':'');
|
| | document.getElementById('user-b').textContent=uc?mem.user.length+'ch':'default';
|
| | const chips=document.getElementById('skill-chips');
|
| | chips.innerHTML='';
|
| | Object.keys(mem.skills).forEach(name=>{
|
| | const c=document.createElement('div'); c.className='chip';
|
| | c.innerHTML=`${esc(name)} <span class="rm" onclick="removeSkill('${esc(name)}')">β</span>`;
|
| | chips.appendChild(c);
|
| | });
|
| | }
|
| |
|
| | function refreshMemView() {
|
| | const sp=buildSysPrompt();
|
| | document.getElementById('mem-view').textContent=
|
| | `=== LIVE CONTEXT (${sp.length} chars) ===\n\n${sp.slice(0,1400)}${sp.length>1400?'\n\n[β¦truncated β click EDIT to view full]':''}`;
|
| | }
|
| |
|
| | window.openEdit = function(target) {
|
| | editTarget=target;
|
| | document.getElementById('modal-title').textContent=`EDIT ${target.toUpperCase()}.MD`;
|
| | document.getElementById('modal-area').value=target==='soul'?mem.soul:mem.user;
|
| | document.getElementById('modal').classList.add('vis');
|
| | };
|
| | window.closeModal = function(){document.getElementById('modal').classList.remove('vis');editTarget=null;};
|
| | window.saveModal = function(){
|
| | const v=document.getElementById('modal-area').value;
|
| | if(editTarget==='soul'){mem.soul=v;lss('soul',v);}
|
| | if(editTarget==='user'){mem.user=v;lss('user',v);}
|
| | refreshFilesUI();refreshMemView();closeModal();log(`saved ${editTarget}.md`,'g');
|
| | };
|
| | window.exportModal = function(){
|
| | const v=document.getElementById('modal-area').value;
|
| | const a=document.createElement('a');
|
| | a.href=URL.createObjectURL(new Blob([v],{type:'text/markdown'}));
|
| | a.download=(editTarget||'file')+'.md'; a.click();
|
| | };
|
| | document.getElementById('modal').addEventListener('click',e=>{if(e.target===document.getElementById('modal'))closeModal();});
|
| |
|
| | window.saveCfg = function(){cfg.brave=document.getElementById('brave-in').value.trim();lss('brave',cfg.brave);log('settings saved','g');};
|
| | window.clearUserMem = function(){if(!confirm('Reset user.md?'))return;mem.user=DEFAULT_USER;lss('user',mem.user);refreshFilesUI();refreshMemView();log('user.md reset','w');};
|
| | window.exportAll = function(){
|
| | const out=`# Chronos Export β ${new Date().toISOString().split('T')[0]}\n\n---\n\n# soul.md\n${mem.soul}\n\n---\n\n# user.md\n${mem.user}\n\n---\n\n# Skills\n${Object.entries(mem.skills).map(([n,c])=>`\n## ${n}\n\n${c}`).join('\n')}`;
|
| | const a=document.createElement('a');
|
| | a.href=URL.createObjectURL(new Blob([out],{type:'text/markdown'}));
|
| | a.download=`chronos-export-${Date.now()}.md`; a.click();
|
| | };
|
| | window.clearChat = function(){document.getElementById('msgs').innerHTML='';chatHistory=[];stats.msgs=0;stats.iter=0;updateStats();log('chat cleared','w');};
|
| |
|
| |
|
| |
|
| |
|
| | function log(text,type=''){
|
| | const el=document.getElementById('alog');
|
| | const t=new Date().toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});
|
| | const d=document.createElement('div'); d.className=`ll ${type}`; d.textContent=`[${t}] ${text}`;
|
| | el.appendChild(d); el.scrollTop=el.scrollHeight;
|
| | while(el.children.length>120)el.removeChild(el.firstChild);
|
| | }
|
| | function updateTPS(tps){tpsHist.push(tps);if(tpsHist.length>24)tpsHist.shift();document.getElementById('s-tps').innerHTML=`${tps}<span class="su">t/s</span>`;drawSpark();}
|
| | function updateStats(){document.getElementById('s-tok').textContent=stats.tok;document.getElementById('s-srch').textContent=stats.srch;document.getElementById('s-scr').textContent=stats.scr;document.getElementById('cmeta').textContent=`${stats.msgs} msgs Β· ${stats.tok} tok Β· ${stats.iter} iters`;}
|
| | function drawSpark(){
|
| | const c=document.getElementById('spark');if(!c)return;
|
| | const ctx=c.getContext('2d');const w=c.offsetWidth||180,h=28;c.width=w;
|
| | if(tpsHist.length<2)return;
|
| | const max=Math.max(...tpsHist,1);const step=w/(tpsHist.length-1);
|
| | ctx.clearRect(0,0,w,h);ctx.strokeStyle='#3dff70';ctx.shadowColor='#3dff70';ctx.shadowBlur=4;ctx.lineWidth=1.5;ctx.beginPath();
|
| | tpsHist.forEach((v,i)=>{const x=i*step,y=h-(v/max)*(h-4)-2;i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});ctx.stroke();
|
| | ctx.lineTo((tpsHist.length-1)*step,h);ctx.lineTo(0,h);ctx.closePath();ctx.shadowBlur=0;ctx.fillStyle='rgba(61,255,112,0.07)';ctx.fill();
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | function refreshNetUI() {
|
| | const panel = document.getElementById('net-panel');
|
| | if (!networkHosts.length) { panel.innerHTML = '<div class="meta">No scan yet</div>'; return; }
|
| | panel.innerHTML = networkHosts.map(h =>
|
| | `<div class="net-item"><span class="ni-url">${esc(h.label)}</span><span class="ni-status ${h.status==='UP'?'ok':'fail'}">${h.status}</span></div>`
|
| | ).join('');
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | function refreshSchedUI() {
|
| | const panel = document.getElementById('sched-panel');
|
| | if (!scheduledTasks.length) { panel.innerHTML = '<div class="meta">No tasks</div>'; return; }
|
| | panel.innerHTML = scheduledTasks.map(t => {
|
| | const remaining = Math.max(0, Math.round((t.fireAt - Date.now()) / 1000));
|
| | return `<div class="sched-item"><span class="si-msg">${esc(t.message)}</span><span class="si-time">${remaining}s</span><span class="si-rm" onclick="cancelSched('${t.id}')">β</span></div>`;
|
| | }).join('');
|
| | }
|
| | window.cancelSched = function(id) {
|
| | scheduledTasks = scheduledTasks.filter(t => t.id !== id);
|
| | lss('sched', scheduledTasks);
|
| | refreshSchedUI();
|
| | log(`cancelled scheduled task`,'w');
|
| | };
|
| | setInterval(refreshSchedUI, 5000);
|
| |
|
| |
|
| |
|
| |
|
| | function openPalette() {
|
| | if (paletteOpen) { closePalette(); return; }
|
| | paletteOpen = true;
|
| | const pal = document.getElementById('cmd-palette');
|
| | const inp = document.getElementById('cp-search');
|
| | const list = document.getElementById('cp-list');
|
| | pal.classList.add('vis');
|
| | inp.value = '';
|
| | inp.focus();
|
| | renderPaletteItems('');
|
| | inp.oninput = () => renderPaletteItems(inp.value);
|
| | inp.onkeydown = function(e) {
|
| | if (e.key === 'Escape') { closePalette(); return; }
|
| | if (e.key === 'Enter') {
|
| | const sel = list.querySelector('.cp-item.sel') || list.querySelector('.cp-item');
|
| | if (sel) sel.click();
|
| | }
|
| | if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
| | e.preventDefault();
|
| | const items = [...list.querySelectorAll('.cp-item')];
|
| | const cur = items.findIndex(i => i.classList.contains('sel'));
|
| | items.forEach(i => i.classList.remove('sel'));
|
| | let next = e.key === 'ArrowDown' ? cur + 1 : cur - 1;
|
| | if (next < 0) next = items.length - 1;
|
| | if (next >= items.length) next = 0;
|
| | if (items[next]) { items[next].classList.add('sel'); items[next].scrollIntoView({block:'nearest'}); }
|
| | }
|
| | };
|
| | }
|
| | function closePalette() {
|
| | paletteOpen = false;
|
| | document.getElementById('cmd-palette').classList.remove('vis');
|
| | document.getElementById('uin').focus();
|
| | }
|
| | function renderPaletteItems(filter) {
|
| | const list = document.getElementById('cp-list');
|
| | list.innerHTML = '';
|
| | const items = [];
|
| |
|
| | inputHistory.forEach(h => items.push({ badge: 'HISTORY', label: h, action: () => { document.getElementById('uin').value = h; closePalette(); } }));
|
| |
|
| | ['web_search','scrape','summarize','remember','read_memory','forget','schedule','inject_js','network_scan','rag_index','rag_search','rag_prompt'].forEach(t => {
|
| | items.push({ badge: 'TOOL', label: t, action: () => { document.getElementById('uin').value = `Use tool: ${t}`; closePalette(); } });
|
| | });
|
| |
|
| | Object.keys(mem.skills).forEach(s => {
|
| | items.push({ badge: 'SKILL', label: s, action: () => { document.getElementById('uin').value = `Use skill: ${s}`; closePalette(); } });
|
| | });
|
| |
|
| | items.push({ badge: 'ACTION', label: 'Clear chat', action: () => { clearChat(); closePalette(); } });
|
| | items.push({ badge: 'ACTION', label: 'Export all', action: () => { exportAll(); closePalette(); } });
|
| | items.push({ badge: 'ACTION', label: 'Edit soul.md', action: () => { openEdit('soul'); closePalette(); } });
|
| | items.push({ badge: 'ACTION', label: 'Edit user.md', action: () => { openEdit('user'); closePalette(); } });
|
| | items.push({ badge: 'ACTION', label: 'Toggle console', action: () => { toggleConsole(); closePalette(); } });
|
| | items.push({ badge: 'ACTION', label: 'Network scan', action: async () => { closePalette(); await toolNetworkScan(); } });
|
| |
|
| | const filt = filter.toLowerCase();
|
| | const matches = items.filter(i => !filt || i.label.toLowerCase().includes(filt) || i.badge.toLowerCase().includes(filt));
|
| | matches.slice(0, 20).forEach((item, idx) => {
|
| | const d = document.createElement('div');
|
| | d.className = 'cp-item' + (idx === 0 ? ' sel' : '');
|
| | d.innerHTML = `<span class="cp-badge">${item.badge}</span><span>${esc(item.label)}</span>`;
|
| | d.addEventListener('click', item.action);
|
| | list.appendChild(d);
|
| | });
|
| | }
|
| |
|
| |
|
| |
|
| |
|
| | const MODELS=[
|
| | {id:'TinyLlama-1.1B-Chat-v0.4-q4f16_1-MLC',label:'TinyLlama 1.1B Β· ~600MB',vram:'~1GB',speed:'fastest'},
|
| | {id:'Llama-3.2-1B-Instruct-q4f16_1-MLC',label:'Llama 3.2 Β· 1B Β· ~680MB',vram:'~1GB',speed:'fastest'},
|
| | {id:'gemma-2-2b-it-q4f16_1-MLC',label:'Gemma 2 Β· 2B Β· ~1.4GB',vram:'~2GB',speed:'fast'},
|
| | {id:'Llama-3.2-3B-Instruct-q4f16_1-MLC',label:'Llama 3.2 Β· 3B Β· ~1.8GB',vram:'~2GB',speed:'fast'},
|
| | {id:'Phi-3.5-mini-instruct-q4f16_1-MLC',label:'Phi-3.5 Mini Β· 3.8B Β· ~2.2GB',vram:'~3GB',speed:'fast'},
|
| | {id:'Llama-3.1-8B-Instruct-q4f16_1-MLC',label:'Llama 3.1 Β· 8B Β· ~4.8GB',vram:'~6GB',speed:'medium'},
|
| | {id:'Mistral-7B-Instruct-v0.3-q4f16_1-MLC',label:'Mistral Β· 7B Β· ~4.1GB',vram:'~5GB',speed:'medium'},
|
| | ];
|
| |
|
| | const grps={fastest:'β‘ Ultra-Fast',fast:'π Fast',medium:'β Medium'};
|
| | const gels={};
|
| | Object.entries(grps).forEach(([k,l])=>{const g=document.createElement('optgroup');g.label=l;gels[k]=g;document.getElementById('msel').appendChild(g);});
|
| | MODELS.forEach(m=>{const o=document.createElement('option');o.value=m.id;o.textContent=m.label;o.selected=m.id===cfg.model;gels[m.speed].appendChild(o);});
|
| | document.getElementById('msel').addEventListener('change',function(){const m=MODELS.find(x=>x.id===this.value);document.getElementById('mmeta').textContent=m?`VRAM: ${m.vram}`:'β';});
|
| | document.getElementById('msel').dispatchEvent(new Event('change'));
|
| |
|
| | document.getElementById('lbtn').addEventListener('click', async () => {
|
| | const modelId = document.getElementById('msel').value;
|
| |
|
| | if (!navigator.gpu) {
|
| | log('β WebGPU not available! Use Chrome 113+ or Edge 113+','e');
|
| | sysMsg('β WebGPU not available.\n\nRequired: Chrome 113+ or Edge 113+\n\nCheck: chrome://gpu');
|
| | return;
|
| | }
|
| |
|
| |
|
| | if (!window.crossOriginIsolated) {
|
| | const isHTTP = location.protocol.startsWith('http');
|
| | if (!isHTTP) {
|
| | log('β Not cross-origin isolated. Serve via HTTP!','e');
|
| | document.getElementById('setup-banner').classList.remove('hidden');
|
| | return;
|
| | }
|
| | log('β COI not yet active β attempting load anywayβ¦','w');
|
| | sysMsg('β Cross-origin isolation pending.\nIf load fails, reload page once (service worker activates on first load).');
|
| | }
|
| |
|
| | document.getElementById('lbtn').disabled=true;
|
| | document.getElementById('prog').classList.add('vis');
|
| | document.getElementById('mstatus').textContent='LOADINGβ¦';
|
| | document.getElementById('mdot').classList.remove('ready');
|
| | log(`loading ${modelId}`,'w');
|
| |
|
| | try {
|
| | engine = new webllm.MLCEngine();
|
| | engine.setInitProgressCallback(r=>{
|
| | const p=Math.round((r.progress||0)*100);
|
| | document.getElementById('pfill').style.width=p+'%';
|
| | document.getElementById('ptxt').textContent=r.text||`${p}%`;
|
| | });
|
| | await engine.reload(modelId);
|
| |
|
| | document.getElementById('mdot').classList.add('ready');
|
| | document.getElementById('mstatus').textContent='READY';
|
| | document.getElementById('pfill').style.width='100%';
|
| | document.getElementById('ptxt').textContent='β ready';
|
| | document.getElementById('uin').disabled=false;
|
| | document.getElementById('sbtn').disabled=false;
|
| | document.getElementById('uin').focus();
|
| | document.getElementById('welcome').classList.add('gone');
|
| | const short=modelId.replace(/-q4f\d+_\d+-MLC$/,'').replace(/-MLC$/,'');
|
| | document.getElementById('ctitle').textContent=`β‘ ${short}`;
|
| | lss('model',modelId); cfg.model=modelId;
|
| | log(`β ${short} ready`,'g');
|
| |
|
| | const el=createAgentBubble();
|
| | renderAnswer(el, `**${short}** loaded.\n\n**Active context:**\n- Soul: ${mem.soul.split('\n').find(l=>l.startsWith('#'))||'Chronos'}\n- User memory: ${mem.user.length} chars\n- Skills: ${Object.keys(mem.skills).join(', ')||'none'}\n- Tools: web_search, scrape, summarize, remember, read_memory, forget, schedule, inject_js, network_scan, rag_index, rag_search, rag_prompt\n\n**Hotkeys:** Ctrl+\` console Β· β palette Β· Ctrl+L clear`);
|
| | stats.msgs++;
|
| |
|
| | } catch(err) {
|
| | log(`β load failed: ${err.message}`,'e');
|
| | sysMsg(`β Model load failed:\n${err.message}\n\nβ’ Ensure WebGPU enabled\nβ’ Reload page (COI service worker needs activation)\nβ’ Try smaller model\nβ’ Check chrome://gpu`);
|
| | document.getElementById('lbtn').disabled=false;
|
| | document.getElementById('mstatus').textContent='ERROR';
|
| | }
|
| | });
|
| |
|
| |
|
| |
|
| |
|
| | document.getElementById('sbtn').addEventListener('click',()=>{
|
| | const t=document.getElementById('uin').value.trim();
|
| | if(t&&engine){document.getElementById('uin').value='';runAgent(t);}
|
| | });
|
| | document.getElementById('uin').addEventListener('keydown',e=>{
|
| | if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();document.getElementById('sbtn').click();return;}
|
| | if(e.key==='ArrowUp'&&!e.shiftKey){
|
| | const inp=document.getElementById('uin');
|
| | if(inp.value.trim()===''){e.preventDefault();openPalette();}
|
| | }
|
| | });
|
| | document.getElementById('uin').addEventListener('input',function(){
|
| | this.style.height='auto';this.style.height=Math.min(this.scrollHeight,300)+'px';
|
| | });
|
| | document.getElementById('stopbtn').addEventListener('click',()=>{if(abortCtrl){abortCtrl.abort();log('β stopped','w');}});
|
| |
|
| |
|
| | document.addEventListener('keydown',e=>{
|
| | if(e.ctrlKey&&e.key==='l'){e.preventDefault();clearChat();}
|
| | if(e.key==='`'&&(e.ctrlKey||e.metaKey)){e.preventDefault();toggleConsole();}
|
| | if(e.key==='Escape'){
|
| | if(paletteOpen) closePalette();
|
| | else if(document.getElementById('console-popup').classList.contains('vis')) toggleConsole();
|
| | else if(document.getElementById('modal').classList.contains('vis')) closeModal();
|
| | }
|
| | });
|
| |
|
| | document.getElementById('brave-in').value=cfg.brave;
|
| |
|
| |
|
| |
|
| |
|
| | const isoP=document.getElementById('iso-p');
|
| | if (window.crossOriginIsolated) {
|
| | isoP.textContent='ISO: β'; isoP.style.color='var(--fg)';
|
| | document.getElementById('setup-banner').classList.add('hidden');
|
| | log('β Cross-origin isolated','g');
|
| | } else {
|
| | const isHTTP = location.protocol.startsWith('http');
|
| | if (isHTTP) {
|
| | isoP.textContent='ISO: β³'; isoP.style.color='var(--amber)';
|
| | document.getElementById('setup-banner').classList.add('hidden');
|
| | log('β ISO pending β reload if model load fails','w');
|
| | } else {
|
| | isoP.textContent='ISO: β'; isoP.style.color='var(--red)';
|
| | log('β NOT isolated β run: python proxy.py 8080','e');
|
| | setTimeout(()=>{ if(!window.crossOriginIsolated) document.getElementById('setup-banner').classList.remove('hidden'); }, 1200);
|
| | }
|
| | }
|
| |
|
| | if (!navigator.gpu) log('β WebGPU not detected β Chrome 113+ required','e');
|
| | else log('β WebGPU available','g');
|
| |
|
| | refreshFilesUI();
|
| | refreshMemView();
|
| | refreshSchedUI();
|
| | refreshRagUI();
|
| | log('Chronos agent initialized','g');
|
| | log(`Skills: ${Object.keys(mem.skills).join(', ')}`,'');
|
| | log('Ctrl+` console Β· β palette Β· Ctrl+L clear','');
|
| |
|
| |
|
| |
|
| |
|
| | function refreshRagUI() {
|
| | const s = ragEngine.getStats();
|
| | document.getElementById('rag-status').textContent = s.indexed ? 'β ready' : 'no index';
|
| | document.getElementById('rag-status').style.color = s.indexed ? 'var(--fg)' : '';
|
| | document.getElementById('rag-sent-count').textContent = s.sentences;
|
| | document.getElementById('rag-term-count').textContent = s.uniqueTerms;
|
| |
|
| | const srcEl = document.getElementById('rag-sources');
|
| | srcEl.innerHTML = ragSources.map(s => `<span class="rag-source-chip">${esc(s)}</span>`).join('');
|
| | }
|
| |
|
| | window.ragIndex = function() {
|
| | const text = document.getElementById('rag-text').value.trim();
|
| | if (!text) { log('RAG: no text to index','w'); return; }
|
| | const result = ragEngine.addText(text);
|
| | ragSources.push('manual-' + ragSources.length);
|
| | document.getElementById('rag-text').value = '';
|
| | refreshRagUI();
|
| | log(`π RAG indexed: ${result.sentences} sent, ${result.uniqueTerms} terms`, 'g');
|
| | };
|
| |
|
| | window.ragIndexFromScrape = function() {
|
| |
|
| | const cards = document.querySelectorAll('.tcard');
|
| | let found = false;
|
| | for (let i = cards.length - 1; i >= 0; i--) {
|
| | const name = cards[i].querySelector('.tname');
|
| | if (name && name.textContent.trim() === 'scrape') {
|
| | const res = cards[i].querySelector('.tres');
|
| | if (res && res.textContent.length > 20) {
|
| | const result = ragEngine.addText(res.textContent);
|
| | ragSources.push('scrape-result');
|
| | refreshRagUI();
|
| | log(`π RAG indexed scraped content: ${result.sentences} sent`, 'g');
|
| | found = true;
|
| | break;
|
| | }
|
| | }
|
| | }
|
| | if (!found) log('RAG: no scraped content found to index','w');
|
| | };
|
| |
|
| | window.ragIndexFromMemory = function() {
|
| | if (mem.user && mem.user.length > 20) {
|
| | const result = ragEngine.addText(mem.user);
|
| | ragSources.push('user-memory');
|
| | refreshRagUI();
|
| | log(`π RAG indexed user memory: ${result.sentences} sent`, 'g');
|
| | } else {
|
| | log('RAG: user memory too short to index','w');
|
| | }
|
| | };
|
| |
|
| | window.ragClear = function() {
|
| | ragEngine.clear();
|
| | ragSources = [];
|
| | document.getElementById('rag-results').innerHTML = '';
|
| | refreshRagUI();
|
| | log('π RAG index cleared','w');
|
| | };
|
| |
|
| | window.ragSearch = function() {
|
| | const query = document.getElementById('rag-query').value.trim();
|
| | if (!query) { log('RAG: no query','w'); return; }
|
| | if (!ragEngine.indexed) { log('RAG: nothing indexed yet','w'); return; }
|
| | const result = ragEngine.query(query, 5, 1);
|
| | const el = document.getElementById('rag-results');
|
| | if (result.passages.length === 0) {
|
| | el.innerHTML = '<div style="color:var(--fg-dim);font-style:italic">No passages found.</div>';
|
| | return;
|
| | }
|
| | el.innerHTML = result.passages.map((p, i) =>
|
| | `<div class="rag-passage"><div class="rag-score">#${i+1} score: ${p.score.toFixed(2)}</div><div class="rag-text">${esc(p.text)}</div></div>`
|
| | ).join('');
|
| | log(`π RAG: ${result.passages.length} passages for "${query}"`, 'g');
|
| | };
|
| |
|
| | window.ragInjectPrompt = function() {
|
| | const query = document.getElementById('rag-query').value.trim();
|
| | if (!query) { log('RAG: no query for prompt','w'); return; }
|
| | if (!ragEngine.indexed) { log('RAG: nothing indexed','w'); return; }
|
| | const result = ragEngine.query(query, 5, 1);
|
| | if (result.passages.length === 0) { log('RAG: no passages to inject','w'); return; }
|
| |
|
| | const inp = document.getElementById('uin');
|
| | inp.value = result.prompt;
|
| | inp.style.height = 'auto';
|
| | inp.style.height = Math.min(inp.scrollHeight, 300) + 'px';
|
| | inp.focus();
|
| | log(`π RAG prompt injected (${result.passages.length} passages)`, 'g');
|
| | };
|
| |
|
| |
|
| | document.getElementById('rag-query').addEventListener('keydown', function(e) {
|
| | if (e.key === 'Enter') { e.preventDefault(); ragSearch(); }
|
| | });
|
| |
|
| |
|
| | toolNetworkScan().catch(()=>{});
|
| | </script>
|
| | </body>
|
| | </html>
|
| |
|
