@vibefield/rosetta-room 0.0.0-stage → 0.1.0

package/dist/styles/search.css

@@ -0,0 +1,252 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   SEARCH — the launcher in the strip, the sheet over the room.
+   Design record (protos/agent-history-proto/search, 2026-09-09): search is a
+   tool held over the room, not a mode that replaces it. The strip keeps a
+   launcher where DESIGN.md §10 seats the file pill — centred in the drag
+   strip, clear of the traffic lights — and pressing it (or ⌘K) morphs it into
+   a top-attached sheet (DESIGN.md §8's docs explorer, one level wider),
+   sheet material, the §5 sheet shadow sign-flipped, backdrop dim, the stage
+   receding (M5). Nothing in the four columns changes content or geometry.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* ── the strip: centred search, with a theme control at the right edge ── */
+.ah-searchbar {
+  position: relative;
+  display: flex; align-items: center; justify-content: center; flex: none;
+  min-height: 50px; padding: 9px 84px;
+  border-bottom: 1px solid var(--vf-hairline);
+}
+.ah-launcher {
+  position: relative; display: flex; align-items: center;
+  width: min(460px, 100%); height: 32px; border-radius: 999px;
+  background: var(--vf-fill); -webkit-app-region: no-drag;
+  transition: background-color 160ms ease, box-shadow 160ms ease;
+}
+.ah-launcher:hover { background: var(--vf-fill-hover); }
+.ah-launcher:focus-within { box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.ah-launcher__open {
+  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
+  height: 100%; padding: 0 10px 0 11px; border: 0; border-radius: 999px;
+  background: transparent; color: var(--vf-text-tertiary); font-size: 12px;
+  text-align: left; cursor: default;
+}
+.ah-launcher__open svg { width: 13px; height: 13px; flex: none; }
+.ah-launcher__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* an active query is a fact about the room, so it takes primary ink */
+.ah-launcher[data-active] .ah-launcher__text { color: var(--vf-text-primary); font-weight: 500; }
+.ah-launcher .ah-kbd { flex: none; margin-left: auto; }
+.ah-launcher__clear {
+  display: grid; place-items: center; width: 18px; height: 18px; flex: none;
+  margin-right: 7px; border: 0; border-radius: 999px; background: transparent;
+  color: var(--vf-text-tertiary); font-size: 13px; line-height: 1;
+}
+.ah-launcher__clear:hover { color: var(--vf-text-primary); background: var(--vf-fill-hover); }
+/* the room's focus ring, on the one control that is a div */
+.ah-launcher__open:focus-visible { outline: none; }
+
+/* ── the sheet ─────────────────────────────────────────────────────────── */
+.ah-sheet__backdrop {
+  position: fixed; inset: 0; z-index: 60;
+  background: var(--vf-backdrop-dim);
+  backdrop-filter: blur(2px);
+  -webkit-app-region: no-drag;
+  animation: ah-fade-in 200ms ease;
+}
+.ah-sheet {
+  position: fixed; z-index: 61; top: 0; left: 50%;
+  transform: translateX(-50%);
+  display: flex; flex-direction: column;
+  width: min(760px, calc(100% - 168px));
+  max-height: min(68%, 640px);
+  /* a top-attached sheet: square where it meets the window, the card radius
+     where it meets the room */
+  border-radius: 0 0 var(--vf-radius-card) var(--vf-radius-card);
+  background: var(--vf-sheet-surface);
+  backdrop-filter: blur(40px);
+  /* DESIGN.md §5's sheet shadow, sign-flipped — a top sheet throws its
+     shadow down — plus the hairline ring every floating surface wears */
+  box-shadow: 0 20px 40px rgb(0 0 0 / 8%), 0 0 0 1px var(--vf-hairline-strong);
+  color: var(--vf-text-primary);
+  overflow: hidden;
+  -webkit-app-region: no-drag;
+  transform-origin: top center;
+  animation: ah-sheet-in 240ms var(--vf-ease-island);
+}
+.dark .ah-sheet { box-shadow: 0 20px 40px rgb(0 0 0 / 40%), 0 0 0 1px var(--vf-hairline-strong); }
+.ah-sheet:focus, .ah-sheet:focus-visible { outline: none; }
+@keyframes ah-sheet-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.985); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
+}
+/* M5 — the stage recedes behind the sheet, the way it does behind a file:
+   the room marks its root while the sheet is open */
+.ah-room { transition: transform 240ms var(--vf-ease-island); }
+.ah-frame[data-ah-overlay] .ah-room { transform: scale(0.98); }
+
+/* the field — the launcher, grown: same pill, one size up */
+.ah-sheet__field {
+  display: flex; align-items: center; gap: 10px; flex: none;
+  min-height: 50px; padding: 9px 12px 9px 16px;
+  border-bottom: 1px solid var(--vf-hairline);
+}
+.ah-sheet__field > svg { width: 14px; height: 14px; flex: none; color: var(--vf-text-tertiary); }
+.ah-sheet__field input {
+  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
+  color: var(--vf-text-primary); font: inherit; font-size: 14px;
+}
+.ah-sheet__field input::placeholder { color: var(--vf-text-tertiary); }
+.ah-sheet__field input::-webkit-search-cancel-button { display: none; }
+.ah-sheet__clear {
+  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
+  border: 0; border-radius: 999px; background: transparent;
+  color: var(--vf-text-tertiary); font-size: 14px; line-height: 1;
+}
+.ah-sheet__clear:hover { color: var(--vf-text-primary); background: var(--vf-fill-hover); }
+.ah-sheet__field .ah-kbd { flex: none; margin-left: 0; }
+
+/* the scope row — what is being searched, said rather than guessed */
+.ah-sheet__scope {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: none;
+  padding: 7px 14px; border-bottom: 1px solid var(--vf-hairline);
+}
+.ah-sheet__scope .ah-seg button { height: 20px; padding: 0 8px; font-size: 10px; }
+.ah-sheet__scope .ah-seg button i {
+  display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 999px;
+  background: var(--tint); vertical-align: 0;
+}
+.ah-chipselect {
+  appearance: none; height: 24px; padding: 0 22px 0 10px; border: 0; border-radius: 999px;
+  background: var(--vf-fill) no-repeat right 8px center / 8px 8px
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3l2.5 2.5L6.5 3' fill='none' stroke='%23888' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  color: var(--vf-text-tertiary); font: inherit; font-size: 10.5px;
+}
+.ah-chipselect:hover { background-color: var(--vf-fill-hover); color: var(--vf-text-primary); }
+.ah-chipselect[data-set] { color: var(--vf-text-primary); font-weight: 500; }
+.ah-chipselect:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+
+/* the list — heads pin, rows walk */
+.ah-sheet__list {
+  flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 8px;
+  scrollbar-width: thin; scrollbar-color: var(--vf-hairline-strong) transparent;
+  transition: opacity 160ms ease 140ms;
+}
+.ah-sheet__list[data-stale] { opacity: 0.55; }
+.ah-sheet__head {
+  position: sticky; top: 0; z-index: 2;
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 8px 5px; margin-top: 2px;
+  background: linear-gradient(var(--vf-sheet-surface) 80%, transparent);
+}
+.ah-sheet__head > i { flex: none; width: 3px; height: 12px; border-radius: 999px; background: var(--tint); }
+.ah-sheet__crumb {
+  display: flex; align-items: baseline; gap: 5px; min-width: 0;
+  color: var(--vf-text-tertiary); font-size: 11px; white-space: nowrap;
+}
+.ah-sheet__crumb > b { flex: none; font-weight: 500; color: var(--vf-text-primary); }
+.ah-sheet__crumb > i { flex: none; font-style: normal; color: var(--vf-text-faint); }
+.ah-sheet__crumb > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--vf-text-secondary); }
+.ah-sheet__crumb > span[data-mono] { font-family: var(--vf-font-mono); font-size: 10.5px; }
+.ah-sheet__head .ah-agent { width: 11px; height: 11px; opacity: 0.55; }
+.ah-sheet__headmeta {
+  margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px;
+  color: var(--vf-text-faint); font-size: 9.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.ah-sheet__row {
+  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 0 10px;
+  align-items: start; width: 100%; padding: 7px 10px; margin-bottom: 1px;
+  border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: default;
+  scroll-margin-top: 30px; scroll-margin-bottom: 4px;
+}
+.ah-sheet__row:hover { background: var(--vf-fill); }
+/* the keyboard's cursor wears the room's selection ring (DESIGN.md §7) */
+.ah-sheet__row[aria-selected="true"] { background: var(--vf-fill); box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.ah-sheet__who {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 18px; color: var(--vf-text-faint);
+}
+.ah-sheet__who svg { width: 12px; height: 12px; display: block; }
+.ah-sheet__who .ah-agent { width: 12px; height: 12px; color: var(--vf-text-tertiary); }
+/* the prompt is the only filled panel in the transcript; so it is here */
+.ah-sheet__you { width: 9px; height: 9px; border-radius: 3px; background: var(--vf-text-tertiary); }
+.ah-sheet__dot { width: 5px; height: 5px; border-radius: 999px; background: var(--vf-text-faint); }
+.ah-sheet__snippet {
+  margin: 0; color: var(--vf-text-secondary); font-size: 12.5px; line-height: 1.45;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  overflow-wrap: anywhere;
+}
+/* the match is hierarchy, not a highlighter (design record §06) */
+.ah-sheet__snippet mark {
+  padding: 1px 2px; margin: 0 -1px; border-radius: 3px;
+  background: var(--vf-fill-hover); color: var(--vf-text-primary); font-weight: 500;
+}
+.ah-sheet__row:hover mark,
+.ah-sheet__row[aria-selected="true"] mark { background: color-mix(in srgb, var(--vf-select) 20%, transparent); }
+.ah-sheet__when {
+  padding-top: 2px; color: var(--vf-text-faint); font-size: 10px;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+
+/* what the sheet says when it has nothing to list */
+.ah-sheet__quiet { padding: 18px 16px 8px; }
+.ah-sheet__quiet strong { display: block; font-size: 12.5px; font-weight: 500; color: var(--vf-text-secondary); }
+.ah-sheet__quiet p { margin: 5px 0 0; color: var(--vf-text-faint); font-size: 11px; line-height: 1.6; }
+.ah-sheet__quiet code { font-family: var(--vf-font-mono); font-size: 10.5px; color: var(--vf-text-tertiary); }
+.ah-sheet__recent-head {
+  padding: 12px 10px 4px; color: var(--vf-text-faint);
+  font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
+}
+.ah-sheet__recent {
+  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px;
+  border: 0; border-radius: 9px; background: transparent; color: var(--vf-text-secondary);
+  font-size: 12.5px; text-align: left; cursor: default;
+}
+.ah-sheet__recent:hover, .ah-sheet__recent[aria-selected="true"] { background: var(--vf-fill); }
+.ah-sheet__recent[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.ah-sheet__recent > svg { width: 12px; height: 12px; flex: none; color: var(--vf-text-faint); }
+.ah-sheet__recent > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ah-sheet__forget {
+  display: grid; place-items: center; width: 18px; height: 18px; flex: none;
+  border: 0; border-radius: 999px; background: transparent; color: var(--vf-text-faint); font-size: 13px; line-height: 1;
+  opacity: 0; transition: opacity 120ms ease;
+}
+.ah-sheet__recent:hover .ah-sheet__forget, .ah-sheet__forget:focus-visible { opacity: 1; }
+.ah-sheet__forget:hover { color: var(--vf-text-primary); background: var(--vf-fill-hover); }
+
+/* the foot — the count, the scope, the keys */
+.ah-sheet__foot {
+  display: flex; align-items: center; gap: 12px; flex: none;
+  min-height: 30px; padding: 6px 14px;
+  border-top: 1px solid var(--vf-hairline);
+  color: var(--vf-text-faint); font-size: 10px; line-height: 1.4;
+}
+.ah-sheet__count { flex: none; font-variant-numeric: tabular-nums; color: var(--vf-text-tertiary); }
+.ah-sheet__count[data-tone="warn"] { color: var(--vf-orange); }
+.ah-sheet__scopeline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ah-sheet__keys { margin-left: auto; display: flex; gap: 10px; flex: none; }
+.ah-sheet__keys span { display: inline-flex; align-items: center; gap: 4px; }
+.ah-sheet .ah-meter { width: 96px; flex: none; }
+
+/* ── the match stepper — the sheet's tail in the transcript head ───────── */
+.ah-stepper {
+  display: inline-flex; align-items: center; gap: 2px;
+  height: 24px; padding: 0 3px 0 10px; border-radius: 999px;
+  background: var(--vf-fill); color: var(--vf-text-secondary); font-size: 10.5px;
+}
+.ah-stepper > b {
+  max-width: 180px; margin-right: 6px; font-weight: 500; color: var(--vf-text-primary);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-stepper > .tnum { margin-right: 4px; color: var(--vf-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ah-stepper > button {
+  display: grid; place-items: center; width: 20px; height: 20px;
+  border: 0; border-radius: 999px; background: transparent; color: var(--vf-text-tertiary);
+}
+.ah-stepper > button:hover { background: var(--vf-fill-hover); color: var(--vf-text-primary); }
+.ah-stepper > button svg { width: 11px; height: 11px; display: block; }
+
+/* ── M6 — the quality floor ────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .ah-sheet, .ah-sheet__backdrop { animation-duration: 1ms; }
+  .ah-sheet__list { transition: none; }
+  .ah-frame[data-ah-overlay] .ah-room { transform: none; }
+}

package/dist/styles/transcript-activity.css

@@ -0,0 +1,70 @@
+/* §04B — conversation first. The outer run owns the only activity rail. */
+.tr-reading-prompt { margin-top: 30px; }
+.tr-reading-prompt:first-child, .tr-day + .tr-reading-prompt { margin-top: 0; }
+.tr-reading-reply + .tr-reading-reply { margin-top: 12px; }
+.tr-activity { margin: 10px 0 12px; min-width: 0; }
+.tr-activity > .tr-attachments { margin-top: 8px; margin-bottom: 12px; }
+.tr-activity__head {
+  width: 100%; margin: 0; padding: 4px 0; min-height: 30px;
+  border: 0; background: none; text-align: left; font-family: inherit;
+}
+.tr-activity__head .tr-line__r { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
+.tr-activity__head .tr-line__r .t { font-family: var(--vf-font-mono); font-size: 10px; }
+.tr-activity__running { display: inline-flex; align-items: center; gap: 5px; color: var(--vf-green); }
+.tr-activity__running i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+.tr-activity__list { margin: 3px 0 0 5px; padding: 2px 0 3px 14px; border-left: 1px solid var(--vf-hairline-strong); }
+.tr-activity__list[hidden] { display: none; }
+.tr-activity__loading { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 0; color: var(--vf-text-tertiary); font-size: 12px; }
+.tr-activity__loading button { padding: 0; border: 0; background: none; color: var(--vf-text-secondary); font: inherit; text-decoration: underline; cursor: pointer; }
+.tr-activity__loading button:focus-visible { outline: 1.5px solid var(--vf-select); outline-offset: 3px; }
+.tr-activity-tools { margin: 0; min-width: 0; }
+.tr-activity__list .tr-line { margin-inline: 0; padding-inline: 0; min-width: 0; }
+.tr-activity__list > .tr-ledger, .tr-activity__list > .tr-seg,
+.tr-activity__list > .tr-compaction { margin: 2px 0; padding-left: 0; border-left: 0; }
+.tr-activity__list .tr-activity-tools > div > .tr-line { min-height: 30px; }
+.tr-activity__list > .tr-compaction > summary { justify-content: flex-start; text-transform: none; letter-spacing: 0; font-size: 12px; }
+.tr-activity__list > .tr-compaction > summary::before,
+.tr-activity__list > .tr-compaction > summary::after { display: none; }
+.tr-activity__list .tr-compaction__body { margin: 5px 0 12px 22px; padding: 0; border: 0; }
+.tr-activity__list > .tr-thought .tr-think { margin: 6px 0 12px 22px; }
+.tr-activity-event { min-width: 0; margin: 1px 0; }
+.tr-activity-event > summary {
+  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 12px;
+  gap: 8px; align-items: center; min-height: 35px; padding: 6px 0;
+  border-radius: 5px; cursor: pointer; list-style: none; color: var(--vf-text-secondary); font-size: 12px;
+}
+.tr-activity-event > summary::-webkit-details-marker { display: none; }
+.tr-activity-event > summary:hover { background: var(--vf-fill); }
+.tr-activity-event > summary:focus-visible { outline: 1.5px solid var(--vf-select); outline-offset: 2px; }
+.tr-activity-event__glyph { display: inline-flex; width: 14px; height: 14px; color: var(--vf-text-tertiary); }
+.tr-activity-event__glyph > svg, .tr-activity-event__glyph .tm-avatar { width: 14px; height: 14px; }
+.tr-activity-event__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 7px; min-width: 0; }
+.tr-activity-event__label strong { font-weight: 500; }
+.tr-activity-event__label > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vf-text-tertiary); font-size: 11px; }
+.tr-activity-event > summary time { color: var(--vf-text-faint); font: 10px var(--vf-font-mono); }
+.tr-activity-event > summary .chev { grid-column: 4; display: inline-flex; color: var(--vf-text-tertiary); transition: transform 160ms var(--vf-ease-island); }
+.tr-activity-event > summary .chev svg { width: 12px; height: 12px; }
+.tr-activity-event[open] > summary .chev { transform: rotate(90deg); }
+.tr-activity-event__body { margin: 4px 20px 14px 22px; font-size: 13px; color: var(--vf-text-secondary); overflow-wrap: anywhere; }
+.tr-activity-event__body .tm-message__body { margin-left: 0; font-size: 13px; }
+.tr-activity-event__body > .tm-message__head { margin-bottom: 8px; }
+.tr-activity-event[data-hit="true"] > summary { background: color-mix(in srgb, var(--vf-select) 10%, transparent); outline: 1px solid var(--vf-select); outline-offset: 2px; }
+.tr-activity-event[data-failed="true"] .tr-activity-event__glyph { color: var(--vf-red); }
+.tr-child-link { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0; padding: 6px 0; border: 0; background: none; color: var(--vf-text-secondary); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
+.tr-child-link span { color: var(--vf-text-tertiary); overflow-wrap: anywhere; }
+.tr-child-link:focus-visible { outline: 1.5px solid var(--vf-select); outline-offset: 3px; }
+.tr-parent-link { flex: 0 0 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--vf-text-secondary); font-size: 17px; cursor: pointer; }
+.tr-parent-link:hover { background: var(--vf-fill); }
+.tr-parent-link:focus-visible { outline: 1.5px solid var(--vf-select); }
+@container measure (max-width: 480px) {
+  .tr-activity__head .tr-line__r .t { display: none; }
+  .tr-activity__head .tr-line__r { gap: 3px 7px; max-width: 140px; font-size: 10px; }
+  .tr-activity-event > summary { grid-template-columns: 14px minmax(0, 1fr) 12px; }
+  .tr-activity-event > summary .chev { grid-column: 3; }
+  .tr-activity-event > summary time { display: none; }
+  .tr-activity-event__label > span { white-space: normal; overflow-wrap: anywhere; }
+  .tr-activity-event__body { margin-right: 0; }
+  .tr-activity-tools .tr-line:not(.wf-worker) { grid-template-columns: 14px max-content minmax(0, 1fr); row-gap: 3px; padding-block: 5px; }
+  .tr-activity-tools .tr-line:not(.wf-worker) .tr-line__r { grid-column: 2 / -1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
+}
+@media (prefers-reduced-motion: reduce) { .tr-activity-event > summary .chev { transition: none; } }

package/dist/styles/transcript-head.css

@@ -0,0 +1,220 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   §08 — the head of the document: earlier, on a pull.
+
+   Ported from the locked record (protos/agent-history-proto/transcript) against
+   this app's tokens, which carry the same `--vf-` names. The rules are the
+   record's `.tr-top`, `.tr-headpill` and `.tr-frost`; only the two keyframe
+   names are namespaced, because room.css owns the `ah-` prefix.
+
+   The foot's rule is "a notice, never a jump": new rows appear and a pill
+   states the count. The head is its mirror. Content lands above, the viewport
+   stays where it was, and a pill states the count. The head line is a marker
+   (the family's bare-text form) plus one instrument: the veil's colourless
+   bar, filling with the pull.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.tr-top {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  padding: 6px 0 14px;
+}
+.tr-top__line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  color: var(--vf-text-faint);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  font-variant-numeric: tabular-nums;
+}
+.tr-top__line::before,
+.tr-top__line::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--vf-hairline-strong);
+}
+.tr-top__line b {
+  font-weight: 500;
+  color: var(--vf-text-tertiary);
+}
+/* the retry is a text act inside the line, never a filled button */
+.tr-top__line button {
+  border: 0;
+  background: none;
+  padding: 0;
+  color: var(--vf-text-tertiary);
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+  border-bottom: 1px dotted var(--vf-hairline-strong);
+}
+.tr-top__line button:hover {
+  color: var(--vf-text-primary);
+}
+
+/* Loading is colourless — the veil's rule: loading is not a §2.5 state. */
+.tr-top__bar {
+  position: relative;
+  width: 220px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--vf-hairline);
+  overflow: hidden;
+}
+.tr-top__bar i {
+  position: absolute;
+  inset: 0;
+  width: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--vf-foreground) 32%, transparent);
+  transition: width 60ms linear;
+}
+.tr-top[data-state="loading"] .tr-top__bar i,
+.tr-top[data-state="finding"] .tr-top__bar i,
+.tr-top[data-state="fetching"] .tr-top__bar i {
+  width: 38%;
+  animation: tr-top-slide 1.1s var(--vf-ease-island) infinite;
+}
+/* weight means readiness: a page is fetched and waiting */
+.tr-top[data-state="held"] .tr-top__bar i {
+  width: 100%;
+}
+@keyframes tr-top-slide {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(263%);
+  }
+}
+.tr-top[data-state="start"] .tr-top__bar,
+.tr-top[data-state="error"] .tr-top__bar,
+.tr-top[data-state="rewritten"] .tr-top__bar {
+  display: none;
+}
+.tr-top[data-state="start"] .tr-top__line {
+  color: var(--vf-text-faint);
+}
+.tr-top[data-state="error"] .tr-top__line b {
+  color: var(--vf-text-tertiary);
+}
+/* the dead cursor rides the dashed line the data gap uses */
+.tr-top[data-state="rewritten"] .tr-top__line::before,
+.tr-top[data-state="rewritten"] .tr-top__line::after {
+  background: repeating-linear-gradient(
+    90deg,
+    var(--vf-hairline-strong) 0 4px,
+    transparent 4px 8px
+  );
+}
+/* the 410 sentence sits under the head line, on its own rule */
+.tr-top + .tr-top[data-state="rewritten"] {
+  padding-top: 0;
+}
+
+/* the receipt at the head — the foot's new-messages pill, mirrored.
+   Absolutely positioned: its host must be the positioned frame that holds the
+   scroller (the transcript column is already `position: relative`), and `top`
+   is set by the mount so the pill lands BENEATH a pinned day pill, never over
+   it. */
+.tr-headpill {
+  position: absolute;
+  left: 50%;
+  top: var(--tr-headpill-top, 10px);
+  z-index: 6;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 28px;
+  padding: 0 13px;
+  border: 1px solid var(--vf-hairline);
+  border-radius: 999px;
+  background: var(--vf-chrome-surface);
+  backdrop-filter: blur(20px);
+  box-shadow: var(--vf-shadow-island);
+  color: var(--vf-text-secondary);
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  animation: tr-headpill-pop 280ms var(--vf-ease-pop);
+  pointer-events: none;
+}
+.tr-headpill[hidden] {
+  display: none;
+}
+/* the ↑ of "↑ 200 earlier loaded", drawn rather than typed */
+.tr-headpill i {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 6px solid var(--vf-text-tertiary);
+}
+@keyframes tr-headpill-pop {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(6px) scale(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
+
+/* ── the top fade ──────────────────────────────────────────────────────────
+   A pinned pill is chrome, and chrome needs a ground: content scrolling under
+   it dissolves into the paper's own colour. Absent at rest, rising over the
+   first 24px of scroll, so the head line and the session start are never
+   behind it. No blur: the gradient alone cuts cleanly, costs the compositor
+   nothing, and is the same under reduced transparency. `--frost` is written
+   onto the scroller by useHeadOfDocument's scroll handler. */
+.tr-frost {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  height: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+.tr-frost::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 64px;
+  opacity: var(--frost, 0);
+  background: linear-gradient(
+    to bottom,
+    var(--ah-plate) 0%,
+    color-mix(in srgb, var(--ah-plate) 88%, transparent) 38%,
+    transparent 100%
+  );
+  transition: opacity 120ms ease;
+}
+
+/* M6 — motion is a courtesy, never the message. The bar still reads full,
+   indeterminate or spent; it just stops travelling. */
+@media (prefers-reduced-motion: reduce) {
+  .tr-top__bar i {
+    transition: none;
+    animation: none;
+  }
+  .tr-top[data-state="loading"] .tr-top__bar i,
+  .tr-top[data-state="finding"] .tr-top__bar i,
+  .tr-top[data-state="fetching"] .tr-top__bar i {
+    width: 38%;
+  }
+  .tr-headpill {
+    animation: none;
+  }
+  .tr-frost::before {
+    transition: none;
+  }
+}

package/dist/styles/transcript-loading.css

@@ -0,0 +1,57 @@
+/* The opening surface shares the transcript's paper and keeps its geometry.
+   Actual messages remain laid out underneath, without focusable hidden acts. */
+.tr-stage, .tr-surface { display: flex; flex: 1; min-height: 0; flex-direction: column; }
+.tr-stage { position: relative; overflow: hidden; }
+/* Work indexes now anchor below the unchanged 46px column header. */
+.tr-stage .tr-meta { top: 14px; }
+.tr-surface { opacity: 0; }
+.tr-stage[data-ready] > .tr-surface { opacity: 1; transition: opacity 160ms ease; }
+.tr-loading {
+  position: absolute; inset: 0; z-index: 7; overflow: auto;
+  display: grid; place-items: center; padding: 32px 24px;
+  background: var(--vf-chrome-solid);
+}
+.tr-loading__body {
+  width: min(100%, 320px); display: flex; flex-direction: column; align-items: center;
+  animation: tr-loading-in 180ms ease 100ms both;
+}
+.tr-loading__sketch { width: 100%; margin-bottom: 34px; opacity: .7; }
+.tr-loading__sketch i { display: block; height: 6px; border-radius: 4px; background: var(--vf-hairline-strong); }
+.tr-loading__prompt {
+  width: 82%; padding: 17px 18px; border-radius: 10px; background: var(--vf-fill);
+  display: grid; gap: 9px;
+}
+.tr-loading__prompt i:last-child { width: 63%; }
+.tr-loading__reply { display: grid; gap: 10px; margin-top: 26px; }
+.tr-loading__byline { display: flex; gap: 9px; align-items: center; margin-bottom: 6px; }
+.tr-loading__byline b { width: 16px; height: 16px; border-radius: 50%; background: var(--vf-fill-hover); }
+.tr-loading__byline i { width: 66px; }
+.tr-loading__reply > i:nth-last-child(2) { width: 93%; }
+.tr-loading__reply > i:last-child { width: 68%; }
+.tr-loading__fold { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: var(--vf-text-faint); }
+.tr-loading__fold b { font-size: 17px; line-height: 16px; font-weight: 400; }
+.tr-loading__fold i { width: 104px; opacity: .7; }
+.tr-loading__status { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
+.tr-loading__status strong { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--vf-text-secondary); }
+.tr-loading__status p { margin: 0; color: var(--vf-text-tertiary); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
+.tr-loading__meter { width: 104px; height: 2px; border-radius: 2px; background: var(--vf-hairline); overflow: hidden; }
+.tr-loading__meter i {
+  display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--vf-text-tertiary);
+  animation: tr-loading-travel 1.4s ease-in-out infinite;
+}
+.tr-loading button {
+  margin-top: 12px; padding: 5px 8px; border: 0; border-radius: 5px; background: none;
+  color: var(--vf-text-secondary); font-size: 11px; text-decoration: underline;
+  text-decoration-color: var(--vf-hairline-strong); text-underline-offset: 3px; cursor: pointer;
+}
+.tr-loading button:hover { color: var(--vf-text-primary); background: var(--vf-fill); }
+.tr-loading button:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+.tr-loading[data-error] .tr-loading__sketch { opacity: .4; }
+@keyframes tr-loading-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes tr-loading-travel { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
+@media (max-height: 540px) { .tr-loading__sketch { display: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .tr-loading__body, .tr-loading__meter i { animation: none; }
+  .tr-loading__meter i { margin: 0 auto; }
+  .tr-stage[data-ready] > .tr-surface { transition: none; }
+}