@fiodos/web-core 0.1.9 → 0.1.11

package/dist/esm/index.d.ts

@@ -9,7 +9,7 @@
  */
 export { SDK_VERSION, SDK_PACKAGE } from './version.js';
 export { AgentController } from './controller/AgentController.js';
-export type { AgentState, AgentExchange } from './controller/AgentController.js';
+export type { AgentState, AgentExchange, AgentActivity } from './controller/AgentController.js';
 export { createFiodosAgent } from './dropin/createFiodosAgent.js';
 export type { CreateFiodosAgentOptions, FiodosAgentHandle } from './dropin/createFiodosAgent.js';
 export { DEFAULT_WEB_API_URL, fetchClientManifest, sendOrbSeen, } from './api/clientBootstrap.js';
@@ -38,8 +38,8 @@ export { createScreenContextStore } from './context/screenContextStore.js';
 export type { ScreenContextStore, AgentScreenSnapshot } from './context/screenContextStore.js';
 export { createSpeechSession } from './speech/speechSession.js';
 export type { SpeechSession, SpeechSessionOptions, SpeechSessionState, SpeechSessionSnapshot, } from './speech/speechSession.js';
-export { DEFAULT_AGENT_TIMINGS } from './config/types.js';
-export type { FiodosWebAgentConfig, AgentPhase, AgentTimings, TurnGateVerdict, } from './config/types.js';
+export { DEFAULT_AGENT_TIMINGS, DEFAULT_AGENT_CHAINING } from './config/types.js';
+export type { FiodosWebAgentConfig, AgentPhase, AgentTimings, AgentChaining, TurnGateVerdict, } from './config/types.js';
 export { resolveUiMessages } from './ui/messages.js';
 export type { WebUiMessages, ResolveUiMessagesOptions } from './ui/messages.js';
 export { decideAction, classifyPendingReply } from './core/turnEngine.js';

package/dist/esm/index.js

@@ -34,7 +34,7 @@ export { createScreenContextStore } from './context/screenContextStore.js';
 // ── Speech session ──────────────────────────────────────────────────────────────
 export { createSpeechSession } from './speech/speechSession.js';
 // ── Config / i18n ─────────────────────────────────────────────────────────────
-export { DEFAULT_AGENT_TIMINGS } from './config/types.js';
+export { DEFAULT_AGENT_TIMINGS, DEFAULT_AGENT_CHAINING } from './config/types.js';
 export { resolveUiMessages } from './ui/messages.js';
 // ── Decision engine (shared, framework-free; advanced use / testing) ──────────
 export { decideAction, classifyPendingReply } from './core/turnEngine.js';

package/dist/esm/orb/mountOrb.d.ts

@@ -17,6 +17,12 @@ export interface MountOrbOptions {
     appearancePollMs?: number;
     /** Honour the dashboard's published screen position. Default: true. */
     usePublishedPosition?: boolean;
+    /**
+     * Internal-profile orbs only render on development hosts (localhost, LAN
+     * IPs, *.local). Set true to assert this page IS internal software (e.g. a
+     * hosted admin panel) so an internal orb may render here. Default: false.
+     */
+    allowInternalOrb?: boolean;
 }
 export interface MountedOrb {
     unmount(): void;

package/dist/esm/orb/mountOrb.js

@@ -16,9 +16,10 @@
  *  - CONFIRMATIONS: the same security model (manifest decides; strict phrase /
  *    deliberate tap for payment-grade; loose "yes" never resolves strict).
  */
-import { DEFAULT_ORB_SCREEN_POSITION, createWebOrbHaptics, matchRouteIntent, resolveBubblePrompt, resolveBubbleTheme, resolveBubblePadding, resolveBubbleShapeStyle, resolveOrbAnchorPx, resolveOrbDeployment, snapOrbScreenPositionToSide, viewportPixelsToOrbScreenPosition, } from '@fiodos/core';
+import { DEFAULT_ORB_SCREEN_POSITION, createWebOrbHaptics, matchRouteIntent, resolveBubblePrompt, bubblePromptToAffirmative, resolveBubbleTheme, resolveBubblePadding, bubbleShapeToCss, resolveOrbAnchorPx, resolveOrbDeployment, snapOrbScreenPositionToSide, viewportPixelsToOrbScreenPosition, fiodosInputInkColor, fiodosInputMutedInkColor, shouldHideInternalOrb, } from '@fiodos/core';
 import { buildKeyboardChip, createOrbVisual, DEFAULT_ORB_APPEARANCE, } from './orbView.js';
 import { watchPublishedConfig } from './publishedConfig.js';
+import { createBubbleDictation, scrollTextInputToEnd } from '../speech/bubbleDictation.js';
 const STYLE_ID = 'fyodos-orb-styles';
 const CSS = `
 .fyodos-orb-root{position:fixed;display:inline-flex;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;touch-action:none;}
@@ -27,20 +28,32 @@ const CSS = `
 .fyodos-orb-btn:focus-visible{outline:2px solid #8ab6ff;outline-offset:4px;border-radius:50%;}
 .fyodos-orb-anchor{position:relative;display:inline-flex;}
 .fyodos-bubble{position:absolute;display:flex;flex-direction:column;width:min(320px,calc(100vw - 48px));max-height:340px;overflow:hidden;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,0.28);border:1px solid rgba(160,180,220,0.22);animation:fyodos-fade-in .14s ease-out;}
-.fyodos-bubble-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;font-size:18px;line-height:18px;width:28px;height:28px;min-width:28px;min-height:28px;margin-top:-10px;margin-right:-10px;cursor:pointer;padding:0;opacity:.75;}
+.fyodos-bubble-close{position:absolute;top:4px;right:6px;z-index:1;display:flex;align-items:center;justify-content:center;border:none;background:transparent;font-size:18px;line-height:18px;width:28px;height:28px;cursor:pointer;padding:0;opacity:.75;}
 .fyodos-bubble-user-row{display:flex;flex-direction:row;align-items:flex-start;gap:6px;}
