@wildo-ai/saas-frontend-lib 1.1.10 → 1.1.11

package/dist/esm/components/views/flows-actors-view/FlowsActorsView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FrontendComponentType } from '@wildo-ai/presets-components-models';
-import { WS_FlowsActorsToolStatusDataSchema } from '@wildo-ai/saas-models';
+import { agentBehaviorReportOrganizationOf, canonicalizeFlowsActorsContextRef, FlowsActors_ConversationRole, } from '@wildo-ai/saas-models';
 import { useI18n } from '../../../core/i18n/useI18n.js';
 import { makeComponentLabelResolver } from '../../../core/i18n/component-label-resolution.utils.js';
 import { useUI } from '../../../core/ui/useUI.js';
@@ -9,251 +9,238 @@ import { ScopeUtilsService } from '../../../core/scope/scope.utils.frontend.serv
 import { useAppScopeSafe } from '../../../core/scope/useAppScope.js';
 import { useFlowsActors } from '../../../core/flows-actors/useFlowsActors.js';
 import { FlowsActorsExecutionStatus } from '../../../core/flows-actors/FlowsActorsContext.js';
+import { conversationThreadModel, ConversationTurnState, withPendingSend, } from '../../../core/flows-actors/conversation-thread.model.js';
+import { olderHistoryCursor, withNewestHistoryPage, withOlderHistoryPage, } from '../../../core/flows-actors/conversation-history.model.js';
 import { ViewNotFound } from '../../../components/views/ViewNotFound.js';
-import { AI_Conversation, AI_ConversationContent, AI_ConversationEmptyState } from '../../../components/ai-elements/chat/conversation.js';
-import { AI_Message, AI_MessageContent, AI_MessageResponse } from '../../../components/ai-elements/chat/message.js';
-import { FlowsActors_ApprovalRequest } from '../../../components/flows-actors/approval.js';
+import { AI_ConversationThread, AI_ConversationThreadComposer, AI_ConversationThreadDiscussions, } from '../../../components/ai-elements/chat/conversation-thread.js';
+import { cn } from '../../../core/ui/cn.js';
+import { heldConversationKey, holdConversation, readHeldConversation } from '../../../components/views/flows-actors-view/held-conversation-selection.js';
+import { AgentReplyReportAction } from '../../../components/views/flows-actors-view/AgentReplyReportAction.js';
 // ─── Helpers ────────────────────────────────────────────────────────────────
 /**
- * A discussion's title is the person's own first words, shortened. An EMPTY result is meaningful:
- * the discussion has no words yet, and the sidebar renders the `untitledDiscussion` label for it.
- * The label is resolved at RENDER, never stored here — a title held in state would stay in the
- * language it was created in, and would be an English literal besides (#1414).
+ * A discussion's title is the person's own first words, shortened. An EMPTY result is meaningful: the discussion has
+ * no words yet, and the discussion list words it as untitled at render. The word is never stored here — a title held
+ * in state would stay in the language it was created in, and would be an English literal besides (#1414).
  */
 function truncate(s, n = 40) {
     const t = s.trim().replace(/\s+/g, ' ');
     return t.length > n ? `${t.slice(0, n)}…` : t;
 }
+/** A stored thread's title: its first message from the person. */
+function threadTitle(thread) {
+    return truncate(thread.messages.find((message) => message.role === FlowsActors_ConversationRole.USER)?.content ?? '');
+}
 /**
- * Every word this view shows comes from its `FlowsActorsView.labels.ts` keys. A missing one renders
- * as its key path. The host gates on `isReady` before any of these sub-components mount.
+ * The view's own words — its header, its placeholder, its empty state — from `FlowsActorsView.labels.ts`. The words of
+ * the conversation are the thread surface's. The host gates on `isReady` before any of these sub-components mount.
  */
 function useFlowsActorsLabels() {
     const { tComponent } = useI18n({ component: FrontendComponentType.HIGH_LEVEL_VIEWS_FLOWS_ACTORS });
     return useMemo(() => makeComponentLabelResolver(tComponent, FrontendComponentType.HIGH_LEVEL_VIEWS_FLOWS_ACTORS), [tComponent]);
 }
