@vibefield/rosetta-room 0.0.0-stage → 0.1.1

package/dist/styles/host-inputs.css

@@ -0,0 +1,250 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   WHAT A HOST ADDS (`RoomHostInputs`). Every rule here dresses an element the
+   room draws only when its host hands it something — a mark, a section, an
+   act — so a room given nothing (rosetta's app) never matches one. The host's
+   own drawings sit inside in the room's faces: ink, sizes, the list's breaks.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* R2 — a project row's marks lead its path line; its second line sits under
+   it in the path's quiet ink; the accent spans the extra row. */
+.ah-project-list-item__path[data-marks] { display: flex; align-items: center; gap: 5px; }
+.ah-project-list-item__marks {
+  flex: none; display: inline-flex; align-items: center; gap: 3px;
+  color: var(--vf-text-tertiary); line-height: 0;
+}
+.ah-project-list-item__marks svg { width: 11px; height: 11px; }
+.ah-project-list-item__line {
+  grid-column: 2; min-width: 0; margin-top: 2px;
+  color: var(--vf-text-tertiary); font-size: 10px; line-height: 1.4;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-project-list-item[data-line] .ah-project-list-item__accent { grid-row: 1 / span 4; }
+
+/* R3 — a section's head is the list's own break (`.ah-day`); a foot section
+   folds into one line of the same face, its act at the end. */
+.ah-scroll > .ah-section:first-child { margin-top: 0; }
+.ah-fold {
+  display: flex; align-items: center; gap: 6px; width: 100%;
+  margin-top: 6px; padding: 9px 10px; border: 0; border-radius: 10px;
+  background: transparent; color: var(--vf-text-faint); text-align: left;
+  transition: background-color 160ms ease, color 160ms ease;
+}
+.ah-fold:hover { background: var(--vf-fill); color: var(--vf-text-tertiary); }
+.ah-fold:focus-visible { outline: 2px solid var(--vf-select); outline-offset: -2px; }
+.ah-fold__label {
+  font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
+}
+.ah-fold__count { font-size: 9.5px; font-variant-numeric: tabular-nums; }
+.ah-fold__act { margin-left: auto; color: var(--vf-text-secondary); font-size: 10.5px; }
+.ah-fold:hover .ah-fold__act { color: var(--vf-text-primary); }
+
+/* R4 — a session row's id slot holds the host's mark and folder in the id's
+   own face; its end holds the host's act (or the reason) before the time. */
+.ah-session-list-item__native-id[data-host] { overflow: hidden; }
+.ah-session-list-item__native-id[data-host] svg { flex: none; width: 11px; height: 11px; }
+.ah-session-list-item__end { flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.ah-session-list-item__reason {
+  color: var(--vf-text-faint); font-size: 9.5px; white-space: nowrap;
+}
+/* With an act the row is a box: one button covers it (the selection), the
+   drawing passes the pointer through to it, and the act sits above. */
+.ah-session-list-item[data-host-act] { position: relative; }
+.ah-session-list-item[data-host-act] > :not(.ah-session-list-item__hit) { pointer-events: none; }
+.ah-session-list-item__hit {
+  position: absolute; inset: 0; z-index: 0; padding: 0; border: 0; border-radius: inherit;
+  background: transparent; cursor: pointer;
+}
+.ah-session-list-item__hit:focus-visible { outline: 2px solid var(--vf-select); outline-offset: -2px; }
+.ah-session-list-item[data-host-act] > :not(.ah-session-list-item__hit) { position: relative; z-index: 1; }
+/* H4 — a ledger row with an act is the same box: one covering button, the
+   drawing passing the pointer to it, the act (and its rows) above. */
+.ah-project-list-item[data-host-act] > :not(.ah-project-list-item__hit) { pointer-events: none; }
+.ah-project-list-item > .ah-project-list-item__hit {
+  position: absolute; inset: 0; z-index: 0; padding: 0; border: 0; border-radius: inherit;
+  background: transparent; cursor: pointer;
+}
+.ah-project-list-item__hit:focus-visible { outline: 2px solid var(--vf-select); outline-offset: -2px; }
+.ah-project-list-item__end { flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+/* the act: quiet at rest, a 20px pill under the pointer */
+.ah-hostact[data-place="row"] {
+  pointer-events: auto;
+  display: inline-flex; align-items: center; gap: 4px; height: 20px; margin: -3px 0; padding: 0 7px;
+  border: 0; border-radius: 999px; background: transparent;
+  color: var(--vf-text-tertiary); font-size: 10px; font-weight: 500; white-space: nowrap;
+  transition: background-color 140ms ease, color 140ms ease;
+}
+.ah-hostact[data-place="row"]:hover,
+.ah-hostact[data-place="row"][aria-expanded="true"] { background: var(--vf-fill-hover); color: var(--vf-text-primary); }
+.ah-hostact[data-place="row"]:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 1px; }
+.ah-hostact[data-place="row"]:disabled { opacity: 0.5; cursor: default; }
+.ah-hostact[data-place="row"] svg { flex: none; width: 12px; height: 12px; }
+
+/* R5 — the heads. ②'s acts are the head's own icon buttons; its one primary
+   stands on the go fill (the confirm's). ④'s acts are pills, the stepper's
+   shape; a reason is the range's quiet caption. A card sits under ②'s head. */
+.ah-iconbtn.ah-hostact[data-primary] { background: var(--vf-foreground); color: var(--vf-canvas-bg); }
+.ah-iconbtn.ah-hostact[data-primary]:hover { background: var(--vf-foreground); color: var(--vf-canvas-bg); opacity: 0.9; }
+.ah-iconbtn.ah-hostact[aria-expanded="true"]:not([data-primary]) { background: var(--vf-fill-hover); color: var(--vf-text-primary); }
+.ah-iconbtn.ah-hostact:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+.ah-iconbtn.ah-hostact:disabled { opacity: 0.45; cursor: default; }
+.ah-hostact[data-place="pill"] {
+  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; flex: none;
+  border: 0; border-radius: 999px; background: var(--vf-fill);
+  color: var(--vf-text-secondary); font-size: 10.5px; font-weight: 500; white-space: nowrap;
+  transition: background-color 140ms ease, color 140ms ease;
+}
+.ah-hostact[data-place="pill"]:hover,
+.ah-hostact[data-place="pill"][aria-expanded="true"] { background: var(--vf-fill-hover); color: var(--vf-text-primary); }
+.ah-hostact[data-place="pill"]:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+.ah-hostact[data-place="pill"]:disabled { opacity: 0.5; cursor: default; }
+.ah-hostact[data-place="pill"] svg { flex: none; width: 12px; height: 12px; }
+.ah-headreason { color: var(--vf-text-tertiary); }
+.ah-hostcard { flex: none; margin: 10px 12px 2px; min-width: 0; }
+
+/* The host's rows (`RoomMenu`): the room's popover, the session-work index's
+   material and rows, hung from the control that opens them. */
+.ah-menuhost { position: relative; display: inline-flex; flex: none; min-width: 0; }
+.ah-menu {
+  position: absolute; top: calc(100% + 6px); z-index: 30;
+  width: max-content; min-width: 220px; max-width: min(300px, calc(100vw - 32px));
+  overflow: hidden; border-radius: 12px; background: var(--vf-chrome-surface);
+  backdrop-filter: blur(24px);
+  box-shadow: var(--vf-shadow-island), 0 0 0 1px var(--vf-hairline-strong);
+  color: var(--vf-text-primary); text-align: left;
+  animation: tr-meta-in 180ms var(--vf-ease-pop);
+}
+/* Outside a room the rows hang from their control; inside one they are drawn
+   in the room's root, over every column, where the room places them. */
+.ah-menu:not([data-layer])[data-align="start"] { left: 0; transform-origin: top left; }
+.ah-menu:not([data-layer])[data-align="end"] { right: 0; transform-origin: top right; }
+.ah-menu[data-layer] { top: 0; left: 0; z-index: 40; display: flex; flex-direction: column; }
+.ah-menu[data-layer][data-align="start"] { transform-origin: top left; }
+.ah-menu[data-layer][data-align="end"] { transform-origin: top right; }
+.ah-menu[data-layer][data-side="above"][data-align="start"] { transform-origin: bottom left; }
+.ah-menu[data-layer][data-side="above"][data-align="end"] { transform-origin: bottom right; }
+.ah-menu[data-layer] .ah-menu__filter { flex: none; }
+.ah-menu[data-layer] .ah-menu__list { flex: 0 1 auto; min-height: 0; }
+.ah-menu__filter {
+  display: block; width: calc(100% - 14px); height: 28px; margin: 7px 7px 0; padding: 0 10px;
+  border: 0; border-radius: 8px; outline: none; background: var(--vf-fill);
+  color: var(--vf-text-primary); font-size: 11.5px;
+}
+.ah-menu__filter:focus-visible { box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.ah-menu__list { max-height: min(360px, 60vh); overflow-y: auto; padding: 5px; scrollbar-width: thin; }
+.ah-menu__list:focus { outline: none; }
+.ah-menu__group + .ah-menu__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--vf-hairline); }
+.ah-menu__title {
+  display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px;
+  color: var(--vf-text-faint); font-size: 9.5px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: 0.07em;
+}
+.ah-menu__title svg { width: 11px; height: 11px; }
+.ah-menu__item {
+  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 5px 8px;
+  border: 0; border-radius: 7px; background: none; color: var(--vf-text-secondary);
+  font-size: 11.5px; text-align: left; transition: background-color 120ms ease;
+}
+.ah-menu__item[data-depth="1"] { padding-left: 26px; }
+/* The ring is a key's, never a pointer's: a row a pointer opened onto is
+   focused without one. */
+.ah-menu__item:focus, .ah-menu__act:focus { outline: none; }
+.ah-menu__item:hover { background: var(--vf-fill); }
+.ah-menu__item:focus-visible { background: var(--vf-fill); box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.ah-menu__item:disabled { opacity: 0.55; cursor: default; }
+.ah-menu__item:disabled:hover { background: none; }
+.ah-menu__check { flex: none; display: inline-flex; width: 14px; height: 14px; color: var(--vf-text-primary); }
+.ah-menu__check svg { width: 14px; height: 14px; }
+.ah-menu__mark { flex: none; display: inline-flex; color: var(--vf-text-tertiary); }
+.ah-menu__mark svg { width: 13px; height: 13px; }
+.ah-menu__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.ah-menu__label {
+  color: var(--vf-text-primary); font-weight: 500;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-menu__detail {
+  margin-top: 1px; color: var(--vf-text-tertiary); font-size: 10.5px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-menu__aside { flex: none; color: var(--vf-text-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
+/* A row with its own act (a folder's "Not part of this project"): the row
+   and its act side by side, the act quiet until the row is under the pointer. */
+.ah-menu__row { display: flex; align-items: center; gap: 2px; }
+.ah-menu__row > .ah-menu__item { flex: 1; min-width: 0; }
+.ah-menu__act {
+  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
+  border: 0; border-radius: 7px; background: transparent;
+  color: var(--vf-text-faint); font-size: 10.5px; white-space: nowrap;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+.ah-menu__row:hover > .ah-menu__act { color: var(--vf-text-tertiary); }
+.ah-menu__act:hover { background: var(--vf-fill-hover); color: var(--vf-text-primary); }
+.ah-menu__act:focus-visible { box-shadow: inset 0 0 0 1.5px var(--vf-select); color: var(--vf-text-primary); }
+.ah-menu__act:disabled { opacity: 0.5; cursor: default; }
+.ah-menu__act svg { width: 12px; height: 12px; }
+.ah-menu__empty { margin: 0; padding: 18px 12px; color: var(--vf-text-faint); font-size: 11px; text-align: center; }
+
+/* R6 — ③'s head as the folder list: the column head's marker, the folder's
+   mark and name (an id, in mono), the count, and a caret — one button. A
+   folder the host marks elsewhere puts the host's honest state where the
+   worktree would be. */
+.ah-col > header > .ah-menuhost { flex: 0 1 auto; min-width: 0; }
+.ah-folderpick {
+  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
+  height: 30px; margin: 0 -6px; padding: 0 6px; border: 0; border-radius: 8px;
+  background: transparent; color: var(--vf-text-primary);
+  transition: background-color 140ms ease;
+}
+.ah-folderpick:hover, .ah-folderpick[aria-expanded="true"] { background: var(--vf-fill); }
+.ah-folderpick:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 0; }
+.ah-folderpick > i { flex: none; width: 3px; height: 14px; border-radius: 999px; background: var(--tint); }
+.ah-folderpick__mark { flex: none; display: inline-flex; color: var(--vf-text-secondary); }
+.ah-folderpick__mark svg { width: 12px; height: 12px; }
+.ah-folderpick > strong {
+  min-width: 0; font-family: var(--vf-font-mono); font-size: 11px; font-weight: 500; letter-spacing: -0.01em;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-folderpick > svg { flex: none; width: 11px; height: 11px; color: var(--vf-text-tertiary); }
+.ah-elsewhere {
+  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 6px; padding: 24px 20px; color: var(--vf-text-tertiary); font-size: 12px; line-height: 1.5; text-align: center;
+}
+
+/* R7 — a host's chips: the room's chip pill as a button that opens rows,
+   leading the list's bar (the rank switch keeps the end). */
+.ah-chips { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.ah-chips > .ah-menuhost { flex: 0 1 auto; min-width: 0; }
+.ah-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; }
+.ah-chip[aria-expanded="true"] { background-color: var(--vf-fill-hover); color: var(--vf-text-primary); }
+.ah-chip__label {
+  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-chip__label svg { flex: none; width: 11px; height: 11px; }
+
+/* H4 — ②'s name as its rename: the head's own name, a control on press; the
+   field takes the name's face; a refusal stands where the count was. */
+.ah-colhead > .ah-rename {
+  min-width: 0; max-width: 100%; margin: 0 -4px; padding: 2px 4px; border: 0; border-radius: 6px;
+  background: transparent; color: var(--vf-text-primary); font-size: 11.5px; font-weight: 500;
+  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text;
+}
+.ah-colhead > .ah-rename:hover { background: var(--vf-fill); }
+.ah-colhead > .ah-rename:focus { outline: none; }
+.ah-colhead > .ah-rename:focus-visible { box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.ah-rename__field {
+  flex: 1; min-width: 60px; height: 24px; margin: 0 -4px; padding: 0 6px;
+  border: 0; border-radius: 6px; outline: none;
+  background: var(--vf-fill); color: var(--vf-text-primary); font-size: 11.5px; font-weight: 500;
+  box-shadow: inset 0 0 0 1.5px var(--vf-select);
+}
+.ah-rename__field[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--vf-red); }
+.ah-rename__field[aria-busy="true"] { opacity: 0.6; }
+/* editing, the head's name takes the band; a refusal hangs under it, whole,
+   over the panel beneath — the band has no room for a sentence beside six acts */
+.ah-colhead[data-rename="editing"], .ah-colhead[data-rename="saving"] { position: relative; flex: 1; }
+.ah-rename__failure {
+  position: absolute; top: calc(100% + 6px); left: 7px; z-index: 6;
+  width: max-content; max-width: 270px; padding: 6px 9px; border-radius: 8px;
+  background: var(--vf-chrome-solid); box-shadow: var(--vf-shadow-island), 0 0 0 1px var(--vf-hairline-strong);
+  color: var(--vf-red); font-size: 10.5px; line-height: 1.4; white-space: normal;
+}

package/dist/styles/image-gallery.css

@@ -0,0 +1,30 @@
+.ah-fileview__body[data-gallery] { position: relative; }
+.ah-fileview__body[data-gallery] .ah-image__frame { padding-inline: 54px; }
+.ah-image-gallery { flex: none; min-width: 0; padding: 10px 18px 14px; border-top: 1px solid var(--vf-hairline); }
+.ah-image-gallery__caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--vf-text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; }
+.ah-image-gallery__rail { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px; margin: -4px; scrollbar-width: thin; }
+.ah-image-gallery__thumb { flex: none; width: 64px; height: 64px; padding: 3px; display: grid; place-items: center; border: 1px solid var(--vf-hairline); border-radius: 9px; background: var(--vf-fill); color: var(--vf-text-tertiary); cursor: pointer; }
+.ah-image-gallery__thumb:first-child { margin-left: auto; }
+.ah-image-gallery__thumb:last-child { margin-right: auto; }
+.ah-image-gallery__thumb img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 5px; }
+.ah-image-gallery__thumb:hover { background: var(--vf-fill-hover); }
+.ah-image-gallery__thumb[aria-current] { border-color: var(--vf-select); box-shadow: 0 0 0 1px var(--vf-select); background: var(--vf-fill-hover); }
+.ah-image-gallery__thumb:disabled { opacity: .45; border-style: dashed; cursor: default; }
+.ah-image-gallery__step { position: absolute; top: calc(50% - 18px); display: grid; place-items: center; width: 36px; height: 36px; padding: 0 0 2px; border: 1px solid var(--vf-hairline-strong); border-radius: 50%; background: var(--vf-chrome-solid); color: var(--vf-text-secondary); box-shadow: var(--vf-shadow-island); font: 26px/1 var(--vf-font-sans); cursor: pointer; }
+.ah-image-gallery__step--previous { left: 10px; }
+.ah-image-gallery__step--next { right: 10px; }
+.ah-image-gallery__step[aria-disabled="true"] { opacity: .3; cursor: default; box-shadow: none; }
+.ah-image-gallery__step:not([aria-disabled="true"]):hover { background: var(--vf-fill-hover); }
+.ah-image-gallery__thumb:focus-visible, .ah-image-gallery__step:focus-visible, .ah-fileview__retry:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 3px; }
+.ah-fileview__retry { margin-top: 10px; padding: 6px 12px; border: 0; border-radius: 6px; background: var(--vf-fill); color: var(--vf-text-secondary); font: inherit; cursor: pointer; }
+@media (max-width: 600px) {
+  .ah-image-gallery { padding: 8px 12px 10px; }
+  .ah-image-gallery__thumb { width: 52px; height: 52px; }
+  .ah-image-gallery__step { width: 30px; height: 30px; top: calc(50% - 15px); }
+  .ah-image-gallery__step--previous { left: 6px; }
+  .ah-image-gallery__step--next { right: 6px; }
+  .ah-fileview__body[data-gallery] .ah-image__frame { padding-inline: 42px; }
+  .ah-fileview:has(.ah-image-gallery) .ah-fileview__head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+  .ah-fileview:has(.ah-image-gallery) .ah-fileview__acts { grid-column: 1; grid-row: 2; justify-content: flex-end; }
+  .ah-fileview:has(.ah-image-gallery) .ah-fileview__path { grid-row: 3; }
+}

package/dist/styles/ingest.css

@@ -0,0 +1,51 @@
+/* Progress describes its named step and never covers available content. */
+.ah-ingest-status {
+  flex: 0 0 auto; margin: 10px 10px 2px; padding: 13px 14px 8px; min-width: 0;
+  border: 1px solid var(--vf-hairline-strong); border-radius: 11px;
+  background: var(--vf-chrome-surface); color: var(--vf-text-primary);
+  font-size: 11px; text-align: left; font-variant-numeric: tabular-nums;
+}
+.ah-ingest-status__eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--vf-text-secondary); font-size: 9px; font-weight: 600; letter-spacing: .045em; }
+.ah-ingest-status h3 { margin: 7px 0 5px; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; }
+.ah-ingest-status .ah-ingest-status__detail { margin: 0 0 13px; color: var(--vf-text-secondary); font-size: 11px; line-height: 1.5; }
+.ah-ingest-status__amount { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 7px; line-height: 1.4; }
+.ah-ingest-status__amount b { font-size: 11px; font-weight: 500; }
+.ah-ingest-meter { overflow: hidden; height: 4px; border-radius: 4px; background: var(--vf-hairline-strong); }
+.ah-ingest-meter i { display: block; height: 100%; border-radius: inherit; background: var(--vf-select); transition: width 450ms linear; }
+.ah-ingest-meter[data-indeterminate] i { width: 34%; animation: ah-ingest-travel 1.8s ease-in-out infinite; }
+.ah-ingest-meter[data-paused] i { animation: none; transition: none; }
+.ah-ingest-status__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 8px; color: var(--vf-text-secondary); margin: 8px 0 4px; font-size: 10px; line-height: 1.5; }
+.ah-ingest-status__footer > span:last-child { white-space: nowrap; }
+.ah-ingest-status__agents { border-top: 1px solid var(--vf-hairline); margin-top: 8px; }
+.ah-ingest-status__agents summary { list-style: none; cursor: pointer; min-height: 30px; display: flex; align-items: center; justify-content: space-between; color: var(--vf-text-secondary); font-size: 10px; border-radius: 4px; }
+.ah-ingest-status__agents summary::-webkit-details-marker { display: none; }
+.ah-ingest-status__agents summary:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+.ah-ingest-status__agents summary > span { font-size: 14px; transition: transform 160ms ease; }
+.ah-ingest-status__agents[open] summary > span { transform: rotate(180deg); }
+.ah-ingest-status__agents ul { max-height: 195px; overflow-y: auto; list-style: none; padding: 0 4px 2px 0; margin: 2px 0 0; scrollbar-width: thin; }
+.ah-ingest-status__agents li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; padding: 7px 0; }
+.ah-ingest-status__agents li > .ah-agent { margin-top: 2px; opacity: .8; }
+.ah-ingest-status__agent-name { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
+.ah-ingest-status__agent-name strong { font-size: 11px; font-weight: 500; }
+.ah-ingest-status__agent-name > span { color: var(--vf-text-secondary); }
+.ah-ingest-status__agent-caption { display: block; font-size: 10px; line-height: 1.5; color: var(--vf-text-secondary); margin: 2px 0 5px; }
+.ah-ingest-status__agents .ah-ingest-meter { height: 3px; }
+.ah-ingest-status[data-state="complete"] .ah-ingest-status__eyebrow { color: var(--vf-text-primary); }
+.ah-ingest-status[data-state="complete"] .ah-ingest-meter i { background: var(--vf-green); }
+.ah-ingest-status[data-state="disconnected"] .ah-ingest-meter i,
+.ah-ingest-status[data-state="search_failed"] .ah-ingest-meter i { background: var(--vf-orange); }
+.ah-cold-start { flex: 1; }
+.ah-cold-start > .ah-ingest-status { width: min(100%, 340px); box-sizing: border-box; margin: 22px auto 0; padding: 18px 20px 10px; }
+.ah-cold-start .ah-ingest-status h3 { font-size: 15px; }
+.ah-project-list-item__progress { grid-column: 2; color: var(--vf-text-secondary); font-size: 10px; line-height: 1.4; margin-top: 5px; font-variant-numeric: tabular-nums; }
+.ah-project-list-item[data-cooking] .ah-project-list-item__metrics { animation: none; }
+.ah-project-list-item__metrics[data-cooking]::after { display: none; }
+.ah-project-list-item[data-cooking]:not([data-fill]) .ah-project-list-item__accent { animation: none; opacity: .3; }
+@keyframes ah-ingest-travel { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
+@media (prefers-reduced-motion: reduce) {
+  .ah-ingest-meter i, .ah-ingest-status__agents summary > span { animation: none; transition: none; }
+  .ah-ingest-meter[data-indeterminate] i { width: 100%; opacity: .35; animation: none; }
+  .ah-project-list-item__accent { animation: none !important; transition: none !important; }
+}
+
+.ah-ingest-note { flex: 0 0 auto; margin: 0; padding: 9px 14px; color: var(--vf-text-secondary); font-size: 11px; line-height: 1.5; }

package/dist/styles/message-preview.css

@@ -0,0 +1,34 @@
+/* Long messages fade into their reading action, on the prompt/reply material. */
+.tr-message { position: relative; min-width: 0; }
+.tr-message__viewport { max-height: 21.7em; overflow: clip; }
+.tr-message__content { display: flow-root; }
+.tr-message__content > :first-child { margin-top: 0; }
+.tr-message__content > :last-child { margin-bottom: 0; }
+.tr-message[data-omitted] .tr-message__viewport {
+  min-height: 5em;
+  mask-image: linear-gradient(to bottom, #000 35%, #0008 60%, transparent calc(100% - 32px));
+}
+.tr-message[data-omitted] .tr-message__viewport:focus-within { mask-image: none; }
+.tr-message__footer {
+  position: absolute; inset: auto 0 0;
+  display: flex; align-items: center; justify-content: center;
+  min-height: 44px; pointer-events: none;
+  font-size: 12px; line-height: 1.5;
+}
+.tr-message__open {
+  display: inline-flex; align-items: center; justify-content: center;
+  max-width: 100%; padding: 7px 12px; pointer-events: auto;
+  border: 0; border-radius: 999px; background: none;
+  color: var(--vf-text-secondary); font: inherit; font-weight: 500;
+  cursor: pointer; transition: color 120ms ease, background-color 120ms ease;
+}
+.tr-message__open:hover {
+  color: var(--vf-text-primary); background: var(--vf-fill-hover);
+}
+.tr-message__open:focus-visible {
+  outline: 2px solid var(--vf-select); outline-offset: 2px;
+  color: var(--vf-text-primary);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tr-message__open { transition: none; }
+}

package/dist/styles/models-chart.css

@@ -0,0 +1,66 @@
+.ah-models {
+  flex: 1; min-height: 0; display: flex; flex-direction: column;
+  overflow: auto; padding: 24px 28px; color: var(--vf-text-primary);
+}
+.ah-models__loading { flex: 1; display: grid; place-items: center; margin: 0; color: var(--vf-text-tertiary); font-size: 12px; }
+.ah-models .ah-chart-header { flex: none; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 20px; }
+.ah-models .ah-chart-header__title { color: var(--vf-text-secondary); font-size: 14px; }
+.ah-models .ah-chart-header__note { color: var(--vf-text-tertiary); font-size: 11px; }
+.ah-models .ah-streamgraph__plot { position: relative; margin: 12px 0 20px; }
+.ah-models .ah-streamgraph__plot svg { overflow: visible; cursor: crosshair; }
+.ah-models .ah-streamgraph__plot svg:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 6px; border-radius: 2px; }
+.ah-models .ah-streamgraph__plot [data-streamgraph-layer] { opacity: .75; }
+.dark .ah-models .ah-streamgraph__plot [data-streamgraph-layer] { opacity: 1; }
+.ah-models .ah-streamgraph__glow { opacity: calc(.16 * var(--series-glow-strength, 1)); filter: blur(3px); pointer-events: none; }
+.dark .ah-models .ah-streamgraph__glow { opacity: calc(.35 * var(--series-glow-strength, 1)); }
+.ah-models .ah-streamgraph__outline { opacity: .7; pointer-events: none; }
+.ah-models .ah-streamgraph__glow, .ah-models .ah-streamgraph__outline { stroke-linejoin: round; }
+.ah-models .ah-streamgraph__axis { flex: none; height: 16px; margin-top: 0; font-size: 11px; color: var(--vf-text-tertiary); }
+.ah-models .ah-streamgraph__legend {
+  flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr));
+  gap: 8px 16px; max-height: 128px; overflow: auto; margin-top: 24px;
+}
+.ah-models .ah-streamgraph__legend > span { gap: 7px; min-width: 0; font-size: 11px; line-height: 16px; color: var(--vf-text-secondary); }
+.ah-models .ah-streamgraph__legend:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 4px; border-radius: 2px; }
+.ah-streamgraph__legend em { font-style: normal; }
+.ah-models .ah-streamgraph__legend em { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ah-models .ah-streamgraph__legend i { width: 8px; height: 8px; }
+.ah-models .ah-streamgraph__legend b { flex: none; color: var(--vf-text-primary); }
+.ah-models .ah-streamgraph__empty { height: 100%; display: grid; place-items: center; font-size: 12px; }
+.ah-streamgraph__crosshair { stroke: var(--vf-text-secondary); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
+.ah-streamgraph__point {
+  position: absolute; width: 8px; height: 8px; box-sizing: border-box;
+  border: 2px solid var(--series-color); border-radius: 50%; background: var(--vf-chrome-solid);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--series-color) 45%, transparent);
+  transform: translate(-50%, -50%); pointer-events: none;
+}
+.ah-streamgraph__readout {
+  --readout-width: min(244px, calc(100% - 16px));
+  position: absolute; z-index: 1; top: 8px; width: var(--readout-width); box-sizing: border-box;
+  display: flex; flex-direction: column;
+  left: clamp(8px, calc(var(--inspect-x) + 14px), calc(100% - var(--readout-width) - 8px));
+  padding: 12px; border: 1px solid var(--vf-hairline); border-radius: 10px;
+  max-height: calc(100% - 16px); overflow: hidden;
+  background: var(--vf-chrome-solid); box-shadow: var(--vf-shadow-island); pointer-events: auto;
+}
+.ah-streamgraph__readout[data-side="left"] {
+  left: clamp(8px, calc(var(--inspect-x) - var(--readout-width) - 14px), calc(100% - var(--readout-width) - 8px));
+}
+.ah-streamgraph__readout-head { flex: none; display: flex; flex-direction: column; gap: 5px; padding-bottom: 10px; border-bottom: 1px solid var(--vf-hairline); }
+.ah-streamgraph__readout-head > strong { font-size: 12px; font-weight: 550; color: var(--vf-text-primary); }
+.ah-streamgraph__readout-head > span { font-size: 11px; color: var(--vf-text-tertiary); }
+.ah-streamgraph__readout-head b { margin-left: 3px; color: var(--vf-text-primary); font-weight: 550; }
+.ah-streamgraph__readout-rows { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
+.ah-streamgraph__readout-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; font-size: 11px; }
+.ah-streamgraph__readout-model { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; color: var(--vf-text-secondary); }
+.ah-streamgraph__readout-model i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--series-color); }
+.ah-streamgraph__readout-rows b { color: var(--vf-text-primary); font-weight: 500; }
+.ah-streamgraph__readout-rows small { text-align: right; font-size: 10px; color: var(--vf-text-tertiary); }
+.ah-streamgraph__readout b, .ah-streamgraph__readout small { font-variant-numeric: tabular-nums; }
+.ah-streamgraph__readout > p { flex: none; margin: 10px 0 0; font-size: 10px; color: var(--vf-text-tertiary); }
+@media (max-width: 760px) {
+  .ah-models { padding: 18px; }
+  .ah-models .ah-chart-header { margin-bottom: 12px; }
+  .ah-models .ah-streamgraph__plot { margin: 8px 0 16px; }
+  .ah-models .ah-streamgraph__legend { margin-top: 18px; }
+}

