feat(webui): polish agent output and app discovery
This commit is contained in:
Xubin Ren
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,163 @@
|
||||
import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { MessageCircleMore } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const MAX_QUOTED_CONTEXT_CHARS = 4_000;
|
||||
|
||||
interface SelectionActionState {
|
||||
text: string;
|
||||
left: number;
|
||||
top: number;
|
||||
above: boolean;
|
||||
}
|
||||
|
||||
interface AssistantSelectionActionProps {
|
||||
containerRef: RefObject<HTMLElement | null>;
|
||||
onQuoteSelection?: (text: string) => void;
|
||||
}
|
||||
|
||||
function selectableAncestor(node: Node | null, container: HTMLElement): HTMLElement | null {
|
||||
const element = node instanceof Element ? node : node?.parentElement;
|
||||
const selectable = element?.closest<HTMLElement>("[data-assistant-selectable='true']") ?? null;
|
||||
return selectable && container.contains(selectable) ? selectable : null;
|
||||
}
|
||||
|
||||
function selectedRangeRect(range: Range): DOMRect | null {
|
||||
const rect = range.getBoundingClientRect();
|
||||
if (rect.width > 0 || rect.height > 0) return rect;
|
||||
return range.getClientRects()[0] ?? null;
|
||||
}
|
||||
|
||||
function normalizedSelectionText(selection: Selection): string {
|
||||
return selection
|
||||
.toString()
|
||||
.replace(/\u00a0/g, " ")
|
||||
.replace(/\r\n?/g, "\n")
|
||||
.trim()
|
||||
.slice(0, MAX_QUOTED_CONTEXT_CHARS);
|
||||
}
|
||||
|
||||
export function AssistantSelectionAction({
|
||||
containerRef,
|
||||
onQuoteSelection,
|
||||
}: AssistantSelectionActionProps) {
|
||||
const { t } = useTranslation();
|
||||
const [action, setAction] = useState<SelectionActionState | null>(null);
|
||||
const frameRef = useRef<number | null>(null);
|
||||
const actionRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const element = actionRef.current;
|
||||
if (!action || !element) return;
|
||||
const viewport = window.visualViewport;
|
||||
const viewportLeft = viewport?.offsetLeft ?? 0;
|
||||
const viewportTop = viewport?.offsetTop ?? 0;
|
||||
const viewportRight = viewportLeft + (viewport?.width ?? window.innerWidth);
|
||||
const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
|
||||
const rect = element.getBoundingClientRect();
|
||||
const padding = 12;
|
||||
const shiftX = rect.left < viewportLeft + padding
|
||||
? viewportLeft + padding - rect.left
|
||||
: rect.right > viewportRight - padding
|
||||
? viewportRight - padding - rect.right
|
||||
: 0;
|
||||
const shiftY = rect.top < viewportTop + padding
|
||||
? viewportTop + padding - rect.top
|
||||
: rect.bottom > viewportBottom - padding
|
||||
? viewportBottom - padding - rect.bottom
|
||||
: 0;
|
||||
element.style.translate = `${shiftX}px ${shiftY}px`;
|
||||
}, [action]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!onQuoteSelection) return;
|
||||
|
||||
const updateFromSelection = () => {
|
||||
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
|
||||
frameRef.current = requestAnimationFrame(() => {
|
||||
frameRef.current = null;
|
||||
const container = containerRef.current;
|
||||
const selection = window.getSelection();
|
||||
if (!container || !selection || selection.isCollapsed || selection.rangeCount === 0) {
|
||||
setAction(null);
|
||||
return;
|
||||
}
|
||||
const range = selection.getRangeAt(0);
|
||||
const start = selectableAncestor(range.startContainer, container);
|
||||
const end = selectableAncestor(range.endContainer, container);
|
||||
const text = normalizedSelectionText(selection);
|
||||
const rect = selectedRangeRect(range);
|
||||
if (!start || start !== end || !text || !rect) {
|
||||
setAction(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const viewport = window.visualViewport;
|
||||
const viewportTop = viewport?.offsetTop ?? 0;
|
||||
const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
|
||||
const above = rect.bottom + 52 > viewportBottom;
|
||||
setAction({
|
||||
text,
|
||||
left: rect.left + rect.width / 2,
|
||||
top: above ? rect.top - 8 : rect.bottom + 8,
|
||||
above,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const dismiss = () => setAction(null);
|
||||
const onPointerDown = (event: PointerEvent) => {
|
||||
const target = event.target;
|
||||
if (target instanceof Element && target.closest("[data-selection-follow-up='true']")) return;
|
||||
dismiss();
|
||||
};
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") dismiss();
|
||||
};
|
||||
|
||||
document.addEventListener("selectionchange", updateFromSelection);
|
||||
document.addEventListener("pointerdown", onPointerDown, true);
|
||||
document.addEventListener("scroll", dismiss, true);
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
window.addEventListener("resize", dismiss);
|
||||
window.visualViewport?.addEventListener("resize", dismiss);
|
||||
window.visualViewport?.addEventListener("scroll", dismiss);
|
||||
return () => {
|
||||
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
|
||||
document.removeEventListener("selectionchange", updateFromSelection);
|
||||
document.removeEventListener("pointerdown", onPointerDown, true);
|
||||
document.removeEventListener("scroll", dismiss, true);
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
window.removeEventListener("resize", dismiss);
|
||||
window.visualViewport?.removeEventListener("resize", dismiss);
|
||||
window.visualViewport?.removeEventListener("scroll", dismiss);
|
||||
};
|
||||
}, [containerRef, onQuoteSelection]);
|
||||
|
||||
if (!action || typeof document === "undefined") return null;
|
||||
|
||||
return createPortal(
|
||||
<button
|
||||
ref={actionRef}
|
||||
type="button"
|
||||
data-selection-follow-up="true"
|
||||
className="fixed z-[80] inline-flex h-9 max-w-[calc(100vw-24px)] items-center gap-1.5 rounded-full border border-border/80 bg-popover px-3 text-[13px] font-medium text-popover-foreground shadow-lg shadow-black/10 transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:shadow-black/35"
|
||||
style={{
|
||||
left: action.left,
|
||||
top: action.top,
|
||||
transform: action.above ? "translate(-50%, -100%)" : "translateX(-50%)",
|
||||
}}
|
||||
onPointerDown={(event) => event.preventDefault()}
|
||||
onClick={() => {
|
||||
onQuoteSelection?.(action.text);
|
||||
window.getSelection()?.removeAllRanges();
|
||||
setAction(null);
|
||||
}}
|
||||
>
|
||||
<MessageCircleMore className="h-3.5 w-3.5" aria-hidden />
|
||||
<span className="truncate">{t("message.askAboutSelection")}</span>
|
||||
</button>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
@@ -49,6 +49,7 @@ export function PromptRail({
|
||||
scrollRef,
|
||||
}: PromptRailProps) {
|
||||
const railRef = useRef<HTMLDivElement>(null);
|
||||
const measuredPromptsRef = useRef<MeasuredPrompt[]>([]);
|
||||
const promptAnchors = useMemo(() => userPromptAnchors(messages), [messages]);
|
||||
const [markers, setMarkers] = useState<PromptMarker[]>([]);
|
||||
const [activePromptId, setActivePromptId] = useState<string | null>(null);
|
||||
@@ -59,6 +60,7 @@ export function PromptRail({
|
||||
const nextRailHeight = railRef.current?.clientHeight ?? 0;
|
||||
|
||||
if (!scrollEl || promptAnchors.length < MIN_PROMPTS_FOR_RAIL) {
|
||||
measuredPromptsRef.current = [];
|
||||
setMarkers([]);
|
||||
setActivePromptId(null);
|
||||
return;
|
||||
@@ -66,17 +68,26 @@ export function PromptRail({
|
||||
|
||||
const scrollRange = scrollEl.scrollHeight - scrollEl.clientHeight;
|
||||
if (scrollRange < RAIL_MIN_SCROLL_RANGE_PX) {
|
||||
measuredPromptsRef.current = [];
|
||||
setMarkers([]);
|
||||
setActivePromptId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const measured = measurePrompts(scrollEl, promptAnchors, scrollRange);
|
||||
measuredPromptsRef.current = measured;
|
||||
const grouped = groupPromptMarkers(measured, nextRailHeight);
|
||||
setMarkers(distributeMarkerPositions(grouped, nextRailHeight));
|
||||
setActivePromptId(activePromptForScroll(measured, scrollEl.scrollTop));
|
||||
}, [promptAnchors, scrollRef]);
|
||||
|
||||
const updateActivePrompt = useCallback(() => {
|
||||
const scrollEl = scrollRef.current;
|
||||
if (!scrollEl) return;
|
||||
const next = activePromptForScroll(measuredPromptsRef.current, scrollEl.scrollTop);
|
||||
setActivePromptId((current) => current === next ? current : next);
|
||||
}, [scrollRef]);
|
||||
|
||||
useEffect(() => {
|
||||
let frame = 0;
|
||||
let remainingFrames = MEASURE_RETRY_FRAMES;
|
||||
@@ -95,20 +106,26 @@ export function PromptRail({
|
||||
const scrollEl = scrollRef.current;
|
||||
if (!scrollEl) return undefined;
|
||||
|
||||
let frame = 0;
|
||||
const schedule = () => {
|
||||
window.cancelAnimationFrame(frame);
|
||||
frame = window.requestAnimationFrame(updateMarkers);
|
||||
let scrollFrame = 0;
|
||||
let resizeFrame = 0;
|
||||
const scheduleActivePrompt = () => {
|
||||
window.cancelAnimationFrame(scrollFrame);
|
||||
scrollFrame = window.requestAnimationFrame(updateActivePrompt);
|
||||
};
|
||||
const scheduleMeasurement = () => {
|
||||
window.cancelAnimationFrame(resizeFrame);
|
||||
resizeFrame = window.requestAnimationFrame(updateMarkers);
|
||||
};
|
||||
|
||||
scrollEl.addEventListener("scroll", schedule, { passive: true });
|
||||
window.addEventListener("resize", schedule);
|
||||
scrollEl.addEventListener("scroll", scheduleActivePrompt, { passive: true });
|
||||
window.addEventListener("resize", scheduleMeasurement);
|
||||
return () => {
|
||||
window.cancelAnimationFrame(frame);
|
||||
scrollEl.removeEventListener("scroll", schedule);
|
||||
window.removeEventListener("resize", schedule);
|
||||
window.cancelAnimationFrame(scrollFrame);
|
||||
window.cancelAnimationFrame(resizeFrame);
|
||||
scrollEl.removeEventListener("scroll", scheduleActivePrompt);
|
||||
window.removeEventListener("resize", scheduleMeasurement);
|
||||
};
|
||||
}, [scrollRef, updateMarkers]);
|
||||
}, [scrollRef, updateActivePrompt, updateMarkers]);
|
||||
|
||||
useEffect(() => {
|
||||
const scrollEl = scrollRef.current;
|
||||
@@ -309,16 +326,20 @@ function activePromptForScroll(
|
||||
scrollTop: number,
|
||||
): string | null {
|
||||
if (measured.length === 0) return null;
|
||||
let active = measured[0];
|
||||
const cursor = scrollTop + 96;
|
||||
for (const prompt of measured) {
|
||||
if (prompt.top <= cursor) {
|
||||
active = prompt;
|
||||
continue;
|
||||
let lower = 0;
|
||||
let upper = measured.length - 1;
|
||||
let activeIndex = 0;
|
||||
while (lower <= upper) {
|
||||
const middle = Math.floor((lower + upper) / 2);
|
||||
if (measured[middle].top <= cursor) {
|
||||
activeIndex = middle;
|
||||
lower = middle + 1;
|
||||
} else {
|
||||
upper = middle - 1;
|
||||
}
|
||||
break;
|
||||
}
|
||||
return active.id;
|
||||
return measured[activeIndex].id;
|
||||
}
|
||||
|
||||
function groupedPromptLabel(count: number, latestLabel: string): string {
|
||||
|
||||
@@ -35,6 +35,7 @@ import {
|
||||
Loader2,
|
||||
Mic,
|
||||
Plus,
|
||||
Quote,
|
||||
RotateCw,
|
||||
Shield,
|
||||
Sparkles,
|
||||
@@ -71,6 +72,7 @@ import {
|
||||
import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
|
||||
import { useLogoFallback } from "@/hooks/useLogoFallback";
|
||||
import type { SendAttachment, SendOptions } from "@/hooks/useNanobotStream";
|
||||
import { usePageVisibility } from "@/hooks/usePageVisibility";
|
||||
import { useVoiceRecorder, type VoiceRecorderErrorKey } from "@/hooks/useVoiceRecorder";
|
||||
import type {
|
||||
CliAppInfo,
|
||||
@@ -189,6 +191,9 @@ interface ThreadComposerProps {
|
||||
pendingQueueKey?: string | null;
|
||||
transcriptionProvider?: string | null;
|
||||
ingressLimits?: WebUIIngressLimits | null;
|
||||
quotedContext?: string | null;
|
||||
focusRequest?: number;
|
||||
onQuotedContextChange?: (text: string | null) => void;
|
||||
}
|
||||
|
||||
const COMMAND_ICONS: Record<string, LucideIcon> = {
|
||||
@@ -265,6 +270,7 @@ interface QueuedPrompt {
|
||||
id: string;
|
||||
text: string;
|
||||
images?: QueuedPromptImage[];
|
||||
quotedContext?: string;
|
||||
}
|
||||
|
||||
interface QueuedPromptImage {
|
||||
@@ -355,11 +361,19 @@ function normalizeQueuedPrompt(item: unknown, index: number): QueuedPrompt | nul
|
||||
}];
|
||||
}).slice(0, MAX_ATTACHMENTS_PER_MESSAGE)
|
||||
: [];
|
||||
const quotedContext = typeof record.quotedContext === "string"
|
||||
? record.quotedContext.trim().slice(0, QUEUED_PROMPT_MAX_CHARS)
|
||||
: "";
|
||||
if (!text && images.length === 0) return null;
|
||||
const id = typeof record.id === "string" && record.id.trim()
|
||||
? record.id
|
||||
: `queued-prompt-restored-${index}`;
|
||||
return { id, text, ...(images.length > 0 ? { images } : {}) };
|
||||
return {
|
||||
id,
|
||||
text,
|
||||
...(images.length > 0 ? { images } : {}),
|
||||
...(quotedContext ? { quotedContext } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
function readQueuedPrompts(storageKey: string): QueuedPrompt[] {
|
||||
@@ -391,6 +405,7 @@ function storeQueuedPrompts(storageKey: string, prompts: QueuedPrompt[]): void {
|
||||
id: prompt.id,
|
||||
text: prompt.text.slice(0, QUEUED_PROMPT_MAX_CHARS),
|
||||
...(prompt.images?.length ? { images: prompt.images.slice(0, MAX_ATTACHMENTS_PER_MESSAGE) } : {}),
|
||||
...(prompt.quotedContext ? { quotedContext: prompt.quotedContext } : {}),
|
||||
})),
|
||||
),
|
||||
);
|
||||
@@ -555,6 +570,7 @@ function RunElapsedStrip({
|
||||
goalState?: GoalStateWsPayload;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const pageVisible = usePageVisibility();
|
||||
const [goalPanelOpen, setGoalPanelOpen] = useState(false);
|
||||
const showTimer = startedAt != null;
|
||||
const stripLabel = goalStateStripPreview(goalState, t);
|
||||
@@ -594,10 +610,11 @@ function RunElapsedStrip({
|
||||
}, [active, renderStrip]);
|
||||
|
||||
useEffect(() => {
|
||||
if (startedAt == null) return;
|
||||
if (startedAt == null || !pageVisible) return;
|
||||
setTick((n) => n + 1);
|
||||
const id = window.setInterval(() => setTick((n) => n + 1), 1000);
|
||||
return () => window.clearInterval(id);
|
||||
}, [startedAt]);
|
||||
}, [pageVisible, startedAt]);
|
||||
|
||||
const display = active
|
||||
? { startedAt, goalState, stripLabel }
|
||||
@@ -629,7 +646,7 @@ function RunElapsedStrip({
|
||||
|
||||
relayout();
|
||||
|
||||
preloadMarkdownText();
|
||||
void preloadMarkdownText();
|
||||
const ro =
|
||||
typeof ResizeObserver !== "undefined"
|
||||
? new ResizeObserver(() => relayout())
|
||||
@@ -817,6 +834,9 @@ export function ThreadComposer({
|
||||
pendingQueueKey = null,
|
||||
transcriptionProvider = null,
|
||||
ingressLimits = null,
|
||||
quotedContext = null,
|
||||
focusRequest = 0,
|
||||
onQuotedContextChange,
|
||||
}: ThreadComposerProps) {
|
||||
const { t } = useTranslation();
|
||||
const [value, setValue] = useState("");
|
||||
@@ -938,6 +958,14 @@ export function ThreadComposer({
|
||||
return () => cancelAnimationFrame(id);
|
||||
}, [disabled]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!focusRequest || disabled) return;
|
||||
const id = requestAnimationFrame(() => textareaRef.current?.focus());
|
||||
return () => cancelAnimationFrame(id);
|
||||
}, [disabled, focusRequest]);
|
||||
|
||||
const normalizedQuotedContext = quotedContext?.trim().slice(0, QUEUED_PROMPT_MAX_CHARS) || null;
|
||||
|
||||
const readyImages = useMemo(
|
||||
() => images.filter((img): img is AttachedImage & { dataUrl: string } =>
|
||||
img.status === "ready" && typeof img.dataUrl === "string",
|
||||
@@ -1450,11 +1478,23 @@ export function ThreadComposer({
|
||||
id,
|
||||
text,
|
||||
...(queuedImages.length > 0 ? { images: queuedImages } : {}),
|
||||
...(normalizedQuotedContext ? { quotedContext: normalizedQuotedContext } : {}),
|
||||
},
|
||||
]);
|
||||
clear();
|
||||
clearComposerText();
|
||||
}, [canQueueGuidance, clear, clearComposerText, maxTextBytes, readyImages, textTooLargeMessage, value]);
|
||||
onQuotedContextChange?.(null);
|
||||
}, [
|
||||
canQueueGuidance,
|
||||
clear,
|
||||
clearComposerText,
|
||||
maxTextBytes,
|
||||
normalizedQuotedContext,
|
||||
onQuotedContextChange,
|
||||
readyImages,
|
||||
textTooLargeMessage,
|
||||
value,
|
||||
]);
|
||||
|
||||
const removeQueuedPrompt = useCallback((id: string) => {
|
||||
secondEnterPromptIdRef.current = null;
|
||||
@@ -1470,6 +1510,7 @@ export function ThreadComposer({
|
||||
setSlashMenuDismissed(false);
|
||||
setCliAppMenuDismissed(false);
|
||||
setCursorPosition(prompt.text.length);
|
||||
onQuotedContextChange?.(prompt.quotedContext ?? null);
|
||||
if (prompt.images?.length) {
|
||||
restoreReadyImages(prompt.images as RestoredReadyImage[]);
|
||||
} else {
|
||||
@@ -1482,7 +1523,7 @@ export function ThreadComposer({
|
||||
el.focus();
|
||||
el.setSelectionRange(prompt.text.length, prompt.text.length);
|
||||
});
|
||||
}, [clear, resizeTextarea, restoreReadyImages]);
|
||||
}, [clear, onQuotedContextChange, resizeTextarea, restoreReadyImages]);
|
||||
|
||||
const moveQueuedPrompt = useCallback((dragId: string, targetId: string) => {
|
||||
if (dragId === targetId) return;
|
||||
@@ -1505,12 +1546,17 @@ export function ThreadComposer({
|
||||
const queuedImages = queuedImagesToSendImages(prompt.images);
|
||||
setQueuedPrompts((items) => items.filter((item) => item.id !== prompt.id));
|
||||
if (text || queuedImages?.length) {
|
||||
if (queuedImages?.length) onSend(text, queuedImages);
|
||||
else onSend(text);
|
||||
const options: SendOptions | undefined = prompt.quotedContext || isStreaming
|
||||
? {
|
||||
...(prompt.quotedContext ? { quotedContext: prompt.quotedContext } : {}),
|
||||
...(isStreaming ? { continueActiveTurn: true } : {}),
|
||||
}
|
||||
: undefined;
|
||||
onSend(text, queuedImages, options);
|
||||
}
|
||||
requestAnimationFrame(() => textareaRef.current?.focus());
|
||||
},
|
||||
[onSend],
|
||||
[isStreaming, onSend],
|
||||
);
|
||||
|
||||
const sendNextQueuedPrompt = useCallback(() => {
|
||||
@@ -1522,7 +1568,12 @@ export function ThreadComposer({
|
||||
}
|
||||
setQueuedPrompts((items) => items.filter((item) => item.id !== nextPrompt.id));
|
||||
const queuedImages = queuedImagesToSendImages(nextPrompt.images);
|
||||
if (queuedImages?.length) onSend(nextPrompt.text.trim(), queuedImages);
|
||||
const options = nextPrompt.quotedContext
|
||||
? { quotedContext: nextPrompt.quotedContext }
|
||||
: undefined;
|
||||
if (queuedImages?.length && options) onSend(nextPrompt.text.trim(), queuedImages, options);
|
||||
else if (queuedImages?.length) onSend(nextPrompt.text.trim(), queuedImages);
|
||||
else if (options) onSend(nextPrompt.text.trim(), undefined, options);
|
||||
else onSend(nextPrompt.text.trim());
|
||||
requestAnimationFrame(() => textareaRef.current?.focus());
|
||||
}, [onSend, queuedPrompts]);
|
||||
@@ -1576,10 +1627,11 @@ export function ThreadComposer({
|
||||
const attachedCliApps = activeCliMentionApps.map(cliAppMentionPayload);
|
||||
const attachedMcpPresets = activeMcpPresetMentions.map(mcpPresetMentionPayload);
|
||||
const options: SendOptions | undefined =
|
||||
attachedCliApps.length > 0 || attachedMcpPresets.length > 0
|
||||
attachedCliApps.length > 0 || attachedMcpPresets.length > 0 || normalizedQuotedContext
|
||||
? {
|
||||
...(attachedCliApps.length > 0 ? { cliApps: attachedCliApps } : {}),
|
||||
...(attachedMcpPresets.length > 0 ? { mcpPresets: attachedMcpPresets } : {}),
|
||||
...(normalizedQuotedContext ? { quotedContext: normalizedQuotedContext } : {}),
|
||||
}
|
||||
: undefined;
|
||||
const hasPlainTextCommandPayload =
|
||||
@@ -1598,6 +1650,7 @@ export function ThreadComposer({
|
||||
setQueuedPrompts([]);
|
||||
clear();
|
||||
clearComposerText();
|
||||
onQuotedContextChange?.(null);
|
||||
return;
|
||||
}
|
||||
const isSlashSideChannel = isSideChannelLifecycle(slashLifecycle);
|
||||
@@ -1619,6 +1672,7 @@ export function ThreadComposer({
|
||||
// preview here without affecting the rendered message.
|
||||
clear();
|
||||
clearComposerText();
|
||||
onQuotedContextChange?.(null);
|
||||
}, [
|
||||
activeCliMentionApps,
|
||||
activeMcpPresetMentions,
|
||||
@@ -1632,6 +1686,8 @@ export function ThreadComposer({
|
||||
onModelBadgeClick,
|
||||
onSend,
|
||||
onStop,
|
||||
onQuotedContextChange,
|
||||
normalizedQuotedContext,
|
||||
readyImages,
|
||||
slashCommands,
|
||||
textTooLargeMessage,
|
||||
@@ -1884,6 +1940,28 @@ export function ThreadComposer({
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{normalizedQuotedContext ? (
|
||||
<div
|
||||
className="mx-3 mt-3 flex min-w-0 items-start gap-2 border-l-2 border-muted-foreground/25 pl-3 pr-1 text-muted-foreground"
|
||||
aria-label={t("thread.composer.quotedContext")}
|
||||
>
|
||||
<Quote className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
|
||||
<p className="line-clamp-2 min-w-0 flex-1 text-[13px]/[1.45]">
|
||||
{normalizedQuotedContext}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="touch-target -mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-muted/70 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
aria-label={t("thread.composer.removeQuotedContext")}
|
||||
onClick={() => {
|
||||
onQuotedContextChange?.(null);
|
||||
requestAnimationFrame(() => textareaRef.current?.focus());
|
||||
}}
|
||||
>
|
||||
<X className="h-3.5 w-3.5" aria-hidden />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<RunElapsedStrip startedAt={runStartedAt} goalState={goalState} />
|
||||
<div className="relative">
|
||||
{hasMentionDecorations ? (
|
||||
@@ -1962,7 +2040,7 @@ export function ThreadComposer({
|
||||
aria-label={t("thread.composer.attachImage")}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={cn(
|
||||
"rounded-full text-muted-foreground hover:text-foreground",
|
||||
"touch-target rounded-full text-muted-foreground hover:text-foreground",
|
||||
isHero
|
||||
? "h-8 w-8 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card"
|
||||
: "h-9 w-9 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card",
|
||||
@@ -2016,7 +2094,7 @@ export function ThreadComposer({
|
||||
onPointerCancel={voiceRecorder.endPress}
|
||||
onClick={voiceRecorder.handleClick}
|
||||
className={cn(
|
||||
"rounded-full border border-transparent text-muted-foreground hover:bg-muted/65 hover:text-foreground",
|
||||
"touch-target rounded-full border border-transparent text-muted-foreground hover:bg-muted/65 hover:text-foreground",
|
||||
isHero ? "h-8 w-8" : "h-9 w-9",
|
||||
voiceRecorder.isRecording &&
|
||||
"bg-red-500 text-white shadow-[0_8px_20px_rgba(239,68,68,0.22)] hover:bg-red-500 hover:text-white",
|
||||
@@ -2059,7 +2137,7 @@ export function ThreadComposer({
|
||||
}
|
||||
onClick={showStopButton ? handleStop : modelNeedsSetup ? onModelBadgeClick : undefined}
|
||||
className={cn(
|
||||
"rounded-full transition-transform",
|
||||
"touch-target rounded-full transition-transform",
|
||||
showStopButton
|
||||
? "border border-border/70 bg-card text-foreground/85 shadow-[0_3px_10px_rgba(15,23,42,0.08)] hover:bg-muted/65 hover:text-foreground disabled:text-muted-foreground/50"
|
||||
: isHero
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { Fragment, useMemo } from "react";
|
||||
import { memo, useCallback, useMemo, useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { MessageBubble } from "@/components/MessageBubble";
|
||||
import { AgentActivityCluster } from "@/components/thread/AgentActivityCluster";
|
||||
import { AssistantSelectionAction } from "@/components/thread/AssistantSelectionAction";
|
||||
import { normalizeActivityTimeline, type TurnUnit } from "@/lib/activity-timeline";
|
||||
import type { CliAppInfo, McpPresetInfo, SlashCommand, UIMessage } from "@/lib/types";
|
||||
|
||||
@@ -16,6 +17,7 @@ interface ThreadMessagesProps {
|
||||
forkBoundaryMessageCount?: number | null;
|
||||
onOpenFilePreview?: (path: string) => void;
|
||||
onForkFromMessage?: (beforeUserIndex: number) => void;
|
||||
onQuoteSelection?: (text: string) => void;
|
||||
}
|
||||
|
||||
export type DisplayUnit = TurnUnit;
|
||||
@@ -56,8 +58,10 @@ export function ThreadMessages({
|
||||
forkBoundaryMessageCount = null,
|
||||
onOpenFilePreview,
|
||||
onForkFromMessage,
|
||||
onQuoteSelection,
|
||||
}: ThreadMessagesProps) {
|
||||
const { t } = useTranslation();
|
||||
const messageListRef = useRef<HTMLDivElement>(null);
|
||||
const units = useMemo(() => buildDisplayUnits(messages, isStreaming), [isStreaming, messages]);
|
||||
const forkBoundaryAfterUnitIndex = useMemo(
|
||||
() => unitIndexAfterMessageCount(units, forkBoundaryMessageCount),
|
||||
@@ -72,7 +76,11 @@ export function ThreadMessages({
|
||||
let nextUserIndex = hiddenUserMessageCount;
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col">
|
||||
<div ref={messageListRef} className="flex w-full flex-col">
|
||||
<AssistantSelectionAction
|
||||
containerRef={messageListRef}
|
||||
onQuoteSelection={onQuoteSelection}
|
||||
/>
|
||||
{units.map((unit, index) => {
|
||||
const prev = units[index - 1];
|
||||
const marginTop =
|
||||
@@ -96,44 +104,143 @@ export function ThreadMessages({
|
||||
if (unit.type === "message" && unit.message.role === "user") nextUserIndex += 1;
|
||||
|
||||
return (
|
||||
<Fragment key={unitKeys[index]}>
|
||||
<div className={marginTop} data-user-prompt-id={userPromptId}>
|
||||
{unit.type === "activity" ? (
|
||||
<AgentActivityCluster
|
||||
messages={unit.messages}
|
||||
isTurnStreaming={liveActivityClusterIndices.has(index)}
|
||||
hasBodyBelow={hasBodyBelow}
|
||||
turnLatencyMs={unit.turnLatencyMs}
|
||||
startedAtMs={unit.startedAtMs}
|
||||
cliApps={cliApps}
|
||||
mcpPresets={mcpPresets}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
/>
|
||||
) : (
|
||||
<MessageBubble
|
||||
message={unit.message}
|
||||
cliApps={cliApps}
|
||||
mcpPresets={mcpPresets}
|
||||
slashCommands={slashCommands}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
onForkFromHere={
|
||||
onForkFromMessage && forkIndex !== undefined
|
||||
? () => onForkFromMessage(forkIndex)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{index === forkBoundaryAfterUnitIndex ? (
|
||||
<ForkBoundaryDivider label={t("thread.forkedFromHistory")} />
|
||||
) : null}
|
||||
</Fragment>
|
||||
<ThreadDisplayUnit
|
||||
key={unitKeys[index]}
|
||||
unit={unit}
|
||||
marginTop={marginTop}
|
||||
userPromptId={userPromptId}
|
||||
hasBodyBelow={hasBodyBelow}
|
||||
isTurnStreaming={liveActivityClusterIndices.has(index)}
|
||||
forkIndex={forkIndex}
|
||||
showForkBoundary={index === forkBoundaryAfterUnitIndex}
|
||||
forkBoundaryLabel={t("thread.forkedFromHistory")}
|
||||
cliApps={cliApps}
|
||||
mcpPresets={mcpPresets}
|
||||
slashCommands={slashCommands}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
onForkFromMessage={onForkFromMessage}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ThreadDisplayUnitProps {
|
||||
unit: DisplayUnit;
|
||||
marginTop: string;
|
||||
userPromptId?: string;
|
||||
hasBodyBelow: boolean;
|
||||
isTurnStreaming: boolean;
|
||||
forkIndex?: number;
|
||||
showForkBoundary: boolean;
|
||||
forkBoundaryLabel: string;
|
||||
cliApps: CliAppInfo[];
|
||||
mcpPresets: McpPresetInfo[];
|
||||
slashCommands: SlashCommand[];
|
||||
onOpenFilePreview?: (path: string) => void;
|
||||
onForkFromMessage?: (beforeUserIndex: number) => void;
|
||||
}
|
||||
|
||||
const ThreadDisplayUnit = memo(function ThreadDisplayUnit({
|
||||
unit,
|
||||
marginTop,
|
||||
userPromptId,
|
||||
hasBodyBelow,
|
||||
isTurnStreaming,
|
||||
forkIndex,
|
||||
showForkBoundary,
|
||||
forkBoundaryLabel,
|
||||
cliApps,
|
||||
mcpPresets,
|
||||
slashCommands,
|
||||
onOpenFilePreview,
|
||||
onForkFromMessage,
|
||||
}: ThreadDisplayUnitProps) {
|
||||
const onForkFromHere = useCallback(() => {
|
||||
if (forkIndex !== undefined) onForkFromMessage?.(forkIndex);
|
||||
}, [forkIndex, onForkFromMessage]);
|
||||
const deferOffscreenRender = unit.type === "activity"
|
||||
? !isTurnStreaming
|
||||
: unit.message.role === "assistant" && !unit.message.isStreaming;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`${marginTop}${deferOffscreenRender ? " thread-render-unit" : ""}`}
|
||||
data-user-prompt-id={userPromptId}
|
||||
>
|
||||
{unit.type === "activity" ? (
|
||||
<AgentActivityCluster
|
||||
messages={unit.messages}
|
||||
isTurnStreaming={isTurnStreaming}
|
||||
hasBodyBelow={hasBodyBelow}
|
||||
turnLatencyMs={unit.turnLatencyMs}
|
||||
startedAtMs={unit.startedAtMs}
|
||||
cliApps={cliApps}
|
||||
mcpPresets={mcpPresets}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
/>
|
||||
) : (
|
||||
<MessageBubble
|
||||
message={unit.message}
|
||||
cliApps={cliApps}
|
||||
mcpPresets={mcpPresets}
|
||||
slashCommands={slashCommands}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
onForkFromHere={forkIndex !== undefined ? onForkFromHere : undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{showForkBoundary ? <ForkBoundaryDivider label={forkBoundaryLabel} /> : null}
|
||||
</>
|
||||
);
|
||||
}, threadDisplayUnitPropsEqual);
|
||||
|
||||
function threadDisplayUnitPropsEqual(
|
||||
previous: ThreadDisplayUnitProps,
|
||||
next: ThreadDisplayUnitProps,
|
||||
): boolean {
|
||||
return (
|
||||
displayUnitsEqual(previous.unit, next.unit)
|
||||
&& previous.marginTop === next.marginTop
|
||||
&& previous.userPromptId === next.userPromptId
|
||||
&& previous.hasBodyBelow === next.hasBodyBelow
|
||||
&& previous.isTurnStreaming === next.isTurnStreaming
|
||||
&& previous.forkIndex === next.forkIndex
|
||||
&& previous.showForkBoundary === next.showForkBoundary
|
||||
&& previous.forkBoundaryLabel === next.forkBoundaryLabel
|
||||
&& previous.cliApps === next.cliApps
|
||||
&& previous.mcpPresets === next.mcpPresets
|
||||
&& previous.slashCommands === next.slashCommands
|
||||
&& previous.onOpenFilePreview === next.onOpenFilePreview
|
||||
&& previous.onForkFromMessage === next.onForkFromMessage
|
||||
);
|
||||
}
|
||||
|
||||
function displayUnitsEqual(previous: DisplayUnit, next: DisplayUnit): boolean {
|
||||
if (previous.type !== next.type) return false;
|
||||
if (previous.type === "message" && next.type === "message") {
|
||||
return shallowMessageEqual(previous.message, next.message);
|
||||
}
|
||||
if (previous.type !== "activity" || next.type !== "activity") return false;
|
||||
return (
|
||||
previous.turnLatencyMs === next.turnLatencyMs
|
||||
&& previous.startedAtMs === next.startedAtMs
|
||||
&& previous.messages.length === next.messages.length
|
||||
&& previous.messages.every((message, index) =>
|
||||
shallowMessageEqual(message, next.messages[index]))
|
||||
);
|
||||
}
|
||||
|
||||
function shallowMessageEqual(previous: UIMessage, next: UIMessage): boolean {
|
||||
if (previous === next) return true;
|
||||
const previousKeys = Object.keys(previous) as Array<keyof UIMessage>;
|
||||
const nextKeys = Object.keys(next) as Array<keyof UIMessage>;
|
||||
return previousKeys.length === nextKeys.length
|
||||
&& previousKeys.every((key) => previous[key] === next[key]);
|
||||
}
|
||||
|
||||
function unitIndexAfterMessageCount(
|
||||
units: DisplayUnit[],
|
||||
messageCount: number | null | undefined,
|
||||
|
||||
@@ -344,6 +344,8 @@ export function ThreadShell({
|
||||
const [filePreviewPath, setFilePreviewPath] = useState<string | null>(null);
|
||||
const [filePreviewClosing, setFilePreviewClosing] = useState(false);
|
||||
const [filePreviewWidth, setFilePreviewWidth] = useState(FILE_PREVIEW_DEFAULT_WIDTH);
|
||||
const [quotedContext, setQuotedContext] = useState<string | null>(null);
|
||||
const [composerFocusSignal, setComposerFocusSignal] = useState(0);
|
||||
const shellRef = useRef<HTMLElement | null>(null);
|
||||
const filePreviewWidthRef = useRef(FILE_PREVIEW_DEFAULT_WIDTH);
|
||||
const filePreviewCloseTimerRef = useRef<number | null>(null);
|
||||
@@ -395,8 +397,14 @@ export function ThreadShell({
|
||||
}
|
||||
setFilePreviewClosing(false);
|
||||
setFilePreviewPath(null);
|
||||
setQuotedContext(null);
|
||||
}, [historyKey]);
|
||||
|
||||
const handleQuoteSelection = useCallback((text: string) => {
|
||||
setQuotedContext(text);
|
||||
setComposerFocusSignal((value) => value + 1);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (filePreviewCloseTimerRef.current !== null) {
|
||||
@@ -806,6 +814,9 @@ export function ThreadShell({
|
||||
pendingQueueKey={chatId}
|
||||
transcriptionProvider={settingsSnapshot?.transcription?.provider}
|
||||
ingressLimits={ingressLimits}
|
||||
quotedContext={quotedContext}
|
||||
focusRequest={composerFocusSignal}
|
||||
onQuotedContextChange={setQuotedContext}
|
||||
/>
|
||||
) : (
|
||||
<ThreadComposer
|
||||
@@ -904,6 +915,7 @@ export function ThreadShell({
|
||||
onLoadOlder={loadOlder}
|
||||
onOpenFilePreview={historyKey ? handleOpenFilePreview : undefined}
|
||||
onForkFromMessage={onForkChat ? handleForkFromMessage : undefined}
|
||||
onQuoteSelection={session ? handleQuoteSelection : undefined}
|
||||
/>
|
||||
</FilePreviewAvailabilityProvider>
|
||||
</div>
|
||||
|
||||
@@ -48,6 +48,7 @@ interface ThreadViewportProps {
|
||||
onLoadOlder?: () => Promise<void> | void;
|
||||
onOpenFilePreview?: (path: string) => void;
|
||||
onForkFromMessage?: (beforeUserIndex: number) => void;
|
||||
onQuoteSelection?: (text: string) => void;
|
||||
}
|
||||
|
||||
const NEAR_BOTTOM_PX = 48;
|
||||
@@ -120,6 +121,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
onLoadOlder,
|
||||
onOpenFilePreview,
|
||||
onForkFromMessage,
|
||||
onQuoteSelection,
|
||||
}, ref) {
|
||||
const { t } = useTranslation();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
@@ -508,7 +510,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
const programmaticPromptTop = programmaticPromptScrollTopRef.current;
|
||||
const programmatic =
|
||||
programmaticPromptTop !== null && Math.abs(el.scrollTop - programmaticPromptTop) < 2;
|
||||
setAtBottom(near);
|
||||
setAtBottom((current) => current === near ? current : near);
|
||||
if (programmatic) {
|
||||
programmaticPromptScrollTopRef.current = null;
|
||||
if (near) userReadingHistoryRef.current = false;
|
||||
@@ -557,6 +559,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
forkBoundaryMessageCount={visibleForkBoundaryMessageCount}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
onForkFromMessage={onForkFromMessage}
|
||||
onQuoteSelection={onQuoteSelection}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -254,7 +254,7 @@ export function WorkspaceAccessMenu({
|
||||
variant="ghost"
|
||||
aria-label={t("thread.composer.workspace.accessAria")}
|
||||
className={cn(
|
||||
"min-w-0 max-w-[min(7rem,30vw)] whitespace-nowrap rounded-[10px] border border-transparent font-semibold shadow-none sm:max-w-[min(12.5rem,42vw)]",
|
||||
"touch-target min-w-0 max-w-[min(7rem,30vw)] whitespace-nowrap rounded-[10px] border border-transparent font-semibold shadow-none sm:max-w-[min(12.5rem,42vw)]",
|
||||
isHero ? "h-8 px-2.5 text-[12px]" : "h-9 px-3 text-[12.5px]",
|
||||
isFull
|
||||
? "bg-transparent text-orange-600 hover:bg-orange-500/8 dark:text-orange-300 dark:hover:bg-orange-400/10"
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
import { AttachmentTile } from "@/components/AttachmentTile";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ActivityEvidence } from "@/lib/activity-timeline";
|
||||
|
||||
interface ActivityEvidencePreviewProps {
|
||||
evidence: ActivityEvidence[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ActivityEvidencePreview({ evidence, className }: ActivityEvidencePreviewProps) {
|
||||
if (evidence.length === 0) return null;
|
||||
return (
|
||||
<div
|
||||
data-testid="activity-evidence-preview"
|
||||
className={cn(
|
||||
"flex max-w-full flex-wrap items-start gap-2 pt-0.5",
|
||||
"motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 motion-safe:duration-200",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{evidence.slice(0, 4).map((item) => (
|
||||
<AttachmentTile
|
||||
key={item.id}
|
||||
attachment={item.attachment}
|
||||
variant="compact"
|
||||
className={cn(
|
||||
item.attachment.kind === "image" || item.attachment.kind === "video"
|
||||
? "max-w-[min(100%,20rem)]"
|
||||
: "max-w-[14rem]",
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import type { ReactNode } from "react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ActivityGroupProps {
|
||||
title: string;
|
||||
icon?: LucideIcon;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ActivityGroup({ title, icon: Icon, children, className }: ActivityGroupProps) {
|
||||
return (
|
||||
<section
|
||||
className={cn(
|
||||
"min-w-0 py-1 motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1 motion-safe:duration-200",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="mb-1 flex min-w-0 items-center gap-1.5 pl-0.5 text-[12px] font-medium text-muted-foreground/70">
|
||||
{Icon ? <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden /> : null}
|
||||
<span className="min-w-0 truncate">{title}</span>
|
||||
</div>
|
||||
<div className="min-w-0">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -7,51 +7,45 @@ import { cn } from "@/lib/utils";
|
||||
export type ActivityStepTone = "neutral" | "active" | "success" | "error";
|
||||
|
||||
export interface ActivityStepProps {
|
||||
as?: "div" | "li";
|
||||
icon?: LucideIcon;
|
||||
marker?: ReactNode;
|
||||
label: ReactNode;
|
||||
detail?: ReactNode;
|
||||
aside?: ReactNode;
|
||||
children?: ReactNode;
|
||||
ariaLabel?: string;
|
||||
active?: boolean;
|
||||
tone?: ActivityStepTone;
|
||||
title?: string;
|
||||
className?: string;
|
||||
contentClassName?: string;
|
||||
labelClassName?: string;
|
||||
markerClassName?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
export function ActivityStep({
|
||||
as: Component = "div",
|
||||
icon: Icon,
|
||||
marker,
|
||||
label,
|
||||
detail,
|
||||
aside,
|
||||
children,
|
||||
ariaLabel,
|
||||
active = false,
|
||||
tone = active ? "active" : "neutral",
|
||||
title,
|
||||
className,
|
||||
contentClassName,
|
||||
labelClassName,
|
||||
markerClassName,
|
||||
style,
|
||||
}: ActivityStepProps) {
|
||||
return (
|
||||
<Component
|
||||
<div
|
||||
data-testid="activity-step"
|
||||
aria-label={ariaLabel}
|
||||
className={cn(
|
||||
"group/activity-step relative grid min-w-0 grid-cols-[1.125rem_minmax(0,1fr)] gap-2 py-0.5 text-[13px] leading-5",
|
||||
"relative grid min-w-0 grid-cols-[1.125rem_minmax(0,1fr)] gap-2 py-0.5 text-[13px] leading-5",
|
||||
className,
|
||||
)}
|
||||
title={title}
|
||||
style={style}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"relative flex h-5 w-[1.125rem] shrink-0 items-start justify-center pt-[3px]",
|
||||
"after:absolute after:left-1/2 after:top-[1.25rem] after:h-[calc(100%+0.375rem)] after:w-px after:-translate-x-1/2 after:bg-muted-foreground/14 group-last/activity-step:after:hidden",
|
||||
"flex h-5 w-[1.125rem] shrink-0 items-start justify-center pt-[3px]",
|
||||
)}
|
||||
aria-hidden
|
||||
>
|
||||
@@ -71,25 +65,23 @@ export function ActivityStep({
|
||||
)}
|
||||
</span>
|
||||
<div className={cn("min-w-0", contentClassName)}>
|
||||
<div className="flex min-w-0 items-baseline gap-1.5">
|
||||
<div
|
||||
data-testid="activity-line"
|
||||
title={typeof label === "string" ? label : undefined}
|
||||
className="flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
<StreamingLabelSheen
|
||||
active={active}
|
||||
className={cn(
|
||||
"min-w-0 shrink-0 font-medium",
|
||||
"min-w-0 flex-1 truncate font-medium",
|
||||
tone === "error" ? "text-destructive/78" : "text-muted-foreground/85",
|
||||
labelClassName,
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</StreamingLabelSheen>
|
||||
{detail ? (
|
||||
<span className="min-w-0 break-words text-foreground/82">
|
||||
{detail}
|
||||
</span>
|
||||
) : null}
|
||||
{aside ? <span className="ml-auto shrink-0">{aside}</span> : null}
|
||||
</div>
|
||||
{children ? <div className="mt-1 min-w-0">{children}</div> : null}
|
||||
</div>
|
||||
</Component>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,47 +1,16 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
ChevronUp,
|
||||
CircleDashed,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { FileReferenceChip } from "@/components/FileReferenceChip";
|
||||
import {
|
||||
hasRenderableFileDiff,
|
||||
parseRenderableFileDiff,
|
||||
type RenderableFileDiff,
|
||||
type RenderableFileDiffHunk,
|
||||
} from "@/lib/file-diff";
|
||||
import { codeLanguageFromPath } from "@/lib/code-language";
|
||||
import type { FileEditDisplayMode } from "@/lib/local-preferences";
|
||||
import type { UIFileDiff, UIFileEdit } from "@/lib/types";
|
||||
import type { UIFileEdit } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { ActivityStep } from "./ActivityStep";
|
||||
import { DiffPair } from "./DiffPair";
|
||||
import { DiffSyntaxHighlight } from "./DiffSyntaxHighlight";
|
||||
|
||||
const INITIAL_VISIBLE_DIFF_LINES = 160;
|
||||
const AUTO_COLLAPSE_DIFF_LINES = INITIAL_VISIBLE_DIFF_LINES;
|
||||
|
||||
type DiffFileEditDisplayMode = Exclude<FileEditDisplayMode, "summary">;
|
||||
|
||||
interface VisibleDiffHunk {
|
||||
hunk: RenderableFileDiffHunk;
|
||||
skippedBefore: number;
|
||||
}
|
||||
|
||||
interface VisibleDiff {
|
||||
hunks: VisibleDiffHunk[];
|
||||
hiddenLineCount: number;
|
||||
}
|
||||
|
||||
const EMPTY_VISIBLE_DIFF: VisibleDiff = { hunks: [], hiddenLineCount: 0 };
|
||||
|
||||
export interface FileEditSummary {
|
||||
key: string;
|
||||
@@ -55,102 +24,41 @@ export interface FileEditSummary {
|
||||
operation?: UIFileEdit["operation"];
|
||||
pending: boolean;
|
||||
error?: string;
|
||||
diff?: UIFileDiff;
|
||||
}
|
||||
|
||||
export function FileEditGroup({
|
||||
edits,
|
||||
displayMode,
|
||||
onOpenFilePreview,
|
||||
density = "default",
|
||||
}: {
|
||||
edits: FileEditSummary[];
|
||||
displayMode: FileEditDisplayMode;
|
||||
onOpenFilePreview?: (path: string) => void;
|
||||
density?: "default" | "diff-only";
|
||||
}) {
|
||||
if (edits.length === 0) return null;
|
||||
return (
|
||||
<ul className="space-y-1">
|
||||
{edits.map((edit) => {
|
||||
if (density === "diff-only" && canRenderDiff(edit, displayMode)) {
|
||||
return (
|
||||
<FileEditDiffOnly
|
||||
key={edit.key}
|
||||
edit={edit}
|
||||
displayMode={displayMode}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<FileEditRow
|
||||
key={edit.key}
|
||||
edit={edit}
|
||||
displayMode={displayMode}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function canRenderDiff(
|
||||
edit: FileEditSummary,
|
||||
displayMode: FileEditDisplayMode,
|
||||
): displayMode is DiffFileEditDisplayMode {
|
||||
return (
|
||||
displayMode !== "summary"
|
||||
&& edit.status !== "editing"
|
||||
&& edit.status !== "error"
|
||||
&& hasRenderableFileDiff(edit.diff)
|
||||
);
|
||||
}
|
||||
|
||||
function FileEditDiffOnly({
|
||||
edit,
|
||||
displayMode,
|
||||
onOpenFilePreview,
|
||||
}: {
|
||||
edit: FileEditSummary;
|
||||
displayMode: DiffFileEditDisplayMode;
|
||||
onOpenFilePreview?: (path: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<li className="min-w-0 py-0.5">
|
||||
<FileUnifiedDiff
|
||||
diff={edit.diff!}
|
||||
collapsed={displayMode === "collapsed_diff"}
|
||||
added={edit.added}
|
||||
deleted={edit.deleted}
|
||||
showCollapsedStats={false}
|
||||
previewPath={edit.absolute_path || edit.path}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
/>
|
||||
</li>
|
||||
<>
|
||||
{edits.map((edit) => (
|
||||
<FileEditRow
|
||||
key={edit.key}
|
||||
edit={edit}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function FileEditRow({
|
||||
edit,
|
||||
displayMode,
|
||||
onOpenFilePreview,
|
||||
}: {
|
||||
edit: FileEditSummary;
|
||||
displayMode: FileEditDisplayMode;
|
||||
onOpenFilePreview?: (path: string) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const editing = edit.status === "editing";
|
||||
const failed = edit.status === "error";
|
||||
const action = fileEditAction(edit, editing, failed);
|
||||
const hasCountedDiff = !failed && !edit.binary && hasVisibleDiffStats(edit);
|
||||
const showDiff = canRenderDiff(edit, displayMode);
|
||||
const rawFailureDetail = failed ? cleanFileEditError(edit.error) : "";
|
||||
const failureDetail = failed
|
||||
? formatFileEditError(edit.error)
|
||||
|| t("message.fileEditFailedFallback", { defaultValue: "File change was not applied." })
|
||||
: "";
|
||||
const statusIcon = failed ? (
|
||||
<AlertCircle className="h-3 w-3" aria-hidden />
|
||||
) : editing ? (
|
||||
@@ -158,9 +66,9 @@ function FileEditRow({
|
||||
) : (
|
||||
<CheckCircle2 className="h-3 w-3" aria-hidden />
|
||||
);
|
||||
|
||||
return (
|
||||
<ActivityStep
|
||||
as="li"
|
||||
marker={(
|
||||
<span
|
||||
className={cn(
|
||||
@@ -176,42 +84,26 @@ function FileEditRow({
|
||||
active={editing}
|
||||
tone={failed ? "error" : editing ? "active" : "success"}
|
||||
className="text-xs"
|
||||
contentClassName={failed || showDiff ? "min-w-0" : "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3"}
|
||||
title={rawFailureDetail || edit.absolute_path || edit.path}
|
||||
ariaLabel={edit.path ? `${action} ${edit.path}` : action}
|
||||
label={edit.pending && !edit.path
|
||||
? t("message.fileEditPreparing", { defaultValue: "Preparing file edit…" })
|
||||
: (
|
||||
<FileReferenceChip
|
||||
path={edit.path}
|
||||
tooltipPath={edit.absolute_path}
|
||||
previewPath={edit.absolute_path || edit.path}
|
||||
onOpen={onOpenFilePreview}
|
||||
display="path"
|
||||
active={editing}
|
||||
className="min-w-0"
|
||||
textClassName="text-[12px]"
|
||||
testId="activity-file-reference"
|
||||
/>
|
||||
<span className="flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap">
|
||||
<span className="shrink-0">{action}</span>
|
||||
<FileReferenceChip
|
||||
path={edit.path}
|
||||
previewPath={edit.absolute_path || edit.path}
|
||||
onOpen={onOpenFilePreview}
|
||||
display="path"
|
||||
active={editing}
|
||||
className="min-w-0"
|
||||
textClassName="truncate text-[12px]"
|
||||
testId="activity-file-reference"
|
||||
/>
|
||||
{hasCountedDiff ? <DiffPair added={edit.added} deleted={edit.deleted} /> : null}
|
||||
</span>
|
||||
)}
|
||||
detail={null}
|
||||
aside={hasCountedDiff ? <DiffPair added={edit.added} deleted={edit.deleted} /> : null}
|
||||
>
|
||||
{failed ? (
|
||||
<span className="block max-w-[42rem] truncate text-[11px] leading-4 text-destructive/75">
|
||||
{failureDetail}
|
||||
</span>
|
||||
) : null}
|
||||
{showDiff ? (
|
||||
<FileUnifiedDiff
|
||||
diff={edit.diff!}
|
||||
collapsed={displayMode === "collapsed_diff"}
|
||||
added={edit.added}
|
||||
deleted={edit.deleted}
|
||||
previewPath={edit.absolute_path || edit.path}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
/>
|
||||
) : null}
|
||||
</ActivityStep>
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -219,262 +111,9 @@ export function hasVisibleDiffStats(edit: Pick<FileEditSummary, "added" | "delet
|
||||
return edit.added > 0 || edit.deleted > 0;
|
||||
}
|
||||
|
||||
function cleanFileEditError(error?: string): string {
|
||||
const firstLine = (error || "").replace(/\s+/g, " ").trim();
|
||||
if (!firstLine) return "";
|
||||
return firstLine
|
||||
.replace(/^Error applying patch:\s*/i, "")
|
||||
.replace(/^Error writing file:\s*/i, "")
|
||||
.replace(/^Error editing file:\s*/i, "")
|
||||
.replace(/^Error:\s*/i, "");
|
||||
}
|
||||
|
||||
function formatFileEditError(error?: string): string {
|
||||
const cleaned = cleanFileEditError(error);
|
||||
if (!cleaned) return "";
|
||||
|
||||
if (/\bpermission denied\b/i.test(cleaned) || /\boperation not permitted\b/i.test(cleaned)) {
|
||||
return "No permission to change this location.";
|
||||
}
|
||||
|
||||
return cleaned
|
||||
.replace(/^old_text not found in (.+)$/i, "Target text was not found in $1.")
|
||||
.replace(/^old_text appears multiple times in (.+)$/i, "Target text matched multiple places in $1.")
|
||||
.replace(/^file to (?:update|delete) does not exist: (.+)$/i, "File does not exist: $1.")
|
||||
.replace(/^path to (?:update|delete) is not a file: (.+)$/i, "Path is not a file: $1.")
|
||||
.slice(0, 180);
|
||||
}
|
||||
|
||||
function FileUnifiedDiff({
|
||||
diff,
|
||||
collapsed,
|
||||
added,
|
||||
deleted,
|
||||
showCollapsedStats = true,
|
||||
previewPath,
|
||||
onOpenFilePreview,
|
||||
}: {
|
||||
diff: UIFileDiff;
|
||||
collapsed: boolean;
|
||||
added: number;
|
||||
deleted: number;
|
||||
showCollapsedStats?: boolean;
|
||||
previewPath?: string;
|
||||
onOpenFilePreview?: (path: string) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const tx = (key: string, fallback: string) => t(key, { defaultValue: fallback });
|
||||
const [open, setOpen] = useState(false);
|
||||
const [expandedLines, setExpandedLines] = useState(false);
|
||||
const renderableDiff = useMemo(() => parseRenderableFileDiff(diff), [diff]);
|
||||
const language = useMemo(() => codeLanguageFromPath(previewPath), [previewPath]);
|
||||
const totalLineCount = useMemo(() => countDiffLines(renderableDiff), [renderableDiff]);
|
||||
const shouldAutoCollapse = totalLineCount > AUTO_COLLAPSE_DIFF_LINES || !!diff.truncated;
|
||||
const startsCollapsed = collapsed || shouldAutoCollapse;
|
||||
const shouldRenderBody = !startsCollapsed || open;
|
||||
const shouldLimitLines = totalLineCount > INITIAL_VISIBLE_DIFF_LINES;
|
||||
const lineLimit = expandedLines || !shouldLimitLines
|
||||
? totalLineCount
|
||||
: INITIAL_VISIBLE_DIFF_LINES;
|
||||
const visibleDiff = useMemo(
|
||||
() => shouldRenderBody
|
||||
? selectVisibleDiffLines(renderableDiff, lineLimit, totalLineCount)
|
||||
: EMPTY_VISIBLE_DIFF,
|
||||
[lineLimit, renderableDiff, shouldRenderBody, totalLineCount],
|
||||
);
|
||||
const lineCountLabel = t("message.fileEditDiffLineCount", {
|
||||
count: diff.truncated ? `${totalLineCount}+` : totalLineCount,
|
||||
defaultValue: "{{count}} lines",
|
||||
});
|
||||
const viewDiffLabel = shouldAutoCollapse
|
||||
? tx("message.fileEditViewLargeDiff", "View large diff")
|
||||
: tx("message.fileEditViewDiff", "View diff");
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(false);
|
||||
setExpandedLines(false);
|
||||
}, [diff]);
|
||||
|
||||
const handleToggleOpen = () => {
|
||||
if (open) setExpandedLines(false);
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
if (totalLineCount === 0) return null;
|
||||
|
||||
const renderBody = () => (
|
||||
<div
|
||||
className="mt-1 overflow-hidden rounded-md border border-border/55 bg-background/80 shadow-[0_1px_0_rgba(15,23,42,0.03)]"
|
||||
data-testid="file-edit-diff"
|
||||
>
|
||||
{visibleDiff.hunks.map(({ hunk, skippedBefore }, index) => (
|
||||
<div
|
||||
key={`${hunk.old_start}-${hunk.new_start}-${index}`}
|
||||
className={cn("min-w-0", index > 0 && "border-t border-border/45")}
|
||||
>
|
||||
{skippedBefore > 0 ? <DiffHunkGap lineCount={skippedBefore} /> : null}
|
||||
<div className="overflow-x-auto">
|
||||
<DiffSyntaxHighlight language={language} lines={hunk.lines} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{visibleDiff.hiddenLineCount > 0 ? (
|
||||
<div className="border-t border-border/45 bg-muted/30 px-2 py-1">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] font-medium",
|
||||
"text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
|
||||
)}
|
||||
data-testid="file-edit-diff-expand-lines"
|
||||
onClick={() => setExpandedLines(true)}
|
||||
>
|
||||
<ChevronDown className="h-3 w-3" aria-hidden />
|
||||
{t("message.fileEditShowMoreLines", {
|
||||
count: visibleDiff.hiddenLineCount,
|
||||
defaultValue: "Show {{count}} more lines",
|
||||
})}
|
||||
</button>
|
||||
</div>
|
||||
) : expandedLines && shouldLimitLines ? (
|
||||
<div className="border-t border-border/45 bg-muted/30 px-2 py-1">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] font-medium",
|
||||
"text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
|
||||
)}
|
||||
data-testid="file-edit-diff-collapse-lines"
|
||||
onClick={() => setExpandedLines(false)}
|
||||
>
|
||||
<ChevronUp className="h-3 w-3" aria-hidden />
|
||||
{tx("message.fileEditShowFewerLines", "Show fewer lines")}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
{diff.truncated ? (
|
||||
<div
|
||||
className="flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-border/45 bg-muted/35 px-2 py-1 text-[11px] text-muted-foreground"
|
||||
data-testid="file-edit-diff-truncated"
|
||||
>
|
||||
<span>
|
||||
{tx("message.fileEditDiffTruncated", "Diff truncated. Open the file for the full change.")}
|
||||
</span>
|
||||
{previewPath && onOpenFilePreview ? (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded px-1 py-0.5 font-medium",
|
||||
"text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
|
||||
)}
|
||||
data-testid="file-edit-diff-open-file"
|
||||
onClick={() => onOpenFilePreview(previewPath)}
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" aria-hidden />
|
||||
{tx("message.fileEditOpenFile", "Open file")}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!startsCollapsed) return renderBody();
|
||||
|
||||
return (
|
||||
<div className="mt-1">
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={open}
|
||||
data-testid="file-edit-diff-toggle"
|
||||
onClick={handleToggleOpen}
|
||||
className={cn(
|
||||
"flex w-full cursor-pointer items-center gap-2 rounded-md border border-border/45 bg-muted/35 px-2 py-1 text-left",
|
||||
"text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/50",
|
||||
)}
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn("h-3 w-3 shrink-0 transition-transform", open && "rotate-90")}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="min-w-0 flex-1">{viewDiffLabel}</span>
|
||||
<span className="shrink-0 text-muted-foreground/65">{lineCountLabel}</span>
|
||||
{showCollapsedStats ? <DiffPair added={added} deleted={deleted} /> : null}
|
||||
</button>
|
||||
{open ? renderBody() : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function countDiffLines(diff: RenderableFileDiff): number {
|
||||
return diff.hunks.reduce((total, hunk) => total + hunk.lines.length, 0);
|
||||
}
|
||||
|
||||
function selectVisibleDiffLines(
|
||||
diff: RenderableFileDiff,
|
||||
lineLimit: number,
|
||||
totalLineCount: number,
|
||||
): VisibleDiff {
|
||||
if (lineLimit >= totalLineCount) {
|
||||
return {
|
||||
hunks: diff.hunks.map((hunk, index) => ({
|
||||
hunk,
|
||||
skippedBefore: index > 0 ? countSkippedUnchangedLines(diff.hunks[index - 1], hunk) : 0,
|
||||
})),
|
||||
hiddenLineCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
let remaining = Math.max(0, lineLimit);
|
||||
const hunks: VisibleDiffHunk[] = [];
|
||||
let previousHunk: RenderableFileDiffHunk | null = null;
|
||||
for (const hunk of diff.hunks) {
|
||||
if (remaining <= 0) break;
|
||||
const skippedBefore = previousHunk ? countSkippedUnchangedLines(previousHunk, hunk) : 0;
|
||||
if (hunk.lines.length <= remaining) {
|
||||
hunks.push({ hunk, skippedBefore });
|
||||
remaining -= hunk.lines.length;
|
||||
previousHunk = hunk;
|
||||
continue;
|
||||
}
|
||||
hunks.push({ hunk: { ...hunk, lines: hunk.lines.slice(0, remaining) }, skippedBefore });
|
||||
remaining = 0;
|
||||
previousHunk = hunk;
|
||||
}
|
||||
return {
|
||||
hunks,
|
||||
hiddenLineCount: Math.max(0, totalLineCount - lineLimit),
|
||||
};
|
||||
}
|
||||
|
||||
function countSkippedUnchangedLines(
|
||||
previous: RenderableFileDiffHunk,
|
||||
current: RenderableFileDiffHunk,
|
||||
): number {
|
||||
const oldGap = current.old_start - (previous.old_start + previous.old_lines);
|
||||
const newGap = current.new_start - (previous.new_start + previous.new_lines);
|
||||
return Math.max(0, oldGap, newGap);
|
||||
}
|
||||
|
||||
function DiffHunkGap({ lineCount }: { lineCount: number }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-2 bg-muted/35 px-2 py-1 text-[11px] text-muted-foreground"
|
||||
data-testid="file-edit-diff-hunk-gap"
|
||||
>
|
||||
<span
|
||||
className="select-none rounded border border-border/45 bg-background/70 px-1 font-mono text-muted-foreground/70"
|
||||
aria-hidden
|
||||
>
|
||||
...
|
||||
</span>
|
||||
<span>
|
||||
{t("message.fileEditUnchangedLinesHidden", {
|
||||
count: lineCount,
|
||||
defaultValue: "{{count}} unchanged lines hidden",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
function fileEditAction(edit: FileEditSummary, editing: boolean, failed: boolean): string {
|
||||
const deleting = edit.operation === "delete";
|
||||
if (failed) return deleting ? "Could not delete" : "Could not edit";
|
||||
if (editing) return deleting ? "Deleting" : "Editing";
|
||||
return deleting ? "Deleted" : "Edited";
|
||||
}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import {
|
||||
AlertCircle,
|
||||
FileSearch,
|
||||
FolderOpen,
|
||||
ListTree,
|
||||
MemoryStick,
|
||||
Play,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { ActivityStep } from "@/components/thread/activity/ActivityStep";
|
||||
import {
|
||||
describeGenericToolRun,
|
||||
type GenericToolRunItem,
|
||||
type GenericToolStatus,
|
||||
type ToolFamily,
|
||||
} from "@/components/thread/activity/generic-tool-model";
|
||||
|
||||
interface GenericToolRunModel {
|
||||
status: GenericToolStatus;
|
||||
label: string;
|
||||
detail: string;
|
||||
aside: string;
|
||||
icon: LucideIcon;
|
||||
}
|
||||
|
||||
export function GenericToolRun({ items }: { items: GenericToolRunItem[] }) {
|
||||
const model = useMemo(() => buildModel(items), [items]);
|
||||
const action = [model.label, model.detail].filter(Boolean).join(" ");
|
||||
const label = model.aside ? `${action} · ${model.aside}` : action;
|
||||
|
||||
return (
|
||||
<ActivityStep
|
||||
icon={model.status === "error" ? AlertCircle : model.icon}
|
||||
active={model.status === "running"}
|
||||
tone={model.status === "error" ? "error" : model.status === "done" ? "success" : "active"}
|
||||
label={label}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function buildModel(items: GenericToolRunItem[]): GenericToolRunModel {
|
||||
const family = items[0]?.trace.family ?? "generic";
|
||||
const presentation = describeGenericToolRun(items);
|
||||
return {
|
||||
...presentation,
|
||||
icon: activityIcon(family),
|
||||
};
|
||||
}
|
||||
|
||||
function activityIcon(family: ToolFamily): LucideIcon {
|
||||
if (family === "content-search" || family === "file-search") return FileSearch;
|
||||
if (family === "list") return ListTree;
|
||||
if (family === "read") return FolderOpen;
|
||||
if (family === "memory") return MemoryStick;
|
||||
return Play;
|
||||
}
|
||||
@@ -2,51 +2,35 @@ import { useEffect, useRef, useState } from "react";
|
||||
import { Check, CircleDashed } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { ActivityStep } from "./ActivityStep";
|
||||
import { compactReasoningPreview } from "./reasoning-preview";
|
||||
|
||||
export function ReasoningRow({
|
||||
text,
|
||||
streaming,
|
||||
onOpenFilePreview,
|
||||
className,
|
||||
}: {
|
||||
text: string;
|
||||
streaming: boolean;
|
||||
onOpenFilePreview?: (path: string) => void;
|
||||
className?: string;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
useEffect(() => {
|
||||
if (text.length > 0) preloadMarkdownText();
|
||||
}, [text.length]);
|
||||
const fallback = streaming
|
||||
? t("message.reasoningStreaming", { defaultValue: "Thinking…" })
|
||||
: t("message.reasoning", { defaultValue: "Thinking" });
|
||||
const preview = compactReasoningPreview(text) || fallback;
|
||||
return (
|
||||
<ActivityStep
|
||||
marker={<ReasoningMarker streaming={streaming} />}
|
||||
active={streaming}
|
||||
tone={streaming ? "active" : "success"}
|
||||
label={streaming
|
||||
? t("message.reasoningStreaming", { defaultValue: "Thinking…" })
|
||||
: t("message.reasoning", { defaultValue: "Thinking" })}
|
||||
>
|
||||
{text.trim() ? (
|
||||
<MarkdownText
|
||||
streaming={streaming}
|
||||
onOpenFilePreview={onOpenFilePreview}
|
||||
className={cn(
|
||||
"min-w-0 text-[12.5px] italic text-muted-foreground/78",
|
||||
"prose-p:my-1 prose-li:my-0.5",
|
||||
"prose-headings:mt-2 prose-headings:mb-1 prose-headings:font-medium",
|
||||
"prose-headings:text-muted-foreground/88 prose-strong:text-muted-foreground",
|
||||
"prose-h1:text-[15px] prose-h2:text-[13.5px] prose-h3:text-[12.5px] prose-h4:text-[12px]",
|
||||
"prose-a:text-blue-500 prose-a:underline hover:prose-a:text-blue-600 dark:prose-a:text-blue-300 dark:hover:prose-a:text-blue-200",
|
||||
"prose-code:text-[0.92em]",
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</MarkdownText>
|
||||
) : null}
|
||||
</ActivityStep>
|
||||
label={preview}
|
||||
labelClassName="italic text-muted-foreground/78"
|
||||
contentClassName="overflow-hidden"
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import type { ReactNode, Ref } from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ThinkingReasoningShellProps {
|
||||
active: boolean;
|
||||
expanded: boolean;
|
||||
label: string;
|
||||
children: ReactNode;
|
||||
viewportRef: Ref<HTMLDivElement>;
|
||||
contentRef: Ref<HTMLDivElement>;
|
||||
onToggle: () => void;
|
||||
onScroll: () => void;
|
||||
}
|
||||
|
||||
export function ThinkingReasoningShell({
|
||||
active,
|
||||
expanded,
|
||||
label,
|
||||
children,
|
||||
viewportRef,
|
||||
contentRef,
|
||||
onToggle,
|
||||
onScroll,
|
||||
}: ThinkingReasoningShellProps) {
|
||||
return (
|
||||
<div
|
||||
className="flex w-full max-w-[45rem] animate-in flex-col fade-in duration-300 motion-reduce:animate-none"
|
||||
data-state={active ? "thinking" : "done"}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="group inline-flex min-h-5 items-center self-start gap-1.5 bg-transparent p-0"
|
||||
onClick={onToggle}
|
||||
aria-expanded={expanded}
|
||||
aria-label={label}
|
||||
aria-live={active ? "polite" : undefined}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"min-w-0 truncate text-[13px] font-medium leading-[18px] text-muted-foreground/70",
|
||||
active && "animate-pulse motion-reduce:animate-none",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"h-3 w-3 shrink-0 text-muted-foreground/60 transition-[transform,color] duration-200",
|
||||
"group-hover:text-muted-foreground motion-reduce:transition-none",
|
||||
expanded && "rotate-180",
|
||||
)}
|
||||
strokeWidth={1.8}
|
||||
aria-hidden
|
||||
/>
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"grid transition-[grid-template-rows,opacity] duration-300 motion-reduce:transition-none",
|
||||
expanded
|
||||
? "grid-rows-[1fr] opacity-100"
|
||||
: "pointer-events-none grid-rows-[0fr] opacity-0",
|
||||
)}
|
||||
>
|
||||
<div className="min-h-0 overflow-hidden">
|
||||
<div
|
||||
ref={viewportRef}
|
||||
data-testid={expanded ? "agent-activity-scroll" : undefined}
|
||||
onScroll={onScroll}
|
||||
className="mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||||
aria-hidden={!expanded}
|
||||
>
|
||||
<div ref={contentRef} className="flex flex-col gap-0.5">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { Globe2 } from "lucide-react";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { ActivityStep, type ActivityStepTone } from "@/components/thread/activity/ActivityStep";
|
||||
import { useLogoFallback } from "@/hooks/useLogoFallback";
|
||||
import { browserSafeFaviconUrls } from "@/lib/provider-brand";
|
||||
|
||||
interface WebActivityRowProps {
|
||||
title: string;
|
||||
href: string;
|
||||
host: string;
|
||||
displayUrl: string;
|
||||
active?: boolean;
|
||||
tone?: ActivityStepTone;
|
||||
}
|
||||
|
||||
export function WebActivityRow({
|
||||
title,
|
||||
href,
|
||||
host,
|
||||
displayUrl,
|
||||
active = false,
|
||||
tone = active ? "active" : "neutral",
|
||||
}: WebActivityRowProps) {
|
||||
return (
|
||||
<ActivityStep
|
||||
marker={<WebFavicon host={host} active={active} />}
|
||||
active={active}
|
||||
tone={tone}
|
||||
label={(
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
aria-label={`${title} · ${displayUrl}`}
|
||||
className="flex min-w-0 items-center gap-2 overflow-hidden text-foreground/82 hover:text-foreground"
|
||||
>
|
||||
<span className="min-w-0 truncate font-medium">{title}</span>
|
||||
<span
|
||||
className="max-w-[9rem] shrink truncate rounded-full bg-muted/65 px-2 py-0.5 font-mono text-[10px] leading-4 text-muted-foreground/72 sm:max-w-[18rem]"
|
||||
data-testid="activity-web-url"
|
||||
>
|
||||
{displayUrl}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
contentClassName="overflow-hidden"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function WebFavicon({ host, active }: { host: string; active: boolean }) {
|
||||
const candidates = useMemo(() => browserSafeFaviconUrls(host), [host]);
|
||||
const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(candidates);
|
||||
|
||||
if (!logoUrl) {
|
||||
return <Globe2 className="h-4 w-4 shrink-0 text-muted-foreground/52" aria-hidden />;
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
src={logoUrl}
|
||||
alt=""
|
||||
className={`h-4 w-4 shrink-0 rounded-[3px] object-contain${active ? " animate-pulse" : ""}`}
|
||||
decoding="async"
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer"
|
||||
draggable={false}
|
||||
onLoad={onLogoLoad}
|
||||
onError={onLogoError}
|
||||
data-testid={`activity-web-favicon-${host}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { AlertCircle, Search } from "lucide-react";
|
||||
|
||||
import { ActivityStep } from "@/components/thread/activity/ActivityStep";
|
||||
import { WebActivityRow } from "@/components/thread/activity/WebActivityRow";
|
||||
import {
|
||||
presentWebSearchAction,
|
||||
type WebSearchRunModel,
|
||||
} from "@/components/thread/activity/web-search-model";
|
||||
|
||||
export function WebSearchRun({ run, turnActive }: { run: WebSearchRunModel; turnActive: boolean }) {
|
||||
const active = run.status === "running" && turnActive;
|
||||
const status = run.status === "running" && !turnActive ? "done" : run.status;
|
||||
const label = presentWebSearchAction(run.query, status);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ActivityStep
|
||||
icon={status === "error" ? AlertCircle : Search}
|
||||
active={active}
|
||||
tone={status === "error" ? "error" : status === "done" ? "success" : "active"}
|
||||
label={label}
|
||||
/>
|
||||
{run.sources.map((source) => (
|
||||
<WebActivityRow
|
||||
key={source.href}
|
||||
title={source.title}
|
||||
href={source.href}
|
||||
host={source.host}
|
||||
displayUrl={source.displayUrl}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import {
|
||||
canonicalToolTrace,
|
||||
mergeToolProgressEvents,
|
||||
mergeUniqueToolTraceLines,
|
||||
} from "@/lib/tool-traces";
|
||||
import type { UIMediaAttachment, UIMessage } from "@/lib/types";
|
||||
|
||||
/**
|
||||
* Live tool progress is already folded into one trace message. Persisted
|
||||
* transcripts can contain the same progress as adjacent start/end rows, so
|
||||
* normalize both paths before rendering the activity timeline.
|
||||
*/
|
||||
export function coalesceActivityMessages(messages: UIMessage[]): UIMessage[] {
|
||||
const normalized: UIMessage[] = [];
|
||||
|
||||
for (const message of messages) {
|
||||
const targetIndex = findMergeTarget(normalized, message);
|
||||
if (targetIndex < 0) {
|
||||
normalized.push(message);
|
||||
continue;
|
||||
}
|
||||
normalized[targetIndex] = mergeTraceMessages(normalized[targetIndex], message);
|
||||
}
|
||||
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function findMergeTarget(messages: UIMessage[], incoming: UIMessage): number {
|
||||
if (incoming.kind !== "trace") return -1;
|
||||
|
||||
for (let index = messages.length - 1; index >= 0; index -= 1) {
|
||||
const previous = messages[index];
|
||||
if (previous.kind !== "trace") continue;
|
||||
if (hasSharedToolCall(previous, incoming) && sameTurn(previous, incoming)) return index;
|
||||
}
|
||||
|
||||
const adjacentIndex = messages.length - 1;
|
||||
const adjacent = messages[adjacentIndex];
|
||||
return canMergeAdjacentProgress(adjacent, incoming) ? adjacentIndex : -1;
|
||||
}
|
||||
|
||||
function canMergeAdjacentProgress(
|
||||
previous: UIMessage | undefined,
|
||||
incoming: UIMessage,
|
||||
): previous is UIMessage {
|
||||
if (!previous || previous.kind !== "trace") return false;
|
||||
if (!sameTurn(previous, incoming)) return false;
|
||||
if (
|
||||
previous.activitySegmentId
|
||||
&& incoming.activitySegmentId
|
||||
&& previous.activitySegmentId === incoming.activitySegmentId
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return hasSharedTrace(previous, incoming) && completesPreviousProgress(previous, incoming);
|
||||
}
|
||||
|
||||
function mergeTraceMessages(previous: UIMessage, incoming: UIMessage): UIMessage {
|
||||
const traces = mergeUniqueToolTraceLines(messageTraces(previous), messageTraces(incoming)).traces;
|
||||
const toolEvents = mergeToolProgressEvents(previous.toolEvents, incoming.toolEvents ?? []);
|
||||
const fileEdits = [...(previous.fileEdits ?? []), ...(incoming.fileEdits ?? [])];
|
||||
const media = uniqueMedia([...(previous.media ?? []), ...(incoming.media ?? [])]);
|
||||
|
||||
return {
|
||||
...previous,
|
||||
content: traces[traces.length - 1] ?? incoming.content ?? previous.content,
|
||||
traces,
|
||||
...(toolEvents.length ? { toolEvents } : { toolEvents: undefined }),
|
||||
...(fileEdits.length ? { fileEdits } : { fileEdits: undefined }),
|
||||
...(media.length ? { media } : { media: undefined }),
|
||||
isStreaming: incoming.isStreaming,
|
||||
turnPhase: incoming.turnPhase ?? previous.turnPhase,
|
||||
turnSeq: incoming.turnSeq ?? previous.turnSeq,
|
||||
};
|
||||
}
|
||||
|
||||
function messageTraces(message: UIMessage): string[] {
|
||||
if (message.traces?.length) return message.traces;
|
||||
return message.content.trim() ? [message.content] : [];
|
||||
}
|
||||
|
||||
function hasSharedToolCall(previous: UIMessage, incoming: UIMessage): boolean {
|
||||
const previousCallIds = new Set(
|
||||
(previous.toolEvents ?? []).map((event) => event.call_id).filter(Boolean),
|
||||
);
|
||||
return (incoming.toolEvents ?? []).some((event) => (
|
||||
!!event.call_id && previousCallIds.has(event.call_id)
|
||||
));
|
||||
}
|
||||
|
||||
function hasSharedTrace(previous: UIMessage, incoming: UIMessage): boolean {
|
||||
const previousTraces = new Set(messageTraces(previous).map(canonicalToolTrace));
|
||||
return messageTraces(incoming).some((trace) => previousTraces.has(canonicalToolTrace(trace)));
|
||||
}
|
||||
|
||||
function completesPreviousProgress(previous: UIMessage, incoming: UIMessage): boolean {
|
||||
const previousPhases = new Set((previous.toolEvents ?? []).map((event) => event.phase));
|
||||
const incomingPhases = new Set((incoming.toolEvents ?? []).map((event) => event.phase));
|
||||
return previousPhases.has("start") && (incomingPhases.has("end") || incomingPhases.has("error"));
|
||||
}
|
||||
|
||||
function sameTurn(previous: UIMessage, incoming: UIMessage): boolean {
|
||||
return !previous.turnId || !incoming.turnId || previous.turnId === incoming.turnId;
|
||||
}
|
||||
|
||||
function uniqueMedia(media: UIMediaAttachment[]): UIMediaAttachment[] {
|
||||
const seen = new Set<string>();
|
||||
return media.filter((item) => {
|
||||
const key = `${item.kind}:${item.url ?? ""}:${item.name ?? ""}`;
|
||||
if (seen.has(key)) return false;
|
||||
seen.add(key);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
export function redactActivityText(value: string): string {
|
||||
return value
|
||||
.replace(/(https?:\/\/)[^/@\s]+@/gi, "$1<redacted>@")
|
||||
.replace(/\b(Bearer)\s+[A-Za-z0-9._~+/=-]+/gi, "$1 <redacted>")
|
||||
.replace(
|
||||
/(^|[\s;])((?:[A-Z0-9_]*)(?:API[_-]?KEY|TOKEN|SECRET|PASSWORD|PASS|AUTH)(?:[A-Z0-9_]*))=(?:"[^"]*"|'[^']*'|[^\s]+)/gim,
|
||||
"$1$2=<redacted>",
|
||||
)
|
||||
.replace(
|
||||
/(--(?:api-?key|access-?token|token|secret|password)(?:=|\s+))(?:"[^"]*"|'[^']*'|[^\s]+)/gi,
|
||||
"$1<redacted>",
|
||||
)
|
||||
.replace(/([?&](?:api_?key|access_?token|token|secret|password)=)[^&\s]+/gi, "$1<redacted>")
|
||||
.replace(
|
||||
/(["']?authorization["']?\s*[:=]\s*["']?)[^"'\r\n,;}]+/gi,
|
||||
"$1<redacted>",
|
||||
)
|
||||
.replace(
|
||||
/(["']?(?:api[_-]?key|access[_-]?token|token|secret|password)["']?\s*[:=]\s*)["']?[^"'\s,&;}]+["']?/gi,
|
||||
"$1<redacted>",
|
||||
)
|
||||
.replace(/\b(?:sk(?:-proj)?|xox[baprs]?|xapp)[-_][A-Za-z0-9._-]{8,}\b/gi, "<redacted>")
|
||||
.replace(/\bgh[pousr]_[A-Za-z0-9]{12,}\b/g, "<redacted>")
|
||||
.replace(/\bAKIA[A-Z0-9]{16}\b/g, "<redacted>")
|
||||
.replace(/\b\d{6,12}:[A-Za-z0-9_-]{20,}\b/g, "<redacted>");
|
||||
}
|
||||
|
||||
export function redactShellCommand(command: string): string {
|
||||
return redactActivityText(command).replaceAll("<redacted>", "••••");
|
||||
}
|
||||
|
||||
export function compactActivityPath(value: string): string {
|
||||
return value
|
||||
.replace(/\/Users\/[^/\s"']+/g, "~")
|
||||
.replace(/\/home\/[^/\s"']+/g, "~")
|
||||
.replace(/\/private\/tmp\/[^\s"']+/g, "/tmp/…")
|
||||
.replace(/\/var\/folders\/[^\s"']+/g, "/var/folders/…");
|
||||
}
|
||||
|
||||
export function safeActivityDetail(value: string, maxLength = 96): string {
|
||||
return truncateMiddle(
|
||||
compactActivityPath(redactActivityText(value))
|
||||
.replace(/\/\.nanobot\/tool-results\/[^\s"']+/g, "/.nanobot/tool-results/…")
|
||||
.replace(/\s+/g, " ")
|
||||
.replace(/^["']|["']$/g, "")
|
||||
.trim(),
|
||||
maxLength,
|
||||
);
|
||||
}
|
||||
|
||||
export function summarizeShellCommand(command: string): string {
|
||||
const lines = redactShellCommand(command.replace(/\r\n/g, "\n"))
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean);
|
||||
const firstLine = compactActivityPath(lines[0] || "command");
|
||||
const firstPreview = truncateMiddle(firstLine, 92);
|
||||
return lines.length <= 1
|
||||
? firstPreview
|
||||
: `${firstPreview} · script, ${lines.length} lines`;
|
||||
}
|
||||
|
||||
function truncateMiddle(value: string, maxLength: number): string {
|
||||
if (value.length <= maxLength) return value;
|
||||
const head = Math.ceil((maxLength - 1) * 0.62);
|
||||
const tail = Math.floor((maxLength - 1) * 0.38);
|
||||
return `${value.slice(0, head)}…${value.slice(-tail)}`;
|
||||
}
|
||||
@@ -0,0 +1,367 @@
|
||||
import { compactActivityPath, redactActivityText } from "./activity-text";
|
||||
|
||||
export type GenericToolStatus = "running" | "done" | "error";
|
||||
export type ToolFamily = "content-search" | "file-search" | "list" | "read" | "memory" | "generic";
|
||||
|
||||
export interface ToolField {
|
||||
key:
|
||||
| "query"
|
||||
| "pattern"
|
||||
| "glob"
|
||||
| "path"
|
||||
| "file_path"
|
||||
| "url"
|
||||
| "action"
|
||||
| "key"
|
||||
| "label"
|
||||
| "name"
|
||||
| "channel"
|
||||
| "chat_id"
|
||||
| "session_id"
|
||||
| "ui_summary";
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface GenericToolTrace {
|
||||
name: string;
|
||||
family: ToolFamily;
|
||||
groupKey: string;
|
||||
fields: ToolField[];
|
||||
collectedSource: boolean;
|
||||
}
|
||||
|
||||
export interface GenericToolRunItem {
|
||||
trace: GenericToolTrace;
|
||||
status: GenericToolStatus;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface GenericToolPresentation {
|
||||
status: GenericToolStatus;
|
||||
label: string;
|
||||
detail: string;
|
||||
aside: string;
|
||||
}
|
||||
|
||||
const CONTENT_SEARCH_TOOLS = new Set([
|
||||
"grep",
|
||||
"rg",
|
||||
"ripgrep",
|
||||
"search_code",
|
||||
"search_content",
|
||||
"search_files_content",
|
||||
"find_text",
|
||||
]);
|
||||
const FILE_SEARCH_TOOLS = new Set([
|
||||
"find",
|
||||
"find_file",
|
||||
"find_files",
|
||||
"glob",
|
||||
"search_files",
|
||||
]);
|
||||
const LIST_TOOLS = new Set(["list_dir", "list_directory", "list_files", "ls"]);
|
||||
const READ_TOOLS = new Set(["read", "read_file", "read_text_file"]);
|
||||
const MEMORY_TOOLS = new Set(["memory_search", "search_memory", "recall_memory"]);
|
||||
const EXCLUDED_TOOL_PREFIXES = ["mcp_"];
|
||||
const EXCLUDED_TOOLS = new Set([
|
||||
"apply_patch",
|
||||
"cli_anything_run",
|
||||
"edit_file",
|
||||
"exec",
|
||||
"exec_command",
|
||||
"execute_command",
|
||||
"run_cli_app",
|
||||
"run_command",
|
||||
"run_shell",
|
||||
"shell",
|
||||
"terminal",
|
||||
"web_fetch",
|
||||
"web_search",
|
||||
"write_file",
|
||||
]);
|
||||
|
||||
export function parseGenericToolTrace(line: string): GenericToolTrace | null {
|
||||
const call = parseCall(line);
|
||||
if (!call || isExcludedTool(call.name)) return null;
|
||||
const family = toolFamily(call.name);
|
||||
const fields = safeFields(call.args);
|
||||
const collectedSource = fields.some((field) => isCollectedSourcePath(field.value));
|
||||
return {
|
||||
name: call.name,
|
||||
family,
|
||||
groupKey: family === "generic"
|
||||
? `${family}:${call.name}`
|
||||
: `${family}:${collectedSource ? "collected" : "workspace"}`,
|
||||
fields,
|
||||
collectedSource,
|
||||
};
|
||||
}
|
||||
|
||||
export function canGroupGenericToolRuns(previous: GenericToolRunItem, next: GenericToolRunItem): boolean {
|
||||
return previous.trace.groupKey === next.trace.groupKey;
|
||||
}
|
||||
|
||||
function compactGenericToolPath(value: string): string {
|
||||
const normalized = redactActivityText(value).replace(/\\/g, "/");
|
||||
if (isCollectedSourcePath(normalized)) {
|
||||
return truncateMiddle(normalized.split("/").pop() || "collected source", 64);
|
||||
}
|
||||
return compactActivityPath(normalized);
|
||||
}
|
||||
|
||||
export function describeGenericToolRun(items: GenericToolRunItem[]): GenericToolPresentation {
|
||||
const status = aggregateStatus(items);
|
||||
const family = items[0]?.trace.family ?? "generic";
|
||||
const name = items[0]?.trace.name ?? "tool";
|
||||
const collected = items.length > 0 && items.every((item) => item.trace.collectedSource);
|
||||
return {
|
||||
status,
|
||||
label: activityLabel(family, status, collected, name, items),
|
||||
detail: activityDetail(items, family, name),
|
||||
aside: activityAside(items, family),
|
||||
};
|
||||
}
|
||||
|
||||
function parseCall(line: string): { name: string; args: unknown } | null {
|
||||
const match = /^([a-zA-Z0-9_.-]+)\((.*)\)$/.exec(line.trim());
|
||||
if (!match) return null;
|
||||
const name = compactToolName(match[1]);
|
||||
let args: unknown;
|
||||
try {
|
||||
args = match[2].trim() ? JSON.parse(match[2]) : {};
|
||||
} catch {
|
||||
args = {};
|
||||
}
|
||||
return { name, args };
|
||||
}
|
||||
|
||||
function compactToolName(name: string): string {
|
||||
return name.toLowerCase().split(".").pop() || name.toLowerCase();
|
||||
}
|
||||
|
||||
function isExcludedTool(name: string): boolean {
|
||||
return EXCLUDED_TOOLS.has(name) || EXCLUDED_TOOL_PREFIXES.some((prefix) => name.startsWith(prefix));
|
||||
}
|
||||
|
||||
function toolFamily(name: string): ToolFamily {
|
||||
if (CONTENT_SEARCH_TOOLS.has(name)) return "content-search";
|
||||
if (FILE_SEARCH_TOOLS.has(name)) return "file-search";
|
||||
if (LIST_TOOLS.has(name)) return "list";
|
||||
if (READ_TOOLS.has(name)) return "read";
|
||||
if (MEMORY_TOOLS.has(name)) return "memory";
|
||||
return "generic";
|
||||
}
|
||||
|
||||
function safeFields(args: unknown): ToolField[] {
|
||||
if (!args || typeof args !== "object" || Array.isArray(args)) return [];
|
||||
const record = args as Record<string, unknown>;
|
||||
const fields: ToolField[] = [];
|
||||
for (const key of [
|
||||
"query",
|
||||
"pattern",
|
||||
"glob",
|
||||
"path",
|
||||
"file_path",
|
||||
"url",
|
||||
"action",
|
||||
"key",
|
||||
"label",
|
||||
"name",
|
||||
"channel",
|
||||
"chat_id",
|
||||
"session_id",
|
||||
"ui_summary",
|
||||
] as const) {
|
||||
const value = record[key];
|
||||
if (typeof value === "string" && value.trim()) {
|
||||
fields.push({ key, value: value.trim() });
|
||||
}
|
||||
}
|
||||
return fields;
|
||||
}
|
||||
|
||||
function aggregateStatus(items: GenericToolRunItem[]): GenericToolStatus {
|
||||
if (items.some((item) => item.status === "error")) return "error";
|
||||
if (items.some((item) => item.status === "running")) return "running";
|
||||
return "done";
|
||||
}
|
||||
|
||||
function activityLabel(
|
||||
family: ToolFamily,
|
||||
status: GenericToolStatus,
|
||||
collected: boolean,
|
||||
name: string,
|
||||
items: GenericToolRunItem[],
|
||||
): string {
|
||||
if (family === "content-search") {
|
||||
return statusCopy(
|
||||
status,
|
||||
collected ? "Reviewing sources" : "Searching files",
|
||||
collected ? "Reviewed sources" : "Searched files",
|
||||
collected ? "Could not review sources" : "Could not search files",
|
||||
);
|
||||
}
|
||||
if (family === "file-search") {
|
||||
return statusCopy(status, "Finding files", "Found files", "Could not find files");
|
||||
}
|
||||
if (family === "list") {
|
||||
return statusCopy(status, "Listing files", "Listed files", "Could not list files");
|
||||
}
|
||||
if (family === "read") {
|
||||
return statusCopy(
|
||||
status,
|
||||
collected ? "Reading source" : "Reading file",
|
||||
collected ? "Read source" : "Read file",
|
||||
collected ? "Could not read source" : "Could not read file",
|
||||
);
|
||||
}
|
||||
if (family === "memory") {
|
||||
return statusCopy(status, "Searching memory", "Searched memory", "Could not search memory");
|
||||
}
|
||||
|
||||
const action = fieldValue(items[0]?.trace, "action").toLowerCase();
|
||||
switch (name) {
|
||||
case "generate_image":
|
||||
return statusCopy(status, "Generating image", "Generated image", "Could not generate image");
|
||||
case "spawn":
|
||||
return statusCopy(status, "Delegating task", "Delegated task", "Could not delegate task");
|
||||
case "message":
|
||||
return statusCopy(status, "Sending message", "Sent message", "Could not send message");
|
||||
case "my":
|
||||
return action === "set" || action === "modify"
|
||||
? statusCopy(status, "Updating agent settings", "Updated agent settings", "Could not update agent settings")
|
||||
: statusCopy(status, "Checking agent settings", "Checked agent settings", "Could not check agent settings");
|
||||
case "cron":
|
||||
if (action === "add") return statusCopy(status, "Scheduling automation", "Scheduled automation", "Could not schedule automation");
|
||||
if (action === "remove") return statusCopy(status, "Removing automation", "Removed automation", "Could not remove automation");
|
||||
return statusCopy(status, "Checking automations", "Checked automations", "Could not check automations");
|
||||
case "create_goal":
|
||||
return statusCopy(status, "Starting long task", "Started long task", "Could not start long task");
|
||||
case "update_goal":
|
||||
return statusCopy(status, "Updating long task", "Updated long task", "Could not update long task");
|
||||
case "write_stdin":
|
||||
return statusCopy(status, "Continuing command", "Continued command", "Could not continue command");
|
||||
case "list_exec_sessions":
|
||||
return statusCopy(status, "Checking running commands", "Checked running commands", "Could not check running commands");
|
||||
case "screenshot":
|
||||
case "capture_screenshot":
|
||||
return statusCopy(status, "Capturing screenshot", "Captured screenshot", "Could not capture screenshot");
|
||||
default: {
|
||||
const humanName = humanizeToolName(name);
|
||||
return statusCopy(
|
||||
status,
|
||||
`Running ${humanName}`,
|
||||
`Completed ${humanName}`,
|
||||
`Could not complete ${humanName}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function activityDetail(items: GenericToolRunItem[], family: ToolFamily, name: string): string {
|
||||
if (items.length !== 1) return "";
|
||||
const trace = items[0].trace;
|
||||
if (family === "content-search") {
|
||||
return quote(fieldValue(trace, "query") || fieldValue(trace, "pattern"));
|
||||
}
|
||||
if (family === "file-search") {
|
||||
return compactDetail(
|
||||
fieldValue(trace, "glob")
|
||||
|| fieldValue(trace, "query")
|
||||
|| fieldValue(trace, "pattern")
|
||||
|| fieldValue(trace, "path"),
|
||||
);
|
||||
}
|
||||
if (family === "list" || family === "read") {
|
||||
return compactDetail(fieldValue(trace, "path") || fieldValue(trace, "file_path"));
|
||||
}
|
||||
if (family === "memory") return quote(fieldValue(trace, "query"));
|
||||
|
||||
switch (name) {
|
||||
case "spawn":
|
||||
return safeText(fieldValue(trace, "label"));
|
||||
case "message":
|
||||
return safeText(fieldValue(trace, "channel"));
|
||||
case "my":
|
||||
return safeText(fieldValue(trace, "key"));
|
||||
case "cron":
|
||||
return safeText(fieldValue(trace, "name"));
|
||||
case "create_goal":
|
||||
return safeText(fieldValue(trace, "ui_summary"));
|
||||
case "update_goal":
|
||||
return safeText(fieldValue(trace, "action"));
|
||||
case "write_stdin":
|
||||
return compactIdentifier(fieldValue(trace, "session_id"));
|
||||
case "screenshot":
|
||||
case "capture_screenshot":
|
||||
return "";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function activityAside(items: GenericToolRunItem[], family: ToolFamily): string {
|
||||
const pathCount = uniqueValues(items, ["path", "file_path"]).length;
|
||||
if (pathCount > 1) return `${pathCount} files`;
|
||||
if (items.length <= 1) return "";
|
||||
if (family === "content-search" || family === "file-search" || family === "memory") {
|
||||
return `${items.length} searches`;
|
||||
}
|
||||
return `${items.length} actions`;
|
||||
}
|
||||
|
||||
function fieldValue(trace: GenericToolTrace | undefined, key: ToolField["key"]): string {
|
||||
return trace?.fields.find((field) => field.key === key)?.value ?? "";
|
||||
}
|
||||
|
||||
function uniqueValues(items: GenericToolRunItem[], keys: ToolField["key"][]): string[] {
|
||||
const values = items.flatMap((item) => item.trace.fields)
|
||||
.filter((field) => keys.includes(field.key))
|
||||
.map((field) => field.value);
|
||||
return [...new Set(values)];
|
||||
}
|
||||
|
||||
function statusCopy(status: GenericToolStatus, running: string, done: string, failed: string): string {
|
||||
return status === "running" ? running : status === "error" ? failed : done;
|
||||
}
|
||||
|
||||
function compactDetail(value: string): string {
|
||||
return value ? truncateMiddle(compactGenericToolPath(value), 88) : "";
|
||||
}
|
||||
|
||||
function safeText(value: string): string {
|
||||
return value ? truncateMiddle(redactActivityText(value).replace(/\s+/g, " ").trim(), 88) : "";
|
||||
}
|
||||
|
||||
function quote(value: string): string {
|
||||
const safe = safeText(value);
|
||||
return safe ? `“${safe}”` : "";
|
||||
}
|
||||
|
||||
function compactIdentifier(value: string): string {
|
||||
const safe = safeText(value);
|
||||
if (safe.length <= 16) return safe;
|
||||
return `${safe.slice(0, 7)}…${safe.slice(-5)}`;
|
||||
}
|
||||
|
||||
function humanizeToolName(name: string): string {
|
||||
const words = name
|
||||
.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
|
||||
.replace(/[._-]+/g, " ")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "tool action";
|
||||
}
|
||||
|
||||
function isCollectedSourcePath(value: string): boolean {
|
||||
const normalized = value.replace(/\\/g, "/");
|
||||
return normalized.includes("/.nanobot/tool-results/") || normalized.includes("/nanobot/tool-results/");
|
||||
}
|
||||
|
||||
function truncateMiddle(value: string, maxLength: number): string {
|
||||
if (value.length <= maxLength) return value;
|
||||
const head = Math.ceil((maxLength - 1) * 0.62);
|
||||
const tail = Math.floor((maxLength - 1) * 0.38);
|
||||
return `${value.slice(0, head)}…${value.slice(-tail)}`;
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { safeActivityDetail } from "./activity-text";
|
||||
import { formatCompactWebUrl, parseSafeActivityHttpUrl } from "./web-url";
|
||||
|
||||
export type McpActivityStatus = "running" | "done" | "error";
|
||||
|
||||
export interface McpActivityDescription {
|
||||
action: string;
|
||||
target?: string;
|
||||
}
|
||||
|
||||
export function describeMcpActivity(
|
||||
toolName: string,
|
||||
args: unknown,
|
||||
status: McpActivityStatus,
|
||||
): McpActivityDescription {
|
||||
const name = toolName.toLowerCase();
|
||||
|
||||
if (matches(name, "navigate", "goto", "open_url", "visit")) {
|
||||
return describe(status, "Opening", "Opened", "Could not open", value(args, ["url"]));
|
||||
}
|
||||
if (matches(name, "click", "tap")) {
|
||||
return describe(status, "Clicking", "Clicked", "Could not click", elementTarget(args));
|
||||
}
|
||||
if (matches(name, "type", "fill", "enter_text", "insert_text")) {
|
||||
const target = value(args, ["element", "selector", "ref", "name"]);
|
||||
return describe(status, "Entering text", "Entered text", "Could not enter text", target && `in ${target}`);
|
||||
}
|
||||
if (matches(name, "press_key", "keypress")) {
|
||||
return describe(status, "Pressing", "Pressed", "Could not press", value(args, ["key"]));
|
||||
}
|
||||
if (matches(name, "hover")) {
|
||||
return describe(status, "Hovering over", "Hovered over", "Could not hover over", elementTarget(args));
|
||||
}
|
||||
if (matches(name, "select", "select_option")) {
|
||||
return describe(status, "Selecting", "Selected", "Could not select", elementTarget(args));
|
||||
}
|
||||
if (matches(name, "snapshot", "inspect", "get_page_content", "page_content")) {
|
||||
return describe(status, "Inspecting page", "Inspected page", "Could not inspect page");
|
||||
}
|
||||
if (matches(name, "screenshot", "capture_screenshot")) {
|
||||
return describe(status, "Capturing screenshot", "Captured screenshot", "Could not capture screenshot");
|
||||
}
|
||||
if (matches(name, "wait", "wait_for")) {
|
||||
return describe(status, "Waiting for page", "Waited for page", "Page did not become ready");
|
||||
}
|
||||
if (matches(name, "search", "web_search")) {
|
||||
return describe(status, "Searching", "Searched", "Could not search", value(args, ["query", "q"]));
|
||||
}
|
||||
|
||||
const action = humanizeToolName(toolName);
|
||||
if (status === "running") return { action: `Running ${action}` };
|
||||
if (status === "error") return { action: `${action} failed` };
|
||||
return { action: `${action} completed` };
|
||||
}
|
||||
|
||||
function describe(
|
||||
status: McpActivityStatus,
|
||||
running: string,
|
||||
done: string,
|
||||
failed: string,
|
||||
target?: string,
|
||||
): McpActivityDescription {
|
||||
return {
|
||||
action: status === "running" ? running : status === "error" ? failed : done,
|
||||
target: target ? compactUrl(target) : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
function matches(name: string, ...actions: string[]): boolean {
|
||||
return actions.some((action) => name === action || name.endsWith(`_${action}`));
|
||||
}
|
||||
|
||||
function elementTarget(args: unknown): string | undefined {
|
||||
return value(args, ["element", "selector", "ref", "name", "text"]);
|
||||
}
|
||||
|
||||
function value(args: unknown, keys: string[]): string | undefined {
|
||||
if (!args || typeof args !== "object" || Array.isArray(args)) return undefined;
|
||||
const record = args as Record<string, unknown>;
|
||||
for (const key of keys) {
|
||||
const candidate = record[key];
|
||||
if (typeof candidate === "string" && candidate.trim()) return candidate.trim();
|
||||
if (typeof candidate === "number" || typeof candidate === "boolean") return String(candidate);
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function compactUrl(value: string): string {
|
||||
const url = parseSafeActivityHttpUrl(value);
|
||||
if (url) return formatCompactWebUrl(url);
|
||||
if (/^https?:\/\//i.test(value.trim())) return "Private address";
|
||||
return safeActivityDetail(value, 80);
|
||||
}
|
||||
|
||||
function humanizeToolName(value: string): string {
|
||||
const words = value
|
||||
.replace(/^(?:browser|page|playwright)[_.-]+/i, "")
|
||||
.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
|
||||
.replace(/[_.-]+/g, " ")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "Tool call";
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export function compactReasoningPreview(value: string): string {
|
||||
return value
|
||||
.replace(/\[([^\]]+)]\([^)]+\)/g, "$1")
|
||||
.replace(/[*_#`~]+/g, "")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
import type { GenericToolStatus } from "./generic-tool-model";
|
||||
import { safeActivityDetail, summarizeShellCommand } from "./activity-text";
|
||||
import { presentWebSearchAction } from "./web-search-model";
|
||||
import { displayWebHost, formatCompactWebUrl, parseSafeActivityHttpUrl } from "./web-url";
|
||||
|
||||
export interface TraceDescription {
|
||||
kind: "search" | "tool" | "done" | "trace";
|
||||
label: string;
|
||||
detail: string;
|
||||
icon?: "clock";
|
||||
url?: string;
|
||||
host?: string;
|
||||
}
|
||||
|
||||
export function describeTraceLine(
|
||||
line: string,
|
||||
status: GenericToolStatus,
|
||||
result?: unknown,
|
||||
): TraceDescription {
|
||||
const trimmed = line.trim();
|
||||
const functionMatch = /^([a-zA-Z0-9_.-]+)\((.*)\)$/.exec(trimmed);
|
||||
const name = (functionMatch?.[1] ?? "").toLowerCase().split(".").pop() || "";
|
||||
const args = functionMatch?.[2] ?? "";
|
||||
const parsedUrl = traceUrlFromArgs(args, trimmed);
|
||||
const webDetail = parsedUrl ? formatCompactWebUrl(parsedUrl) : "";
|
||||
const plainWebReadTrace =
|
||||
!!parsedUrl && /\b(fetch(?:ing|ed)?|read(?:ing)?|opened?|opening)\b/i.test(trimmed);
|
||||
|
||||
if (/search/i.test(name)) {
|
||||
const query = traceFieldFromArgs(args, ["query", "q", "text"]) || args || trimmed;
|
||||
return {
|
||||
kind: "search",
|
||||
label: presentWebSearchAction(query, status),
|
||||
detail: "",
|
||||
};
|
||||
}
|
||||
if (/fetch|read|open/i.test(name) || plainWebReadTrace) {
|
||||
const rawTarget = traceFieldFromArgs(args, ["path", "file_path", "url"]) || args || trimmed;
|
||||
const pageTitle = parsedUrl ? webPageTitle(result) : "";
|
||||
return {
|
||||
kind: "tool",
|
||||
label: pageTitle || statusCopy(status, "Reading", "Read", "Could not read"),
|
||||
detail: webDetail || (/^https?:\/\//i.test(rawTarget.trim())
|
||||
? "Private address"
|
||||
: safeActivityDetail(rawTarget)),
|
||||
url: parsedUrl?.href,
|
||||
host: parsedUrl ? displayWebHost(parsedUrl.hostname) : undefined,
|
||||
};
|
||||
}
|
||||
if (isShellTraceName(name)) return describeShellTrace(args, trimmed, status);
|
||||
if (name === "write_file") {
|
||||
return describeFileMutationTrace(args, status, "Writing file", "Wrote file", "Could not write file");
|
||||
}
|
||||
if (name === "edit_file" || name === "apply_patch") {
|
||||
return describeFileMutationTrace(args, status, "Editing file", "Edited file", "Could not edit file");
|
||||
}
|
||||
if (name) {
|
||||
const action = humanizeTraceToolName(name);
|
||||
return {
|
||||
kind: "tool",
|
||||
label: statusCopy(
|
||||
status,
|
||||
`Running ${action}`,
|
||||
`Completed ${action}`,
|
||||
`Could not complete ${action}`,
|
||||
),
|
||||
detail: "",
|
||||
};
|
||||
}
|
||||
if (/done|complete|success/i.test(trimmed)) {
|
||||
return { kind: "done", label: "Completed step", detail: safeActivityDetail(trimmed) };
|
||||
}
|
||||
return {
|
||||
kind: status === "done" ? "done" : "trace",
|
||||
label: statusCopy(status, "Working", "Completed step", "Step failed"),
|
||||
detail: safeActivityDetail(trimmed),
|
||||
};
|
||||
}
|
||||
|
||||
function webPageTitle(result: unknown): string {
|
||||
if (result && typeof result === "object" && !Array.isArray(result)) {
|
||||
const title = (result as Record<string, unknown>).title;
|
||||
if (typeof title === "string") return safeActivityDetail(title);
|
||||
}
|
||||
if (typeof result !== "string") return "";
|
||||
const heading = result.match(/^#\s+(.+)$/m)?.[1]?.trim();
|
||||
return heading ? safeActivityDetail(heading) : "";
|
||||
}
|
||||
|
||||
function describeShellTrace(
|
||||
args: string,
|
||||
fallback: string,
|
||||
status: GenericToolStatus,
|
||||
): TraceDescription {
|
||||
const command = shellCommandFromArgs(args) || fallback;
|
||||
if (/^(?:\/(?:usr\/)?bin\/)?date(?:\s|$)/i.test(command.trim())) {
|
||||
return {
|
||||
kind: "tool",
|
||||
label: statusCopy(
|
||||
status,
|
||||
"Checking current time",
|
||||
"Checked current time",
|
||||
"Could not check current time",
|
||||
),
|
||||
detail: "",
|
||||
icon: "clock",
|
||||
};
|
||||
}
|
||||
return {
|
||||
kind: "tool",
|
||||
label: statusCopy(status, "Running command", "Ran command", "Command failed"),
|
||||
detail: summarizeShellCommand(command),
|
||||
};
|
||||
}
|
||||
|
||||
function describeFileMutationTrace(
|
||||
args: string,
|
||||
status: GenericToolStatus,
|
||||
running: string,
|
||||
done: string,
|
||||
failed: string,
|
||||
): TraceDescription {
|
||||
const path = traceFieldFromArgs(args, ["path", "file_path"]);
|
||||
return {
|
||||
kind: "tool",
|
||||
label: statusCopy(status, running, done, failed),
|
||||
detail: path ? safeActivityDetail(path) : "",
|
||||
};
|
||||
}
|
||||
|
||||
function statusCopy(
|
||||
status: GenericToolStatus,
|
||||
running: string,
|
||||
done: string,
|
||||
failed: string,
|
||||
): string {
|
||||
return status === "running" ? running : status === "error" ? failed : done;
|
||||
}
|
||||
|
||||
function traceFieldFromArgs(args: string, keys: string[]): string {
|
||||
const compactArgs = args.trim();
|
||||
if (!compactArgs) return "";
|
||||
try {
|
||||
const parsed = JSON.parse(compactArgs) as unknown;
|
||||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return "";
|
||||
const record = parsed as Record<string, unknown>;
|
||||
for (const key of keys) {
|
||||
const value = record[key];
|
||||
if (typeof value === "string" && value.trim()) return value.trim();
|
||||
}
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function isShellTraceName(name: string): boolean {
|
||||
return [
|
||||
"exec",
|
||||
"exec_command",
|
||||
"execute_command",
|
||||
"run_command",
|
||||
"run_shell",
|
||||
"shell",
|
||||
"terminal",
|
||||
"bash",
|
||||
"sh",
|
||||
].includes(name.toLowerCase().split(".").pop() || name.toLowerCase());
|
||||
}
|
||||
|
||||
function shellCommandFromArgs(args: string): string {
|
||||
const compactArgs = args.trim();
|
||||
if (!compactArgs) return "";
|
||||
try {
|
||||
const parsed = JSON.parse(compactArgs) as unknown;
|
||||
if (typeof parsed === "string") return parsed;
|
||||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return "";
|
||||
const record = parsed as Record<string, unknown>;
|
||||
for (const key of ["command", "cmd", "script", "input"]) {
|
||||
const value = record[key];
|
||||
if (typeof value === "string" && value.trim()) return value;
|
||||
}
|
||||
} catch {
|
||||
return compactArgs.replace(/^["']|["']$/g, "");
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function humanizeTraceToolName(name: string): string {
|
||||
const words = name
|
||||
.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
|
||||
.replace(/[._-]+/g, " ")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "tool action";
|
||||
}
|
||||
|
||||
function traceUrlFromArgs(args: string, fallback: string): URL | null {
|
||||
const candidates: string[] = [];
|
||||
const compactArgs = args.trim();
|
||||
if (compactArgs) {
|
||||
try {
|
||||
collectUrlCandidates(JSON.parse(compactArgs), candidates);
|
||||
} catch {
|
||||
candidates.push(compactArgs.replace(/^["']|["']$/g, ""));
|
||||
}
|
||||
}
|
||||
candidates.push(fallback);
|
||||
for (const candidate of candidates) {
|
||||
const url = parseSafeActivityHttpUrl(candidate);
|
||||
if (url) return url;
|
||||
const embedded = candidate.match(/https?:\/\/[^\s"'<>),]+/i)?.[0];
|
||||
if (embedded) {
|
||||
const embeddedUrl = parseSafeActivityHttpUrl(embedded);
|
||||
if (embeddedUrl) return embeddedUrl;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function collectUrlCandidates(value: unknown, candidates: string[]) {
|
||||
if (typeof value === "string") {
|
||||
candidates.push(value);
|
||||
return;
|
||||
}
|
||||
if (!value || typeof value !== "object") return;
|
||||
if (Array.isArray(value)) {
|
||||
for (const item of value.slice(0, 6)) collectUrlCandidates(item, candidates);
|
||||
return;
|
||||
}
|
||||
const record = value as Record<string, unknown>;
|
||||
for (const key of ["url", "uri", "href", "link"]) {
|
||||
if (typeof record[key] === "string") candidates.push(record[key]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
import { canonicalToolTrace, formatToolCallTrace } from "@/lib/tool-traces";
|
||||
import type { ToolProgressEvent } from "@/lib/types";
|
||||
|
||||
import { redactActivityText, safeActivityDetail } from "./activity-text";
|
||||
import { displayWebHost, formatCompactWebUrl, parseSafeActivityHttpUrl } from "./web-url";
|
||||
|
||||
export type WebSearchStatus = "running" | "done" | "error";
|
||||
|
||||
export interface WebSearchSource {
|
||||
title: string;
|
||||
href: string;
|
||||
host: string;
|
||||
displayUrl: string;
|
||||
}
|
||||
|
||||
export interface WebSearchRunModel {
|
||||
key: string;
|
||||
query: string;
|
||||
status: WebSearchStatus;
|
||||
sources: WebSearchSource[];
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface WebSearchQueryPresentation {
|
||||
query: string;
|
||||
scope?: string;
|
||||
}
|
||||
|
||||
const WEB_SEARCH_STATUS_RANK: Record<WebSearchStatus, number> = {
|
||||
running: 1,
|
||||
done: 2,
|
||||
error: 3,
|
||||
};
|
||||
const MAX_VISIBLE_SOURCES = 8;
|
||||
|
||||
export function webSearchRunsByTraceLine(
|
||||
events: ToolProgressEvent[],
|
||||
): Map<string, WebSearchRunModel> {
|
||||
const runs = new Map<string, WebSearchRunModel>();
|
||||
for (const event of events) {
|
||||
const run = webSearchRunFromEvent(event);
|
||||
const line = run ? formatToolCallTrace(event) : null;
|
||||
if (!run || !line) continue;
|
||||
const key = canonicalToolTrace(line);
|
||||
runs.set(key, mergeWebSearchRun(runs.get(key), run));
|
||||
}
|
||||
return runs;
|
||||
}
|
||||
|
||||
function webSearchRunFromEvent(event: ToolProgressEvent): WebSearchRunModel | null {
|
||||
const name = compactToolName(toolEventName(event));
|
||||
if (name !== "web_search") return null;
|
||||
|
||||
const args = toolEventArguments(event);
|
||||
const query = stringField(args, ["query", "q", "text"]);
|
||||
const status: WebSearchStatus = event.phase === "error"
|
||||
? "error"
|
||||
: event.phase === "end"
|
||||
? "done"
|
||||
: "running";
|
||||
|
||||
return {
|
||||
key: event.call_id ? `call:${event.call_id}` : formatToolCallTrace(event) ?? `web_search:${query}`,
|
||||
query,
|
||||
status,
|
||||
sources: status === "done" ? webSearchSources(event.result) : [],
|
||||
error: status === "error" ? readableError(event.error) : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
function presentWebSearchQuery(query: string): WebSearchQueryPresentation {
|
||||
const scopes: string[] = [];
|
||||
const safeQuery = redactActivityText(query);
|
||||
const cleanQuery = safeQuery
|
||||
.replace(/(?:^|\s)site:([^\s]+)/gi, (_match, rawSite: string) => {
|
||||
const scope = webSearchScope(rawSite);
|
||||
if (scope && !scopes.includes(scope)) scopes.push(scope);
|
||||
return " ";
|
||||
})
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
|
||||
return {
|
||||
query: cleanQuery || safeQuery.trim(),
|
||||
...(scopes.length === 1 ? { scope: scopes[0] } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
export function presentWebSearchAction(
|
||||
query: string,
|
||||
status: WebSearchStatus,
|
||||
): string {
|
||||
const presentation = presentWebSearchQuery(query);
|
||||
const verb = status === "error"
|
||||
? "Could not search"
|
||||
: status === "running"
|
||||
? "Searching"
|
||||
: "Searched";
|
||||
const target = [presentation.scope, presentation.query].filter(Boolean).join(" · ");
|
||||
return target ? `${verb} ${target}` : verb;
|
||||
}
|
||||
|
||||
function mergeWebSearchRun(
|
||||
existing: WebSearchRunModel | undefined,
|
||||
incoming: WebSearchRunModel,
|
||||
): WebSearchRunModel {
|
||||
if (!existing) return incoming;
|
||||
if (WEB_SEARCH_STATUS_RANK[incoming.status] < WEB_SEARCH_STATUS_RANK[existing.status]) {
|
||||
return existing;
|
||||
}
|
||||
return {
|
||||
...existing,
|
||||
...incoming,
|
||||
query: incoming.query || existing.query,
|
||||
sources: incoming.sources.length ? incoming.sources : existing.sources,
|
||||
};
|
||||
}
|
||||
|
||||
function webSearchSources(result: unknown): WebSearchSource[] {
|
||||
const candidates = structuredCandidates(result);
|
||||
if (typeof result === "string") candidates.push(...textCandidates(result));
|
||||
if (result && typeof result === "object" && !Array.isArray(result)) {
|
||||
const record = result as Record<string, unknown>;
|
||||
for (const key of ["content", "text", "result"]) {
|
||||
if (typeof record[key] === "string") candidates.push(...textCandidates(record[key]));
|
||||
}
|
||||
}
|
||||
|
||||
const seen = new Set<string>();
|
||||
const sources: WebSearchSource[] = [];
|
||||
for (const candidate of candidates) {
|
||||
const url = parseSafeActivityHttpUrl(candidate.url);
|
||||
if (!url || seen.has(url.href)) continue;
|
||||
seen.add(url.href);
|
||||
sources.push({
|
||||
title: cleanTitle(candidate.title) || displayWebHost(url.hostname),
|
||||
href: url.href,
|
||||
host: displayWebHost(url.hostname),
|
||||
displayUrl: formatCompactWebUrl(url),
|
||||
});
|
||||
if (sources.length >= MAX_VISIBLE_SOURCES) break;
|
||||
}
|
||||
return sources;
|
||||
}
|
||||
|
||||
function structuredCandidates(value: unknown): Array<{ title: string; url: string }> {
|
||||
const items: unknown[] = [];
|
||||
if (Array.isArray(value)) items.push(...value);
|
||||
if (value && typeof value === "object" && !Array.isArray(value)) {
|
||||
const record = value as Record<string, unknown>;
|
||||
for (const key of ["results", "items", "sources", "data"]) {
|
||||
if (Array.isArray(record[key])) items.push(...record[key]);
|
||||
}
|
||||
}
|
||||
|
||||
return items.flatMap((item) => {
|
||||
if (!item || typeof item !== "object" || Array.isArray(item)) return [];
|
||||
const record = item as Record<string, unknown>;
|
||||
const title = stringField(record, ["title", "name", "label"]);
|
||||
const url = stringField(record, ["url", "href", "link", "uri"]);
|
||||
return url ? [{ title, url }] : [];
|
||||
});
|
||||
}
|
||||
|
||||
function textCandidates(text: string): Array<{ title: string; url: string }> {
|
||||
const lines = text.split(/\r?\n/).map((line) => line.trim());
|
||||
const candidates: Array<{ title: string; url: string }> = [];
|
||||
|
||||
for (let index = 0; index < lines.length; index += 1) {
|
||||
const line = lines[index];
|
||||
if (!line) continue;
|
||||
|
||||
const markdownLink = /^\s*(?:\d+[.)]\s*)?\[([^\]]+)]\((https?:\/\/[^)]+)\)\s*$/.exec(line);
|
||||
if (markdownLink) {
|
||||
candidates.push({ title: markdownLink[1], url: markdownLink[2] });
|
||||
continue;
|
||||
}
|
||||
|
||||
const numberedTitle = /^\d+[.)]\s+(.+)$/.exec(line);
|
||||
if (!numberedTitle) continue;
|
||||
|
||||
const inlineUrl = firstHttpUrl(numberedTitle[1]);
|
||||
if (inlineUrl) {
|
||||
candidates.push({
|
||||
title: numberedTitle[1].replace(inlineUrl, "").replace(/[\s:|\-–—]+$/, ""),
|
||||
url: inlineUrl,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
for (let next = index + 1; next < lines.length; next += 1) {
|
||||
if (/^\d+[.)]\s+/.test(lines[next])) break;
|
||||
const url = firstHttpUrl(lines[next]);
|
||||
if (!url) continue;
|
||||
candidates.push({ title: numberedTitle[1], url });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return candidates;
|
||||
}
|
||||
|
||||
function firstHttpUrl(value: string): string {
|
||||
return value.match(/https?:\/\/[^\s<>"']+/i)?.[0]?.replace(/[),.;\]}]+$/, "") ?? "";
|
||||
}
|
||||
|
||||
function cleanTitle(value: string): string {
|
||||
return redactActivityText(value)
|
||||
.replace(/^#+\s*/, "")
|
||||
.replace(/^\*\*(.*)\*\*$/, "$1")
|
||||
.replace(/^__(.*)__$/, "$1")
|
||||
.trim();
|
||||
}
|
||||
|
||||
function compactToolName(name: string): string {
|
||||
return name.toLowerCase().split(".").pop() || name.toLowerCase();
|
||||
}
|
||||
|
||||
function webSearchScope(rawSite: string): string | undefined {
|
||||
const candidate = rawSite.replace(/^https?:\/\//i, "").replace(/^www\./i, "");
|
||||
let host = candidate.split("/")[0]?.toLowerCase();
|
||||
if (!host) return undefined;
|
||||
if (host.startsWith("www.")) host = host.slice(4);
|
||||
|
||||
const knownScope = WEB_SEARCH_SCOPE_NAMES[host];
|
||||
return knownScope ?? displayWebHost(host);
|
||||
}
|
||||
|
||||
const WEB_SEARCH_SCOPE_NAMES: Record<string, string> = {
|
||||
"anthropic.com": "Anthropic",
|
||||
"crunchbase.com": "Crunchbase",
|
||||
"github.com": "GitHub",
|
||||
"linkedin.com": "LinkedIn",
|
||||
"openai.com": "OpenAI",
|
||||
"reddit.com": "Reddit",
|
||||
"x.com": "X",
|
||||
"youtube.com": "YouTube",
|
||||
};
|
||||
|
||||
function toolEventName(event: ToolProgressEvent): string {
|
||||
const functionName = (event as { function?: { name?: unknown } }).function?.name;
|
||||
if (typeof functionName === "string") return functionName;
|
||||
return typeof event.name === "string" ? event.name : "";
|
||||
}
|
||||
|
||||
function toolEventArguments(event: ToolProgressEvent): unknown {
|
||||
const functionArgs = (event as { function?: { arguments?: unknown } }).function?.arguments;
|
||||
const raw = functionArgs ?? event.arguments;
|
||||
if (typeof raw !== "string") return raw ?? {};
|
||||
try {
|
||||
return raw.trim() ? JSON.parse(raw) : {};
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function stringField(value: unknown, keys: string[]): string {
|
||||
if (!value || typeof value !== "object" || Array.isArray(value)) return "";
|
||||
const record = value as Record<string, unknown>;
|
||||
for (const key of keys) {
|
||||
const field = record[key];
|
||||
if (typeof field === "string" && field.trim()) return field.trim();
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function readableError(error: unknown): string | undefined {
|
||||
if (typeof error === "string" && error.trim()) return safeErrorText(error);
|
||||
if (!error) return undefined;
|
||||
try {
|
||||
return safeErrorText(JSON.stringify(error));
|
||||
} catch {
|
||||
return "Web search failed";
|
||||
}
|
||||
}
|
||||
|
||||
function safeErrorText(value: string): string {
|
||||
return safeActivityDetail(value, 240);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
export function parsePublicHttpUrl(value: string): URL | null {
|
||||
try {
|
||||
const url = new URL(value);
|
||||
if (url.protocol !== "http:" && url.protocol !== "https:") return null;
|
||||
if (url.username || url.password) return null;
|
||||
if (isPrivateHostname(url.hostname)) return null;
|
||||
return url;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** Public URL normalized for timeline display, with credentials and request-specific noise removed. */
|
||||
export function parseSafeActivityHttpUrl(value: string): URL | null {
|
||||
try {
|
||||
const url = new URL(value);
|
||||
if (url.protocol !== "http:" && url.protocol !== "https:") return null;
|
||||
if (isPrivateHostname(url.hostname)) return null;
|
||||
url.username = "";
|
||||
url.password = "";
|
||||
url.search = "";
|
||||
url.hash = "";
|
||||
return url;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function displayWebHost(hostname: string): string {
|
||||
return hostname.replace(/^www\./i, "").toLowerCase();
|
||||
}
|
||||
|
||||
export function formatCompactWebUrl(url: URL): string {
|
||||
const host = displayWebHost(url.hostname);
|
||||
const path = url.pathname && url.pathname !== "/" ? url.pathname.replace(/\/$/, "") : "";
|
||||
return `${host}${path}`;
|
||||
}
|
||||
|
||||
function isPrivateHostname(hostname: string): boolean {
|
||||
const host = hostname.replace(/^\[|\]$/g, "").toLowerCase();
|
||||
if (
|
||||
!host
|
||||
|| host === "localhost"
|
||||
|| [".local", ".localhost", ".internal", ".home", ".lan"].some((suffix) => host.endsWith(suffix))
|
||||
) return true;
|
||||
if (!host.includes(".") && !host.includes(":")) return true;
|
||||
|
||||
const ipv4 = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(host);
|
||||
if (ipv4) {
|
||||
const [, aText, bText] = ipv4;
|
||||
const a = Number(aText);
|
||||
const b = Number(bText);
|
||||
return (
|
||||
a === 0 ||
|
||||
a === 10 ||
|
||||
a === 127 ||
|
||||
(a === 100 && b >= 64 && b <= 127) ||
|
||||
(a === 169 && b === 254) ||
|
||||
(a === 172 && b >= 16 && b <= 31) ||
|
||||
(a === 192 && b === 168)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
host === "::"
|
||||
|| host === "::1"
|
||||
|| host.startsWith("::ffff:")
|
||||
|| host.startsWith("fc")
|
||||
|| host.startsWith("fd")
|
||||
|| host.startsWith("fe80:")
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user