apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-13 17:52:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chat: unify HITL approval UX behind a single paginated card and harden timeline supersede.

Browse source
This commit is contained in:
CREDO23 2026-05-09 21:44:54 +02:00
parent 89e4953800
commit 2e132513be
25 changed files with 604 additions and 1157 deletions
Download patch file Download diff file Expand all files Collapse all files

242
surfsense_web/features/chat-messages/timeline/build-timeline.ts
View file

@ -1,9 +1,9 @@
import type { ItemStatus, ReasoningItem, TimelineItem, ToolCallItem } from "./types";
/**
* The thinking-step shape produced by the streaming pipeline (see
* ``data-thinking-step`` SSE events). Kept structural here so this
* builder doesn't depend on the legacy ``thinking-steps.tsx`` file.
* Structural shape of the relay's ``data-thinking-step`` payload.
* Declared here (not imported) so the builder stays free of the
* legacy ``thinking-steps.tsx`` dependency.
*/
export interface ThinkingStepInput {
id: string;
@ -13,12 +13,7 @@ export interface ThinkingStepInput {
metadata?: Record<string, unknown>;
}
/**
* The minimum tool-call-part shape we read from message content. We
* accept ``unknown[]`` and structurally narrow per part — the assistant-
* ui content type has many shapes, but only ``tool-call`` parts matter
* here.
*/
/** Narrowed tool-call shape; the assistant-ui content type is wider. */
interface ToolCallPart {
type: "tool-call";
toolCallId: string;
@ -43,15 +38,101 @@ function asNonEmptyString(v: unknown): string | undefined {
}
/**
* Derive coarse status for a tool-call from its result shape. Used
* when the tool-call has no joined thinking step (orphan path).
* True iff THIS tool-call is the actual interrupt request (carries an
* ``action_requests[]``), not just a parent ``task`` wrapper that
* inherited the propagated ``__interrupt__`` flag. Pending requests
* are hidden so ``HitlApprovalCard`` owns the pending UX; the
* ``length > 0`` guard keeps parent task wrappers visible so their
* children stay indented under the delegation span.
*/
function isPendingHitlInterrupt(result: unknown): boolean {
if (typeof result !== "object" || result === null) return false;
const r = result as {
__interrupt__?: unknown;
__decided__?: unknown;
action_requests?: unknown;
};
return (
r.__interrupt__ === true &&
r.__decided__ === undefined &&
Array.isArray(r.action_requests) &&
r.action_requests.length > 0
);
}
/**
* Stable interrupt signal across pre/post decision: the resume flow
* spreads the original result and only adds ``__decided__``, so
* ``__interrupt__`` alone is the right key.
*/
function hasInterruptMarker(result: unknown): boolean {
if (typeof result !== "object" || result === null) return false;
return (result as { __interrupt__?: unknown }).__interrupt__ === true;
}
interface ToolCallSlim {
toolName: string;
toolCallId: string;
result?: unknown;
spanId?: string;
}
/**
* During the live-resume window the in-memory message holds BOTH the
* OLD interrupt-frame parts AND the freshly-streamed resume parts in
* a new ``task`` scope. Without this filter we'd render both until
* the next reload (where ``filterSupersededAbortedMessages`` drops
* the OLD row upstream).
*
* - HITL ``__decided__: "reject"`` → ``cancelled``
* - Has any result → ``completed``
* - No result yet → ``running``
*
* The per-tool component picks its own visual state from the result;
* this is only the timeline chrome's coarse signal.
* A tool-call is "interrupt-affected" when it either carries
* ``__interrupt__`` directly or sits in a span that contains one. An
* affected call is superseded iff a later same-name call in a
* different scope exists. The conservative branch (no successor)
* preserves rejects that ended the run with no replacement.
*/
function collectSupersededToolCallIds(content: readonly unknown[]): Set<string> {
const slims: ToolCallSlim[] = [];
for (const part of content) {
if (!isToolCallPart(part)) continue;
slims.push({
toolName: part.toolName,
toolCallId: part.toolCallId,
result: part.result,
spanId: asNonEmptyString(part.metadata?.spanId),
});
}
const interruptedSpans = new Set<string>();
for (const tc of slims) {
if (!hasInterruptMarker(tc.result)) continue;
if (tc.spanId) interruptedSpans.add(tc.spanId);
}
const superseded = new Set<string>();
for (let i = 0; i < slims.length; i++) {
const tc = slims[i];
const inInterruptedSpan = tc.spanId !== undefined && interruptedSpans.has(tc.spanId);
const isDirectInterrupt = hasInterruptMarker(tc.result);
if (!inInterruptedSpan && !isDirectInterrupt) continue;
for (let j = i + 1; j < slims.length; j++) {
// Both-undefined counts as different scopes so standalone
// HITL tools (no delegation) get caught.
const sameSpan = tc.spanId !== undefined && slims[j].spanId === tc.spanId;
if (slims[j].toolName === tc.toolName && !sameSpan) {
superseded.add(tc.toolCallId);
break;
}
}
}
return superseded;
}
/**
* Coarse status for orphan tool-calls (no joined thinking step). The
* per-tool body picks its own visual state from ``result``; this
* only feeds the chrome dot/header.
*/
function deriveToolCallStatus(result: unknown): ItemStatus {
if (!result) return "running";
@ -68,119 +149,30 @@ function mapStepStatus(status: ThinkingStepInput["status"]): ItemStatus {
}
/**
* True when a tool-call's result carries an HITL interrupt. Catches
* both pre-decision (``__interrupt__: true``) and post-decision
* (``__interrupt__: true, __decided__: …``) states — the resume
* flow's decision-application spreads the original result and only
* adds ``__decided__``, so ``__interrupt__`` alone is the stable
* signal.
*/
function isInterruptInResult(result: unknown): boolean {
if (typeof result !== "object" || result === null) return false;
return (result as { __interrupt__?: unknown }).__interrupt__ === true;
}
/**
* Build the set of tool-call ids that have been superseded by the
* resume stream's continuation.
*
* The challenge: during the live resume window, the in-memory message
* holds BOTH the rehydrated interrupt-frame parts (the OLD ``task`` +
* its inner ``update_notion_page`` whose result has ``__decided__``)
* AND the freshly-streamed resume parts (a NEW ``task`` + a NEW
* ``update_notion_page`` with the actual success result). We need to
* drop the entire OLD delegation chain so only the NEW one renders.
*
* Two-stage detection:
*
* 1. **Identify "interrupted spans"** — any spanId that contains at
* least one tool-call whose ``result.__interrupt__`` is true. This
* captures both the inner decided tool and its outer ``task``
* wrapper (which itself has no result but shares the spanId).
* Without this the wrapper survives as an orphan parent — the
* stray "Notion" row we saw post-approve.
*
* 2. **Mark a tool-call as superseded** when (a) it sits in an
* interrupted span OR carries the interrupt marker directly, AND
* (b) a later tool-call with the same ``toolName`` in a DIFFERENT
* span exists. The "different span" guard prevents self-supersession
* within the same delegation episode.
*
* Mirrors the message-level rule in
* ``filterSupersededAbortedMessages`` but at the part level — same
* data-shape problem (interrupt frame + resume continuation cohabiting
* one in-memory message) one level down.
*
* Conservative: an interrupted tool-call with NO later same-named
* different-span successor stays (e.g. a reject that ended the run, a
* never-resumed decision).
*/
function collectSupersededToolCallIds(content: readonly unknown[]): Set<string> {
const toolCallParts: ToolCallPart[] = [];
for (const part of content) {
if (isToolCallPart(part)) toolCallParts.push(part);
}
const interruptedSpans = new Set<string>();
for (const part of toolCallParts) {
if (!isInterruptInResult(part.result)) continue;
const sid = asNonEmptyString(part.metadata?.spanId);
if (sid) interruptedSpans.add(sid);
}
const superseded = new Set<string>();
for (let i = 0; i < toolCallParts.length; i++) {
const part = toolCallParts[i];
const sid = asNonEmptyString(part.metadata?.spanId);
const inInterruptedSpan = sid !== undefined && interruptedSpans.has(sid);
const isDirectInterrupt = isInterruptInResult(part.result);
if (!inInterruptedSpan && !isDirectInterrupt) continue;
for (let j = i + 1; j < toolCallParts.length; j++) {
const jsid = asNonEmptyString(toolCallParts[j].metadata?.spanId);
// Both-undefined counts as "different scopes" so standalone
// HITL tools (no delegation, no spanId) get caught. Naive
// ``jsid !== sid`` misses them since ``undefined !==
// undefined`` is false.
const sameSpan = sid !== undefined && jsid === sid;
if (toolCallParts[j].toolName === part.toolName && !sameSpan) {
superseded.add(part.toolCallId);
break;
}
}
}
return superseded;
}
/**
* Build the timeline's flat ``TimelineItem[]`` from thinking steps +
* message content tool-calls.
*
* 1. Index tool-call parts by ``metadata.thinkingStepId`` (O(1) join).
* 2. Walk thinking steps in order. Joined → ``ToolCallItem``;
* unjoined → ``ReasoningItem``.
* 3. Append unjoined tool-calls as orphan ``ToolCallItem``s (legacy
* history pre-``thinkingStepId``).
*
* Pure: no React, no I/O. ``result`` is forwarded verbatim — per-tool
* components own its discrimination. ``isThreadRunning`` lives in
* ``timeline.tsx`` as a runtime override.
* Pure builder: thinking steps + message content → ``TimelineItem[]``.
* Joins tool-calls to thinking steps via ``metadata.thinkingStepId``,
* appends unjoined tool-calls as orphans, drops superseded
* interrupt-frame parts and pending HITL requests (those are owned
* by ``HitlApprovalCard``). ``result`` is forwarded verbatim so
* per-tool bodies can discriminate.
*/
export function buildTimeline(
thinkingSteps: readonly ThinkingStepInput[],
content: readonly unknown[] | undefined
): TimelineItem[] {
const toolByStepId = new Map<string, ToolCallPart>();
const supersededStepIds = new Set<string>();
const consumedToolCallIds = new Set<string>();
const supersededToolCallIds = content
? collectSupersededToolCallIds(content)
: new Set<string>();
const superseded = content ? collectSupersededToolCallIds(content) : new Set<string>();
if (content) {
for (const part of content) {
if (!isToolCallPart(part)) continue;
const tid = asNonEmptyString(part.metadata?.thinkingStepId);
if (superseded.has(part.toolCallId)) {
if (tid) supersededStepIds.add(tid);
continue;
}
if (tid) toolByStepId.set(tid, part);
}
}
@ -188,15 +180,14 @@ export function buildTimeline(
const items: TimelineItem[] = [];
for (const step of thinkingSteps) {
// Drop the step alongside its superseded tool-call, otherwise
// it'd render as an orphan reasoning row with the OLD title.
if (supersededStepIds.has(step.id)) continue;
const stepSpanId = asNonEmptyString(step.metadata?.spanId);
const joined = toolByStepId.get(step.id);
// Drop the step entirely when it joins a superseded tool-call:
// the resume stream has emitted a fresh same-named tool-call
// (with its own thinking step) that takes over the row.
// Without this, the timeline shows two "Notion → Update
// Notion page" groups during the live resume window.
if (joined && supersededToolCallIds.has(joined.toolCallId)) {
if (joined && isPendingHitlInterrupt(joined.result)) {
consumedToolCallIds.add(joined.toolCallId);
continue;
}
@ -236,7 +227,8 @@ export function buildTimeline(
for (const part of content) {
if (!isToolCallPart(part)) continue;
if (consumedToolCallIds.has(part.toolCallId)) continue;
if (supersededToolCallIds.has(part.toolCallId)) continue;
if (superseded.has(part.toolCallId)) continue;
if (isPendingHitlInterrupt(part.result)) continue;
const orphan: ToolCallItem = {
kind: "tool-call",
id: part.toolCallId,

36
surfsense_web/features/chat-messages/timeline/data-renderer.tsx
View file

@ -2,25 +2,32 @@
import { makeAssistantDataUI, useAuiState } from "@assistant-ui/react";
import { useMemo } from "react";
import { PendingInterruptProvider, usePendingInterrupt } from "@/features/chat-messages/hitl";
import { buildTimeline, type ThinkingStepInput } from "./build-timeline";
import { Timeline } from "./timeline";
const noopSubmit = () => {};
/**
* assistant-ui data UI for the ``thinking-steps`` data-part. Receives
* the relay's step array as ``data``, reads message ``content`` via
* ``useAuiState``, builds the unified ``TimelineItem[]`` once
* (``buildTimeline`` is pure), and renders the ``Timeline``.
* assistant-ui data UI for the ``thinking-steps`` data-part.
*
* ``isMessageStreaming`` is the AND of thread-running + this-message-
* is-last; that flag drives the ``isThreadRunning`` runtime override
* in ``Timeline`` (stale "running" → "completed" once the thread
* stops). Mirrors the legacy ``ThinkingStepsDataRenderer`` semantics.
* Re-scopes the global ``PendingInterruptProvider`` per message: the
* approval card only mounts under the assistant message that owns
* the interrupt (otherwise every message in scrollback would render
* its own card).
*/
function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
const isThreadRunning = useAuiState(({ thread }) => thread.isRunning);
const isLastMessage = useAuiState(({ message }) => message?.isLast ?? false);
const isMessageStreaming = isThreadRunning && isLastMessage;
const content = useAuiState(({ message }) => message?.content);
const messageId = useAuiState(({ message }) => message?.id);
const pendingValue = usePendingInterrupt();
const pendingForThisMessage =
pendingValue?.pendingInterrupt && pendingValue.pendingInterrupt.assistantMsgId === messageId
? pendingValue.pendingInterrupt
: null;
const onSubmit = pendingValue?.onSubmit ?? noopSubmit;
const steps = useMemo<ThinkingStepInput[]>(
() => (data as { steps: ThinkingStepInput[] } | null)?.steps ?? [],
@ -32,21 +39,18 @@ function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
[steps, content]
);
if (items.length === 0) return null;
if (items.length === 0 && !pendingForThisMessage) return null;
return (
<div className="mb-3 -mx-2 leading-normal">
<Timeline items={items} isThreadRunning={isMessageStreaming} />
<PendingInterruptProvider pendingInterrupt={pendingForThisMessage} onSubmit={onSubmit}>
<Timeline items={items} isThreadRunning={isMessageStreaming} />
</PendingInterruptProvider>
</div>
);
}
/**
* Drop-in replacement for the legacy ``ThinkingStepsDataUI``. Same
* registration name (``thinking-steps``) so consumers (assistant-
* message.tsx, public-thread.tsx, free-chat-page.tsx, etc.) just swap
* the import — no SSE relay changes, no message format changes.
*/
/** Registers under ``thinking-steps`` so consumers swap the import only. */
export const TimelineDataUI = makeAssistantDataUI({
name: "thinking-steps",
render: TimelineDataRenderer,

36
surfsense_web/features/chat-messages/timeline/grouping.ts
View file

@ -1,33 +1,33 @@
import type { TimelineGroup, TimelineItem } from "./types";
/**
* Group consecutive delegated child items under their parent.
* Group delegated child items under their owning ``task`` parent.
*
* The contract: the parent of a span is the FIRST item carrying that
* ``spanId``. Subsequent items with the same ``spanId`` are children.
* Items with no ``spanId`` are their own parent (no children).
* Backend invariant: ``metadata.spanId`` is set only while a ``task``
* tool is open, so every non-task item with ``spanId = X`` shares it
* with the ``task`` that owns the span. We promote that task to the
* group header.
*
* For ``task`` delegations specifically, the ``task`` tool-call IS the
* span owner — its ``spanId`` is set on the call itself, and child
* items emitted while the subagent is running carry the same ``spanId``.
* The ``task`` item must therefore become the parent header, NOT a
* child of itself. This is achieved by treating the FIRST occurrence
* of any ``spanId`` as the parent; downstream items with the same
* ``spanId`` are children.
*
* Defensive: if the very first item of a stream is a child of a span
* we haven't seen the parent for yet, it's promoted to a parent so it
* still renders. Real flows always emit the parent ``task`` first.
*
* Pure function. No React, no side effects. Trivially testable.
* The owner-missing branch defends against the live-resume window
* where the OLD ``task`` wrapper can be superseded while its
* children briefly survive — without it, grouping would promote
* the first orphan child to parent and visually nest its siblings
* under it.
*/
export function groupItems(items: readonly TimelineItem[]): TimelineGroup[] {
const spanOwners = new Set<string>();
for (const item of items) {
if (item.kind === "tool-call" && item.toolName === "task" && item.spanId) {
spanOwners.add(item.spanId);
}
}
const groups: TimelineGroup[] = [];
const spanParent = new Map<string, TimelineGroup>();
for (const item of items) {
const sid = item.spanId;
if (!sid) {
if (!sid || !spanOwners.has(sid)) {
groups.push({ parent: item, children: [] });
continue;
}

32
surfsense_web/features/chat-messages/timeline/items/tool-call-item.tsx
View file

@ -2,49 +2,25 @@
import type { FC } from "react";
import { getToolDisplayName } from "@/contracts/enums/toolIcons";
import { ToolCallIdProvider, useHitlBundle } from "@/features/chat-messages/hitl";
import { resolveItemTitle } from "../subagent-rename";
import { adaptItemToProps, FallbackToolBody, getToolComponent } from "../tool-registry";
import type { ToolCallItem as ToolCallItemModel } from "../types";
import { ItemHeader } from "./item-header";
/**
* Renders a ``kind: "tool-call"`` row: ``ItemHeader`` (title + items)
* plus the resolved tool body underneath.
*
* Tool body is selected from the registry; unknown names fall through
* to ``FallbackToolBody`` (which itself dispatches between HITL
* approval cards and the default visual card based on result shape).
*
* Multi-approval bundle behaviour: when the HITL bundle is active, all
* cards EXCEPT the current step are hidden so the user is paged
* through them one at a time. Hiding is local to this row — the header
* and the timeline chrome around it are unaffected (the row collapses
* to its header only). The bundle's ``PagerChrome`` is mounted once
* at the end of the timeline by ``timeline.tsx``.
*
* Every tool body is wrapped in ``ToolCallIdProvider`` so
* ``useHitlDecision`` (called inside HITL approval cards) can read the
* tool-call id from context and stage decisions in the bundle.
* Renders a tool-call row. Pending HITL interrupts are filtered
* upstream in ``buildTimeline`` (owned by ``HitlApprovalCard``); this
* component only sees running / completed / errored / decided rows.
*/
export const ToolCallItem: FC<{ item: ToolCallItemModel }> = ({ item }) => {
const bundle = useHitlBundle();
const hideForBundle =
bundle?.isInBundle(item.toolCallId) === true && !bundle.isCurrentStep(item.toolCallId);
const title = resolveItemTitle(item, getToolDisplayName);
const Body = getToolComponent(item.toolName) ?? FallbackToolBody;
const props = adaptItemToProps(item);
return (
<>
<ItemHeader title={title} status={item.status} items={item.items} itemKey={item.id} />
{!hideForBundle && (
<ToolCallIdProvider toolCallId={item.toolCallId}>
<Body {...props} />
</ToolCallIdProvider>
)}
<Body {...props} />
</>
);
};

130
surfsense_web/features/chat-messages/timeline/timeline.tsx
View file

@ -4,7 +4,7 @@ import { ChevronRightIcon } from "lucide-react";
import { type FC, useEffect, useMemo, useState } from "react";
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { getToolDisplayName } from "@/contracts/enums/toolIcons";
import { PagerChrome, useHitlBundle } from "@/features/chat-messages/hitl";
import { HitlApprovalCard, usePendingInterrupt } from "@/features/chat-messages/hitl";
import { cn } from "@/lib/utils";
import { groupItems } from "./grouping";
import { resolveItemTitle } from "./subagent-rename";
@ -12,10 +12,9 @@ import { TimelineGroupRow } from "./timeline-group-row";
import type { ItemStatus, TimelineItem } from "./types";
/**
* Override coarse status when the thread isn't running anymore: a
* stale "running" must read as "completed" so the chrome stops
* pulsing. Mirrors the legacy ``getEffectiveStatus`` from
* ``thinking-steps.tsx``.
* Force a stale "running" to read as "completed" once the thread
* stops, so the chrome doesn't keep pulsing forever after a stream
* is aborted or disconnected.
*/
function effectiveStatus(status: ItemStatus, isThreadRunning: boolean): ItemStatus {
if (status === "running" && !isThreadRunning) return "completed";
@ -23,54 +22,23 @@ function effectiveStatus(status: ItemStatus, isThreadRunning: boolean): ItemStat
}
/**
* True when a tool-call's result is an HITL interrupt the user has
* NOT decided on yet. The backend marks the step as ``completed``
* (the tool DID complete — it returned an interrupt as its result),
* which would normally collapse the timeline. This predicate lets the
* chrome treat "waiting on user" as still-in-progress.
*
* Decided interrupts (``__decided__`` set to "approve"/"reject"/
* "edit") count as completed for chrome purposes — the resume stream
* will take it from there.
*/
function isPendingInterrupt(result: unknown): boolean {
if (typeof result !== "object" || result === null) return false;
const r = result as { __interrupt__?: unknown; __decided__?: unknown };
return r.__interrupt__ === true && r.__decided__ === undefined;
}
/**
* The chain-of-thought timeline. The "process" surface in the
* `body | timeline` split — owns chrome (collapsible header, tree
* dots/lines, indent, group iteration) and dispatches to per-kind
* items for the actual content.
*
* Rendering responsibilities (kept here, not on items):
* - Outer max-width container.
* - Collapsible header with state-aware label ("Reviewed" /
* "Processing" / current step title) and shimmer.
* - Open/close state derived from ``isThreadRunning`` + completion.
* - Status dot + vertical connector line per group (delegates the
* inner row to ``TimelineGroupRow``).
* - Mounting ``PagerChrome`` once at the bottom when the HITL bundle
* is active (multi-approval coordination — see
* ``hitl/bundle/bundle-context.tsx``).
*
* Pure consumption of ``TimelineItem[]`` — does NOT call
* ``buildTimeline`` itself. The data-renderer adapter does that and
* passes the items in.
* The "process" surface in the body | timeline split. Pure consumer
* of ``TimelineItem[]`` — owns the collapsible chrome and tree
* indent only. Pending HITL interrupts mount ``HitlApprovalCard`` at
* the bottom; the card owns its own decision/pager state.
*/
export const Timeline: FC<{
items: readonly TimelineItem[];
isThreadRunning?: boolean;
}> = ({ items, isThreadRunning = true }) => {
const bundle = useHitlBundle();
const pendingValue = usePendingInterrupt();
const pendingInterrupt = pendingValue?.pendingInterrupt ?? null;
const onSubmit = pendingValue?.onSubmit;
const hasPending = pendingInterrupt !== null;
// Apply the runtime ``isThreadRunning`` override to every item once,
// up-front, so downstream code (grouping, group rows, item headers,
// status dot, all children) sees the corrected coarse status without
// having to thread a callback through. ``buildTimeline`` stays pure;
// the override is purely a render-time concern that lives here.
// Apply the override here so downstream (grouping, headers, dots)
// sees the corrected status without threading a callback. Keeps
// ``buildTimeline`` pure.
const effectiveItems = useMemo<TimelineItem[]>(
() =>
items.map((it) => ({
@ -89,29 +57,20 @@ export const Timeline: FC<{
[inProgressItem]
);
// Detect a tool-call that's parked on an HITL interrupt the user hasn't
// decided yet. Treated as "still in progress" by the chrome so the
// timeline doesn't auto-collapse on the user mid-decision (the LangGraph
// thread paused, but the agent's work is conceptually unfinished).
const pendingInterruptItem = useMemo(
() => effectiveItems.find((it) => it.kind === "tool-call" && isPendingInterrupt(it.result)),
[effectiveItems]
);
const pendingInterruptTitle = useMemo(
() =>
pendingInterruptItem ? resolveItemTitle(pendingInterruptItem, getToolDisplayName) : undefined,
[pendingInterruptItem]
);
const allCompleted = useMemo(
// "Settled" includes cancelled/errored, not just completed —
// rejecting an interrupt leaves items in ``cancelled`` and the
// timeline still needs to auto-collapse.
const allSettled = useMemo(
() =>
effectiveItems.length > 0 &&
!isThreadRunning &&
!pendingInterruptItem &&
effectiveItems.every((it) => it.status === "completed"),
[effectiveItems, isThreadRunning, pendingInterruptItem]
!hasPending &&
effectiveItems.every(
(it) => it.status === "completed" || it.status === "cancelled" || it.status === "error"
),
[effectiveItems, isThreadRunning, hasPending]
);
const isProcessing = (isThreadRunning || !!pendingInterruptItem) && !allCompleted;
const isProcessing = (isThreadRunning || hasPending) && !allSettled;
const [isOpen, setIsOpen] = useState(() => isProcessing);
useEffect(() => {
@ -119,22 +78,19 @@ export const Timeline: FC<{
setIsOpen(true);
return;
}
if (allCompleted) {
if (allSettled) {
setIsOpen(false);
}
}, [allCompleted, isProcessing]);
}, [allSettled, isProcessing]);
const groups = useMemo(() => groupItems(effectiveItems), [effectiveItems]);
if (effectiveItems.length === 0) return null;
if (effectiveItems.length === 0 && !hasPending) return null;
const headerText = (() => {
if (allCompleted) return "Reviewed";
if (allSettled) return "Reviewed";
if (hasPending) return "Awaiting your decision";
if (inProgressTitle) return inProgressTitle;
// Pending HITL: prefer the tool's own name so the user knows WHICH
// approval is gating progress (e.g. "Update Notion page") rather
// than a generic "Awaiting approval" label.
if (pendingInterruptTitle) return pendingInterruptTitle;
if (isProcessing) return "Processing";
return "Reviewed";
})();
@ -168,16 +124,22 @@ export const Timeline: FC<{
>
<div className="overflow-hidden">
<div className="mt-3 pl-1">
{groups.map((group, groupIndex) => (
<TimelineGroupRow
key={group.parent.id}
group={group}
parentStatus={group.parent.status}
showParentLine={groupIndex < groups.length - 1}
/>
))}
{bundle && <PagerChrome />}
{groups.map((group, idx) => {
const showLine = idx < groups.length - 1 || hasPending;
return (
<TimelineGroupRow
key={group.parent.id}
group={group}
parentStatus={group.parent.status}
showParentLine={showLine}
/>
);
})}
{pendingInterrupt && onSubmit && (
<div className="pl-5">
<HitlApprovalCard pendingInterrupt={pendingInterrupt} onSubmit={onSubmit} />
</div>
)}
</div>
</div>
</div>

2
surfsense_web/features/chat-messages/timeline/types.ts
View file

@ -56,7 +56,7 @@ export interface ReasoningItem extends BaseItem {
export interface ToolCallItem extends BaseItem {
kind: "tool-call";
toolName: string;
/** The actual tool-call ID — used by HITL (bundle membership, ``ToolCallIdProvider``). */
/** The actual tool-call ID — passed to per-tool components (e.g. for the Revert button). */
toolCallId: string;
args: Record<string, unknown>;
argsText?: string;