-.fyodos-bubble-scroll{overflow-y:auto;padding:12px 14px 4px;display:flex;flex-direction:column;gap:6px;}
+.fyodos-bubble-scroll{overflow-y:auto;padding:12px 14px 4px;display:flex;flex-direction:column;gap:6px;min-height:18px;scrollbar-width:none;-ms-overflow-style:none;}
+.fyodos-bubble-scroll::-webkit-scrollbar{display:none;width:0;height:0;}
+.fyodos-bubble-loader{display:flex;justify-content:center;align-items:center;padding:2px 0 6px;flex-shrink:0;}
+.fyodos-bubble-loader span{width:14px;height:14px;border-radius:50%;border:2px solid rgba(148,163,184,0.35);border-top-color:rgba(148,163,184,0.9);animation:fy-spin .7s linear infinite;}
+.fyodos-bubble-exchanges{display:flex;flex-direction:column;gap:12px;}
+.fyodos-bubble-exchange{display:flex;flex-direction:column;gap:6px;}
+.fyodos-bubble-exchange:first-child .fyodos-bubble-user{padding-right:22px;}
 .fyodos-bubble-user{flex:1;min-width:0;font-size:13px;line-height:18px;opacity:.75;}
 .fyodos-bubble-reply{font-size:15px;line-height:21px;white-space:pre-wrap;}
 .fyodos-bubble-busy{display:flex;gap:5px;padding:8px 14px;align-items:center;}
 .fyodos-bubble-busy span{width:6px;height:6px;border-radius:50%;opacity:.5;animation:fyodos-blink 1s infinite;}
 .fyodos-bubble-busy span:nth-child(2){animation-delay:.18s;}
 .fyodos-bubble-busy span:nth-child(3){animation-delay:.36s;}
+.fyodos-busy-step{margin-right:6px;font-size:12.5px;line-height:18px;font-style:italic;animation:fyodos-fade-in .28s ease-out;}
 .fyodos-bubble-row{display:flex;gap:8px;align-items:flex-end;padding:8px 10px;border-top:1px solid rgba(160,180,220,0.18);}
