hovclaw 0.1.0 → 0.1.2

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.
@@ -1,209 +1,182 @@
1
1
  <!doctype html>
2
- <html lang="en" class="h-full">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>HOVClaw</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com" />
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
- <link
10
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
11
- rel="stylesheet"
12
- />
13
- <script src="https://cdn.tailwindcss.com"></script>
14
- <script>
15
- tailwind.config = {
16
- darkMode: "class",
17
- theme: {
18
- extend: {
19
- fontFamily: {
20
- sans: ['"IBM Plex Sans"', "ui-sans-serif", "system-ui", "sans-serif"],
21
- mono: ['"IBM Plex Mono"', "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
22
- },
23
- colors: {
24
- surface: "#141518",
25
- elevated: "#1a1c20",
26
- input: "#111215",
27
- border: "#2a2d33",
28
- "border-subtle": "#1f2128",
29
- },
30
- },
31
- },
32
- };
33
- </script>
34
- <link rel="stylesheet" href="/styles.css" />
35
- </head>
36
- <body class="h-full overflow-hidden bg-[#0c0d0f] text-gray-200 font-sans flex flex-col dark">
37
-
38
- <!-- Top bar -->
39
- <header class="flex items-center justify-between px-5 h-12 bg-surface border-b border-border shrink-0">
40
- <div class="flex items-center gap-2.5">
41
- <span class="font-mono font-semibold text-sm tracking-tight">HOVClaw</span>
42
- <span class="font-mono text-xs font-medium text-gray-500 bg-elevated border border-border rounded px-1.5 py-px">Gateway</span>
43
- </div>
44
- <div class="flex items-center gap-2">
45
- <span id="connection-indicator" class="indicator indicator--off"></span>
46
- <span id="connection-label" class="font-mono text-xs text-gray-400">Disconnected</span>
47
- </div>
48
- </header>
49
-
50
- <!-- Connection drawer -->
51
- <div id="connection-drawer" class="bg-surface border-b border-border overflow-hidden drawer--open">
52
- <button id="drawer-toggle" class="flex items-center gap-2 w-full px-5 py-2 text-gray-400 font-mono text-xs font-medium uppercase tracking-widest hover:text-gray-200 transition-colors" type="button" aria-label="Toggle connection panel">
53
- <span class="drawer-chevron"></span>
54
- <span>Connection</span>
55
- </button>
56
- <form id="connection-form" class="drawer-body px-5 pb-4">
57
- <div class="grid grid-cols-1 sm:grid-cols-[2fr_1fr_1fr] gap-3 mb-3">
58
- <label class="flex flex-col gap-1">
59
- <span class="font-mono text-[0.68rem] font-medium text-gray-500 uppercase tracking-widest">Gateway URL</span>
60
- <input
61
- id="gateway-url"
62
- type="text"
63
- placeholder="ws://127.0.0.1:18789"
64
- spellcheck="false"
65
- class="font-mono text-sm bg-input text-gray-200 border border-border rounded px-2.5 py-1.5 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400/20 transition placeholder:text-gray-600"
66
- />
67
- </label>
68
- <label class="flex flex-col gap-1">
69
- <span class="font-mono text-[0.68rem] font-medium text-gray-500 uppercase tracking-widest">Token</span>
70
- <input
71
- id="gateway-token"
72
- type="password"
73
- autocomplete="off"
74
- placeholder="optional"
75
- class="font-mono text-sm bg-input text-gray-200 border border-border rounded px-2.5 py-1.5 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400/20 transition placeholder:text-gray-600"
76
- />
77
- </label>
78
- <label class="flex flex-col gap-1">
79
- <span class="font-mono text-[0.68rem] font-medium text-gray-500 uppercase tracking-widest">Password</span>
80
- <input
81
- id="gateway-password"
82
- type="password"
83
- autocomplete="off"
84
- placeholder="session only"
85
- class="font-mono text-sm bg-input text-gray-200 border border-border rounded px-2.5 py-1.5 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400/20 transition placeholder:text-gray-600"
86
- />
87
- </label>
88
- </div>
89
- <div class="flex gap-2">
90
- <button id="connect-btn" class="font-mono text-xs font-medium bg-blue-500 text-gray-950 rounded px-4 py-1.5 hover:bg-blue-400 transition" type="submit">Connect</button>
91
- <button id="disconnect-btn" class="font-mono text-xs font-medium text-gray-400 border border-border rounded px-4 py-1.5 hover:bg-elevated hover:text-gray-200 transition" type="button">Disconnect</button>
92
- </div>
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>HOVClaw</title>
7
+ <link rel="stylesheet" href="/styles.css" />
8
+ </head>
9
+ <body class="app-shell">
10
+ <header class="topbar">
11
+ <div class="topbar-brand">
12
+ <span class="brand-name">HOVClaw</span>
13
+ <span class="brand-badge">Gateway</span>
14
+ </div>
15
+ <div class="topbar-connection">
16
+ <span id="connection-indicator" class="indicator indicator--off"></span>
17
+ <span id="connection-label" class="connection-label">Disconnected</span>
18
+ </div>
19
+ </header>
20
+
21
+ <div id="connection-drawer" class="connection-drawer drawer--open">
22
+ <button
23
+ id="drawer-toggle"
24
+ class="drawer-toggle"
25
+ type="button"
26
+ aria-label="Toggle connection panel"
27
+ >
28
+ <span class="drawer-chevron"></span>
29
+ <span>Connection</span>
30
+ </button>
31
+
32
+ <form id="connection-form" class="drawer-body connection-form">
33
+ <div class="connection-grid">
34
+ <label class="field">
35
+ <span class="field-label">Gateway URL</span>
36
+ <input
37
+ id="gateway-url"
38
+ type="text"
39
+ placeholder="ws://127.0.0.1:18789"
40
+ spellcheck="false"
41
+ />
42
+ </label>
43
+
44
+ <label class="field">
45
+ <span class="field-label">Token</span>
46
+ <input
47
+ id="gateway-token"
48
+ type="password"
49
+ autocomplete="off"
50
+ placeholder="enter each session"
51
+ />
52
+ </label>
53
+
54
+ <label class="field">
55
+ <span class="field-label">Password</span>
56
+ <input
57
+ id="gateway-password"
58
+ type="password"
59
+ autocomplete="off"
60
+ placeholder="session only"
61
+ />
62
+ </label>
63
+ </div>
64
+
65
+ <div class="button-row">
66
+ <button id="connect-btn" class="btn btn--primary" type="submit">Connect</button>
67
+ <button id="disconnect-btn" class="btn" type="button">Disconnect</button>
68
+ </div>
69
+ </form>
70
+ </div>
71
+
72
+ <main class="main-layout">
73
+ <aside class="sidebar">
74
+ <section class="panel" id="panel-health">
75
+ <button class="panel-header" type="button" aria-expanded="true">
76
+ <span class="panel-title">Health</span>
77
+ <span class="panel-chevron"></span>
78
+ </button>
79
+ <div class="panel-body">
80
+ <pre id="health-output" class="output">--</pre>
81
+ </div>
82
+ </section>
83
+
84
+ <section class="panel" id="panel-status">
85
+ <button class="panel-header" type="button" aria-expanded="true">
86
+ <span class="panel-title">Status</span>
87
+ <span class="panel-chevron"></span>
88
+ </button>
89
+ <div class="panel-body">
90
+ <pre id="status-output" class="output">--</pre>
91
+ </div>
92
+ </section>
93
+
94
+ <section class="panel" id="panel-channels">
95
+ <button class="panel-header" type="button" aria-expanded="true">
96
+ <span class="panel-title">Channels</span>
97
+ <span class="panel-chevron"></span>
98
+ </button>
99
+ <div class="panel-body">
100
+ <pre id="channels-output" class="output">--</pre>
101
+ </div>
102
+ </section>
103
+
104
+ <section class="panel" id="panel-send">
105
+ <button class="panel-header" type="button" aria-expanded="false">
106
+ <span class="panel-title">Direct Send</span>
107
+ <span class="panel-chevron"></span>
108
+ </button>
109
+ <div class="panel-body" hidden>
110
+ <form id="send-form" class="send-form">
111
+ <label class="field">
112
+ <span class="field-label">Channel</span>
113
+ <select id="send-channel">
114
+ <option value="telegram">telegram</option>
115
+ <option value="discord">discord</option>
116
+ </select>
117
+ </label>
118
+
119
+ <label class="field">
120
+ <span class="field-label">Chat ID</span>
121
+ <input id="send-chat-id" type="text" placeholder="id" spellcheck="false" />
122
+ </label>
123
+
124
+ <label class="field">
125
+ <span class="field-label">Text</span>
126
+ <input id="send-text" type="text" placeholder="message" />
127
+ </label>
128
+
129
+ <button class="btn btn--primary" type="submit">Send</button>
93
130
  </form>
131
+ </div>
132
+ </section>
133
+
134
+ <section class="panel" id="panel-logs">
135
+ <button class="panel-header" type="button" aria-expanded="true">
136
+ <span class="panel-title">Logs</span>
137
+ <span id="log-count" class="count-badge">0</span>
138
+ <span class="panel-chevron"></span>
139
+ </button>
140
+ <div class="panel-body">
141
+ <pre id="log-output" class="output output--logs"></pre>
142
+ </div>
143
+ </section>
144
+ </aside>
145
+
146
+ <section class="chat-pane">
147
+ <div class="chat-toolbar">
148
+ <label class="field field--inline">
149
+ <span class="field-label">Session</span>
150
+ <select id="session-select" class="select-chevron"></select>
151
+ </label>
152
+
153
+ <button id="load-history-btn" class="btn" type="button">Load History</button>
154
+ <button id="refresh-btn" class="btn" type="button">Refresh</button>
155
+ </div>
156
+
157
+ <div id="chat-output" class="chat-output">
158
+ <p class="chat-empty">Select a session and load history, or start typing.</p>
94
159
  </div>
95
160
 
96
- <!-- Main layout -->
97
- <main class="grid grid-cols-1 md:grid-cols-[380px_1fr] grid-rows-[1fr] flex-1 min-h-0 overflow-hidden">
98
-
99
- <!-- Sidebar -->
100
- <aside class="flex flex-col border-r border-border overflow-y-auto bg-surface scrollbar-thin max-h-[40vh] md:max-h-none">
101
-
102
- <section class="panel border-b border-border-subtle" id="panel-health">
103
- <button class="panel-header flex items-center gap-2 w-full px-4 py-2.5 hover:bg-elevated transition-colors" type="button" aria-expanded="true">
104
- <span class="font-mono text-xs font-semibold uppercase tracking-widest text-gray-400 flex-1 text-left">Health</span>
105
- <span class="panel-chevron"></span>
106
- </button>
107
- <div class="panel-body px-4 pb-3">
108
- <pre id="health-output" class="output">--</pre>
109
- </div>
110
- </section>
111
-
112
- <section class="panel border-b border-border-subtle" id="panel-status">
113
- <button class="panel-header flex items-center gap-2 w-full px-4 py-2.5 hover:bg-elevated transition-colors" type="button" aria-expanded="true">
114
- <span class="font-mono text-xs font-semibold uppercase tracking-widest text-gray-400 flex-1 text-left">Status</span>
115
- <span class="panel-chevron"></span>
116
- </button>
117
- <div class="panel-body px-4 pb-3">
118
- <pre id="status-output" class="output">--</pre>
119
- </div>
120
- </section>
121
-
122
- <section class="panel border-b border-border-subtle" id="panel-channels">
123
- <button class="panel-header flex items-center gap-2 w-full px-4 py-2.5 hover:bg-elevated transition-colors" type="button" aria-expanded="true">
124
- <span class="font-mono text-xs font-semibold uppercase tracking-widest text-gray-400 flex-1 text-left">Channels</span>
125
- <span class="panel-chevron"></span>
126
- </button>
127
- <div class="panel-body px-4 pb-3">
128
- <pre id="channels-output" class="output">--</pre>
129
- </div>
130
- </section>
131
-
132
- <section class="panel border-b border-border-subtle" id="panel-send">
133
- <button class="panel-header flex items-center gap-2 w-full px-4 py-2.5 hover:bg-elevated transition-colors" type="button" aria-expanded="false">
134
- <span class="font-mono text-xs font-semibold uppercase tracking-widest text-gray-400 flex-1 text-left">Direct Send</span>
135
- <span class="panel-chevron"></span>
136
- </button>
137
- <div class="panel-body px-4 pb-3" hidden>
138
- <form id="send-form" class="grid grid-cols-[auto_1fr_2fr_auto] gap-2 items-end">
139
- <label class="flex flex-col gap-0.5">
140
- <span class="font-mono text-[0.68rem] font-medium text-gray-500 uppercase tracking-widest">Channel</span>
141
- <select id="send-channel" class="font-mono text-xs bg-input text-gray-200 border border-border rounded px-2 py-1 outline-none focus:border-blue-400 transition appearance-none">
142
- <option value="telegram">telegram</option>
143
- <option value="discord">discord</option>
144
- </select>
145
- </label>
146
- <label class="flex flex-col gap-0.5">
147
- <span class="font-mono text-[0.68rem] font-medium text-gray-500 uppercase tracking-widest">Chat ID</span>
148
- <input id="send-chat-id" type="text" placeholder="id" spellcheck="false" class="font-mono text-xs bg-input text-gray-200 border border-border rounded px-2 py-1 outline-none focus:border-blue-400 transition placeholder:text-gray-600" />
149
- </label>
150
- <label class="flex flex-col gap-0.5">
151
- <span class="font-mono text-[0.68rem] font-medium text-gray-500 uppercase tracking-widest">Text</span>
152
- <input id="send-text" type="text" placeholder="message" class="font-mono text-xs bg-input text-gray-200 border border-border rounded px-2 py-1 outline-none focus:border-blue-400 transition placeholder:text-gray-600" />
153
- </label>
154
- <button class="font-mono text-xs font-medium bg-blue-500 text-gray-950 rounded px-3 py-1 hover:bg-blue-400 transition" type="submit">Send</button>
155
- </form>
156
- </div>
157
- </section>
158
-
159
- <section class="panel border-b border-border-subtle" id="panel-logs">
160
- <button class="panel-header flex items-center gap-2 w-full px-4 py-2.5 hover:bg-elevated transition-colors" type="button" aria-expanded="true">
161
- <span class="font-mono text-xs font-semibold uppercase tracking-widest text-gray-400 flex-1 text-left">Logs</span>
162
- <span id="log-count" class="font-mono text-[0.68rem] font-medium text-gray-500 bg-elevated border border-border rounded-full px-2 min-w-[20px] text-center leading-relaxed">0</span>
163
- <span class="panel-chevron"></span>
164
- </button>
165
- <div class="panel-body px-4 pb-3">
166
- <pre id="log-output" class="output output--logs"></pre>
167
- </div>
168
- </section>
169
- </aside>
170
-
171
- <!-- Chat pane -->
172
- <section class="flex flex-col min-h-0 h-full bg-[#0c0d0f]">
173
- <div class="flex items-center gap-2 px-4 py-2 border-b border-border bg-surface shrink-0">
174
- <label class="flex items-center gap-2 flex-1 min-w-0">
175
- <span class="font-mono text-[0.68rem] font-medium text-gray-500 uppercase tracking-widest shrink-0">Session</span>
176
- <select id="session-select" class="flex-1 min-w-0 font-mono text-xs bg-input text-gray-200 border border-border rounded px-2 py-1 pr-7 outline-none focus:border-blue-400 transition appearance-none select-chevron"></select>
177
- </label>
178
- <button id="load-history-btn" class="font-mono text-[0.72rem] font-medium text-gray-400 border border-border rounded px-3 py-1 hover:bg-elevated hover:text-gray-200 transition" type="button">Load History</button>
179
- <button id="refresh-btn" class="font-mono text-[0.72rem] font-medium text-gray-400 border border-border rounded px-3 py-1 hover:bg-elevated hover:text-gray-200 transition" type="button">Refresh</button>
180
- </div>
181
-
182
- <div id="chat-output" class="flex-1 overflow-y-auto px-5 py-5 flex flex-col gap-0.5 scrollbar-thin">
183
- <p class="text-gray-500 text-sm text-center m-auto">Select a session and load history, or start typing.</p>
184
- </div>
185
-
186
- <form id="chat-form" class="flex gap-2 px-4 py-3 border-t border-border bg-surface shrink-0">
187
- <input
188
- id="chat-input"
189
- type="text"
190
- placeholder="Send a message..."
191
- autocomplete="off"
192
- spellcheck="false"
193
- class="flex-1 text-sm bg-input text-gray-200 border border-border rounded-lg px-3.5 py-2.5 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400/20 transition placeholder:text-gray-600"
194
- />
195
- <button class="bg-blue-500 text-gray-950 rounded-lg px-3.5 py-2.5 hover:bg-blue-400 transition" type="submit">
196
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
197
- <path d="M2 14L14 8L2 2V6.5L10 8L2 9.5V14Z" fill="currentColor"/>
198
- </svg>
199
- </button>
200
- </form>
201
- </section>
202
- </main>
203
-
204
- <!-- Toast container -->
205
- <div id="toast-container" class="fixed bottom-4 right-4 flex flex-col gap-2 z-50 pointer-events-none"></div>
206
-
207
- <script type="module" src="/app.js"></script>
208
- </body>
161
+ <form id="chat-form" class="chat-form">
162
+ <input
163
+ id="chat-input"
164
+ type="text"
165
+ placeholder="Send a message..."
166
+ autocomplete="off"
167
+ spellcheck="false"
168
+ />
169
+ <button class="btn btn--primary btn--icon" type="submit" aria-label="Send message">
170
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
171
+ <path d="M2 14L14 8L2 2V6.5L10 8L2 9.5V14Z" fill="currentColor" />
172
+ </svg>
173
+ </button>
174
+ </form>
175
+ </section>
176
+ </main>
177
+
178
+ <div id="toast-container" class="toast-container"></div>
179
+
180
+ <script type="module" src="/app.js"></script>
181
+ </body>
209
182
  </html>