@cotal-ai/cli 0.1.2 → 0.1.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,298 @@
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" />
6
+ <title>Cotal · observability</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=Work+Sans:wght@400;500;600;700&display=swap"
11
+ rel="stylesheet"
12
+ />
13
+ <style>
14
+ :root {
15
+ --bg: #0d1117; --panel: #161b22; --tile: #1c2230; --line: #21262d;
16
+ --fg: #e6edf3; --dim: #8b949e; --faint: #6e7681;
17
+ --blue: #58a6ff; --green: #3fb950; --amber: #d29922; --orange: #db6d28; --red: #f85149;
18
+ --tint-green: #1f2d24; --tint-amber: #2a2417; --peer-amber: #221e12; --tag-amber: #3a2e12;
19
+ --sel: #15233a; --intent: #10203a; --intent-badge: #16345c; --rollup: #12161d;
20
+ --font: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
21
+ }
22
+ * { box-sizing: border-box; }
23
+ html, body { height: 100%; }
24
+ body {
25
+ margin: 0; display: grid; grid-template-rows: 76px 1fr;
26
+ font-family: var(--font); font-size: 13px; line-height: 1.45;
27
+ background: var(--bg); color: var(--fg);
28
+ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
29
+ }
30
+
31
+ /* ── Header ── */
32
+ header {
33
+ display: flex; align-items: center; gap: 20px; padding: 0 24px;
34
+ background: var(--panel); border-bottom: 1px solid var(--line);
35
+ }
36
+ .brand { display: flex; align-items: center; gap: 10px; }
37
+ .brand .mark { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
38
+ .brand .title { font-size: 18px; font-weight: 700; color: var(--fg); }
39
+ .brand .space { font-size: 14px; color: var(--dim); }
40
+ .pill {
41
+ display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
42
+ border-radius: 20px; background: var(--tint-green);
43
+ }
44
+ .pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
45
+ .pill .t { font-size: 11px; font-weight: 600; color: var(--green); }
46
+ .pill.down { background: #2a1717; }
47
+ .pill.down .d { background: var(--red); } .pill.down .t { color: var(--red); }
48
+
49
+ /* HealthBand tiles */
50
+ .tiles { margin-left: auto; display: flex; gap: 10px; }
51
+ .tile {
52
+ display: flex; align-items: center; gap: 9px; padding: 8px 12px;
53
+ border-radius: 8px; background: var(--tile); border: 1px solid var(--line);
54
+ }
55
+ .tile .bar { width: 3px; height: 24px; border-radius: 2px; background: var(--faint); }
56
+ .tile .c { display: flex; flex-direction: column; gap: 1px; }
57
+ .tile .n { font-size: 17px; font-weight: 700; color: var(--fg); line-height: 1.1; }
58
+ .tile .lbl { font-size: 10.5px; color: var(--dim); letter-spacing: .3px; line-height: 1.1; }
59
+ .tile.working .bar { background: var(--green); }
60
+ .tile.waiting { background: var(--tint-amber); border-color: var(--amber); }
61
+ .tile.waiting .bar { background: var(--amber); } .tile.waiting .n { color: var(--amber); }
62
+ .tile.oldest .bar { background: var(--orange); }
63
+
64
+ /* ── Body grid ── */
65
+ main { display: grid; grid-template-columns: 300px 1fr 340px; min-height: 0; }
66
+ aside {
67
+ background: var(--panel); border-right: 1px solid var(--line);
68
+ overflow-y: auto; min-height: 0;
69
+ }
70
+ aside.rail { border-right: 0; border-left: 1px solid var(--line); }
71
+
72
+ .ghead {
73
+ display: flex; align-items: center; gap: 6px; padding: 12px 16px;
74
+ font-size: 11px; font-weight: 600; letter-spacing: .8px; color: var(--dim);
75
+ }
76
+ .ghead .c { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--faint); }
77
+ .divider { height: 1px; background: var(--line); }
78
+
79
+ /* ── Roster ── */
80
+ .peer {
81
+ display: flex; gap: 9px; padding: 8px 16px; align-items: flex-start;
82
+ }
83
+ .peer.waiting { background: var(--peer-amber); border-left: 2px solid var(--amber); padding-left: 14px; }
84
+ .peer .dot { width: 7px; font-size: 11px; line-height: 19px; flex: none; text-align: center; }
85
+ .dot.working { color: var(--green); } .dot.waiting { color: var(--amber); }
86
+ .dot.idle, .dot.offline { color: var(--faint); }
87
+ .peer .c { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
88
+ .peer .l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
89
+ .peer .name { font-size: 13.5px; font-weight: 600; color: var(--fg); white-space: nowrap; }
90
+ .peer .role { font-size: 11px; color: var(--faint); white-space: nowrap;
91
+ overflow: hidden; text-overflow: ellipsis; }
92
+ .peer .act { font-size: 11.5px; color: var(--dim); white-space: nowrap;
93
+ overflow: hidden; text-overflow: ellipsis; }
94
+ .peer.waiting .act { color: var(--amber); }
95
+ .tag {
96
+ font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
97
+ white-space: nowrap; background: var(--tag-amber); color: var(--amber);
98
+ }
99
+
100
+ /* ── Channels ── */
101
+ .chan {
102
+ display: flex; align-items: center; gap: 8px; padding: 6px 16px;
103
+ cursor: pointer;
104
+ }
105
+ .chan:hover { background: #ffffff06; }
106
+ .chan.sel { background: var(--sel); border-left: 2px solid var(--blue); padding-left: 14px; }
107
+ .chan .l { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
108
+ .chan .hash { font-size: 12px; color: var(--dim); flex: none; }
109
+ .chan .glyph { font-size: 12px; color: var(--blue); flex: none; }
110
+ .chan .name { font-size: 13px; color: var(--blue); overflow: hidden;
111
+ text-overflow: ellipsis; white-space: nowrap; }
112
+ .chan.sel .name { font-weight: 600; color: var(--fg); }
113
+ .chan.muted .hash, .chan.muted .name { color: var(--faint); }
114
+ .chan .count { font-size: 11px; color: var(--faint); flex: none; }
115
+ .chan.sel .count { color: var(--dim); }
116
+ .mention {
117
+ font-size: 10px; font-weight: 700; color: var(--bg); background: var(--blue);
118
+ padding: 1px 6px; border-radius: 9px; flex: none;
119
+ }
120
+
121
+ /* ── Feed ── */
122
+ section { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
123
+ .feed-head {
124
+ display: flex; align-items: center; gap: 10px; padding: 14px 20px;
125
+ border-bottom: 1px solid var(--line); flex: none;
126
+ }
127
+ .feed-head .h { font-size: 15px; font-weight: 700; color: var(--fg); }
128
+ .feed-head .sub { font-size: 12px; color: var(--dim); }
129
+ .feed-head .ctrls { margin-left: auto; display: flex; gap: 8px; align-items: center; }
130
+ .chip {
131
+ font-size: 11px; padding: 4px 10px; border-radius: 14px; cursor: pointer;
132
+ color: var(--faint); user-select: none; border: 1px solid transparent; white-space: nowrap;
133
+ }
134
+ .chip.mode.on { background: var(--tile); border-color: var(--line); color: var(--fg); }
135
+ .chip.pause.on { color: var(--amber); }
136
+ .chip.static { cursor: default; }
137
+
138
+ .feed { overflow-y: auto; min-height: 0; flex: 1; display: flex; flex-direction: column;
139
+ gap: 2px; padding: 8px; }
140
+ .sys { text-align: center; padding: 5px 12px; font-size: 11px; color: var(--faint); }
141
+ .msg { display: flex; gap: 10px; padding: 7px 12px; align-items: flex-start; }
142
+ .msg .ts { font-size: 11px; color: var(--faint); flex: none; width: 40px; line-height: 19px; }
143
+ .msg .badge {
144
+ font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
145
+ background: var(--line); flex: none; line-height: 1.4;
146
+ }
147
+ .badge.chat { color: var(--blue); } .badge.unicast { color: var(--amber); }
148
+ .badge.anycast { color: var(--green); } .badge.intent { color: var(--blue); background: var(--intent-badge); }
149
+ .msg .c { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
150
+ .msg .l1 { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
151
+ .msg .who { font-size: 13px; font-weight: 600; color: var(--fg); }
152
+ .msg .role { font-size: 10.5px; color: var(--faint); }
153
+ .msg .tgt { font-size: 11px; color: var(--dim); }
154
+ .msg .body { font-size: 12.5px; color: var(--fg); word-break: break-word; }
155
+ .msg.intent { background: var(--intent); border-left: 2px solid var(--blue); padding-left: 10px; }
156
+ .msg.intent .tgt { color: var(--blue); }
157
+ .subpill {
158
+ font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
159
+ background: var(--tint-amber); color: var(--amber); flex: none;
160
+ }
161
+ .rollup {
162
+ display: flex; align-items: center; gap: 8px; margin: 0 4px; padding: 6px 12px;
163
+ border-radius: 6px; background: var(--rollup);
164
+ }
165
+ .rollup .ar { font-size: 13px; color: var(--faint); }
166
+ .rollup .t { font-size: 11.5px; color: var(--dim); }
167
+
168
+ /* ── NEEDS YOU rail ── */
169
+ aside.rail { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
170
+ .rail-head { display: flex; align-items: center; justify-content: space-between; }
171
+ .rail-head .t { font-size: 12px; font-weight: 700; color: var(--fg); letter-spacing: .8px; }
172
+ .rail-head .n {
173
+ font-size: 11px; font-weight: 700; color: var(--bg); background: var(--red);
174
+ padding: 2px 8px; border-radius: 12px;
175
+ }
176
+ .card {
177
+ border-radius: 10px; background: var(--tile); border: 1px solid var(--ac, var(--line));
178
+ padding: 14px; display: flex; flex-direction: column; gap: 9px;
179
+ }
180
+ .card.nav { cursor: pointer; transition: border-color .12s, background .12s; }
181
+ .card.nav:hover { border-color: var(--ac); }
182
+ .card.nav.sel { border-color: var(--ac); background: var(--tint-amber, var(--tile)); }
183
+ .card .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
184
+ .card .cat-l { display: flex; align-items: center; gap: 7px; }
185
+ .card .cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
186
+ .card .cat { font-size: 10.5px; font-weight: 700; color: var(--ac); letter-spacing: .4px; }
187
+ .card .age { font-size: 10px; color: var(--dim); background: var(--line);
188
+ padding: 1px 6px; border-radius: 4px; }
189
+ .card .title { font-size: 13.5px; font-weight: 600; color: var(--fg); }
190
+ .card .crole { font-size: 11px; font-weight: 500; color: var(--faint); margin-left: 7px; }
191
+ .card .desc { font-size: 12px; color: var(--dim); }
192
+ /* Live waiting cards: one-line preview (gist at a glance); full text lives in the click-through detail. */
193
+ .card.nav .desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
194
+ .card .btns { display: flex; gap: 8px; }
195
+ .btn {
196
+ font-size: 11.5px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
197
+ border: 1px solid transparent; white-space: nowrap;
198
+ }
199
+ .btn.primary { background: var(--ac); color: var(--bg); font-weight: 700; }
200
+ .btn.secondary { border-color: var(--line); color: var(--fg); font-weight: 500; }
201
+ .tone-amber { --ac: var(--amber); } .tone-red { --ac: var(--red); }
202
+ .tone-orange { --ac: var(--orange); } .tone-blue { --ac: var(--blue); }
203
+ .rail-foot { font-size: 10.5px; color: var(--faint); }
204
+
205
+ /* ── Channel view (center) ── */
206
+ .ch-head {
207
+ display: flex; flex-direction: column; gap: 5px; padding: 14px 20px;
208
+ background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
209
+ }
210
+ .ch-head .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
211
+ .ch-head .title { display: flex; align-items: center; gap: 8px; min-width: 0; }
212
+ .ch-head .h { font-size: 17px; font-weight: 700; color: var(--fg); }
213
+ .ch-head .sub { font-size: 11px; color: var(--faint); white-space: nowrap; }
214
+ .ch-head .purpose { font-size: 12px; color: var(--dim); }
215
+ .clist { overflow-y: auto; min-height: 0; flex: 1; display: flex; flex-direction: column;
216
+ gap: 2px; padding: 10px; }
217
+ .cmsg { display: flex; gap: 10px; padding: 7px 12px; align-items: flex-start; }
218
+ .cmsg .ts { font-size: 11px; color: var(--faint); flex: none; width: 40px; line-height: 19px; }
219
+ .cmsg .dot { font-size: 11px; flex: none; width: 14px; text-align: center; line-height: 19px; }
220
+ .cmsg .c { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
221
+ .cmsg .l1 { display: flex; align-items: center; gap: 6px; }
222
+ .cmsg .who { font-size: 13px; font-weight: 600; color: var(--fg); }
223
+ .cmsg .role { font-size: 10.5px; color: var(--faint); }
224
+ .cmsg .body { font-size: 12.5px; color: var(--fg); word-break: break-word; }
225
+ .thread {
226
+ align-self: flex-start; margin-top: 2px; font-size: 10.5px; color: var(--blue);
227
+ background: var(--line); padding: 3px 8px; border-radius: 6px;
228
+ }
229
+ .unread-mark { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
230
+ .unread-mark .line { flex: 1; height: 1px; background: var(--red); }
231
+ .unread-mark .t { font-size: 10.5px; font-weight: 600; color: var(--red); white-space: nowrap; }
232
+
233
+ .ch-head .ctrls { display: flex; align-items: center; gap: 8px; }
234
+ .cmsg .dir { font-size: 11px; color: var(--dim); }
235
+ .dtag { font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
236
+ background: var(--line); color: var(--amber); }
237
+
238
+ /* ── Direct messages (sidebar lens) ── */
239
+ .dm { display: flex; align-items: center; gap: 6px; padding: 7px 16px; cursor: pointer; }
240
+ .dm:hover { background: #ffffff06; }
241
+ .dm.sel { background: var(--sel); }
242
+ .dm .caret, .dm .ln { width: 10px; flex: none; text-align: center; font-size: 9px; color: var(--faint); }
243
+ .dm .l { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
244
+ .dm .dot { width: 12px; flex: none; text-align: center; font-size: 11px; }
245
+ .dm .nm { font-size: 13.5px; font-weight: 600; color: var(--fg); white-space: nowrap; }
246
+ .dm .role { font-size: 11px; color: var(--faint); white-space: nowrap;
247
+ overflow: hidden; text-overflow: ellipsis; }
248
+ .dm .threads { font-size: 11px; color: var(--faint); flex: none; }
249
+ .dm.sub { padding-left: 34px; }
250
+ .dm.sub .nm { font-size: 12.5px; font-weight: 400; }
251
+ .dm.sub .dot { width: 10px; font-size: 10px; }
252
+
253
+ .empty { color: var(--faint); padding: 22px 16px; font-size: 12px; }
254
+
255
+ /* ── Agent Detail (centre drill-down) ── */
256
+ .detail { padding: 22px 24px; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; }
257
+ .detail .d-head { display: flex; align-items: center; gap: 9px; }
258
+ .detail .d-head .dot { font-size: 13px; }
259
+ .detail .d-status { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--dim); }
260
+ .detail.amber .d-status { color: var(--amber); }
261
+ .detail .d-age { margin-left: auto; font-size: 11px; color: var(--faint); }
262
+ .detail .d-who { font-size: 20px; font-weight: 700; color: var(--fg); display: flex; align-items: baseline; }
263
+ .detail .d-who .crole { font-size: 12px; font-weight: 500; color: var(--faint); margin-left: 8px; }
264
+ .detail .d-id { font-size: 11px; color: var(--faint); font-family: ui-monospace, monospace; margin-top: -7px; }
265
+ .detail .d-label { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; color: var(--faint); text-transform: uppercase; }
266
+ .detail .d-block { font-size: 13px; color: var(--fg); line-height: 1.5; padding: 12px 14px; border-radius: 8px;
267
+ background: var(--tile); border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; }
268
+ .detail.amber .d-block { border-color: var(--amber); background: var(--tint-amber); }
269
+ .detail .d-block.muted { color: var(--dim); }
270
+ </style>
271
+ </head>
272
+ <body>
273
+ <header>
274
+ <span class="brand">
275
+ <span class="mark"></span>
276
+ <span class="title">Cotal</span>
277
+ <span class="space" id="space"></span>
278
+ <span class="pill down" id="conn"><span class="d"></span><span class="t">connecting</span></span>
279
+ </span>
280
+ <div class="tiles" id="tiles"></div>
281
+ </header>
282
+ <main id="main">
283
+ <aside>
284
+ <div class="ghead">ONLINE <span class="c" id="online-c"></span></div>
285
+ <div id="roster"></div>
286
+ <div class="divider"></div>
287
+ <div class="ghead">CHANNELS</div>
288
+ <div id="channels"></div>
289
+ <div class="divider"></div>
290
+ <div class="ghead">DIRECT MESSAGES</div>
291
+ <div id="dms"></div>
292
+ </aside>
293
+ <section id="center"></section>
294
+ <aside class="rail" id="rail"></aside>
295
+ </main>
296
+ <script src="/app.js"></script>
297
+ </body>
298
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cotal-ai/cli",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -27,6 +27,6 @@
27
27
  },
28
28
  "scripts": {
29
29
  "typecheck": "tsc -p tsconfig.json --noEmit",
30
- "build": "tsc -p tsconfig.json"
30
+ "build": "tsc -p tsconfig.json && rm -rf dist/web && cp -R src/web dist/web"
31
31
  }
32
32
  }