/* The assistant side panel. * * Replaces the old per-section "✎ Revise" input and the global corrections box. * Both worked, but they made revision a form field: you opened a box attached to * one section, typed one instruction, and read the answer in a card somewhere * else. This is the same loop as a conversation instead - you point at the part * of the note you mean, say what's wrong with it in the panel, and the change * lands highlighted in the note itself. * * The panel carries the whole exchange: the questions asked before drafting, the * answers, and every revision since. It docks to the right on a wide screen, * becomes a bottom sheet on a narrow one, and collapses to a floating pill so it * is never in the way of the note. * * Defines window.RevisionPanel and window.useTextSelection; loaded before * engine.jsx, which owns all the state. */ /* ── Selecting a phrase to revise ───────────────────────────────────────── Narrative sections are textareas, so a selection is selectionStart/End rather than a DOM Range - which is the easier half. The chip anchors to the textarea's own top-right corner instead of the caret: caret coordinates in a textarea can't be measured without mirroring the content into a hidden div, and the corner is stable, predictable, and never lands under the pointer. */ function useTextSelection(onSelect) { const [chip, setChip] = React.useState(null); // {top, left, id, text} React.useEffect(() => { const read = (e) => { const el = e.target; if (!el || el.tagName !== "TEXTAREA") return; const id = el.getAttribute("data-section-id"); if (!id) return; // only narrative section boxes opt in const start = el.selectionStart, end = el.selectionEnd; const text = (el.value || "").slice(start, end).trim(); if (!text || text.length < 2) { setChip(null); return; } // Clamp to the viewport on BOTH axes. The chip is position:fixed and // anchored to the textarea, so a section below the fold would otherwise // put it off-screen - visible to a test, unclickable to a person. const r = el.getBoundingClientRect(); const CHIP_W = 132, CHIP_H = 40, GUTTER = 8; const vw = document.documentElement.clientWidth || window.innerWidth; const vh = document.documentElement.clientHeight || window.innerHeight; setChip({ top: Math.min(Math.max(GUTTER, r.top - 6), vh - CHIP_H), left: Math.min(Math.max(GUTTER, r.right - 120), vw - CHIP_W), id, text, heading: el.getAttribute("data-section-heading") || "", }); }; const clear = (e) => { // Keep the chip alive while it is being clicked. if (e.target && e.target.closest && e.target.closest("[data-revise-chip]")) return; const el = e.target; if (el && el.tagName === "TEXTAREA" && el.getAttribute("data-section-id")) return; setChip(null); }; document.addEventListener("mouseup", read); document.addEventListener("keyup", read); document.addEventListener("pointerdown", clear); return () => { document.removeEventListener("mouseup", read); document.removeEventListener("keyup", read); document.removeEventListener("pointerdown", clear); }; }, []); const chipEl = chip ? ( ) : null; return { chipEl, clearChip: () => setChip(null) }; } /* ── Panel ────────────────────────────────────────────────────────────────── */ function Bubble({ role, children, muted }) { const mine = role === "user"; return (
{/* A turn is pointable, so a message can be about what was said here rather than about the note. */}
{children}
); } /* ── Skipping the gap questions costs a moment ───────────────────────────── His idea, 2026-08-05, after the audit trail showed something worth acting on: two technicians, 22 sessions, ten gap-question rounds, and ZERO revisions ever made. They generate and copy. The questions are the one moment the session is still in their head, and skipping them is currently one frictionless click. So the escape stays, and it costs a few seconds. The bar drains, then the button works. This is deliberately a delay and NOT a block: the engine's own comment says a tired technician at 7pm with eight notes left must never be trapped behind a question, and that is still right. A wait they can watch end is not a trap; a wait with no exit would be. The duration is passed in rather than fixed here, because his next step is to scale it - the closer the note is to ready, the shorter the drain - and that judgement belongs to whatever can see the note, not to a button. */ function SkipAfterCooldown({ seconds, onSkip, loading }) { const total = Math.max(0, Number(seconds) || 0); const [left, setLeft] = React.useState(total); React.useEffect(() => { setLeft(total); if (!total) return; // Wall-clock, not a tick counter: a backgrounded tab throttles timers, and // counting ticks would make the wait longer for someone who looked away. const started = Date.now(); const id = setInterval(() => { const remaining = Math.max(0, total - Math.round((Date.now() - started) / 1000)); setLeft(remaining); if (remaining <= 0) clearInterval(id); }, 250); return () => clearInterval(id); }, [total]); const ready = left <= 0; const pct = total ? ((total - left) / total) * 100 : 100; return (
{!ready && ( )}
); } function RevisionPanel({ open, onToggle, thread, annotation, onClearAnnotation, draft, onDraft, onSend, onAskAdvice, canAsk, onExportPairs, pairCount, loading, questions, onSkipQuestions, skipCooldown, unread, quality, loggedIn, intro, routingAsks, onTakeRouted, onLeaveRouted, bcbaOffer, onTakeBcba, onDismissBcba, ticketOffer, ticketFiling, onFileTicket, onDismissTicket, pointMode, onPointMode, pointScope, }) { const scrollRef = React.useRef(null); const inputRef = React.useRef(null); const [phiOpen, setPhiOpen] = React.useState(false); // Keep the newest turn in view as the exchange grows. React.useEffect(() => { if (!open || !scrollRef.current) return; scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [open, thread.length, loading, questions]); // Pointing at a section is a statement of intent - put the cursor where the // instruction goes so the next thing typed lands in the right place. React.useEffect(() => { if (open && annotation && inputRef.current) inputRef.current.focus(); }, [open, annotation]); /* Tapping off the panel collapses it, so the technician can get back to the page - but the click still reaches whatever it landed on. * * This started as a full-screen backdrop, which was wrong: it swallowed every * click on the note, and clicking a section is the tool's core gesture. So it * listens instead of blocking, and deliberately does NOT collapse when the * click was on a revisable section or the chip, because that click means * "revise this" and the panel is where the instruction gets typed. */ React.useEffect(() => { if (!open) return; const onDown = (e) => { const t = e.target; if (!t || !t.closest) return; if (t.closest(".revision-panel, .revision-dock, .revision-fab, .point-toggle, [data-revise-chip]")) return; if (t.closest(".section-clickable")) return; // that is a revise gesture // The report modal is opened FROM this panel and covers it. Collapsing // behind it would lose the conversation the report is probably about. if (t.closest("#eb-backdrop")) return; onToggle(); }; document.addEventListener("pointerdown", onDown); return () => document.removeEventListener("pointerdown", onDown); }, [open, onToggle]); const awaitingQuestions = !!(questions && questions.length); /* The error report used to be a second floating circle sitting on the same corner as this pill. It lives in here now, which fixes the collision and also puts it somewhere reachable while LOGGED OUT - the state you are in when the thing you want to report is that you cannot log in. The panel renders before authentication for exactly that reason. */ const openReport = () => { if (window.ErrorReport) window.ErrorReport.open(); }; /* The wordmark, not the word. An img with alt text rather than a CSS background, so the panel header still reads "Ask NoMe" aloud instead of "Ask" followed by silence. The pill carries its own aria-label, which names the note's state and is the more useful thing to announce there. */ const nomeMark = NoMe; const reportButton = ( ); // Collapsed, the assistant is a pill carrying the note's quality at a glance: // green when it reads complete, amber when it is thin but usable, red when // something a payer would ask for is missing. Grey before there is a note to // judge. The state is the reason to open it, so it belongs on the button. const q = quality || {}; const QUALITY = { good: { dot: "#4a8a2f", label: "Note looks complete" }, thin: { dot: "#d9932b", label: "Note is usable but thin" }, missing: { dot: "#b3261e", label: "Note is missing something important" }, idle: { dot: "#a9b89a", label: "No note yet" }, }; const qs = QUALITY[q.level] || QUALITY.idle; // Signed out there is no note to judge, so the disc sits idle and the panel // offers the report instead of a composer. The pill still says Ask NoMe: it // is the same assistant either way, and the label is how a person finds it // when the thing they need to report is that they cannot log in. const signedOut = loggedIn === false; /* Point mode. * * Clicking only worked where a yellow bar already said it would, which reads * as clunky next to Lavish where you can click anything. This is the mode * selector he asked for: it sits beside the collapsed pill, and while it is * on, anything you hover is outlined and anything you click becomes the * thing the next message is about. * * Scope is by role, his call: an admin can point at the whole page including * labels, help text and buttons, because that is where their feedback about * the tool comes from. Everyone else points at note content only, so a * technician cannot end up asking NoMe to revise a heading. */ const pointToggle = onPointMode ? ( ) : null; if (!open) { return (
{pointToggle}
); } return (