@nxisai/agent-harness 0.2.3 → 0.3.0

package/dist/ui/agent-fullscreen.js

@@ -34,6 +34,10 @@ import { AgentHarness, isAbort } from '../harness/harness.js';
 import { WebMcpTools } from '../harness/tools/webmcp.js';
 import { extractResult, missingRequired, toolSchema, } from '../harness/tools/schema.js';
 import { connectTools } from '../harness/tools/source.js';
+import { handoffFor, isSiteTool, withoutSiteSuffix, HANDOFF_RESULT, } from '../harness/tools/action-tools.js';
+import { resumePendingAction } from '../harness/tools/resume.js';
+import { onJourneyChange } from '../harness/steps.js';
+import { viewJourney } from './journey.js';
 import { AgentCoordinator } from '../harness/router/coordinator.js';
 import { LocalGemmaProvider, humanize, escapeHtml, NXIS_LOGO_SVG, NXIS_SITE_URL, ICON_CHECK, ICON_WARN, ICON_ARROW, ICON_PLUS, ICON_MENU, ICON_TRASH, ICON_STOP, ICON_COPY, ICON_PENCIL, ICON_REDO, ICON_CHECK_MARK, } from '../engine.js';
 import { DEFAULT_SYSTEM_PROMPT, DEFAULT_SUGGESTIONS, DEFAULT_EMPTY_STATE, DEFAULT_AGENT_NAME, DEFAULT_LOGO, THEME_TOKENS, PROFILE_ALIASES, } from './config.js';
