mirror of
https://github.com/codeany-ai/open-agent-sdk-typescript.git
synced 2026-04-25 07:00:49 +09:00
idoubi
67e120b2ed
Open-source Agent SDK with 30+ built-in tools, MCP integration, multi-turn sessions, subagents, and streaming support. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
366 lines
13 KiB
HTML
366 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Open Agent SDK</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
:root{
|
|
--bg:#f5f6f8;--surface:#fff;--border:#e5e7eb;
|
|
--text:#1a1a1a;--text2:#6b7280;--accent:#111;
|
|
--user-bg:#111;--user-fg:#fff;
|
|
--tool-bg:#f3f4f6;--tool-border:#e0e1e4;
|
|
--think-bg:#fffbeb;--think-border:#fde68a;
|
|
--ok-bg:#ecfdf5;--ok-border:#86efac;--ok-text:#166534;
|
|
--err-bg:#fef2f2;--err-border:#fca5a5;--err-text:#991b1b;
|
|
--radius:16px;
|
|
}
|
|
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
|
|
background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column}
|
|
|
|
/* Header */
|
|
header{display:flex;align-items:center;justify-content:space-between;
|
|
padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
|
|
header h1{font-size:16px;font-weight:600}
|
|
header button{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
|
|
background:var(--surface);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
|
|
header button:hover{background:var(--bg)}
|
|
|
|
/* Chat */
|
|
#chat{flex:1;overflow-y:auto;padding:24px 16px}
|
|
#chat-inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
|
|
|
|
/* Welcome */
|
|
#welcome{text-align:center;padding:60px 0 30px}
|
|
#welcome h2{font-size:22px;font-weight:600;margin-bottom:22px;color:var(--text)}
|
|
.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:500px;margin:0 auto}
|
|
.suggestions button{padding:12px 16px;border:1px solid var(--border);border-radius:12px;
|
|
background:var(--surface);cursor:pointer;text-align:left;font-size:13px;color:var(--text);transition:border-color .15s}
|
|
.suggestions button:hover{border-color:#999}
|
|
.suggestions span{margin-right:6px}
|
|
|
|
/* Message rows */
|
|
.msg-row{display:flex}
|
|
.msg-row.user{justify-content:flex-end}
|
|
.msg-row.assistant{justify-content:flex-start}
|
|
|
|
/* Bubbles */
|
|
.bubble-user{background:var(--user-bg);color:var(--user-fg);padding:10px 16px;
|
|
border-radius:18px 18px 4px 18px;max-width:75%;font-size:14px;line-height:1.55;white-space:pre-wrap}
|
|
.bubble-assistant{max-width:85%;font-size:14.5px;line-height:1.65}
|
|
.bubble-assistant p{margin-bottom:8px}
|
|
.bubble-assistant p:last-child{margin-bottom:0}
|
|
.bubble-assistant strong{font-weight:600}
|
|
.bubble-assistant code{background:#f0f1f3;padding:1px 5px;border-radius:4px;font-size:13px}
|
|
.bubble-assistant pre{background:#1e1e1e;color:#d4d4d4;padding:14px 16px;border-radius:10px;
|
|
overflow-x:auto;margin:8px 0;font-size:13px;line-height:1.5}
|
|
.bubble-assistant pre code{background:none;padding:0;color:inherit}
|
|
.bubble-assistant ul,.bubble-assistant ol{padding-left:22px;margin:6px 0}
|
|
.bubble-assistant li{margin:3px 0}
|
|
|
|
/* Tool call card */
|
|
.tool-card{background:var(--tool-bg);border:1px solid var(--tool-border);border-radius:10px;
|
|
padding:10px 14px;margin:8px 0;font-size:13px}
|
|
.tool-card .tool-hd{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:4px}
|
|
.tool-card .tool-icon{font-size:15px}
|
|
.tool-card .tool-input{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
|
|
.tool-result{margin:4px 0 8px 12px;padding:8px 12px;border-left:3px solid var(--tool-border);
|
|
font-size:12.5px;color:var(--text2);max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}
|
|
|
|
/* Thinking */
|
|
.think-box{background:var(--think-bg);border:1px solid var(--think-border);border-radius:10px;
|
|
padding:10px 14px;margin:8px 0;font-size:13px;font-style:italic;color:#92400e}
|
|
|
|
/* Result banner */
|
|
.result-banner{border-radius:10px;padding:10px 16px;font-size:13px;margin:8px 0;display:flex;align-items:center;gap:8px}
|
|
.result-banner.ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-text)}
|
|
.result-banner.err{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err-text)}
|
|
|
|
/* Typing indicator */
|
|
.typing{display:flex;align-items:center;gap:4px;padding:8px 0}
|
|
.typing span{width:7px;height:7px;background:#aaa;border-radius:50%;animation:bounce .6s infinite alternate}
|
|
.typing span:nth-child(2){animation-delay:.15s}
|
|
.typing span:nth-child(3){animation-delay:.3s}
|
|
@keyframes bounce{to{transform:translateY(-6px);opacity:.4}}
|
|
|
|
/* Input area */
|
|
#input-area{padding:12px 16px 16px;background:var(--surface);border-top:1px solid var(--border)}
|
|
#input-wrap{max-width:800px;margin:0 auto;display:flex;align-items:flex-end;gap:10px;
|
|
border:1px solid var(--border);border-radius:26px;padding:6px 8px 6px 18px;background:var(--surface);
|
|
transition:border-color .2s}
|
|
#input-wrap:focus-within{border-color:#999}
|
|
#prompt{flex:1;border:none;outline:none;font-size:14px;line-height:1.5;resize:none;
|
|
min-height:24px;max-height:180px;font-family:inherit;background:transparent}
|
|
#send-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--accent);
|
|
color:#fff;font-size:18px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
|
|
transition:opacity .15s}
|
|
#send-btn:disabled{opacity:.35;cursor:default}
|
|
|
|
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
|
|
.msg-row,.tool-card,.tool-result,.think-box,.result-banner{animation:fadeIn .2s ease}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Open Agent SDK</h1>
|
|
<button onclick="newSession()" title="New session">+</button>
|
|
</header>
|
|
|
|
<div id="chat">
|
|
<div id="chat-inner">
|
|
<div id="welcome">
|
|
<h2>What can I do for you?</h2>
|
|
<div class="suggestions">
|
|
<button onclick="useSuggestion(this)"><span>📁</span>List files in this project</button>
|
|
<button onclick="useSuggestion(this)"><span>📄</span>Read package.json</button>
|
|
<button onclick="useSuggestion(this)"><span>📊</span>Count lines of code</button>
|
|
<button onclick="useSuggestion(this)"><span>💻</span>Show system info</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="input-area">
|
|
<div id="input-wrap">
|
|
<textarea id="prompt" rows="1" placeholder="Assign a task or ask anything" onkeydown="handleKey(event)" oninput="autoResize()"></textarea>
|
|
<button id="send-btn" onclick="sendMessage()">↑</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const chatInner = document.getElementById('chat-inner');
|
|
const chatEl = document.getElementById('chat');
|
|
const promptEl = document.getElementById('prompt');
|
|
const sendBtn = document.getElementById('send-btn');
|
|
const welcomeEl = document.getElementById('welcome');
|
|
|
|
let streaming = false;
|
|
|
|
const TOOL_ICONS = {
|
|
Bash:'🛠',Read:'📄',Write:'📝',Edit:'✎',
|
|
Glob:'🔍',Grep:'🔎',WebFetch:'🌐',WebSearch:'🔍',
|
|
Agent:'🤖',NotebookEdit:'📓',TaskCreate:'📋',
|
|
};
|
|
|
|
/* ---- helpers ---- */
|
|
function esc(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')}
|
|
|
|
function renderMarkdown(raw){
|
|
let h = esc(raw);
|
|
// code blocks
|
|
h = h.replace(/```(\w*)\n([\s\S]*?)```/g, (_,lang,code) =>
|
|
`<pre><code class="lang-${lang}">${code.trim()}</code></pre>`);
|
|
// inline code
|
|
h = h.replace(/`([^`\n]+)`/g, '<code>$1</code>');
|
|
// bold
|
|
h = h.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
|
// unordered lists
|
|
h = h.replace(/^[\-\*] (.+)$/gm, '<li>$1</li>');
|
|
h = h.replace(/(<li>.*<\/li>\n?)+/g, m => '<ul>'+m+'</ul>');
|
|
// ordered lists
|
|
h = h.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
|
|
// paragraphs
|
|
h = h.replace(/\n{2,}/g, '</p><p>');
|
|
h = h.replace(/\n/g, '<br>');
|
|
return '<p>'+h+'</p>';
|
|
}
|
|
|
|
function scrollToBottom(){
|
|
requestAnimationFrame(()=>{ chatEl.scrollTop = chatEl.scrollHeight; });
|
|
}
|
|
|
|
function autoResize(){
|
|
promptEl.style.height = 'auto';
|
|
promptEl.style.height = Math.min(promptEl.scrollHeight, 180)+'px';
|
|
}
|
|
|
|
/* ---- actions ---- */
|
|
function handleKey(e){
|
|
if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); sendMessage(); }
|
|
}
|
|
|
|
function useSuggestion(btn){
|
|
const text = btn.textContent.replace(/^.\s*/u,'');
|
|
promptEl.value = text;
|
|
sendMessage();
|
|
}
|
|
|
|
async function newSession(){
|
|
await fetch('/api/new',{method:'POST'});
|
|
chatInner.innerHTML = '';
|
|
chatInner.appendChild(welcomeEl);
|
|
welcomeEl.style.display = '';
|
|
}
|
|
|
|
async function sendMessage(){
|
|
const text = promptEl.value.trim();
|
|
if(!text || streaming) return;
|
|
streaming = true;
|
|
sendBtn.disabled = true;
|
|
promptEl.value = '';
|
|
autoResize();
|
|
|
|
// hide welcome
|
|
welcomeEl.style.display = 'none';
|
|
|
|
// user bubble
|
|
const uRow = document.createElement('div');
|
|
uRow.className = 'msg-row user';
|
|
uRow.innerHTML = `<div class="bubble-user">${esc(text)}</div>`;
|
|
chatInner.appendChild(uRow);
|
|
scrollToBottom();
|
|
|
|
// typing indicator
|
|
const typingEl = document.createElement('div');
|
|
typingEl.className = 'msg-row assistant';
|
|
typingEl.innerHTML = '<div class="typing"><span></span><span></span><span></span></div>';
|
|
chatInner.appendChild(typingEl);
|
|
scrollToBottom();
|
|
|
|
// assistant wrapper
|
|
const aRow = document.createElement('div');
|
|
aRow.className = 'msg-row assistant';
|
|
const aBubble = document.createElement('div');
|
|
aBubble.className = 'bubble-assistant';
|
|
aRow.appendChild(aBubble);
|
|
|
|
let textAcc = '';
|
|
let textEl = null;
|
|
let typingRemoved = false;
|
|
|
|
function ensureTextEl(){
|
|
if(!textEl){
|
|
textEl = document.createElement('div');
|
|
aBubble.appendChild(textEl);
|
|
}
|
|
}
|
|
|
|
try{
|
|
const resp = await fetch('/api/chat',{
|
|
method:'POST',
|
|
headers:{'Content-Type':'application/json'},
|
|
body: JSON.stringify({message:text}),
|
|
});
|
|
|
|
if(!resp.ok){
|
|
throw new Error(`HTTP ${resp.status}: ${await resp.text()}`);
|
|
}
|
|
|
|
// Two code paths: streaming (ReadableStream) or fallback (text)
|
|
if(resp.body && typeof resp.body.getReader === 'function'){
|
|
// --- Streaming path ---
|
|
const reader = resp.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buf = '';
|
|
|
|
while(true){
|
|
const {done,value} = await reader.read();
|
|
if(done) break;
|
|
buf += decoder.decode(value, {stream:true});
|
|
processSSEBuffer();
|
|
}
|
|
// flush remaining
|
|
if(buf.trim()) processSSEBuffer();
|
|
|
|
function processSSEBuffer(){
|
|
const lines = buf.split('\n');
|
|
buf = lines.pop() || '';
|
|
for(const line of lines) handleSSELine(line);
|
|
}
|
|
} else {
|
|
// --- Fallback: read full text at once (proxy/polyfill environments) ---
|
|
const fullText = await resp.text();
|
|
for(const line of fullText.split('\n')) handleSSELine(line);
|
|
}
|
|
|
|
function handleSSELine(line){
|
|
const trimmed = line.trim();
|
|
if(!trimmed.startsWith('data: ')) return;
|
|
let parsed;
|
|
try{ parsed = JSON.parse(trimmed.slice(6)); } catch{ return; }
|
|
const {event, data} = parsed;
|
|
if(!event || !data) return;
|
|
|
|
// remove typing on first real event
|
|
if(!typingRemoved){ typingRemoved = true; typingEl.remove(); chatInner.appendChild(aRow); }
|
|
|
|
switch(event){
|
|
case 'text':
|
|
textAcc += data.text;
|
|
ensureTextEl();
|
|
textEl.innerHTML = renderMarkdown(textAcc);
|
|
scrollToBottom();
|
|
break;
|
|
|
|
case 'tool_use':{
|
|
textAcc = ''; textEl = null;
|
|
const icon = TOOL_ICONS[data.name] || '🔧';
|
|
const inputStr = typeof data.input === 'string' ? data.input : JSON.stringify(data.input);
|
|
const card = document.createElement('div');
|
|
card.className = 'tool-card';
|
|
card.id = 'tool-'+data.id;
|
|
card.innerHTML = `<div class="tool-hd"><span class="tool-icon">${icon}</span>${esc(data.name)}</div>`
|
|
+ `<div class="tool-input">${esc(inputStr).slice(0,200)}</div>`;
|
|
aBubble.appendChild(card);
|
|
scrollToBottom();
|
|
break;
|
|
}
|
|
|
|
case 'tool_result':{
|
|
const card = document.getElementById('tool-'+data.tool_use_id);
|
|
const rd = document.createElement('div');
|
|
rd.className = 'tool-result';
|
|
rd.textContent = (data.content||'').slice(0,3000);
|
|
if(card) card.after(rd); else aBubble.appendChild(rd);
|
|
scrollToBottom();
|
|
break;
|
|
}
|
|
|
|
case 'thinking':{
|
|
textAcc = ''; textEl = null;
|
|
const tb = document.createElement('div');
|
|
tb.className = 'think-box';
|
|
tb.textContent = data.thinking.slice(0,1000);
|
|
aBubble.appendChild(tb);
|
|
scrollToBottom();
|
|
break;
|
|
}
|
|
|
|
case 'result':{
|
|
const b = document.createElement('div');
|
|
b.className = 'result-banner ok';
|
|
b.innerHTML = `✅ Done · $${(data.cost||0).toFixed(2)} · ${((data.duration_ms||0)/1000).toFixed(1)}s · ${(data.input_tokens||0)+(data.output_tokens||0)} tokens`;
|
|
aBubble.appendChild(b);
|
|
scrollToBottom();
|
|
break;
|
|
}
|
|
|
|
case 'error':{
|
|
const b = document.createElement('div');
|
|
b.className = 'result-banner err';
|
|
b.innerHTML = `❌ Error: ${esc(data.message||'unknown')}`;
|
|
aBubble.appendChild(b);
|
|
scrollToBottom();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
}catch(err){
|
|
if(!typingRemoved){ typingEl.remove(); chatInner.appendChild(aRow); }
|
|
const b = document.createElement('div');
|
|
b.className = 'result-banner err';
|
|
b.textContent = 'Network error: '+err.message;
|
|
aBubble.appendChild(b);
|
|
}
|
|
|
|
streaming = false;
|
|
sendBtn.disabled = false;
|
|
promptEl.focus();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|