@mingozhou/dsh-replay 0.4.1 → 0.4.2

package/src/client/pricing.ts

@@ -0,0 +1,90 @@
+/**
+ * User-editable pricing overrides. Persisted in localStorage; the default
+ * table still lives in core/cost.ts so the demo and CLI tools work without UI.
+ */
+import React from 'react'
+import { DEFAULT_PRICING, type PricingEntry, type PricingRate } from '../core/cost.js'
+
+const KEY = 'dshr-pricing-overrides'
+
+type Overrides = Record<string, PricingRate>
+
+function read(): Overrides {
+  try {
+    const raw = globalThis.localStorage?.getItem(KEY)
+    if (raw === null || raw === undefined) return {}
+    const parsed = JSON.parse(raw) as unknown
+    if (typeof parsed !== 'object' || parsed === null) return {}
+    const out: Overrides = {}
+    for (const [label, value] of Object.entries(parsed)) {
+      if (typeof value !== 'object' || value === null) continue
+      const rate = value as Record<string, unknown>
+      if (
+        typeof rate['input'] === 'number' &&
+        typeof rate['cacheRead'] === 'number' &&
+        typeof rate['output'] === 'number'
+      ) {
+        out[label] = {
+          input: rate['input'],
+          cacheRead: rate['cacheRead'],
+          output: rate['output'],
+          ...(typeof rate['cacheWrite'] === 'number' ? { cacheWrite: rate['cacheWrite'] } : {}),
+        }
+      }
+    }
+    return out
+  } catch {
+    return {}
+  }
+}
+
+let overrides: Overrides = read()
+let cached: PricingEntry[] = build(overrides)
+const listeners = new Set<() => void>()
+
+function build(source: Overrides): PricingEntry[] {
+  return DEFAULT_PRICING.map(entry =>
+    source[entry.label] === undefined
+      ? entry
+      : { ...entry, rate: source[entry.label], source: 'user override' },
+  )
+}
+
+function snapshot(): PricingEntry[] {
+  return cached
+}
+
+export function getPricing(): PricingEntry[] {
+  return cached
+}
+
+export function setRate(label: string, rate: PricingRate): void {
+  overrides = { ...overrides, [label]: rate }
+  cached = build(overrides)
+  try {
+    globalThis.localStorage?.setItem(KEY, JSON.stringify(overrides))
+  } catch {
+    /* best effort */
+  }
+  for (const listener of listeners) listener()
+}
+
+export function resetPricing(): void {
+  overrides = {}
+  cached = build(overrides)
+  try {
+    globalThis.localStorage?.removeItem(KEY)
+  } catch {
+    /* best effort */
+  }
+  for (const listener of listeners) listener()
+}
+
+export function subscribePricing(listener: () => void): () => void {
+  listeners.add(listener)
+  return () => listeners.delete(listener)
+}
+
+export function usePricing(): PricingEntry[] {
+  return React.useSyncExternalStore(subscribePricing, snapshot, snapshot)
+}

package/src/client/styles.css

@@ -53,7 +53,9 @@ body[data-ds-dark-theme] .dshr-root,
 .dshr-root *::before,
 .dshr-root *::after { box-sizing: border-box; }
 
