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

package/src/lib/components/History.svelte

@@ -1,174 +0,0 @@
-<script lang="ts">
-	import Dropdown from '$lib/components/Dropdown.svelte'
-	import Button from '$lib/components/Button.svelte'
-	import type { AgentSateHeader } from '$lib/ws-message'
-	import Icon from '$lib/components/Icon.svelte'
-	import { fade } from 'svelte/transition'
-
-	interface Props {
-		agentStates: AgentSateHeader[]
-		currentState: string | null
-		onSelectState: (stateId: string) => void
-		class?: string
-	}
-
-	let { agentStates, currentState, onSelectState, class: className = '' }: Props = $props()
-
-	let isOpen = $state(false)
-	let anchorEl = $state<HTMLButtonElement | null>(null)
-
-	const MONTHS_SHORT = [
-		'Jan',
-		'Feb',
-		'Mar',
-		'Apr',
-		'May',
-		'Jun',
-		'Jul',
-		'Aug',
-		'Sep',
-		'Oct',
-		'Nov',
-		'Dec'
-	]
-
-	function toggleDropdown() {
-		isOpen = !isOpen
-	}
-
-	function handleSelectState(stateId: string) {
-		onSelectState(stateId)
-		isOpen = false
-	}
-
-	function getUserMessage(state: AgentSateHeader): string {
-		const raw = state.userMessage
-		if (raw == null) return 'No message'
-		const msg = (typeof raw === 'string' ? raw : String(raw)).trim()
-		if (!msg) return 'No message'
-		return state.userMessageSender === 'system' ? `System: ${msg}` : msg
-	}
-	function truncateMessage(message?: string, maxLength = 50, ellipsis = '…'): string {
-		if (!message) return ''
-		if (message.length <= maxLength) return message
-
-		const slice = message.slice(0, maxLength + 1)
-
-		const lastSpace = Math.max(
-			slice.lastIndexOf(' '),
-			slice.lastIndexOf('\u00A0'),
-			slice.lastIndexOf('\t'),
-			slice.lastIndexOf('\n'),
-			slice.lastIndexOf('\r')
-		)
-
-		const cut = lastSpace > 0 ? slice.slice(0, lastSpace) : message.slice(0, maxLength)
-
-		return cut.trimEnd() + ellipsis
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (event.key === 'ArrowDown' && !isOpen) {
-			isOpen = true
-			event.preventDefault()
-		} else if (event.key === 'ArrowUp' && isOpen) {
-			isOpen = false
-			event.preventDefault()
-		}
-	}
-
-	function formatStateTime(d: Date): string {
-		const day = d.getDate()
-		const month = MONTHS_SHORT[d.getMonth()]
-
-		let hour = d.getHours()
-		const ampm = hour >= 12 ? 'PM' : 'AM'
-		hour = hour % 12
-		if (hour === 0) hour = 12
-
-		const minute = String(d.getMinutes()).padStart(2, '0')
-
-		const now = new Date()
-		const year = d.getFullYear()
-		const yearPart = year !== now.getFullYear() ? ` ${year}` : ''
-
-		return `${day} ${month}${yearPart}, ${hour}:${minute} ${ampm}`
-	}
-
-	function formatStateLabel(state: AgentSateHeader): string {
-		const fromId = new Date(state.id)
-		if (!Number.isNaN(fromId.getTime())) return formatStateTime(fromId)
-
-		const fromName = new Date(state.name)
-		if (!Number.isNaN(fromName.getTime())) return formatStateTime(fromName)
-
-		return state.name || 'History'
-	}
-
-	let selectedState = $derived(agentStates.find((s) => s.id === currentState) ?? null)
-	let triggerTitle = $derived(selectedState ? formatStateLabel(selectedState) : 'History')
-</script>
-
-<div class={`relative ${className}`}>
-	<!-- Trigger -->
-	<Button
-		variant="ghost"
-		aria-expanded={isOpen}
-		aria-haspopup="listbox"
-		aria-controls="history-dropdown"
-		onclick={toggleDropdown}
-		onkeydown={handleKeyDown}
-		bind:el={anchorEl}
-		class="inline-flex w-40 items-center rounded-lg border border-transparent !bg-rc-gray-700 !px-3 !pb-1 !pt-[5px] text-rc-gray-200 hover:border hover:border-rc-gray-500 focus:outline-none focus:ring-0"
-	>
-		<span class="min-w-0 flex-1 truncate text-left">{triggerTitle}</span>
-		<Icon
-			name="chevron-down"
-			class={'size-7 shrink-0 text-rc-gray-500 transition-transform duration-200 ' +
-				(isOpen ? 'rotate-180' : '')}
-		/>
-	</Button>
-
-	<!-- Dropdown menu -->
-	<Dropdown
-		id="history-dropdown"
-		open={isOpen}
-		onClose={() => (isOpen = false)}
-		{anchorEl}
-		placement="bottom-start"
-		offset={[0, 1]}
-		>{#snippet children()}
-			<div
-				class="mt-1 max-h-96 w-max min-w-full max-w-[min(26rem,90vw)] overflow-y-auto overflow-x-hidden rounded-lg border border-rc-gray-110 bg-rc-gray-930 backdrop-blur-2xl"
-				role="listbox"
-			>
-				{#each agentStates.slice().reverse() as state}
-					<Button
-						variant="ghost"
-						size="small"
-						role="option"
-						aria-selected={state.id === currentState}
-						onclick={() => handleSelectState(state.id)}
-						class="group w-full rounded-none border-b border-rc-gray-110 py-2 pr-3 text-left backdrop-blur-2xl last:border-b-0 hover:bg-rc-gray-700 focus:bg-rc-gray-400"
-					>
-						<div class="flex items-start gap-2">
-							<div class="min-w-0">
-								<div class="truncate p-1 text-sm text-rc-gray-300 group-hover:text-rc-gray-200">
-									{formatStateLabel(state)}
-								</div>
-								{#if state.id === currentState}
-									<div class="truncate p-1 text-base font-semibold text-rc-green-200">
-										{truncateMessage(getUserMessage(state))}
-									</div>
-								{:else}
-									<div class="truncate p-1 text-base font-semibold text-rc-gray-100">
-										{truncateMessage(getUserMessage(state))}
-									</div>
-								{/if}
-							</div>
-						</div>
-					</Button>
-				{/each}
-			</div>{/snippet}
-	</Dropdown>
-</div>

package/src/lib/components/Icon.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-	interface Props {
-		name: keyof typeof icons
-		width?: number
-		height?: number
-		class?: string
-	}
-
-	let { name, width = 25, height = 25, class: className = '' }: Props = $props()
-
-	const icons = {
-		paperclip: {
-			viewBox: '0 0 32 32',
-			path: '<image href="/ui/paperclip.svg" width="32" height="32" />'
-		},
-		send: {
-			viewBox: '0 0 32 32',
-			path: '<image href="/ui/send.svg" width="32" height="32" />'
-		},
-		sparkles: {
-			viewBox: '0 0 24 24',
-			path:
-				'<path d="M12 2.75l1.18 3.46L16.5 7.4l-3.32 1.19L12 12l-1.18-3.41L7.5 7.4l3.32-1.19L12 2.75z" />' +
-				'<path d="M18.25 11.5l.74 2.11 2.11.74-2.11.74-.74 2.11-.74-2.11-2.11-.74 2.11-.74.74-2.11z" />' +
-				'<path d="M7 13.25l.96 2.79 2.79.96-2.79.96L7 20.75l-.96-2.79-2.79-.96 2.79-.96L7 13.25z" />'
-		},
-		checkmark: {
-			viewBox: '0 0 24 24',
-			path: '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />'
-		},
-		'chevron-down': {
-			viewBox: '0 0 24 24',
-			path: '<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />'
-		},
-		'chevron-up': {
-			viewBox: '0 0 24 24',
-			path: '<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z" />'
-		},
-		'chevron-left': {
-			viewBox: '0 0 24 24',
-			path: '<path d="M14.41 7.41L13 6l-6 6 6 6 1.41-1.41L9.83 12z" />'
-		},
-		'chevron-right': {
-			viewBox: '0 0 24 24',
-			path: '<path d="M9.59 16.59L11 18l6-6-6-6-1.41 1.41L14.17 12z" />'
-		},
-		log: {
-			viewBox: '0 0 24 24',
-			path: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-6h2v2h-2v-2zm0-4h2v3h-2v-3z" />'
-		},
-		close: {
-			viewBox: '0 0 24 24',
-			path: `<path d="M6 6L18 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-			<path d="M18 6L6 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>`
-		},
-		copy: {
-			viewBox: '0 0 24 24',
-			path:
-				'<rect x="4" y="4" width="11" height="11" rx="2" ry="2" ' +
-				'fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />' +
-				'<rect x="9" y="9" width="11" height="11" rx="2" ry="2" ' +
-				'fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />'
-		},
-		undo: {
-			viewBox: '0 0 24 24',
-			path: '<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6 0 1.09-.29 2.11-.8 3l1.46 1.46C19.54 16.14 20 14.62 20 13c0-4.42-3.58-8-8-8z" />'
-		},
-		hangup: {
-			viewBox: '0 0 24 24',
-			path: '<path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08A.996.996 0 0 1 0 12.37c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.66c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.1-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z" />'
-		}
-	}
-
-	let icon = $derived(icons[name as keyof typeof icons])
-</script>
-
-{#if icon}
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		{width}
-		{height}
-		viewBox={icon.viewBox}
-		fill="currentColor"
-		stroke-width="1"
-		class={className}
-		aria-hidden="true"
-	>
-		{@html icon.path}
-	</svg>
-{:else}
-	<div class="flex h-xl w-xl items-center justify-center rounded bg-gray-200 text-xs text-gray-500">
-		?
-	</div>
-{/if}

package/src/lib/components/Input.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements'
-
-	type InputVariant = 'chat' | 'config'
-
-	interface Props extends HTMLInputAttributes {
-		class?: string
-		value?: string | number
-		type?: HTMLInputAttributes['type']
-		variant?: InputVariant
-		el?: HTMLInputElement | null
-	}
-
-	let {
-		class: className = '',
-		value = $bindable<string | number>(),
-		type = 'text',
-		variant = 'config',
-		el = $bindable(),
-		...rest
-	}: Props = $props()
-
-	let classes = $derived(
-		variant === 'chat' ? `input-chat ${className}` : `input-config ${className}`
-	)
-</script>
-
-<input {type} bind:value bind:this={el} class={classes} {...rest} />
-
-<style lang="postcss">
-	.input-chat {
-		@apply block w-full appearance-none rounded-lg border border-rc-gray-110 bg-rc-gray-930 p-3 shadow-inner-white-soft backdrop-blur-3xl;
-		@apply font-semibold text-rc-gray-100 placeholder-rc-gray-300 caret-rc-gray-100;
-		@apply transition-colors duration-100 hover:border-gray-500 focus:border-gray-500 disabled:pointer-events-none;
-		@apply focus:outline-none focus:ring-0;
-	}
-
-	.input-config {
-		@apply rounded-lg border border-rc-gray-110 bg-rc-gray-980 py-1 pl-3 pr-2 font-semibold text-rc-gray-200;
-		@apply hover:bg-double-gradient focus:border-gray-500 focus:bg-double-gradient focus:outline-none focus:ring-0 active:bg-double-gradient disabled:pointer-events-none;
-		color-scheme: dark;
-	}
-</style>

package/src/lib/components/Link.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte'
-	import type { HTMLAnchorAttributes } from 'svelte/elements'
-
-	type Variant = 'default' | 'external'
-
-	interface Props extends HTMLAnchorAttributes {
-		href?: string
-		variant?: Variant
-		children: Snippet
-		class?: string
-	}
-
-	interface $$Events {
-		click: MouseEvent
-		mouseenter: MouseEvent
-		mouseleave: MouseEvent
-		keydown: KeyboardEvent
-	}
-
-	let {
-		href = '',
-		variant = 'default',
-		children,
-		class: className = '',
-		target: targetProp,
-		rel: relProp,
-		...rest
-	}: Props = $props()
-
-	const linkClasses = $derived(`link ${className}`.trim())
-	const isExternal = $derived(variant === 'external')
-	const target = $derived(targetProp ?? (isExternal ? '_blank' : undefined))
-	const rel = $derived(relProp ?? (target === '_blank' ? 'noopener noreferrer' : undefined))
-</script>
-
-<a {href} class={linkClasses} {target} {rel} {...rest}>
-	{@render children()}
-</a>
-
-<style lang="postcss">
-	.link {
-		@apply relative inline border-b-thin border-rc-gray-300/40 pb-xs text-inherit hover:border-rc-green-200 hover:text-rc-green-200;
-	}
-</style>

package/src/lib/components/Modal.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { Dialog } from 'bits-ui'
-	import type { Snippet } from 'svelte'
-
-	interface Props {
-		open?: boolean
-		title?: string
-		class?: string
-		children?: Snippet
-		footer?: Snippet
-	}
-
-	let {
-		open = $bindable(false),
-		title = '',
-		class: className = '',
-		children,
-		footer
-	}: Props = $props()
-</script>
-
-<Dialog.Root bind:open>
-	<Dialog.Portal>
-		<Dialog.Overlay class="fixed inset-0 z-50 bg-black/60" />
-		<Dialog.Content
-			class={'fixed left-1/2 top-1/2 z-50 max-h-[90vh] w-[95vw] max-w-6xl -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border border-rc-gray-600 bg-rc-gray-800 shadow-xl ' +
-				className}
-		>
-			<div class="flex items-center justify-between border-b border-rc-gray-600 px-4 py-3">
-				<Dialog.Title class="text-lg font-semibold text-gray-100">{title}</Dialog.Title>
-				<Dialog.Close class="text-gray-400 hover:text-gray-200" aria-label="Close">✕</Dialog.Close>
-			</div>
-			<div class="rc-scroll max-h-[calc(90vh-7rem)] overflow-auto p-4">
-				{@render children?.()}
-			</div>
-			<div class="flex items-center justify-end gap-3 border-t border-rc-gray-600 px-4 py-3">
-				{@render footer?.()}
-			</div>
-		</Dialog.Content>
-	</Dialog.Portal>
-</Dialog.Root>
-
-<style>
-	/* No extra styles - rely on Tailwind classes */
-</style>

package/src/lib/components/Panel.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte'
-	interface PanelProps {
-		children: Snippet
-		class?: string
-	}
-	let { children, class: className }: PanelProps = $props()
-</script>
-
-<div class="min-w-0 rounded-lg bg-rc-gray-980 {className}">
-	{@render children()}
-</div>

package/src/lib/components/PopoverModal.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte'
-
-	interface Props {
-		title: string
-		onClose: () => void
-		children: Snippet
-	}
-
-	let { title, onClose, children }: Props = $props()
-</script>
-
-<div class="absolute inset-0 z-20 bg-black/20"></div>
-<div
-	class="absolute inset-2 z-30 flex min-w-0 flex-col overflow-hidden rounded-lg border border-rc-gray-600 bg-rc-gray-900 shadow-2xl"
->
-	<div class="flex items-center justify-between border-b border-rc-gray-700 px-3 py-2">
-		<button
-			type="button"
-			class="inline-flex h-7 w-7 items-center justify-center rounded-md text-rc-gray-200 hover:bg-rc-gray-700"
-			aria-label="Close"
-			title="Close"
-			onclick={onClose}
-		>
-			X
-		</button>
-		<div class="text-sm font-semibold text-rc-gray-200">{title}</div>
-		<div class="w-7"></div>
-	</div>
-
-	<div class="flex min-h-0 flex-1 flex-col overflow-hidden">
-		{@render children()}
-	</div>
-</div>

package/src/lib/components/Popper.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import { createPopper } from '@popperjs/core'
-	import type { Instance, Placement, Modifier } from '@popperjs/core'
-	import type { Snippet } from 'svelte'
-
-	interface Props {
-		referenceEl: HTMLElement | null
-		placement?: Placement
-		offset?: [number, number]
-		flip?: boolean
-		preventOverflow?: boolean
-		children: Snippet
-	}
-
-	let {
-		referenceEl = null,
-		placement = 'bottom-start',
-		offset = [0, 2],
-		flip = true,
-		preventOverflow = true,
-		children
-	}: Props = $props()
-
-	let popperEl: HTMLDivElement | null = $state(null)
-	let popperInstance: Instance | null = null
-
-	function createPopperInstance() {
-		if (!referenceEl || !popperEl) return
-
-		const modifiers: Partial<Modifier<any, any>>[] = []
-
-		if (offset) {
-			modifiers.push({
-				name: 'offset',
-				options: {
-					offset: offset
-				}
-			})
-		}
-
-		if (flip) {
-			modifiers.push({
-				name: 'flip',
-				options: {
-					fallbackPlacements: ['top-start', 'bottom-end', 'top-end']
-				}
-			})
-		}
-
-		if (preventOverflow) {
-			modifiers.push({
-				name: 'preventOverflow',
-				options: {
-					padding: 8
-				}
-			})
-		}
-
-		popperInstance = createPopper(referenceEl, popperEl, {
-			placement,
-			modifiers
-		})
-	}
-
-	function updatePopper() {
-		if (popperInstance) {
-			popperInstance.update()
-		}
-	}
-
-	onMount(() => {
-		createPopperInstance()
-
-		return () => {
-			if (popperInstance) {
-				popperInstance.destroy()
-				popperInstance = null
-			}
-		}
-	})
-
-	$effect(() => {
-		if (referenceEl && popperEl) {
-			createPopperInstance()
-		}
-
-		return () => {
-			if (popperInstance) {
-				popperInstance.destroy()
-				popperInstance = null
-			}
-		}
-	})
-
-	export function update() {
-		updatePopper()
-	}
-</script>
-
-<div bind:this={popperEl} class="popper">
-	{@render children()}
-</div>
-
-<style lang="postcss">
-	.popper {
-		@apply z-popover min-w-fit rounded shadow-xl;
-	}
-</style>

package/src/lib/components/Tab.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">
-	import { getContext, onMount, onDestroy } from 'svelte'
-	import type { Snippet } from 'svelte'
-	import type { Readable } from 'svelte/store'
-
-	type Props = {
-		value?: string
-		id?: string
-		disabled?: boolean
-		class?: string
-		onclick?: (e: MouseEvent) => void
-		children: Snippet
-	}
-
-	let {
-		value = '',
-		id = '',
-		disabled = false,
-		class: className = '',
-		onclick,
-		children
-	}: Props = $props()
-
-	const uid = Math.random().toString(36).slice(2, 8)
-	if (!id) id = `tab-${uid}`
-	if (!value) value = id
-
-	let btnEl: HTMLButtonElement | null = $state(null)
-
-	const tabs = getContext<{
-		value: Readable<string | null>
-		requestSelect: (v: string) => void
-		register: (t: { id: string; value: string; getEl: () => HTMLButtonElement | null }) => void
-		unregister: (id: string) => void
-	}>('rc-tabs')
-
-	const valueStore = tabs.value
-	let selected = $derived($valueStore === value)
-
-	onMount(() => {
-		tabs?.register({ id, value, getEl: () => btnEl })
-	})
-
-	onDestroy(() => {
-		tabs?.unregister(id)
-	})
-
-	function handleClick(e: MouseEvent) {
-		if (disabled) return
-		tabs?.requestSelect(value)
-		onclick?.(e)
-	}
-</script>
-
-<button
-	bind:this={btnEl}
-	type="button"
-	class="tab {className}"
-	class:active={selected}
-	{disabled}
-	role="tab"
-	{id}
-	aria-selected={selected}
-	aria-controls={`panel-${value}`}
-	tabindex={selected ? 0 : -1}
-	onclick={handleClick}
->
-	{@render children()}
-</button>
-
-<style lang="postcss">
-	.tab {
-		@apply relative z-10 my-1 min-w-xl cursor-pointer border-none bg-transparent px-2 pb-2.5 pt-2 text-base font-semibold tracking-wide text-rc-gray-100 outline-none transition-colors duration-300 ease-in-out;
-		@apply hover:text-rc-gray-200;
-		@apply focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-rc-green-200;
-		@apply aria-selected:text-rc-green-200 aria-selected:after:absolute aria-selected:after:inset-x-0 aria-selected:after:bottom-0 aria-selected:after:h-0.5 aria-selected:after:bg-rc-green-200 aria-selected:after:content-[''];
-	}
-	.tab-label {
-		@apply relative inline-flex items-center justify-center;
-	}
-	.tab.active {
-		@apply text-rc-green-200;
-	}
-	.tab[aria-selected='true']::after {
-		content: '';
-		@apply absolute inset-x-0 bottom-0 h-0.5 bg-rc-green-200;
-	}
-	button[disabled] {
-		@apply cursor-not-allowed opacity-50;
-	}
-</style>