-.fyodos-bubble-row input{flex:1;border:1px solid rgba(15,23,42,0.12);outline:none;border-radius:10px;padding:9px 11px;font-size:15px;}
+.fyodos-bubble-row input{flex:1;min-width:0;border:none;outline:none;border-radius:10px;padding:9px 11px;font-size:15px;}
+.fyodos-bubble-row input::placeholder{color:var(--fyodos-input-placeholder,#94a3b8);opacity:1;}
+.fyodos-bubble-mic{appearance:none;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0;border:1px solid rgba(148,163,184,0.4);border-radius:999px;background:rgba(255,255,255,0.06);color:inherit;cursor:pointer;}
 .fyodos-bubble-row button{appearance:none;border:none;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0;font-size:17px;font-weight:700;line-height:1;color:#000;cursor:pointer;}
-.fyodos-thought{position:absolute;appearance:none;display:inline-block;width:max-content;max-width:min(280px,70vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;line-height:1.25;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.22);animation:fyodos-thought-in .18s ease-out;}
+.fyodos-thought{position:absolute;appearance:none;box-sizing:border-box;display:flex;align-items:center;width:max-content;max-width:min(280px,70vw);white-space:nowrap;overflow:hidden;text-align:left;line-height:1.25;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.22);animation:fyodos-thought-in .18s ease-out;}
 @keyframes fyodos-thought-in{from{opacity:0;transform:translateY(4px) scale(0.96)}to{opacity:1;transform:none}}
+@keyframes fyodos-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
+.fyodos-thought-track{display:flex;flex-shrink:0;width:max-content;will-change:transform;}
+.fyodos-thought-track>span{flex-shrink:0;padding-right:48px;white-space:nowrap;}
 @keyframes fyodos-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
 @keyframes fyodos-blink{0%,100%{opacity:.25}50%{opacity:.9}}
 @keyframes fy-spin{to{transform:rotate(360deg)}}
@@ -124,7 +137,7 @@ export function mountOrb(controller, options = {}) {
     }
     // Subtle haptic feedback on every relevant orb interaction (silent no-op on
     // browsers without the Vibration API — desktop, iOS Safari).
-    const haptics = createWebOrbHaptics();
+    const haptics = createWebOrbHaptics(() => effectiveAppearance().hapticIntensity);
     // ── Effective appearance: defaults ← published ← explicit option overrides ──
     let publishedAppearance = null;
     let chipTheme = null;
@@ -134,6 +147,9 @@ export function mountOrb(controller, options = {}) {
     // Dashboard VOICE switch. Default true (voice on). When false the orb never
     // listens/speaks: a tap opens the keyboard directly and text turns are silent.
     let voiceInputEnabled = true;
+    // Dashboard "thinking steps" switch. When true the busy row walks through
+    // what the agent is doing ("Analyzing your request…") instead of only dots.
+    let thinkingStepsEnabled = false;
     let currentRoute = null;
     let screenPosition = options.corner
         ? cornerToPosition(options.corner)
@@ -167,19 +183,32 @@ export function mountOrb(controller, options = {}) {
     let chipEl = null;
     // Thought bubble: a short, screen-aware CTA beside the orb. Created once and
     // shown/hidden by syncThoughtBubble; tapping it opens the keyboard.
-    const thoughtBubbleEl = document.createElement('button');
-    thoughtBubbleEl.type = 'button';
+    const thoughtBubbleEl = document.createElement('div');
     thoughtBubbleEl.className = 'fyodos-thought';
+    thoughtBubbleEl.setAttribute('role', 'button');
+    thoughtBubbleEl.tabIndex = 0;
     thoughtBubbleEl.style.display = 'none';
     thoughtBubbleEl.addEventListener('click', () => {
         haptics.trigger('orbTap');
         controller.primeAudio();
         if (enableTextInput) {
-            openTextPanel();
+            const prompt = resolveCurrentBubblePrompt();
+            openTextPanel(prompt
+                ? bubblePromptToAffirmative(prompt, {
+                    locale: controller.config.locale,
+                    messages: controller.messages,
+                })
+                : undefined);
             return;
         }
         void controller.toggleListening();
     });
+    thoughtBubbleEl.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            thoughtBubbleEl.click();
+        }
+    });
     anchor.appendChild(thoughtBubbleEl);
     container.appendChild(root);
     // ── Position (dashboard position; user drag is SESSION-only, never persisted) ─
@@ -369,35 +398,168 @@ export function mountOrb(controller, options = {}) {
     }
     const exchangeScroll = document.createElement('div');
     exchangeScroll.className = 'fyodos-bubble-scroll';
-    const userRow = document.createElement('div');
-    userRow.className = 'fyodos-bubble-user-row';
-    const userLine = document.createElement('div');
-    userLine.className = 'fyodos-bubble-user';
+    // Close button overlaid at the bubble corner — in line with the first message,
+    // exactly like the dashboard preview (no extra header row/space).
     const closeBtn = document.createElement('button');
     closeBtn.type = 'button';
     closeBtn.className = 'fyodos-bubble-close';
     closeBtn.textContent = '×';
     closeBtn.setAttribute('aria-label', 'Close');
     closeBtn.addEventListener('click', () => setBubble(false));
-    userRow.append(userLine, closeBtn);
-    const replyLine = document.createElement('div');
-    replyLine.className = 'fyodos-bubble-reply';
-    exchangeScroll.append(userRow, replyLine);
+    // Loading row shown at the top while an older page of the session history
+    // streams in (scroll-to-top pagination).
+    const loaderRow = document.createElement('div');
+    loaderRow.className = 'fyodos-bubble-loader';
+    loaderRow.append(document.createElement('span'));
+    loaderRow.style.display = 'none';
+    const exchangeList = document.createElement('div');
+    exchangeList.className = 'fyodos-bubble-exchanges';
+    exchangeScroll.append(loaderRow, exchangeList);
+    // Signature of the rendered list so state emits that do not change the
+    // transcript (volume, phase…) never re-render it nor fight the user's scroll.
+    let renderedSignature = '';
+    function renderBubbleExchanges(exchanges) {
+        const signature = exchanges.map((ex) => `${ex.userText}\u0000${ex.replyText}`).join('\u0001');
+        if (signature === renderedSignature)
+            return;
+        // Prepend (older page loaded): the previous tail is intact at the end.
+        // Keep the user's reading position anchored instead of jumping to bottom.
+        const prepended = renderedSignature.length > 0 &&
+            signature.length > renderedSignature.length &&
+            signature.endsWith(renderedSignature);
+        const fromBottom = exchangeScroll.scrollHeight - exchangeScroll.scrollTop;
+        renderedSignature = signature;
+        exchangeList.replaceChildren();
+        for (const ex of exchanges) {
+            const block = document.createElement('div');
+            block.className = 'fyodos-bubble-exchange';
+            const user = document.createElement('div');
+            user.className = 'fyodos-bubble-user';
+            user.textContent = ex.userText;
+            block.append(user);
+            if (ex.replyText) {
+                const reply = document.createElement('div');
+                reply.className = 'fyodos-bubble-reply';
+                reply.textContent = ex.replyText;
+                block.append(reply);
+            }
+            exchangeList.append(block);
+        }
+        exchangeScroll.scrollTop = prepended
+            ? exchangeScroll.scrollHeight - fromBottom
+            : exchangeScroll.scrollHeight;
+    }
+    // Scroll-to-top pagination: reaching the top with older messages available
+    // pages the next block in (the controller shows the loader while it mounts).
+    exchangeScroll.addEventListener('scroll', () => {
+        if (!bubbleOpen || exchangeScroll.scrollTop > 12)
+            return;
+        const state = controller.getState();
+        if (state.hasOlderExchanges && !state.loadingOlderExchanges) {
+            controller.loadOlderExchanges();
+        }
+    });
     const busyRow = document.createElement('div');
     busyRow.className = 'fyodos-bubble-busy';
+    // REAL live activity FIRST in the row — flush left, aligned with the
+    // messages above (an <em> so the dot styling, which targets the spans,
+    // never applies to it). Hidden unless the dashboard advanced option is on.
+    const busyStep = document.createElement('em');
+    busyStep.className = 'fyodos-busy-step';
+    busyStep.style.display = 'none';
+    busyRow.appendChild(busyStep);
     busyRow.append(document.createElement('span'), document.createElement('span'), document.createElement('span'));
+    // ── REAL activity line (dashboard advanced option) ─────────────────────────
+    // Replaces the old canned walk-through: the controller reports what the
+    // agent is ACTUALLY doing (thinking / navigating / running an action /
+    // waiting for confirmation) and the line updates only on real changes.
+    let lastActivityText = null;
+    function activityText(state) {
+        if (!thinkingStepsEnabled || !state.liveActivity)
+            return null;
+        const { kind, label } = state.liveActivity;
+        switch (kind) {
+            case 'navigating':
+                return ui.activityNavigating.replace('{label}', label ?? '');
+            case 'executing':
+                return ui.activityExecuting.replace('{label}', label ?? '');
+            case 'waiting_confirmation':
+                return ui.activityWaitingConfirmation;
+            default:
+                return ui.activityThinking;
+        }
+    }
+    function syncActivityStep(show, state) {
+        const text = show ? activityText(state) : null;
+        if (text === lastActivityText)
+            return;
+        lastActivityText = text;
+        if (!text) {
+            busyStep.textContent = '';
+            busyStep.style.display = 'none';
+            return;
+        }
+        busyStep.style.display = '';
+        busyStep.textContent = text;
+        // Restart the fade-in for each new real step.
+        busyStep.style.animation = 'none';
+        void busyStep.offsetWidth;
+        busyStep.style.animation = '';
+    }
     const inputRow = document.createElement('div');
     inputRow.className = 'fyodos-bubble-row';
     const textInput = document.createElement('input');
     textInput.type = 'text';
     textInput.placeholder = ui.textPlaceholder;
+    const micBtn = document.createElement('button');
+    micBtn.type = 'button';
+    micBtn.className = 'fyodos-bubble-mic';
+    micBtn.innerHTML =
+        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"></rect><path d="M5 11a7 7 0 0014 0 M12 18v3"></path></svg>';
+    micBtn.style.display = 'none';
     const sendBtn = document.createElement('button');
     // Unified send affordance: an up-arrow glyph on the accent square (parity
     // with the dashboard preview and every native SDK), not a text label.
     sendBtn.textContent = '↑';
     sendBtn.setAttribute('aria-label', ui.sendLabel);
-    inputRow.append(textInput, sendBtn);
-    bubble.append(exchangeScroll, busyRow, inputRow);
+    inputRow.append(textInput, micBtn, sendBtn);
+    const bubbleDictation = createBubbleDictation(controller.config.locale);
+    if (bubbleDictation.isSupported()) {
+        micBtn.style.display = 'flex';
+        micBtn.setAttribute('aria-label', ui.micLabel);
+        micBtn.title = ui.micLabel;
+        micBtn.addEventListener('click', () => {
+            if (controller.getState().isBusy)
+                return;
+            bubbleDictation.toggle(() => textInput.value, (next) => {
+                textInput.value = next;
+                scrollTextInputToEnd(textInput);
+            });
+            syncMicButton();
+        });
+    }
+    function syncMicButton() {
+        const accent = modalTheme?.primaryButtonColor ?? effectiveAppearance().accentColor;
+        const sendRadius = `${modalTheme?.sendButtonRadius ?? 10}px`;
+        const bodyColor = { ...DEFAULT_MODAL_THEME, ...(modalTheme ?? {}) }.bodyColor;
+        const active = bubbleDictation.isListening();
+        micBtn.classList.toggle('is-listening', active);
+        if (active) {
+            micBtn.style.background = accent;
+            micBtn.style.border = 'none';
+            micBtn.style.color = '#000';
+            micBtn.style.borderRadius = sendRadius;
+        }
+        else {
+            micBtn.style.background = 'rgba(255,255,255,0.06)';
+            micBtn.style.border = '1px solid rgba(148,163,184,0.4)';
+            micBtn.style.color = bodyColor;
+            micBtn.style.borderRadius = '999px';
+        }
+        micBtn.setAttribute('aria-label', active ? ui.micStopLabel : ui.micLabel);
+        micBtn.title = active ? ui.micStopLabel : ui.micLabel;
+    }
+    bubble.append(closeBtn, exchangeScroll, busyRow, inputRow);
     anchor.appendChild(bubble);
     // Initial placement (after the bubble exists, so applyDeployment can lay it out).
     reposition();
@@ -408,16 +570,25 @@ export function mountOrb(controller, options = {}) {
         bubble.style.borderColor = t.cardBorderColor;
         if (modalTheme?.borderRadius != null)
             bubble.style.borderRadius = `${modalTheme.borderRadius}px`;
-        userLine.style.color = t.bodyColor;
-        replyLine.style.color = t.titleColor;
         closeBtn.style.color = t.bodyColor;
-        textInput.style.background = '#fff';
-        textInput.style.color = '#0f172a';
+        exchangeList.querySelectorAll('.fyodos-bubble-user').forEach((node) => {
+            node.style.color = t.bodyColor;
+        });
+        exchangeList.querySelectorAll('.fyodos-bubble-reply').forEach((node) => {
+            node.style.color = t.titleColor;
+        });
+        const inputBg = modalTheme?.inputBackgroundColor ?? '#ffffff';
+        textInput.style.background = inputBg;
+        textInput.style.color = fiodosInputInkColor(inputBg);
+        textInput.style.setProperty('--fyodos-input-placeholder', fiodosInputMutedInkColor(inputBg));
         sendBtn.style.background = accent;
         sendBtn.style.borderRadius = `${modalTheme?.sendButtonRadius ?? 10}px`;
+        syncMicButton();
         busyRow.querySelectorAll('span').forEach((s) => {
             s.style.background = accent;
         });
+        // Live-activity line: white (reply color), italic — not the faint gray.
+        busyStep.style.color = t.titleColor;
     }
     function setBubble(open) {
         bubbleOpen = open;
@@ -428,6 +599,10 @@ export function mountOrb(controller, options = {}) {
             textInput.focus();
         }
         else {
+            bubbleDictation.stop();
+            syncMicButton();
+            // Collapse the paged history back to the initial page for the next open.
+            controller.resetBubbleWindow();
             // Closing the panel returns the orb to idle (also clears mic fallback).
             micFallbackActive = false;
         }
@@ -441,15 +616,27 @@ export function mountOrb(controller, options = {}) {
         const value = textInput.value.trim();
         if (!value)
             return;
+        bubbleDictation.stop();
+        syncMicButton();
         haptics.trigger('send');
         textInput.value = '';
         // Silent turn: the reply is SHOWN in the bubble (not spoken), and the bubble
         // STAYS OPEN. This is the unified, reference-matching behaviour.
         void controller.submitTextTurn(value);
     }
-    function openTextPanel() {
-        controller.cancelAll();
+    function openTextPanel(seed, autoSend = false) {
+        // Opening the keyboard cancels any in-flight turn; a cancelled message
+        // becomes the editable input content unless an explicit seed was given.
+        const cancelled = controller.cancelAll();
+        const explicitSeed = seed?.trim() ?? '';
+        const draft = explicitSeed || cancelled || '';
+        textInput.value = draft;
         setBubble(true);
+        // Only an explicit seed may auto-send; a restored cancelled message must
+        // wait for the user to edit/resend it.
+        if (autoSend && explicitSeed) {
+            queueMicrotask(() => submitText());
+        }
     }
     // ── Keyboard chip (rebuilt when theme changes / visibility toggles) ──────────
     // Appears beside the ACTIVE orb — whether listening for real (voice granted)
@@ -487,26 +674,62 @@ export function mountOrb(controller, options = {}) {
     function resolveCurrentBubblePrompt() {
         return resolveBubblePrompt(matchRouteIntent(currentRoute, controller.config.manifest.routes), controller.messages, { locale: controller.config.locale, actions: controller.config.manifest.actions });
     }
+    // Render the CTA on ONE line at its NATURAL size. When the phrase is too long
+    // to fit the max width, scroll it (marquee, right-to-left, looping) instead of
+    // shrinking the font or truncating — the bubble keeps a constant height.
+    function layoutThoughtContent(prompt) {
+        const t = bubbleTheme;
+        const { padH } = resolveBubblePadding(t);
+        // Measure the natural (single-copy) text width at the base font size.
+        thoughtBubbleEl.style.width = '';
+        thoughtBubbleEl.textContent = prompt;
+        const measured = thoughtBubbleEl.scrollWidth;
+        const viewport = typeof window !== 'undefined' ? window.innerWidth : 280;
+        const maxW = Math.min(280, viewport * 0.7);
+        const overflow = measured > maxW - t.borderWidth * 2;
+        if (!overflow) {
+            thoughtBubbleEl.style.width = '';
+            return;
+        }
+        const textWidth = Math.max(0, measured - padH * 2);
+        const durationSec = Math.max(4, (textWidth + 48) / 30);
+        thoughtBubbleEl.style.width = `${maxW}px`;
+        thoughtBubbleEl.textContent = '';
+        const track = document.createElement('div');
+        track.className = 'fyodos-thought-track';
+        track.style.animation = `fyodos-marquee ${durationSec}s linear infinite`;
+        const first = document.createElement('span');
+        first.textContent = prompt;
+        const second = document.createElement('span');
+        second.textContent = prompt;
+        second.setAttribute('aria-hidden', 'true');
+        track.appendChild(first);
+        track.appendChild(second);
+        thoughtBubbleEl.appendChild(track);
+    }
     function applyThoughtBubbleTheme() {
         const t = bubbleTheme;
-        const { fontPx, padV, padH, approxHeight } = resolveBubblePadding(t);
-        const shapeStyle = resolveBubbleShapeStyle(t, approxHeight);
+        const { fontPx, padH, approxHeight } = resolveBubblePadding(t);
+        const shapeCss = bubbleShapeToCss(t, approxHeight);
         thoughtBubbleEl.style.fontSize = `${fontPx}px`;
-        thoughtBubbleEl.style.padding = `${padV}px ${padH}px`;
+        thoughtBubbleEl.style.height = `${approxHeight}px`;
+        thoughtBubbleEl.style.padding = `0 ${padH}px`;
         thoughtBubbleEl.style.color = t.textColor;
         thoughtBubbleEl.style.background = t.backgroundColor;
         thoughtBubbleEl.style.border = `${t.borderWidth}px solid ${t.borderColor}`;
-        thoughtBubbleEl.style.borderRadius =
-            shapeStyle.borderRadius != null ? `${shapeStyle.borderRadius}px` : '';
-        thoughtBubbleEl.style.borderTopLeftRadius =
-            shapeStyle.borderTopLeftRadius != null ? `${shapeStyle.borderTopLeftRadius}px` : '';
-        thoughtBubbleEl.style.borderTopRightRadius =
-            shapeStyle.borderTopRightRadius != null ? `${shapeStyle.borderTopRightRadius}px` : '';
-        thoughtBubbleEl.style.borderBottomLeftRadius =
-            shapeStyle.borderBottomLeftRadius != null ? `${shapeStyle.borderBottomLeftRadius}px` : '';
-        thoughtBubbleEl.style.borderBottomRightRadius =
-            shapeStyle.borderBottomRightRadius != null ? `${shapeStyle.borderBottomRightRadius}px` : '';
-        thoughtBubbleEl.style.clipPath = shapeStyle.clipPath ?? '';
+        const setImportant = (prop, value) => {
+            if (!value) {
+                thoughtBubbleEl.style.removeProperty(prop);
+                return;
+            }
+            thoughtBubbleEl.style.setProperty(prop, value, 'important');
+        };
+        setImportant('border-radius', shapeCss.borderRadius);
+        setImportant('border-top-left-radius', shapeCss.borderTopLeftRadius);
+        setImportant('border-top-right-radius', shapeCss.borderTopRightRadius);
+        setImportant('border-bottom-left-radius', shapeCss.borderBottomLeftRadius);
+        setImportant('border-bottom-right-radius', shapeCss.borderBottomRightRadius);
+        setImportant('clip-path', shapeCss.clipPath);
     }
     function positionThoughtBubble() {
         const dep = resolveOrbDeployment(effectivePosition());
@@ -536,11 +759,12 @@ export function mountOrb(controller, options = {}) {
             thoughtBubbleEl.style.display = 'none';
             return;
         }
-        thoughtBubbleEl.textContent = prompt;
-        thoughtBubbleEl.setAttribute('aria-label', ui.orbLabel);
+        thoughtBubbleEl.setAttribute('aria-label', prompt);
+        // Display before measuring so `scrollWidth` (used to detect overflow) is real.
+        thoughtBubbleEl.style.display = 'flex';
         applyThoughtBubbleTheme();
+        layoutThoughtContent(prompt);
         positionThoughtBubble();
-        thoughtBubbleEl.style.display = 'block';
     }
     // ── Overlays (confirmation + consent) ────────────────────────────────────────
     let overlayEl = null;
@@ -646,7 +870,12 @@ export function mountOrb(controller, options = {}) {
         // (aborts the request, no reply is delivered) and returns the orb to idle.
         if (state.showThinking) {
             haptics.trigger('orbTap');
-            controller.cancelAll();
+            const draft = controller.cancelAll();
+            // The cancelled message goes back into the input for editing.
+            if (draft && bubbleOpen) {
+                textInput.value = draft;
+                scrollTextInputToEnd(textInput);
+            }
             return;
         }
         haptics.trigger('orbTap');
@@ -680,10 +909,17 @@ export function mountOrb(controller, options = {}) {
     };
     sendBtn.onclick = () => {
         // Send (arrow) while idle; Stop (square) while a turn is processing — tapping
-        // it cancels the in-flight turn so the user can type/send another message.
-        if (controller.getState().isBusy) {
+        // it cancels the in-flight turn (or running chain) so the user can type again.
+        const st = controller.getState();
+        if (st.isBusy || st.chainActive) {
             haptics.trigger('orbTap');
-            controller.cancelAll();
+            // STOP: the cancelled message leaves the panel and goes back into the
+            // input so the user can edit and resend it.
+            const draft = controller.cancelAll();
+            if (draft) {
+                textInput.value = draft;
+                scrollTextInputToEnd(textInput);
+            }
             textInput.focus();
             return;
         }
@@ -695,6 +931,7 @@ export function mountOrb(controller, options = {}) {
         if (e.key === 'Escape')
             setBubble(false);
     };
+    textInput.addEventListener('input', () => scrollTextInputToEnd(textInput));
     if (!enableTextInput) {
         if (chipEl)
             chipEl.style.display = 'none';
@@ -737,20 +974,28 @@ export function mountOrb(controller, options = {}) {
                     ? 'speaking'
                     : 'idle';
         orbVisual.applyState(visual, state.volumeLevel);
-        // Text bubble: show the current exchange + busy state.
+        // Busy through the WHOLE task: single turns and every autonomous chain
+        // step (so the real narration never flickers between steps).
+        const rowBusy = state.showThinking || state.chainActive;
+        // REAL activity line: updates when the agent actually does something new,
+        // and clears when the reply lands.
+        syncActivityStep(rowBusy, state);
+        // Text bubble: show recent exchanges + busy state.
         if (bubbleOpen) {
-            const ex = state.lastExchange;
+            loaderRow.style.display = state.loadingOlderExchanges ? 'flex' : 'none';
+            renderBubbleExchanges(state.recentExchanges);
             exchangeScroll.style.display = 'flex';
-            userLine.textContent = ex?.userText ?? '';
-            replyLine.textContent = ex?.replyText ?? '';
-            replyLine.style.display = ex?.replyText ? 'block' : 'none';
-            busyRow.style.display = state.showThinking ? 'flex' : 'none';
+            busyRow.style.display = rowBusy ? 'flex' : 'none';
             // Send (arrow) ↔ Stop (square): while busy the action becomes "cancel".
-            const busy = state.isBusy;
+            // A running autonomous chain counts as busy so the user can interrupt it.
+            const busy = state.isBusy || state.chainActive;
             sendBtn.textContent = busy ? '◼' : '↑';
             sendBtn.setAttribute('aria-label', busy ? ui.cancelLabel : ui.sendLabel);
             sendBtn.style.opacity = '1';
             sendBtn.disabled = false;
+            micBtn.style.opacity = busy ? '0.45' : '1';
+            micBtn.disabled = busy;
+            syncMicButton();
         }
         syncChip(state);
         syncThoughtBubble(state);
@@ -798,7 +1043,11 @@ export function mountOrb(controller, options = {}) {
             // Dashboard master switch: hide the whole orb (button + chip + bubble live
             // inside `root`) when explicitly turned off, show it otherwise. No host
             // code change — it flips on the next poll and reappears when re-enabled.
-            root.style.display = config && config.enabled === false ? 'none' : '';
+            // Internal-profile orbs additionally hide on public (non-development)
+            // hosts: they are for the developer/company, never for end users.
+            const hiddenByProfile = config != null &&
+                shouldHideInternalOrb(config.internalProfile, options.allowInternalOrb === true);
+            root.style.display = (config && config.enabled === false) || hiddenByProfile ? 'none' : '';
             if (config) {
                 publishedAppearance = config.appearance;
                 chipTheme = config.keyboardChip;
@@ -806,6 +1055,10 @@ export function mountOrb(controller, options = {}) {
                 bubbleTheme = config.bubbleTheme;
                 bubbleEnabled = config.bubbleEnabled;
                 voiceInputEnabled = config.voiceInputEnabled;
+                thinkingStepsEnabled = config.thinkingStepsEnabled;
+                // Idle context retention chosen in the dashboard (0 = never clear) +
+                // expanded memory window when the project's orb profile is 'internal'.
+                controller.setConversationRetention(config.conversationRetentionMinutes, config.internalProfile);
                 if (usePublishedPosition && config.screenPosition)
                     screenPosition = config.screenPosition;
             }
@@ -823,6 +1076,7 @@ export function mountOrb(controller, options = {}) {
     });
     return {
         unmount() {
+            bubbleDictation.dispose();
             unsubscribe();
             stopWatch();
             window.clearInterval(routeTimer);

package/dist/esm/orb/orbView.d.ts

@@ -16,6 +16,8 @@ export interface OrbAppearance {
     glowColor?: string;
     colorKey?: string;
     glowIntensity?: number;
+    /** 0–100 orb vibration/haptic strength (dashboard advanced option). */
+    hapticIntensity?: number;
     innerBorderColor?: string;
     innerBorderWidth?: number;
     size: number;

package/dist/esm/orb/publishedConfig.d.ts

@@ -27,12 +27,30 @@ export interface ResolvedOrbConfig {
      * directly on tap and never plays TTS. Default true (absent = voice on).
      */
     voiceInputEnabled: boolean;
+    /**
+     * Dashboard on/off for the agent's live "thinking steps" in the chat panel
+     * (`agentThinkingStepsEnabled`). True ONLY when the developer turned it on;
+     * then the busy row shows what the agent is doing instead of only the dots.
+     * Default false (absent = dots only).
+     */
+    thinkingStepsEnabled: boolean;
     /**
      * Dashboard master visibility switch (`orbEnabled`). False ONLY when the
      * developer explicitly turned the orb off. The orb is hidden when false and
      * shown otherwise (including when nothing is published / on error).
      */
     enabled: boolean;
+    /**
+     * Idle context retention in minutes (`conversationRetentionMinutes`).
+     * 0 = never clear; null = not published (the SDK's 30-minute default).
+     */
+    conversationRetentionMinutes: number | null;
+    /**
+     * True when the project's orb profile is 'internal' (internal/developer
+     * software): the agent uses the EXPANDED conversation memory window.
+     * Default false ('public' — today's behavior unchanged).
+     */
+    internalProfile: boolean;
 }
 export interface WatchPublishedConfigOptions {
     /** Poll interval (ms) to pick up dashboard changes in real time. Default 12000. */