mirror of
https://github.com/zhayujie/chatgpt-on-wechat.git
synced 2026-02-27 16:10:21 +08:00
9917552b4b
- Fix dark mode FOUC: apply theme in <head> before first paint, defer transition-colors to post-init to avoid animated flash on load - Fix Safari IME Enter bug: defer compositionend reset via setTimeout(0) - Fix history scroll: use requestAnimationFrame before scrollChatToBottom - Limit restore turns to min(6, max_turns//3) on restart - Fix load_messages cutoff to start at turn boundary, preventing orphaned tool_use/tool_result pairs from being sent to the LLM - Merge all assistant messages within one user turn into a single bubble; render tool_calls in history using same CSS as live SSE view - Handle empty choices list in stream chunks
534 lines
39 KiB
HTML
534 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh" class="">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CowAgent Console</title>
|
|
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
|
|
<link id="hljs-light" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
|
|
<link id="hljs-dark" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" disabled>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/java.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
|
mono: ['"JetBrains Mono"', '"Fira Code"', 'Consolas', 'monospace'],
|
|
},
|
|
colors: {
|
|
primary: {
|
|
50: '#EDFDF3', 100: '#D4FAE2', 200: '#ABF4C7', 300: '#74E9A4',
|
|
400: '#4ABE6E', 500: '#35A85B', 600: '#228547', 700: '#1C6B3B',
|
|
800: '#1A5532', 900: '#16462A',
|
|
}
|
|
},
|
|
animation: {
|
|
'pulse-dot': 'pulseDot 1.4s infinite ease-in-out both',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="assets/css/console.css">
|
|
<!-- Apply theme/lang before first paint to avoid flash of unstyled content.
|
|
This runs synchronously in <head> so the correct class is on <html>
|
|
before any CSS or body rendering occurs. -->
|
|
<script>
|
|
(function() {
|
|
var theme = localStorage.getItem('cow_theme') || 'dark';
|
|
if (theme === 'dark') document.documentElement.classList.add('dark');
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body class="h-screen overflow-hidden bg-gray-50 dark:bg-[#111111] text-slate-800 dark:text-slate-200 font-sans">
|
|
<div id="app" class="flex h-screen">
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- SIDEBAR -->
|
|
<!-- ================================================================ -->
|
|
<aside id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-[#0A0A0A] text-neutral-400 flex flex-col
|
|
transform -translate-x-full lg:relative lg:translate-x-0
|
|
transition-transform duration-300 ease-in-out">
|
|
<!-- Logo -->
|
|
<div class="flex items-center gap-3 px-5 h-14 border-b border-white/10 flex-shrink-0">
|
|
<img src="assets/logo.jpg" alt="CowAgent" class="w-8 h-8 rounded-lg flex-shrink-0">
|
|
<div class="flex flex-col min-w-0">
|
|
<span class="text-white font-semibold text-sm truncate">CowAgent</span>
|
|
<span class="text-neutral-500 text-xs" data-i18n="console">Console</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex-1 overflow-y-auto py-4 px-3 space-y-1">
|
|
<!-- Chat Group -->
|
|
<div class="menu-group open" data-group="chat">
|
|
<button class="w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-neutral-500 hover:text-neutral-300 cursor-pointer transition-colors duration-150">
|
|
<i class="fas fa-chevron-right text-[10px] chevron"></i>
|
|
<span data-i18n="nav_chat">Chat</span>
|
|
</button>
|
|
<div class="menu-group-items pl-2">
|
|
<a class="sidebar-item active flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 hover:bg-white/5 hover:text-neutral-200 text-[14px]"
|
|
data-view="chat">
|
|
<i class="fas fa-message item-icon text-xs w-5 text-center"></i>
|
|
<span data-i18n="menu_chat">Chat</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Management Group -->
|
|
<div class="menu-group open" data-group="manage">
|
|
<button class="w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-neutral-500 hover:text-neutral-300 cursor-pointer transition-colors duration-150">
|
|
<i class="fas fa-chevron-right text-[10px] chevron"></i>
|
|
<span data-i18n="nav_manage">Management</span>
|
|
</button>
|
|
<div class="menu-group-items pl-2">
|
|
<a class="sidebar-item flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 hover:bg-white/5 hover:text-neutral-200 text-[14px]"
|
|
data-view="config">
|
|
<i class="fas fa-sliders item-icon text-xs w-5 text-center"></i>
|
|
<span data-i18n="menu_config">Config</span>
|
|
</a>
|
|
<a class="sidebar-item flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 hover:bg-white/5 hover:text-neutral-200 text-[14px]"
|
|
data-view="skills">
|
|
<i class="fas fa-bolt item-icon text-xs w-5 text-center"></i>
|
|
<span data-i18n="menu_skills">Skills</span>
|
|
</a>
|
|
<a class="sidebar-item flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 hover:bg-white/5 hover:text-neutral-200 text-[14px]"
|
|
data-view="memory">
|
|
<i class="fas fa-brain item-icon text-xs w-5 text-center"></i>
|
|
<span data-i18n="menu_memory">Memory</span>
|
|
</a>
|
|
<a class="sidebar-item flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 hover:bg-white/5 hover:text-neutral-200 text-[14px]"
|
|
data-view="channels">
|
|
<i class="fas fa-tower-broadcast item-icon text-xs w-5 text-center"></i>
|
|
<span data-i18n="menu_channels">Channels</span>
|
|
</a>
|
|
<a class="sidebar-item flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 hover:bg-white/5 hover:text-neutral-200 text-[14px]"
|
|
data-view="tasks">
|
|
<i class="fas fa-clock item-icon text-xs w-5 text-center"></i>
|
|
<span data-i18n="menu_tasks">Tasks</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monitor Group -->
|
|
<div class="menu-group open" data-group="monitor">
|
|
<button class="w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-neutral-500 hover:text-neutral-300 cursor-pointer transition-colors duration-150">
|
|
<i class="fas fa-chevron-right text-[10px] chevron"></i>
|
|
<span data-i18n="nav_monitor">Monitor</span>
|
|
</button>
|
|
<div class="menu-group-items pl-2">
|
|
<a class="sidebar-item flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 hover:bg-white/5 hover:text-neutral-200 text-[14px]"
|
|
data-view="logs">
|
|
<i class="fas fa-terminal item-icon text-xs w-5 text-center"></i>
|
|
<span data-i18n="menu_logs">Logs</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Sidebar Footer -->
|
|
<div class="px-4 py-3 border-t border-white/10 flex-shrink-0">
|
|
<div class="flex items-center gap-2 text-xs text-neutral-600">
|
|
<i class="fas fa-circle text-[6px] text-primary-400"></i>
|
|
<a id="sidebar-version"
|
|
href="https://github.com/zhayujie/chatgpt-on-wechat/releases"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hover:text-primary-400 transition-colors duration-150 cursor-pointer"></a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mobile Overlay -->
|
|
<div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-40 hidden lg:hidden cursor-pointer" onclick="toggleSidebar()"></div>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- MAIN CONTENT -->
|
|
<!-- ================================================================ -->
|
|
<div id="main-content" class="flex-1 flex flex-col min-w-0 h-screen">
|
|
<!-- Top Header -->
|
|
<header class="h-14 flex items-center gap-3 px-4 border-b border-slate-200 dark:border-white/10 bg-white dark:bg-[#1A1A1A] flex-shrink-0 z-10">
|
|
<!-- Mobile menu toggle -->
|
|
<button id="menu-toggle" class="lg:hidden p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer transition-colors duration-150"
|
|
onclick="toggleSidebar()">
|
|
<i class="fas fa-bars text-slate-600 dark:text-slate-300"></i>
|
|
</button>
|
|
|
|
<!-- Breadcrumb -->
|
|
<div class="flex items-center gap-2 text-sm min-w-0">
|
|
<span id="breadcrumb-group" class="text-slate-400 dark:text-slate-500 truncate" data-i18n="nav_chat">Chat</span>
|
|
<i class="fas fa-chevron-right text-[10px] text-slate-300 dark:text-slate-600"></i>
|
|
<span id="breadcrumb-page" class="font-medium text-slate-700 dark:text-slate-200 truncate" data-i18n="menu_chat">Chat</span>
|
|
</div>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<!-- Language Toggle -->
|
|
<button id="lang-toggle" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium
|
|
text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10
|
|
cursor-pointer transition-colors duration-150"
|
|
onclick="toggleLanguage()">
|
|
<i class="fas fa-globe text-xs"></i>
|
|
<span id="lang-label">EN</span>
|
|
</button>
|
|
|
|
<!-- Theme Toggle -->
|
|
<button id="theme-toggle" class="p-2 rounded-lg text-slate-500 dark:text-slate-400
|
|
hover:bg-slate-100 dark:hover:bg-white/10
|
|
cursor-pointer transition-colors duration-150"
|
|
onclick="toggleTheme()">
|
|
<i id="theme-icon" class="fas fa-moon"></i>
|
|
</button>
|
|
|
|
<!-- GitHub Link -->
|
|
<a href="https://github.com/zhayujie/chatgpt-on-wechat" target="_blank" rel="noopener noreferrer"
|
|
class="p-2 rounded-lg text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10
|
|
cursor-pointer transition-colors duration-150">
|
|
<i class="fab fa-github text-lg"></i>
|
|
</a>
|
|
</header>
|
|
|
|
<!-- Content Area -->
|
|
<div id="content-area" class="flex-1 overflow-hidden">
|
|
|
|
<!-- ====================================================== -->
|
|
<!-- VIEW: Chat -->
|
|
<!-- ====================================================== -->
|
|
<div id="view-chat" class="view active">
|
|
<!-- Messages -->
|
|
<div id="chat-messages" class="flex-1 overflow-y-auto">
|
|
<!-- Welcome Screen -->
|
|
<div id="welcome-screen" class="flex flex-col items-center justify-center h-full px-6 py-12">
|
|
<img src="assets/logo.jpg" alt="CowAgent" class="w-16 h-16 rounded-2xl mb-6 shadow-lg shadow-primary-500/20">
|
|
<h1 id="welcome-title" class="text-2xl font-bold text-slate-800 dark:text-slate-100 mb-3">CowAgent</h1>
|
|
<p id="welcome-subtitle" class="text-slate-500 dark:text-slate-400 text-center max-w-lg mb-10 leading-relaxed"
|
|
data-i18n-html="welcome_subtitle">I can help you answer questions, manage your computer, create and execute skills,<br>and keep growing through long-term memory.</p>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full max-w-2xl">
|
|
<div class="example-card group bg-white dark:bg-[#1A1A1A] border border-slate-200 dark:border-white/10 rounded-xl p-4
|
|
cursor-pointer hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-md transition-all duration-200">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-7 h-7 rounded-lg bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center">
|
|
<i class="fas fa-folder-open text-blue-500 text-xs"></i>
|
|
</div>
|
|
<span class="font-medium text-sm text-slate-700 dark:text-slate-200" data-i18n="example_sys_title">System</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed" data-i18n="example_sys_text">Show me the files in the workspace</p>
|
|
</div>
|
|
<div class="example-card group bg-white dark:bg-[#1A1A1A] border border-slate-200 dark:border-white/10 rounded-xl p-4
|
|
cursor-pointer hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-md transition-all duration-200">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-7 h-7 rounded-lg bg-amber-50 dark:bg-amber-900/30 flex items-center justify-center">
|
|
<i class="fas fa-clock text-amber-500 text-xs"></i>
|
|
</div>
|
|
<span class="font-medium text-sm text-slate-700 dark:text-slate-200" data-i18n="example_task_title">Smart Task</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed" data-i18n="example_task_text">Remind me to check the server in 5 minutes</p>
|
|
</div>
|
|
<div class="example-card group bg-white dark:bg-[#1A1A1A] border border-slate-200 dark:border-white/10 rounded-xl p-4
|
|
cursor-pointer hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-md transition-all duration-200">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-7 h-7 rounded-lg bg-emerald-50 dark:bg-emerald-900/30 flex items-center justify-center">
|
|
<i class="fas fa-code text-emerald-500 text-xs"></i>
|
|
</div>
|
|
<span class="font-medium text-sm text-slate-700 dark:text-slate-200" data-i18n="example_code_title">Coding</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed" data-i18n="example_code_text">Write a Python web scraper script</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Input -->
|
|
<div class="flex-shrink-0 border-t border-slate-200 dark:border-white/10 bg-white dark:bg-[#1A1A1A] px-4 py-3">
|
|
<div class="max-w-3xl mx-auto flex items-center gap-2">
|
|
<button id="new-chat-btn" class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-lg
|
|
text-slate-400 hover:text-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/20
|
|
cursor-pointer transition-colors duration-150" title="New Chat"
|
|
onclick="newChat()">
|
|
<i class="fas fa-plus text-base"></i>
|
|
</button>
|
|
<textarea id="chat-input"
|
|
class="flex-1 min-w-0 px-4 py-[10px] rounded-xl border border-slate-200 dark:border-slate-600
|
|
bg-slate-50 dark:bg-white/5 text-slate-800 dark:text-slate-100
|
|
placeholder:text-slate-400 dark:placeholder:text-slate-500
|
|
focus:outline-none focus:ring-0 focus:border-primary-600
|
|
text-sm leading-relaxed"
|
|
rows="1"
|
|
data-i18n-placeholder="input_placeholder"
|
|
placeholder="Type a message..."></textarea>
|
|
<button id="send-btn"
|
|
class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-lg
|
|
bg-primary-400 text-white hover:bg-primary-500
|
|
disabled:bg-slate-300 dark:disabled:bg-slate-600
|
|
disabled:cursor-not-allowed cursor-pointer transition-colors duration-150"
|
|
disabled onclick="sendMessage()">
|
|
<i class="fas fa-paper-plane text-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================================================== -->
|
|
<!-- VIEW: Config -->
|
|
<!-- ====================================================== -->
|
|
<div id="view-config" class="view">
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-800 dark:text-slate-100" data-i18n="config_title">Configuration</h2>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1" data-i18n="config_desc">Manage model and agent settings</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid gap-6">
|
|
<!-- Model Config Card -->
|
|
<div class="placeholder-card bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 p-6">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-9 h-9 rounded-lg bg-primary-50 dark:bg-primary-900/30 flex items-center justify-center">
|
|
<i class="fas fa-microchip text-primary-500 text-sm"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-slate-800 dark:text-slate-100" data-i18n="config_model">Model Configuration</h3>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-4 p-3 rounded-lg bg-slate-50 dark:bg-white/5">
|
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400 w-32 flex-shrink-0">Model</span>
|
|
<span class="text-sm text-slate-700 dark:text-slate-200 flex-1 font-mono" id="cfg-model">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Agent Config Card -->
|
|
<div class="placeholder-card bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 p-6">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-9 h-9 rounded-lg bg-emerald-50 dark:bg-emerald-900/30 flex items-center justify-center">
|
|
<i class="fas fa-robot text-emerald-500 text-sm"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-slate-800 dark:text-slate-100" data-i18n="config_agent">Agent Configuration</h3>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-4 p-3 rounded-lg bg-slate-50 dark:bg-white/5">
|
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400 w-32 flex-shrink-0" data-i18n="config_agent_enabled">Agent Mode</span>
|
|
<span class="text-sm text-slate-700 dark:text-slate-200 flex-1" id="cfg-agent">--</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 p-3 rounded-lg bg-slate-50 dark:bg-white/5">
|
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400 w-32 flex-shrink-0" data-i18n="config_max_tokens">Max Tokens</span>
|
|
<span class="text-sm text-slate-700 dark:text-slate-200 flex-1 font-mono" id="cfg-max-tokens">--</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 p-3 rounded-lg bg-slate-50 dark:bg-white/5">
|
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400 w-32 flex-shrink-0" data-i18n="config_max_turns">Max Turns</span>
|
|
<span class="text-sm text-slate-700 dark:text-slate-200 flex-1 font-mono" id="cfg-max-turns">--</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 p-3 rounded-lg bg-slate-50 dark:bg-white/5">
|
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400 w-32 flex-shrink-0" data-i18n="config_max_steps">Max Steps</span>
|
|
<span class="text-sm text-slate-700 dark:text-slate-200 flex-1 font-mono" id="cfg-max-steps">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Channel Config Card -->
|
|
<div class="placeholder-card bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 p-6">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-9 h-9 rounded-lg bg-amber-50 dark:bg-amber-900/30 flex items-center justify-center">
|
|
<i class="fas fa-tower-broadcast text-amber-500 text-sm"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-slate-800 dark:text-slate-100" data-i18n="config_channel">Channel Configuration</h3>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-4 p-3 rounded-lg bg-slate-50 dark:bg-white/5">
|
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400 w-32 flex-shrink-0" data-i18n="config_channel_type">Channel Type</span>
|
|
<span class="text-sm text-slate-700 dark:text-slate-200 flex-1 font-mono" id="cfg-channel">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Coming Soon Banner -->
|
|
<div class="mt-6 p-4 rounded-xl bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800/50 flex items-center gap-3">
|
|
<i class="fas fa-info-circle text-primary-500"></i>
|
|
<span class="text-sm text-primary-700 dark:text-primary-300" data-i18n="config_coming_soon">Full editing capability coming soon. Currently displaying read-only configuration.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================================================== -->
|
|
<!-- VIEW: Skills -->
|
|
<!-- ====================================================== -->
|
|
<div id="view-skills" class="view">
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-800 dark:text-slate-100" data-i18n="skills_title">Skills</h2>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1" data-i18n="skills_desc">View, enable, or disable agent skills</p>
|
|
</div>
|
|
</div>
|
|
<div id="skills-empty" class="flex flex-col items-center justify-center py-20">
|
|
<div class="w-16 h-16 rounded-2xl bg-amber-50 dark:bg-amber-900/20 flex items-center justify-center mb-4">
|
|
<i class="fas fa-bolt text-amber-400 text-xl"></i>
|
|
</div>
|
|
<p class="text-slate-500 dark:text-slate-400 font-medium" data-i18n="skills_loading">Loading skills...</p>
|
|
<p class="text-sm text-slate-400 dark:text-slate-500 mt-1" data-i18n="skills_loading_desc">Skills will be displayed here after loading</p>
|
|
</div>
|
|
<div id="skills-list" class="grid gap-4 sm:grid-cols-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================================================== -->
|
|
<!-- VIEW: Memory -->
|
|
<!-- ====================================================== -->
|
|
<div id="view-memory" class="view">
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="max-w-4xl mx-auto">
|
|
|
|
<!-- Panel: list -->
|
|
<div id="memory-panel-list">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-800 dark:text-slate-100" data-i18n="memory_title">Memory</h2>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1" data-i18n="memory_desc">View agent memory files and contents</p>
|
|
</div>
|
|
</div>
|
|
<div id="memory-empty" class="flex flex-col items-center justify-center py-20">
|
|
<div class="w-16 h-16 rounded-2xl bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center mb-4">
|
|
<i class="fas fa-brain text-purple-400 text-xl"></i>
|
|
</div>
|
|
<p class="text-slate-500 dark:text-slate-400 font-medium" data-i18n="memory_loading">Loading memory files...</p>
|
|
<p class="text-sm text-slate-400 dark:text-slate-500 mt-1" data-i18n="memory_loading_desc">Memory files will be displayed here</p>
|
|
</div>
|
|
<div id="memory-list" class="hidden">
|
|
<div class="bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-slate-200 dark:border-white/10">
|
|
<th class="text-left px-4 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400" data-i18n="memory_col_name">Filename</th>
|
|
<th class="text-left px-4 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400" data-i18n="memory_col_type">Type</th>
|
|
<th class="text-left px-4 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400" data-i18n="memory_col_size">Size</th>
|
|
<th class="text-left px-4 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400" data-i18n="memory_col_updated">Updated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="memory-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<div id="memory-pagination" class="flex items-center justify-between mt-4 text-sm text-slate-500 dark:text-slate-400"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel: file viewer (replaces list) -->
|
|
<div id="memory-panel-viewer" class="hidden">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<button onclick="closeMemoryViewer()"
|
|
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm
|
|
text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10
|
|
border border-slate-200 dark:border-white/10 transition-colors cursor-pointer">
|
|
<i class="fas fa-arrow-left text-xs"></i>
|
|
<span data-i18n="memory_back">Back</span>
|
|
</button>
|
|
<h2 id="memory-viewer-title"
|
|
class="text-base font-semibold text-slate-800 dark:text-slate-100 font-mono truncate"></h2>
|
|
</div>
|
|
<div class="bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden">
|
|
<div id="memory-viewer-content"
|
|
class="p-5 overflow-y-auto text-sm msg-content text-slate-700 dark:text-slate-200"
|
|
style="max-height: calc(100vh - 220px)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================================================== -->
|
|
<!-- VIEW: Channels -->
|
|
<!-- ====================================================== -->
|
|
<div id="view-channels" class="view">
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-800 dark:text-slate-100" data-i18n="channels_title">Channels</h2>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1" data-i18n="channels_desc">View and manage messaging channels</p>
|
|
</div>
|
|
</div>
|
|
<div id="channels-content" class="grid gap-4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================================================== -->
|
|
<!-- VIEW: Tasks -->
|
|
<!-- ====================================================== -->
|
|
<div id="view-tasks" class="view">
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-800 dark:text-slate-100" data-i18n="tasks_title">Scheduled Tasks</h2>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1" data-i18n="tasks_desc">View and manage scheduled tasks</p>
|
|
</div>
|
|
</div>
|
|
<div id="tasks-empty" class="flex flex-col items-center justify-center py-20">
|
|
<div class="w-16 h-16 rounded-2xl bg-rose-50 dark:bg-rose-900/20 flex items-center justify-center mb-4">
|
|
<i class="fas fa-clock text-rose-400 text-xl"></i>
|
|
</div>
|
|
<p class="text-slate-500 dark:text-slate-400 font-medium">Loading...</p>
|
|
</div>
|
|
<div id="tasks-list" class="grid gap-4 hidden"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================================================== -->
|
|
<!-- VIEW: Logs -->
|
|
<!-- ====================================================== -->
|
|
<div id="view-logs" class="view">
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-800 dark:text-slate-100" data-i18n="logs_title">Logs</h2>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1" data-i18n="logs_desc">Real-time log output (run.log)</p>
|
|
</div>
|
|
</div>
|
|
<!-- Log Terminal -->
|
|
<div class="bg-slate-900 rounded-xl border border-slate-700 overflow-hidden shadow-lg">
|
|
<div class="flex items-center gap-2 px-4 py-2.5 bg-slate-800 border-b border-slate-700">
|
|
<div class="flex gap-1.5">
|
|
<span class="w-3 h-3 rounded-full bg-red-500/80"></span>
|
|
<span class="w-3 h-3 rounded-full bg-amber-500/80"></span>
|
|
<span class="w-3 h-3 rounded-full bg-emerald-500/80"></span>
|
|
</div>
|
|
<span class="text-xs text-slate-400 ml-2 font-mono">run.log</span>
|
|
<div class="flex-1"></div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
<span class="text-xs text-slate-500" data-i18n="logs_live">Live</span>
|
|
</div>
|
|
</div>
|
|
<div id="log-output" class="p-4 overflow-y-auto font-mono text-xs leading-relaxed text-slate-300 whitespace-pre-wrap break-all" style="height: calc(100vh - 272px)">
|
|
<p class="text-slate-500" data-i18n="logs_coming_msg">Log streaming will be available here. Connects to run.log for real-time output similar to tail -f.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content-area -->
|
|
</div><!-- /main-content -->
|
|
</div><!-- /app -->
|
|
|
|
<script src="assets/js/console.js"></script>
|
|
</body>
|
|
</html>
|