create-byan-agent 2.8.1 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/exchange/agent-packager.js +464 -0
- package/lib/exchange/conversation-exporter.js +171 -0
- package/lib/exchange/gist-client.js +257 -0
- package/package.json +1 -1
- package/src/webui/api.js +536 -1
- package/src/webui/chat/bridge.js +92 -0
- package/src/webui/chat/claude-adapter.js +174 -0
- package/src/webui/chat/cli-detector.js +156 -0
- package/src/webui/chat/codex-adapter.js +57 -0
- package/src/webui/chat/copilot-adapter.js +67 -0
- package/src/webui/chat/session-manager.js +185 -0
- package/src/webui/public/chat.css +1628 -0
- package/src/webui/public/chat.html +202 -0
- package/src/webui/public/chat.js +1512 -0
- package/src/webui/server.js +123 -2
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>BYAN Chat — AI Agent Interface</title>
|
|
7
|
+
<link rel="stylesheet" href="chat.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<!-- Top Bar -->
|
|
11
|
+
<header class="topbar">
|
|
12
|
+
<div class="topbar-left">
|
|
13
|
+
<button class="icon-btn sidebar-toggle" id="btn-sidebar" title="Toggle sidebar" aria-label="Toggle sidebar">☰</button>
|
|
14
|
+
<h1 class="logo">BYAN</h1>
|
|
15
|
+
<span class="label">Chat</span>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="topbar-center">
|
|
18
|
+
<div class="agent-indicator" id="agent-indicator">
|
|
19
|
+
<span class="agent-icon" id="active-agent-icon"></span>
|
|
20
|
+
<span class="agent-name" id="active-agent-name">No agent</span>
|
|
21
|
+
</div>
|
|
22
|
+
<select id="model-select" class="model-select" aria-label="Select model">
|
|
23
|
+
<option value="">Default model</option>
|
|
24
|
+
<option value="sonnet">Claude Sonnet</option>
|
|
25
|
+
<option value="opus">Claude Opus</option>
|
|
26
|
+
<option value="gpt-5.4">GPT-5.4</option>
|
|
27
|
+
</select>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="topbar-right">
|
|
30
|
+
<button class="icon-btn" id="btn-split" title="Split view" aria-label="Toggle split view">◫</button>
|
|
31
|
+
<button class="icon-btn" id="btn-export" title="Export conversation" aria-label="Export conversation">⇩</button>
|
|
32
|
+
<button class="icon-btn" id="btn-settings" title="Settings" aria-label="Settings">⚙</button>
|
|
33
|
+
</div>
|
|
34
|
+
</header>
|
|
35
|
+
|
|
36
|
+
<div class="main-layout">
|
|
37
|
+
<!-- Left Sidebar: Agent Gallery -->
|
|
38
|
+
<aside class="sidebar" id="sidebar" role="complementary" aria-label="Agent sidebar">
|
|
39
|
+
<div class="sidebar-header">
|
|
40
|
+
<h2>Agents</h2>
|
|
41
|
+
<button class="icon-btn" id="btn-import-agent" title="Import agent" aria-label="Import agent">+</button>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<!-- CLI Status -->
|
|
45
|
+
<div class="cli-status" id="cli-status" aria-label="CLI availability">
|
|
46
|
+
<!-- Populated by JS -->
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<!-- Agent List (grouped by module) -->
|
|
50
|
+
<div class="agent-list" id="agent-list" role="list" aria-label="Available agents">
|
|
51
|
+
<!-- Populated by JS -->
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<!-- Session History -->
|
|
55
|
+
<div class="session-history">
|
|
56
|
+
<h3>History</h3>
|
|
57
|
+
<div id="session-list" role="list" aria-label="Conversation history">
|
|
58
|
+
<!-- Populated by JS -->
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</aside>
|
|
62
|
+
|
|
63
|
+
<!-- Sidebar Overlay (mobile) -->
|
|
64
|
+
<div class="sidebar-overlay hidden" id="sidebar-overlay"></div>
|
|
65
|
+
|
|
66
|
+
<!-- Chat Area -->
|
|
67
|
+
<main class="chat-area" role="main">
|
|
68
|
+
<!-- Messages -->
|
|
69
|
+
<div class="messages" id="messages" role="log" aria-live="polite" aria-label="Chat messages">
|
|
70
|
+
<!-- Welcome message when empty -->
|
|
71
|
+
<div class="welcome-screen" id="welcome-screen">
|
|
72
|
+
<h2>BYAN Chat</h2>
|
|
73
|
+
<p>Select an agent from the sidebar or start typing.</p>
|
|
74
|
+
<div class="quick-agents" id="quick-agents">
|
|
75
|
+
<!-- Top 4 agents as quick-start cards -->
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<!-- Tool Approval Banner -->
|
|
81
|
+
<div class="tool-approval hidden" id="tool-approval" role="alert">
|
|
82
|
+
<div class="tool-info">
|
|
83
|
+
<span class="tool-label">Tool request:</span>
|
|
84
|
+
<span class="tool-name" id="tool-name"></span>
|
|
85
|
+
<code class="tool-command" id="tool-command"></code>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="tool-actions">
|
|
88
|
+
<button class="btn-approve" onclick="chat.approveTool()" aria-label="Approve tool">Approve</button>
|
|
89
|
+
<button class="btn-deny" onclick="chat.denyTool()" aria-label="Deny tool">Deny</button>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<!-- Input Area -->
|
|
94
|
+
<div class="input-area">
|
|
95
|
+
<div class="input-row">
|
|
96
|
+
<button class="icon-btn" id="btn-attach" title="Attach file" aria-label="Attach file">📎</button>
|
|
97
|
+
<button class="icon-btn" id="btn-voice" title="Voice input" aria-label="Voice input">🎤</button>
|
|
98
|
+
<textarea id="message-input" placeholder="Message BYAN..." rows="1" autofocus aria-label="Message input"></textarea>
|
|
99
|
+
<button class="btn-send" id="btn-send" title="Send message" aria-label="Send message">➤</button>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="input-meta">
|
|
102
|
+
<span id="cli-label" class="cli-badge">claude</span>
|
|
103
|
+
<span id="typing-indicator" class="typing hidden">Agent is thinking...</span>
|
|
104
|
+
<span id="char-count" class="char-count"></span>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</main>
|
|
108
|
+
|
|
109
|
+
<!-- Right Panel: Split View (hidden by default) -->
|
|
110
|
+
<aside class="split-panel hidden" id="split-panel" role="complementary" aria-label="Raw CLI output">
|
|
111
|
+
<div class="split-header">
|
|
112
|
+
<h3>Raw CLI Output</h3>
|
|
113
|
+
<button class="icon-btn" onclick="chat.closeSplit()" aria-label="Close split view">✕</button>
|
|
114
|
+
</div>
|
|
115
|
+
<pre class="split-content" id="split-content"></pre>
|
|
116
|
+
</aside>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<!-- Modal: Import Agent -->
|
|
120
|
+
<div class="modal hidden" id="modal-import" role="dialog" aria-modal="true" aria-labelledby="import-title">
|
|
121
|
+
<div class="modal-content">
|
|
122
|
+
<h2 id="import-title">Import Agent</h2>
|
|
123
|
+
<div class="drop-zone" id="drop-zone">
|
|
124
|
+
<p>Drop a .byan-agent file here</p>
|
|
125
|
+
<p class="drop-or">or</p>
|
|
126
|
+
<input type="file" id="file-input" accept=".byan-agent,.zip,.md" class="sr-only">
|
|
127
|
+
<button class="btn-secondary" onclick="document.getElementById('file-input').click()">Browse</button>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="import-url">
|
|
130
|
+
<input type="text" id="import-url" placeholder="Or paste a URL / Gist link..." aria-label="Import URL">
|
|
131
|
+
<button class="btn-primary" onclick="chat.importFromURL()">Import</button>
|
|
132
|
+
</div>
|
|
133
|
+
<button class="btn-close" onclick="chat.closeModal('modal-import')">Cancel</button>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<!-- Modal: Export Conversation -->
|
|
138
|
+
<div class="modal hidden" id="modal-export" role="dialog" aria-modal="true" aria-labelledby="export-title">
|
|
139
|
+
<div class="modal-content">
|
|
140
|
+
<h2 id="export-title">Export Conversation</h2>
|
|
141
|
+
<div class="export-options">
|
|
142
|
+
<button class="card" onclick="chat.exportAs('json')">
|
|
143
|
+
<h3>JSON</h3>
|
|
144
|
+
<p>Full data, importable</p>
|
|
145
|
+
</button>
|
|
146
|
+
<button class="card" onclick="chat.exportAs('markdown')">
|
|
147
|
+
<h3>Markdown</h3>
|
|
148
|
+
<p>Human-readable</p>
|
|
149
|
+
</button>
|
|
150
|
+
<button class="card" onclick="chat.exportAs('template')">
|
|
151
|
+
<h3>Template</h3>
|
|
152
|
+
<p>Prompts only, no responses</p>
|
|
153
|
+
</button>
|
|
154
|
+
</div>
|
|
155
|
+
<button class="btn-close" onclick="chat.closeModal('modal-export')">Cancel</button>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<!-- Modal: File Attachment Preview -->
|
|
160
|
+
<div class="modal hidden" id="modal-attach" role="dialog" aria-modal="true" aria-labelledby="attach-title">
|
|
161
|
+
<div class="modal-content">
|
|
162
|
+
<h2 id="attach-title">Attach File</h2>
|
|
163
|
+
<input type="file" id="attach-input" multiple>
|
|
164
|
+
<div id="attach-preview"></div>
|
|
165
|
+
<div class="modal-actions">
|
|
166
|
+
<button class="btn-secondary" onclick="chat.closeModal('modal-attach')">Cancel</button>
|
|
167
|
+
<button class="btn-primary" onclick="chat.confirmAttach()">Attach</button>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<!-- Modal: Settings -->
|
|
173
|
+
<div class="modal hidden" id="modal-settings" role="dialog" aria-modal="true" aria-labelledby="settings-title">
|
|
174
|
+
<div class="modal-content">
|
|
175
|
+
<h2 id="settings-title">Settings</h2>
|
|
176
|
+
<div class="settings-group">
|
|
177
|
+
<label for="setting-cli">Preferred CLI</label>
|
|
178
|
+
<select id="setting-cli">
|
|
179
|
+
<option value="auto">Auto-detect</option>
|
|
180
|
+
<option value="claude">Claude Code</option>
|
|
181
|
+
<option value="copilot">GitHub Copilot</option>
|
|
182
|
+
<option value="codex">OpenCode/Codex</option>
|
|
183
|
+
</select>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="settings-group">
|
|
186
|
+
<label for="setting-theme">Theme</label>
|
|
187
|
+
<select id="setting-theme">
|
|
188
|
+
<option value="dark">Dark</option>
|
|
189
|
+
<option value="light">Light (coming soon)</option>
|
|
190
|
+
</select>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="settings-group">
|
|
193
|
+
<label for="setting-stream">Stream responses</label>
|
|
194
|
+
<input type="checkbox" id="setting-stream" checked>
|
|
195
|
+
</div>
|
|
196
|
+
<button class="btn-close" onclick="chat.closeModal('modal-settings')">Close</button>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<script src="chat.js"></script>
|
|
201
|
+
</body>
|
|
202
|
+
</html>
|