clodds 1.2.1 → 1.2.3

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.
@@ -0,0 +1,310 @@
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, maximum-scale=1, viewport-fit=cover">
6
+ <title>Clodds</title>
7
+ <link rel="icon" href="https://cloddsbot.com/logo.png" type="image/png">
8
+ <link rel="stylesheet" href="css/app.css?v=9">
9
+ </head>
10
+ <body>
11
+ <div class="app">
12
+ <!-- Sidebar -->
13
+ <aside class="sidebar" aria-label="Chat history">
14
+ <!-- Icon Rail (always visible) -->
15
+ <div class="sidebar-rail">
16
+ <div class="rail-top">
17
+ <button class="rail-btn" id="sidebar-toggle" title="Toggle sidebar">
18
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
19
+ <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/>
20
+ </svg>
21
+ </button>
22
+ <button class="rail-btn" id="new-chat-btn" title="New chat">
23
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
24
+ <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
25
+ </svg>
26
+ </button>
27
+ </div>
28
+ <nav class="rail-nav">
29
+ <button class="rail-btn active" data-tab="chats" title="Chats">
30
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
31
+ <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
32
+ </svg>
33
+ </button>
34
+ <button class="rail-btn" data-tab="projects" title="Projects">
35
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
36
+ <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/>
37
+ </svg>
38
+ </button>
39
+ <button class="rail-btn" data-tab="artifacts" title="Artifacts">
40
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
41
+ <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
42
+ </svg>
43
+ </button>
44
+ <button class="rail-btn" data-tab="code" title="Code">
45
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
46
+ <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
47
+ </svg>
48
+ </button>
49
+ </nav>
50
+ <div class="rail-bottom">
51
+ <button class="rail-btn rail-profile-btn" id="rail-profile-btn" title="Profile">
52
+ <div class="rail-avatar">
53
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
54
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
55
+ <circle cx="12" cy="7" r="4"/>
56
+ </svg>
57
+ </div>
58
+ </button>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Expandable Panel -->
63
+ <div class="sidebar-panel">
64
+ <div class="sidebar-search">
65
+ <input class="sidebar-search-input" type="text" placeholder="Search..." aria-label="Search" />
66
+ </div>
67
+
68
+ <!-- Tab Content Panels -->
69
+ <div class="sidebar-tab-content active" data-panel="chats">
70
+ <div class="session-list" role="list" aria-label="Conversations"></div>
71
+ </div>
72
+
73
+ <div class="sidebar-tab-content" data-panel="projects">
74
+ <div class="tab-panel-header">
75
+ <button class="tab-panel-action" id="new-project-btn" title="New project">
76
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
77
+ <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
78
+ </svg>
79
+ New Project
80
+ </button>
81
+ </div>
82
+ <div class="project-list" role="list" aria-label="Projects"></div>
83
+ </div>
84
+
85
+ <div class="sidebar-tab-content" data-panel="artifacts">
86
+ <div class="artifact-list" role="list" aria-label="Artifacts"></div>
87
+ </div>
88
+
89
+ <div class="sidebar-tab-content" data-panel="code">
90
+ <div class="code-list" role="list" aria-label="Code snippets"></div>
91
+ </div>
92
+
93
+ <!-- Profile Bar (bottom of panel) -->
94
+ <div class="sidebar-profile" id="sidebar-profile">
95
+ <div class="sidebar-profile-avatar" id="profile-avatar">
96
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
97
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
98
+ <circle cx="12" cy="7" r="4"/>
99
+ </svg>
100
+ </div>
101
+ <span class="sidebar-profile-name">Profile</span>
102
+ <svg class="sidebar-profile-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
103
+ <polyline points="6 9 12 15 18 9"/>
104
+ </svg>
105
+ </div>
106
+
107
+ <!-- Profile Popover -->
108
+ <div class="profile-popover" id="profile-popover">
109
+ <div class="popover-item" id="popover-language">
110
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
111
+ <circle cx="12" cy="12" r="10"/>
112
+ <line x1="2" y1="12" x2="22" y2="12"/>
113
+ <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
114
+ </svg>
115
+ <span>Language</span>
116
+ <select class="popover-select" id="language-select">
117
+ <option value="en-US">English</option>
118
+ <option value="es-ES">Spanish</option>
119
+ <option value="fr-FR">French</option>
120
+ <option value="de-DE">German</option>
121
+ <option value="pt-BR">Portuguese</option>
122
+ <option value="ja-JP">Japanese</option>
123
+ <option value="zh-CN">Chinese</option>
124
+ <option value="ko-KR">Korean</option>
125
+ <option value="ar-SA">Arabic</option>
126
+ </select>
127
+ </div>
128
+ <div class="popover-item" id="popover-settings">
129
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
130
+ <circle cx="12" cy="12" r="3"/>
131
+ <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
132
+ </svg>
133
+ <span>Environment Setup</span>
134
+ </div>
135
+ <div class="popover-item" id="popover-help">
136
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
137
+ <circle cx="12" cy="12" r="10"/>
138
+ <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
139
+ <line x1="12" y1="17" x2="12.01" y2="17"/>
140
+ </svg>
141
+ <span>Get Help</span>
142
+ </div>
143
+ <div class="popover-divider"></div>
144
+ <div class="popover-item popover-about" id="popover-about">
145
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
146
+ <circle cx="12" cy="12" r="10"/>
147
+ <line x1="12" y1="16" x2="12" y2="12"/>
148
+ <line x1="12" y1="8" x2="12.01" y2="8"/>
149
+ </svg>
150
+ <span>About</span>
151
+ <span class="popover-version">Clodds v1.1</span>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Settings Panel (slides over panel) -->
156
+ <div class="settings-panel" id="settings-panel">
157
+ <div class="settings-header">
158
+ <button class="settings-back" id="settings-back" title="Back">
159
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
160
+ <polyline points="15 18 9 12 15 6"/>
161
+ </svg>
162
+ </button>
163
+ <span class="settings-title">Environment Setup</span>
164
+ </div>
165
+ <div class="settings-restart-banner" id="settings-restart-banner">
166
+ Restart required for some changes to take effect.
167
+ </div>
168
+ <div class="settings-body" id="settings-body">
169
+ <div class="settings-loading">Loading...</div>
170
+ </div>
171
+ <div class="settings-footer">
172
+ <button class="settings-save-btn" id="settings-save" disabled>Save Changes</button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </aside>
177
+
178
+ <div class="sidebar-backdrop"></div>
179
+
180
+ <!-- Main -->
181
+ <main class="main welcome-mode" aria-label="Chat">
182
+ <header class="chat-header">
183
+ <button class="sidebar-icon-btn" id="sidebar-toggle-mobile" title="Toggle sidebar">
184
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
185
+ <line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>
186
+ </svg>
187
+ </button>
188
+ <h1 class="chat-header-title" id="header-title">New chat</h1>
189
+ <div class="header-right">
190
+ <span class="header-status" id="header-status">
191
+ <span class="status-dot" id="status-dot"></span>
192
+ </span>
193
+ </div>
194
+ </header>
195
+
196
+ <!-- Reconnect banner -->
197
+ <div class="reconnect-banner" id="reconnect-banner">
198
+ <div class="reconnect-spinner"></div>
199
+ Reconnecting...
200
+ </div>
201
+
202
+ <!-- Chat messages -->
203
+ <div id="messages" role="log" aria-live="polite" aria-label="Chat messages">
204
+ <!-- Welcome (preserved by Chat.clear(), hidden when messages exist) -->
205
+ <div class="welcome" id="welcome">
206
+ <img class="welcome-logo" src="https://cloddsbot.com/logo.png" alt="Clodds" />
207
+ <h2 class="welcome-greeting" id="welcome-greeting"></h2>
208
+ <p class="welcome-sub">How can I help you today?</p>
209
+ <div class="welcome-pulse" id="welcome-pulse"></div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Scroll to bottom -->
214
+ <button class="scroll-bottom" id="scroll-bottom" title="Scroll to bottom" aria-label="Scroll to bottom">
215
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
216
+ <polyline points="6 9 12 15 18 9"/>
217
+ </svg>
218
+ </button>
219
+
220
+ <!-- Typing indicator -->
221
+ <div class="typing" id="typing">
222
+ <div class="typing-indicator">
223
+ <div class="typing-spinner"></div>
224
+ <span class="typing-label">Thinking</span>
225
+ <span class="typing-elapsed" id="typing-elapsed"></span>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Input -->
230
+ <div class="input-area">
231
+ <div class="file-preview" id="file-preview" style="display:none">
232
+ <span class="file-preview-icon"></span>
233
+ <span class="file-preview-name"></span>
234
+ <button class="file-preview-remove" title="Remove">&times;</button>
235
+ </div>
236
+ <div class="input-wrap">
237
+ <button class="attach-btn" id="attach-btn" title="Attach file" aria-label="Attach file">
238
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
239
+ <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
240
+ </svg>
241
+ </button>
242
+ <input type="file" id="file-input" style="display:none" accept="image/*,.pdf,.json,.csv,.txt,.md,.js,.ts,.py,.rs,.go,.java,.c,.cpp,.h">
243
+ <textarea id="input" placeholder="Message Clodds..." rows="1" aria-label="Message input"></textarea>
244
+ <button class="mic-btn" id="mic-btn" title="Voice input" aria-label="Voice input">
245
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
246
+ <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
247
+ <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
248
+ <line x1="12" y1="19" x2="12" y2="23"/>
249
+ <line x1="8" y1="23" x2="16" y2="23"/>
250
+ </svg>
251
+ </button>
252
+ <button id="send-btn" title="Send" aria-label="Send message">
253
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
254
+ <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
255
+ </svg>
256
+ </button>
257
+ </div>
258
+ <div class="input-hint">
259
+ <kbd>Enter</kbd>&nbsp;to send &middot; <kbd>Shift+Enter</kbd>&nbsp;for new line &middot; <kbd>/</kbd>&nbsp;for commands
260
+ </div>
261
+ <div class="welcome-cards" id="welcome-cards">
262
+ <button class="welcome-card" data-msg="Show me trending prediction markets">
263
+ <svg class="welcome-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
264
+ <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
265
+ </svg>
266
+ <div class="welcome-card-text">
267
+ <span class="welcome-card-title">Markets</span>
268
+ <span class="welcome-card-sub">Browse trending markets</span>
269
+ </div>
270
+ </button>
271
+ <button class="welcome-card" data-msg="Show my portfolio and open positions">
272
+ <svg class="welcome-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
273
+ <rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v3"/>
274
+ </svg>
275
+ <div class="welcome-card-text">
276
+ <span class="welcome-card-title">Portfolio</span>
277
+ <span class="welcome-card-sub">View positions & P&L</span>
278
+ </div>
279
+ </button>
280
+ <button class="welcome-card" data-msg="What DeFi opportunities are available right now?">
281
+ <svg class="welcome-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
282
+ <polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>
283
+ </svg>
284
+ <div class="welcome-card-text">
285
+ <span class="welcome-card-title">DeFi</span>
286
+ <span class="welcome-card-sub">Explore DeFi opportunities</span>
287
+ </div>
288
+ </button>
289
+ <button class="welcome-card" data-msg="Help me get started with Clodds">
290
+ <svg class="welcome-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
291
+ <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
292
+ </svg>
293
+ <div class="welcome-card-text">
294
+ <span class="welcome-card-title">Quick Start</span>
295
+ <span class="welcome-card-sub">Set up trading in minutes</span>
296
+ </div>
297
+ </button>
298
+ </div>
299
+ </div>
300
+ </main>
301
+ </div>
302
+
303
+ <!-- Command Palette -->
304
+ <div class="cmd-palette" id="cmd-palette">
305
+ <div class="cmd-list" id="cmd-list"></div>
306
+ </div>
307
+
308
+ <script type="module" src="js/app.js?v=9"></script>
309
+ </body>
310
+ </html>