@recombine-ai/bosun 0.16.1 → 0.16.2-cloud-2

package/src/lib/components/CollapseExpand.svelte

@@ -1,425 +0,0 @@
-<script lang="ts">
-	export let value: string | any[] = ''
-	export let limit = 200
-	export let maxLines: number | null = null
-	export let className = ''
-	// export let expandedLabel = 'collapse'
-	export let collapsedLabel = '...more'
-	export let initiallyExpanded = false
-	export let stopPropagation = true
-	export let expanded = initiallyExpanded
-	export let treatPlainText = false
-	export let highlightPrompt = false
-
-	type Segment = {
-		text: string
-		role?: string
-		time?: string
-		duration?: number
-	}
-
-	function escapeHtml(text: string): string {
-		return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-	}
-
-	function highlightPromptText(raw: string): string {
-		const s = normalizeNewlines(raw)
-		let html = escapeHtml(s)
-
-		const curlyBlocks: string[] = []
-		html = html.replace(/(\{+[\s\S]*?\}+)/g, (match) => {
-			const id = curlyBlocks.length
-			curlyBlocks.push(match)
-			return `__CURLY${id}__`
-		})
-
-		// Rows beginnig with # --> .mtk8 (blue)
-		html = html.replace(/^(\s*#.*)$/gm, '<span class="prompt-heading">$1</span>')
-
-		// <> --> .mtk8 (blue)
-		html = html.replace(/(&lt;[^&]*?&gt;)/g, '<span class="mtk8">$1</span>')
-
-		// "1. ", "2) ", "10." --> .mtk8 (blue)
-		html = html.replace(
-			/^(\s*)(\d+)([.)])(\s+)/gm,
-			(_match, p1, p2, p3, p4) => `${p1}<span class="mtk8">${p2}${p3}</span>${p4}`
-		)
-
-		// {} --> .mtk5 (orange)
-		curlyBlocks.forEach((block, idx) => {
-			const highlighted = `<span class="mtk5">${block}</span>`
-			html = html.replace(`__CURLY${idx}__`, highlighted)
-		})
-
-		// \n --> <br/>
-		html = html.replace(/\n/g, '<br/>')
-
-		return html
-	}
-
-	function normalizeNewlines(s: string): string {
-		let result = s.replace(/\r\n/g, '\n')
-		result = result.replace(/\\n/g, '\n')
-		return result
-	}
-
-	function getPlain(v: string | any[]): string {
-		try {
-			if (Array.isArray(v)) {
-				const s = v.map((s) => s?.text ?? s?.content ?? JSON.stringify(s)).join(' ')
-				return normalizeNewlines(s)
-			}
-			if (typeof v === 'string') {
-				try {
-					const parsed = JSON.parse(v)
-					if (Array.isArray(parsed)) {
-						const s = parsed.map((s: any) => s?.text ?? s?.content ?? JSON.stringify(s)).join(' ')
-						return normalizeNewlines(s)
-					}
-					return normalizeNewlines(v)
-				} catch {
-					return normalizeNewlines(v)
-				}
-			}
-			return normalizeNewlines(JSON.stringify(v))
-		} catch {
-			return normalizeNewlines(String(v ?? ''))
-		}
-	}
-
-	function getFull(v: string | any[]): string {
-		try {
-			if (Array.isArray(v)) {
-				const s = v.map((s) => s?.text ?? s?.content ?? JSON.stringify(s)).join('\n')
-				return normalizeNewlines(s)
-			}
-			if (typeof v === 'string') {
-				try {
-					const parsed = JSON.parse(v)
-					if (Array.isArray(parsed)) {
-						const s = parsed.map((s: any) => s?.text ?? s?.content ?? JSON.stringify(s)).join('\n')
-						return normalizeNewlines(s)
-					}
-					return normalizeNewlines(v)
-				} catch {
-					return normalizeNewlines(v)
-				}
-			}
-			return normalizeNewlines(JSON.stringify(v, null, 2))
-		} catch {
-			return normalizeNewlines(String(v ?? ''))
-		}
-	}
-
-	function parseLine(raw: string): Segment[] {
-		const s = normalizeNewlines(raw)
-
-		const lines = s
-			.split(/\n+/)
-			.map((l) => l.trim())
-			.filter((l) => l.length > 0)
-
-		const segments: Segment[] = []
-		let currentRole: string | undefined = undefined
-		let currentText = ''
-
-		for (const line of lines) {
-			const m = line.match(
-				/^(user|assistant|system|customer|caller|tool|model|agent)\s*[:\-]\s*(.*)$/i
-			)
-
-			if (m) {
-				if (currentText) {
-					segments.push({
-						text: currentText,
-						role: currentRole
-					})
-				}
-
-				currentRole = m[1].toLowerCase()
-				currentText = m[2] ?? ''
-			} else {
-				if (currentText) {
-					currentText += '\n' + line
-				} else {
-					currentText = line
-				}
-			}
-		}
-
-		if (currentText) {
-			segments.push({
-				text: currentText,
-				role: currentRole
-			})
-		}
-
-		return segments
-	}
-
-	function asSegments(v: string | any[]): Segment[] {
-		try {
-			let raw: any = v
-
-			if (typeof v === 'string') {
-				try {
-					raw = JSON.parse(v)
-				} catch {
-					if (!treatPlainText) return []
-
-					return parseLine(v)
-				}
-			}
-
-			// Support format { messages: [...] }
-			if (!Array.isArray(raw)) {
-				if (Array.isArray(raw?.messages)) {
-					raw = raw.messages
-				} else {
-					return []
-				}
-			}
-
-			return raw
-				.map((s: any) => {
-					let text: string
-
-					if (s?.text != null) {
-						text = String(s.text)
-					} else if (s?.content != null) {
-						if (Array.isArray(s.content)) {
-							text = s.content
-								.map((part: any) => {
-									if (typeof part === 'string') return part
-									if (typeof part?.text === 'string') return part.text
-									if (typeof part?.text?.value === 'string') return part.text.value
-									return JSON.stringify(part)
-								})
-								.join(' ')
-						} else if (typeof s.content === 'string') {
-							text = s.content
-						} else {
-							text = JSON.stringify(s.content)
-						}
-					} else if (typeof s === 'string') {
-						text = s
-					} else {
-						text = JSON.stringify(s)
-					}
-
-					return {
-						text: normalizeNewlines(text),
-						role: s?.role,
-						time: s?.time,
-						duration: s?.duration
-					} as Segment
-				})
-				.filter((s: Segment) => s.text && String(s.text).trim().length > 0)
-		} catch {
-			return []
-		}
-	}
-
-	const plain = () => getPlain(value)
-	const full = () => getFull(value)
-	const plainLines = () => plain().split('\n')
-	const segments = () => asSegments(value)
-	const hasStructuredTranscript = () => segments().length > 0
-
-	const isLong = () => {
-		if (maxLines != null) {
-			return plainLines().length > maxLines
-		}
-		return plain().length > limit
-	}
-
-	const collapsedText = () => {
-		const p = plain()
-		if (!isLong()) return p
-
-		//Max Lines
-		if (maxLines != null) {
-			return plainLines().slice(0, maxLines).join('\n')
-		}
-
-		// Symbols
-		return p.slice(0, limit)
-	}
-
-	// --- time / duration / role helpers ---
-	function formatTime(raw?: string): string | null {
-		if (!raw) return null
-		try {
-			const d = new Date(raw)
-			if (Number.isNaN(d.getTime())) return raw
-			return d.toLocaleTimeString(undefined, {
-				hour: '2-digit',
-				minute: '2-digit',
-				second: '2-digit'
-			})
-		} catch {
-			return raw
-		}
-	}
-
-	function formatDuration(raw?: number): string | null {
-		if (raw == null || !Number.isFinite(raw as any)) return null
-		const total = Number(raw)
-		const totalSec = Math.floor(total) // remove miliseconds
-		const m = Math.floor(totalSec / 60)
-		const s = totalSec % 60
-		const mm = String(m).padStart(2, '0')
-		const ss = String(s).padStart(2, '0')
-		return `${mm}:${ss}`
-	}
-
-	function normalizeRole(role?: string): string {
-		if (!role) return 'Assistant'
-		const r = role.trim()
-		if (!r) return 'Assistant'
-		return r.charAt(0).toUpperCase() + r.slice(1)
-	}
-
-	function isUserRole(role?: string): boolean {
-		const r = role?.toLowerCase() ?? ''
-		return r === 'user' || r === 'customer' || r === 'caller'
-	}
-
-	// System messages in <>
-	function splitSystem(text: string): { main: string; system: string[] } {
-		const system: string[] = []
-		const main = text
-			.replace(/<([^>]+)>/g, (_m, inner) => {
-				const cleaned = String(inner).trim()
-				if (cleaned) system.push(cleaned)
-				return ''
-			})
-			.trim()
-
-		return { main, system }
-	}
-
-	function toggle(e: Event) {
-		if (stopPropagation) e.stopPropagation()
-		expanded = !expanded
-	}
-
-	function onContainerClick(e: Event) {
-		if (stopPropagation) e.stopPropagation()
-	}
-</script>
-
-{#if expanded}
-	<!-- <div
-		class={`mt-1 max-h-96 cursor-text select-text overflow-y-auto rounded border-thin border-rc-gray-600 bg-rc-gray-900 p-2 pr-4 text-sm text-rc-gray-200 ${className}`}
-		onclick={onContainerClick}
-	> -->
-	{#if hasStructuredTranscript()}
-		<div class="space-y-3">
-			{#each segments() as seg}
-				{@const userSide = isUserRole(seg.role)}
-				{@const isSystem = (seg.role ?? '').toLowerCase() === 'system'}
-				{@const parts = splitSystem(seg.text)}
-				{@const t = formatTime(seg.time)}
-				{@const d = formatDuration(seg.duration)}
-
-				<div class={`flex ${userSide ? 'justify-end' : 'justify-start'}`}>
-					<div
-						class={`max-w-[70%] break-words rounded-md px-3 py-2 text-sm shadow-sm ${
-							userSide ? 'bg-rc-gray-600 text-rc-gray-100' : 'bg-rc-gray-700 text-rc-gray-100'
-						}`}
-					>
-						<!-- Role -->
-						<div
-							class={`my-1 text-xs font-semibold uppercase ${
-								isSystem
-									? 'text-rc-blue ' + (userSide ? 'text-right' : 'text-left')
-									: 'text-rc-green-200 ' + (userSide ? 'text-right' : 'text-left')
-							}`}
-						>
-							{normalizeRole(seg.role)}
-						</div>
-
-						<!-- Text & system messages -->
-						<div
-							class={`whitespace-pre-wrap break-words py-1 text-sm ${userSide ? 'text-justify' : 'text-left'} ${
-								isSystem ? 'italic text-rc-gray-200' : ''
-							}`}
-						>
-							{#if parts.main}
-								<div>{parts.main}</div>
-							{/if}
-
-							{#each parts.system as sys}
-								<div class="mt-1 whitespace-pre-wrap break-words text-xs italic text-rc-gray-200">
-									&lt;{sys}&gt;
-								</div>
-							{/each}
-						</div>
-
-						<!-- Time / duration -->
-						{#if t || d}
-							<div class={`mt-1 text-xs text-rc-gray-300 ${userSide ? 'text-right' : 'text-left'}`}>
-								{#if t}{t}{/if}
-								{#if t && d}
-									·
-								{/if}
-								{#if d}{d}{/if}
-							</div>
-						{/if}
-					</div>
-				</div>
-			{/each}
-		</div>
-	{:else}
-		<div class="whitespace-pre-wrap break-words">
-			{#if highlightPrompt}
-				{@html highlightPromptText(full())}
-			{:else}
-				{full()}
-			{/if}
-		</div>
-	{/if}
-	<!-- </div> -->
-	<!-- <div class="mt-2 pr-2 text-right">
-		<button class="text-rc-green-200 hover:text-rc-green-100" onclick={toggle}>
-			{expandedLabel}
-		</button>
-	</div> -->
-{:else}
-	<div
-		class={`mt-1 cursor-text select-text rounded bg-rc-gray-900 p-2 text-sm text-rc-gray-200 ${className}`}
-		onclick={onContainerClick}
-	>
-		<span class="whitespace-pre-wrap break-words">
-			{#if highlightPrompt}
-				{@html highlightPromptText(collapsedText())}
-			{:else}
-				{collapsedText()}
-			{/if}
-		</span>
-
-		{#if isLong()}
-			<button
-				class="inline-flex text-sm text-rc-green-200 hover:text-rc-green-100"
-				onclick={toggle}
-			>
-				{collapsedLabel}
-			</button>
-		{/if}
-	</div>
-{/if}
-
-<style lang="postcss">
-	:global(.mtk8) {
-		@apply text-rc-blue;
-	}
-
-	:global(.mtk5) {
-		@apply text-rc-orange;
-	}
-
-	:global(.prompt-heading) {
-		@apply font-semibold text-rc-blue;
-	}
-</style>

package/src/lib/components/CopyTracesDropdown.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-	import Button from '$lib/components/Button.svelte'
-	import Dropdown from '$lib/components/Dropdown.svelte'
-	import Icon from '$lib/components/Icon.svelte'
-
-	type CopiedTracesMode = 'with-prompts' | 'without-prompts'
-
-	interface Props {
-		disabled?: boolean
-		getWithPromptsText: () => string
-		getWithoutPromptsText: () => string
-		dropdownId?: string
-	}
-
-	let {
-		disabled = false,
-		getWithPromptsText,
-		getWithoutPromptsText,
-		dropdownId = 'copy-traces-dropdown'
-	}: Props = $props()
-
-	let open = $state(false)
-	let anchorEl = $state<HTMLButtonElement | null>(null)
-
-	let copied: CopiedTracesMode | null = $state(null)
-	let timer: number | null = $state(null)
-
-	$effect(() => {
-		if (disabled && open) open = false
-	})
-
-	async function copy(mode: CopiedTracesMode) {
-		try {
-			const text = mode === 'with-prompts' ? getWithPromptsText() : getWithoutPromptsText()
-			await navigator.clipboard.writeText(text)
-
-			copied = mode
-			if (timer) clearTimeout(timer)
-			timer = window.setTimeout(() => {
-				copied = null
-				timer = null
-			}, 2000)
-		} catch (e) {
-			console.error('Failed to copy traces', e)
-		}
-	}
-</script>
-
-<div>
-	<Button
-		variant="secondary"
-		size="small"
-		{disabled}
-		aria-expanded={open}
-		aria-haspopup="listbox"
-		aria-controls={dropdownId}
-		bind:el={anchorEl}
-		onclick={(e) => {
-			e.stopPropagation()
-			open = !open
-		}}
-		class="flex items-center gap-1"
-	>
-		{#if copied === 'without-prompts'}
-			Copied traces (without prompts)
-		{:else if copied === 'with-prompts'}
-			Copied traces (with prompts)
-		{:else}
-			Copy traces
-		{/if}
-		<Icon
-			name="chevron-down"
-			class={'size-5 text-rc-gray-400 transition-transform duration-200 ' +
-				(open ? 'rotate-180' : '')}
-		/>
-	</Button>
-
-	<Dropdown
-		id={dropdownId}
-		{open}
-		onClose={() => (open = false)}
-		{anchorEl}
-		placement="bottom-end"
-		offset={[0, 1]}
-		>{#snippet children()}
-			<div
-				class="mt-1 overflow-hidden rounded-lg border border-rc-gray-110 bg-rc-gray-930 shadow-inner-white-soft backdrop-blur-2xl"
-				role="listbox"
-			>
-				<Button
-					variant="ghost"
-					size="small"
-					role="option"
-					onclick={(e) => {
-						e.stopPropagation()
-						open = false
-						copy('without-prompts')
-					}}
-					class="w-full rounded-none border-b border-rc-gray-110 py-2 pr-3 text-left backdrop-blur-2xl hover:bg-rc-gray-700 focus:bg-rc-gray-400"
-				>
-					Without prompts
-				</Button>
-				<Button
-					variant="ghost"
-					size="small"
-					role="option"
-					onclick={(e) => {
-						e.stopPropagation()
-						open = false
-						copy('with-prompts')
-					}}
-					class="w-full rounded-none py-2 pr-3 text-left backdrop-blur-2xl hover:bg-rc-gray-700 focus:bg-rc-gray-400"
-				>
-					With prompts
-				</Button>
-			</div>{/snippet}
-	</Dropdown>
-</div>

package/src/lib/components/Dialog.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-	import { onMount, type Snippet } from 'svelte'
-	import Button from './Button.svelte'
-
-	let dialog: HTMLDialogElement
-
-	type DialogProps = {
-		showCloseButton?: boolean
-		onClose?: () => void
-		onOpen?: () => void
-		isOpen?: boolean
-		children: Snippet
-	}
-
-	let {
-		showCloseButton = false,
-		onClose = () => {},
-		onOpen = () => {},
-		isOpen = false,
-		children
-	}: DialogProps = $props()
-
-	$effect(() => {
-		if (isOpen) {
-			console.log('show')
-			dialog?.showModal()
-			onOpen()
-		} else if (dialog?.open) {
-			console.log('close')
-			dialog.close()
-		}
-	})
-
-	function handleClose(): void {
-		onClose()
-	}
-
-	onMount(() => {
-		dialog.addEventListener('close', handleClose)
-
-		return () => {
-			dialog.removeEventListener('close', handleClose)
-		}
-	})
-
-	function handleBackdropClick(e: MouseEvent): void {
-		if (e.target === dialog) {
-			dialog.close()
-		}
-	}
-</script>
-
-<dialog
-	bind:this={dialog}
-	onmousedown={handleBackdropClick}
-	class="dialog m-auto bg-transparent p-0 text-rc-gray-100 shadow-md"
->
-	{@render children()}
-
-	{#if showCloseButton}
-		<Button variant="ghost" onclick={() => dialog.close()} class="absolute right-2 top-2">✕</Button>
-	{/if}
-</dialog>
-
-<style lang="postcss">
-	.dialog::backdrop {
-		@apply bg-black/50 backdrop-blur-sm backdrop-filter;
-	}
-</style>

package/src/lib/components/Dropdown.svelte

@@ -1,111 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import type { Snippet } from 'svelte'
-	import type { Placement } from '@popperjs/core'
-	import Popper from './Popper.svelte'
-
-	interface Props {
-		open: boolean
-		anchorEl: HTMLElement | null
-		id: string
-		placement?: Placement
-		offset?: [number, number]
-		flip?: boolean
-		preventOverflow?: boolean
-		onClose: () => void
-		children: Snippet
-	}
-
-	let {
-		open = false,
-		anchorEl = null,
-		id = '',
-		placement = 'bottom-start',
-		offset = [0, 2],
-		flip = true,
-		preventOverflow = true,
-		onClose = () => {},
-		children
-	}: Props = $props()
-
-	let popoverEl: HTMLDivElement | null = $state(null)
-	let popperComponent: Popper | null = $state(null)
-
-	function handleClose() {
-		onClose()
-	}
-
-	function handleClickOutside(event: MouseEvent) {
-		if (open && popoverEl && anchorEl) {
-			const target = event.target as Node
-			if (!popoverEl.contains(target) && !anchorEl.contains(target)) {
-				handleClose()
-			}
-		}
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape' && open) {
-			handleClose()
-		}
-	}
-
-	onMount(() => {
-		document.addEventListener('click', handleClickOutside, true)
-		document.addEventListener('keydown', handleKeydown)
-
-		const handleResize = () => {
-			if (popperComponent) {
-				popperComponent.update()
-			}
-		}
-
-		const handleScroll = () => {
-			if (popperComponent) {
-				popperComponent.update()
-			}
-		}
-
-		window.addEventListener('resize', handleResize)
-		window.addEventListener('scroll', handleScroll, true)
-
-		return () => {
-			document.removeEventListener('click', handleClickOutside, true)
-			document.removeEventListener('keydown', handleKeydown)
-			window.removeEventListener('resize', handleResize)
-			window.removeEventListener('scroll', handleScroll, true)
-		}
-	})
-</script>
-
-{#if open && anchorEl}
-	<Popper
-		bind:this={popperComponent}
-		referenceEl={anchorEl}
-		{placement}
-		{offset}
-		{flip}
-		{preventOverflow}
-	>
-		{#snippet children()}
-			<div bind:this={popoverEl} {id} class="popover" role="dialog" aria-modal="true">
-				<div
-					bind:this={popoverEl}
-					{id}
-					class="popover"
-					role="dialog"
-					aria-modal="true"
-					style={`min-width:${anchorEl?.offsetWidth ?? 0}px`}
-				>
-					{@render children()}
-				</div>
-			</div>
-		{/snippet}
-	</Popper>
-{/if}
-
-<style lang="postcss">
-	.popover {
-		@apply z-popover w-fit rounded-lg bg-rc-gray-800 font-sans shadow-xl;
-	}
-</style>