tin-spa 20.14.99 → 20.14.113

package/fesm2022/tin-spa-agent.component-D0CGGnGZ.mjs

@@ -0,0 +1,1379 @@
+import * as i0 from '@angular/core';
+import { Pipe, Injectable, HostListener, Input, ViewChild, Component } from '@angular/core';
+import { filter } from 'rxjs/operators';
+import * as i1$2 from '@angular/router';
+import { NavigationEnd } from '@angular/router';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i1$1 from 'tin-spa/core';
+import { SpaMatModule } from 'tin-spa/core';
+import { f as CamelToWordsPipe } from './tin-spa-tin-spa-Cqe5hYTr.mjs';
+import * as i1 from '@angular/platform-browser';
+import { BehaviorSubject } from 'rxjs';
+import * as i2 from '@angular/cdk/layout';
+import * as i1$3 from '@angular/common';
+import * as i2$1 from '@angular/forms';
+import * as i7 from '@angular/material/menu';
+import * as i3 from '@angular/material/button';
+import * as i3$1 from '@angular/material/icon';
+import * as i3$2 from '@angular/material/form-field';
+import * as i4 from '@angular/material/input';
+import * as i7$1 from '@angular/material/tooltip';
+
+// Renders the agent's replies as the markdown they are actually written in.
+//
+// The agent writes **bold**, lists, headings and menu paths, and the widget printed all of it verbatim — so a
+// reply the guide carefully formatted arrived as a wall of asterisks. Telegram and WhatsApp now convert to
+// their own markup; this is the web's half of the same job.
+//
+// Deliberately a small hand-rolled subset rather than a markdown library: the input is not arbitrary user
+// markdown, it is the agent's own output, which uses bold, italic, inline code, headings, bullets and
+// numbered steps and nothing else. A library would add a dependency and a much larger escaping surface for
+// no gain here.
+//
+// SECURITY: every character is HTML-escaped BEFORE any formatting is applied, so nothing in a reply can
+// become markup. That matters more than usual for this component — an agent reply can contain data a
+// different user typed, so it must be treated as hostile text, not as trusted output.
+// Changed (nav-menu-standalone): standalone so the standalone AgentComponent can import the pipe by path.
+// TinSpaModule now IMPORTS it; it was never exported, so no consumer-facing surface changes.
+class AgentMarkdownPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value) {
+        if (!value)
+            return '';
+        let html = this.escape(value);
+        // Headings first: they are line-anchored, and converting them after inline rules would let a ** on the
+        // same line interfere
+        html = html.replace(/^#{1,6}\s*(.+)$/gm, '<strong class="md-heading">$1</strong>');
+        html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+        html = html.replace(/(?<![\w*])\*(?!\s)(.+?)(?<!\s)\*(?![\w*])/g, '<em>$1</em>');
+        html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+        // Bullets and numbered steps keep their marker — turning them into <ul>/<ol> would need block parsing,
+        // and the agent's lists are already readable as lines
+        html = html.replace(/^(\s*)[-•*]\s+(.+)$/gm, '$1<span class="md-bullet">•</span> $2');
+        html = html.replace(/\n/g, '<br>');
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    // Escaping BEFORE formatting is what makes bypassSecurityTrustHtml safe here: by the time anything is
+    // trusted, the only tags present are the ones this pipe put there itself.
+    escape(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentMarkdownPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: AgentMarkdownPipe, isStandalone: true, name: "agentMarkdown" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'agentMarkdown', standalone: true }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+// Frontend service for Agent chat — state management, API calls, and SignalR subscriptions (renamed from AssistantService)
+class AgentService {
+    constructor(dataService, signalRService, apiErrorService // Changed: injected for loadMessages and deleteConversation only
+    ) {
+        this.dataService = dataService;
+        this.signalRService = signalRService;
+        this.apiErrorService = apiErrorService;
+        this.messages = new BehaviorSubject([]);
+        this.conversations = new BehaviorSubject([]);
+        this.typing = new BehaviorSubject(false);
+        this.isOpen = new BehaviorSubject(false);
+        this.currentConversationId = new BehaviorSubject(null);
+        this.greeting = new BehaviorSubject('');
+        this.suggestedQuestions = new BehaviorSubject([]);
+        this.sessionInfo = new BehaviorSubject(null); // Changed: what the agent is in the middle of
+        this.messages$ = this.messages.asObservable();
+        this.conversations$ = this.conversations.asObservable();
+        this.typing$ = this.typing.asObservable();
+        this.isOpen$ = this.isOpen.asObservable();
+        this.currentConversationId$ = this.currentConversationId.asObservable();
+        this.greeting$ = this.greeting.asObservable();
+        this.suggestedQuestions$ = this.suggestedQuestions.asObservable();
+        this.sessionInfo$ = this.sessionInfo.asObservable();
+        // Changed: Load the most recent conversation's messages on first open
+        this.hasLoadedInitial = false;
+        this.initListeners();
+    }
+    // App name derived from the existing appConfig
+    get appName() {
+        return this.dataService.appConfig.appName || 'App';
+    }
+    // Agent name derived from appConfig (changed from assistantName)
+    get agentName() {
+        return `${this.appName} Agent`;
+    }
+    // Subscribe to SignalR events for real-time message delivery
+    initListeners() {
+        // Changed: SignalR is the SECOND path to a reply, not the only one. It still matters — a turn started on
+        // the phone should appear on the desktop — but it now goes through the same deduping append as the HTTP
+        // answer, so the common case (both arrive) shows one bubble rather than two.
+        this.signalRService.agentMessage$.subscribe(msg => {
+            if (msg && msg.content) {
+                this.addAssistantMessage(msg.content);
+            }
+        });
+        this.signalRService.agentTyping$.subscribe(typing => {
+            this.typing.next(typing);
+        });
+    }
+    // Load agent config (greeting + suggested questions) from backend
+    loadConfig() {
+        this.dataService.CallApi({ url: `agent/config/${this.appName}` }).subscribe(res => {
+            // DELIBERATELY SILENT (WS-6 Phase 4 triage). Greeting text and suggested-question chips are decoration
+            // on a chat window that works perfectly without them — the user can still type. Nothing they can see is
+            // wrong, so there is nothing truthful to tell them.
+            if (res.success && res.data) {
+                this.greeting.next(res.data.greeting || '');
+                this.suggestedQuestions.next(res.data.suggestedQuestions || []);
+            }
+        });
+    }
+    // Load user's conversation list
+    loadConversations() {
+        this.dataService.CallApi({ url: 'agent/conversations' }).subscribe(res => {
+            // DELIBERATELY SILENT (WS-6 Phase 4 triage), and this was the closest call in the sweep — an empty
+            // thread list IS a false statement about the user's own history. It stays silent because of WHEN it
+            // fires: agent.component.ts:212 calls it from the widget's ngOnInit, so it runs on every app-shell load
+            // whether or not anyone opens the chat. Converting would put a dialog in front of every user of the app
+            // for a list none of them had asked to see. loadMessages() below — which only ever runs because someone
+            // clicked a specific thread — is the one that reports, and it covers the same outage the moment the
+            // list is actually used.
+            if (res.success) {
+                this.conversations.next(res.data || []);
+            }
+        });
+    }
+    // Load messages for a specific conversation
+    loadMessages(conversationId) {
+        this.currentConversationId.next(conversationId);
+        this.dataService.CallApi({ url: `agent/conversations/${conversationId}/messages` }).subscribe(res => {
+            // CONVERTED (WS-6 Phase 4 triage). Unlike everything else in this service, this only runs because the
+            // user clicked a named conversation in the switcher. Failing left the thread pane holding the PREVIOUS
+            // conversation's messages under the new conversation's id — so the next thing they typed would have
+            // been sent into a thread they were not looking at.
+            if (!res.success)
+                this.apiErrorService.presentAppFailure(res, 'load', `agent/conversations/${conversationId}/messages`);
+            if (res.success) {
+                this.messages.next((res.data || []).map((m) => ({
+                    conversationId: m.conversationID,
+                    role: m.role,
+                    content: m.content,
+                    intent: m.intent,
+                    createdDate: new Date(m.createdDate)
+                })));
+            }
+        });
+    }
+    // Send a message — optimistically add user message, then POST to backend
+    sendMessage(text) {
+        if (!text.trim())
+            return;
+        // Optimistic: add user message immediately
+        const current = this.messages.value;
+        this.messages.next([...current, { role: 'user', content: text, createdDate: new Date() }]);
+        // Changed: the HTTP response is now the AUTHORITATIVE reply. It used to be discarded entirely and the
+        // answer was expected to arrive over SignalR — so with the hub down, or real-time switched off, the
+        // server answered and the user saw nothing at all. The request that asked the question is the one that
+        // carries the answer; SignalR is now only a cross-device echo, deduped on arrival.
+        this.dataService.CallApi({ url: 'agent/message', method: 'post' }, // Changed: was assistant/message
+        { text, appName: this.appName }).subscribe({
+            next: (res) => {
+                this.typing.next(false);
+                const reply = res?.data?.message;
+                if (reply)
+                    this.addAssistantMessage(reply);
+                this.applySessionInfo(res?.data?.sessionInfo);
+            },
+            error: () => {
+                this.typing.next(false);
+                this.addAssistantMessage('Sorry, that could not be sent. Please check your connection and try again.');
+            }
+        });
+    }
+    // Changed: one place that appends an assistant reply, so the HTTP answer and the SignalR echo of the same
+    // answer cannot both land. Matching on content against the last few messages rather than an id because the
+    // two paths carry no shared identifier — and the failure being prevented (the same answer shown twice) is
+    // more annoying than the rare case this suppresses (a genuine identical repeat).
+    addAssistantMessage(content) {
+        const recent = this.messages.value.slice(-4);
+        if (recent.some(m => m.role === 'assistant' && m.content === content))
+            return;
+        this.messages.next([...this.messages.value, {
+                role: 'assistant',
+                content,
+                createdDate: new Date()
+            }]);
+    }
+    // Changed: keeps the widget's idea of "what am I in the middle of" in step with the server's, and draws the
+    // boundary when a conversation rolls over so the user can see why the agent stopped referring to earlier
+    // messages. Without a visible line, a rollover looks like the agent simply forgetting.
+    applySessionInfo(info) {
+        if (!info) {
+            this.sessionInfo.next(null);
+            return;
+        }
+        if (info.newConversation) {
+            if (info.conversationID)
+                this.currentConversationId.next(info.conversationID);
+            this.messages.next([...this.messages.value, {
+                    role: 'assistant',
+                    content: 'New conversation',
+                    createdDate: new Date(),
+                    divider: true
+                }]);
+            this.loadConversations();
+        }
+        // A finished operation reports no session type — that is the signal to clear the banner
+        this.sessionInfo.next(info.sessionType ? info : null);
+    }
+    // Transcribe a recording WITHOUT invoking the agent — backs the composer's Stop button, so the user can
+    // review and edit what was heard before deciding to send.
+    transcribeOnly(audio, fileName) {
+        const form = new FormData();
+        form.append('audio', audio, fileName);
+        return this.dataService.CallApi({ url: 'agent/transcribe', method: 'post', isFormData: true }, form);
+    }
+    // One hands-free spoken turn: audio in, spoken answer out, in a single round trip. The reply comes back
+    // twice over — replyText verbatim for the transcript panel, spokenText as actually voiced — because a long
+    // list is summarised before it is spoken.
+    voiceTurn(audio, fileName) {
+        const form = new FormData();
+        form.append('audio', audio, fileName);
+        form.append('appName', this.appName);
+        return this.dataService.CallApi({ url: 'agent/voice-turn', method: 'post', isFormData: true }, form);
+    }
+    // Puts what was heard into the conversation thread, so a spoken turn reads like a typed one. Only the user
+    // side is added here — the agent's reply arrives over SignalR exactly as it does for a typed message, and
+    // adding it here as well would show it twice.
+    appendSpokenMessage(text) {
+        if (!text || !text.trim())
+            return;
+        this.messages.next([...this.messages.value, { role: 'user', content: text.trim(), createdDate: new Date() }]);
+    }
+    // Send a composed message — any combination of a staged photo, a voice clip and typed text, in one go.
+    // A placeholder user bubble goes up immediately and is swapped for the derived text when the backend
+    // replies, which also keeps it above the assistant's answer (that arrives over SignalR mid-request).
+    sendComposed(photo, photoName, audio, audioName, caption = '') {
+        const hasPhoto = !!(photo && photo.size);
+        const hasAudio = !!(audio && audio.size);
+        if (!hasPhoto && !hasAudio && !caption.trim())
+            return;
+        const placeholder = {
+            role: 'user',
+            content: caption.trim() || (hasAudio ? 'Voice note…' : 'Photo…'),
+            createdDate: new Date(),
+            pending: true
+        };
+        this.messages.next([...this.messages.value, placeholder]);
+        this.typing.next(true);
+        const form = new FormData();
+        if (hasPhoto)
+            form.append('photo', photo, photoName);
+        if (hasAudio)
+            form.append('audio', audio, audioName);
+        form.append('text', caption.trim());
+        form.append('appName', this.appName);
+        this.dataService.CallApi({ url: 'agent/media', method: 'post', isFormData: true }, form).subscribe({
+            next: (res) => {
+                this.typing.next(false);
+                if (res?.success && res.data?.inputText) {
+                    this.replaceMessage(placeholder, { ...placeholder, content: res.data.inputText, pending: false });
+                    return;
+                }
+                // Nothing usable came back — drop the placeholder and say why
+                this.removeMessage(placeholder);
+                this.messages.next([...this.messages.value, {
+                        role: 'assistant',
+                        content: res?.message || 'Sorry, I could not process that. Please try again.',
+                        createdDate: new Date()
+                    }]);
+            },
+            error: () => {
+                this.typing.next(false);
+                this.removeMessage(placeholder);
+                this.messages.next([...this.messages.value, {
+                        role: 'assistant',
+                        content: 'Sorry, that could not be sent. Please check your connection and try again.',
+                        createdDate: new Date()
+                    }]);
+            }
+        });
+    }
+    // Changed: kept so existing callers of the single-attachment API keep working
+    sendMedia(file, fileName, kind, caption = '') {
+        if (kind === 'voice')
+            this.sendComposed(null, '', file, fileName, caption);
+        else
+            this.sendComposed(file, fileName, null, '', caption);
+    }
+    // Swap a message in place so its position in the thread is preserved
+    replaceMessage(target, updated) {
+        const msgs = this.messages.value.slice();
+        const index = msgs.indexOf(target);
+        if (index < 0)
+            return;
+        msgs[index] = updated;
+        this.messages.next(msgs);
+    }
+    removeMessage(target) {
+        this.messages.next(this.messages.value.filter(m => m !== target));
+    }
+    // Start a new conversation — only when user explicitly clicks "New conversation"
+    newConversation() {
+        this.messages.next([]);
+        this.currentConversationId.next(null);
+        this.dataService.CallApi({ url: 'agent/conversations', method: 'post' }, { appName: this.appName }).subscribe(res => {
+            // DELIBERATELY SILENT (WS-6 Phase 4 triage). The UI has already done the thing the user asked for —
+            // messages cleared, id nulled, a blank thread on screen — before this call is even made. All the server
+            // round trip adds is a pre-allocated id, and sendMessage() creates one anyway when there is none. So a
+            // failure here changes nothing the user can see or do.
+            if (res.success && res.data) {
+                this.currentConversationId.next(res.data.conversationID);
+            }
+        });
+    }
+    // Delete a conversation
+    deleteConversation(id) {
+        this.dataService.CallApi({ url: `agent/conversations/${id}/delete`, method: 'post' }).subscribe(res => {
+            // CONVERTED (WS-6 Phase 4 triage). A delete the user pressed. Failing left the conversation sitting in
+            // the list exactly as it was, which reads as "the button did nothing" — and the answer to a button that
+            // did nothing is to press it again. Note the comment on the URL below: this endpoint has already been
+            // wrong once (a 405 on every call), and it was silence that let that survive.
+            if (!res.success)
+                this.apiErrorService.presentAppFailure(res, 'action', `agent/conversations/${id}/delete`);
+            if (res.success) {
+                this.loadConversations();
+                if (this.currentConversationId.value === id) {
+                    this.messages.next([]);
+                    this.currentConversationId.next(null);
+                }
+            }
+        });
+    }
+    // Toggle chat window open/closed
+    toggle() {
+        const opening = !this.isOpen.value;
+        this.isOpen.next(opening);
+        if (opening && !this.hasLoadedInitial) {
+            this.hasLoadedInitial = true;
+            this.restoreLastConversation(); // Changed: Load previous chat on first open
+        }
+    }
+    open() {
+        this.isOpen.next(true);
+        if (!this.hasLoadedInitial) {
+            this.hasLoadedInitial = true;
+            this.restoreLastConversation();
+        }
+    }
+    close() { this.isOpen.next(false); }
+    // Changed: Fetch conversation list and load the most recent one's messages
+    restoreLastConversation() {
+        this.dataService.CallApi({ url: 'agent/conversations' }).subscribe(res => {
+            if (res.success && res.data?.length > 0) {
+                this.conversations.next(res.data);
+                const latest = res.data[0]; // Backend returns ordered by CreatedDate desc
+                this.currentConversationId.next(latest.conversationID);
+                this.loadMessages(latest.conversationID);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentService, deps: [{ token: i1$1.DataServiceLib }, { token: i1$1.SignalRService }, { token: i1$1.ApiErrorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$1.DataServiceLib }, { type: i1$1.SignalRService }, { type: i1$1.ApiErrorService }] });
+
+// Floating chat widget component for in-app Agent (renamed from AssistantComponent)
+class AgentComponent {
+    // Changed: the floating FAB is suppressed in page mode (Phase 1), on mobile, and on the chat page's own
+    // route at any width — otherwise it hovers over the very page it would open.
+    get showFab() {
+        return !this.pageMode && !this.smallScreen && !this.onAgentRoute;
+    }
+    // Changed: the floating window follows the FAB. Page mode renders regardless of isOpen; the floating
+    // instance additionally refuses to render wherever its FAB is gone, so there are never two chat surfaces.
+    get showWindow() {
+        return this.pageMode || (this.isOpen && !this.smallScreen && !this.onAgentRoute);
+    }
+    static { this.MAX_RECORD_SECONDS = 120; } // Auto-stop so a forgotten recording can't run away
+    static { this.SETTLE_MS = 450; } // let the speakers finish before trusting the mic again
+    static { this.CALIBRATION_MS = 600; } // listen to the room before listening to the person
+    static { this.CONTINUE_RATIO = 0.55; } // hysteresis: it takes less to STAY in speech than to enter it
+    static { this.MAX_UTTERANCE_MS = 30000; } // a noisy cab must not record forever
+    static { this.IDLE_MS = 12000; } // no speech this long → don't upload silence, listen again
+    static { this.MAX_SILENT_MS = 180000; } // ...but give up after three minutes of nothing at all
+    constructor(agentService, signalRService, zone, router, breakpointObserver) {
+        this.agentService = agentService;
+        this.signalRService = signalRService;
+        this.zone = zone;
+        this.router = router;
+        this.breakpointObserver = breakpointObserver;
+        // Changed: one component, two presentations. false = the floating widget (FAB + fixed window, unchanged);
+        // true = the routed chat page (home/agent) — no FAB, window always rendered, no outside-click close, no
+        // minimize. Only presentation differs; all chat behaviour stays shared through AgentService.
+        this.pageMode = false;
+        // Changed: mobile retires the floating widget entirely — the bottom tab bar's Chat tab is the entry point
+        // and home/agent is the surface. Both flags only ever gate the FLOATING presentation; page mode ignores them.
+        this.smallScreen = false; // Changed: same (max-width: 600px) breakpoint nav-menu uses — one source of truth
+        this.onAgentRoute = false; // Changed: true while the routed chat page owns the screen
+        this.messages = [];
+        this.conversations = []; // Changed: switcher list
+        this.currentConversationId = null;
+        this.showConversations = false; // Changed: the switcher is a dropdown, not a permanent panel — the window is small
+        this.sessionInfo = null; // Changed: drives the "you are creating a Customer" banner
+        this.isOpen = false;
+        this.isTyping = false;
+        this.inputText = '';
+        this.greeting = '';
+        this.suggestedQuestions = [];
+        this.isOnline = false;
+        this.isRecording = false; // Changed: voice note capture state
+        this.recordSeconds = 0;
+        this.mediaError = ''; // Changed: shown inline when the mic is blocked or unavailable
+        this.pendingPhoto = null; // Changed: photo is staged, not sent — the user adds a caption first
+        this.isTranscribing = false; // Changed: Stop pressed, waiting for the transcript to land in the text box
+        this.subs = [];
+        this.shouldScroll = false;
+        this.viewportHandler = null; // Changed: visualViewport resize handler reference
+        // Changed: voice note recording internals
+        this.recorder = null;
+        this.mediaStream = null;
+        this.chunks = [];
+        this.recordTimer = null;
+        this.stopMode = 'send'; // Changed: what to do with the clip once stopped
+        // ---------------------------------------------------------------------------------------------------
+        // Voice mode — hands-free. Enter once, then speak and listen in a loop until you exit. Built for someone
+        // driving or with their hands full, so nothing between entry and exit requires touch or sight.
+        //
+        // The session is deliberately HALF-DUPLEX: the microphone is closed whenever audio is playing, and
+        // playback finishes before it reopens. That single property removes echo cancellation, acoustic feedback
+        // and interrupt arbitration entirely. Preserve it — barge-in would be a re-architecture, not an increment.
+        // ---------------------------------------------------------------------------------------------------
+        this.voiceMode = false;
+        // 'starting' is the room-calibration window. It exists because showing "Listening" during it was a lie —
+        // the microphone is open but the detector is still measuring the noise floor, so anything said then is
+        // measured AS noise and raises the bar against the speaker's own voice.
+        this.voiceState = 'idle';
+        this.voiceTranscript = ''; // what it heard on the last turn
+        this.voiceReply = ''; // what it answered, verbatim (the spoken version is shortened)
+        this.voiceError = '';
+        this.voiceLevel = 0; // 0..1, drives the level meter so the user can see the mic is live
+        // Tunable because a vehicle cabin is not a desk. These are fields rather than constants so they can be
+        // adjusted against a real environment without a rebuild.
+        this.voiceThreshold = 0.01; // absolute floor — the room can raise this, never lower it
+        this.noiseMultiplier = 3; // speech must be this many times the measured room noise
+        this.maxThreshold = 0.08; // ...but never so high that a normal voice cannot clear it
+        this.onsetMs = 250; // sustained loudness needed before it counts as speech at all
+        this.silenceMs = 2200; // quiet needed to call the utterance finished
+        this.minSpeechMs = 400; // anything shorter than this was a noise, not a sentence
+        // What calibration actually settled on, exposed so it can be inspected while running
+        this.noiseFloor = 0;
+        this.activeThreshold = 0.03;
+        this.calibrationEndsAt = 0;
+        this.calibrationSamples = [];
+        this.loudSince = 0;
+        this.voiceRecorder = null;
+        this.voiceStream = null;
+        this.voiceChunks = [];
+        this.audioContext = null;
+        this.analyser = null;
+        this.vadTimer = null;
+        this.player = null;
+        this.speechStartedAt = 0;
+        this.lastLoudAt = 0;
+        this.listenStartedAt = 0;
+        this.silentSince = 0;
+        this.abandonUtterance = false; // true when the clip should be dropped rather than uploaded
+        // ---------------------------------------------------------------------------------------------------
+        // Voice mode
+        // ---------------------------------------------------------------------------------------------------
+        // Tap versus hold on the single mic button. The composer row is full — attach, text, mic, send — so voice
+        // mode gets a gesture rather than a fifth control that would squeeze the text field on a phone. Same idea
+        // as holding the mic in WhatsApp: the button keeps its obvious job, the second mode hides behind the hold.
+        this.micHeld = false;
+        this.micHoldTimer = null;
+        this.micHoldFired = false;
+    } // Changed: Router + BreakpointObserver gate the floating presentation
+    // Every voice state change goes through here. The states are set from audio-element events, a MediaRecorder
+    // callback and a sampling timer, and those did not reliably trigger a repaint — the panel was showing
+    // "Listening" while the machine was already capturing, thinking, or speaking aloud. That is worse than no
+    // indicator at all: someone who cannot look at the screen is being told the wrong thing about whose turn it
+    // is. Re-entering the Angular zone forces the view to catch up immediately.
+    setVoiceState(state) {
+        if (this.voiceState === state)
+            return;
+        this.zone.run(() => { this.voiceState = state; });
+    }
+    get agentName() {
+        return this.agentService.agentName;
+    }
+    ngOnInit() {
+        this.agentService.loadConfig();
+        this.initMobileViewport(); // Changed: Listen for keyboard resize on mobile
+        this.subs.push(this.agentService.messages$.subscribe(msgs => {
+            this.messages = msgs;
+            this.shouldScroll = true;
+        }), this.agentService.isOpen$.subscribe(open => {
+            this.isOpen = open;
+            if (open)
+                this.focusInput();
+            // Changed: the widget can be closed by an outside click while a voice session is running. The
+            // component survives that (only the window is *ngIf'd away), so without this the microphone would
+            // stay live behind a hidden window with no way to reach the exit button.
+            // Changed: page mode ignores isOpen for visibility, so a close() from the floating window elsewhere
+            // must not tear down a voice session that is still on screen on the page.
+            else if (this.voiceMode && !this.pageMode)
+                this.stopVoiceMode();
+        }), this.agentService.typing$.subscribe(typing => {
+            this.isTyping = typing;
+            this.shouldScroll = true;
+        }), this.agentService.greeting$.subscribe(g => this.greeting = g), this.agentService.suggestedQuestions$.subscribe(q => this.suggestedQuestions = q), 
+        // Changed: the conversation switcher and the session banner both come from the service
+        this.agentService.conversations$.subscribe(list => this.conversations = list), this.agentService.currentConversationId$.subscribe(id => this.currentConversationId = id), this.agentService.sessionInfo$.subscribe(info => this.sessionInfo = info), this.signalRService.dataHubConnected$.subscribe(connected => this.isOnline = connected), 
+        // Changed: crossing into mobile must not strand an open floating window behind the new tab bar. Only
+        // the FLOATING instance closes it — the page instance never mutates the shared isOpen (see fsd Risk 2).
+        this.breakpointObserver.observe(['(max-width: 600px)']).subscribe((result) => {
+            this.smallScreen = result.matches;
+            if (result.matches && !this.pageMode && this.isOpen)
+                this.agentService.close();
+        }), 
+        // Changed: the routed chat page renders its own instance, so the floating one steps aside on that URL
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
+            this.onAgentRoute = this.isAgentRoute(event.urlAfterRedirects || event.url);
+            if (this.onAgentRoute && !this.pageMode && this.isOpen)
+                this.agentService.close();
+        }));
+        this.onAgentRoute = this.isAgentRoute(this.router.url); // Changed: NavigationEnd has usually already fired by now
+        this.agentService.loadConversations(); // Changed: the switcher needs the list before it is opened
+    }
+    // Changed: 'home/agent' is mounted through the shared home routing module, so the reliable test is the
+    // trailing segment rather than a whole-URL match that would miss a consumer app's own route prefix.
+    isAgentRoute(url) {
+        const path = (url || '').split('?')[0].split(';')[0].split('#')[0].replace(/\/+$/, '');
+        return path.endsWith('/agent');
+    }
+    // Reads as "creating a Customer" rather than "Create a Customer" in the banner
+    get sessionVerb() {
+        switch (this.sessionInfo?.sessionType) {
+            case 'Create': return 'Creating';
+            case 'Edit': return 'Editing';
+            case 'Delete': return 'Deleting';
+            case 'BatchPost': return 'Batch posting';
+            default: return 'Working on';
+        }
+    }
+    // Changed: switching threads. The agent has always kept several conversations per user, but the widget
+    // could only ever show the newest one — earlier threads existed and were unreachable.
+    selectConversation(id) {
+        if (id === this.currentConversationId)
+            return;
+        this.showConversations = false;
+        this.agentService.loadMessages(id);
+    }
+    toggleConversationList() {
+        this.showConversations = !this.showConversations;
+        if (this.showConversations)
+            this.agentService.loadConversations();
+    }
+    ngAfterViewChecked() {
+        if (this.shouldScroll) {
+            this.scrollToBottom();
+            this.shouldScroll = false;
+        }
+    }
+    toggleChat() {
+        this.agentService.toggle();
+    }
+    // Changed: Close chat when clicking outside the chat window and FAB button
+    onDocumentClick(event) {
+        if (this.pageMode)
+            return; // Changed: a page does not close when you click the page — outside-click close is float-only
+        if (!this.isOpen)
+            return;
+        // Changed: match on composedPath() instead of closest(). A control that re-renders the widget removes
+        // itself from the DOM before this handler runs — the mic button lives inside *ngIf="!isRecording", so
+        // starting a recording detaches it. closest() on a detached node finds nothing, and the widget used to
+        // close itself the instant recording began, leaving the mic live behind a hidden window.
+        //
+        // cdk-overlay-container is checked for the same reason: Material renders menus, tooltips and dialogs in
+        // an overlay attached to <body>, OUTSIDE .agent-window. Without this, picking an item from the attach
+        // menu closed the whole chat. Any overlay open on top of the widget counts as being inside it.
+        const path = (event.composedPath ? event.composedPath() : []);
+        if (path.some(el => el?.classList?.contains('agent-window')
+            || el?.classList?.contains('agent-fab')
+            || el?.classList?.contains('cdk-overlay-container')))
+            return;
+        // Fallback for browsers without composedPath, and for targets still attached
+        const target = event.target;
+        if (target?.isConnected && (target.closest('.agent-window') || target.closest('.agent-fab')))
+            return;
+        // A detached target means the click came from a control that just re-rendered — i.e. inside the widget
+        if (target && !target.isConnected)
+            return;
+        this.agentService.close();
+    }
+    // Changed: sends whatever is staged — typed text, an attached photo, or both. A recording in progress is
+    // stopped and folded into the same send rather than being lost.
+    sendMessage() {
+        if (this.isRecording) {
+            this.stopMode = 'send';
+            this.recorder?.stop();
+            return;
+        }
+        const caption = this.inputText.trim();
+        if (!caption && !this.pendingPhoto)
+            return;
+        if (this.pendingPhoto) {
+            this.agentService.sendComposed(this.pendingPhoto, this.pendingPhoto.name || 'photo.jpg', null, '', caption);
+            this.pendingPhoto = null;
+        }
+        else {
+            this.agentService.sendMessage(caption);
+        }
+        this.inputText = '';
+    }
+    // Changed: true when there is anything worth sending
+    get canSend() {
+        return !!this.inputText.trim() || !!this.pendingPhoto;
+    }
+    clearPhoto() {
+        this.pendingPhoto = null;
+    }
+    sendSuggested(question) {
+        this.agentService.sendMessage(question);
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.sendMessage();
+        }
+    }
+    newConversation() {
+        this.agentService.newConversation();
+    }
+    // Changed: mm:ss shown while recording
+    get recordDisplay() {
+        const mins = Math.floor(this.recordSeconds / 60);
+        const secs = this.recordSeconds % 60;
+        return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+    }
+    // Changed: voice note capture — the clip goes straight to the backend, which transcribes it and feeds the
+    // text into the agent exactly as Telegram and WhatsApp voice notes are handled
+    async startRecording() {
+        if (this.isRecording)
+            return;
+        this.mediaError = '';
+        if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
+            this.mediaError = 'Voice notes are not supported in this browser.';
+            return;
+        }
+        try {
+            this.mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        }
+        catch {
+            this.mediaError = 'Microphone access was blocked. Allow it in your browser settings to send voice notes.';
+            return;
+        }
+        this.chunks = [];
+        this.stopMode = 'send';
+        const mimeType = this.pickAudioMimeType();
+        this.recorder = mimeType ? new MediaRecorder(this.mediaStream, { mimeType }) : new MediaRecorder(this.mediaStream);
+        this.recorder.ondataavailable = e => { if (e.data && e.data.size > 0)
+            this.chunks.push(e.data); };
+        this.recorder.onstop = () => this.finishRecording();
+        this.recorder.start();
+        this.isRecording = true;
+        this.recordSeconds = 0;
+        this.recordTimer = setInterval(() => {
+            this.recordSeconds++;
+            if (this.recordSeconds >= AgentComponent.MAX_RECORD_SECONDS)
+                this.stopRecording();
+        }, 1000);
+    }
+    // Changed: send immediately — the clip goes with whatever else is staged, no review step
+    stopRecording() {
+        if (!this.isRecording || !this.recorder)
+            return;
+        this.stopMode = 'send';
+        this.recorder.stop(); // finishRecording() runs from onstop
+    }
+    // Changed: stop and transcribe INTO the text box so the user can read it back, edit it, and send when ready
+    stopAndTranscribe() {
+        if (!this.isRecording || !this.recorder)
+            return;
+        this.stopMode = 'transcribe';
+        this.recorder.stop();
+    }
+    cancelRecording() {
+        if (!this.isRecording || !this.recorder)
+            return;
+        this.stopMode = 'cancel';
+        this.recorder.stop();
+    }
+    static { this.MIC_HOLD_MS = 500; } // long enough not to fire on a normal tap
+    onMicPressStart() {
+        if (this.voiceMode || this.isRecording)
+            return;
+        this.micHeld = true;
+        this.micHoldFired = false;
+        this.micHoldTimer = setTimeout(() => {
+            this.micHeld = false;
+            this.micHoldFired = true; // swallows the click that follows the release
+            if (navigator.vibrate)
+                navigator.vibrate(30); // confirms the mode switch without needing to look
+            this.startVoiceMode();
+        }, AgentComponent.MIC_HOLD_MS);
+    }
+    onMicPressEnd() {
+        this.micHeld = false;
+        if (this.micHoldTimer) {
+            clearTimeout(this.micHoldTimer);
+            this.micHoldTimer = null;
+        }
+    }
+    // Runs after pointerup. A hold has already acted, so the click that follows it must do nothing.
+    onMicClick() {
+        if (this.micHoldFired) {
+            this.micHoldFired = false;
+            return;
+        }
+        this.startRecording();
+    }
+    // Entering is the ONLY user gesture in the whole session, so everything that needs one happens here: iOS
+    // will not let audio play later unless an AudioContext was created and resumed inside a real tap.
+    async startVoiceMode() {
+        if (this.voiceMode)
+            return;
+        this.voiceError = '';
+        this.voiceTranscript = '';
+        this.voiceReply = '';
+        if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
+            this.voiceError = 'Voice mode is not supported in this browser.';
+            return;
+        }
+        if (this.isRecording)
+            this.cancelRecording(); // never run both capture paths at once
+        try {
+            const Ctx = window.AudioContext || window.webkitAudioContext;
+            this.audioContext = new Ctx();
+            if (this.audioContext.state === 'suspended')
+                await this.audioContext.resume();
+        }
+        catch {
+            this.voiceError = 'Audio could not be started in this browser.';
+            return;
+        }
+        this.voiceMode = true;
+        this.silentSince = Date.now();
+        await this.beginListening();
+    }
+    // One tap out, from anywhere in the loop. Everything is torn down: recorder, microphone, playback, timers.
+    stopVoiceMode() {
+        this.voiceMode = false;
+        this.setVoiceState('idle');
+        this.voiceLevel = 0;
+        this.abandonUtterance = true;
+        this.stopVoiceCapture();
+        this.stopPlayback();
+        if (this.audioContext) {
+            try {
+                this.audioContext.close();
+            }
+            catch { }
+            this.audioContext = null;
+        }
+    }
+    // Opens the mic and waits. The clip records from the moment the mic opens, so the first syllable is never
+    // clipped — the detector decides afterwards whether anything worth sending was actually said.
+    async beginListening() {
+        if (!this.voiceMode)
+            return;
+        try {
+            // These three constraints were all settled by measurement on a real machine, not by reasoning:
+            //
+            // echoCancellation ON  — without it the microphone hears the agent's OWN reply from the speakers and
+            //                        answers itself; a spoken reply came back as the next command.
+            // noiseSuppression OFF — tried ON to fight fan noise and it crushed the voice instead: a normal
+            //                        speaking voice fell from 0.15 to 0.026 RMS, barely grazing the threshold, and
+            //                        no utterance was ever captured. Steady noise is already handled better by the
+            //                        per-cycle noise-floor calibration and the sustained-onset rule below, neither
+            //                        of which costs any signal.
+            // autoGainControl ON   — also tried OFF (to keep levels stable for calibration) and that made it worse
+            //                        still, 0.008 RMS. A drifting floor beats a microphone that cannot hear you.
+            this.voiceStream = await navigator.mediaDevices.getUserMedia({
+                audio: {
+                    echoCancellation: true,
+                    noiseSuppression: false,
+                    autoGainControl: true
+                }
+            });
+        }
+        catch {
+            this.voiceError = 'Microphone access was blocked. Allow it in your browser settings to use voice mode.';
+            this.stopVoiceMode();
+            return;
+        }
+        if (!this.voiceMode) { // exited while the permission prompt was up
+            this.voiceStream.getTracks().forEach(t => t.stop());
+            this.voiceStream = null;
+            return;
+        }
+        this.voiceChunks = [];
+        this.abandonUtterance = false;
+        this.speechStartedAt = 0;
+        this.listenStartedAt = Date.now();
+        this.lastLoudAt = 0;
+        this.loudSince = 0;
+        // Re-measure the room on every cycle: an engine starts, a window opens, the air-con changes note
+        this.calibrationSamples = [];
+        this.calibrationEndsAt = Date.now() + AgentComponent.CALIBRATION_MS;
+        const mimeType = this.pickAudioMimeType();
+        this.voiceRecorder = mimeType
+            ? new MediaRecorder(this.voiceStream, { mimeType })
+            : new MediaRecorder(this.voiceStream);
+        this.voiceRecorder.ondataavailable = e => { if (e.data && e.data.size > 0)
+            this.voiceChunks.push(e.data); };
+        this.voiceRecorder.onstop = () => this.onUtteranceCaptured();
+        this.voiceRecorder.start();
+        // NOT 'listening' yet — the room is being measured first. The "your turn" tone and the Listening label
+        // both wait for calibration to finish, so the tone always means the same thing: start talking now.
+        this.setVoiceState('starting');
+        this.startVad();
+    }
+    // Voice activity detection: RMS over a short window, no dependencies. Speech starts when it goes loud, ends
+    // after a run of quiet — which is what makes the turn hands-free, since nothing has to be pressed to stop.
+    startVad() {
+        if (!this.audioContext || !this.voiceStream)
+            return;
+        const source = this.audioContext.createMediaStreamSource(this.voiceStream);
+        this.analyser = this.audioContext.createAnalyser();
+        this.analyser.fftSize = 1024;
+        source.connect(this.analyser);
+        const samples = new Uint8Array(this.analyser.fftSize);
+        this.vadTimer = setInterval(() => {
+            if (!this.analyser)
+                return;
+            this.analyser.getByteTimeDomainData(samples);
+            let sum = 0;
+            for (let i = 0; i < samples.length; i++) {
+                const deviation = (samples[i] - 128) / 128;
+                sum += deviation * deviation;
+            }
+            const rms = Math.sqrt(sum / samples.length);
+            this.voiceLevel = Math.min(1, rms / 0.15); // meter only — the decision uses rms directly
+            this.evaluateVad(rms);
+        }, 50);
+    }
+    evaluateVad(rms) {
+        const now = Date.now();
+        // Phase 0 — listen to the ROOM before listening to the person. A fixed threshold cannot know whether it
+        // is sitting in a quiet office or next to a fan, so the first moments of every listening cycle measure the
+        // ambient level and the speech threshold is set above it. This is what stops a fan being heard as speech.
+        if (this.calibrationEndsAt) {
+            if (now < this.calibrationEndsAt) {
+                this.calibrationSamples.push(rms);
+                return;
+            }
+            this.applyCalibration();
+            // Only NOW is it actually listening to the person, so this is where the label flips and the "your turn"
+            // tone plays. The listening clock restarts here too — the calibration window must not count against the
+            // idle timeout, or a slow starter loses part of their thinking time.
+            this.setVoiceState('listening');
+            this.listenStartedAt = now;
+            this.earcon('ready');
+        }
+        const enterThreshold = this.activeThreshold;
+        // Hysteresis: once someone is speaking it takes LESS to keep them speaking. Without this, the natural dip
+        // between words reads as the end of the sentence.
+        const stayThreshold = enterThreshold * AgentComponent.CONTINUE_RATIO;
+        if (!this.speechStartedAt) {
+            // Not speaking yet. Loudness must be SUSTAINED to count — a door, a keyboard, a fan surge is loud for
+            // an instant, and a single loud sample used to be enough to start capturing.
+            if (rms >= enterThreshold) {
+                if (!this.loudSince)
+                    this.loudSince = now;
+                if (now - this.loudSince >= this.onsetMs) {
+                    this.speechStartedAt = this.loudSince; // backdated, so the first word is not clipped
+                    this.lastLoudAt = now;
+                    this.setVoiceState('capturing');
+                    this.silentSince = 0; // they are talking, so the give-up clock stops
+                    this.earcon('gotyou'); // "I can hear you" — answers the question the old single beep left open
+                }
+            }
+            else {
+                this.loudSince = 0; // a blip, not a sentence
+            }
+        }
+        else {
+            // Mid-sentence. Pauses and breaths are expected — only a long quiet ends the turn.
+            if (rms >= stayThreshold) {
+                this.lastLoudAt = now;
+            }
+            else if (now - this.lastLoudAt >= this.silenceMs) {
+                // Too short to be a sentence? Then it was a noise — throw it away instead of asking the model to
+                // find words in it, which is where "Hallo!" and other invented transcripts come from.
+                const spoken = this.lastLoudAt - this.speechStartedAt;
+                this.endUtterance(spoken < this.minSpeechMs);
+                return;
+            }
+            if (now - this.speechStartedAt >= AgentComponent.MAX_UTTERANCE_MS)
+                this.endUtterance(false);
+            return;
+        }
+        // Nothing said yet — don't upload silence. Reopen the mic instead of ending the session, because someone
+        // driving may simply not be ready to talk yet.
+        // The speechStartedAt guard matters: the branch above can START speech on this very sample, and without
+        // it the idle check below would immediately throw that fresh utterance away.
+        if (!this.speechStartedAt && now - this.listenStartedAt >= AgentComponent.IDLE_MS) {
+            if (!this.silentSince)
+                this.silentSince = now;
+            if (now - this.silentSince >= AgentComponent.MAX_SILENT_MS) {
+                this.voiceError = 'Voice mode ended after a long silence.';
+                this.stopVoiceMode();
+                return;
+            }
+            this.endUtterance(true); // drop this clip and listen again
+        }
+    }
+    // Turns the room measurement into a working threshold. Uses a high percentile rather than the average so a
+    // steady hum sets the floor without one loud knock dragging it up, then requires speech to be several times
+    // that. The configured voiceThreshold acts as a floor only — a noisy room can raise the bar, never lower it.
+    applyCalibration() {
+        this.calibrationEndsAt = 0;
+        const samples = this.calibrationSamples.slice().sort((a, b) => a - b);
+        this.calibrationSamples = [];
+        if (!samples.length) {
+            this.activeThreshold = this.voiceThreshold;
+            return;
+        }
+        const percentile = samples[Math.min(samples.length - 1, Math.floor(samples.length * 0.9))];
+        this.noiseFloor = percentile;
+        // Clamped at BOTH ends. The upper clamp is not theoretical: calibrating while someone was still talking
+        // measured a "room" of 0.17 and set the bar at 0.52 — around three times louder than any normal voice, so
+        // the microphone was open and permanently deaf. A ceiling means the worst case is over-sensitivity, which
+        // the onset rule and minimum-utterance check still catch, rather than total silence.
+        const scaled = percentile * this.noiseMultiplier;
+        this.activeThreshold = Math.min(this.maxThreshold, Math.max(this.voiceThreshold, scaled));
+    }
+    // Ends the current capture. `abandon` means the clip is thrown away rather than sent.
+    endUtterance(abandon) {
+        this.abandonUtterance = abandon;
+        if (this.vadTimer) {
+            clearInterval(this.vadTimer);
+            this.vadTimer = null;
+        }
+        this.voiceLevel = 0;
+        if (this.voiceRecorder && this.voiceRecorder.state !== 'inactive') {
+            this.voiceRecorder.stop(); // onUtteranceCaptured() runs from onstop
+        }
+        else {
+            this.onUtteranceCaptured();
+        }
+    }
+    // The microphone is released HERE, before anything is sent — so it is provably shut for the whole of
+    // thinking and speaking, which is what keeps the session half-duplex.
+    onUtteranceCaptured() {
+        const chunks = this.voiceChunks;
+        const mimeType = this.voiceRecorder?.mimeType || 'audio/webm';
+        this.releaseMic();
+        if (!this.voiceMode)
+            return;
+        if (this.abandonUtterance || !chunks.length) {
+            this.voiceChunks = [];
+            this.beginListening(); // nothing worth sending — straight back to listening
+            return;
+        }
+        this.voiceChunks = [];
+        this.setVoiceState('thinking');
+        const blob = new Blob(chunks, { type: mimeType });
+        const fileName = `voice-turn.${this.extensionFor(mimeType)}`;
+        this.agentService.voiceTurn(blob, fileName).subscribe({
+            next: (res) => this.onTurnAnswered(res),
+            error: () => this.speakThenListen('', 'Sorry, that did not get through. Please try again.')
+        });
+    }
+    onTurnAnswered(res) {
+        if (!this.voiceMode)
+            return;
+        const data = res?.data || {};
+        if (data.transcript) {
+            this.voiceTranscript = data.transcript;
+            this.agentService.appendSpokenMessage(data.transcript); // the spoken turn joins the normal thread
+        }
+        const reply = data.replyText || res?.message || 'Sorry, something went wrong.';
+        this.speakThenListen(data.audioBase64, reply, data.audioMimeType);
+    }
+    // Plays the answer, then reopens the microphone STRICTLY on 'ended'. Never before — that ordering is the
+    // half-duplex guarantee, and it is why no echo cancellation is needed anywhere in this feature.
+    speakThenListen(audioBase64, replyText, mimeType = 'audio/mpeg') {
+        this.voiceReply = replyText;
+        this.setVoiceState('speaking');
+        if (!audioBase64) {
+            // No audio came back (a network failure, or speech synthesis was unavailable server-side). Say it with
+            // the browser's own voice rather than leaving someone who cannot look at the screen in silence.
+            this.speakFallback(replyText);
+            return;
+        }
+        this.stopPlayback();
+        this.player = new Audio(`data:${mimeType || 'audio/mpeg'};base64,${audioBase64}`);
+        // Keep the label honest: 'speaking' is re-asserted when sound actually starts, not merely when it was
+        // requested, so the indicator never claims to be doing something the ear cannot hear yet.
+        this.player.onplaying = () => { if (this.voiceMode)
+            this.setVoiceState('speaking'); };
+        this.player.onended = () => this.afterSpeaking();
+        this.player.onerror = () => this.afterSpeaking();
+        this.player.play().catch(() => this.afterSpeaking()); // autoplay refused → don't hang the loop
+    }
+    // Browser speech synthesis, used only when the server could not produce audio.
+    // Chrome's utterance.onend is unreliable for long text — it can fire early or not at all, which is what made
+    // the panel say "Listening" while a voice was still talking. So the end of speech is confirmed by POLLING
+    // speechSynthesis.speaking rather than by trusting the event.
+    speakFallback(text) {
+        const synth = window.speechSynthesis;
+        if (!synth || !text) {
+            this.afterSpeaking();
+            return;
+        }
+        try {
+            const utterance = new window.SpeechSynthesisUtterance(text);
+            synth.speak(utterance);
+            const started = Date.now();
+            const watch = setInterval(() => {
+                const stillTalking = synth.speaking || synth.pending;
+                const tooLong = Date.now() - started > 60000; // never wedge the loop on a stuck engine
+                if (!this.voiceMode) {
+                    clearInterval(watch);
+                    return;
+                }
+                if (stillTalking && !tooLong) {
+                    this.setVoiceState('speaking');
+                    return;
+                }
+                clearInterval(watch);
+                this.afterSpeaking();
+            }, 200);
+        }
+        catch {
+            this.afterSpeaking();
+        }
+    }
+    // 'ended' means the audio element finished, NOT that the room is quiet: the last of it is still leaving the
+    // speakers and reverberating. Reopening instantly meant the mic caught the tail of the agent's own sentence
+    // and, worse, calibrated the noise floor against it. A short settle keeps the loop honest.
+    afterSpeaking() {
+        this.player = null;
+        if (!this.voiceMode)
+            return;
+        setTimeout(() => { if (this.voiceMode)
+            this.beginListening(); }, AgentComponent.SETTLE_MS);
+    }
+    // Three tones, each meaning exactly ONE thing, because "a beep happened" is not information:
+    //
+    //   ready  — rising two-note, plays when it is ready FOR YOU.        "Start talking now."
+    //   gotyou — single soft note, plays the moment your speech is       "I can hear you, keep going."
+    //            detected, so you know you were picked up
+    //   taken  — falling two-note, plays when the mic closes and it      "I have it, I'm working on it."
+    //            starts working
+    //
+    // Rising always means the floor is yours; falling always means it has been taken away. That direction is
+    // the whole cue — it can be recognised without looking and without remembering pitches.
+    earcon(kind) {
+        if (!this.audioContext)
+            return;
+        const notes = kind === 'ready' ? [660, 990]
+            : kind === 'taken' ? [660, 440]
+                : [880];
+        try {
+            const start = this.audioContext.currentTime;
+            notes.forEach((frequency, index) => {
+                const oscillator = this.audioContext.createOscillator();
+                const gain = this.audioContext.createGain();
+                oscillator.type = 'sine';
+                oscillator.frequency.value = frequency;
+                const at = start + index * 0.1;
+                const peak = kind === 'gotyou' ? 0.06 : 0.12; // the mid-speech cue is deliberately quieter
+                gain.gain.setValueAtTime(0.0001, at);
+                gain.gain.exponentialRampToValueAtTime(peak, at + 0.01);
+                gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.09);
+                oscillator.connect(gain);
+                gain.connect(this.audioContext.destination);
+                oscillator.start(at);
+                oscillator.stop(at + 0.1);
+            });
+        }
+        catch { }
+    }
+    releaseMic() {
+        if (this.vadTimer) {
+            clearInterval(this.vadTimer);
+            this.vadTimer = null;
+        }
+        this.analyser = null;
+        this.voiceRecorder = null;
+        this.voiceLevel = 0;
+        if (this.voiceStream) {
+            this.voiceStream.getTracks().forEach(t => t.stop());
+            this.voiceStream = null;
+            this.earcon('taken'); // "I have it" — the floor is no longer yours
+        }
+    }
+    stopVoiceCapture() {
+        if (this.voiceRecorder && this.voiceRecorder.state !== 'inactive') {
+            try {
+                this.voiceRecorder.stop();
+            }
+            catch { }
+        }
+        this.releaseMic();
+        this.voiceChunks = [];
+    }
+    stopPlayback() {
+        if (!this.player)
+            return;
+        try {
+            this.player.pause();
+            this.player.currentTime = 0;
+        }
+        catch { }
+        this.player.onended = null;
+        this.player.onerror = null;
+        this.player = null;
+        const synth = window.speechSynthesis;
+        if (synth) {
+            try {
+                synth.cancel();
+            }
+            catch { }
+        }
+    }
+    // What the state indicator reads. Plain words, because it is glanced at rather than read.
+    get voiceStateLabel() {
+        switch (this.voiceState) {
+            // Changed: shown during room calibration. "Wait" rather than "Listening", because talking during this
+            // window is actively harmful — the words get measured as background noise.
+            case 'starting': return 'Getting ready';
+            case 'listening': return 'Listening';
+            // Changed: capturing is now shown. It tells the user it has locked onto their voice and is WAITING for
+            // them to finish — without it, a long pause feels like the thing has stopped paying attention.
+            case 'capturing': return 'Hearing you';
+            case 'thinking': return 'Thinking';
+            case 'speaking': return 'Speaking';
+            default: return '';
+        }
+    }
+    get voiceStateIcon() {
+        switch (this.voiceState) {
+            case 'starting': return 'graphic_eq'; // measuring the room, not the person
+            case 'listening':
+            case 'capturing': return 'mic';
+            case 'thinking': return 'hourglass_top';
+            case 'speaking': return 'volume_up';
+            default: return 'mic_off';
+        }
+    }
+    // Changed: "Take photo" — hands off to the device camera. On a phone this opens the camera app on the rear
+    // lens and returns the shot; no in-page camera permission is involved because the OS handles it. Desktop
+    // browsers ignore `capture` and fall back to the file picker.
+    takePhoto() {
+        this.cameraInput?.nativeElement.click();
+    }
+    // Changed: "Choose photo" — same input minus `capture`, so it opens the gallery / file picker
+    choosePhoto() {
+        this.galleryInput?.nativeElement.click();
+    }
+    // Changed: photo capture now STAGES the file instead of sending it. Nothing leaves until the user presses
+    // send, so they can add a typed or spoken caption first — that caption is the actual command, the photo is
+    // the evidence it refers to. `capture` opens the camera directly on mobile, the file picker on desktop.
+    onPhotoSelected(event) {
+        const input = event.target;
+        const file = input.files && input.files.length ? input.files[0] : null;
+        input.value = ''; // Reset so picking the same file twice still fires a change event
+        if (!file)
+            return;
+        this.pendingPhoto = file;
+        this.focusInput();
+    }
+    // Picks a container the browser can record AND the transcription endpoint accepts. Chrome/Edge/Firefox give
+    // webm/opus, Safari gives mp4 — both are supported server-side, so no transcoding is needed anywhere.
+    pickAudioMimeType() {
+        const candidates = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/ogg;codecs=opus', 'audio/ogg'];
+        return candidates.find(t => MediaRecorder.isTypeSupported(t)) || '';
+    }
+    finishRecording() {
+        const mode = this.stopMode;
+        this.clearRecording();
+        if (mode === 'cancel' || !this.chunks.length) {
+            this.chunks = [];
+            return;
+        }
+        const type = this.recorder?.mimeType || 'audio/webm';
+        const blob = new Blob(this.chunks, { type });
+        const fileName = `voice-note.${this.extensionFor(type)}`;
+        this.chunks = [];
+        // Stop → transcribe into the text box for review; the photo (if any) stays staged
+        if (mode === 'transcribe') {
+            this.isTranscribing = true;
+            this.agentService.transcribeOnly(blob, fileName).subscribe({
+                next: (res) => {
+                    this.isTranscribing = false;
+                    if (res?.success && res.data?.text) {
+                        const existing = this.inputText.trim();
+                        this.inputText = existing ? `${existing} ${res.data.text}` : res.data.text;
+                        this.focusInput();
+                    }
+                    else {
+                        this.mediaError = res?.message || 'Sorry, that recording could not be transcribed.';
+                    }
+                },
+                error: () => {
+                    this.isTranscribing = false;
+                    this.mediaError = 'Sorry, that recording could not be transcribed.';
+                }
+            });
+            return;
+        }
+        // Send → the clip goes with the staged photo and whatever is typed, all in one message
+        this.agentService.sendComposed(this.pendingPhoto, this.pendingPhoto?.name || 'photo.jpg', blob, fileName, this.inputText.trim());
+        this.pendingPhoto = null;
+        this.inputText = '';
+    }
+    extensionFor(mimeType) {
+        const type = (mimeType || '').toLowerCase();
+        if (type.indexOf('mp4') >= 0)
+            return 'mp4';
+        if (type.indexOf('ogg') >= 0)
+            return 'ogg';
+        return 'webm';
+    }
+    // Releases the mic — without this the browser keeps showing the recording indicator
+    clearRecording() {
+        this.isRecording = false;
+        this.recordSeconds = 0;
+        if (this.recordTimer) {
+            clearInterval(this.recordTimer);
+            this.recordTimer = null;
+        }
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(t => t.stop());
+            this.mediaStream = null;
+        }
+    }
+    scrollToBottom() {
+        try {
+            if (this.messageContainer) {
+                this.messageContainer.nativeElement.scrollTop = this.messageContainer.nativeElement.scrollHeight;
+            }
+        }
+        catch (e) { }
+    }
+    focusInput() {
+        setTimeout(() => {
+            if (this.messageInput) {
+                this.messageInput.nativeElement.focus();
+            }
+        }, 300);
+    }
+    trackMessage(index, msg) {
+        return `${index}-${msg.role}-${msg.createdDate}`;
+    }
+    // Changed: Set --agent-vh CSS variable from visualViewport so the chat resizes when the mobile keyboard opens
+    initMobileViewport() {
+        if (!window.visualViewport)
+            return;
+        this.viewportHandler = () => {
+            const vh = window.visualViewport.height;
+            document.documentElement.style.setProperty('--agent-vh', `${vh}px`);
+            // Changed: one signal, a second consumer. When the on-screen keyboard opens the visual viewport
+            // collapses well below the layout viewport; the fixed bottom tab bar has to get out of the way or it
+            // sits between the keyboard and the field being typed into. Published as a class on <html> so the tab
+            // bar reacts in CSS alone — deliberately NOT a second visualViewport listener of its own.
+            // 0.75 is the usual heuristic: real keyboards take 30-50% of the height, browser chrome far less.
+            document.documentElement.classList.toggle('keyboard-open', vh < window.innerHeight * 0.75);
+        };
+        window.visualViewport.addEventListener('resize', this.viewportHandler);
+        this.viewportHandler(); // Set initial value
+    }
+    ngOnDestroy() {
+        this.subs.forEach(s => s.unsubscribe());
+        if (this.isRecording)
+            this.cancelRecording(); // Changed: never leave the mic open behind a destroyed widget
+        if (this.voiceMode)
+            this.stopVoiceMode(); // Changed: same for a voice session — no orphaned mic
+        this.onMicPressEnd(); // Changed: a held mic must not fire after teardown
+        this.clearRecording();
+        if (this.viewportHandler && window.visualViewport) {
+            window.visualViewport.removeEventListener('resize', this.viewportHandler);
+            document.documentElement.classList.remove('keyboard-open'); // Changed: never leave the tab bar hidden by a destroyed widget
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentComponent, deps: [{ token: AgentService }, { token: i1$1.SignalRService }, { token: i0.NgZone }, { token: i1$2.Router }, { token: i2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AgentComponent, isStandalone: true, selector: "spa-agent", inputs: { pageMode: "pageMode" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }, { propertyName: "cameraInput", first: true, predicate: ["cameraInput"], descendants: true }, { propertyName: "galleryInput", first: true, predicate: ["galleryInput"], descendants: true }], ngImport: i0, template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<!-- Changed: the page presentation has no FAB \u2014 the page IS the chat, so a button to open it is nonsense.\n     Changed: showFab also stands the FAB down on mobile (the bottom tab bar's Chat tab replaces it) and on\n     the home/agent route at any width, where it would otherwise hover over the page it opens. -->\n<button mat-fab class=\"agent-fab\" *ngIf=\"showFab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<!-- Changed: rendered unconditionally in page mode (isOpen only governs the floating window); .page-mode\n     swaps the fixed overlay for in-flow layout and 'none' opts out of the slide-up animation -->\n<!-- Changed: showWindow keeps the floating window off wherever its FAB is off, so mobile and the chat route\n     can never show two chat surfaces at once -->\n<div class=\"agent-window\" [class.page-mode]=\"pageMode\" *ngIf=\"showWindow\" [@slideUp]=\"pageMode ? 'none' : 'float'\">\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <!-- Changed: earlier conversations existed but were unreachable \u2014 the widget only ever showed the newest -->\n      <button mat-icon-button matTooltip=\"Conversations\" (click)=\"toggleConversationList()\">\n        <mat-icon>forum</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <!-- Changed: minimise is float-only \u2014 there is nothing to minimise a routed page into -->\n      <button mat-icon-button matTooltip=\"Close\" *ngIf=\"!pageMode\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation switcher. A dropdown rather than a panel: the window is small and this is a jump list,\n       not somewhere the user spends time. -->\n  <div class=\"agent-conversations\" *ngIf=\"showConversations\">\n    <div class=\"conversation-row\" *ngFor=\"let c of conversations\"\n         [class.current]=\"c.conversationID === currentConversationId\"\n         (click)=\"selectConversation(c.conversationID)\">\n      <mat-icon class=\"conversation-icon\">chat</mat-icon>\n      <span class=\"conversation-title\">{{ c.title }}</span>\n    </div>\n    <div class=\"conversation-empty\" *ngIf=\"conversations.length === 0\">No earlier conversations</div>\n  </div>\n\n  <!-- Changed: the session banner. The agent has always known it was holding a half-built record; until the\n       reply carried structured state, that fact only existed as prose the user had to read carefully. -->\n  <div class=\"agent-session-banner\" *ngIf=\"sessionInfo?.sessionType\">\n    <mat-icon class=\"session-icon\">edit_note</mat-icon>\n    <span class=\"session-text\">{{ sessionVerb }} a {{ sessionInfo?.modelName }}</span>\n    <!-- Changed: chips rather than a sentence. What is still required is the one thing the user has to act\n         on, and a chip per field is scannable where a comma-separated list inside a sentence is not. -->\n    <span class=\"session-chip\" *ngFor=\"let field of sessionInfo?.missingFields\">{{ field | camelToWords }}</span>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <ng-container *ngFor=\"let msg of messages; trackBy: trackMessage\">\n\n      <!-- Changed: a conversation boundary is drawn, not spoken. Without a visible line, the agent starting a\n           fresh thread after a long gap just looks like it forgetting what was said. -->\n      <div class=\"conversation-divider\" *ngIf=\"msg.divider\">\n        <span class=\"divider-label\">{{ msg.content }}</span>\n      </div>\n\n      <div *ngIf=\"!msg.divider\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n        <!-- Changed: agent replies are markdown and were being printed verbatim, so a carefully formatted\n             answer arrived as a wall of asterisks. User messages stay plain text \u2014 they are not markdown,\n             and interpreting them as such would be putting words in the user's mouth. -->\n        <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\" [class.pending-bubble]=\"msg.pending\">\n          <span *ngIf=\"msg.role === 'assistant'\" [innerHTML]=\"msg.content | agentMarkdown\"></span>\n          <span *ngIf=\"msg.role !== 'assistant'\">{{ msg.content }}</span>\n        </div>\n      </div>\n\n    </ng-container>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Media error (mic blocked / unsupported browser) -->\n  <div class=\"agent-media-error\" *ngIf=\"mediaError\">\n    <mat-icon class=\"media-error-icon\">error_outline</mat-icon>\n    <span>{{ mediaError }}</span>\n  </div>\n\n  <!-- Staged attachment: a photo waits here until the user adds a caption and presses send -->\n  <div class=\"agent-attachment\" *ngIf=\"pendingPhoto\">\n    <mat-icon class=\"attach-icon\">image</mat-icon>\n    <span class=\"attach-label\">Photo attached</span>\n    <button mat-icon-button class=\"attach-remove\" matTooltip=\"Remove photo\" (click)=\"clearPhoto()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Transcribing indicator for the Stop button -->\n  <div class=\"agent-transcribing\" *ngIf=\"isTranscribing\">\n    <mat-icon class=\"transcribing-icon\">graphic_eq</mat-icon>\n    <span>Transcribing\u2026</span>\n  </div>\n\n  <!-- Voice mode: replaces the composer entirely. Everything here is sized to be used without looking \u2014\n       a big state indicator, the last exchange, and a thumb-sized exit. -->\n  <div class=\"agent-voice\" *ngIf=\"voiceMode\">\n\n    <div class=\"voice-state\" [class.is-starting]=\"voiceState === 'starting'\"\n         [class.is-listening]=\"voiceState === 'listening' || voiceState === 'capturing'\"\n         [class.is-thinking]=\"voiceState === 'thinking'\" [class.is-speaking]=\"voiceState === 'speaking'\">\n      <mat-icon class=\"voice-state-icon\">{{ voiceStateIcon }}</mat-icon>\n      <span class=\"voice-state-label\">{{ voiceStateLabel }}</span>\n    </div>\n\n    <!-- Live level, so the mic being open is visible as well as audible. Not shown while calibrating: the\n         meter would invite exactly the talking that ruins the measurement. -->\n    <div class=\"voice-meter\" *ngIf=\"voiceState === 'listening' || voiceState === 'capturing'\">\n      <div class=\"voice-meter-fill\" [style.width.%]=\"voiceLevel * 100\"></div>\n    </div>\n\n    <!-- Deliberately NO transcript/reply repeated here: both already appear in the chat thread directly above,\n         and duplicating them pushed the state indicator \u2014 the one thing that must be readable at a glance \u2014\n         down the panel. The state, the meter and the exit are all this needs. -->\n\n    <!-- Says explicitly that pauses are fine, because the natural worry is that stopping to think will send -->\n    <p class=\"voice-hint\" *ngIf=\"voiceState === 'starting'\">Checking the background noise \u2014 hold on\u2026</p>\n    <p class=\"voice-hint\" *ngIf=\"voiceState === 'capturing'\">Take your time \u2014 it waits until you're done.</p>\n    <p class=\"voice-hint\" *ngIf=\"voiceState === 'listening'\">Just speak \u2014 it sends when you finish.</p>\n\n    <button mat-flat-button color=\"warn\" class=\"voice-exit\" (click)=\"stopVoiceMode()\">\n      <mat-icon>close</mat-icon>\n      <span>Exit voice mode</span>\n    </button>\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\" [class.recording]=\"isRecording\" *ngIf=\"!voiceMode\">\n\n    <!-- Normal input: attach, text, voice note, hands-free, send -->\n    <ng-container *ngIf=\"!isRecording\">\n      <button mat-icon-button class=\"media-btn\" matTooltip=\"Attach\" [matMenuTriggerFor]=\"attachMenu\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <mat-form-field appearance=\"outline\" class=\"input-field\">\n        <input matInput #messageInput placeholder=\"Type, speak or snap...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n      </mat-form-field>\n      <!-- Tap records a voice note; HOLD enters hands-free voice mode. Deliberately no separate button for\n           voice mode: the row is already at capacity, and a fifth control would crowd out the text field on a\n           phone. The gesture is the accelerator, the \"+\" menu below is the discoverable path to the same\n           thing \u2014 a gesture nobody can see is a feature nobody finds. -->\n      <button mat-icon-button class=\"media-btn mic-btn\" [class.arming]=\"micHeld\"\n              matTooltip=\"Tap to record \u00B7 hold for hands-free\"\n              (click)=\"onMicClick()\"\n              (pointerdown)=\"onMicPressStart()\" (pointerup)=\"onMicPressEnd()\"\n              (pointerleave)=\"onMicPressEnd()\" (pointercancel)=\"onMicPressEnd()\">\n        <mat-icon>mic</mat-icon>\n      </button>\n      <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!canSend\">\n        <mat-icon>send</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Recording bar: replaces the input while a voice note is being captured.\n         Three exits \u2014 discard it, stop and read it back as text, or send it straight away. -->\n    <ng-container *ngIf=\"isRecording\">\n      <button mat-icon-button class=\"media-btn cancel-btn\" matTooltip=\"Discard\" (click)=\"cancelRecording()\">\n        <mat-icon>delete</mat-icon>\n      </button>\n      <div class=\"recording-status\">\n        <span class=\"rec-dot\"></span>\n        <span class=\"rec-label\">Recording</span>\n        <span class=\"rec-time\">{{ recordDisplay }}</span>\n      </div>\n      <button mat-icon-button class=\"media-btn stop-btn\" matTooltip=\"Stop and add as text\" (click)=\"stopAndTranscribe()\">\n        <mat-icon>stop_circle</mat-icon>\n      </button>\n      <button mat-icon-button color=\"primary\" class=\"send-btn\" matTooltip=\"Send now\" (click)=\"stopRecording()\">\n        <mat-icon>send</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Attach menu \u2014 keeps the row compact: one \"+\" instead of a button per source -->\n    <mat-menu #attachMenu=\"matMenu\">\n      <button mat-menu-item (click)=\"takePhoto()\">\n        <mat-icon>photo_camera</mat-icon>\n        <span>Take photo</span>\n      </button>\n      <button mat-menu-item (click)=\"choosePhoto()\">\n        <mat-icon>photo_library</mat-icon>\n        <span>Choose photo</span>\n      </button>\n      <!-- The discoverable way into voice mode. The mic long-press does the same thing faster, but only\n           once you know it exists \u2014 this is how you find out. -->\n      <button mat-menu-item (click)=\"startVoiceMode()\">\n        <mat-icon>record_voice_over</mat-icon>\n        <span>Hands-free voice mode</span>\n      </button>\n    </mat-menu>\n\n    <!-- Two separate pickers on purpose. `capture=\"environment\"` hands off to the phone's camera app and\n         opens the rear lens; WITHOUT it the same input opens the gallery/file picker. One input cannot do\n         both, which is why the old single button always went to the camera on mobile. -->\n    <input type=\"file\" #cameraInput accept=\"image/*\" capture=\"environment\" hidden (change)=\"onPhotoSelected($event)\" />\n    <input type=\"file\" #galleryInput accept=\"image/*\" hidden (change)=\"onPhotoSelected($event)\" />\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:var(--tin-fab-bottom, 24px);right:var(--tin-fab-right, 24px);z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:calc(var(--tin-fab-bottom, 24px) + 72px);right:var(--tin-fab-right, 24px);width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn,.media-btn{margin-bottom:0;display:inline-flex;align-items:center;justify-content:center}.media-btn{color:#757575}.media-btn:hover{color:#424242}.cancel-btn:hover{color:#d32f2f}.agent-input.recording{background:#fff5f5}.recording-status{flex:1;display:flex;align-items:center;gap:8px;padding:0 4px;font-size:13px;color:#616161}.rec-label{flex:1}.rec-time{font-variant-numeric:tabular-nums;color:#424242}.rec-dot{width:10px;height:10px;border-radius:50%;background:#e53935;animation:rec-pulse 1.2s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.85)}}.pending-bubble{opacity:.6;font-style:italic}.agent-attachment{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:#1565c0;background:#e8f1fb;border-top:1px solid #cfe0f3}.attach-icon{font-size:18px;width:18px;height:18px}.attach-label{flex:1}.attach-remove{width:24px;height:24px;min-width:0;padding:0;flex:0 0 auto;line-height:24px;display:inline-flex;align-items:center;justify-content:center;color:#1565c0}.attach-remove .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.agent-transcribing{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:#616161;background:#f5f5f5;border-top:1px solid #e0e0e0}.transcribing-icon{font-size:18px;width:18px;height:18px;animation:rec-pulse 1.2s ease-in-out infinite}.stop-btn{color:#e53935}.agent-media-error{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;color:#c62828;background:#fdecea;border-top:1px solid #f5c6c2}.media-error-icon{font-size:18px;width:18px;height:18px}.mic-btn{transition:transform .12s ease,color .12s ease}.mic-btn.arming{transform:scale(1.25);color:#1565c0}.agent-voice{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px 18px;border-top:1px solid rgba(0,0,0,.08);background:#fafafa}.voice-state{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:.3px}.voice-state-icon{font-size:28px;width:28px;height:28px}.voice-state.is-starting{color:#00000073}.voice-state.is-listening{color:#2e7d32}.voice-state.is-thinking{color:#ef6c00}.voice-state.is-speaking{color:#1565c0}.voice-state.is-listening .voice-state-icon{animation:voicePulse 1.4s ease-in-out infinite}@keyframes voicePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.12)}}.voice-meter{width:100%;max-width:260px;height:6px;border-radius:3px;background:#00000014;overflow:hidden}.voice-meter-fill{height:100%;background:#2e7d32;border-radius:3px;transition:width 80ms linear}.voice-hint{margin:0;font-size:13px;opacity:.6}.voice-exit{width:100%;max-width:280px;height:48px;font-size:15px}.voice-exit mat-icon{margin-right:6px}@media (max-width: 600px){.agent-window{inset:0 0 auto;width:100%;height:100%;height:100dvh;height:var(--agent-vh, 100dvh);border-radius:0}.agent-fab{bottom:var(--tin-fab-bottom, 72px);right:var(--tin-fab-right, 16px)}}.agent-window.page-mode{position:relative;inset:auto;width:100%;max-width:100%;height:calc(var(--agent-vh, 100dvh) - var(--agent-page-offset, 140px));border-radius:12px;border:1px solid #e0e0e0;box-shadow:none;z-index:auto}@media (max-width: 600px){.agent-window.page-mode{height:calc(var(--agent-vh, 100dvh) - var(--agent-page-offset, 72px));border-radius:0;border:none}}.agent-conversations{max-height:180px;overflow-y:auto;border-bottom:1px solid #e0e0e0;background:#fafafa}.conversation-row{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;font-size:13px}.conversation-row:hover{background:#eef4fb}.conversation-row.current{background:#e3f0fd;font-weight:500}.conversation-icon{font-size:18px;width:18px;height:18px;opacity:.6}.conversation-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-empty{padding:10px 14px;font-size:12px;opacity:.6}.agent-session-banner{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 14px;background:#fff8e1;border-bottom:1px solid #ffe082;font-size:12px}.session-icon{font-size:16px;width:16px;height:16px;opacity:.7}.session-text{font-weight:500}.session-missing{opacity:.75}.conversation-divider{display:flex;align-items:center;gap:8px;margin:14px 4px;opacity:.55}.conversation-divider:before,.conversation-divider:after{content:\"\";flex:1;height:1px;background:#c8c8c8}.divider-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em}.session-chip{display:inline-block;padding:1px 8px;border-radius:10px;background:#ffe082;font-size:11px;white-space:nowrap}.agent-bubble .md-heading{display:block;margin:4px 0 2px;font-size:13px}.agent-bubble .md-bullet{opacity:.6;margin-right:2px}.agent-bubble code{padding:1px 4px;border-radius:3px;background:#0000000f;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: SpaMatModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }, { kind: "pipe", type: AgentMarkdownPipe, name: "agentMarkdown" }], animations: [
+            trigger('slideUp', [
+                // Changed: page mode enters in normal flow and must not slide up — a page that animates in like a
+                // dialog still reads as a dialog. Both empty transitions are declared BEFORE :enter/:leave because the
+                // first matching transition wins, so 'none' opts the page instance out of the floating animation.
+                transition('void => none', []), // Changed: page mode — no enter animation
+                transition('none => void', []), // Changed: page mode — no leave animation
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'translateY(20px) scale(0.95)' }),
+                    animate('250ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 1, transform: 'translateY(0) scale(1)' }))
+                ]),
+                transition(':leave', [
+                    animate('200ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 0, transform: 'translateY(20px) scale(0.95)' }))
+                ])
+            ])
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-agent', standalone: true, imports: [SpaMatModule, CamelToWordsPipe, AgentMarkdownPipe], animations: [
+                        trigger('slideUp', [
+                            // Changed: page mode enters in normal flow and must not slide up — a page that animates in like a
+                            // dialog still reads as a dialog. Both empty transitions are declared BEFORE :enter/:leave because the
+                            // first matching transition wins, so 'none' opts the page instance out of the floating animation.
+                            transition('void => none', []), // Changed: page mode — no enter animation
+                            transition('none => void', []), // Changed: page mode — no leave animation
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'translateY(20px) scale(0.95)' }),
+                                animate('250ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 1, transform: 'translateY(0) scale(1)' }))
+                            ]),
+                            transition(':leave', [
+                                animate('200ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 0, transform: 'translateY(20px) scale(0.95)' }))
+                            ])
+                        ])
+                    ], template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<!-- Changed: the page presentation has no FAB \u2014 the page IS the chat, so a button to open it is nonsense.\n     Changed: showFab also stands the FAB down on mobile (the bottom tab bar's Chat tab replaces it) and on\n     the home/agent route at any width, where it would otherwise hover over the page it opens. -->\n<button mat-fab class=\"agent-fab\" *ngIf=\"showFab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<!-- Changed: rendered unconditionally in page mode (isOpen only governs the floating window); .page-mode\n     swaps the fixed overlay for in-flow layout and 'none' opts out of the slide-up animation -->\n<!-- Changed: showWindow keeps the floating window off wherever its FAB is off, so mobile and the chat route\n     can never show two chat surfaces at once -->\n<div class=\"agent-window\" [class.page-mode]=\"pageMode\" *ngIf=\"showWindow\" [@slideUp]=\"pageMode ? 'none' : 'float'\">\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <!-- Changed: earlier conversations existed but were unreachable \u2014 the widget only ever showed the newest -->\n      <button mat-icon-button matTooltip=\"Conversations\" (click)=\"toggleConversationList()\">\n        <mat-icon>forum</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <!-- Changed: minimise is float-only \u2014 there is nothing to minimise a routed page into -->\n      <button mat-icon-button matTooltip=\"Close\" *ngIf=\"!pageMode\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation switcher. A dropdown rather than a panel: the window is small and this is a jump list,\n       not somewhere the user spends time. -->\n  <div class=\"agent-conversations\" *ngIf=\"showConversations\">\n    <div class=\"conversation-row\" *ngFor=\"let c of conversations\"\n         [class.current]=\"c.conversationID === currentConversationId\"\n         (click)=\"selectConversation(c.conversationID)\">\n      <mat-icon class=\"conversation-icon\">chat</mat-icon>\n      <span class=\"conversation-title\">{{ c.title }}</span>\n    </div>\n    <div class=\"conversation-empty\" *ngIf=\"conversations.length === 0\">No earlier conversations</div>\n  </div>\n\n  <!-- Changed: the session banner. The agent has always known it was holding a half-built record; until the\n       reply carried structured state, that fact only existed as prose the user had to read carefully. -->\n  <div class=\"agent-session-banner\" *ngIf=\"sessionInfo?.sessionType\">\n    <mat-icon class=\"session-icon\">edit_note</mat-icon>\n    <span class=\"session-text\">{{ sessionVerb }} a {{ sessionInfo?.modelName }}</span>\n    <!-- Changed: chips rather than a sentence. What is still required is the one thing the user has to act\n         on, and a chip per field is scannable where a comma-separated list inside a sentence is not. -->\n    <span class=\"session-chip\" *ngFor=\"let field of sessionInfo?.missingFields\">{{ field | camelToWords }}</span>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <ng-container *ngFor=\"let msg of messages; trackBy: trackMessage\">\n\n      <!-- Changed: a conversation boundary is drawn, not spoken. Without a visible line, the agent starting a\n           fresh thread after a long gap just looks like it forgetting what was said. -->\n      <div class=\"conversation-divider\" *ngIf=\"msg.divider\">\n        <span class=\"divider-label\">{{ msg.content }}</span>\n      </div>\n\n      <div *ngIf=\"!msg.divider\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n        <!-- Changed: agent replies are markdown and were being printed verbatim, so a carefully formatted\n             answer arrived as a wall of asterisks. User messages stay plain text \u2014 they are not markdown,\n             and interpreting them as such would be putting words in the user's mouth. -->\n        <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\" [class.pending-bubble]=\"msg.pending\">\n          <span *ngIf=\"msg.role === 'assistant'\" [innerHTML]=\"msg.content | agentMarkdown\"></span>\n          <span *ngIf=\"msg.role !== 'assistant'\">{{ msg.content }}</span>\n        </div>\n      </div>\n\n    </ng-container>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Media error (mic blocked / unsupported browser) -->\n  <div class=\"agent-media-error\" *ngIf=\"mediaError\">\n    <mat-icon class=\"media-error-icon\">error_outline</mat-icon>\n    <span>{{ mediaError }}</span>\n  </div>\n\n  <!-- Staged attachment: a photo waits here until the user adds a caption and presses send -->\n  <div class=\"agent-attachment\" *ngIf=\"pendingPhoto\">\n    <mat-icon class=\"attach-icon\">image</mat-icon>\n    <span class=\"attach-label\">Photo attached</span>\n    <button mat-icon-button class=\"attach-remove\" matTooltip=\"Remove photo\" (click)=\"clearPhoto()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Transcribing indicator for the Stop button -->\n  <div class=\"agent-transcribing\" *ngIf=\"isTranscribing\">\n    <mat-icon class=\"transcribing-icon\">graphic_eq</mat-icon>\n    <span>Transcribing\u2026</span>\n  </div>\n\n  <!-- Voice mode: replaces the composer entirely. Everything here is sized to be used without looking \u2014\n       a big state indicator, the last exchange, and a thumb-sized exit. -->\n  <div class=\"agent-voice\" *ngIf=\"voiceMode\">\n\n    <div class=\"voice-state\" [class.is-starting]=\"voiceState === 'starting'\"\n         [class.is-listening]=\"voiceState === 'listening' || voiceState === 'capturing'\"\n         [class.is-thinking]=\"voiceState === 'thinking'\" [class.is-speaking]=\"voiceState === 'speaking'\">\n      <mat-icon class=\"voice-state-icon\">{{ voiceStateIcon }}</mat-icon>\n      <span class=\"voice-state-label\">{{ voiceStateLabel }}</span>\n    </div>\n\n    <!-- Live level, so the mic being open is visible as well as audible. Not shown while calibrating: the\n         meter would invite exactly the talking that ruins the measurement. -->\n    <div class=\"voice-meter\" *ngIf=\"voiceState === 'listening' || voiceState === 'capturing'\">\n      <div class=\"voice-meter-fill\" [style.width.%]=\"voiceLevel * 100\"></div>\n    </div>\n\n    <!-- Deliberately NO transcript/reply repeated here: both already appear in the chat thread directly above,\n         and duplicating them pushed the state indicator \u2014 the one thing that must be readable at a glance \u2014\n         down the panel. The state, the meter and the exit are all this needs. -->\n\n    <!-- Says explicitly that pauses are fine, because the natural worry is that stopping to think will send -->\n    <p class=\"voice-hint\" *ngIf=\"voiceState === 'starting'\">Checking the background noise \u2014 hold on\u2026</p>\n    <p class=\"voice-hint\" *ngIf=\"voiceState === 'capturing'\">Take your time \u2014 it waits until you're done.</p>\n    <p class=\"voice-hint\" *ngIf=\"voiceState === 'listening'\">Just speak \u2014 it sends when you finish.</p>\n\n    <button mat-flat-button color=\"warn\" class=\"voice-exit\" (click)=\"stopVoiceMode()\">\n      <mat-icon>close</mat-icon>\n      <span>Exit voice mode</span>\n    </button>\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\" [class.recording]=\"isRecording\" *ngIf=\"!voiceMode\">\n\n    <!-- Normal input: attach, text, voice note, hands-free, send -->\n    <ng-container *ngIf=\"!isRecording\">\n      <button mat-icon-button class=\"media-btn\" matTooltip=\"Attach\" [matMenuTriggerFor]=\"attachMenu\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <mat-form-field appearance=\"outline\" class=\"input-field\">\n        <input matInput #messageInput placeholder=\"Type, speak or snap...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n      </mat-form-field>\n      <!-- Tap records a voice note; HOLD enters hands-free voice mode. Deliberately no separate button for\n           voice mode: the row is already at capacity, and a fifth control would crowd out the text field on a\n           phone. The gesture is the accelerator, the \"+\" menu below is the discoverable path to the same\n           thing \u2014 a gesture nobody can see is a feature nobody finds. -->\n      <button mat-icon-button class=\"media-btn mic-btn\" [class.arming]=\"micHeld\"\n              matTooltip=\"Tap to record \u00B7 hold for hands-free\"\n              (click)=\"onMicClick()\"\n              (pointerdown)=\"onMicPressStart()\" (pointerup)=\"onMicPressEnd()\"\n              (pointerleave)=\"onMicPressEnd()\" (pointercancel)=\"onMicPressEnd()\">\n        <mat-icon>mic</mat-icon>\n      </button>\n      <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!canSend\">\n        <mat-icon>send</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Recording bar: replaces the input while a voice note is being captured.\n         Three exits \u2014 discard it, stop and read it back as text, or send it straight away. -->\n    <ng-container *ngIf=\"isRecording\">\n      <button mat-icon-button class=\"media-btn cancel-btn\" matTooltip=\"Discard\" (click)=\"cancelRecording()\">\n        <mat-icon>delete</mat-icon>\n      </button>\n      <div class=\"recording-status\">\n        <span class=\"rec-dot\"></span>\n        <span class=\"rec-label\">Recording</span>\n        <span class=\"rec-time\">{{ recordDisplay }}</span>\n      </div>\n      <button mat-icon-button class=\"media-btn stop-btn\" matTooltip=\"Stop and add as text\" (click)=\"stopAndTranscribe()\">\n        <mat-icon>stop_circle</mat-icon>\n      </button>\n      <button mat-icon-button color=\"primary\" class=\"send-btn\" matTooltip=\"Send now\" (click)=\"stopRecording()\">\n        <mat-icon>send</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Attach menu \u2014 keeps the row compact: one \"+\" instead of a button per source -->\n    <mat-menu #attachMenu=\"matMenu\">\n      <button mat-menu-item (click)=\"takePhoto()\">\n        <mat-icon>photo_camera</mat-icon>\n        <span>Take photo</span>\n      </button>\n      <button mat-menu-item (click)=\"choosePhoto()\">\n        <mat-icon>photo_library</mat-icon>\n        <span>Choose photo</span>\n      </button>\n      <!-- The discoverable way into voice mode. The mic long-press does the same thing faster, but only\n           once you know it exists \u2014 this is how you find out. -->\n      <button mat-menu-item (click)=\"startVoiceMode()\">\n        <mat-icon>record_voice_over</mat-icon>\n        <span>Hands-free voice mode</span>\n      </button>\n    </mat-menu>\n\n    <!-- Two separate pickers on purpose. `capture=\"environment\"` hands off to the phone's camera app and\n         opens the rear lens; WITHOUT it the same input opens the gallery/file picker. One input cannot do\n         both, which is why the old single button always went to the camera on mobile. -->\n    <input type=\"file\" #cameraInput accept=\"image/*\" capture=\"environment\" hidden (change)=\"onPhotoSelected($event)\" />\n    <input type=\"file\" #galleryInput accept=\"image/*\" hidden (change)=\"onPhotoSelected($event)\" />\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:var(--tin-fab-bottom, 24px);right:var(--tin-fab-right, 24px);z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:calc(var(--tin-fab-bottom, 24px) + 72px);right:var(--tin-fab-right, 24px);width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn,.media-btn{margin-bottom:0;display:inline-flex;align-items:center;justify-content:center}.media-btn{color:#757575}.media-btn:hover{color:#424242}.cancel-btn:hover{color:#d32f2f}.agent-input.recording{background:#fff5f5}.recording-status{flex:1;display:flex;align-items:center;gap:8px;padding:0 4px;font-size:13px;color:#616161}.rec-label{flex:1}.rec-time{font-variant-numeric:tabular-nums;color:#424242}.rec-dot{width:10px;height:10px;border-radius:50%;background:#e53935;animation:rec-pulse 1.2s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.85)}}.pending-bubble{opacity:.6;font-style:italic}.agent-attachment{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:#1565c0;background:#e8f1fb;border-top:1px solid #cfe0f3}.attach-icon{font-size:18px;width:18px;height:18px}.attach-label{flex:1}.attach-remove{width:24px;height:24px;min-width:0;padding:0;flex:0 0 auto;line-height:24px;display:inline-flex;align-items:center;justify-content:center;color:#1565c0}.attach-remove .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.agent-transcribing{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:#616161;background:#f5f5f5;border-top:1px solid #e0e0e0}.transcribing-icon{font-size:18px;width:18px;height:18px;animation:rec-pulse 1.2s ease-in-out infinite}.stop-btn{color:#e53935}.agent-media-error{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;color:#c62828;background:#fdecea;border-top:1px solid #f5c6c2}.media-error-icon{font-size:18px;width:18px;height:18px}.mic-btn{transition:transform .12s ease,color .12s ease}.mic-btn.arming{transform:scale(1.25);color:#1565c0}.agent-voice{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px 18px;border-top:1px solid rgba(0,0,0,.08);background:#fafafa}.voice-state{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:.3px}.voice-state-icon{font-size:28px;width:28px;height:28px}.voice-state.is-starting{color:#00000073}.voice-state.is-listening{color:#2e7d32}.voice-state.is-thinking{color:#ef6c00}.voice-state.is-speaking{color:#1565c0}.voice-state.is-listening .voice-state-icon{animation:voicePulse 1.4s ease-in-out infinite}@keyframes voicePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.12)}}.voice-meter{width:100%;max-width:260px;height:6px;border-radius:3px;background:#00000014;overflow:hidden}.voice-meter-fill{height:100%;background:#2e7d32;border-radius:3px;transition:width 80ms linear}.voice-hint{margin:0;font-size:13px;opacity:.6}.voice-exit{width:100%;max-width:280px;height:48px;font-size:15px}.voice-exit mat-icon{margin-right:6px}@media (max-width: 600px){.agent-window{inset:0 0 auto;width:100%;height:100%;height:100dvh;height:var(--agent-vh, 100dvh);border-radius:0}.agent-fab{bottom:var(--tin-fab-bottom, 72px);right:var(--tin-fab-right, 16px)}}.agent-window.page-mode{position:relative;inset:auto;width:100%;max-width:100%;height:calc(var(--agent-vh, 100dvh) - var(--agent-page-offset, 140px));border-radius:12px;border:1px solid #e0e0e0;box-shadow:none;z-index:auto}@media (max-width: 600px){.agent-window.page-mode{height:calc(var(--agent-vh, 100dvh) - var(--agent-page-offset, 72px));border-radius:0;border:none}}.agent-conversations{max-height:180px;overflow-y:auto;border-bottom:1px solid #e0e0e0;background:#fafafa}.conversation-row{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;font-size:13px}.conversation-row:hover{background:#eef4fb}.conversation-row.current{background:#e3f0fd;font-weight:500}.conversation-icon{font-size:18px;width:18px;height:18px;opacity:.6}.conversation-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-empty{padding:10px 14px;font-size:12px;opacity:.6}.agent-session-banner{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 14px;background:#fff8e1;border-bottom:1px solid #ffe082;font-size:12px}.session-icon{font-size:16px;width:16px;height:16px;opacity:.7}.session-text{font-weight:500}.session-missing{opacity:.75}.conversation-divider{display:flex;align-items:center;gap:8px;margin:14px 4px;opacity:.55}.conversation-divider:before,.conversation-divider:after{content:\"\";flex:1;height:1px;background:#c8c8c8}.divider-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em}.session-chip{display:inline-block;padding:1px 8px;border-radius:10px;background:#ffe082;font-size:11px;white-space:nowrap}.agent-bubble .md-heading{display:block;margin:4px 0 2px;font-size:13px}.agent-bubble .md-bullet{opacity:.6;margin-right:2px}.agent-bubble code{padding:1px 4px;border-radius:3px;background:#0000000f;font-size:12px}\n"] }]
+        }], ctorParameters: () => [{ type: AgentService }, { type: i1$1.SignalRService }, { type: i0.NgZone }, { type: i1$2.Router }, { type: i2.BreakpointObserver }], propDecorators: { messageContainer: [{
+                type: ViewChild,
+                args: ['messageContainer']
+            }], messageInput: [{
+                type: ViewChild,
+                args: ['messageInput']
+            }], cameraInput: [{
+                type: ViewChild,
+                args: ['cameraInput']
+            }], galleryInput: [{
+                type: ViewChild,
+                args: ['galleryInput']
+            }], pageMode: [{
+                type: Input
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+var agent_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AgentComponent: AgentComponent
+});
+
+export { AgentService as A, AgentComponent as a, agent_component as b };
+//# sourceMappingURL=tin-spa-agent.component-D0CGGnGZ.mjs.map