@enigmax/dashboard 0.1.14 → 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 +74 -43
- package/package.json +1 -1
package/assets/index.html
CHANGED
|
@@ -6,19 +6,34 @@
|
|
|
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);
|
|
11
15
|
/* Type roles: a monospace "machine readout" face carries the brand, headings,
|
|
12
16
|
labels and numeric data (this is a CLI tool's dashboard); sans carries prose. */
|
|
13
17
|
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
|
14
18
|
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
15
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);
|
|
16
25
|
}
|
|
17
26
|
* { box-sizing: border-box; }
|
|
18
27
|
body {
|
|
19
|
-
margin: 0;
|
|
20
|
-
|
|
21
|
-
|
|
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;
|
|
22
37
|
}
|
|
23
38
|
a { color: var(--accent2); }
|
|
24
39
|
/* Quality floor: one visible keyboard-focus ring for every interactive control
|
|
@@ -33,47 +48,60 @@
|
|
|
33
48
|
transition-duration: 0.01ms !important;
|
|
34
49
|
}
|
|
35
50
|
}
|
|
36
|
-
header { display: flex; align-items: center; gap:
|
|
51
|
+
header { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; flex-wrap: wrap; }
|
|
37
52
|
.brand { display: flex; flex-direction: column; gap: 3px; }
|
|
38
53
|
.wordmark {
|
|
39
|
-
font-family: var(--mono); font-size:
|
|
40
|
-
display: inline-flex; align-items: center;
|
|
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);
|
|
41
56
|
}
|
|
42
57
|
/* Signature: a blinking block caret turns the wordmark into a live terminal prompt. */
|
|
43
58
|
.wordmark span {
|
|
44
|
-
display: inline-block; width: 0.46em; height: 1.05em; margin-left:
|
|
59
|
+
display: inline-block; width: 0.46em; height: 1.05em; margin-left: 5px;
|
|
45
60
|
background: var(--accent); transform: translateY(1px); text-indent: -9999px; overflow: hidden;
|
|
46
|
-
animation: caret 1.1s steps(1, end) infinite;
|
|
61
|
+
box-shadow: 0 0 12px var(--accent-weak); animation: caret 1.1s steps(1, end) infinite;
|
|
47
62
|
}
|
|
48
63
|
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
|
|
49
|
-
.sub { font-family: var(--mono); color: var(--muted); font-size:
|
|
50
|
-
|
|
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; }
|
|
51
67
|
.tabs .tab {
|
|
52
68
|
font-family: var(--mono); text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600;
|
|
53
|
-
padding: 7px
|
|
69
|
+
padding: 7px 15px; border-radius: 9px; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
|
|
54
70
|
}
|
|
55
|
-
.tabs .tab:hover { color: var(--text);
|
|
56
|
-
.tabs .tab.active { color: var(--accent); background: var(--
|
|
57
|
-
.live { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-family: var(--mono); }
|
|
58
|
-
.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); }
|
|
59
75
|
.dot.stale { background: var(--muted); box-shadow: none; }
|
|
60
|
-
.grid { display: grid; grid-template-columns: repeat(auto-
|
|
61
|
-
.card {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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; }
|
|
65
90
|
.card .value.accent { color: var(--accent); }
|
|
66
91
|
.card .value.good { color: var(--good); }
|
|
67
|
-
.card .foot { color: var(--muted); font-size: 12px; margin-top:
|
|
68
|
-
.panel { background: var(--surface); border: 1px solid var(--border); border-radius:
|
|
69
|
-
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom:
|
|
70
|
-
|
|
71
|
-
.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; }
|
|
72
99
|
.ctrls { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
|
73
|
-
.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; }
|
|
74
101
|
.ranges button {
|
|
75
|
-
background:
|
|
76
|
-
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;
|
|
77
105
|
}
|
|
78
106
|
.ranges button:hover { color: var(--text); }
|
|
79
107
|
.ranges button.active { background: var(--accent); color: #1a1206; border-color: var(--accent); font-weight: 600; }
|
|
@@ -92,20 +120,22 @@
|
|
|
92
120
|
}
|
|
93
121
|
.tip .tip-d { color: var(--muted); }
|
|
94
122
|
.tip .tip-v { color: var(--accent); font-weight: 600; margin-top: 2px; }
|
|
95
|
-
.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; }
|
|
96
124
|
.bar-row .name { width: 70px; color: var(--muted); }
|
|
97
|
-
.bar-track { flex: 1; height:
|
|
98
|
-
.bar-fill { height: 100%; border-radius:
|
|
99
|
-
.bar-row .num { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
|
|
100
|
-
.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; }
|
|
101
129
|
.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 40px 0; }
|
|
102
130
|
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
103
|
-
.tbl th { text-align: left; color: var(--muted); font-weight:
|
|
104
|
-
.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); }
|
|
105
135
|
.tbl tr:last-child td { border-bottom: none; }
|
|
106
136
|
.tbl .r { text-align: right; }
|
|
107
137
|
.tbl .good { color: var(--good); }
|
|
108
|
-
.tbl-wrap { max-height:
|
|
138
|
+
.tbl-wrap { max-height: 340px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
|
|
109
139
|
.stat-line { display: flex; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }
|
|
110
140
|
.stat-line div { font-size: 13px; color: var(--muted); }
|
|
111
141
|
.stat-line b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
@@ -126,13 +156,14 @@
|
|
|
126
156
|
.set-ctl { flex-shrink: 0; }
|
|
127
157
|
.toggle {
|
|
128
158
|
background: var(--surface2); color: var(--muted); border: 1px solid var(--border);
|
|
129
|
-
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;
|
|
130
161
|
}
|
|
131
|
-
.toggle:hover { color: var(--text); }
|
|
162
|
+
.toggle:hover { color: var(--text); border-color: #2f3744; }
|
|
132
163
|
.toggle.on { background: var(--good); color: #06210f; border-color: var(--good); font-weight: 600; }
|
|
133
164
|
select.choice {
|
|
134
165
|
background: var(--surface2); color: var(--text); border: 1px solid var(--border);
|
|
135
|
-
border-radius:
|
|
166
|
+
border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12px; font-family: var(--mono); cursor: pointer;
|
|
136
167
|
}
|
|
137
168
|
.set-note { color: var(--accent); font-size: 12px; min-height: 16px; margin-top: 10px; }
|
|
138
169
|
/* Settings: two-column grid of rows on wide screens, so a long config list stays compact. */
|
|
@@ -170,7 +201,7 @@
|
|
|
170
201
|
.laddb:hover { border-color: var(--accent); }
|
|
171
202
|
/* Claude-style usage window gauges (current session / weekly all / weekly Sonnet). */
|
|
172
203
|
.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
|
|
173
|
-
.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); }
|
|
174
205
|
.wtitle { font-size: 13px; font-weight: 600; color: var(--text); }
|
|
175
206
|
.wreset { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
176
207
|
.wval { font-size: 22px; font-weight: 600; color: var(--accent); margin-top: 12px; }
|
|
@@ -241,7 +272,7 @@
|
|
|
241
272
|
|
|
242
273
|
<main id="view-savings">
|
|
243
274
|
<div class="grid">
|
|
244
|
-
<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>
|
|
245
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>
|
|
246
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>
|
|
247
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": [
|