wehub-resource-sync
73 lines
4.1 KiB
HTML
73 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Agent Memories</title>
|
|
<link rel="manifest" href="/manifest.json">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: { accent: '#0078d4' }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.scrollbar-thin::-webkit-scrollbar { width: 6px; }
|
|
.scrollbar-thin::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-white h-screen overflow-hidden font-[system-ui] text-gray-800">
|
|
<div class="flex flex-col h-screen">
|
|
<header class="flex items-center gap-3 px-5 py-3.5 border-b border-gray-200">
|
|
<svg class="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
|
|
</svg>
|
|
<div>
|
|
<h1 class="text-sm font-semibold text-gray-900">Agent Memories</h1>
|
|
<p class="text-[11px] text-gray-400">Persistent knowledge across sessions</p>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="flex border-b border-gray-200">
|
|
<button class="tab flex-1 py-2.5 px-4 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:bg-gray-50 hover:text-gray-700 transition-all" data-tab="memories">Memories</button>
|
|
<button class="tab flex-1 py-2.5 px-4 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:bg-gray-50 hover:text-gray-700 transition-all" data-tab="user">User Profile</button>
|
|
</nav>
|
|
|
|
<main class="flex-1 overflow-hidden relative">
|
|
<section id="memories-panel" class="panel hidden flex-col h-full absolute inset-0">
|
|
<div class="flex-1 overflow-y-auto p-3 space-y-1.5 scrollbar-thin" id="memories-list"></div>
|
|
<div class="flex gap-2 p-3 border-t border-gray-200 bg-gray-50">
|
|
<input type="text" id="memory-input" placeholder="Add a new memory..." class="flex-1 px-3 py-2 border border-gray-300 rounded text-sm outline-none focus:border-accent transition-colors" />
|
|
<button id="memory-add-btn" class="px-4 py-2 bg-accent text-white rounded text-sm font-medium hover:bg-blue-700 active:bg-blue-800 transition-colors">Add</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="user-panel" class="panel hidden flex-col h-full absolute inset-0">
|
|
<div class="flex-1 overflow-y-auto p-3 space-y-1.5 scrollbar-thin" id="user-list"></div>
|
|
<div class="flex gap-2 p-3 border-t border-gray-200 bg-gray-50">
|
|
<input type="text" id="user-input" placeholder="Add a user fact..." class="flex-1 px-3 py-2 border border-gray-300 rounded text-sm outline-none focus:border-accent transition-colors" />
|
|
<button id="user-add-btn" class="px-4 py-2 bg-accent text-white rounded text-sm font-medium hover:bg-blue-700 active:bg-blue-800 transition-colors">Add</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="flex items-center justify-between px-4 py-2.5 border-t border-gray-200 bg-gray-50 text-xs text-gray-500">
|
|
<div class="flex gap-4" id="stats"></div>
|
|
<div class="flex gap-2">
|
|
<button id="refresh-btn" class="px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded text-xs hover:border-accent hover:text-accent transition-colors">Refresh</button>
|
|
<button id="review-btn" class="px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded text-xs hover:border-accent hover:text-accent transition-colors">Run Review</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<div id="toast" class="fixed bottom-16 left-1/2 -translate-x-1/2 px-4 py-2 bg-gray-800 text-white rounded text-sm opacity-0 transition-opacity pointer-events-none"></div>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|