@enigmax/dashboard 0.1.13 → 0.1.15
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/assets/index.html +111 -46
- package/package.json +1 -1
package/assets/index.html
CHANGED
|
@@ -6,47 +6,102 @@
|
|
|
6
6
|
<title>Enigma - Dashboard</title>
|
|
7
7
|
<style>
|
|
8
8
|
:root {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
/* Core palette. --accent / --muted / --border are PINNED: the chart hardcodes
|
|
10
|
+
these exact values, so the dashboard and the graph always stay in sync. */
|
|
11
|
+
--bg: #080a10; --surface: #12161f; --surface2: #1a1f2b;
|
|
12
|
+
--border: #232a36; --border-soft: #1b212d;
|
|
13
|
+
--text: #eceef2; --muted: #8a93a3; --accent: #e0a458; --accent2: #d7875f; --good: #6fcf97;
|
|
14
|
+
--accent-weak: rgba(224,164,88,0.13); --good-weak: rgba(111,207,151,0.12);
|
|
15
|
+
/* Type roles: a monospace "machine readout" face carries the brand, headings,
|
|
16
|
+
labels and numeric data (this is a CLI tool's dashboard); sans carries prose. */
|
|
17
|
+
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
|
18
|
+
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
19
|
+
--ring: rgba(224,164,88,0.6);
|
|
20
|
+
--radius: 16px; --radius-sm: 10px;
|
|
21
|
+
/* Lit-surface system: a faint top highlight + two shadow steps give depth. */
|
|
22
|
+
--elev: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 42%);
|
|
23
|
+
--shadow-1: 0 1px 2px rgba(0,0,0,0.4);
|
|
24
|
+
--shadow-2: 0 18px 40px -22px rgba(0,0,0,0.75);
|
|
11
25
|
}
|
|
12
26
|
* { box-sizing: border-box; }
|
|
13
27
|
body {
|
|
14
|
-
margin: 0;
|
|
15
|
-
|
|
16
|
-
|
|
28
|
+
margin: 0 auto; color: var(--text); font-family: var(--sans);
|
|
29
|
+
/* Atmospheric depth: a faint amber glow upper-right (the brand accent) and a
|
|
30
|
+
cooler one lower-left over a near-black base, fixed so the page feels lit. */
|
|
31
|
+
background:
|
|
32
|
+
radial-gradient(1100px 620px at 82% -10%, rgba(224,164,88,0.10), transparent 58%),
|
|
33
|
+
radial-gradient(820px 520px at 2% 2%, rgba(111,207,151,0.045), transparent 52%),
|
|
34
|
+
var(--bg);
|
|
35
|
+
background-attachment: fixed;
|
|
36
|
+
-webkit-font-smoothing: antialiased; padding: 30px 30px 48px; max-width: 1560px;
|
|
17
37
|
}
|
|
18
38
|
a { color: var(--accent2); }
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
39
|
+
/* Quality floor: one visible keyboard-focus ring for every interactive control
|
|
40
|
+
(the custom-styled buttons/tabs/links carry no native outline otherwise). */
|
|
41
|
+
a:focus-visible, button:focus-visible, select:focus-visible,
|
|
42
|
+
input:focus-visible, [tabindex]:focus-visible {
|
|
43
|
+
outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px;
|
|
44
|
+
}
|
|
45
|
+
@media (prefers-reduced-motion: reduce) {
|
|
46
|
+
*, *::before, *::after {
|
|
47
|
+
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
|
|
48
|
+
transition-duration: 0.01ms !important;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
header { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; flex-wrap: wrap; }
|
|
52
|
+
.brand { display: flex; flex-direction: column; gap: 3px; }
|
|
53
|
+
.wordmark {
|
|
54
|
+
font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: 0.5px;
|
|
55
|
+
display: inline-flex; align-items: center; color: var(--text);
|
|
56
|
+
}
|
|
57
|
+
/* Signature: a blinking block caret turns the wordmark into a live terminal prompt. */
|
|
58
|
+
.wordmark span {
|
|
59
|
+
display: inline-block; width: 0.46em; height: 1.05em; margin-left: 5px;
|
|
60
|
+
background: var(--accent); transform: translateY(1px); text-indent: -9999px; overflow: hidden;
|
|
61
|
+
box-shadow: 0 0 12px var(--accent-weak); animation: caret 1.1s steps(1, end) infinite;
|
|
62
|
+
}
|
|
63
|
+
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
|
|
64
|
+
.sub { font-family: var(--mono); color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.6px; }
|
|
65
|
+
/* Tabs as a segmented control: one inset track, the active tab a raised accent pill. */
|
|
66
|
+
.tabs { display: flex; gap: 2px; padding: 4px; background: rgba(0,0,0,0.25); border: 1px solid var(--border-soft); border-radius: 13px; }
|
|
25
67
|
.tabs .tab {
|
|
26
|
-
text-decoration: none; color: var(--muted); font-size:
|
|
27
|
-
padding: 7px
|
|
68
|
+
font-family: var(--mono); text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600;
|
|
69
|
+
padding: 7px 15px; border-radius: 9px; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
|
|
28
70
|
}
|
|
29
|
-
.tabs .tab:hover { color: var(--text);
|
|
30
|
-
.tabs .tab.active { color: var(--accent); background: var(--
|
|
31
|
-
.live { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
|
|
32
|
-
.dot { width:
|
|
71
|
+
.tabs .tab:hover { color: var(--text); }
|
|
72
|
+
.tabs .tab.active { color: var(--accent); background: var(--surface2); border-color: var(--border); box-shadow: var(--shadow-1); }
|
|
73
|
+
.live { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-family: var(--mono); padding: 5px 12px; background: rgba(0,0,0,0.25); border: 1px solid var(--border-soft); border-radius: 999px; }
|
|
74
|
+
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
|
|
33
75
|
.dot.stale { background: var(--muted); box-shadow: none; }
|
|
34
|
-
.grid { display: grid; grid-template-columns: repeat(auto-
|
|
35
|
-
.card {
|
|
36
|
-
|
|
37
|
-
|
|
76
|
+
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(166px, 1fr)); gap: 14px; margin-bottom: 22px; }
|
|
77
|
+
.card {
|
|
78
|
+
position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
|
|
79
|
+
padding: 18px; box-shadow: var(--shadow-1); overflow: hidden;
|
|
80
|
+
transition: border-color .18s, transform .18s, box-shadow .18s;
|
|
81
|
+
}
|
|
82
|
+
/* A faint top-edge highlight so a card reads as a lit surface, not a flat rectangle. */
|
|
83
|
+
.card::before { content: ""; position: absolute; inset: 0; background: var(--elev); pointer-events: none; }
|
|
84
|
+
.card:hover { border-color: #2f3744; transform: translateY(-2px); box-shadow: var(--shadow-1), var(--shadow-2); }
|
|
85
|
+
/* Hero KPI (Money Saved): spans two columns, accent-lit - the loudest thing on the page. */
|
|
86
|
+
.card.hero { grid-column: span 2; border-color: rgba(224,164,88,0.35); background: linear-gradient(135deg, var(--accent-weak), transparent 62%), var(--surface); }
|
|
87
|
+
.card.hero .value { font-size: 42px; }
|
|
88
|
+
.card .label { position: relative; font-family: var(--mono); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; }
|
|
89
|
+
.card .value { position: relative; font-family: var(--mono); font-size: 30px; font-weight: 600; margin-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: -0.6px; }
|
|
38
90
|
.card .value.accent { color: var(--accent); }
|
|
39
91
|
.card .value.good { color: var(--good); }
|
|
40
|
-
.card .foot { color: var(--muted); font-size: 12px; margin-top:
|
|
41
|
-
.panel { background: var(--surface); border: 1px solid var(--border); border-radius:
|
|
42
|
-
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom:
|
|
43
|
-
|
|
44
|
-
.panel h2
|
|
92
|
+
.card .foot { position: relative; color: var(--muted); font-size: 12px; margin-top: 5px; }
|
|
93
|
+
.panel { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-1); }
|
|
94
|
+
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
|
|
95
|
+
/* Section heading: a mono eyebrow led by a short accent rule (structure as signal). */
|
|
96
|
+
.panel h2 { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.9px; margin: 0; color: var(--text); }
|
|
97
|
+
.panel h2::before { content: ""; flex: 0 0 auto; width: 3px; height: 13px; border-radius: 2px; background: var(--accent); }
|
|
98
|
+
.panel h2 small { font-family: var(--sans); color: var(--muted); font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; }
|
|
45
99
|
.ctrls { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
|
46
|
-
.ranges { display: flex; gap:
|
|
100
|
+
.ranges { display: flex; gap: 2px; padding: 3px; background: rgba(0,0,0,0.22); border: 1px solid var(--border-soft); border-radius: 9px; }
|
|
47
101
|
.ranges button {
|
|
48
|
-
background:
|
|
49
|
-
border-radius:
|
|
102
|
+
background: transparent; color: var(--muted); border: 1px solid transparent;
|
|
103
|
+
border-radius: 6px; padding: 4px 11px; font-size: 12px; cursor: pointer; font-family: var(--mono);
|
|
104
|
+
transition: color .15s, background .15s, border-color .15s;
|
|
50
105
|
}
|
|
51
106
|
.ranges button:hover { color: var(--text); }
|
|
52
107
|
.ranges button.active { background: var(--accent); color: #1a1206; border-color: var(--accent); font-weight: 600; }
|
|
@@ -65,31 +120,33 @@
|
|
|
65
120
|
}
|
|
66
121
|
.tip .tip-d { color: var(--muted); }
|
|
67
122
|
.tip .tip-v { color: var(--accent); font-weight: 600; margin-top: 2px; }
|
|
68
|
-
.bar-row { display: flex; align-items: center; gap: 12px; margin:
|
|
123
|
+
.bar-row { display: flex; align-items: center; gap: 12px; margin: 11px 0; font-size: 13px; }
|
|
69
124
|
.bar-row .name { width: 70px; color: var(--muted); }
|
|
70
|
-
.bar-track { flex: 1; height:
|
|
71
|
-
.bar-fill { height: 100%; border-radius:
|
|
72
|
-
.bar-row .num { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
|
|
73
|
-
.bar-row .money { width: 78px; text-align: right; color: var(--good); font-variant-numeric: tabular-nums; }
|
|
125
|
+
.bar-track { flex: 1; height: 12px; background: rgba(0,0,0,0.32); border: 1px solid var(--border-soft); border-radius: 999px; overflow: hidden; }
|
|
126
|
+
.bar-fill { height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.4,0,.2,1); }
|
|
127
|
+
.bar-row .num { width: 90px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
|
|
128
|
+
.bar-row .money { width: 78px; text-align: right; color: var(--good); font-family: var(--mono); font-variant-numeric: tabular-nums; }
|
|
74
129
|
.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 40px 0; }
|
|
75
130
|
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
76
|
-
.tbl th { text-align: left; color: var(--muted); font-weight:
|
|
77
|
-
.tbl td { padding:
|
|
131
|
+
.tbl th { position: sticky; top: 0; z-index: 1; text-align: left; background: var(--surface); color: var(--muted); font-family: var(--mono); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
|
|
132
|
+
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
|
|
133
|
+
.tbl tbody tr { transition: background .12s; }
|
|
134
|
+
.tbl tbody tr:hover td { background: rgba(255,255,255,0.022); }
|
|
78
135
|
.tbl tr:last-child td { border-bottom: none; }
|
|
79
136
|
.tbl .r { text-align: right; }
|
|
80
137
|
.tbl .good { color: var(--good); }
|
|
81
|
-
.tbl-wrap { max-height:
|
|
138
|
+
.tbl-wrap { max-height: 340px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
|
|
82
139
|
.stat-line { display: flex; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }
|
|
83
140
|
.stat-line div { font-size: 13px; color: var(--muted); }
|
|
84
141
|
.stat-line b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
85
142
|
footer { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 8px; }
|
|
86
143
|
code { background: var(--surface2); padding: 1px 6px; border-radius: 5px; color: var(--accent2); }
|
|
87
144
|
.page-head { margin-bottom: 18px; }
|
|
88
|
-
.page-head h1 { font-size: 18px; font-weight:
|
|
145
|
+
.page-head h1 { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: 0.3px; margin: 0 0 4px; }
|
|
89
146
|
.page-head p { color: var(--muted); font-size: 13px; margin: 0; max-width: 720px; line-height: 1.5; }
|
|
90
147
|
.set-cat { margin-bottom: 18px; }
|
|
91
148
|
.set-cat:last-child { margin-bottom: 0; }
|
|
92
|
-
.set-cat-h { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.
|
|
149
|
+
.set-cat-h { font-family: var(--mono); color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
|
|
93
150
|
.set-cat-b { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
|
|
94
151
|
.set-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--surface2); }
|
|
95
152
|
.set-row:last-child { border-bottom: none; }
|
|
@@ -99,13 +156,14 @@
|
|
|
99
156
|
.set-ctl { flex-shrink: 0; }
|
|
100
157
|
.toggle {
|
|
101
158
|
background: var(--surface2); color: var(--muted); border: 1px solid var(--border);
|
|
102
|
-
border-radius:
|
|
159
|
+
border-radius: var(--radius-sm); padding: 6px 16px; font-size: 12px; cursor: pointer; font-family: var(--mono); min-width: 56px;
|
|
160
|
+
transition: color .15s, background .15s, border-color .15s;
|
|
103
161
|
}
|
|
104
|
-
.toggle:hover { color: var(--text); }
|
|
162
|
+
.toggle:hover { color: var(--text); border-color: #2f3744; }
|
|
105
163
|
.toggle.on { background: var(--good); color: #06210f; border-color: var(--good); font-weight: 600; }
|
|
106
164
|
select.choice {
|
|
107
165
|
background: var(--surface2); color: var(--text); border: 1px solid var(--border);
|
|
108
|
-
border-radius:
|
|
166
|
+
border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12px; font-family: var(--mono); cursor: pointer;
|
|
109
167
|
}
|
|
110
168
|
.set-note { color: var(--accent); font-size: 12px; min-height: 16px; margin-top: 10px; }
|
|
111
169
|
/* Settings: two-column grid of rows on wide screens, so a long config list stays compact. */
|
|
@@ -143,7 +201,7 @@
|
|
|
143
201
|
.laddb:hover { border-color: var(--accent); }
|
|
144
202
|
/* Claude-style usage window gauges (current session / weekly all / weekly Sonnet). */
|
|
145
203
|
.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
|
|
146
|
-
.wcard { background: var(--surface2); border: 1px solid var(--border); border-radius:
|
|
204
|
+
.wcard { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-1); }
|
|
147
205
|
.wtitle { font-size: 13px; font-weight: 600; color: var(--text); }
|
|
148
206
|
.wreset { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
149
207
|
.wval { font-size: 22px; font-weight: 600; color: var(--accent); margin-top: 12px; }
|
|
@@ -173,13 +231,20 @@
|
|
|
173
231
|
.pill.on { color: #06210f; background: var(--good); border-color: var(--good); font-weight: 600; }
|
|
174
232
|
.pill.off { color: var(--muted); background: var(--surface2); }
|
|
175
233
|
.pill.lvl { color: #1a1206; background: var(--accent); border-color: var(--accent); font-weight: 600; }
|
|
176
|
-
@media (max-width: 720px) {
|
|
234
|
+
@media (max-width: 720px) {
|
|
235
|
+
body { padding: 16px; }
|
|
236
|
+
.grid { grid-template-columns: repeat(2, 1fr); }
|
|
237
|
+
header { gap: 12px; }
|
|
238
|
+
.tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
239
|
+
.tabs .tab { white-space: nowrap; }
|
|
240
|
+
.nav { margin-left: 0; }
|
|
241
|
+
}
|
|
177
242
|
</style>
|
|
178
243
|
</head>
|
|
179
244
|
<body>
|
|
180
245
|
<header>
|
|
181
246
|
<div class="brand">
|
|
182
|
-
<div class="wordmark">Enigma<span>.</span></div>
|
|
247
|
+
<div class="wordmark">Enigma<span aria-hidden="true">.</span></div>
|
|
183
248
|
<div class="sub">Savings dashboard</div>
|
|
184
249
|
</div>
|
|
185
250
|
<nav class="tabs">
|
|
@@ -207,7 +272,7 @@
|
|
|
207
272
|
|
|
208
273
|
<main id="view-savings">
|
|
209
274
|
<div class="grid">
|
|
210
|
-
<div class="card"><div class="label">Money Saved</div><div id="money" class="value good">-</div><div id="moneyFoot" class="foot">Estimated, by source</div></div>
|
|
275
|
+
<div class="card hero"><div class="label">Money Saved</div><div id="money" class="value good">-</div><div id="moneyFoot" class="foot">Estimated, by source</div></div>
|
|
211
276
|
<div class="card"><div class="label">Time Saved</div><div id="time" class="value accent">-</div><div id="timeFoot" class="foot">Estimated prefill time</div></div>
|
|
212
277
|
<div class="card"><div class="label">Tokens Saved</div><div id="saved" class="value">-</div><div id="savedFoot" class="foot">Across all compressions</div></div>
|
|
213
278
|
<div class="card"><div class="label">Savings Rate</div><div id="rate" class="value accent">-</div><div class="foot">Of input tokens removed</div></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@enigmax/dashboard",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.15",
|
|
4
4
|
"description": "Local browser dashboard UI for enigma: the static page and chart assets enigma serves on its loopback dashboard (savings, real tool usage, in-browser settings). Installed on demand by enigma-cli; not a runtime dependency.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|