package/dist/styles/project-chart.css

@@ -0,0 +1,19 @@
+/* Equal side columns keep the tabs at the dialog's center, even for long names. */
+.ah-fileview__head.ah-project-chart__head {
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  padding: 12px 16px 11px;
+}
+.ah-project-chart__head .ah-fileview__title { grid-column: 1; grid-row: 1; }
+.ah-project-chart__head .ah-fileview__acts { grid-column: 3; grid-row: 1; justify-self: end; }
+.ah-project-chart__tabs { grid-column: 2; grid-row: 1; justify-self: center; }
+.ah-project-chart__tabs button { min-width: 76px; height: 26px; padding: 0 14px; font-size: 11px; }
+.ah-project-chart__panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+.ah-project-chart__panel[hidden] { display: none; }
+@media (max-width: 400px) {
+  .ah-fileview__head.ah-project-chart__head { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
+  .ah-project-chart__head .ah-fileview__acts { grid-column: 2; }
+  .ah-project-chart__tabs { grid-column: 1 / -1; grid-row: 2; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ah-project-chart__tabs button { transition: none; }
+}

package/dist/styles/reader.css

@@ -0,0 +1,33 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   THE READER (PK3, `TranscriptReader`) — one session's document, read-only,
+   filling whatever holds it. It wears the room's root (`.ah-frame`) for its
+   tokens and resets, and the transcript column inside it is its only column.
+
+   Its landing stays marked, because there the mark is the point. The mark's
+   look is the host's: three tokens a host sets on any element around the
+   reader. Unset, they are the room's own neutral match — the sheet's word
+   wash and a quiet edge — and never the select hue the room's landing ring
+   wears, which says "here" for a moment rather than "this matched".
+     --ah-match         the wash under a matched word
+     --ah-match-weight  a matched word's weight
+     --ah-match-line    the matched line's edge (a prompt panel's ring)
+   ═══════════════════════════════════════════════════════════════════════ */
+.ah-frame.ah-reader { display: flex; flex-direction: column; }
+.ah-reader > .ah-col { flex: 1; border-right: 0; }
+
+.ah-reader mark.tr-match {
+  padding: 0 1px; margin: 0 -1px; border-radius: 3px;
+  background: var(--ah-match, var(--vf-fill-hover)); color: var(--vf-text-primary);
+  font-weight: var(--ah-match-weight, 500);
+}
+
+.ah-reader :is(.tr-line, .tr-seg, .tr-mark, .tr-summary, .tm-message, .tm-roster__row, .tm-lifecycle)[data-hit="true"] {
+  animation: none;
+  box-shadow: -10px 0 0 -7px var(--ah-match-line, var(--vf-text-tertiary));
+}
+.ah-reader .tr-prompt[data-hit="true"],
+.ah-reader .tr-prompt-message.is-landed > .tr-prompt,
+.ah-reader .tr-prompt-message.is-landed > .tr-attachments .tr-att__tile {
+  animation: none;
+  box-shadow: inset 0 0 0 1.5px var(--ah-match-line, var(--vf-text-tertiary));
+}