@vitronai/alethia 0.8.1 → 0.8.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.
@@ -5,43 +5,303 @@
5
5
  <title>Trading Platform — Risk Monitor</title>
6
6
  <style>
7
7
  * { box-sizing: border-box; margin: 0; padding: 0; }
8
- body { font-family: -apple-system, sans-serif; background: #0a0e17; color: #e2e8f0; min-height: 100vh; padding: 1.5rem; }
9
- h1 { font-size: 1.4rem; margin-bottom: 0.3rem; }
10
- .subtitle { color: #64748b; font-size: 0.85rem; margin-bottom: 1.5rem; }
11
- .risk-banner { padding: 0.6rem 1rem; border-radius: 8px; margin-bottom: 1.5rem; font-weight: 600; }
12
- .risk-low { background: #14532d; border: 1px solid #22c55e; color: #86efac; }
13
- .risk-medium { background: #78350f; border: 1px solid #f59e0b; color: #fde68a; }
14
- .risk-high { background: #7f1d1d; border: 1px solid #ef4444; color: #fca5a5; }
15
- .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
16
- .metric { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1rem; }
17
- .metric-label { color: #64748b; font-size: 0.8rem; margin-bottom: 0.3rem; }
18
- .metric-value { font-size: 1.6rem; font-weight: 700; }
19
- .metric-value.positive { color: #34d399; }
20
- .metric-value.negative { color: #f87171; }
21
- .metric-value.neutral { color: #3b82f6; }
22
- .positions { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1.2rem; margin-bottom: 1.5rem; }
23
- .positions h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
24
- table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
25
- th { text-align: left; padding: 0.5rem; color: #64748b; border-bottom: 1px solid #1e293b; }
26
- td { padding: 0.5rem; border-bottom: 1px solid #0f172a; }
27
- .pnl-positive { color: #34d399; }
28
- .pnl-negative { color: #f87171; }
29
- .trade-actions { display: flex; gap: 1rem; margin-top: 1rem; }
30
- .trade-btn { padding: 0.6rem 1.2rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
31
- .btn-buy { background: #14532d; color: #86efac; }
32
- .btn-sell { background: #7f1d1d; color: #fca5a5; }
33
- .btn-liquidate { background: #991b1b; color: white; }
34
- .compliance { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1.2rem; }
35
- .compliance h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
36
- .check-item { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #0f172a; }
37
- .check-pass { color: #34d399; }
38
- .check-fail { color: #f87171; }
39
- .check-warn { color: #fbbf24; }
8
+ :root {
9
+ --bg: #06100c;
10
+ --bg-1: #0d1818;
11
+ --bg-2: #14201f;
12
+ --edge: rgba(255,255,255,.06);
13
+ --edge-strong: rgba(255,255,255,.12);
14
+ --ink: #e8f5ed;
15
+ --ink-2: #cdd9d3;
16
+ --ink-muted: #93a299;
17
+ --ink-faint: #5e6e69;
18
+ --emerald: #10b981;
19
+ --emerald-bright: #34d399;
20
+ --emerald-glow: #6ee7b7;
21
+ --red: #ef4444;
22
+ --red-bright: #f87171;
23
+ --amber: #f59e0b;
24
+ --amber-bright: #fbbf24;
25
+ --teal: #14b8a6;
26
+ --slate: #64748b;
27
+ --pink: #f472b6;
28
+ }
29
+ html { color-scheme: dark; }
30
+ body {
31
+ font-family: "SF Pro Display", -apple-system, system-ui, sans-serif;
32
+ background:
33
+ radial-gradient(ellipse 70% 40% at 10% -10%, rgba(52,211,153,.08), transparent 70%),
34
+ radial-gradient(ellipse 60% 40% at 90% 110%, rgba(239,68,68,.05), transparent 70%),
35
+ var(--bg);
36
+ background-attachment: fixed;
37
+ color: var(--ink-2);
38
+ min-height: 100vh;
39
+ padding: 1.6rem 1.75rem 2rem;
40
+ font-size: 13.5px;
41
+ line-height: 1.5;
42
+ -webkit-font-smoothing: antialiased;
43
+ font-feature-settings: "tnum"; /* tabular numerics for tables */
44
+ }
45
+ .mono, .price, td { font-variant-numeric: tabular-nums; }
46
+
47
+ /* Header */
48
+ .header {
49
+ display: flex; justify-content: space-between; align-items: flex-end;
50
+ margin-bottom: 14px;
51
+ padding-bottom: 14px;
52
+ border-bottom: 1px solid var(--edge);
53
+ }
54
+ .header-left { display: flex; flex-direction: column; gap: 4px; }
55
+ h1 {
56
+ font-size: 22px; font-weight: 700;
57
+ color: var(--ink); letter-spacing: -.02em;
58
+ display: inline-flex; align-items: center; gap: 10px;
59
+ }
60
+ h1::before {
61
+ content: ""; width: 8px; height: 8px; border-radius: 999px;
62
+ background: var(--emerald);
63
+ box-shadow: 0 0 12px rgba(16,185,129,.7);
64
+ animation: livepulse 2s ease-in-out infinite;
65
+ }
66
+ @keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
67
+ .subtitle {
68
+ color: var(--ink-faint);
69
+ font-size: 12px;
70
+ font-family: ui-monospace, "SF Mono", monospace;
71
+ }
72
+ .session-pill {
73
+ display: inline-flex; align-items: center; gap: 8px;
74
+ font-size: 11px; font-family: ui-monospace, "SF Mono", monospace;
75
+ padding: 5px 12px; border-radius: 999px;
76
+ background: rgba(16,185,129,.08);
77
+ border: 1px solid rgba(16,185,129,.3);
78
+ color: var(--emerald-bright);
79
+ font-weight: 600;
80
+ }
81
+ .session-pill::before {
82
+ content: ""; width: 6px; height: 6px; border-radius: 999px;
83
+ background: var(--emerald-bright); box-shadow: 0 0 6px var(--emerald-bright);
84
+ }
85
+
86
+ /* Risk banner */
87
+ .risk-banner {
88
+ position: relative;
89
+ padding: 12px 18px;
90
+ border-radius: 10px;
91
+ margin-bottom: 18px;
92
+ font-weight: 600;
93
+ font-size: 13px;
94
+ overflow: hidden;
95
+ }
96
+ .risk-banner::before {
97
+ content: ""; position: absolute; left: 0; top: 0; bottom: 0;
98
+ width: 3px;
99
+ }
100
+ .risk-low {
101
+ background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(16,185,129,.04));
102
+ border: 1px solid rgba(16,185,129,.35);
103
+ color: #6ee7b7;
104
+ }
105
+ .risk-low::before { background: var(--emerald); box-shadow: 0 0 12px rgba(16,185,129,.6); }
106
+ .risk-medium {
107
+ background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.04));
108
+ border: 1px solid rgba(245,158,11,.4);
109
+ color: #fde68a;
110
+ }
111
+ .risk-medium::before { background: var(--amber); box-shadow: 0 0 12px rgba(245,158,11,.6); }
112
+ .risk-high {
113
+ background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(239,68,68,.04));
114
+ border: 1px solid rgba(239,68,68,.4);
115
+ color: #fca5a5;
116
+ }
117
+ .risk-high::before { background: var(--red); box-shadow: 0 0 12px rgba(239,68,68,.6); }
118
+
119
+ /* Metric cards */
120
+ .metrics {
121
+ display: grid;
122
+ grid-template-columns: repeat(4, 1fr);
123
+ gap: 12px;
124
+ margin-bottom: 18px;
125
+ }
126
+ .metric {
127
+ position: relative;
128
+ background: linear-gradient(180deg, var(--bg-1) 0%, rgba(13,24,24,.5) 100%);
129
+ border: 1px solid var(--edge);
130
+ border-radius: 12px;
131
+ padding: 14px 16px;
132
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
133
+ transition: border-color .15s, transform .15s;
134
+ }
135
+ .metric:hover { border-color: var(--edge-strong); transform: translateY(-1px); }
136
+ .metric-label {
137
+ color: var(--ink-faint);
138
+ font-size: 10.5px;
139
+ font-weight: 700;
140
+ letter-spacing: .1em;
141
+ text-transform: uppercase;
142
+ margin-bottom: 8px;
143
+ }
144
+ .metric-value {
145
+ font-size: 22px; font-weight: 700;
146
+ letter-spacing: -.015em;
147
+ font-variant-numeric: tabular-nums;
148
+ }
149
+ .metric-value.positive { color: var(--emerald-bright); }
150
+ .metric-value.negative { color: var(--red-bright); }
151
+ .metric-value.neutral { color: var(--ink); }
152
+
153
+ /* Positions / Compliance panels */
154
+ .positions, .compliance {
155
+ background: linear-gradient(180deg, var(--bg-1) 0%, rgba(13,24,24,.5) 100%);
156
+ border: 1px solid var(--edge);
157
+ border-radius: 14px;
158
+ padding: 18px 20px;
159
+ margin-bottom: 16px;
160
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
161
+ }
162
+ .positions h2, .compliance h2 {
163
+ font-size: 14px; font-weight: 700;
164
+ color: var(--ink);
165
+ margin-bottom: 14px;
166
+ letter-spacing: -.005em;
167
+ display: inline-flex; align-items: center; gap: 8px;
168
+ }
169
+ .positions h2::before, .compliance h2::before {
170
+ content: ""; width: 4px; height: 4px; border-radius: 999px;
171
+ background: var(--emerald);
172
+ box-shadow: 0 0 6px var(--emerald);
173
+ }
174
+
175
+ /* Table */
176
+ table {
177
+ width: 100%;
178
+ border-collapse: collapse;
179
+ font-size: 13px;
180
+ }
181
+ th {
182
+ text-align: left;
183
+ padding: 9px 12px;
184
+ color: var(--ink-faint);
185
+ border-bottom: 1px solid var(--edge);
186
+ font-weight: 600;
187
+ font-size: 10.5px;
188
+ text-transform: uppercase;
189
+ letter-spacing: .08em;
190
+ }
191
+ td {
192
+ padding: 11px 12px;
193
+ border-bottom: 1px solid rgba(255,255,255,.03);
194
+ color: var(--ink-2);
195
+ }
196
+ tbody tr { transition: background .12s; }
197
+ tbody tr:hover { background: rgba(16,185,129,.04); }
198
+ tbody tr:last-child td { border-bottom: none; }
199
+ /* Symbol cell — bold + colored slightly */
200
+ tbody tr td:first-child {
201
+ font-weight: 700;
202
+ color: var(--ink);
203
+ font-family: ui-monospace, "SF Mono", monospace;
204
+ letter-spacing: .02em;
205
+ }
206
+ .pnl-positive { color: var(--emerald-bright); font-weight: 600; }
207
+ .pnl-negative { color: var(--red-bright); font-weight: 600; }
208
+
209
+ /* Trade action buttons */
210
+ .trade-actions, .compliance-actions {
211
+ display: flex;
212
+ gap: 8px;
213
+ margin-top: 16px;
214
+ }
215
+ .trade-btn {
216
+ padding: 8px 16px;
217
+ border-radius: 8px;
218
+ border: 1px solid var(--edge);
219
+ background: rgba(255,255,255,.02);
220
+ font: inherit;
221
+ font-size: 12.5px;
222
+ font-weight: 600;
223
+ cursor: pointer;
224
+ transition: background .14s, border-color .14s, color .14s, transform .08s, box-shadow .14s;
225
+ }
226
+ .trade-btn:active { transform: translateY(1px); }
227
+ .btn-buy {
228
+ color: var(--emerald-bright);
229
+ border-color: rgba(16,185,129,.45);
230
+ background: rgba(16,185,129,.08);
231
+ }
232
+ .btn-buy:hover { background: rgba(16,185,129,.18); border-color: var(--emerald); box-shadow: 0 0 10px rgba(16,185,129,.25); }
233
+ .btn-sell {
234
+ color: var(--red-bright);
235
+ border-color: rgba(239,68,68,.45);
236
+ background: rgba(239,68,68,.08);
237
+ }
238
+ .btn-sell:hover { background: rgba(239,68,68,.18); border-color: var(--red); box-shadow: 0 0 10px rgba(239,68,68,.25); }
239
+ .btn-liquidate {
240
+ color: #fff;
241
+ background: linear-gradient(180deg, var(--red-bright), var(--red));
242
+ border-color: var(--red);
243
+ font-weight: 700;
244
+ }
245
+ .btn-liquidate:hover { filter: brightness(1.08); box-shadow: 0 0 12px rgba(239,68,68,.4); }
246
+ .btn-wire {
247
+ color: var(--amber-bright);
248
+ border-color: rgba(245,158,11,.45);
249
+ background: rgba(245,158,11,.08);
250
+ }
251
+ .btn-wire:hover { background: rgba(245,158,11,.18); border-color: var(--amber); box-shadow: 0 0 10px rgba(245,158,11,.25); }
252
+ .btn-purge {
253
+ color: var(--pink);
254
+ border-color: rgba(244,114,182,.45);
255
+ background: rgba(244,114,182,.08);
256
+ }
257
+ .btn-purge:hover { background: rgba(244,114,182,.18); border-color: var(--pink); box-shadow: 0 0 10px rgba(244,114,182,.25); }
258
+
259
+ /* Compliance check rows */
260
+ .check-item {
261
+ display: flex; justify-content: space-between; align-items: center;
262
+ padding: 9px 0;
263
+ border-bottom: 1px solid rgba(255,255,255,.03);
264
+ }
265
+ .check-item:last-of-type { border-bottom: none; }
266
+ .check-item > span:first-child {
267
+ color: var(--ink-2);
268
+ font-size: 12.5px;
269
+ }
270
+ .check-pass, .check-fail, .check-warn {
271
+ font-family: ui-monospace, "SF Mono", monospace;
272
+ font-size: 11px;
273
+ font-weight: 700;
274
+ letter-spacing: .04em;
275
+ padding: 3px 10px;
276
+ border-radius: 999px;
277
+ }
278
+ .check-pass {
279
+ color: var(--emerald-bright);
280
+ background: rgba(16,185,129,.10);
281
+ border: 1px solid rgba(16,185,129,.3);
282
+ }
283
+ .check-warn {
284
+ color: var(--amber-bright);
285
+ background: rgba(245,158,11,.10);
286
+ border: 1px solid rgba(245,158,11,.3);
287
+ }
288
+ .check-fail {
289
+ color: var(--red-bright);
290
+ background: rgba(239,68,68,.10);
291
+ border: 1px solid rgba(239,68,68,.3);
292
+ }
293
+
294
+ ::selection { background: rgba(52,211,153,.3); }
40
295
  </style>
41
296
  </head>
42
297
  <body>
43
- <h1>Risk Monitor</h1>
44
- <p class="subtitle">Live · Last update: 2 seconds ago · Market: NYSE · Session: Pre-market</p>
298
+ <div class="header">
299
+ <div class="header-left">
300
+ <h1>Risk Monitor</h1>
301
+ <span class="subtitle">Last update: 2 seconds ago &middot; Market: NYSE &middot; Session: Pre-market</span>
302
+ </div>
303
+ <span class="session-pill">LIVE</span>
304
+ </div>
45
305
 
46
306
  <div id="risk-banner" class="risk-banner risk-medium" role="alert">
47
307
  RISK LEVEL: MEDIUM — Portfolio exposure approaching limit (82% of max)
@@ -83,6 +343,7 @@
83
343
  <button class="trade-btn btn-buy" id="buy-btn">Buy</button>
84
344
  <button class="trade-btn btn-sell" id="sell-btn">Sell Position</button>
85
345
  <button class="trade-btn btn-liquidate" id="liquidate-btn">Liquidate All</button>
346
+ <button class="trade-btn btn-wire" id="wire-btn">Wire Funds</button>
86
347
  </div>
87
348
  </div>
88
349
 
@@ -93,6 +354,9 @@
93
354
  <div class="check-item"><span>Daily loss limit (< $100K)</span><span class="check-pass">PASS</span></div>
94
355
  <div class="check-item"><span>Restricted securities check</span><span class="check-pass">CLEAR</span></div>
95
356
  <div class="check-item"><span>Pre-trade risk approval</span><span class="check-fail">REQUIRED for trades > $500K</span></div>
357
+ <div class="compliance-actions">
358
+ <button class="trade-btn btn-purge" id="purge-btn">Purge Audit Log</button>
359
+ </div>
96
360
  </div>
97
361
  </body>
98
362
  </html>