@vllm-sr/dsh 0.4.2 → 0.5.1
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/README.md +58 -17
- package/package.json +1 -1
- package/src/client.js +13 -5
- package/src/index.js +256 -55
- package/src/questions.js +31 -0
- package/src/shield.js +116 -40
- package/src/spans.js +216 -0
- package/web/client.js +187 -62
package/web/client.js
CHANGED
|
@@ -30,12 +30,13 @@ window.__ModuleLoader__.load({
|
|
|
30
30
|
const FRESH_MS = 20000
|
|
31
31
|
const ROWS_SHOWN = 4
|
|
32
32
|
|
|
33
|
-
const REFLEX = { triage: 'Triage', guard: 'Guard', shield: 'Shield', done: 'Done-check', tool: 'Batch' }
|
|
33
|
+
const REFLEX = { triage: 'Triage', guard: 'Guard', shield: 'Shield', privacy: 'Privacy', done: 'Done-check', tool: 'Batch' }
|
|
34
34
|
const KINDS = { code: 'Code', data: 'Data', research: 'Research', writing: 'Writing', ops: 'Ops', chat: 'Chat' }
|
|
35
35
|
const EFFORT = ['Trivial', 'Small', 'Medium', 'Large']
|
|
36
36
|
const RISK = ['Safe', 'Normal', 'Dangerous', 'Critical']
|
|
37
|
-
|
|
38
|
-
const
|
|
37
|
+
// the vLLM logo's blue (#30A2FF) leads; its gold and cool neighbours tell the other options apart
|
|
38
|
+
const HUES = ['#30A2FF', '#1559B5', '#7CCBFF', '#6E7CF5', '#FDB515', '#2BB3A3', '#A9C6FF', '#0B3A75']
|
|
39
|
+
const RAMP = ['#C5E5FF', '#97D0FF', '#63B8FF', '#30A2FF', '#1E85E3', '#1667C4', '#0F4C94']
|
|
39
40
|
const SEVERITY = { muted: 0, ok: 1, info: 2, warn: 3, bad: 4 }
|
|
40
41
|
|
|
41
42
|
const GUARD = {
|
|
@@ -59,6 +60,7 @@ window.__ModuleLoader__.load({
|
|
|
59
60
|
waiting: { label: 'Waiting on you', tone: 'info' },
|
|
60
61
|
unfinished: { label: 'Sent back', tone: 'warn' },
|
|
61
62
|
unchecked: { label: 'Sent back to verify', tone: 'warn' },
|
|
63
|
+
unsupported: { label: 'Sent back to re-verify', tone: 'warn' },
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
const num = value => (typeof value === 'number' && Number.isFinite(value) ? value : undefined)
|
|
@@ -83,12 +85,14 @@ window.__ModuleLoader__.load({
|
|
|
83
85
|
return data && typeof data === 'object' && data.v === 1 && typeof data.reflex === 'string' ? data : undefined
|
|
84
86
|
}
|
|
85
87
|
|
|
86
|
-
// one card per triage of a turn, per guard or
|
|
88
|
+
// one card per triage of a turn, per guard, shield or privacy step (parallel calls share it), per done-check
|
|
87
89
|
function groupOf(data, seq) {
|
|
88
90
|
const turn = Number.isSafeInteger(data.turn) ? data.turn : undefined
|
|
89
91
|
const step = Number.isSafeInteger(data.step) ? data.step : undefined
|
|
90
92
|
if (data.reflex === 'triage' && turn !== undefined) return `t${turn}:triage`
|
|
91
|
-
if (
|
|
93
|
+
if (['guard', 'shield', 'privacy'].includes(data.reflex) && turn !== undefined && step !== undefined) return `t${turn}:s${step}:${data.reflex}`
|
|
94
|
+
// a done-check that was still deciding and its answer share one element
|
|
95
|
+
if (data.reflex === 'done' && typeof data.decision === 'string') return `d:${data.decision}`
|
|
92
96
|
return `r${seq}`
|
|
93
97
|
}
|
|
94
98
|
|
|
@@ -105,12 +109,25 @@ window.__ModuleLoader__.load({
|
|
|
105
109
|
return { ...base, rows }
|
|
106
110
|
}
|
|
107
111
|
}
|
|
108
|
-
|
|
112
|
+
const row = { ...data, seq: event.seq, time: event.time }
|
|
113
|
+
// a decision's answer takes the place of the row that showed it deciding
|
|
114
|
+
if (typeof data.decision === 'string') {
|
|
115
|
+
const at = base.rows.findIndex(other => other.decision === data.decision)
|
|
116
|
+
if (at >= 0) {
|
|
117
|
+
const rows = base.rows.slice()
|
|
118
|
+
rows[at] = row
|
|
119
|
+
return { ...base, rows }
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
return { ...base, rows: [...base.rows, row] }
|
|
109
123
|
}
|
|
110
124
|
|
|
111
125
|
// Triage and done-check frame the turn and stay visible when it folds; so does a guard or shield card that
|
|
112
126
|
// stopped something. A routine one sits with the work it checked and folds with it.
|
|
113
127
|
function standsOut(state) {
|
|
128
|
+
// a decision still deciding, or stopped, is one line until its answer comes
|
|
129
|
+
if (state.rows.every(row => row.pending || row.verdict === 'cancelled')) return false
|
|
130
|
+
if (state.reflex === 'privacy') return state.rows.some(row => row.verdict === 'masked' || row.error)
|
|
114
131
|
if (state.reflex !== 'guard' && state.reflex !== 'shield') return true
|
|
115
132
|
return state.rows.some(row => SEVERITY[viewOf(state.reflex, row).tone] >= SEVERITY.warn)
|
|
116
133
|
}
|
|
@@ -198,8 +215,9 @@ window.__ModuleLoader__.load({
|
|
|
198
215
|
if (risk !== undefined) facts.push({ id: 'risk', label: 'Risk', value: `${level(RISK, Math.min(3, risk))} · ${risk.toFixed(2)} of 3`, bar: risk / 3, tone: risk >= 2.5 ? 'bad' : risk >= 1.8 ? 'warn' : 'ok' })
|
|
199
216
|
if (leaks !== undefined) facts.push({ id: 'leaks', label: 'Leaks secrets', value: p2(leaks), bar: leaks, tone: leaks >= 0.7 ? 'bad' : undefined })
|
|
200
217
|
if (onTask !== undefined) facts.push({ id: 'on-task', label: 'On task', value: p2(onTask), bar: onTask, tone: onTask < 0.15 ? 'warn' : undefined })
|
|
218
|
+
const danger = Array.isArray(row.danger) ? row.danger.filter(span => typeof span?.text === 'string' && span.text) : []
|
|
201
219
|
return {
|
|
202
|
-
verdict: row.verdict, ...verdict, subject, facts, outcome, outcomeKey: outcome ? row.outcome : undefined, verdictTone: verdict.tone,
|
|
220
|
+
verdict: row.verdict, ...verdict, subject: danger.length ? { ...subject, marks: danger, kind: 'dangerous' } : subject, facts, outcome, outcomeKey: outcome ? row.outcome : undefined, verdictTone: verdict.tone,
|
|
203
221
|
tone: outcome && SEVERITY[outcome.tone] > SEVERITY[verdict.tone] ? outcome.tone : verdict.tone,
|
|
204
222
|
note: row.verdict !== 'allow' && row.why ? `Because ${row.why}.` : undefined,
|
|
205
223
|
}
|
|
@@ -209,14 +227,36 @@ window.__ModuleLoader__.load({
|
|
|
209
227
|
if (row.error) return errorView(row, { text: 'so the result was passed on unscreened', tone: 'muted' })
|
|
210
228
|
const verdict = SHIELD[row.verdict] ?? SHIELD.clean
|
|
211
229
|
const lines = num(row.removedLines) ?? 0
|
|
230
|
+
const spans = num(row.removedSpans) ?? 0
|
|
231
|
+
const what = spans ? `${plural(spans, 'span')} of text (${plural(num(row.removedChars) ?? 0, 'character')})` : plural(lines, 'line')
|
|
212
232
|
return {
|
|
213
233
|
verdict: row.verdict, ...verdict, subject: { tool: row.tool, text: row.call },
|
|
214
234
|
facts: [
|
|
215
235
|
{ id: 'passages', label: 'Passages', value: String(num(row.passages) ?? '?') },
|
|
216
236
|
{ id: 'injection', label: 'Injection', value: p2(row.maxP), bar: num(row.maxP), tone: row.maxP >= 0.5 ? 'bad' : 'ok' },
|
|
237
|
+
...(spans ? [{ id: 'spans', label: 'Spans removed', value: String(spans) }] : []),
|
|
217
238
|
],
|
|
218
|
-
|
|
219
|
-
|
|
239
|
+
excerpts: Array.isArray(row.excerpts) ? { list: row.excerpts, kind: 'removed' } : undefined,
|
|
240
|
+
note: row.verdict === 'removed' ? `Removed ${what} that gave orders to AI agents before System Two read the result${spans ? '; the text around it stayed' : ''}.`
|
|
241
|
+
: row.verdict === 'flagged' ? `Found ${what} that give orders to AI agents; the result was withheld.` : undefined,
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
function privacyView(row) {
|
|
246
|
+
if (row.error) return errorView(row, { text: 'so the result went to System Two unmasked', tone: 'warn' })
|
|
247
|
+
if (row.verdict === 'clean') {
|
|
248
|
+
return { verdict: 'clean', label: 'Nothing to mask', short: 'nothing to mask', tone: 'ok', subject: row.call ? { tool: row.tool, text: row.call } : undefined, facts: [{ id: 'masked', label: 'Masked', value: '0' }] }
|
|
249
|
+
}
|
|
250
|
+
const masked = num(row.masked) ?? 0
|
|
251
|
+
const labels = row.labels && typeof row.labels === 'object' ? Object.entries(row.labels).filter(([, n]) => num(n)) : []
|
|
252
|
+
return {
|
|
253
|
+
verdict: 'masked', label: 'Masked', short: 'masked', tone: 'info',
|
|
254
|
+
headline: `${plural(masked, 'personal detail')} masked${row.tool ? ` · ${row.tool}` : ''}`,
|
|
255
|
+
subject: row.call ? { tool: row.tool, text: row.call } : undefined,
|
|
256
|
+
facts: [{ id: 'masked', label: 'Masked', value: String(masked) }],
|
|
257
|
+
labels: labels.map(([label, n]) => ({ label, n })),
|
|
258
|
+
excerpts: Array.isArray(row.excerpts) ? { list: row.excerpts, kind: 'masked' } : undefined,
|
|
259
|
+
note: 'System Two read [LABEL] placeholders instead of these details.',
|
|
220
260
|
}
|
|
221
261
|
}
|
|
222
262
|
|
|
@@ -226,6 +266,7 @@ window.__ModuleLoader__.load({
|
|
|
226
266
|
const why = DONE[row.why] ? row.why : row.verdict === 'continue' ? 'unfinished' : 'complete'
|
|
227
267
|
const verdict = DONE[why]
|
|
228
268
|
const round = `${num(row.steers) ?? '?'} of ${num(row.maxSteers) ?? '?'}`
|
|
269
|
+
const unsupported = num(row.unsupported) ?? 0
|
|
229
270
|
return {
|
|
230
271
|
verdict: row.verdict === 'continue' ? 'continue' : 'stop', ...verdict, why, short: verdict.label.toLowerCase(),
|
|
231
272
|
headline: row.verdict === 'continue' ? `${verdict.label} to System Two (${round})` : why === 'waiting' ? 'Waiting on you' : 'The work is done',
|
|
@@ -233,18 +274,34 @@ window.__ModuleLoader__.load({
|
|
|
233
274
|
{ id: 'complete', label: 'Complete', value: p2(yesOf(a.complete)), bar: yesOf(a.complete), tone: yesOf(a.complete) < 0.5 ? 'warn' : 'ok' },
|
|
234
275
|
{ id: 'checked', label: 'Checked', value: p2(yesOf(a.checked)), bar: yesOf(a.checked) },
|
|
235
276
|
{ id: 'waiting', label: 'Waiting on you', value: p2(yesOf(a.waiting)), bar: yesOf(a.waiting) },
|
|
277
|
+
...(row.spanModel ? [{ id: 'unsupported', label: 'Unsupported', value: String(unsupported), tone: unsupported ? 'warn' : 'ok' }] : []),
|
|
236
278
|
],
|
|
279
|
+
excerpts: unsupported && Array.isArray(row.excerpts) ? { list: row.excerpts, kind: 'unsupported' } : undefined,
|
|
237
280
|
note: why === 'unfinished' ? `Not finished yet, so System Two goes back to work (${round}).`
|
|
238
|
-
: why === 'unchecked' ? `The changes were not checked, so System Two goes back to verify them (${round}).`
|
|
281
|
+
: why === 'unchecked' ? `The changes were not checked, so System Two goes back to verify them (${round}).`
|
|
282
|
+
: why === 'unsupported' ? `Nothing System Two read supports ${plural(unsupported, 'claim')} in its answer, so it goes back to re-verify just ${unsupported === 1 ? 'that one' : 'those'} (${round}).`
|
|
283
|
+
: unsupported ? `Nothing System Two read supports ${plural(unsupported, 'claim')} in its answer.` : undefined,
|
|
239
284
|
}
|
|
240
285
|
}
|
|
241
286
|
|
|
287
|
+
// what a decision that has no answer yet says, and one whose turn stopped before it was answered
|
|
288
|
+
const WAITING = {
|
|
289
|
+
guard: 'reviewing the call', shield: 'screening the result', privacy: 'looking for personal data', done: 'checking the work', triage: 'reading the request',
|
|
290
|
+
}
|
|
291
|
+
function waitingView(reflex, row) {
|
|
292
|
+
const subject = row.call ? { tool: row.tool, text: row.call } : undefined
|
|
293
|
+
if (row.pending) return { verdict: 'deciding', label: 'Deciding', short: 'deciding', tone: 'info', pending: true, detail: WAITING[reflex] ?? 'thinking', subject, facts: [] }
|
|
294
|
+
return { verdict: 'cancelled', label: 'Stopped', short: 'stopped', tone: 'muted', detail: 'the turn stopped before System One answered', subject, facts: [] }
|
|
295
|
+
}
|
|
296
|
+
|
|
242
297
|
function viewOf(reflex, row) {
|
|
298
|
+
if (row.pending || row.verdict === 'cancelled') return waitingView(reflex, row)
|
|
243
299
|
switch (reflex) {
|
|
244
300
|
case 'triage': return triageView(row)
|
|
245
301
|
case 'guard': return guardView(row)
|
|
246
302
|
case 'shield': return shieldView(row)
|
|
247
303
|
case 'done': return doneView(row)
|
|
304
|
+
case 'privacy': return privacyView(row)
|
|
248
305
|
default: return row.error ? errorView(row) : { verdict: 'unknown', label: 'Decision', short: 'decision', tone: 'muted', facts: [] }
|
|
249
306
|
}
|
|
250
307
|
}
|
|
@@ -265,7 +322,7 @@ window.__ModuleLoader__.load({
|
|
|
265
322
|
const key = view.outcome?.short ?? view.short
|
|
266
323
|
counts.set(key, (counts.get(key) ?? 0) + 1)
|
|
267
324
|
}
|
|
268
|
-
const noun = reflex === 'guard' ? 'call' : reflex === 'shield' ? 'result' : 'decision'
|
|
325
|
+
const noun = reflex === 'guard' ? 'call' : reflex === 'shield' || reflex === 'privacy' ? 'result' : 'decision'
|
|
269
326
|
return [plural(views.length, noun), ...[...counts].map(([short, n]) => `${n} ${short}`)].join(' · ')
|
|
270
327
|
}
|
|
271
328
|
|
|
@@ -273,8 +330,9 @@ window.__ModuleLoader__.load({
|
|
|
273
330
|
function compactLine(view) {
|
|
274
331
|
const label = view.outcome ? `${view.label} → ${view.outcome.label}` : view.label
|
|
275
332
|
const rest = []
|
|
333
|
+
if (view.detail) rest.push(view.detail)
|
|
276
334
|
if (view.subject?.text) rest.push(`${view.subject.tool ?? ''} ${view.subject.text}`.trim())
|
|
277
|
-
const lead = view.facts.find(fact => ['risk', 'injection', 'complete', 'effort'].includes(fact.id))
|
|
335
|
+
const lead = view.facts.find(fact => ['risk', 'injection', 'complete', 'effort', 'masked'].includes(fact.id))
|
|
278
336
|
if (lead) rest.push(`${lead.label.toLowerCase()} ${lead.value}`)
|
|
279
337
|
if (view.error) rest.push(view.error)
|
|
280
338
|
return { label, tone: view.tone, rest: rest.join(' · ') }
|
|
@@ -320,9 +378,41 @@ window.__ModuleLoader__.load({
|
|
|
320
378
|
secs(ms) ? h('span', { className: 'vsr-s1__ms', 'data-system-one-part': 'latency' }, secs(ms)) : null)
|
|
321
379
|
}
|
|
322
380
|
|
|
323
|
-
function Model({ model }) {
|
|
324
|
-
const
|
|
325
|
-
return
|
|
381
|
+
function Model({ model, also }) {
|
|
382
|
+
const names = [...new Set([fullModel(model), fullModel(also)].filter(Boolean))]
|
|
383
|
+
return names.length ? h('b', { className: 'vsr-s1__model', 'data-system-one-part': 'model', title: names.join(' + ') }, names.join(' + ')) : null
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
// what a span model marked: removed injections, masked personal data (only its label), unsupported claims
|
|
387
|
+
function Mark({ mark, kind }) {
|
|
388
|
+
const p = num(mark.probability)
|
|
389
|
+
return h('mark', {
|
|
390
|
+
className: cx('vsr-s1__span', `vsr-s1__span--${kind}`),
|
|
391
|
+
'data-system-one-part': 'span',
|
|
392
|
+
'data-system-one-span-label': text(mark.label) || undefined,
|
|
393
|
+
'data-system-one-probability': p === undefined ? undefined : String(p),
|
|
394
|
+
title: [text(mark.label), p === undefined ? '' : p.toFixed(2)].filter(Boolean).join(' · '),
|
|
395
|
+
}, kind === 'masked' ? text(mark.label) || 'PII' : text(mark.text))
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
function Excerpts({ excerpts }) {
|
|
399
|
+
return h('div', { className: 'vsr-s1__excerpts', 'data-system-one-part': 'excerpts' },
|
|
400
|
+
excerpts.list.slice(0, 3).map((parts, index) => h('div', { key: index, className: 'vsr-s1__excerpt', 'data-system-one-part': 'excerpt' },
|
|
401
|
+
(Array.isArray(parts) ? parts : []).map((part, at) => (part?.mark ? h(Mark, { key: at, mark: part.mark, kind: excerpts.kind }) : h('span', { key: at }, text(part?.text)))))))
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
// the subject with each marked text highlighted where it first occurs
|
|
405
|
+
function Marked({ value, marks, kind }) {
|
|
406
|
+
const pieces = []
|
|
407
|
+
let rest = value
|
|
408
|
+
for (const mark of marks) {
|
|
409
|
+
const at = rest.indexOf(mark.text)
|
|
410
|
+
if (at < 0) continue
|
|
411
|
+
if (at > 0) pieces.push(rest.slice(0, at))
|
|
412
|
+
pieces.push(h(Mark, { key: pieces.length, mark, kind }))
|
|
413
|
+
rest = rest.slice(at + mark.text.length)
|
|
414
|
+
}
|
|
415
|
+
return [...pieces, rest]
|
|
326
416
|
}
|
|
327
417
|
|
|
328
418
|
function Pill({ tone, children, arrow, part }) {
|
|
@@ -336,10 +426,11 @@ window.__ModuleLoader__.load({
|
|
|
336
426
|
h('b', null, value))
|
|
337
427
|
}
|
|
338
428
|
|
|
339
|
-
function Row({ row, view, single }) {
|
|
429
|
+
function Row({ row, view, single, index = 0 }) {
|
|
340
430
|
const fresh = useFresh(`row:${idOf(row)}`, row.time)
|
|
341
431
|
return h('div', {
|
|
342
432
|
className: cx('vsr-s1__row', fresh && 'vsr-s1__row--fresh'),
|
|
433
|
+
style: fresh ? { '--vsr-s1-i': Math.min(index, 6) } : undefined,
|
|
343
434
|
'data-system-one-decision': view.verdict,
|
|
344
435
|
'data-system-one-outcome': view.outcomeKey,
|
|
345
436
|
'data-system-one-call': row.callId,
|
|
@@ -350,8 +441,12 @@ window.__ModuleLoader__.load({
|
|
|
350
441
|
h('div', { className: 'vsr-s1__main' },
|
|
351
442
|
view.subject?.text ? h('div', { className: 'vsr-s1__subject', 'data-system-one-part': 'subject' },
|
|
352
443
|
view.subject.tool ? h('span', { className: 'vsr-s1__tool' }, view.subject.tool) : null,
|
|
353
|
-
h('code', { className: 'vsr-s1__code', title: view.subject.text }, view.subject.text)) : null,
|
|
444
|
+
h('code', { className: 'vsr-s1__code', title: view.subject.text }, view.subject.marks ? h(Marked, { value: view.subject.text, marks: view.subject.marks, kind: view.subject.kind }) : view.subject.text)) : null,
|
|
445
|
+
view.subject?.marks && view.subject.marks.some(mark => !view.subject.text.includes(mark.text))
|
|
446
|
+
? h('div', { className: 'vsr-s1__note', 'data-system-one-part': 'note' }, 'The dangerous part: ', view.subject.marks.map((mark, index) => h(Mark, { key: index, mark, kind: view.subject.kind }))) : null,
|
|
354
447
|
view.facts.length ? h('div', { className: 'vsr-s1__facts', 'data-system-one-part': 'facts' }, view.facts.map(fact => h(Fact, { key: fact.id, ...fact }))) : null,
|
|
448
|
+
view.labels?.length ? h('div', { className: 'vsr-s1__labels', 'data-system-one-part': 'labels' }, view.labels.map(entry => h('span', { key: entry.label, className: 'vsr-s1__label', 'data-system-one-span-label': entry.label }, entry.label, h('b', null, String(entry.n))))) : null,
|
|
449
|
+
view.excerpts?.list?.length ? h(Excerpts, { excerpts: view.excerpts }) : null,
|
|
355
450
|
view.note ? h('div', { className: 'vsr-s1__note', 'data-system-one-part': 'note' }, view.note) : null),
|
|
356
451
|
!single && secs(row.ms) ? h('span', { className: 'vsr-s1__rowms', 'data-system-one-part': 'latency' }, secs(row.ms)) : null)
|
|
357
452
|
}
|
|
@@ -361,11 +456,17 @@ window.__ModuleLoader__.load({
|
|
|
361
456
|
const hidden = all ? 0 : Math.max(0, rows.length - ROWS_SHOWN)
|
|
362
457
|
return h('div', { className: 'vsr-s1__rows', 'data-system-one-part': 'rows' },
|
|
363
458
|
hidden > 0 ? h('button', { type: 'button', className: 'vsr-s1__more', 'data-system-one-part': 'more', onClick: () => setAll(true) }, `Show ${plural(hidden, `earlier ${reflex === 'guard' ? 'call' : 'result'}`)}`) : null,
|
|
364
|
-
rows.slice(hidden).map((row, index) => h(Row, { key: idOf(row), row, view: views[hidden + index], single: rows.length === 1 })))
|
|
459
|
+
rows.slice(hidden).map((row, index) => h(Row, { key: idOf(row), row, view: views[hidden + index], single: rows.length === 1, index })))
|
|
365
460
|
}
|
|
366
461
|
|
|
367
462
|
const whole = value => (Number.isSafeInteger(value) ? String(value) : undefined)
|
|
368
463
|
|
|
464
|
+
// how many spans a span model marked in an element's decisions
|
|
465
|
+
function spanCount(state) {
|
|
466
|
+
const n = state.rows.reduce((sum, row) => sum + (num(row.removedSpans) ?? 0) + (num(row.masked) ?? 0) + (num(row.unsupported) ?? 0) + (Array.isArray(row.danger) ? row.danger.length : 0), 0)
|
|
467
|
+
return n ? String(n) : undefined
|
|
468
|
+
}
|
|
469
|
+
|
|
369
470
|
// a public contract (README.md, "Selectors"); React leaves out an attribute whose value is undefined
|
|
370
471
|
function attributes(kind, state, worst) {
|
|
371
472
|
return {
|
|
@@ -379,6 +480,8 @@ window.__ModuleLoader__.load({
|
|
|
379
480
|
'data-system-one-turn': whole(state.rows[0].turn),
|
|
380
481
|
'data-system-one-step': state.reflex === 'guard' || state.reflex === 'shield' ? whole(state.rows[0].step) : undefined,
|
|
381
482
|
'data-system-one-model': fullModel(state.rows[state.rows.length - 1].model) || undefined,
|
|
483
|
+
'data-system-one-span-model': fullModel(state.rows.find(row => row.spanModel)?.spanModel) || undefined,
|
|
484
|
+
'data-system-one-spans': spanCount(state) || undefined,
|
|
382
485
|
}
|
|
383
486
|
}
|
|
384
487
|
|
|
@@ -400,7 +503,7 @@ window.__ModuleLoader__.load({
|
|
|
400
503
|
h(Badge, { key: idOf(last), id: idOf(last), ms: last.ms, time: last.time }),
|
|
401
504
|
h('span', { className: 'vsr-s1__reflex', 'data-system-one-part': 'reflex' }, reflex),
|
|
402
505
|
h('span', { className: 'vsr-s1__summary', 'data-system-one-part': 'summary', title: headline }, headline),
|
|
403
|
-
h(Model, { model: last.model })),
|
|
506
|
+
h(Model, { model: last.model, also: state.rows.find(row => row.spanModel)?.spanModel })),
|
|
404
507
|
h(Rows, { reflex: state.reflex, rows: state.rows, views }))
|
|
405
508
|
}
|
|
406
509
|
|
|
@@ -418,20 +521,23 @@ window.__ModuleLoader__.load({
|
|
|
418
521
|
const reflex = REFLEX[state.reflex] ?? state.reflex
|
|
419
522
|
const line = views.length === 1 ? compactLine(views[0]) : { label: headlineOf(state.reflex, views), tone: undefined, rest: '' }
|
|
420
523
|
const said = line.rest ? `${line.label} · ${line.rest}` : line.label
|
|
524
|
+
const deciding = views.some(view => view.pending)
|
|
421
525
|
return h('div', {
|
|
422
|
-
className: cx('vsr-s1', 'vsr-s1--compact', `vsr-s1--${worst.tone}`, open && 'vsr-s1--open', fresh && 'vsr-s1--fresh'),
|
|
526
|
+
className: cx('vsr-s1', 'vsr-s1--compact', `vsr-s1--${worst.tone}`, open && 'vsr-s1--open', fresh && 'vsr-s1--fresh', deciding && 'vsr-s1--deciding'),
|
|
423
527
|
role: 'group',
|
|
424
528
|
'aria-label': `System One ${reflex}: ${said}`,
|
|
425
|
-
|
|
529
|
+
'aria-busy': deciding || undefined,
|
|
530
|
+
...attributes('compact', state, deciding ? views.find(view => view.pending) : worst),
|
|
426
531
|
},
|
|
427
532
|
h('button', { type: 'button', className: 'vsr-s1__chip', 'data-system-one-part': 'toggle', 'aria-expanded': open, onClick: () => setOpen(!open) },
|
|
428
|
-
h(Badge, { key: idOf(last), id: idOf(last), ms: last.ms, time: last.time }),
|
|
533
|
+
h(Badge, { key: idOf(last), id: idOf(last), ms: deciding ? undefined : last.ms, time: last.time }),
|
|
429
534
|
h('span', { className: 'vsr-s1__reflex', 'data-system-one-part': 'reflex' }, reflex),
|
|
430
|
-
h('span', { className: 'vsr-s1__summary', 'data-system-one-part': 'summary', title: said },
|
|
535
|
+
h('span', { className: cx('vsr-s1__summary', deciding && 'vsr-s1__shimmer'), 'data-system-one-part': 'summary', title: said },
|
|
431
536
|
h('span', { className: cx('vsr-s1__verdict', line.tone && `vsr-s1__verdict--${line.tone}`), 'data-system-one-part': 'verdict' }, line.label),
|
|
432
537
|
line.rest ? ` · ${line.rest}` : null),
|
|
433
|
-
open ? h(Model, { model: last.model }) : null,
|
|
538
|
+
open && !deciding ? h(Model, { model: last.model, also: state.rows.find(row => row.spanModel)?.spanModel }) : null,
|
|
434
539
|
h(Chevron)),
|
|
540
|
+
deciding ? h('span', { className: 'vsr-s1__progress', 'data-system-one-part': 'progress', 'aria-hidden': true }) : null,
|
|
435
541
|
open ? h(Rows, { reflex: state.reflex, rows: state.rows, views }) : null)
|
|
436
542
|
}
|
|
437
543
|
|
|
@@ -532,7 +638,7 @@ window.__ModuleLoader__.load({
|
|
|
532
638
|
}
|
|
533
639
|
}
|
|
534
640
|
if (summary?.type === 'noul') {
|
|
535
|
-
return { parts: [{ label: 'yes', n: summary.yes ?? 0, color: '#
|
|
641
|
+
return { parts: [{ label: 'yes', n: summary.yes ?? 0, color: '#30A2FF' }, { label: 'no', n: summary.no ?? 0, color: 'var(--vsr-s1-track)' }] }
|
|
536
642
|
}
|
|
537
643
|
if (summary?.type === 'score') {
|
|
538
644
|
const levels = Object.entries(summary.levels ?? {})
|
|
@@ -578,11 +684,12 @@ window.__ModuleLoader__.load({
|
|
|
578
684
|
|
|
579
685
|
if (phase !== 'result') {
|
|
580
686
|
const line = phase === 'preparing' ? 'Preparing a batch' : `Answering ${plural(asked, 'question')}${source ? ` over ${source}` : ''}`
|
|
581
|
-
return h('div', { className: 'vsr-s1 vsr-s1--compact vsr-s1--running', 'data-system-one': 'tool', ...common, 'data-system-one-verdict': 'running', 'data-system-one-tone': 'info' },
|
|
687
|
+
return h('div', { className: 'vsr-s1 vsr-s1--compact vsr-s1--running vsr-s1--deciding', 'aria-busy': true, 'data-system-one': 'tool', ...common, 'data-system-one-verdict': 'running', 'data-system-one-tone': 'info' },
|
|
582
688
|
h('div', { className: 'vsr-s1__chip vsr-s1__chip--static' },
|
|
583
689
|
h(Badge, { id: `${callId}:running`, time: Date.now() }),
|
|
584
690
|
h('span', { className: 'vsr-s1__reflex', 'data-system-one-part': 'reflex' }, REFLEX.tool),
|
|
585
|
-
h('span', { className: 'vsr-s1__summary vsr-s1__shimmer', 'data-system-one-part': 'summary' }, line))
|
|
691
|
+
h('span', { className: 'vsr-s1__summary vsr-s1__shimmer', 'data-system-one-part': 'summary' }, line)),
|
|
692
|
+
h('span', { className: 'vsr-s1__progress', 'data-system-one-part': 'progress', 'aria-hidden': true }))
|
|
586
693
|
}
|
|
587
694
|
|
|
588
695
|
if (block?.isError || !meta || ui === 'off') {
|
|
@@ -635,31 +742,33 @@ window.__ModuleLoader__.load({
|
|
|
635
742
|
return h(Contained, null, h(ToolRow, props))
|
|
636
743
|
}
|
|
637
744
|
|
|
638
|
-
// ---- styles: the Web UI's theme tokens, with
|
|
745
|
+
// ---- styles: the Web UI's theme tokens, with the blue of the vLLM logo (#30A2FF) for System One ----
|
|
639
746
|
|
|
640
747
|
const CSS = `
|
|
641
|
-
.vsr-s1{--vsr-s1-
|
|
748
|
+
.vsr-s1{--vsr-s1-blue:#30A2FF;--vsr-s1-blue-soft:#7CC4FF;--vsr-s1-blue-deep:#1E7FE0;--vsr-s1-ink:#166BC9;--vsr-s1-badge-a:#2290F0;--vsr-s1-badge-b:#135CB8;--vsr-s1-tint:6%;--vsr-s1-tint-2:1.5%;--vsr-s1-edge:24%;--vsr-s1-lift:rgba(16,42,84,.05);--vsr-s1-ok:var(--dsw-alias-state-success-primary,#1F9D5B);--vsr-s1-warn:var(--dsw-alias-state-warn-primary,#E8A100);--vsr-s1-bad:var(--dsw-alias-state-error-primary,#E5484D);--vsr-s1-text:var(--dsw-alias-label-primary,#1F2329);--vsr-s1-text-2:var(--dsw-alias-label-secondary,#545961);--vsr-s1-text-3:var(--dsw-alias-label-tertiary,#8A8F98);--vsr-s1-line:var(--dsw-alias-border-l2,rgba(127,127,127,.22));--vsr-s1-track:color-mix(in srgb,var(--vsr-s1-text-3) 26%,transparent);--vsr-s1-mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;--vsr-s1-ease:cubic-bezier(.22,1,.36,1);position:relative;box-sizing:border-box;width:100%;margin:6px 0;color:var(--vsr-s1-text);font-size:13.5px;line-height:1.45;text-align:left}
|
|
749
|
+
body[data-ds-dark-theme] .vsr-s1{--vsr-s1-blue-soft:#4DB0FF;--vsr-s1-ink:#6BBEFF;--vsr-s1-badge-a:#2A98F5;--vsr-s1-badge-b:#1667C9;--vsr-s1-tint:9%;--vsr-s1-tint-2:3%;--vsr-s1-edge:32%;--vsr-s1-lift:rgba(0,0,0,.28)}
|
|
642
750
|
.vsr-s1 *{box-sizing:border-box}
|
|
643
|
-
.vsr-s1--card{padding:11px 14px 12px 17px;border:1px solid color-mix(in srgb,var(--vsr-s1-
|
|
644
|
-
.vsr-s1--card.vsr-s1--bad{
|
|
645
|
-
.vsr-s1--card.vsr-s1--warn{
|
|
751
|
+
.vsr-s1--card{--vsr-s1-tone:var(--vsr-s1-blue);padding:11px 14px 12px 17px;border:1px solid color-mix(in srgb,var(--vsr-s1-tone) var(--vsr-s1-edge),var(--vsr-s1-line));border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--vsr-s1-tone) var(--vsr-s1-tint),transparent),color-mix(in srgb,var(--vsr-s1-tone) var(--vsr-s1-tint-2),transparent));box-shadow:0 1px 2px var(--vsr-s1-lift),0 10px 24px -16px color-mix(in srgb,var(--vsr-s1-tone) 55%,transparent)}
|
|
752
|
+
.vsr-s1--card.vsr-s1--bad{--vsr-s1-tone:var(--vsr-s1-bad);--vsr-s1-edge:44%}
|
|
753
|
+
.vsr-s1--card.vsr-s1--warn{--vsr-s1-tone:var(--vsr-s1-warn);--vsr-s1-edge:46%}
|
|
646
754
|
.vsr-s1__sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
|
|
647
|
-
.vsr-s1__sheen::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--vsr-s1-
|
|
755
|
+
.vsr-s1__sheen::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--vsr-s1-blue-soft),var(--vsr-s1-blue) 45%,var(--vsr-s1-blue-deep));transform-origin:top center}
|
|
648
756
|
.vsr-s1--bad>.vsr-s1__sheen::before{background:var(--vsr-s1-bad)}
|
|
649
757
|
.vsr-s1--warn>.vsr-s1__sheen::before{background:var(--vsr-s1-warn)}
|
|
650
758
|
.vsr-s1__head{position:relative;display:flex;align-items:center;gap:9px;min-width:0}
|
|
651
|
-
.vsr-s1__badge{position:relative;display:inline-flex;flex:none;align-items:center;gap:6px;height:22px;padding:0 9px 0 8px;border-radius:999px;color:#fff;font-size:12px;font-weight:650;letter-spacing:-.005em;white-space:nowrap;background:linear-gradient(
|
|
652
|
-
.vsr-s1__dot{flex:none;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0
|
|
653
|
-
.vsr-s1__ms{padding-left:7px;border-left:1px solid rgba(255,255,255,.
|
|
759
|
+
.vsr-s1__badge{position:relative;display:inline-flex;flex:none;align-items:center;gap:6px;height:22px;padding:0 9px 0 8px;border-radius:999px;color:#fff;font-size:12px;font-weight:650;letter-spacing:-.005em;white-space:nowrap;background:linear-gradient(135deg,var(--vsr-s1-badge-a),var(--vsr-s1-badge-b));box-shadow:0 1px 2px color-mix(in srgb,var(--vsr-s1-badge-b) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 .5px rgba(255,255,255,.14)}
|
|
760
|
+
.vsr-s1__dot{flex:none;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
|
|
761
|
+
.vsr-s1__ms{padding-left:7px;border-left:1px solid rgba(255,255,255,.42);font-weight:750;font-variant-numeric:tabular-nums}
|
|
654
762
|
.vsr-s1__reflex{flex:none;font-weight:650;color:var(--vsr-s1-text);white-space:nowrap}
|
|
655
763
|
.vsr-s1__summary{flex:1;min-width:0;overflow:hidden;color:var(--vsr-s1-text-2);white-space:nowrap;text-overflow:ellipsis}
|
|
656
764
|
.vsr-s1__summary--bad{color:var(--vsr-s1-bad)}
|
|
657
765
|
.vsr-s1__verdict{font-weight:600;color:var(--vsr-s1-text)}
|
|
658
|
-
.vsr-s1__verdict--ok{color:var(--vsr-s1-ok)}.vsr-s1__verdict--warn{color:color-mix(in srgb,var(--vsr-s1-warn) 82%,var(--vsr-s1-text))}.vsr-s1__verdict--bad{color:var(--vsr-s1-bad)}.vsr-s1__verdict--info{color:var(--vsr-s1-
|
|
766
|
+
.vsr-s1__verdict--ok{color:var(--vsr-s1-ok)}.vsr-s1__verdict--warn{color:color-mix(in srgb,var(--vsr-s1-warn) 82%,var(--vsr-s1-text))}.vsr-s1__verdict--bad{color:var(--vsr-s1-bad)}.vsr-s1__verdict--info{color:var(--vsr-s1-ink)}.vsr-s1__verdict--muted{color:var(--vsr-s1-text-3)}
|
|
659
767
|
.vsr-s1__model{flex:none;color:var(--vsr-s1-text-2);font-size:12px;font-weight:700;letter-spacing:-.005em;white-space:nowrap}
|
|
660
768
|
.vsr-s1--notice{display:flex;align-items:center;gap:9px;min-width:0;margin:4px 0;padding:3px 0}
|
|
661
769
|
.vsr-s1--notice .vsr-s1__summary{white-space:normal}
|
|
662
|
-
.vsr-s1__duo{position:relative;display:inline-flex;flex:none;align-items:center;gap:5px;height:22px;padding:0 9px 0 8px;border-radius:999px;color:#fff;font-size:12px;font-weight:650;white-space:nowrap;background:linear-gradient(110deg,var(--vsr-s1-
|
|
770
|
+
.vsr-s1__duo{position:relative;display:inline-flex;flex:none;align-items:center;gap:5px;height:22px;padding:0 9px 0 8px;border-radius:999px;color:#fff;font-size:12px;font-weight:650;white-space:nowrap;background:linear-gradient(110deg,var(--vsr-s1-badge-b) 0%,var(--vsr-s1-badge-a) 55%,var(--vsr-s1-blue) 100%);box-shadow:0 1px 2px color-mix(in srgb,var(--vsr-s1-badge-b) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.26)}
|
|
771
|
+
.vsr-s1__duo .vsr-s1__glyph{color:#FFD56B}
|
|
663
772
|
.vsr-s1__glyph{flex:none}
|
|
664
773
|
.vsr-s1__links{display:inline-flex;flex:none;gap:10px}
|
|
665
774
|
a.vsr-s1__link{text-decoration:none}
|
|
@@ -667,10 +776,10 @@ a.vsr-s1__link{text-decoration:none}
|
|
|
667
776
|
.vsr-s1__rows>*{grid-column:1/-1}
|
|
668
777
|
.vsr-s1__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-columns:subgrid;column-gap:12px;align-items:start}
|
|
669
778
|
.vsr-s1__verdicts{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:92px}
|
|
670
|
-
.vsr-s1__pill{--tone:var(--vsr-s1-text-3);display:inline-flex;align-items:center;gap:6px;padding:1px 8px 1px 7px;border-radius:6px;color:var(--tone);background:color-mix(in srgb,var(--tone)
|
|
779
|
+
.vsr-s1__pill{--tone:var(--vsr-s1-text-3);display:inline-flex;align-items:center;gap:6px;padding:1px 8px 1px 7px;border-radius:6px;color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--tone) 22%,transparent);font-size:12px;font-weight:650;line-height:20px;white-space:nowrap}
|
|
671
780
|
.vsr-s1__pill::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
|
|
672
781
|
.vsr-s1__pill--then::before{width:auto;height:auto;border-radius:0;background:none;content:"\\21B3"}
|
|
673
|
-
.vsr-s1__pill--ok{--tone:var(--vsr-s1-ok)}.vsr-s1__pill--warn{--tone:color-mix(in srgb,var(--vsr-s1-warn) 82%,var(--vsr-s1-text))}.vsr-s1__pill--bad{--tone:var(--vsr-s1-bad)}.vsr-s1__pill--info{--tone:var(--vsr-s1-
|
|
782
|
+
.vsr-s1__pill--ok{--tone:var(--vsr-s1-ok)}.vsr-s1__pill--warn{--tone:color-mix(in srgb,var(--vsr-s1-warn) 82%,var(--vsr-s1-text))}.vsr-s1__pill--bad{--tone:var(--vsr-s1-bad)}.vsr-s1__pill--info{--tone:var(--vsr-s1-ink)}.vsr-s1__pill--muted{--tone:var(--vsr-s1-text-3)}
|
|
674
783
|
.vsr-s1__main{display:grid;gap:3px;min-width:0}
|
|
675
784
|
.vsr-s1__subject{display:flex;align-items:baseline;gap:7px;min-width:0;line-height:22px}
|
|
676
785
|
.vsr-s1__tool{flex:none;color:var(--vsr-s1-text-2);font-weight:600}
|
|
@@ -679,18 +788,31 @@ a.vsr-s1__link{text-decoration:none}
|
|
|
679
788
|
.vsr-s1__fact{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
|
|
680
789
|
.vsr-s1__fact b{color:var(--vsr-s1-text);font-weight:600;font-variant-numeric:tabular-nums}
|
|
681
790
|
.vsr-s1__bar{position:relative;width:34px;height:4px;border-radius:2px;overflow:hidden;background:var(--vsr-s1-track)}
|
|
682
|
-
.vsr-s1__bar>i{position:absolute;inset:0;border-radius:inherit;background:
|
|
791
|
+
.vsr-s1__bar>i{position:absolute;inset:0;border-radius:inherit;background:var(--vsr-s1-blue);transform-origin:left center;transform:scaleX(var(--p))}
|
|
683
792
|
.vsr-s1__bar--ok>i{background:var(--vsr-s1-ok)}.vsr-s1__bar--warn>i{background:var(--vsr-s1-warn)}.vsr-s1__bar--bad>i{background:var(--vsr-s1-bad)}
|
|
684
793
|
.vsr-s1__note{color:var(--vsr-s1-text-2);font-size:12.5px}
|
|
794
|
+
.vsr-s1__span{padding:0 3px;border-radius:4px;color:inherit;background:none;font:inherit}
|
|
795
|
+
.vsr-s1__span--removed{color:var(--vsr-s1-bad);background:color-mix(in srgb,var(--vsr-s1-bad) 14%,transparent);text-decoration:line-through;text-decoration-thickness:1.5px}
|
|
796
|
+
.vsr-s1__span--dangerous{color:var(--vsr-s1-bad);background:color-mix(in srgb,var(--vsr-s1-bad) 16%,transparent);box-shadow:inset 0 -2px 0 var(--vsr-s1-bad);font-weight:650}
|
|
797
|
+
.vsr-s1__span--unsupported{background:color-mix(in srgb,var(--vsr-s1-warn) 22%,transparent);text-decoration:underline wavy color-mix(in srgb,var(--vsr-s1-warn) 85%,var(--vsr-s1-text));text-decoration-thickness:1.5px;text-underline-offset:3px}
|
|
798
|
+
.vsr-s1__span--masked{display:inline-block;padding:0 6px;color:var(--dsw-alias-bg-layer-1,#fff);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--vsr-s1-text) 80%,transparent) 0 6px,color-mix(in srgb,var(--vsr-s1-text) 66%,transparent) 6px 12px);font-family:var(--vsr-s1-mono);font-size:11px;font-weight:650;letter-spacing:.02em;line-height:17px}
|
|
799
|
+
.vsr-s1__excerpts{display:grid;gap:5px;margin:3px 0 1px}
|
|
800
|
+
.vsr-s1__excerpt{padding:6px 9px;border-left:2px solid color-mix(in srgb,var(--vsr-s1-blue) 50%,transparent);border-radius:0 6px 6px 0;color:var(--vsr-s1-text-2);background:color-mix(in srgb,var(--vsr-s1-text-3) 8%,transparent);font-family:var(--vsr-s1-mono);font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
|
|
801
|
+
.vsr-s1--bad .vsr-s1__excerpt{border-left-color:color-mix(in srgb,var(--vsr-s1-bad) 55%,transparent)}
|
|
802
|
+
.vsr-s1--warn .vsr-s1__excerpt{border-left-color:color-mix(in srgb,var(--vsr-s1-warn) 60%,transparent)}
|
|
803
|
+
.vsr-s1__labels{display:flex;flex-wrap:wrap;gap:4px 6px}
|
|
804
|
+
.vsr-s1__label{display:inline-flex;align-items:center;gap:5px;padding:0 7px;border-radius:5px;color:var(--vsr-s1-text-2);background:color-mix(in srgb,var(--vsr-s1-blue) 10%,transparent);font-family:var(--vsr-s1-mono);font-size:11.5px;line-height:20px}
|
|
805
|
+
.vsr-s1__label b{color:var(--vsr-s1-text);font-weight:650}
|
|
685
806
|
.vsr-s1__rowms{color:var(--vsr-s1-text-3);font-size:12px;line-height:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
|
|
686
807
|
.vsr-s1__more,.vsr-s1__link{justify-self:start;padding:0;border:0;background:none;color:var(--dsw-alias-link,#2F7BF6);font:inherit;font-size:12.5px;cursor:pointer}
|
|
687
808
|
.vsr-s1__more:hover,.vsr-s1__link:hover{text-decoration:underline}
|
|
688
809
|
.vsr-s1--compact{margin:4px 0}
|
|
689
810
|
.vsr-s1__chip{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:3px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
|
|
690
811
|
.vsr-s1__chip--static{cursor:default}
|
|
691
|
-
.vsr-s1__chev{flex:none;color:var(--vsr-s1-text-3);transition:transform .
|
|
812
|
+
.vsr-s1__chev{flex:none;color:var(--vsr-s1-text-3);transition:transform .2s var(--vsr-s1-ease),color .2s ease}
|
|
813
|
+
.vsr-s1__chip:hover .vsr-s1__chev{color:var(--vsr-s1-text-2)}
|
|
692
814
|
.vsr-s1--open .vsr-s1__chev{transform:rotate(90deg)}
|
|
693
|
-
.vsr-s1--compact>.vsr-s1__rows{margin:4px 0 8px 3px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--vsr-s1-
|
|
815
|
+
.vsr-s1--compact>.vsr-s1__rows{margin:4px 0 8px 3px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--vsr-s1-blue) 40%,transparent)}
|
|
694
816
|
.vsr-s1--plain .vsr-s1__reflex{color:var(--vsr-s1-text-2)}
|
|
695
817
|
.vsr-s1__raw{margin:4px 0 8px;padding:8px 10px;max-height:320px;overflow:auto;border-radius:8px;background:color-mix(in srgb,var(--vsr-s1-text-3) 10%,transparent);font-family:var(--vsr-s1-mono);font-size:12px;white-space:pre-wrap}
|
|
696
818
|
.vsr-s1__q{display:grid;grid-template-columns:minmax(80px,140px) minmax(0,1fr);column-gap:14px;align-items:start}
|
|
@@ -706,27 +828,30 @@ a.vsr-s1__link{text-decoration:none}
|
|
|
706
828
|
.vsr-s1__swatch{flex:none;width:8px;height:8px;margin-right:6px;border-radius:2px}
|
|
707
829
|
.vsr-s1__foot{color:var(--vsr-s1-text-3);font-size:12.5px}
|
|
708
830
|
.vsr-s1__foot code{font-family:var(--vsr-s1-mono)}
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
@keyframes vsr-s1-
|
|
714
|
-
@keyframes vsr-s1-
|
|
831
|
+
.vsr-s1__progress{position:relative;display:block;height:2px;margin:0 0 4px 1px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--vsr-s1-blue) 12%,transparent)}
|
|
832
|
+
.vsr-s1__progress::before{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--vsr-s1-blue) 55%,transparent)}
|
|
833
|
+
.vsr-s1--deciding .vsr-s1__badge::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);background-size:220% 100%;pointer-events:none}
|
|
834
|
+
.vsr-s1__shimmer{background:linear-gradient(90deg,var(--vsr-s1-text-2) 35%,var(--vsr-s1-blue) 50%,var(--vsr-s1-text-2) 65%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
|
|
835
|
+
@keyframes vsr-s1-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
|
|
836
|
+
@keyframes vsr-s1-rise{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
|
|
837
|
+
@keyframes vsr-s1-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
|
|
715
838
|
@keyframes vsr-s1-fill{from{transform:scaleX(0)}}
|
|
716
839
|
@keyframes vsr-s1-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
|
|
717
|
-
@keyframes vsr-s1-
|
|
718
|
-
@keyframes vsr-s1-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
.vsr-s1--fresh
|
|
722
|
-
.vsr-
|
|
723
|
-
.vsr-
|
|
724
|
-
.vsr-s1__row--fresh{animation:vsr-s1-
|
|
725
|
-
.vsr-s1__row--fresh .vsr-
|
|
726
|
-
.vsr-s1__stack--fresh>i{animation:vsr-s1-grow .6s
|
|
727
|
-
.vsr-s1--
|
|
728
|
-
.vsr-
|
|
729
|
-
|
|
840
|
+
@keyframes vsr-s1-ink{from{background-color:transparent;box-shadow:none}}
|
|
841
|
+
@keyframes vsr-s1-breathe{0%,100%{opacity:1}50%{opacity:.4}}
|
|
842
|
+
@keyframes vsr-s1-shimmer{from{background-position:130% 0}to{background-position:-30% 0}}
|
|
843
|
+
@keyframes vsr-s1-scan{from{transform:translateX(-100%)}to{transform:translateX(280%)}}
|
|
844
|
+
.vsr-s1--fresh{animation:vsr-s1-reveal .22s var(--vsr-s1-ease) both}
|
|
845
|
+
.vsr-s1--fresh>.vsr-s1__sheen::before{animation:vsr-s1-draw .42s var(--vsr-s1-ease) .06s both}
|
|
846
|
+
.vsr-s1__row--fresh{animation:vsr-s1-rise .24s var(--vsr-s1-ease) both;animation-delay:calc(60ms + var(--vsr-s1-i,0) * 45ms)}
|
|
847
|
+
.vsr-s1__row--fresh .vsr-s1__bar>i{animation:vsr-s1-fill .6s var(--vsr-s1-ease) .16s both}
|
|
848
|
+
.vsr-s1__row--fresh .vsr-s1__span{animation:vsr-s1-ink .5s ease-out .26s both}
|
|
849
|
+
.vsr-s1__stack--fresh>i{animation:vsr-s1-grow .6s var(--vsr-s1-ease) both}
|
|
850
|
+
.vsr-s1--deciding .vsr-s1__dot{animation:vsr-s1-breathe 1.4s ease-in-out infinite}
|
|
851
|
+
.vsr-s1--deciding .vsr-s1__badge::after{animation:vsr-s1-shimmer 1.8s linear infinite}
|
|
852
|
+
.vsr-s1__progress::before{animation:vsr-s1-scan 1.6s cubic-bezier(.45,0,.55,1) infinite}
|
|
853
|
+
.vsr-s1__shimmer{animation:vsr-s1-shimmer 2s linear infinite}
|
|
854
|
+
@media (prefers-reduced-motion:reduce){.vsr-s1,.vsr-s1 *,.vsr-s1 *::before,.vsr-s1 *::after{animation:none!important;transition:none!important}.vsr-s1__shimmer{color:var(--vsr-s1-text-2);background:none}.vsr-s1--deciding .vsr-s1__badge::after{display:none}.vsr-s1__progress::before{width:100%;opacity:.45;background:var(--vsr-s1-blue)}}
|
|
730
855
|
`
|
|
731
856
|
if (typeof document !== 'undefined') {
|
|
732
857
|
const tagId = `${PACKAGE}/system-one.css`
|