@crvouga/atlas 0.10.2 → 0.12.0

package/packages/visualizer/src/evidence/recording.module.css

@@ -1,460 +0,0 @@
-.recording {
-  display: grid;
-  gap: 14px;
-}
-
-.quietLine {
-  margin: 0;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-}
-
-.link {
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--place);
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.error,
-.pre {
-  margin: 0;
-  padding: 10px 12px;
-  border-radius: 8px;
-  overflow: auto;
-  max-height: 18rem;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.error {
-  border-left: 3px solid var(--failed);
-  background: var(--failed-soft);
-  color: var(--failed-ink);
-  font-family: var(--mono);
-}
-
-.error summary {
-  margin-top: 6px;
-  font-family: var(--font);
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.pre {
-  background: var(--bg-2);
-}
-
-.tabs {
-  display: flex;
-  gap: 4px;
-  border-bottom: 1px solid var(--line);
-}
-
-.tabs button {
-  padding: 8px 12px;
-  border: 0;
-  background: none;
-  color: var(--ink-3);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.tabs button[aria-selected='true'] {
-  color: var(--ink);
-  font-weight: 600;
-  box-shadow: inset 0 -2px 0 var(--place);
-}
-
-.split {
-  display: grid;
-  grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
-  gap: 28px;
-  align-items: start;
-}
-
-.steps,
-.timing {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.steps {
-  position: sticky;
-  top: 0;
-  max-height: calc(100vh - 13rem);
-  overflow: auto;
-}
-
-.steps button,
-.timing button {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 8px;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  font-size: 0.8125rem;
-  text-align: left;
-  cursor: pointer;
-}
-
-.steps button:hover:enabled,
-.timing button:hover:enabled {
-  background: var(--bg-2);
-}
-
-/* A step that captured no moment has nothing to open. */
-.steps button:disabled,
-.timing button:disabled {
-  color: var(--ink-3);
-  cursor: default;
-}
-
-.steps button[data-status='failed'] {
-  color: var(--failed-ink);
-  font-weight: 600;
-}
-
-.steps button[aria-current='step'] {
-  background: var(--place-soft);
-  color: var(--ink);
-  font-weight: 600;
-}
-
-.stepTitle {
-  flex: 1;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.stepTime {
-  flex: none;
-  color: var(--faint);
-  font-size: 0.75rem;
-  font-weight: 400;
-  font-variant-numeric: tabular-nums;
-}
-
-.stage {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.transport {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.control,
-.actor select {
-  height: 2rem;
-  padding: 0 12px;
-  border: 1px solid var(--line-2);
-  border-radius: var(--pill);
-  background: var(--bg);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.control:hover:enabled {
-  background: var(--bg-2);
-}
-
-.control:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.scrub {
-  flex: 1;
-  min-width: 8rem;
-  accent-color: var(--place);
-}
-
-.position {
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.momentTitle {
-  margin: 6px 0 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-.momentTitle[data-status='failed'] {
-  color: var(--failed-ink);
-}
-
-.observed {
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: var(--bg-2);
-  overflow: auto;
-  font-size: 0.8125rem;
-}
-
-.pictures {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  justify-content: center;
-  gap: 20px;
-}
-
-.snapshot {
-  flex: 0 0 270px;
-  width: 270px;
-  margin: 0;
-  min-width: 0;
-}
-
-.snapshot[data-picture] { min-height: 14rem; }
-
-.snapshot:not([data-picture]) {
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: var(--bg-2);
-  overflow: auto;
-  font-size: 0.8125rem;
-}
-
-.snapshot figcaption {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0 8px;
-  margin-bottom: 6px;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-}
-
-.snapshot figcaption strong {
-  color: var(--ink);
-}
-
-.earlier {
-  color: var(--flaky-ink);
-}
-
-.phone {
-  border: 1px solid var(--line-2);
-  border-radius: 20px;
-  overflow: hidden;
-  background: #fff;
-}
-
-
-.image {
-  display: block;
-  width: 100%;
-  height: auto;
-  max-height: min(68vh, 640px);
-  object-fit: contain;
-  background: var(--bg-2);
-  border: 1px solid var(--line-2);
-  border-radius: 12px;
-}
-
-@media (max-width: 800px) {
-  .snapshot { flex-basis: min(270px, 100%); width: min(270px, 100%); }
-}
-
-.data {
-  margin: 0;
-}
-
-.data > div {
-  display: grid;
-  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-  gap: 0 12px;
-  padding: 2px 0;
-}
-
-.data dt {
-  color: var(--ink-3);
-}
-
-.data dd {
-  margin: 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.data summary {
-  color: var(--ink-3);
-  cursor: pointer;
-}
-
-/* Timing */
-
-.timing li + li {
-  border-top: 1px solid var(--line);
-}
-
-.timing button {
-  border-radius: 0;
-}
-
-.bar {
-  flex: none;
-  width: 9rem;
-  height: 6px;
-  border-radius: var(--pill);
-  background: var(--unrun);
-  overflow: hidden;
-}
-
-.bar span {
-  display: block;
-  height: 100%;
-  border-radius: var(--pill);
-  background: var(--not-reached);
-}
-
-.timing li[data-band='warm'] .bar span {
-  background: var(--ink-3);
-}
-
-.timing li[data-band='slow'] .bar span {
-  background: var(--flaky);
-}
-
-.timing .stepTime {
-  width: 6rem;
-  text-align: right;
-}
-
-.slow {
-  flex: none;
-  padding: 0 6px;
-  border-radius: 4px;
-  background: var(--flaky-soft);
-  color: var(--flaky-ink);
-  font-size: 0.6875rem;
-  font-weight: 600;
-}
-
-/* Model trace */
-
-.trace {
-  display: grid;
-  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
-  gap: 16px;
-  align-items: start;
-}
-
-.traceStates {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  max-height: 24rem;
-  overflow: auto;
-}
-
-.traceStates button {
-  display: flex;
-  gap: 8px;
-  width: 100%;
-  padding: 5px 8px;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  font-size: 0.8125rem;
-  text-align: left;
-  cursor: pointer;
-  overflow-wrap: anywhere;
-}
-
-.traceStates button:hover {
-  background: var(--bg-2);
-}
-
-.traceStates button[aria-pressed='true'] {
-  background: var(--place-soft);
-  font-weight: 600;
-}
-
-.traceNo {
-  flex: none;
-  width: 1.5rem;
-  color: var(--ink-3);
-  font-variant-numeric: tabular-nums;
-}
-
-.tableScroll {
-  overflow-x: auto;
-}
-
-.traceTable {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8125rem;
-}
-
-.traceTable th,
-.traceTable td {
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--line);
-  text-align: left;
-  vertical-align: top;
-}
-
-.traceTable thead th {
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.traceTable tbody th {
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.traceTable pre {
-  margin: 0;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.traceTable tr[data-changed] td:last-child {
-  background: var(--place-soft);
-}
-
-.changed {
-  display: block;
-  color: var(--place);
-  font-size: 0.6875rem;
-  font-weight: 600;
-}
-
-@media (max-width: 800px) {
-  .split,
-  .trace {
-    grid-template-columns: 1fr;
-  }
-
-  .steps {
-    position: static;
-    max-height: 16rem;
-  }
-
-  .bar {
-    width: 4rem;
-  }
-}

package/packages/visualizer/src/evidence/sources.module.css

@@ -1,168 +0,0 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 60;
-  background: rgba(15, 20, 25, 0.25);
-}
-
-.sheet {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 61;
-  width: min(30rem, 100vw);
-  padding: 18px 20px 40px;
-  overflow: auto;
-  background: var(--bg);
-  box-shadow: var(--shadow-pop);
-}
-
-.head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 650;
-}
-
-.close {
-  display: inline-flex;
-  padding: 8px;
-  border: 0;
-  border-radius: 50%;
-  background: none;
-  color: var(--ink-3);
-  cursor: pointer;
-}
-
-.close:hover {
-  background: var(--bg-2);
-}
-
-.lead {
-  margin: 8px 0 12px;
-  color: var(--ink-3);
-  font-size: 0.875rem;
-}
-
-.reset {
-  padding: 5px 12px;
-  border: 1px solid var(--place);
-  border-radius: var(--pill);
-  background: var(--bg);
-  color: var(--place);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.notice {
-  margin: 12px 0 0;
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: var(--bg-2);
-  font-size: 0.8125rem;
-}
-
-.link,
-.only {
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--place);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.group {
-  margin-top: 22px;
-}
-
-.group h3 {
-  margin: 0 0 4px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.group ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.group li {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  border-bottom: 1px solid var(--line);
-}
-
-.group li > button:not(.only) {
-  padding: 8px 0;
-  border: 0;
-  background: none;
-  color: var(--place);
-  font-size: 0.8125rem;
-  cursor: pointer;
-}
-
-.empty {
-  margin: 4px 0;
-  color: var(--ink-3);
-  font-size: 0.875rem;
-}
-
-.option {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  padding: 8px 0;
-  font-size: 0.875rem;
-  cursor: pointer;
-}
-
-.option input {
-  flex: none;
-  width: 1rem;
-  height: 1rem;
-  accent-color: var(--place);
-}
-
-.option[data-off] {
-  color: var(--faint);
-  cursor: default;
-}
-
-.optionName {
-  flex: 1;
-  min-width: 0;
-  font-weight: 500;
-  overflow-wrap: anywhere;
-}
-
-.run {
-  display: block;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 400;
-}
-
-.optionMeta {
-  flex: none;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  text-align: right;
-}
-
-.optionMeta[data-failed] {
-  color: var(--failed);
-}

package/packages/visualizer/src/evidence/spec-snapshot.tsx

@@ -1,26 +0,0 @@
-import styles from './evidence.module.css';
-
-/** A fixed-size visual summary made from the spec itself, available before any run exists. */
-export function SpecSnapshot({ title, text, kind }: { title: string; text: string; kind: string }) {
-  const lines = text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean).slice(0, 4);
-  return (
-    <figure className={styles.specSnapshot}>
-      <figcaption>Spec snapshot <span>Generated from {kind} source</span></figcaption>
-      <svg className={styles.specSnapshotImage} viewBox="0 0 960 260" role="img" aria-label={`Visual summary of ${title}`}>
-        <rect width="960" height="260" rx="18" />
-        <text className={styles.snapshotTitle} x="32" y="52">{title}</text>
-        {lines.map((line, index) => {
-          const y = 90 + index * 40;
-          return (
-            <g key={`${index}-${line}`}>
-              <circle cx="42" cy={y - 5} r="5" />
-              <rect className={styles.snapshotLine} x="60" y={y - 15} width="868" height="28" rx="7" />
-              <text className={styles.snapshotText} x="76" y={y + 4}>{line.slice(0, 112)}{line.length > 112 ? '…' : ''}</text>
-            </g>
-          );
-        })}
-        {lines.length === 0 && <text className={styles.snapshotText} x="32" y="112">No readable source lines</text>}
-      </svg>
-    </figure>
-  );
-}