-.dshr-root button {
+/* Keep the button reset weak enough that component classes can style a button.
+   The previous `.dshr-root button` selector beat `.dshr-btn` / card classes. */
+.dshr-root :where(button) {
   font: inherit;
   color: inherit;
   background: none;
@@ -717,3 +719,250 @@ body[data-ds-dark-theme] .dshr-root,
   margin-bottom: 8px;
 }
 .dshr-root .dshr-picker-row:hover { border-color: var(--dshr-accent); }
+
+/* ---- 0.4.2: archive dashboard, cost editor, export dialog, audit ---- */
+.dshr-header-sub {
+  color: var(--dshr-ink-3);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.dshr-header-session {
+  max-width: 48vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dshr-live-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--dshr-good);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dshr-good) 18%, transparent);
+  flex: none;
+}
+.dshr-live-pill {
+  font-size: 10px;
+  padding: 0 7px;
+  border-radius: 999px;
+  color: #fff;
+  background: var(--dshr-good);
+  letter-spacing: 0.02em;
+}
+.dshr-error-state .dshr-btn { margin-top: 8px; }
+
+.dshr-dashboard {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 18px 20px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.dshr-dash-head { display: flex; align-items: flex-end; gap: 12px; }
+.dshr-dash-subtitle { font-size: 15px; font-weight: 600; }
+.dshr-dash-scanned { margin-top: 2px; color: var(--dshr-ink-3); font-size: 11px; }
+.dshr-dash-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 10px;
+}
+.dshr-dash-card {
+  text-align: left;
+  padding: 14px 16px;
+  border: 1px solid var(--dshr-border);
+  border-radius: 12px;
+  background: var(--dshr-bg-1);
+  min-width: 0;
+}
+.dshr-dash-card-action { cursor: pointer; }
+.dshr-dash-card-action:hover { border-color: var(--dshr-accent); }
+.dshr-dash-risk { border-color: color-mix(in srgb, var(--dshr-critical) 45%, var(--dshr-border)); }
+.dshr-dash-value {
+  font-size: 26px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dshr-dash-label { margin-top: 2px; color: var(--dshr-ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
+.dshr-dash-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.dshr-dash-search { width: min(320px, 46vw); }
+.dshr-dash-count { color: var(--dshr-ink-3); font-size: 11px; }
+.dshr-dash-list { display: flex; flex-direction: column; gap: 6px; }
+.dshr-dash-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border: 1px solid var(--dshr-border);
+  border-radius: 10px;
+  background: var(--dshr-bg-1);
+}
+.dshr-dash-row:hover { border-color: var(--dshr-accent); background: var(--dshr-bg-2); }
+.dshr-dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.dshr-dash-title { display: flex; align-items: center; gap: 7px; font-weight: 550; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dshr-dash-sub { color: var(--dshr-ink-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dshr-dash-metrics { display: flex; align-items: center; gap: 10px; flex: none; color: var(--dshr-ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
+.dshr-dash-duration { color: var(--dshr-ink-3); min-width: 46px; text-align: right; }
+.dshr-dash-pending { color: var(--dshr-ink-3); }
+.dshr-risk-badge { color: var(--dshr-critical); font-weight: 600; }
+.dshr-ok-badge { color: var(--dshr-good); }
+.dshr-skeleton {
+  min-height: 64px;
+  border-radius: 10px;
+  background: linear-gradient(90deg, var(--dshr-bg-1), var(--dshr-bg-2), var(--dshr-bg-1));
+  background-size: 200% 100%;
+  animation: dshr-shimmer 1.3s ease-in-out infinite;
+}
+@keyframes dshr-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+.dshr-segmented {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--dshr-border);
+  border-radius: 999px;
+  background: var(--dshr-bg-1);
+}
+.dshr-segmented button {
+  font-size: 11px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  color: var(--dshr-ink-3);
+}
+.dshr-segmented button[data-active] { background: var(--dshr-bg); color: var(--dshr-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+
+.dshr-picker-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
+.dshr-picker-search { width: min(320px, 46vw); }
+.dshr-picker-count { color: var(--dshr-ink-3); font-size: 11px; }
+
+.dshr-cost-panel { display: flex; flex-direction: column; gap: 6px; }
+.dshr-cost-total { display: flex; align-items: baseline; gap: 12px; font-size: 13px; }
+.dshr-cost-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
+.dshr-cost-table { margin-top: 4px; max-width: 540px; }
+.dshr-cost-note { margin: 0; color: var(--dshr-ink-3); font-size: 11px; }
+.dshr-price-editor { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--dshr-border); }
+.dshr-price-table { max-width: 560px; }
+.dshr-price-table td:not(:first-child), .dshr-price-table th:not(:first-child) { text-align: right; }
+.dshr-price-input {
+  width: 78px;
+  font: inherit;
+  font-size: 12px;
+  text-align: right;
+  color: var(--dshr-ink);
+  background: var(--dshr-bg);
+  border: 1px solid var(--dshr-border);
+  border-radius: 6px;
+  padding: 3px 6px;
+}
+.dshr-price-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
+.dshr-btn {
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 5px 12px;
+  border-radius: 7px;
+  border: 1px solid var(--dshr-border);
+  background: var(--dshr-bg-1);
+  color: var(--dshr-ink);
+}
+.dshr-btn:hover { border-color: var(--dshr-accent); }
+.dshr-btn:disabled { opacity: 0.5; cursor: default; }
+.dshr-btn-primary { background: var(--dshr-accent); border-color: var(--dshr-accent); color: #fff; }
+.dshr-btn-primary:hover { filter: brightness(1.06); }
+
+.dshr-copy-btn {
+  margin-left: 8px;
+  font-size: 10px;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--dshr-ink-3);
+  border: 1px solid var(--dshr-border);
+  border-radius: 5px;
+  padding: 1px 6px;
+}
+.dshr-copy-btn:hover { color: var(--dshr-ink); border-color: var(--dshr-accent); }
+.dshr-reasoning {
+  margin: 0 0 10px;
+  border: 1px solid var(--dshr-border);
+  border-radius: 8px;
+  background: var(--dshr-bg-1);
+  padding: 7px 10px;
+}
+.dshr-reasoning summary { cursor: pointer; color: var(--dshr-ink-2); font-size: 11px; font-weight: 600; }
+.dshr-reasoning .dshr-pre { margin: 7px 0 0; border: 0; background: transparent; padding: 0; max-height: 34vh; }
+.dshr-item-thinking { flex: none; color: var(--dshr-accent); font-size: 10px; }
+.dshr-rail:focus-visible { outline: 2px solid var(--dshr-accent); outline-offset: -2px; }
+
+.dshr-audit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
+.dshr-audit-coverage { color: var(--dshr-ink-3); font-size: 11px; }
+.dshr-audit-note { margin: -4px 0 12px; color: var(--dshr-ink-3); font-size: 11px; line-height: 1.5; }
+.dshr-audit-tile { cursor: pointer; background: transparent; text-align: left; }
+.dshr-audit-tile[data-active] { border-color: var(--dshr-accent); box-shadow: 0 0 0 1px var(--dshr-accent); }
+.dshr-finding-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.dshr-category {
+  margin-left: 8px;
+  font-size: 9px;
+  padding: 0 6px;
+  border-radius: 999px;
+  color: var(--dshr-ink-3);
+  background: var(--dshr-bg-2);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.dshr-divergence-title { font-size: 12px; margin-bottom: 8px; }
+.dshr-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.dshr-diff-side .dshr-pre { max-height: 220px; }
+.dshr-diff-side .dshr-tab { margin-top: 2px; }
+
+.dshr-export-backdrop { z-index: 1100; }
+.dshr-export {
+  width: min(560px, 92vw);
+  height: auto;
+  max-height: 86vh;
+}
+.dshr-export-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; }
+.dshr-export-warning { margin: 0; color: var(--dshr-ink-2); font-size: 12px; line-height: 1.55; }
+.dshr-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
+.dshr-check input { margin-top: 2px; accent-color: var(--dshr-accent); }
+.dshr-export-meta { margin: 0; color: var(--dshr-ink-3); font-size: 11px; }
+.dshr-export-danger { margin: 0; color: var(--dshr-critical); font-size: 12px; }
+.dshr-export-note { margin: 0; color: var(--dshr-ink-3); font-size: 11px; line-height: 1.5; }
+.dshr-export-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
+
+/* contrast: 11px tertiary text needs a darker shade than #898781 on #fcfcfb */
+.dshr-root { --dshr-ink-3: var(--dsw-alias-label-tertiary, #6f6e69); }
+body[data-ds-dark-theme] .dshr-root,
+[data-theme='dark'] .dshr-root { --dshr-ink-3: var(--dsw-alias-label-tertiary, #a5a49e); }
+
+@media (max-width: 980px) {
+  .dshr-header { flex-wrap: wrap; row-gap: 4px; }
+  .dshr-header-session { display: none; }
+  .dshr-dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .dshr-dash-metrics { gap: 7px; }
+}
+@media (max-width: 760px) {
+  .dshr-modal { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
+  .dshr-modal-body { min-height: 0; }
+  .dshr-playbar { flex-wrap: wrap; row-gap: 6px; }
+  .dshr-scrub { order: 3; flex-basis: 100%; }
+  .dshr-clock { order: 4; }
+  .dshr-filter-input { width: 100%; order: 5; }
+  .dshr-kind-chips { order: 6; }
+  .dshr-timeline { flex-direction: column; }
+  .dshr-rail { width: 100%; max-width: none; min-width: 0; max-height: 44%; border-right: 0; border-bottom: 1px solid var(--dshr-border); }
+  .dshr-detail { flex: 1; }
+  .dshr-dash-cards { grid-template-columns: 1fr 1fr; }
+  .dshr-dash-row { align-items: flex-start; }
+  .dshr-dash-metrics { flex-wrap: wrap; justify-content: flex-end; max-width: 42%; }
+  .dshr-diff-grid { grid-template-columns: 1fr; }
+  .dshr-header-sub { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dshr-modal, .dshr-skeleton, .dshr-play-btn[data-playing='true'], .dshr-mascot-state .dshr-mascot { animation: none; }
+  .dshr-item, .dshr-bar-in, .dshr-bar-out, .dshr-hbar-fill { transition: none; }
+}

package/src/client/viewer-entry.tsx

@@ -24,7 +24,10 @@ function ViewerShell(): React.ReactElement {
     globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false,
   )
   return (
-    <div data-theme={dark ? 'dark' : 'light'} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <div
+      data-theme={dark ? 'dark' : 'light'}
+      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+    >
       <div
         style={{
           display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', fontSize: 13,
@@ -33,7 +36,7 @@ function ViewerShell(): React.ReactElement {
         }}
       >
         <strong>dsh-replay</strong>
-        <span style={{ opacity: 0.6 }}>exported session replay</span>
+        <span style={{ opacity: 0.6 }}>exported session review · read-only</span>
         <span style={{ flex: 1 }} />
         <a
           href="https://github.com/MingoZhou/dsh-replay"
@@ -44,7 +47,7 @@ function ViewerShell(): React.ReactElement {
           GitHub
         </a>
         <button
-          onClick={() => setDark(d => !d)}
+          onClick={() => setDark(value => !value)}
           style={{
             font: 'inherit', cursor: 'pointer', border: '1px solid ' + (dark ? '#2c2c2a' : '#e1e0d9'),
             borderRadius: 6, padding: '2px 9px', background: 'transparent', color: 'inherit',
@@ -54,7 +57,25 @@ function ViewerShell(): React.ReactElement {
         </button>
       </div>
       <div style={{ flex: 1, minHeight: 0 }}>
-        <ReplayApp api={api} sessionId={first} />
+        <ReplayApp api={api} sessionId={first} standalone />
+      </div>
+      <div
+        style={{
+          display: 'flex', alignItems: 'center', gap: 8, padding: '6px 14px', fontSize: 11,
+          borderTop: '1px solid ' + (dark ? '#2c2c2a' : '#e1e0d9'),
+          background: dark ? '#0d0d0d' : '#f9f9f7', color: dark ? '#c3c2b7' : '#6b6a66',
+        }}
+      >
+        <span>Exported with dsh-replay. Offline and read-only. If this saved you time, star the repo ★.</span>
+        <span style={{ flex: 1 }} />
+        <a
+          href="https://github.com/MingoZhou/dsh-replay"
+          target="_blank"
+          rel="noreferrer"
+          style={{ color: 'inherit' }}
+        >
+          Install · Star ★
+        </a>
       </div>
     </div>
   )