@crvouga/atlas 0.0.0-stage → 0.2.0

package/packages/visualizer/src/components/Screen.module.css

@@ -0,0 +1,312 @@
+.phone {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 390 / 844;
+  border-radius: 0.65rem;
+  overflow: hidden;
+  background: var(--bg-2);
+  display: block;
+}
+
+.phone[data-size='full'] {
+  border-radius: 1.4rem;
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-raised);
+}
+
+.phone[data-variant='sketch'] {
+  background:
+    radial-gradient(circle at 1px 1px, rgba(28, 36, 48, 0.08) 1px, transparent 0) 0 0 / 10px 10px,
+    linear-gradient(180deg, #f7fafb 0%, var(--bg) 100%);
+  border: 1px dashed var(--line-2);
+}
+
+.phone[data-size='full'][data-variant='sketch'] {
+  border-width: 1px;
+}
+
+.notch {
+  position: absolute;
+  top: 5px;
+  left: 50%;
+  width: 34%;
+  height: 7px;
+  transform: translateX(-50%);
+  border-radius: var(--pill);
+  background: rgba(28, 36, 48, 0.1);
+}
+
+.phone[data-size='full'] .notch {
+  top: 12px;
+  height: 16px;
+  width: 30%;
+}
+
+.sketch {
+  position: absolute;
+  inset: 18px 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  text-align: left;
+  overflow: hidden;
+}
+
+.phone[data-size='full'] .sketch {
+  inset: 44px 22px 22px;
+  gap: 12px;
+}
+
+.reason {
+  align-self: flex-start;
+  font-size: 7.5px;
+  font-weight: 400;
+  padding: 2px 6px;
+  border-radius: var(--pill);
+  background: var(--bg);
+  color: var(--ink-3);
+  border: 1px solid var(--line);
+}
+
+.reason[data-reason='not-reached'] {
+  color: var(--muted);
+  border-style: dashed;
+  border-color: var(--line-2);
+}
+
+.reason[data-reason='processing'] {
+  color: var(--time-ink);
+  border-color: var(--time-line);
+}
+
+.phone[data-size='full'] .reason {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.6rem;
+}
+
+.title {
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--ink);
+}
+
+.phone[data-size='full'] .title {
+  font-size: 1.15rem;
+}
+
+.missing {
+  font-size: 8px;
+  color: var(--ink-3);
+}
+
+.phone[data-size='full'] .missing {
+  font-size: 0.85rem;
+}
+
+.description {
+  font-size: 8px;
+  line-height: 1.35;
+  color: var(--ink-3);
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.phone[data-size='full'] .description {
+  font-size: 0.85rem;
+  -webkit-line-clamp: 8;
+}
+
+.lines {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.line {
+  display: grid;
+  grid-template-columns: 8px 1fr;
+  gap: 4px;
+  align-items: start;
+  font-size: 7px;
+  line-height: 1.3;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.75);
+  border-radius: 4px;
+  padding: 3px 4px;
+}
+
+.line > span:last-child {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.phone[data-size='full'] .line {
+  font-size: 0.75rem;
+  grid-template-columns: 0.75rem 1fr;
+  padding: 0.4rem 0.55rem;
+  gap: 0.45rem;
+}
+
+.tick {
+  margin-top: 2px;
+  width: 6px;
+  height: 6px;
+  border-radius: 2px;
+  border: 1.2px solid var(--user-line);
+}
+
+.phone[data-size='full'] .tick {
+  width: 0.7rem;
+  height: 0.7rem;
+}
+
+.bars {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.barWide,
+.barNarrow,
+.button {
+  display: block;
+  height: 5px;
+  border-radius: var(--pill);
+  background: rgba(28, 36, 48, 0.08);
+}
+
+.barNarrow {
+  width: 62%;
+}
+
+.card {
+  display: block;
+  height: 46px;
+  border-radius: 6px;
+  margin-bottom: 4px;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid var(--line);
+}
+
+.phone[data-size='full'] .card {
+  height: 7rem;
+  border-radius: 0.8rem;
+}
+
+.button {
+  height: 12px;
+  margin-top: 4px;
+  background: rgba(28, 36, 48, 0.12);
+}
+
+.phone[data-size='full'] .barWide,
+.phone[data-size='full'] .barNarrow {
+  height: 10px;
+}
+
+.phone[data-size='full'] .button {
+  height: 2.4rem;
+}
+
+.design {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.designTag {
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  bottom: 6px;
+  text-align: center;
+  font-size: 8px;
+  font-weight: 400;
+  padding: 3px 4px;
+  border-radius: var(--pill);
+  color: var(--ink-2);
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid var(--line);
+}
+
+.phone[data-size='full'] .designTag {
+  font-size: 0.75rem;
+  bottom: 14px;
+  left: 14px;
+  right: 14px;
+}
+
+.underlay {
+  position: absolute;
+  inset: 0;
+}
+
+.underlay > .phone {
+  height: 100%;
+}
+
+.skeleton {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(100deg, var(--bg-2) 30%, #e9eef5 50%, var(--bg-2) 70%) 0 0 / 300% 100%;
+  animation: shimmer 1.4s linear infinite;
+}
+
+@keyframes shimmer {
+  to {
+    background-position: -150% 0;
+  }
+}
+
+.img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+  display: block;
+  opacity: 0;
+  transition: opacity var(--fade) var(--ease);
+}
+
+.phone[data-state='loaded'] .img {
+  opacity: 1;
+}
+
+.failed {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px;
+  text-align: center;
+  font-size: 8.5px;
+  color: var(--muted);
+  background: var(--bg);
+}
+
+.phone[data-size='full'] .failed {
+  font-size: 0.85rem;
+}
+
+.retry {
+  font-size: inherit;
+  border: 1px solid var(--line);
+  background: var(--card);
+  color: var(--user);
+  border-radius: var(--pill);
+  padding: 2px 8px;
+  cursor: pointer;
+}

package/packages/visualizer/src/components/Screen.tsx

@@ -0,0 +1,141 @@
+import { useRef, useState, type ReactNode } from 'react';
+
+import type { ImageMedia, ItemStatus, StateView } from '../data/model';
+import styles from './Screen.module.css';
+
+export type PlaceholderReason = 'not-captured' | 'not-reached' | 'processing' | 'not-run' | 'spec-only';
+
+const REASON_LABEL: Record<PlaceholderReason, string> = {
+  'not-captured': 'Not captured yet',
+  'not-reached': 'Not reached in this run',
+  processing: 'Still processing',
+  'not-run': 'Not in this run',
+  'spec-only': 'Not captured yet'
+};
+
+export function placeholderReason(status: ItemStatus, media: ImageMedia | null): PlaceholderReason {
+  if (media?.state === 'processing') return 'processing';
+  if (status === 'not-reached') return 'not-reached';
+  if (status === 'not-yet-run') return 'not-run';
+  if (status === 'spec-only') return 'spec-only';
+  return 'not-captured';
+}
+
+/**
+ * What a screen should look like, sketched from the spec: its name, description, and the checks
+ * or hints that say what it shows. Clearly not a screenshot.
+ */
+export function ScreenPlaceholder({
+  state,
+  reason,
+  size,
+  description = true,
+  lines = true,
+  caption = true
+}: {
+  state: StateView;
+  reason: PlaceholderReason;
+  size: 'thumb' | 'full';
+  description?: boolean;
+  lines?: boolean;
+  caption?: boolean;
+}) {
+  const sketch = lines ? (state.hints.length ? state.hints : state.specChecks).slice(0, size === 'thumb' ? 3 : 8) : [];
+  if (state.design) {
+    return (
+      <div className={styles.phone} data-size={size} data-variant="design">
+        <img className={styles.design} src={state.design.image} alt={`Design for ${state.name}`} loading="lazy" />
+        <span className={styles.designTag}>Design, not a screenshot</span>
+      </div>
+    );
+  }
+  return (
+    <div className={styles.phone} data-size={size} data-variant="sketch" role="img" aria-label={`${state.name}: ${REASON_LABEL[reason]}`}>
+      <div className={styles.notch} aria-hidden="true" />
+      <div className={styles.sketch} aria-hidden="true">
+        {description && state.description && <span className={styles.description}>{state.description}</span>}
+        {sketch.length > 0 && (
+          <span className={styles.lines}>
+            {sketch.map((line) => (
+              <span key={line} className={styles.line}>
+                <span className={styles.tick} />
+                <span>{line}</span>
+              </span>
+            ))}
+          </span>
+        )}
+        {caption && <span className={styles.missing}>{REASON_LABEL[reason]}</span>}
+        <span className={styles.bars}>
+          <span className={styles.card} />
+          <span className={styles.barWide} />
+          <span className={styles.barNarrow} />
+          <span className={styles.barWide} />
+          <span className={styles.button} />
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/** A screenshot that fades in over a same-sized skeleton, with a quiet retry if it fails. */
+export function Screenshot({ src, alt, size, underlay }: { src: string; alt: string; size: 'thumb' | 'full'; underlay?: ReactNode }) {
+  const [attempt, setAttempt] = useState(0);
+  const [state, setState] = useState<'loading' | 'loaded' | 'failed'>('loading');
+  const url = attempt ? `${src}${src.includes('?') ? '&' : '?'}retry=${attempt}` : src;
+  return (
+    <div className={styles.phone} data-size={size} data-variant="shot" data-state={state}>
+      {state !== 'loaded' && (underlay ? <div className={styles.underlay}>{underlay}</div> : <div className={styles.skeleton} aria-hidden="true" />)}
+      {state === 'failed' ? (
+        <div className={styles.failed} role="status">
+          <span>Couldn’t load the screenshot.</span>
+          <button
+            type="button"
+            className={styles.retry}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              setState('loading');
+              setAttempt((n) => n + 1);
+            }}
+          >
+            Try again
+          </button>
+        </div>
+      ) : (
+        <img
+          key={url}
+          className={styles.img}
+          src={url}
+          alt={alt}
+          loading="lazy"
+          decoding="async"
+          draggable={false}
+          onLoad={() => setState('loaded')}
+          onError={() => setState('failed')}
+        />
+      )}
+    </div>
+  );
+}
+
+/** The real screenshot when there is one, the placeholder otherwise. */
+export function ScreenImage({
+  state,
+  size,
+  description = true,
+  lines = true,
+  caption = true
+}: {
+  state: StateView;
+  size: 'thumb' | 'full';
+  description?: boolean;
+  lines?: boolean;
+  caption?: boolean;
+}) {
+  const media = state.result?.screenshot ?? null;
+  const src = media?.state === 'available' ? (size === 'thumb' ? media.thumb ?? media.full : media.full ?? media.thumb) : null;
+  const startedAsPlaceholder = useRef(src === null);
+  const placeholder = <ScreenPlaceholder state={state} reason={placeholderReason(state.status, media)} size={size} description={description} lines={lines} caption={caption} />;
+  if (src) return <Screenshot src={src} alt={`Screenshot of ${state.name}`} size={size} underlay={startedAsPlaceholder.current ? placeholder : undefined} />;
+  return placeholder;
+}

package/packages/visualizer/src/components/Status.module.css

@@ -0,0 +1,116 @@
+.dot {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  display: inline-block;
+  flex: none;
+  background: var(--faint);
+}
+
+.dot[data-status='passed'] {
+  background: var(--passed);
+}
+.dot[data-status='failed'] {
+  background: var(--failed);
+}
+.dot[data-status='flaky'] {
+  background: var(--flaky);
+}
+.dot[data-status='not-reached'] {
+  background: transparent;
+  border: 1.5px dashed var(--faint);
+}
+.dot[data-status='not-yet-run'],
+.dot[data-status='spec-only'] {
+  background: transparent;
+  border: 1.5px solid var(--line-2);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: var(--pill);
+  padding: 0.15rem 0.6rem;
+  background: #eef2f7;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.badge[data-status='passed'] {
+  background: var(--passed-soft);
+  color: var(--passed-ink);
+}
+.badge[data-status='failed'] {
+  background: var(--failed-soft);
+  color: var(--failed-ink);
+}
+.badge[data-status='flaky'] {
+  background: var(--flaky-soft);
+  color: var(--flaky-ink);
+}
+.badge[data-status='not-reached'] {
+  background: var(--bg);
+  border: 1px dashed var(--line-2);
+}
+.badge[data-status='spec-only'],
+.badge[data-status='not-yet-run'] {
+  background: var(--bg);
+  border: 1px solid var(--line);
+}
+
+.summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.summaryLabel {
+  font-size: 0.8rem;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.summaryLabel strong {
+  color: var(--ink);
+  font-weight: 650;
+}
+
+.bar {
+  display: flex;
+  height: 0.5rem;
+  border-radius: var(--pill);
+  background: #eef2f7;
+  overflow: hidden;
+}
+
+.bar[data-unrun='true'] {
+  background: repeating-linear-gradient(-45deg, #eef2f7, #eef2f7 5px, #e2e8f0 5px, #e2e8f0 10px);
+}
+
+.seg {
+  height: 100%;
+  transition: width var(--fade) var(--ease);
+}
+
+.seg[data-status='passed'] {
+  background: var(--passed);
+}
+.seg[data-status='flaky'] {
+  background: var(--flaky);
+}
+.seg[data-status='failed'] {
+  background: var(--failed);
+}
+.seg[data-status='not-reached'] {
+  background: var(--not-reached);
+}
+.seg[data-status='not-yet-run'],
+.seg[data-status='spec-only'] {
+  background: transparent;
+}

package/packages/visualizer/src/components/Status.tsx

@@ -0,0 +1,60 @@
+import { ITEM_STATUSES, STATUS_LABEL, type ItemStatus, type StatusCounts } from '../data/model';
+import styles from './Status.module.css';
+
+export function StatusDot({ status }: { status: ItemStatus }) {
+  return <span className={styles.dot} data-status={status} aria-hidden="true" />;
+}
+
+export function StatusBadge({ status, label }: { status: ItemStatus; label?: string }) {
+  return (
+    <span className={styles.badge} data-status={status}>
+      <StatusDot status={status} />
+      {label ?? STATUS_LABEL[status]}
+    </span>
+  );
+}
+
+const BAR_ORDER: ItemStatus[] = ['passed', 'flaky', 'failed', 'not-reached', 'not-yet-run', 'spec-only'];
+
+function plural(n: number, one: string, many: string) {
+  return `${n} ${n === 1 ? one : many}`;
+}
+
+/**
+ * A segmented bar: working, unreliable, broken, not reached, then whatever the run didn't cover.
+ * With no run at all it shows the spec's count in the same shape.
+ */
+export function SummaryBar({ noun, nounPlural, counts, verb }: { noun: string; nounPlural: string; counts: StatusCounts; verb: string }) {
+  const unrun = counts['spec-only'] === counts.total;
+  const pct = (n: number) => (counts.total ? (n / counts.total) * 100 : 0);
+  const description = unrun
+    ? `${plural(counts.total, noun, nounPlural)}, not yet run`
+    : `${counts.passed} of ${counts.total} ${nounPlural} ${verb}` +
+      (counts.failed ? `, ${counts.failed} broken` : '') +
+      (counts.flaky ? `, ${counts.flaky} unreliable` : '') +
+      (counts['not-reached'] ? `, ${counts['not-reached']} not reached` : '') +
+      (counts['not-yet-run'] ? `, ${counts['not-yet-run']} not in this run` : '');
+  return (
+    <div className={styles.summary}>
+      <div className={styles.summaryLabel}>
+        {unrun ? (
+          <>
+            <strong>{plural(counts.total, noun, nounPlural)}</strong> · not yet run
+          </>
+        ) : (
+          <>
+            <strong>{nounPlural[0]!.toUpperCase() + nounPlural.slice(1)}</strong> {counts.passed + counts.flaky}/{counts.total} {verb}
+          </>
+        )}
+      </div>
+      <div className={styles.bar} role="img" aria-label={description} data-unrun={unrun}>
+        {!unrun &&
+          BAR_ORDER.map((status) =>
+            counts[status] ? <span key={status} className={styles.seg} data-status={status} style={{ width: `${pct(counts[status])}%` }} /> : null
+          )}
+      </div>
+    </div>
+  );
+}
+
+export { ITEM_STATUSES };