-/** Extract the live streamed assistant text + progress messages of an in-flight turn. */
-function readLive(execution) {
-    if (!execution)
-        return { assistant: '', progress: [], running: false, errored: false };
-    const assistant = execution.messages.filter((m) => m.type === 'text' || m.type === 'markdown').map((m) => m.content).join('');
-    const progress = execution.messages.filter((m) => m.type === 'progress').map((m) => ({ content: m.content, data: m.data }));
-    return {
-        assistant,
-        progress,
-        running: execution.status === FlowsActorsExecutionStatus.RUNNING || execution.status === FlowsActorsExecutionStatus.STARTING,
-        errored: execution.status === FlowsActorsExecutionStatus.ERROR,
-    };
-}
-// ─── Bubble ─────────────────────────────────────────────────────────────────
-const Bubble = ({ role, content, error }) => (_jsx(AI_Message, { from: role, children: error
-        ? _jsx(AI_MessageContent, { style: { color: 'var(--color-text-danger, #d33)' }, children: content })
-        : role === 'assistant'
-            ? _jsx(AI_MessageResponse, { children: content })
-            : _jsx(AI_MessageContent, { children: content }) }));
-/** A subtle single-line status shown while the assistant works (before the reply streams). */
-const StatusLine = ({ text }) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, paddingInline: 'var(--gap-inline-sm, 8px)', color: 'var(--color-text-secondary, #888)', fontSize: '0.85rem' }, children: [_jsx("span", { "aria-hidden": true, style: { width: 6, height: 6, borderRadius: '50%', background: 'currentColor', opacity: 0.6, flex: '0 0 auto' } }), _jsx("span", { children: text })] }));
+/** A turn that ended, or paused on a decision: its thread's record now carries it, so the thread is re-read. */
+const RECORDED_TURN_STATUSES = new Set([
+    FlowsActorsExecutionStatus.COMPLETED,
+    FlowsActorsExecutionStatus.CANCELLED,
+    FlowsActorsExecutionStatus.ERROR,
+    FlowsActorsExecutionStatus.AWAITING_APPROVAL,
+]);
+// ─── Chat workspace (one system: threads + conversation + composer) ───────────
+const NO_HISTORY = { threads: [], hasOlder: false };
 /**
- * The status line of a turn that has not started answering: the latest progress step, in words from
- * the label tree.
+ * @param contextResourceIdentifiers - The view's resolved context (#2522). It PARTITIONS the caller's threads:
+ *   threads are opened in it and listed by it, the same identifiers on both doors, folded by the engine into the
+ *   thread's `contextRef`. It decides nothing about access — the owner is always the signed-in person.
+ * @param preset - The `AI_ConversationThread` preset that draws this conversation: the view's `layoutPreset`.
  *
- * A TOOL-STATUS step (`WS_FlowsActorsToolStatusDataSchema`) carries facts, not words — which tool,
- * and which resource it reads — so the sentence is composed HERE, from this view's labels and the
- * resource's own authored title. The server used to send "Looking up your todos…", humanized from
- * the tool name, which no translator could reach (#1283). Any other progress step is shown as the
- * server sent it; with no step yet, the `thinking` label.
+ * The STORED threads are the transcript's authority, read from history and read again when a turn ends or pauses;
+ * the live turn is drawn over them until the record carries it (`conversationThreadModel`). This view used to build
+ * transcripts in the browser as turns settled, a second copy of the record that a reload could only contradict.
  */
