diff --git a/src/components/AgentChip.css b/src/components/AgentChip.css index 17de42e..59255a6 100644 --- a/src/components/AgentChip.css +++ b/src/components/AgentChip.css @@ -1,6 +1,7 @@ .who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .who__disc { + position: relative; display: grid; place-items: center; flex: none; @@ -56,3 +57,35 @@ opacity: 0; transition: opacity .12s; } + +/* The AI mark, on the disc rather than beside the name: it has to survive + showName={false}, and it belongs to the worker, not to the label. Sits + proud of the disc so it stays legible against every one of the five hues, + with a white ring to separate it from the colour underneath. */ +.who__ai { + position: absolute; + right: -3px; + bottom: -3px; + width: 11px; + height: 11px; + fill: var(--zk-amber, #b5761f); + stroke: var(--zk-white, #fff); + stroke-width: 0.9; + stroke-linejoin: round; + paint-order: stroke fill; +} + +.who--md .who__ai { width: 13px; height: 13px; right: -3px; bottom: -3px; } + +/* Said out loud for a screen reader, which cannot see a sparkle. */ +.who__sr { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; +} diff --git a/src/components/AgentChip.jsx b/src/components/AgentChip.jsx index 158157c..fa6d81f 100644 --- a/src/components/AgentChip.jsx +++ b/src/components/AgentChip.jsx @@ -20,8 +20,26 @@ export default function AgentChip({ agentKey, name, size = 'sm', showName = true const body = ( <> - + {/* THE DISC SAYS WHICH WORKER; THE SPARKLE SAYS IT IS NOT A PERSON. + Initials alone do not carry that — "EN" reads as a colleague's + badge, and on a screen whose entire claim is that the work was done + autonomously, the one fact every entry must state is which entries + were. The sparkle is the settled convention for machine-generated + work across current interfaces, so it needs no legend. + + Only agents get it. A trail where a human's disc also carried one + would say nothing at all. */} + {showName ? {label} : null} + {a ? (AI) : null} ) diff --git a/src/screens/Lead.jsx b/src/screens/Lead.jsx index 0c917a2..b2988e4 100644 --- a/src/screens/Lead.jsx +++ b/src/screens/Lead.jsx @@ -316,6 +316,12 @@ export default function Lead() { ['Customer', pick(['customer_name', 'entity_name', 'mobile', 'email'])], [line === 'sme' ? 'The risk' : 'The vehicle', pick(GLANCE_RISK[line])], ['Documents', pick(docKeys)], + // THE CALL IS THE ONE STEP NOBODY CAN REPLAY FROM THE FIELDS. Everything + // else on this lead was typed or derived; this happened out loud, and + // until now its outcome sat in the full file with the source channel while + // the words themselves were reachable only from a button halfway down the + // trail. It gets its own card whenever a call has actually happened. + ['The call', pick(['contact_outcome', 'outreach_window', 'contact_notes'])], ['This stage', pick(GLANCE_STAGE[stage?.uid] || [])], ].filter(([, rows]) => rows.length) @@ -727,6 +733,15 @@ export default function Lead() { ))} + {title === 'The call' && row.call_transcript ? ( + + ) : null} ))} diff --git a/src/screens/screens.css b/src/screens/screens.css index afd3a54..e6190c6 100644 --- a/src/screens/screens.css +++ b/src/screens/screens.css @@ -1534,6 +1534,30 @@ .glance .clamp__more { margin-top: 3px; font-size: 0.7rem; } +/* An action that belongs to one card, not to the panel. Quiet until hovered: + the notes above it are the answer most of the time, and the transcript is + the follow-up question. */ +.glance__act { + display: inline-flex; + align-items: center; + gap: 6px; + margin-top: 10px; + padding: 5px 10px 5px 8px; + border: 1px solid var(--zk-line); + border-radius: var(--r-pill); + background: var(--zk-white); + cursor: pointer; + font: inherit; + font-size: 0.74rem; + font-weight: 500; + color: var(--zk-blue-dark); + transition: background var(--t-fast), border-color var(--t-fast); +} + +.glance__act:hover { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); } +.glance__act:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; } +.glance__act svg { width: 13px; height: 13px; flex: none; } + /* HIDING IS ONLY SAFE WHILE IT STAYS FINDABLE, so this names the number it is holding rather than saying "more". Full width and on the panel's own floor: a link tucked into the header would be the discoverability problem that