hook-cards.css

/* Hook card family (decision 10 of docs/plans/hooks-and-feature-plugins.md).
   Hook executions, deny/ask decisions, and halts render as a distinct
   tool-call-style card family: right-aligned, same blue as the user's own
   messages (--accent), but clearly NOT a user message — they carry the hook
   glyph, a status badge, and the hook id, and are visually grouped to the right
   edge so the human reads them as machine-side provenance. */

/* Right-aligned host: cards line up against the conversation's right edge and
   never grow full-width, so the blue reads as "hook", distinct from the
   left-flowing assistant/tool content. Sits in the messages-list flex column as
   a message's next sibling (like review cards). */
.hook-card-host {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-xs);
  /* Pull up against the anchor message so the hook cards read as part of that
     turn, matching the tool-card top spacing. */
  margin-top: calc(-1 * var(--spacing-sm));
}

/* A hook group anchored to a user prompt (e.g. it fired before the assistant
   said anything that turn) has no assistant-message bulk to pull up against,
   so give it a normal gap instead of the pull-up above. */
.msg-user + .hook-card-host {
  margin-top: var(--spacing-sm);
}

.hook-card,
.hook-card-group {
  align-self: flex-end;
  max-width: min(80%, 460px);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-sm);
}

/* Collapsed group: a turn's hook cards fold into a single summary row
   (`Hooks · N ran`) that expands on click. Machine-side provenance stays quiet
   by default; the summary still carries the worst status so a deny/halt/error
   is never buried. */
.hook-card-group-body {
  margin-top: var(--spacing-xs);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.hook-card-group:not([open]) .hook-card-group-body {
  display: none;
}
/* Inner cards inside an expanded group are flat rows, not cards-in-a-card: the
   group already provides the blue chrome, so drop the nested fill/shadow and let
   them fill the group's width. */
.hook-card-group-body .hook-card {
  max-width: none;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  box-shadow: none;
}

.hook-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  list-style: none;
}
.hook-card-header::-webkit-details-marker {
  display: none;
}

/* The hook glyph carries the family's blue even when a status tints the row. */
.hook-card-icon {
  color: var(--accent);
  flex: none;
}

.hook-name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hook-card-status {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.hook-status-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  flex: none;
}

/* Status tints: a blocking verdict (deny / sandbox-block / error / halt) reads
   as error; an ask reads as warning; allow/ran stay success-green. The card
   keeps its blue family fill — only the status glyph + a hairline shift. */
.hook-card[data-status='allow'] > .hook-card-header > .hook-status-icon,
.hook-card[data-status='ok'] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status='allow'] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status='ok'] > .hook-card-header > .hook-status-icon {
  color: var(--success);
}
.hook-card[data-status='ask'] > .hook-card-header > .hook-status-icon,
.hook-card[data-status='halt-suppressed'] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status='ask'] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status='halt-suppressed'] > .hook-card-header > .hook-status-icon {
  color: var(--warning);
}
.hook-card[data-status='deny'] > .hook-card-header > .hook-status-icon,
.hook-card[data-status='blocked'] > .hook-card-header > .hook-status-icon,
.hook-card[data-status='error'] > .hook-card-header > .hook-status-icon,
.hook-card[data-status='halted'] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status='deny'] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status='blocked'] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status='error'] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status='halted'] > .hook-card-header > .hook-status-icon {
  color: var(--error);
}
.hook-card[data-status='deny'],
.hook-card[data-status='blocked'],
.hook-card[data-status='error'],
.hook-card[data-status='halted'],
.hook-card-group[data-status='deny'],
.hook-card-group[data-status='blocked'],
.hook-card-group[data-status='error'],
.hook-card-group[data-status='halted'] {
  border-color: color-mix(in srgb, var(--error) 45%, var(--border));
}

.hook-card-detail {
  margin-top: var(--spacing-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Collapsed by default: the header carries the verdict; details are on demand. */
.hook-card:not([open]) .hook-card-detail {
  display: none;
}

/* Inspector: the raw record behind a card — what the hook was handed and what it
   returned. Two levels down on purpose (card → inspect → streams): the counts in
   the detail lines answer most questions, and only a reader debugging the hook
   itself needs the bodies. */
.hook-card-raw {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
}
.hook-card:not([open]) .hook-card-raw {
  display: none;
}

.hook-card-raw-summary {
  cursor: pointer;
  list-style: none;
  color: var(--text-secondary);
  width: fit-content;
  padding: 2px 0;
}
.hook-card-raw-summary::-webkit-details-marker {
  display: none;
}
.hook-card-raw-summary::before {
  content: '▸ ';
}
.hook-card-raw[open] > .hook-card-raw-summary::before {
  content: '▾ ';
}
.hook-card-raw-summary:hover {
  color: var(--text-primary);
}

.hook-card-raw-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.hook-card-raw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.hook-card-raw-chip {
  padding: 1px var(--spacing-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.hook-card-raw-status {
  color: var(--text-muted);
}

.hook-card-raw-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hook-card-raw-copy {
  margin-left: auto;
  padding: 0 var(--spacing-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.hook-card-raw-copy:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

/* Bodies can be long and are never wrapped mid-token: scroll inside the block so
   a 4 KB payload cannot stretch the card past the transcript's right edge. */
.hook-card-raw-pre {
  margin: 2px 0 0;
  max-height: 320px;
  overflow: auto;
  padding: var(--spacing-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Origin marker on a machine-started user turn: a small accent label above the
   message body so the turn never reads as human-typed. */
.msg-origin-marker {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--accent);
}
.msg-origin-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-origin-edited {
  color: var(--text-muted);
  font-style: italic;
}