Eric Jungbauer
eac7b64a90
Ships a chat-based agent at /pirate that LLM-routes user questions to media-stack tools and returns natural-language answers grounded in real data. Foundation built on top of the existing API-tokens + dual-auth infrastructure so other apps (Open WebUI, HA voice, Synap) can consume the same Pirate API. New subsystem (not the standard trigger/result pattern): - pirate_conversations + pirate_messages tables - service_configs table (admin-wide creds shared by media agents) - /api/pirate/chat + /api/pirate/conversations/* (dual-auth: user session OR Bearer token scoped to user's pirate instance) - /api/internal/pirate/* endpoints used by runtime subprocess - /api/admin/services + Services tab in admin.html for cred management - Auto-seeded service_configs on startup from Media Stack Reference defaults (never overwrite admin edits) - Auto-seeded pirate catalog entry + per-user pirate instance on startup Pirate package (agents/pirate/): - prompts.py: system prompt, enforces read-only in Phase 1 - runtime.py: Anthropic-native tool-use loop (max 8 iterations, persists every turn) - tools/_common.py: service_configs fetch + qBit session auth - tools/sonarr.py: queue, upcoming, series_search, library_stats - tools/radarr.py: queue, movie_search, library_stats - tools/qbittorrent.py: torrents, transfer_stats, categories - tools/storage.py: disk_space (via Sonarr diskspace API) - Default model: claude-sonnet-4-5 (Haiku fumbles multi-step chains) Dashboard: - static/pirate.html — full chat UI with conversation sidebar, suggestion chips, inline tool-call visualization, 24h idle reset + New Chat button - Pirate button added to main dashboard header Wiki reorg: Agents / Developer Guides / Plans parent docs, per-agent reference docs, The Pirate doc. API Clients + Calling Agents docs moved under Developer Guides. Working folder: PIRATE_PHASE_1A.md + NEXT_SESSION_PROMPT.md for fast bootstrap. Smoke tested end-to-end: real tool calls against qBittorrent (13 active torrents correctly reported) and Sonarr disk-space; multi-turn conversation state preserved across follow-up questions. On deck: Phase 1.b (Lidarr/Whisparr/Overseerr/Plex tools), then 1.d (OWUI pipeline), then 1.c (HA voice).
224 lines
11 KiB
HTML
224 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Pirate — Agent Command Center</title>
|
|
<style>
|
|
:root{--bg:#0f1117;--surface:#1a1d27;--surface2:#232733;--border:#2e3345;--text:#e4e6ed;--text-dim:#8b8fa3;--accent:#6c5ce7;--accent-hover:#7c6ef0;--green:#00b894;--red:#e17055;--yellow:#fdcb6e;--blue:#74b9ff}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden}
|
|
.header{background:var(--surface);border-bottom:1px solid var(--border);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
|
|
.header h1{font-size:1.1rem;font-weight:600}
|
|
.header-right{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--text-dim)}
|
|
.small-btn{background:none;border:1px solid var(--border);color:var(--text-dim);padding:.35rem .75rem;border-radius:6px;font-size:.8rem;cursor:pointer}
|
|
.small-btn:hover{border-color:var(--text-dim);color:var(--text)}
|
|
.btn-primary{background:var(--accent);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;font-size:.85rem;cursor:pointer}
|
|
.btn-primary:hover{background:var(--accent-hover)}
|
|
|
|
.layout{flex:1;display:grid;grid-template-columns:260px 1fr;min-height:0}
|
|
.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
|
|
.sidebar-header{padding:.75rem 1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
|
|
.sidebar-header h2{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}
|
|
.convo-list{flex:1;overflow-y:auto}
|
|
.convo-item{padding:.65rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;font-size:.85rem}
|
|
.convo-item:hover{background:var(--surface2)}
|
|
.convo-item.active{background:var(--surface2);border-left:3px solid var(--accent);padding-left:calc(1rem - 3px)}
|
|
.convo-item .title{color:var(--text);line-height:1.3;max-height:2.6em;overflow:hidden;margin-bottom:.2rem}
|
|
.convo-item .when{color:var(--text-dim);font-size:.7rem}
|
|
|
|
.chat{display:flex;flex-direction:column;min-height:0}
|
|
.messages{flex:1;overflow-y:auto;padding:1.25rem 1.5rem}
|
|
.msg-group{margin-bottom:1.25rem}
|
|
.msg-role{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:.25rem}
|
|
.msg-role.user{color:var(--blue)}
|
|
.msg-role.assistant{color:var(--accent)}
|
|
.msg-role.tool{color:var(--yellow)}
|
|
.msg-body{font-size:.9rem;line-height:1.55;white-space:pre-wrap}
|
|
.msg-body code{background:var(--surface2);padding:.1rem .35rem;border-radius:4px;font-size:.85em;font-family:'SF Mono',Monaco,Consolas,monospace}
|
|
.msg-tool{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.65rem .85rem;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:.75rem;color:var(--text-dim);margin-top:.4rem}
|
|
.msg-tool .tool-head{color:var(--yellow);font-weight:600;margin-bottom:.4rem}
|
|
.msg-tool pre{white-space:pre-wrap;word-break:break-word;max-height:260px;overflow-y:auto}
|
|
|
|
.empty{text-align:center;color:var(--text-dim);margin-top:3rem;font-size:.95rem}
|
|
.empty .suggestion{display:inline-block;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:.4rem .9rem;margin:.3rem;cursor:pointer;font-size:.85rem;color:var(--text)}
|
|
.empty .suggestion:hover{border-color:var(--accent)}
|
|
|
|
.composer{border-top:1px solid var(--border);padding:1rem 1.5rem;background:var(--surface)}
|
|
.composer-row{display:flex;gap:.5rem;align-items:flex-end}
|
|
.composer textarea{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.65rem .85rem;font-size:.9rem;resize:none;outline:none;font-family:inherit;min-height:44px;max-height:200px}
|
|
.composer textarea:focus{border-color:var(--accent)}
|
|
.composer .hint{font-size:.7rem;color:var(--text-dim);margin-top:.4rem}
|
|
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;vertical-align:middle}
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
.thinking{color:var(--text-dim);font-size:.85rem;padding:.5rem 0}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>The Pirate <span style="color:var(--text-dim);font-weight:400;font-size:.85rem;margin-left:.5rem">Phase 1 — read-only</span></h1>
|
|
<div class="header-right">
|
|
<span id="user-display"></span>
|
|
<button class="small-btn" onclick="newChat()">+ New Chat</button>
|
|
<button class="small-btn" onclick="location.href='/'">Dashboard</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layout">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Conversations</h2>
|
|
</div>
|
|
<div class="convo-list" id="convo-list"></div>
|
|
</div>
|
|
<div class="chat">
|
|
<div class="messages" id="messages"></div>
|
|
<div class="composer">
|
|
<div class="composer-row">
|
|
<textarea id="input" placeholder="Ask about downloads, shows, movies, storage..." rows="1"
|
|
onkeydown="if(event.key==='Enter' && !event.shiftKey){event.preventDefault();send()}"
|
|
oninput="autoGrow(this)"></textarea>
|
|
<button class="btn-primary" id="send-btn" onclick="send()">Send</button>
|
|
</div>
|
|
<div class="hint">Enter to send · Shift+Enter for newline · Phase 1 is read-only (no writes yet)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API='';
|
|
let currentConv=null;
|
|
let sending=false;
|
|
|
|
function autoGrow(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,200)+'px'}
|
|
|
|
function timeAgo(s){if(!s)return'';const d=new Date(s+(s.endsWith('Z')?'':'Z')),sec=Math.floor((new Date()-d)/1000);if(sec<60)return'just now';if(sec<3600)return Math.floor(sec/60)+'m ago';if(sec<86400)return Math.floor(sec/3600)+'h ago';return Math.floor(sec/86400)+'d ago'}
|
|
|
|
async function loadMe(){
|
|
const r=await fetch(API+'/api/me');
|
|
if(r.status===401){location.href='/login';return}
|
|
const u=await r.json();
|
|
document.getElementById('user-display').textContent=u.display_name||u.username;
|
|
}
|
|
|
|
async function loadConvos(){
|
|
const r=await fetch(API+'/api/pirate/conversations');
|
|
if(!r.ok)return;
|
|
const convs=await r.json();
|
|
const list=document.getElementById('convo-list');
|
|
if(!convs.length){list.innerHTML='<div style="padding:1rem;color:var(--text-dim);font-size:.85rem">No conversations yet. Start below.</div>';return}
|
|
list.innerHTML=convs.map(c=>`
|
|
<div class="convo-item ${currentConv===c.id?'active':''}" onclick="openConvo(${c.id})">
|
|
<div class="title">${(c.title||'Untitled').replace(/</g,'<')}</div>
|
|
<div class="when">${timeAgo(c.last_message_at)}</div>
|
|
</div>`).join('');
|
|
}
|
|
|
|
function renderMessages(messages){
|
|
const container=document.getElementById('messages');
|
|
if(!messages || !messages.length){
|
|
container.innerHTML=`<div class="empty">
|
|
<div style="font-size:1rem;margin-bottom:1rem">Ask The Pirate about your media.</div>
|
|
<div class="suggestion" onclick="fillInput('What\\'s downloading right now?')">What's downloading right now?</div>
|
|
<div class="suggestion" onclick="fillInput('Any new TV episodes in the queue?')">Any new TV episodes in the queue?</div>
|
|
<div class="suggestion" onclick="fillInput('How much space is left?')">How much space is left?</div>
|
|
<div class="suggestion" onclick="fillInput('Do we have Dune 2?')">Do we have Dune 2?</div>
|
|
<div class="suggestion" onclick="fillInput('How big is our TV library?')">How big is our TV library?</div>
|
|
</div>`;
|
|
return;
|
|
}
|
|
container.innerHTML=messages.map(m=>{
|
|
if(m.role==='tool'){
|
|
const result=m.tool_result;
|
|
const body=typeof result==='object'?JSON.stringify(result,null,2):String(result||'');
|
|
return `<div class="msg-group">
|
|
<div class="msg-tool">
|
|
<div class="tool-head">→ tool: ${m.tool_name}</div>
|
|
<pre>${body.replace(/</g,'<').substring(0,4000)}</pre>
|
|
</div></div>`;
|
|
}
|
|
const label=m.role==='user'?'You':(m.role==='assistant'?'Pirate':m.role);
|
|
const tools=(m.tool_calls||[]).map(t=>`<div class="msg-tool"><div class="tool-head">← calling ${t.name}(${JSON.stringify(t.input).substring(0,120)})</div></div>`).join('');
|
|
return `<div class="msg-group">
|
|
<div class="msg-role ${m.role}">${label}</div>
|
|
<div class="msg-body">${(m.content||'').replace(/</g,'<')}</div>
|
|
${tools}
|
|
</div>`;
|
|
}).join('');
|
|
container.scrollTop=container.scrollHeight;
|
|
}
|
|
|
|
async function openConvo(id){
|
|
currentConv=id;
|
|
const r=await fetch(API+'/api/pirate/conversations/'+id);
|
|
if(!r.ok)return;
|
|
const conv=await r.json();
|
|
renderMessages(conv.messages);
|
|
loadConvos();
|
|
}
|
|
|
|
async function newChat(){
|
|
const r=await fetch(API+'/api/pirate/conversations/new',{method:'POST'});
|
|
if(!r.ok)return;
|
|
const c=await r.json();
|
|
currentConv=c.id;
|
|
renderMessages([]);
|
|
loadConvos();
|
|
document.getElementById('input').focus();
|
|
}
|
|
|
|
function fillInput(t){document.getElementById('input').value=t;autoGrow(document.getElementById('input'));document.getElementById('input').focus()}
|
|
|
|
async function send(){
|
|
if(sending)return;
|
|
const input=document.getElementById('input');
|
|
const msg=input.value.trim();
|
|
if(!msg)return;
|
|
sending=true;
|
|
document.getElementById('send-btn').disabled=true;
|
|
|
|
// Optimistic: show user message + thinking indicator
|
|
const container=document.getElementById('messages');
|
|
const placeholder=document.createElement('div');
|
|
placeholder.innerHTML=`<div class="msg-group"><div class="msg-role user">You</div><div class="msg-body">${msg.replace(/</g,'<')}</div></div>
|
|
<div class="msg-group"><div class="msg-role assistant">Pirate</div><div class="thinking"><span class="spinner"></span> thinking...</div></div>`;
|
|
if(container.querySelector('.empty'))container.innerHTML='';
|
|
container.appendChild(placeholder);
|
|
container.scrollTop=container.scrollHeight;
|
|
|
|
input.value='';
|
|
autoGrow(input);
|
|
|
|
try{
|
|
const r=await fetch(API+'/api/pirate/chat',{method:'POST',headers:{'Content-Type':'application/json'},
|
|
body:JSON.stringify({message:msg,conversation_id:currentConv})});
|
|
if(!r.ok){
|
|
const err=await r.json().catch(()=>({detail:r.statusText}));
|
|
placeholder.querySelector('.thinking').innerHTML=`<span style="color:var(--red)">Error: ${err.detail||'unknown'}</span>`;
|
|
return;
|
|
}
|
|
const conv=await r.json();
|
|
currentConv=conv.id;
|
|
renderMessages(conv.messages);
|
|
loadConvos();
|
|
}catch(e){
|
|
placeholder.querySelector('.thinking').innerHTML=`<span style="color:var(--red)">Error: ${e.message}</span>`;
|
|
}finally{
|
|
sending=false;
|
|
document.getElementById('send-btn').disabled=false;
|
|
input.focus();
|
|
}
|
|
}
|
|
|
|
// Init
|
|
loadMe();
|
|
loadConvos().then(()=>{
|
|
// Auto-open most recent conversation if any
|
|
fetch(API+'/api/pirate/conversations').then(r=>r.json()).then(convs=>{
|
|
if(convs.length){openConvo(convs[0].id)} else {renderMessages([])}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|