@@ -82,6 +86,103 @@ function formatBytes(n) {
     return `${Math.round(mb)} MB`;
 }
 const uid = () => 'c' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+/**
+ * Names for the retrieval tools the package itself bridges in.
+ *
+ * `nxis_query` is a fine name for a model and a poor one for a visitor, and a
+ * native registry may strip any title we attach, so the few tools this package
+ * registers are named here.
+ */
+const FRIENDLY_TOOL_NAMES = {
+    nxis_query: 'Search records',
+    nxis_get: 'Get a record',
+    nxis_list_types: 'List record types',
+};
+const svg = (body) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+/** A plug: the tools the agent can reach. */
+const ICON_TOOLS = svg('<path d="M7 3v4M13 3v4M5 7h10v3a5 5 0 0 1-10 0V7ZM10 15v3"/>');
+const ICON_LOCK = svg('<rect x="4.5" y="9" width="11" height="8" rx="2"/><path d="M7 9V6.5a3 3 0 0 1 6 0V9"/>');
+const ICON_FORM = svg('<rect x="4" y="3.5" width="12" height="13" rx="2"/><path d="M7 8h6M7 11h6M7 14h3"/>');
+const ICON_SEARCH = svg('<circle cx="9" cy="9" r="4.8"/><path d="m13 13 3.5 3.5"/>');
+const ICON_GLOBE = svg('<circle cx="10" cy="10" r="6.5"/><path d="M3.5 10h13M10 3.5c2 2 2 11 0 13M10 3.5c-2 2-2 11 0 13"/>');
+/**
+ * Split a message into prose and code.
+ *
+ * Two things read as code: a fenced block, and a message that is nothing but
+ * JSON — which is what a tool result looks like when something hands one back
+ * raw. Wrapped as prose it becomes a wall of text that breaks at the wrong
+ * places, taking any URL inside it with it.
+ *
+ * @param text - The message.
+ * @returns The parts in order, each marked as code or not.
+ */
+function splitCode(text) {
+    const fenced = text.split(/```[a-zA-Z]*\n?/);
+    // An opening and a closing fence produce at least three parts; the odd ones
+    // are what sat between them.
+    if (fenced.length > 2) {
+        return fenced.map((part, i) => ({ text: i % 2 ? part.replace(/\n$/, '') : part, code: i % 2 === 1 }));
+    }
+    const trimmed = text.trim();
+    if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+        try {
+            return [{ text: JSON.stringify(JSON.parse(trimmed), null, 2), code: true }];
+        }
+        catch {
+            // Starts like JSON without being it — ordinary prose.
+        }
+    }
+    return [{ text, code: false }];
+}
+/** Machine output rather than something someone wrote: JSON, most often raw. */
+function looksMachine(text) {
+    const trimmed = text.trim();
+    if (!trimmed.startsWith('{') && !trimmed.startsWith('['))
+        return false;
+    try {
+        JSON.parse(trimmed);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/** Longer than this, a block is folded away rather than filling the thread. */
+const FOLD_LINES = 10;
+/**
+ * Write a message into its bubble, keeping code as code.
+ *
+ * A long block is folded behind a summary: output worth keeping, but not
+ * worth scrolling past every time. Everything is written as text rather than
+ * markup — a message may carry a tool's output, which is not ours to trust
+ * as HTML.
+ */
+function fillMessage(el, text) {
+    for (const part of splitCode(text)) {
+        if (part.code) {
+            const pre = document.createElement('pre');
+            pre.className = 'codeblock';
+            const code = document.createElement('code');
+            code.textContent = part.text;
+            pre.appendChild(code);
+            const lines = part.text.split('\n').length;
+            if (lines > FOLD_LINES) {
+                const fold = document.createElement('details');
+                fold.className = 'codefold';
+                const summary = document.createElement('summary');
+                summary.textContent = `${lines} lines`;
+                fold.append(summary, pre);
+                el.appendChild(fold);
+            }
+            else {
+                el.appendChild(pre);
+            }
+        }
+        else if (part.text) {
+            el.appendChild(document.createTextNode(part.text));
+        }
+    }
+}
 class NxisAgentFullscreen extends HTMLElement {
     constructor() {
         super();
@@ -95,6 +196,21 @@ class NxisAgentFullscreen extends HTMLElement {
          * on, the re-run would race `_onSend`'s own guard and be dropped.
          */
         this._turnDone = null;
+        /** Stops listening to the journal. */
+        this._offJourney = null;
+        /** Whether the tools menu is showing. */
+        this._toolsOpen = false;
+        /** Closes the tools menu on a press outside it. An arrow, so it can be removed. */
+        this._onOutsidePress = (e) => {
+            if (!this._toolsOpen)
+                return;
+            const path = e.composedPath();
+            if (path.includes(this._els.toolsPop) || path.includes(this._els.toolsBtn))
+                return;
+            this._toggleTools(false);
+        };
+        /** Watches whether the running journey's card is on screen. */
+        this._journeyObserver = null;
         /** Built only when the host defines agents — otherwise there is one harness. */
         this._coordinator = null;
         this._agentDefs = null;
@@ -157,9 +273,15 @@ class NxisAgentFullscreen extends HTMLElement {
             thread: root.querySelector('.thread'),
             status: root.querySelector('.statusline'),
             bar: root.querySelector('.prog > i'),
+            jstatus: root.querySelector('.jstatus'),
             input: root.querySelector('.composer textarea'),
             go: root.querySelector('.composer .go'),
+            toolsBtn: root.querySelector('.tools-btn'),
+            toolsPop: root.querySelector('.tools-pop'),
+            toolsCount: root.querySelector('.tools-count'),
+            model: root.querySelector('.composer .model'),
         };
+        this._applyMode();
         // A host-supplied provider wins; otherwise the local model, configured from
         // the attributes that only mean anything to it.
         this.provider =
@@ -203,6 +325,30 @@ class NxisAgentFullscreen extends HTMLElement {
         this._loadConversations();
         this._renderHistory();
         this._renderThread();
+        // Journey cards follow the journal rather than the renderer, because the
+        // steps that finish a cross-page action are recorded by the resume below,
+        // before any turn — and so before any renderer call — exists on this page.
+        this._offJourney?.();
+        this._offJourney = onJourneyChange((_step, all) => this._onJourney(all));
+        this._els.toolsBtn.addEventListener('click', () => this._toggleTools());
+        this._els.toolsPop.addEventListener('keydown', (e) => {
+            if (e.key !== 'Escape')
+                return;
+            e.stopPropagation();
+            this._toggleTools(false);
+            this._els.toolsBtn.focus();
+        });
+        // Outside the menu closes it. On the document, with the composed path,
+        // so a press anywhere on the host page counts as outside too.
+        document.removeEventListener('pointerdown', this._onOutsidePress);
+        document.addEventListener('pointerdown', this._onOutsidePress);
+        this._els.jstatus.addEventListener('click', () => {
+            const cards = this._els.thread.querySelectorAll('.journey.is-running');
+            cards[cards.length - 1]?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        });
+        // A form confirmed on another page submits here, now that the page it
+        // belongs to is the one open.
+        void this._resumePendingAction();
         this._els.launcher.addEventListener('click', () => this._open());
         this._els.close.addEventListener('click', () => {
             this._els.overlay.classList.remove('show');
@@ -278,6 +424,14 @@ class NxisAgentFullscreen extends HTMLElement {
         if (!open)
             this._els.menu.focus();
     }
+    disconnectedCallback() {
+        document.removeEventListener('pointerdown', this._onOutsidePress);
+        // Moved or removed: nothing left on screen to keep in step with the journal.
+        this._offJourney?.();
+        this._offJourney = null;
+        this._journeyObserver?.disconnect();
+        this._journeyObserver = null;
+    }
     /** Programmatic open (used by pages that dock the agent full-page). */
     open() {
         this._open();
@@ -457,8 +611,11 @@ class NxisAgentFullscreen extends HTMLElement {
                 this._els.thread.appendChild(this._resultsEl(it));
             else if (it.kind === 'metrics')
                 this._els.thread.appendChild(this._metricsEl(it));
+            else if (it.kind === 'journey')
+                this._els.thread.appendChild(this._journeyEl(it));
         }
         this._scroll();
+        this._watchRunningJourney();
     }
     _clearEmpty() {
         const e = this._els.thread.querySelector('.empty');
@@ -484,7 +641,7 @@ class NxisAgentFullscreen extends HTMLElement {
             ? 'self-end bg-blue text-white rounded-2xl rounded-br-md'
             : 'self-start bg-surface text-ink border border-border-hair rounded-2xl rounded-bl-md shadow-resting';
         el.className = `msg ${role} ${base} ${byRole}`;
-        el.textContent = text;
+        fillMessage(el, text);
         return el;
     }
     /**
@@ -502,15 +659,27 @@ class NxisAgentFullscreen extends HTMLElement {
                 (isError
                     ? 'bg-surface border-red/25 text-red'
                     : 'bg-surface border-border-hair text-green-strong');
-        el.innerHTML =
-            `<b class="flex items-center gap-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em]">` +
-                `${isError ? ICON_WARN : ICON_CHECK}${escapeHtml(name)}</b>` +
-                `<div class="mt-1 font-sans text-[13px] leading-normal text-ink-2">${escapeHtml(text)}</div>`;
+        const head = document.createElement('b');
+        head.className =
+            'flex items-center gap-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em]';
+        head.innerHTML = `${isError ? ICON_WARN : ICON_CHECK}${escapeHtml(name)}`;
+        const body = document.createElement('div');
+        body.className = 'mt-1 font-sans text-[13px] leading-normal text-ink-2';
+        // A tool's own sentence is worth showing; its raw payload is for whoever
+        // is building the agent, and lives in the trace, which `debug` governs.
+        const shown = this.debug || !looksMachine(text)
+            ? text
+            : `${humanize(name)} could not be completed.`;
+        fillMessage(body, shown);
+        el.append(head, body);
         return el;
     }
     _detailEl(item) {
         const rows = (item.rows || [])
-            .map((r) => `<div class="dc-row"><dt>${escapeHtml(r.label)}</dt><dd>${escapeHtml(r.value)}</dd></div>`)
+            .map((r) => 
+        // Focusable, so a keyboard can open a truncated row the way a pointer does.
+        `<div class="dc-row" tabindex="0"><dt title="${escapeHtml(r.label)}">${escapeHtml(r.label)}</dt>` +
+            `<dd title="${escapeHtml(r.value)}">${escapeHtml(r.value)}</dd></div>`)
             .join('');
         const el = document.createElement('div');
         el.className = 'msg detail';
@@ -727,6 +896,133 @@ class NxisAgentFullscreen extends HTMLElement {
         el.appendChild(body);
         return el;
     }
+    /**
+     * A journey as a card in the thread.
+     *
+     * Open while it runs, so the step being taken is on screen; folded to one
+     * line once it finishes, so the thread reads as a record rather than a wall
+     * of finished checklists. A `<details>` either way, so a folded journey can
+     * still be opened.
+     */
+    _journeyEl(item) {
+        const view = viewJourney(item.steps);
+        const el = document.createElement('details');
+        el.className = `msg journey is-${view?.outcome ?? 'running'}`;
+        el.dataset.journey = item.id;
+        el.open = view?.outcome === 'running';
+        if (view?.active)
+            el.dataset.active = view.active.label;
+        const summary = document.createElement('summary');
+        const mark = document.createElement('span');
+        mark.className = 'j-sum-mark';
+        mark.setAttribute('aria-hidden', 'true');
+        if (view?.outcome === 'done')
+            mark.textContent = '✓';
+        if (view?.outcome === 'failed')
+            mark.textContent = '!';
+        const title = document.createElement('span');
+        title.className = 'j-title';
+        title.textContent = view?.title ?? 'Working on it';
+        const state = document.createElement('span');
+        state.className = 'j-state';
+        // Running, the header says what is happening now; finished, it says how
+        // it ended, which is the one thing a folded card has to carry.
+        state.textContent =
+            view?.outcome === 'running' ? (view.active?.label ?? '') : (view?.summary.split(' · ')[1] ?? '');
+        summary.append(mark, title, state);
+        el.appendChild(summary);
+        const list = document.createElement('ol');
+        list.className = 'j-steps';
+        (view?.steps ?? []).forEach((step, i) => {
+            const li = document.createElement('li');
+            li.className = `j-step is-${step.status}`;
+            const m = document.createElement('span');
+            m.className = 'j-mark';
+            m.textContent = step.status === 'done' ? '✓' : step.status === 'failed' ? '!' : String(i + 1);
+            const label = document.createElement('span');
+            label.className = 'j-label';
+            // Text throughout: a label can carry a business name from the site's data.
+            label.textContent = step.label;
+            label.title = step.detail ? `${step.label} — ${step.detail}` : step.label;
+            if (step.detail) {
+                const small = document.createElement('small');
+                small.textContent = step.detail;
+                label.appendChild(small);
+            }
+            li.append(m, label);
+            list.appendChild(li);
+        });
+        el.appendChild(list);
+        return el;
+    }
+    /**
+     * Keep a journey's card, and its record in the conversation, up to date.
+     *
+     * Looks for the journey in every conversation before assuming it is new:
+     * on arrival after a page change the resume records steps before the
+     * conversation they came from has been reopened, and those steps belong
+     * with the card saved on the page before, not in whichever thread is open.
+     */
+    _onJourney(all) {
+        const view = viewJourney(all);
+        if (!view?.id)
+            return;
+        const isThis = (it) => it.kind === 'journey' && it.id === view.id;
+        let conv = this._conversations.find((c) => c.items.some(isThis));
+        let item = conv?.items.find(isThis);
+        if (conv && item) {
+            item.steps = all;
+        }
+        else {
+            conv = this._active() ?? undefined;
+            if (!conv)
+                return;
+            item = { kind: 'journey', id: view.id, steps: all };
+            conv.items.push(item);
+        }
+        if (conv.id === this._activeId && this._els?.thread) {
+            const fresh = this._journeyEl(item);
+            const old = this._els.thread.querySelector(`[data-journey="${CSS.escape(view.id)}"]`);
+            if (old) {
+                // Keep a folded card open if someone opened it to read.
+                if (old.open && view.outcome !== 'running')
+                    fresh.open = true;
+                old.replaceWith(fresh);
+            }
+            else {
+                this._clearEmpty();
+                this._els.thread.appendChild(fresh);
+                this._scroll();
+            }
+            this._watchRunningJourney();
+        }
+        this._saveConversations();
+    }
+    /**
+     * Show the status line only while the running journey is out of view.
+     *
+     * The card is where the steps are; the line exists for the moment a long
+     * reply pushes it off the top of the thread mid-action, and hides again as
+     * soon as the card is back.
+     */
+    _watchRunningJourney() {
+        this._journeyObserver?.disconnect();
+        this._journeyObserver = null;
+        const bar = this._els?.jstatus;
+        if (!bar)
+            return;
+        const cards = this._els.thread.querySelectorAll('.journey.is-running');
+        const card = cards[cards.length - 1];
+        if (!card || typeof IntersectionObserver === 'undefined') {
+            bar.hidden = true;
+            return;
+        }
+        bar.querySelector('.js-label').textContent = card.dataset.active ?? '';
+        this._journeyObserver = new IntersectionObserver((entries) => {
+            bar.hidden = entries[entries.length - 1].isIntersecting;
+        }, { root: this._els.thread, threshold: 0.2 });
+        this._journeyObserver.observe(card);
+    }
     _paintToolResult(name, text, isError) {
         this._clearEmpty();
         const el = this._toolEl(name, text, isError);
@@ -771,6 +1067,8 @@ class NxisAgentFullscreen extends HTMLElement {
         go.classList.toggle('stop', canStop);
         go.innerHTML = canStop ? ICON_STOP : ICON_ARROW;
         go.setAttribute('aria-label', canStop ? 'Stop' : 'Send');
+        // The model's dot pulses while it is working, so the two controls agree.
+        this._els.model.classList.toggle('busy', canStop);
         // Enabled either way: disabling it during a turn would disable the very
         // control needed to stop that turn.
         go.disabled = false;
@@ -901,6 +1199,9 @@ class NxisAgentFullscreen extends HTMLElement {
             this._syncProfileContext();
             // One agent, or several with a router in front: the signatures match.
             await (this._coordinator ?? this._harness).turn(goal, conv.messages);
+            // A remote endpoint reports which model answered; the name beside the
+            // input follows it rather than keeping whatever was configured.
+            this._paintProvenance();
         }
         catch (err) {
             // A cancelled turn has already reported itself in the thread, and is not
@@ -1059,8 +1360,17 @@ class NxisAgentFullscreen extends HTMLElement {
         this._clearEmpty();
         this._dismissPrompt();
         const rows = req.slots
-            .map((sl) => `<div class="dc-row"><dt>${escapeHtml(sl.schema.description || humanize(sl.name))}</dt><dd>${escapeHtml(String(sl.value ?? ''))}</dd></div>`)
+            .map((sl) => {
+            const label = escapeHtml(sl.schema.description || humanize(sl.name));
+            const value = escapeHtml(String(sl.value ?? ''));
+            return `<div class="dc-row" tabindex="0"><dt title="${label}">${label}</dt><dd title="${value}">${value}</dd></div>`;
+        })
             .join('');
+        // Where pressing submit leads, when that is another page. Said here in a
+        // sentence so the button itself can stay short enough for a narrow card.
+        const sub = req.destination
+            ? `Submitting opens the page for ${escapeHtml(req.destination)} and sends it from there.`
+            : 'Review these details, then submit.';
         const wrap = document.createElement('div');
         wrap.className = 'msg detail';
         wrap.innerHTML = `
@@ -1068,12 +1378,12 @@ class NxisAgentFullscreen extends HTMLElement {
         <div class="dc-badge review">${ICON_ARROW}</div>
         <div class="dc-eyebrow review">Ready to send</div>
         <div class="dc-title">${escapeHtml(humanize(req.tool.name))}</div>
-        <div class="dc-sub">Review these details, then submit.</div>
+        <div class="dc-sub">${sub}</div>
         <dl class="dc-list">${rows || '<div class="dc-row"><dd>No details captured.</dd></div>'}</dl>
         <div class="dc-actions">
           <button type="button" class="btn ghost" data-act="cancel">Cancel</button>
           <button type="button" class="btn ghost" data-act="edit">Edit</button>
-          <button type="button" class="btn primary" data-act="submit">Submit ${ICON_ARROW}</button>
+          <button type="button" class="btn primary" data-act="submit">${escapeHtml(req.submitLabel ?? 'Submit')} ${ICON_ARROW}</button>
         </div>
       </div>`;
         wrap.querySelector('[data-act="cancel"]').addEventListener('click', () => req.onCancel());
@@ -1281,6 +1591,9 @@ class NxisAgentFullscreen extends HTMLElement {
         submitBtn.disabled = true;
         result.className = 'genform-result';
         result.textContent = 'Submitting…';
+        // Read before the call: a registry may return only the response's text,
+        // and the annotations already say whether this call leaves the page.
+        const leaving = handoffFor(tool, values);
         try {
             this._setStatus(`Running ${tool.name}…`);
             const res = await this.toolSource.execTool(tool, tool.name, values);
@@ -1293,6 +1606,18 @@ class NxisAgentFullscreen extends HTMLElement {
                 submitBtn.disabled = false;
                 return;
             }
+            // A call that left for another page has filled in nothing yet, so it
+            // must not become a "Submitted" card. The page it is opening finishes
+            // the job and draws the card there.
+            if (leaving || res?.structuredContent?.[HANDOFF_RESULT]) {
+                this._dismissPrompt();
+                // From what we know, not from the response: a registry may hand back
+                // the whole response object as JSON.
+                this._appendMsg('assistant', leaving
+                    ? `Opening ${leaving.label} to submit this…`
+                    : 'Opening the page that can submit this…');
+                return;
+            }
             // Success → the form transitions inline. A write tool (form/action)
             // becomes a "Submitted" detail card; a read-only tool (typed retrieval)
             // becomes result cards for the records it returned.
@@ -1575,7 +1900,8 @@ class NxisAgentFullscreen extends HTMLElement {
         const cardsHtml = item.cards
             .map((c) => {
             const rows = c.rows
-                .map((r) => `<div class="rc-row"><dt>${escapeHtml(r.label)}</dt><dd>${r.href ? `<a href="${escapeHtml(r.href)}">${escapeHtml(r.value)}</a>` : escapeHtml(r.value)}</dd></div>`)
+                .map((r) => `<div class="rc-row"><dt title="${escapeHtml(r.label)}">${escapeHtml(r.label)}</dt>` +
+                `<dd title="${escapeHtml(r.value)}">${r.href ? `<a href="${escapeHtml(r.href)}">${escapeHtml(r.value)}</a>` : escapeHtml(r.value)}</dd></div>`)
                 .join('');
             const tags = (c.type ? `<span class="tag blue"><i class="dot"></i>${escapeHtml(c.type)}</span>` : '') +
                 (c.rating ? `<span class="tag green"><i class="dot"></i>${escapeHtml(c.rating)}</span>` : '') +
@@ -1585,8 +1911,8 @@ class NxisAgentFullscreen extends HTMLElement {
             <div class="rc-chip">${this._logoMarkup()}</div>
             <div class="rc-tags">${tags}</div>
           </div>
-          <div class="rc-title">${escapeHtml(c.title)}</div>
-          ${c.sub ? `<div class="rc-sub">${escapeHtml(c.sub)}</div>` : ''}
+          <div class="rc-title" title="${escapeHtml(c.title)}">${escapeHtml(c.title)}</div>
+          ${c.sub ? `<div class="rc-sub" title="${escapeHtml(c.sub)}">${escapeHtml(c.sub)}</div>` : ''}
           ${rows ? `<dl class="rc-list">${rows}</dl>` : ''}
           ${c.id ? `<div class="rc-id"><code>${escapeHtml(c.id)}</code></div>` : ''}
         </div>`;
@@ -1997,12 +2323,79 @@ class NxisAgentFullscreen extends HTMLElement {
         el.textContent = `routed to ${item.agent} · ${item.via}`;
         return el;
     }
+    /**
+     * Submit a form that was confirmed on another page.
+     *
+     * An action runs by filling the form on its own page, so a call made
+     * elsewhere was confirmed there and carried here. The values were already
+     * reviewed and pressed, which is why this submits rather than asking again —
+     * the button that started it said it would open this page and submit.
+     *
+     * Nothing waiting is the ordinary case, and costs a single storage read.
+     */
+    async _resumePendingAction() {
+        const outcome = await resumePendingAction({
+            onStart: (pending) => {
+                // Back to the conversation it was started in, so the result lands
+                // under the question that prompted it rather than in a fresh thread.
+                const conv = this._conversations.find((c) => c.id === pending.conversationId);
+                if (conv) {
+                    this._activeId = conv.id;
+                    this._renderHistory();
+                    this._renderThread();
+                }
+                this._open();
+                this._setStatus('Submitting the details you confirmed…');
+            },
+            exec: (tool, values) => this.toolSource.execTool(tool, tool.name, values),
+        });
+        if (outcome.status !== 'none')
+            this._setStatus('');
+        switch (outcome.status) {
+            case 'none':
+                return;
+            // Either way the form is out of reach, and saying which of the two
+            // failed would describe our plumbing rather than their situation.
+            case 'no-registry':
+            case 'no-tool':
+                this._appendMsg('assistant', `I could not find the ${humanize(outcome.pending.pageToolName)} on this page, so ` +
+                    'nothing was submitted. Ask me again and I will fill it in from here.');
+                return;
+            case 'incomplete':
+                this._appendMsg('assistant', `I brought your details over. This form also needs ${outcome.missing
+                    .map((m) => humanize(m).toLowerCase())
+                    .join(', ')}.`);
+                this._renderForm(outcome.tool, outcome.pending.values);
+                return;
+            case 'rejected':
+                this._appendMsg('assistant', outcome.text || 'That form did not accept the details.');
+                return;
+            case 'failed':
+                this._appendMsg('assistant', `That form could not be submitted: ${outcome.error}`);
+                return;
+            case 'submitted': {
+                const active = this._active();
+                const item = this._buildDetailItem(outcome.tool, outcome.pending.values, outcome.text);
+                active?.items.push(item);
+                active?.messages.push({
+                    role: 'user',
+                    content: `[${outcome.tool.name} submitted with: ${JSON.stringify(outcome.pending.values)}]. ` +
+                        'Keep these unless I ask to change them.',
+                });
+                this._els.thread.appendChild(this._detailEl(item));
+                this._saveConversations();
+                this._scroll();
+            }
+        }
+    }
     /**
      * Bring in the site's own MCP server, once.
      *
      * The page's own action tools register themselves. Remote tools do not: they
      * live on an MCP server that must be discovered through
-     * `/.well-known/ai-catalog.json` and bridged into the page's registry.
+     * `/.well-known/ai-catalog.json` and bridged into the page's registry. The
+     * same connection lists the actions on the site's other pages, unless
+     * `site-actions="false"`.
      *
      * Runs on first open rather than on connect, so an unopened launcher costs no
      * network request. Failure is neither fatal nor loud: a site with no MCP
@@ -2015,21 +2408,134 @@ class NxisAgentFullscreen extends HTMLElement {
             this._connect = Promise.resolve();
             return this._connect;
         }
-        this._connect = connectTools(this.getAttribute('mcp-api-key') || undefined, {
+        // No credential is passed, and the element takes none: a key in markup or
+        // in a page global is served to every visitor and readable by every script
+        // on the origin. Private tools belong behind an endpoint you host — see
+        // `createProxyProvider` for the same decision on the model key.
+        this._connect = connectTools(undefined, {
             // Short, because this blocks the first turn: a provider that has not
             // appeared within a few seconds is not going to.
             timeout: 4000,
+            siteActions: this.getAttribute('site-actions') !== 'false',
         })
-            .then(({ remoteTools, warning }) => {
+            .then(({ remoteTools, siteActions, siteTools, warning }) => {
             if (warning)
                 console.warn('[nxis-agent]', warning);
-            else if (remoteTools.length) {
+            if (remoteTools.length) {
                 console.info(`[nxis-agent] discovered remote tools: ${remoteTools.join(', ')}`);
             }
+            if (siteActions.length) {
+                console.info(`[nxis-agent] ${siteActions.length} site action(s) → ` +
+                    `${siteTools.length} tool(s): ${siteTools.join(', ')}`);
+            }
+            void this._refreshToolCount();
+            // The page's own script can register after we connect, and a native
+            // registry announces it. Keep the count honest as it does.
+            this.toolSource.modelContext()?.addEventListener('toolchange', () => {
+                void this._refreshToolCount();
+                if (this._toolsOpen)
+                    void this._renderTools();
+            });
         })
             .catch((err) => console.warn('[nxis-agent] tool discovery failed:', err));
         return this._connect;
     }
+    // ── Tools menu ─────────────────────────────────────────────────────────────
+    /** Open or close the list of tools the agent can use. */
+    _toggleTools(open = !this._toolsOpen) {
+        this._toolsOpen = open;
+        this._els.toolsBtn.setAttribute('aria-expanded', String(open));
+        this._els.toolsPop.hidden = !open;
+        if (open)
+            void this._renderTools();
+    }
+    /** The number on the tools button, from what the agent would be offered now. */
+    async _refreshToolCount() {
+        const tools = await this._harness.offeredTools();
+        this._els.toolsCount.textContent = String(tools.length);
+        this._els.toolsCount.hidden = tools.length === 0;
+        this._els.toolsBtn.setAttribute('aria-label', tools.length ? `Tools on this page, ${tools.length}` : 'Tools on this page');
+    }
+    /**
+     * Draw the tools menu.
+     *
+     * Lists what the agent would be offered, not every tool registered: that
+     * is the honest answer to "what can it do here". Grouped by where a tool
+     * reaches — this page's own forms, then what works across the site — which
+     * is what explains why a form from another listing is on the list. Every
+     * row is disabled: the site provides these, and they are not the visitor's
+     * to switch off.
+     */
+    async _renderTools() {
+        const pop = this._els.toolsPop;
+        const head = '<div class="tp-head"><div class="tp-title">What the agent can use here</div>' +
+            '<div class="tp-sub">This site provides these tools. They load with the page and cannot be turned off.</div></div>';
+        pop.innerHTML = `${head}<div class="tp-empty">Looking for tools…</div>`;
+        const tools = await this._harness.offeredTools();
+        if (!this._toolsOpen)
+            return;
+        this._els.toolsCount.textContent = String(tools.length);
+        this._els.toolsCount.hidden = tools.length === 0;
+        pop.innerHTML = head;
+        if (!tools.length) {
+            pop.insertAdjacentHTML('beforeend', '<div class="tp-empty">No tools on this page yet.</div>');
+            return;
+        }
+        const readOnly = (t) => !!t.annotations?.readOnlyHint;
+        const onPage = tools.filter((t) => !isSiteTool(t) && !readOnly(t));
+        const acrossSite = tools.filter((t) => isSiteTool(t) || readOnly(t));
+        const group = (label, list) => {
+            if (!list.length)
+                return;
+            const title = document.createElement('div');
+            title.className = 'tp-grp';
+            title.textContent = label;
+            pop.appendChild(title);
+            for (const tool of list)
+                pop.appendChild(this._toolRow(tool));
+        };
+        group('On this page', onPage);
+        group('Across the site', acrossSite);
+        if (tools.some((t) => !readOnly(t))) {
+            pop.insertAdjacentHTML('beforeend', '<div class="tp-foot">Anything that submits a form asks you first.</div>');
+        }
+    }
+    /** One tool in the menu: what it is, whether it writes, and a lock. */
+    _toolRow(tool) {
+        const site = isSiteTool(tool);
+        const reads = !!tool.annotations?.readOnlyHint;
+        const base = FRIENDLY_TOOL_NAMES[tool.name] ?? humanize(withoutSiteSuffix(tool.name));
+        const name = (base.charAt(0).toUpperCase() + base.slice(1)) + (site ? ' · any page' : '');
+        const desc = (tool.description ?? '').split(/(?<=[.!?])\s/)[0] ?? '';
+        const row = document.createElement('div');
+        row.className = 'tp-tool';
+        row.setAttribute('aria-disabled', 'true');
+        row.title = desc ? `${name} — ${desc}` : name;
+        const icon = document.createElement('span');
+        icon.className = 'tp-ti';
+        icon.innerHTML = site ? ICON_GLOBE : reads ? ICON_SEARCH : ICON_FORM;
+        const text = document.createElement('span');
+        text.className = 'tp-tn';
+        const n = document.createElement('span');
+        n.className = 'tp-name';
+        // Text, not markup: names and descriptions come from the site's data.
+        n.textContent = name;
+        text.appendChild(n);
+        if (desc) {
+            const d = document.createElement('span');
+            d.className = 'tp-desc';
+            d.textContent = desc;
+            text.appendChild(d);
+        }
+        const kind = document.createElement('span');
+        kind.className = 'tp-kind';
+        kind.textContent = reads ? 'reads' : 'asks first';
+        const lock = document.createElement('span');
+        lock.className = 'tp-lock';
+        lock.innerHTML = ICON_LOCK;
+        row.append(icon, text, kind, lock);
+        return row;
+    }
     /**
      * Report a failure in the thread, where it will be seen.
      *
@@ -2175,6 +2681,43 @@ class NxisAgentFullscreen extends HTMLElement {
      *
      * Enabling it affects subsequent turns, not those already recorded.
      */
+    /**
+     * How much of the page the agent takes when open.
+     *
+     * `'fullscreen'` covers the page, which suits a site where the agent is the
+     * experience. `'window'` docks it in the corner at
+     * `--window-w` × `--window-h` (400 × 620 by default), for a site whose own
+     * content should stay visible and usable beside it. Below 520px a window
+     * covers the page anyway, since at that width the two are the same thing.
+     *
+     * `'inline'` fills the box the host puts the element in and is always
+     * open — for a copilot rail or a sidebar the host lays out itself. The
+     * element does not position itself or move the page; the host does both.
+     */
+    get mode() {
+        const raw = this.getAttribute('mode');
+        return raw === 'window' || raw === 'inline' ? raw : 'fullscreen';
+    }
+    set mode(next) {
+        this.setAttribute('mode', next === 'window' || next === 'inline' ? next : 'fullscreen');
+        this._applyMode();
+    }
+    /** Put the overlay in the shape {@link mode} asks for. */
+    _applyMode() {
+        const overlay = this._els?.overlay;
+        if (!overlay)
+            return;
+        const mode = this.mode;
+        overlay.classList.toggle('window', mode === 'window');
+        overlay.classList.toggle('inline', mode === 'inline');
+        if (mode === 'inline') {
+            // Always on screen, so it has to be ready without an open. Tools are
+            // cheap to connect; the model still waits for `preload` or a first
+            // message, so a rail on every page does not cost every visitor 3.4 GB.
+            overlay.classList.add('show');
+            void this._connectTools();
+        }
+    }
     get debug() {
         const raw = (this.getAttribute('debug') || '').toLowerCase();
         if (!this.hasAttribute('debug'))
@@ -2254,10 +2797,18 @@ class NxisAgentFullscreen extends HTMLElement {
      * can be replaced later.
      */
     _paintProvenance() {
+        const local = this.provider?.local ?? true;
+        // Beside the input: which model is answering, and where it runs.
+        const model = this.shadowRoot?.querySelector('.composer .model');
+        if (model) {
+            const label = this.provider?.label || this.provider?.name || 'Model';
+            model.querySelector('.model-name').textContent = label;
+            model.querySelector('.model-where').textContent = local ? 'on-device' : 'remote';
+            model.setAttribute('title', `${label}, ${local ? 'running in this browser' : 'running on a server'}`);
+        }
         const badge = this.shadowRoot?.querySelector('.provenance');
         if (!badge?.lastChild)
             return;
-        const local = this.provider?.local ?? true;
         badge.lastChild.textContent = local ? 'On-device' : 'Remote';
         badge.setAttribute('title', local
             ? 'The model runs in this browser. Nothing you type leaves the device.'
@@ -2288,7 +2839,7 @@ class NxisAgentFullscreen extends HTMLElement {
         --ink:#0F172A; --ink-2:#475569; --ink-3:#8A97AC;
         --blue:#2563EB; --blue-strong:#1D4ED8; --blue-tint:#EEF3FF;
         --green:#22C55E; --green-strong:#16A34A; --green-tint:#E8FAEF;
-        --inline-bg:#EEF2F8; --red:#B91C1C;
+        --inline-bg:#EEF2F8; --red:#B91C1C; --stop:#DC2626; --stop-strong:#B91C1C;
         --radius:14px; --radius-sm:10px; --radius-pill:999px;
         --shadow-sm:0 1px 2px rgba(15,23,42,.05);
         --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 30px rgba(15,23,42,.06);
@@ -2336,6 +2887,101 @@ class NxisAgentFullscreen extends HTMLElement {
       .overlay.show { display: flex; animation: fade .2s ease; }
       @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
 
+      /* ── Window mode ────────────────────────────────────────────
+         The same panel, docked in a corner rather than covering the
+         page — for a site that wants an assistant beside its content
+         instead of in front of it. The host sets the size through
+         --window-w and --window-h. */
+      .overlay.window {
+        inset: auto; right: 20px; bottom: 20px;
+        width: min(var(--window-w, 400px), calc(100vw - 32px));
+        height: min(var(--window-h, 620px), calc(100vh - 32px));
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius);
+        box-shadow: 0 24px 60px rgba(15,23,42,.22);
+        overflow: hidden;
+      }
+      /* ── Inline mode ────────────────────────────────────────────
+         Fills whatever box the host puts it in — a copilot rail, a sidebar,
+         a column — and leaves where that box goes, and what the page does
+         to make room, to the host. Always open: there is no launcher to
+         press and nothing to close back to. */
+      :host([mode="inline"]) { display: block; position: relative; height: 100%; }
+      :host([mode="inline"]) .launcher { display: none; }
+      /* overflow: hidden is what keeps the conversation drawer inside the
+         host's box. Closed, the drawer waits just off the left edge; without
+         the clip it sits on top of the host's page, and pressing the menu
+         only slides it between two visible places. */
+      .overlay.inline { position: absolute; inset: 0; z-index: auto; animation: none; overflow: hidden; }
+      .overlay.inline .close { display: none; }
+
+      /* The conversation list cannot sit beside a narrow thread, so in a
+         window or a rail it behaves as the drawer the narrow layout already
+         defines, whatever the viewport is doing. */
+      .overlay.window .side, .overlay.inline .side {
+        position: absolute; inset: 0 auto 0 0; z-index: 6;
+        transform: translateX(-100%); transition: transform .2s ease;
+        box-shadow: 0 18px 48px rgba(15,23,42,.18);
+      }
+      .overlay.window.nav .side, .overlay.inline.nav .side { transform: none; }
+      .overlay.window.nav .scrim, .overlay.inline.nav .scrim {
+        display: block; position: absolute; inset: 0; z-index: 5;
+        background: rgba(15,23,42,.32);
+      }
+      .overlay.window .menu, .overlay.inline .menu { display: flex; }
+      .overlay.window .msg, .overlay.inline .msg { max-width: 88%; }
+      .overlay.window .hist-del, .overlay.inline .hist-del { opacity: 1; }
+      .overlay.window .main-head, .overlay.inline .main-head { padding: 12px 14px; }
+      .overlay.window .thread, .overlay.inline .thread { padding: 14px; }
+      @media (prefers-reduced-motion: reduce) {
+        .overlay.window .side, .overlay.inline .side { transition: none; }
+      }
+
+      /* ── Journeys ───────────────────────────────────────────────
+         What the agent did about a request, as a card under it. */
+      .msg.journey { align-self: stretch; max-width: 100%; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
+      .msg.journey > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); }
+      .msg.journey > summary::-webkit-details-marker { display: none; }
+      .msg.journey > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
+      .msg.journey[open] > summary { background: var(--surface); border-bottom: 1px solid var(--border); }
+      .j-title { font-family: var(--display); font-weight: 700; color: var(--ink); white-space: nowrap; }
+      .j-state { margin-left: auto; min-width: 0; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .j-sum-mark { width: 16px; height: 16px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
+      .is-running .j-sum-mark { border: 2px solid var(--blue); border-right-color: transparent; animation: jspin 1s linear infinite; }
+      .is-done .j-sum-mark { background: var(--green-tint); color: var(--green-strong); }
+      .is-failed .j-sum-mark { background: rgba(185,28,28,.1); color: var(--red); }
+      .is-failed .j-state { color: var(--red); }
+      @keyframes jspin { to { transform: rotate(360deg); } }
+      .j-steps { list-style: none; margin: 0; padding: 12px; display: grid; }
+      .j-step { display: grid; grid-template-columns: 20px 1fr; gap: 10px; position: relative; padding-bottom: 10px; font-size: 12.5px; }
+      .j-step:last-child { padding-bottom: 0; }
+      .j-step:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 21px; bottom: 1px; width: 1px; background: var(--border-strong); }
+      .j-mark { width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink-3); font-size: 10px; display: grid; place-items: center; z-index: 1; }
+      .j-step.is-done .j-mark { background: var(--green-tint); border-color: var(--green-strong); color: var(--green-strong); }
+      .j-step.is-active .j-mark { background: var(--blue); border-color: var(--blue); color: #fff; }
+      .j-step.is-failed .j-mark { background: rgba(185,28,28,.1); border-color: var(--red); color: var(--red); }
+      .j-label { color: var(--ink-2); line-height: 1.35; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .j-label small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .j-step:hover .j-label, .j-step:hover .j-label small { white-space: normal; overflow: visible; }
+      .j-step.is-done .j-label, .j-step.is-active .j-label { color: var(--ink); }
+      .j-step.is-active .j-label { font-weight: 600; }
+      .j-label small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); margin-top: 1px; }
+
+      /* The running step, while its card is scrolled out of view. */
+      .jstatus { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: var(--blue-tint); color: var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 8px 20px; cursor: pointer; text-align: left; }
+      .jstatus[hidden] { display: none; }
+      .jstatus:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
+      .js-spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid var(--blue); border-right-color: transparent; animation: jspin 1s linear infinite; }
+      .js-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .js-go { margin-left: auto; font-weight: 500; color: var(--blue-strong); }
+      .overlay.window .jstatus, .overlay.inline .jstatus { padding: 8px 14px; }
+      @media (prefers-reduced-motion: reduce) { .is-running .j-sum-mark, .js-spin { animation: none; } }
+      /* Narrower than the card, a card is the viewport: drop the chrome
+         rather than leaving a 16px frame around a full-height panel. */
+      @media (max-width: 520px) {
+        .overlay.window { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; }
+      }
+
       /* ── Side panel ─────────────────────────────────────────────── */
       .scrim { display: none; }
       .side { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--border); }
@@ -2557,24 +3203,66 @@ class NxisAgentFullscreen extends HTMLElement {
 
       .statusline { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); padding: 4px 20px 0; min-height: 15px; }
       .statusline.err { color: var(--red); }
-      .composer { display: flex; align-items: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
+      /* ── Composer: the input, with a bar beneath it ─────────────
+         Tools on the left, the model beside them, send or stop on the
+         right. One box around both, so the bar reads as part of the input
+         rather than a second control strip. */
+      .composer { padding: 12px 20px 14px; border-top: 1px solid var(--border); }
+      .overlay.window .composer, .overlay.inline .composer { padding: 10px 12px 12px; }
+      .cbox { border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg); padding: 8px 8px 8px 12px; transition: border-color .15s ease, box-shadow .15s ease; }
+      .cbox:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
       .composer textarea {
-        flex: 1; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink); resize: none;
-        background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px; outline: none;
-        max-height: 140px; overflow-y: auto; transition: border-color .15s ease, box-shadow .15s ease;
+        display: block; width: 100%; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink); resize: none;
+        background: transparent; border: 0; padding: 2px 2px 8px; outline: none; max-height: 140px; overflow-y: auto;
       }
-      .composer textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
       .composer textarea::placeholder { color: var(--ink-3); }
-      .composer .go { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); border: none; background: var(--blue); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(37,99,235,.3); }
+      .cbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
+      .composer .go { margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--blue); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(37,99,235,.3); }
       .composer .go:hover { background: var(--blue-strong); }
       .composer .go:disabled { opacity: .45; cursor: not-allowed; }
-      /* Stopping is not a destructive act and does not get a red button. The
-         shape changes (arrow to square) and the fill drops back to a neutral
-         surface, which is enough to say "this does something else now" without
-         implying the turn in progress was a mistake. */
-      .composer .go.stop { background: var(--surface-2); color: var(--ink-2); box-shadow: none; border: 1px solid var(--border-strong); }
-      .composer .go.stop:hover { background: var(--surface); color: var(--ink); }
+      /* Stop is red, with a filled white square: while a prompt runs this is
+         the one control that matters, and it has to be found at a glance. */
+      .composer .go.stop { background: var(--stop); color: #fff; border: 0; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
+      .composer .go.stop:hover { background: var(--stop-strong); }
       .composer .go.stop svg { width: 15px; height: 15px; }
+      .composer .go.stop svg path { fill: currentColor; }
+      .composer .go:focus-visible, .tools-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
+
+      .model { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: 2px; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
+      .model-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--green); }
+      .model.busy .model-dot { background: var(--blue); animation: mpulse 1.2s ease-in-out infinite; }
+      @keyframes mpulse { 50% { opacity: .35; } }
+      .model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+      .model-where { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-3); }
+
+      /* ── Tools menu ── */
+      .tools { position: relative; flex: none; }
+      .tools-btn { position: relative; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--bg); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
+      .tools-btn:hover { color: var(--ink); border-color: var(--ink-3); }
+      .tools-btn[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }
+      .tools-btn svg { width: 17px; height: 17px; }
+      .tools-count { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 10px; font-weight: 600; display: grid; place-items: center; border: 2px solid var(--bg); }
+      .tools-count[hidden] { display: none; }
+      .tools-pop { position: absolute; left: -4px; bottom: calc(100% + 12px); z-index: 20; width: 320px; max-width: calc(100vw - 48px); max-height: 380px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 13px; box-shadow: 0 14px 36px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06); padding: 6px; }
+      .tools-pop[hidden] { display: none; }
+      .overlay.window .tools-pop, .overlay.inline .tools-pop { width: 296px; }
+      .tp-head { padding: 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
+      .tp-title { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ink); }
+      .tp-sub { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); margin-top: 2px; }
+      .tp-grp { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 3px; }
+      /* Greyed and locked: visible, not the visitor's to change. */
+      .tp-tool { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 8px; cursor: default; }
+      .tp-ti { width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; opacity: .75; }
+      .tp-ti svg { width: 13px; height: 13px; }
+      .tp-tn { min-width: 0; flex: 1; }
+      .tp-name { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .tp-desc { display: block; font-size: 11px; color: var(--ink-3); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .tp-kind { flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
+      .tp-lock { flex: none; width: 13px; height: 13px; color: var(--ink-3); opacity: .7; display: grid; }
+      .tp-lock svg { width: 13px; height: 13px; }
+      .tp-empty { padding: 12px 10px; font-size: 12px; color: var(--ink-3); }
+      .tp-foot { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 11px; color: var(--ink-3); }
+      @media (prefers-reduced-motion: reduce) { .model.busy .model-dot { animation: none; } }
       /* A message the person sent, plus the row of things they can do to it.
          The wrapper carries the alignment the bubble used to carry on its own. */
       .turn { display: flex; flex-direction: column; align-items: flex-end; }
@@ -2709,8 +3397,36 @@ class NxisAgentFullscreen extends HTMLElement {
       .dc-eyebrow.review { color: var(--blue-strong); }
       .dc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
       .dc-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
-      .dc-row dt { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex-shrink: 0; padding-top: 2px; }
-      .dc-row dd { margin: 0; font-size: 14px; color: var(--ink); text-align: right; word-break: break-word; }
+      /* One line per row, truncated. A card in a window or a rail is too
+         narrow for a long value to wrap without becoming a column of
+         fragments. The whole row comes back on hover or keyboard focus, and
+         every cell carries its full text as a title too. */
+      .dc-row dt { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; flex: 0 1 auto; min-width: 0; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .dc-row dd { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .dc-row:hover dt, .dc-row:hover dd, .dc-row:focus-within dt, .dc-row:focus-within dd { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
+      .dc-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
+      /* Buttons keep their words on one line and wrap as whole buttons. */
+      .dc-actions { flex-wrap: wrap; }
+      .dc-actions .btn { white-space: nowrap; }
+      .overlay.window .dc-actions .btn, .overlay.inline .dc-actions .btn { padding: 9px 14px; font-size: 13px; }
+
+      /* Code inside a message: monospace, and scrolled rather than wrapped,
+         so a long line does not break at arbitrary places. */
+      .msg .codeblock { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); overflow-x: auto; max-width: 100%; }
+      .msg .codeblock:first-child { margin-top: 0; }
+      .msg .codeblock code { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre; color: var(--ink); }
+      .msg.user .codeblock { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
+      .msg.user .codeblock code { color: #fff; }
+
+      /* A long block folds away: kept, but not filling the thread. */
+      .codefold { margin-top: 6px; }
+      .codefold > summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 2px 0; }
+      .codefold > summary::-webkit-details-marker { display: none; }
+      .codefold > summary::before { content: '▸ '; }
+      .codefold[open] > summary::before { content: '▾ '; }
+      .codefold > summary:hover { color: var(--ink-2); }
+      .codefold > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
+      .codefold .codeblock { margin-top: 4px; }
 
       /* ── Inline result cards — feature-card pattern: tinted icon chip,
             tags, tight Manrope headline, one supporting line. ─────── */
@@ -2729,8 +3445,15 @@ class NxisAgentFullscreen extends HTMLElement {
       .rc-sub { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 2px; }
       .rc-list { margin: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; }
       .rc-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.4; }
-      .rc-row dt { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex-shrink: 0; padding-top: 2px; }
-      .rc-row dd { margin: 0; color: var(--ink); text-align: right; word-break: break-word; }
+      .rc-row dt { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex: 0 1 auto; min-width: 0; max-width: 45%; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .rc-row dd { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .rc-row:hover dt, .rc-row:hover dd, .rc-row:focus-within dt, .rc-row:focus-within dd { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
+      /* The headline and its supporting line truncate too, and come back
+         when the card is hovered or focused. */
+      .rc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .rc-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+      .resultcard:hover .rc-title, .resultcard:focus-within .rc-title { white-space: normal; overflow: visible; }
+      .resultcard:hover .rc-sub, .resultcard:focus-within .rc-sub { -webkit-line-clamp: unset; overflow: visible; }
       .rc-id { margin-top: 10px; min-width: 0; }
       .rc-id code { display: block; font-family: var(--mono); font-size: 10px; color: var(--blue-strong); background: var(--inline-bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
       .rc-row dd a { color: var(--blue-strong); text-decoration: none; }
@@ -2802,11 +3525,23 @@ class NxisAgentFullscreen extends HTMLElement {
           <button class="close" aria-label="Close">×</button>
         </div>
         <div class="prog"><i></i></div>
+        <button class="jstatus" type="button" hidden>
+          <span class="js-spin" aria-hidden="true"></span><span class="js-label"></span><span class="js-go">Show</span>
+        </button>
         <div class="thread"></div>
         <div class="statusline"></div>
         <div class="composer">
-          <textarea rows="1" placeholder="Message the agent…" aria-label="Message the agent"></textarea>
-          <button class="go" aria-label="Send">${ICON_ARROW}</button>
+          <div class="cbox">
+            <textarea rows="1" placeholder="Message the agent…" aria-label="Message the agent"></textarea>
+            <div class="cbar">
+              <div class="tools">
+                <button class="tools-btn" type="button" aria-haspopup="dialog" aria-expanded="false" aria-label="Tools on this page">${ICON_TOOLS}<span class="tools-count" hidden></span></button>
+                <div class="tools-pop" role="dialog" aria-label="What the agent can use here" hidden></div>
+              </div>
+              <span class="model"><i class="model-dot" aria-hidden="true"></i><span class="model-name"></span><span class="model-where"></span></span>
+              <button class="go" aria-label="Send">${ICON_ARROW}</button>
+            </div>
+          </div>
         </div>
         <footer class="foot">
           <a class="powered" href="${NXIS_SITE_URL}" target="_blank" rel="noopener noreferrer">