-const LiveStatusLine = ({ step }) => {
-    const toolStatus = WS_FlowsActorsToolStatusDataSchema.safeParse(step?.data);
-    const readsResourceType = toolStatus.success ? toolStatus.data.readsResourceType : undefined;
-    const { tComponent, tResourceHeader } = useI18n({ component: FrontendComponentType.HIGH_LEVEL_VIEWS_FLOWS_ACTORS, resource: readsResourceType });
-    const t = makeComponentLabelResolver(tComponent, FrontendComponentType.HIGH_LEVEL_VIEWS_FLOWS_ACTORS);
-    if (!step)
-        return _jsx(StatusLine, { text: t('thinking') });
-    if (!toolStatus.success)
-        return _jsx(StatusLine, { text: step.content });
-    return (_jsx(StatusLine, { text: readsResourceType
-            ? t('toolStatusReadingResource', { resource: tResourceHeader(readsResourceType, 'title') })
-            : t('toolStatusWorking') }));
-};
-// ─── Prompt input (quick-fix: controlled textarea + integrated send) ────────
-// NOTE: a proper reusable "string input with integrated action" component is a
-// separate design task; this is a self-contained, reliable stand-in.
-const PromptInput = ({ placeholder, disabled, onSubmit }) => {
-    const t = useFlowsActorsLabels();
-    const [draft, setDraft] = useState('');
-    const ref = useRef(null);
-    const submit = () => {
-        const text = draft.trim();
-        if (!text || disabled)
-            return;
-        onSubmit(text);
-        setDraft('');
-        if (ref.current)
-            ref.current.style.height = 'auto';
-    };
-    return (_jsxs("div", { style: {
-            display: 'flex', alignItems: 'flex-end', gap: 'var(--gap-inline-sm, 8px)',
-            border: '1px solid var(--color-border, rgba(255,255,255,0.14))', borderRadius: 12,
-            padding: '8px 8px 8px 12px', background: 'var(--color-background-secondary, rgba(255,255,255,0.03))',
-        }, children: [_jsx("textarea", { ref: ref, value: draft, rows: 1, placeholder: placeholder, onChange: (e) => {
-                    setDraft(e.target.value);
-                    e.target.style.height = 'auto';
-                    e.target.style.height = `${Math.min(e.target.scrollHeight, 160)}px`;
-                }, onKeyDown: (e) => { if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    submit();
-                } }, style: {
-                    flex: 1, resize: 'none', border: 'none', outline: 'none', background: 'transparent',
-                    color: 'var(--color-text-primary, #eee)', font: 'inherit', lineHeight: 1.4, maxHeight: 160, minHeight: 22,
-                } }), _jsx("button", { type: "button", onClick: submit, disabled: disabled || !draft.trim(), "aria-label": t('send'), style: {
-                    flex: '0 0 auto', width: 34, height: 34, borderRadius: 8, border: 'none', cursor: (disabled || !draft.trim()) ? 'default' : 'pointer',
-                    background: (disabled || !draft.trim()) ? 'var(--color-background-tertiary, rgba(255,255,255,0.08))' : 'var(--color-primary, #3b82f6)',
-                    color: '#fff', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                }, children: "\u2191" })] }));
-};
-// ─── Conversations sidebar ──────────────────────────────────────────────────
-const ConversationsSidebar = ({ conversations, currentId, onNew, onSelect, onDelete }) => {
-    const t = useFlowsActorsLabels();
-    return (_jsxs("div", { style: { width: 220, flex: '0 0 auto', display: 'flex', flexDirection: 'column', gap: 'var(--gap-inline-sm, 8px)', borderRight: '1px solid var(--color-border, rgba(255,255,255,0.08))', paddingRight: 'var(--gap-section-sm, 12px)', minHeight: 0 }, children: [_jsxs("button", { type: "button", onClick: onNew, style: {
-                    textAlign: 'left', padding: '8px 10px', borderRadius: 8, cursor: 'pointer',
-                    border: '1px solid var(--color-border, rgba(255,255,255,0.14))', background: 'transparent',
-                    color: 'var(--color-text-primary, #eee)', font: 'inherit',
-                }, children: ["+ ", t('newDiscussion')] }), _jsx("div", { style: { overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 4, minHeight: 0 }, children: conversations.map((c) => {
-                    const active = c.id === currentId;
-                    return (_jsxs("div", { style: {
-                            display: 'flex', alignItems: 'center', borderRadius: 8,
-                            background: active ? 'var(--color-background-tertiary, rgba(255,255,255,0.08))' : 'transparent',
-                        }, children: [_jsx("button", { type: "button", onClick: () => onSelect(c.id), title: c.title || t('untitledDiscussion'), style: {
-                                    flex: 1, minWidth: 0, textAlign: 'left', padding: '8px 10px', borderRadius: 8, cursor: 'pointer', border: 'none',
-                                    background: 'transparent',
-                                    color: active ? 'var(--color-text-primary, #eee)' : 'var(--color-text-secondary, #aaa)',
-                                    font: 'inherit', fontSize: '0.85rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
-                                }, children: c.title || t('untitledDiscussion') }), _jsx("button", { type: "button", "aria-label": t('deleteDiscussion'), title: t('deleteDiscussion'), onClick: (e) => { e.stopPropagation(); onDelete(c.id); }, style: {
-                                    flex: '0 0 auto', width: 26, height: 26, marginRight: 4, borderRadius: 6, border: 'none', cursor: 'pointer',
-                                    background: 'transparent', color: 'var(--color-text-secondary, #999)', fontSize: 14, lineHeight: 1,
-                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                }, children: "\u2715" })] }, c.id));
-                }) })] }));
-};
-// ─── Chat workspace (one system: threads + transcript + input) ───────────────
-const ChatWorkspace = ({ system }) => {
+const ChatWorkspace = ({ system, contextResourceIdentifiers, preset, caseRef, }) => {
     const t = useFlowsActorsLabels();
-    const { startExecution, executions, fetchConversationHistory, deleteConversation } = useFlowsActors();
+    const { startExecution, cancelExecution, executions, fetchConversationHistory, deleteConversation } = useFlowsActors();
     const appScope = useAppScopeSafe();
     const userId = appScope?.currentUserId ?? null;
-    const [sessionConversations, setSessionConversations] = useState([]);
-    const [transcriptCache, setTranscriptCache] = useState({});
-    const [currentId, setCurrentId] = useState(null);
-    const [pending, setPending] = useState(null);
-    const keySeq = useRef(0);
-    const nextKey = () => `local-${keySeq.current++}`;
-    // Guard the completion effect against double-processing one turn (StrictMode
-    // double-invokes effects; without this the user+assistant bubbles append twice).
-    const settledTurns = useRef(new Set());
-    // Load the caller's persisted discussions from the SERVER (the executions
-    // resource, USER_SELF-scoped) whenever the system or signed-in user changes.
-    // The transcript is server-authoritative — so a reload, or the same user on
-    // another device, sees the identical threads. Nothing is stored browser-side.
-    // Race-guarded: a stale in-flight fetch (system/user changed) never applies.
-    useEffect(() => {
-        let cancelled = false;
-        setSessionConversations([]);
-        setTranscriptCache({});
-        setCurrentId(null);
-        setPending(null);
-        settledTurns.current = new Set();
-        void fetchConversationHistory(system.ref).then((history) => {
-            if (cancelled)
-                return;
-            const convs = [];
-            const cache = {};
-            for (const exec of history) {
-                const msgs = (exec.messages ?? [])
-                    .filter((m) => m.role === 'user' || m.role === 'assistant')
-                    .map((m) => ({ key: nextKey(), role: m.role, content: m.content }));
-                if (msgs.length === 0)
-                    continue;
-                cache[exec.executionId] = msgs;
-                const firstUser = msgs.find((m) => m.role === 'user');
-                convs.push({ id: exec.executionId, title: truncate(firstUser?.content ?? ''), createdAt: new Date(exec.createdAt).getTime() });
-            }
-            setSessionConversations(convs);
-            setTranscriptCache(cache);
+    /*
+     * The context's VALUE, for effect dependencies: the identifiers object is rebuilt on every scope change, and only a
+     * different context should reload the threads. The latest object is read through a ref.
+     */
+    const contextKey = canonicalizeFlowsActorsContextRef(contextResourceIdentifiers);
+    const contextRef = useRef(contextResourceIdentifiers);
+    contextRef.current = contextResourceIdentifiers;
+    /*
+     * The discussions held, read a page at a time (#2528): the newest page on open and after every turn, older pages when
+     * the person asks for them. `conversation-history.model.ts` keeps the two kinds of read from contradicting each other.
+     */
+    const [history, setHistory] = useState(NO_HISTORY);
+    const threads = history.threads;
+    const [loadingOlder, setLoadingOlder] = useState(false);
+    /*
+     * The conversation on screen, HELD across unmounts (`held-conversation-selection.ts`): a host that hides this view
+     * (the utility panel closes when the person follows a record it showed) gives it back the conversation it showed.
+     */
+    const caseKey = caseRef ? `${caseRef.resourceType}:${caseRef.resourceId}` : '';
+    const heldKey = heldConversationKey(userId, system.ref, contextKey, caseKey);
+    // Set from the held selection by the scope effect below, which runs on mount and on every change of scope.
+    const [currentId, setShownId] = useState(null);
+    const heldKeyRef = useRef(heldKey);
+    heldKeyRef.current = heldKey;
+    const setCurrentId = useCallback((next) => {
+        setShownId((previous) => {
+            const id = typeof next === 'function' ? next(previous) : next;
+            holdConversation(heldKeyRef.current, id);
+            return id;
         });
-        return () => { cancelled = true; };
-    }, [system.ref, userId, fetchConversationHistory]);
-    const conversations = useMemo(() => [...sessionConversations].sort((a, b) => b.createdAt - a.createdAt), [sessionConversations]);
-    // Move a completed/errored in-flight turn into the durable transcript cache.
-    useEffect(() => {
-        if (!pending)
+    }, []);
+    /** A held conversation not yet confirmed by the first history read of this scope (see the restore check below). */
+    const unconfirmedHeldId = useRef(null);
+    /*
+     * What the person sent, by thread. A turn outlives the page's attention: the person can switch threads while one
+     * runs or waits on a decision and come back to it, and their message must come back with it until the record has it.
+     */
+    const [sent, setSent] = useState({});
+    /*
+     * Read the caller's discussions from the SERVER (the executions resource, owner-scoped). Race-guarded by a
+     * generation counter: a stale read (the system, the person or the context changed since) never applies.
+     */
+    const readGeneration = useRef(0);
+    const refreshThreads = useCallback(async () => {
+        const generation = ++readGeneration.current;
+        const page = await fetchConversationHistory(system.ref, contextRef.current);
+        // A read that FAILED keeps the list the last good read gave (#2525 review M4): it re-reads after every turn, and a
+        // failure — often the same outage that ended the turn — used to empty the discussion list and the transcript.
+        if (generation !== readGeneration.current || page === undefined)
             return;
-        const exec = executions.get(pending.execId);
-        if (!exec)
+        setHistory((held) => withNewestHistoryPage(held, page));
+    }, [system.ref, fetchConversationHistory]);
+    /*
+     * The next older page. Guarded by the SCOPE, not by the read generation: a turn's re-read of the newest page must not
+     * discard it, but a page read for another system, person or context must never land here.
+     */
+    const scopeGeneration = useRef(0);
+    const loadOlder = useCallback(async () => {
+        const before = olderHistoryCursor(history);
+        if (!before || loadingOlder)
             return;
-        if (exec.status === FlowsActorsExecutionStatus.COMPLETED || exec.status === FlowsActorsExecutionStatus.ERROR) {
-            // A turn is identified by execId + its current message count, so a NEW turn
-            // in the same thread (same execId) is not mistaken for an already-settled one.
-            const turnKey = `${pending.execId}:${exec.messages.length}`;
-            if (settledTurns.current.has(turnKey)) {
-                setPending(null);
+        const scope = scopeGeneration.current;
+        setLoadingOlder(true);
+        try {
+            const page = await fetchConversationHistory(system.ref, contextRef.current, { before });
+            if (scope !== scopeGeneration.current || page === undefined)
                 return;
-            }
-            settledTurns.current.add(turnKey);
-            const live = readLive(exec);
-            setTranscriptCache((prev) => {
-                const existing = prev[pending.execId] ?? [];
-                const additions = [{ key: nextKey(), role: 'user', content: pending.userText }];
-                if (exec.status === FlowsActorsExecutionStatus.COMPLETED && live.assistant) {
-                    additions.push({ key: nextKey(), role: 'assistant', content: live.assistant });
-                }
-                else if (exec.status === FlowsActorsExecutionStatus.ERROR) {
-                    additions.push({ key: nextKey(), role: 'assistant', content: '', error: true });
-                }
-                return { ...prev, [pending.execId]: [...existing, ...additions] };
-            });
-            setPending(null);
+            setHistory((held) => withOlderHistoryPage(held, page));
+        }
+        finally {
+            if (scope === scopeGeneration.current)
+                setLoadingOlder(false);
+        }
+    }, [history, loadingOlder, system.ref, fetchConversationHistory]);
+    /*
+     * The RESTORE CHECK: a held conversation is kept only if the first read of this scope's history lists it, or its turn
+     * is live in this page. Otherwise it was deleted elsewhere, or is older than the first page, and the view opens a new
+     * conversation rather than continuing one it cannot show — sending into it would continue a thread nobody sees.
+     *
+     * DECLARED BEFORE the scope effect on purpose: effects run in declaration order, so in a commit that changes the scope
+     * this check runs while `unconfirmedHeldId` still names the OLD scope's (already confirmed, so null) selection, and
+     * never tests the new scope's held id against the previous scope's history. The new id is checked against the first
+     * read of its own scope, on a later commit.
+     *
+     * Accepted: between mount and that first read the held thread is selected and its transcript not yet loaded, and a
+     * message sent in that window continues it. Blocking the send instead would hold the composer shut for as long as a
+     * failing history read keeps failing. The window is one read long. A thread deleted elsewhere and continued in it
+     * comes back as a NEW thread under the same id, holding only that message: the server opens a row when the one it
+     * was asked to continue does not exist (`ConversationalExecutionBackendService`, `rowExists`). Nothing is written into
+     * another person's thread, since the row is read and opened under the sender as owner.
+     */
+    useEffect(() => {
+        const held = unconfirmedHeldId.current;
+        if (!held || history === NO_HISTORY)
+            return;
+        unconfirmedHeldId.current = null;
+        if (!history.threads.some((thread) => thread.executionId === held) && !executions.has(held)) {
+            setCurrentId((previous) => (previous === held ? null : previous));
         }
-    }, [executions, pending]);
-    const handleNew = useCallback(() => { setCurrentId(null); setPending(null); }, []);
-    const handleSelect = useCallback((id) => { setCurrentId(id); setPending(null); }, []);
+    }, [history, executions, setCurrentId]);
+    useEffect(() => {
+        scopeGeneration.current += 1;
+        setHistory(NO_HISTORY);
+        setLoadingOlder(false);
+        // The conversation this person last had open here, if any: a new conversation otherwise.
+        const held = readHeldConversation(heldConversationKey(userId, system.ref, contextKey, caseKey));
+        unconfirmedHeldId.current = held;
+        setShownId(held);
+        setSent({});
+        void refreshThreads();
+    }, [refreshThreads, userId, contextKey, system.ref, caseKey]);
+    const live = currentId ? executions.get(currentId) : undefined;
+    // A turn that ended or paused is now on its thread's record: re-read it, so the stored lines replace the live ones.
+    useEffect(() => {
+        if (live && RECORDED_TURN_STATUSES.has(live.status))
+            void refreshThreads();
+    }, [live?.status, refreshThreads]);
+    const currentThread = currentId ? threads.find((thread) => thread.executionId === currentId) : undefined;
+    const sentHere = currentId ? sent[currentId] : undefined;
+    const model = useMemo(() => conversationThreadModel({
+        ...(currentThread ? { thread: currentThread } : {}),
+        ...(live ? { live } : {}),
+        ...(sentHere ? { sent: sentHere } : {}),
+    }), [currentThread, live, sentHere]);
+    // A discussion just started is listed at once, before the record that will name it is read back.
+    const discussions = useMemo(() => {
+        const stored = threads.map((thread) => ({ id: thread.executionId, title: threadTitle(thread) }));
+        const started = Object.entries(sent)
+            .filter(([id, pending]) => pending.length > 0 && !threads.some((thread) => thread.executionId === id))
+            .sort(([, left], [, right]) => right[0].sentAt.getTime() - left[0].sentAt.getTime())
+            .map(([id, pending]) => ({ id, title: truncate(pending[0].text) }));
+        return [...started, ...stored];
+    }, [threads, sent]);
+    const handleNew = useCallback(() => setCurrentId(null), [setCurrentId]);
+    const handleSelect = useCallback((id) => {
+        setCurrentId(id);
+        void refreshThreads();
+    }, [refreshThreads, setCurrentId]);
     const handleDelete = useCallback((id) => {
-        // Optimistically remove from the view, then delete server-side (owner-scoped).
-        // On failure, re-fetch so the sidebar reflects the true server state.
-        const snapshotConversations = sessionConversations;
-        const snapshotCache = transcriptCache;
-        setSessionConversations((prev) => prev.filter((c) => c.id !== id));
-        setTranscriptCache((prev) => { const next = { ...prev }; delete next[id]; return next; });
-        setCurrentId((prev) => (prev === id ? null : prev));
-        setPending((prev) => (prev && prev.execId === id ? null : prev));
-        void deleteConversation(id).catch(() => {
-            // Roll back the optimistic removal if the server rejected the delete.
-            setSessionConversations(snapshotConversations);
-            setTranscriptCache(snapshotCache);
+        // Optimistically removed, then deleted server-side (owner-scoped); a refused delete re-reads the true list.
+        setHistory((held) => ({ ...held, threads: held.threads.filter((thread) => thread.executionId !== id) }));
+        setSent((previous) => {
+            if (!(id in previous))
+                return previous;
+            const next = { ...previous };
+            delete next[id];
+            return next;
         });
-    }, [deleteConversation, sessionConversations, transcriptCache]);
+        setCurrentId((previous) => (previous === id ? null : previous));
+        void deleteConversation(id).catch(() => { void refreshThreads(); });
+    }, [deleteConversation, refreshThreads, setCurrentId]);
     const handleSend = useCallback((text) => {
-        // Multi-turn context is server-authoritative: continuing a thread reuses its
-        // `executionId`, and the conversational service reads the thread's prior turns
-        // from the persisted row — no client-side history replay.
-        const id = startExecution(system.ref, { message: text }, currentId ?? undefined);
+        // Multi-turn context is server-authoritative: continuing a thread reuses its `executionId`, and the conversational
+        // service reads the thread's prior turns from the persisted row — no client-side history replay.
+        // The id the message is stored under, so the page recognises it in the record (#2525 review N1).
+        const messageId = crypto.randomUUID();
+        const id = startExecution(system.ref, { message: text }, currentId ?? undefined, contextRef.current, { messageId, ...(caseRef ? { caseRef } : {}) });
         if (!id)
             return;
-        if (!currentId) {
-            // Starting a fresh discussion.
-            setSessionConversations((prev) => [{ id, title: truncate(text), createdAt: Date.now() }, ...prev]);
-            setTranscriptCache((prev) => (id in prev ? prev : { ...prev, [id]: [] }));
-        }
+        setSent((previous) => ({ ...previous, [id]: withPendingSend(previous[id], { id: messageId, text, sentAt: new Date() }) }));
         setCurrentId(id);
-        setPending({ execId: id, userText: text });
-    }, [startExecution, system.ref, currentId]);
-    const transcript = (currentId && transcriptCache[currentId]) ? transcriptCache[currentId] : [];
-    const pendingLive = pending ? readLive(executions.get(pending.execId)) : null;
-    const showPending = pending && (!currentId || pending.execId === currentId);
-    const isEmpty = transcript.length === 0 && !showPending;
-    return (_jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0, gap: 'var(--gap-section-md, 16px)' }, children: [_jsx(ConversationsSidebar, { conversations: conversations, currentId: currentId, onNew: handleNew, onSelect: handleSelect, onDelete: handleDelete }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, gap: 'var(--gap-section-sm, 12px)' }, children: [_jsx(AI_Conversation, { style: { flex: 1, minHeight: 0 }, children: _jsxs(AI_ConversationContent, { children: [isEmpty ? (_jsx(AI_ConversationEmptyState, { title: system.displayName, description: system.description || t('emptyStateDescription') })) : null, transcript.map((m) => (_jsx(Bubble, { role: m.role, content: m.error ? t('responseFailed') : m.content, error: m.error }, m.key))), showPending && pending ? (_jsxs(_Fragment, { children: [_jsx(Bubble, { role: "user", content: pending.userText }), pendingLive?.assistant
-                                            ? _jsx(Bubble, { role: "assistant", content: pendingLive.assistant })
-                                            : _jsx(LiveStatusLine, { step: pendingLive?.progress.at(-1) }), _jsx(FlowsActors_ApprovalRequest, { executionId: pending.execId })] })) : null] }) }), _jsx(PromptInput, { placeholder: t('promptPlaceholder', { assistant: system.displayName }), disabled: !!pending, onSubmit: handleSend })] })] }));
+    }, [startExecution, system.ref, currentId, caseRef, setCurrentId]);
+    // Sending waits for the turn in flight, and for a decision the turn is waiting on: that is answered, not talked over.
+    const turnInFlight = model.turnState === ConversationTurnState.WORKING
+        || model.turnState === ConversationTurnState.ANSWERING
+        || model.turnState === ConversationTurnState.AWAITING_DECISION;
+    const stoppableId = model.stoppable ? model.activeExecutionId : undefined;
+    /*
+     * Report an agent's reply (#2842): offered under each reply the open thread's record holds, in the organization whose
+     * administrators triage it. That is the organization the view's context names, as the server requires of a
+     * conversation held in an organization's context, else the one the person works in. A reply with nowhere to be
+     * reported is not offered the action rather than offered and refused.
+     */
+    const organizationId = agentBehaviorReportOrganizationOf(contextResourceIdentifiers, appScope?.currentOrganizationId ?? undefined);
+    const reportingThreadId = currentThread ? currentId : null;
+    const renderReplyActions = useMemo(() => (reportingThreadId && organizationId
+        ? ({ messageId }) => (_jsx(AgentReplyReportAction, { executionId: reportingThreadId, messageId: messageId, organizationId: organizationId }, messageId))
+        : undefined), [reportingThreadId, organizationId]);
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-card md:flex-row", children: [_jsx(AI_ConversationThreadDiscussions, { preset: preset, discussions: discussions, currentId: currentId, onNew: handleNew, onSelect: handleSelect, onDelete: handleDelete, ...(history.hasOlder ? { onLoadOlder: () => { void loadOlder(); }, loadingOlder } : {}) }), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col gap-card-sm", children: [_jsx(AI_ConversationThread, { preset: preset, model: model, ...(renderReplyActions ? { renderReplyActions } : {}), emptyState: { title: system.displayName, description: system.description || t('emptyStateDescription') } }), _jsx(AI_ConversationThreadComposer, { preset: preset, placeholder: t('promptPlaceholder', { assistant: system.displayName }), onSubmit: handleSend, sendDisabled: turnInFlight, ...(stoppableId ? { onStop: () => cancelExecution(stoppableId) } : {}) })] })] }));
 };
 // ─── Compact header ─────────────────────────────────────────────────────────
 const CompactHeader = ({ system }) => {
@@ -261,18 +248,17 @@ const CompactHeader = ({ system }) => {
     const { executions } = useFlowsActors();
     const busy = useMemo(() => Array.from(executions.values()).some((e) => e.systemRef === system.ref
         && (e.status === FlowsActorsExecutionStatus.RUNNING || e.status === FlowsActorsExecutionStatus.STARTING)), [executions, system.ref]);
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--gap-inline-sm, 8px)', paddingBottom: 'var(--gap-section-sm, 12px)', borderBottom: '1px solid var(--color-border, rgba(255,255,255,0.08))' }, children: [_jsx("span", { "aria-hidden": true, style: { width: 8, height: 8, borderRadius: '50%', background: busy ? 'var(--color-warning, #e0a325)' : 'var(--color-success, #3fae6a)', flex: '0 0 auto' } }), _jsx("span", { style: { fontWeight: 600 }, children: system.displayName }), _jsx("span", { style: { fontSize: '0.8rem', color: 'var(--color-text-secondary, #888)' }, children: busy ? t('statusWorking') : t('statusReady') })] }));
+    return (_jsxs("div", { className: "flex items-center gap-element border-b border-border pb-card-sm", children: [_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', busy ? 'bg-warning' : 'bg-success') }), _jsx("span", { className: "font-semibold text-foreground", children: system.displayName }), _jsx("span", { className: "text-xs text-muted-foreground", children: busy ? t('statusWorking') : t('statusReady') })] }));
 };
 /**
  * FlowsActorsView — chat-first engine host for a standalone flows-actors surface.
  *
- * Compact header + a discussions sidebar (each execution = one thread; "New
- * discussion" starts a fresh one, past ones are listed and re-openable) + a
- * full-height chat with markdown replies. Multi-turn context is server-side: a
- * continued thread replays its prior turns to the agent. The actor/flow
- * structural detail is intentionally NOT shown — this is the assistant surface.
+ * Compact header, then the conversation: the person's discussions with the assistant (each execution is one thread;
+ * "New discussion" starts a fresh one), the open thread, and the composer. Multi-turn context is server-side: a
+ * continued thread replays its prior turns to the agent. The actor/flow structural detail is not shown — this is the
+ * assistant surface.
  */
-export const FlowsActorsView = ({ viewRef, viewDefinition: viewDefinitionProp, contextResourceIdentifiers: contextResourceIdentifiersProp, }) => {
+export const FlowsActorsView = ({ viewRef, viewDefinition: viewDefinitionProp, contextResourceIdentifiers: contextResourceIdentifiersProp, caseRef, }) => {
     const { flowsActorsViews } = useUI();
     const appScope = useAppScopeSafe();
     const { systems, isLoading } = useFlowsActors();
@@ -286,7 +272,11 @@ export const FlowsActorsView = ({ viewRef, viewDefinition: viewDefinitionProp, c
             surfaceName: 'FlowsActorsView', surfaceRef: viewRef, explicitContextResourceIdentifiers: contextResourceIdentifiersProp,
         });
     }, [contextResourceIdentifiersProp, viewDefinition, viewRef]);
-    useMemo(() => {
+    /*
+     * The view's context: its primary scope, the app's custom scope, and what the host passed. Threads are opened in
+     * it and listed by it (`ChatWorkspace`). This was computed and its result discarded (#2522).
+     */
+    const viewContextResourceIdentifiers = useMemo(() => {
         const primaryScopeInitiatorIds = ScopeUtilsService.buildInitiatorIds({
             userId: appScope?.currentUserId,
             organizationId: appScope?.currentOrganizationId,
@@ -299,7 +289,7 @@ export const FlowsActorsView = ({ viewRef, viewDefinition: viewDefinitionProp, c
         const liveAppScopeContext = appScope?.buildContextResourceIdentifiers() ?? {};
         const customScopeContext = ScopeUtilsService.filterCustomScopeContextResourceIdentifiers(liveAppScopeContext);
         if (!viewDefinition) {
-            return ScopeUtilsService.mergeContextResourceIdentifiers(primaryScopeContext, customScopeContext, contextResourceIdentifiersProp);
+            return ScopeUtilsService.mergeContextResourceIdentifiers(primaryScopeContext, customScopeContext, contextResourceIdentifiersProp) ?? {};
         }
         return ScopeUtilsService.resolveViewContextResourceIdentifiers({
             surfaceName: 'FlowsActorsView',
@@ -310,13 +300,12 @@ export const FlowsActorsView = ({ viewRef, viewDefinition: viewDefinitionProp, c
             primaryScopeContext,
             customScopeContext,
             explicitContextResourceIdentifiers: contextResourceIdentifiersProp,
-        });
+        }) ?? {};
     }, [contextResourceIdentifiersProp, viewDefinition, appScope]);
     /*
-     * ONE system, resolved directly. This used to map a `systemRefs` LIST to `exposedSystems` and
-     * then render `exposedSystems[0]`, so a view naming two assistants silently exposed one with no
-     * switcher and no diagnostic (#435). The schema is now singular and this reads it singular —
-     * keeping a one-element array here would have preserved the truncation shape without the list.
+     * ONE system, resolved directly. This used to map a `systemRefs` LIST to `exposedSystems` and then render
+     * `exposedSystems[0]`, so a view naming two assistants silently exposed one with no switcher and no diagnostic
+     * (#435). The schema is singular and this reads it singular.
      */
     const activeSystem = useMemo(() => {
         if (!viewDefinition)
@@ -327,7 +316,7 @@ export const FlowsActorsView = ({ viewRef, viewDefinition: viewDefinitionProp, c
         return _jsx(ViewNotFound, { viewKind: "flows-actors" });
     if (!isReady)
         return null;
-    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }, children: activeSystem ? (_jsxs(_Fragment, { children: [_jsx(CompactHeader, { system: activeSystem }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, paddingTop: 'var(--gap-section-sm, 12px)' }, children: _jsx(ChatWorkspace, { system: activeSystem }) })] })) : (_jsx("div", { role: "status", style: { padding: '24px', color: 'var(--color-text-secondary, #888)' }, children: isLoading ? t('loading') : t('unavailable') })) }));
+    return (_jsx("div", { className: "flex h-full min-h-0 flex-col", children: activeSystem ? (_jsxs(_Fragment, { children: [_jsx(CompactHeader, { system: activeSystem }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col pt-card-sm", children: _jsx(ChatWorkspace, { system: activeSystem, contextResourceIdentifiers: viewContextResourceIdentifiers, preset: viewDefinition.layoutPreset, caseRef: caseRef }) })] })) : (_jsx("div", { role: "status", className: "p-section text-sm text-muted-foreground", children: isLoading ? t('loading') : t('unavailable') })) }));
 };
 export default FlowsActorsView;
 //# sourceMappingURL=FlowsActorsView.js.map