|
| 1 | +<script lang="ts"> |
| 2 | + import type { createFlowState } from '$lib/stores/pgflow-state.svelte'; |
| 3 | + import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card'; |
| 4 | + import { Play, CheckCircle2 } from '@lucide/svelte'; |
| 5 | + import { codeToHtml } from 'shiki'; |
| 6 | +
|
| 7 | + interface Props { |
| 8 | + flowState: ReturnType<typeof createFlowState>; |
| 9 | + } |
| 10 | +
|
| 11 | + let { flowState }: Props = $props(); |
| 12 | +
|
| 13 | + let expandedEventIdx = $state<number | null>(null); |
| 14 | + let highlightedEventJson = $state<Record<number, string>>({}); |
| 15 | +
|
| 16 | + // Helper to get short step name |
| 17 | + function getShortStepName(stepSlug: string): string { |
| 18 | + const shortNames: Record<string, string> = { |
| 19 | + fetchArticle: 'fetch', |
| 20 | + summarize: 'summ', |
| 21 | + extractKeywords: 'kwrds', |
| 22 | + publish: 'pub' |
| 23 | + }; |
| 24 | + return shortNames[stepSlug] || stepSlug.slice(0, 5); |
| 25 | + } |
| 26 | +
|
| 27 | + // Helper to get event badge info |
| 28 | + function getEventBadgeInfo(event: { event_type: string; step_slug?: string }): { |
| 29 | + icon: typeof Play | typeof CheckCircle2; |
| 30 | + color: string; |
| 31 | + text: string; |
| 32 | + } | null { |
| 33 | + if (event.event_type === 'step:started' && event.step_slug) { |
| 34 | + return { |
| 35 | + icon: Play, |
| 36 | + color: 'blue', |
| 37 | + text: getShortStepName(event.step_slug) |
| 38 | + }; |
| 39 | + } |
| 40 | + if (event.event_type === 'step:completed' && event.step_slug) { |
| 41 | + return { |
| 42 | + icon: CheckCircle2, |
| 43 | + color: 'green', |
| 44 | + text: getShortStepName(event.step_slug) |
| 45 | + }; |
| 46 | + } |
| 47 | + return null; |
| 48 | + } |
| 49 | +
|
| 50 | + // Get displayable events (started/completed steps only) |
| 51 | + const displayableEvents = $derived( |
| 52 | + flowState.timeline |
| 53 | + .map((e, idx) => ({ event: e, badge: getEventBadgeInfo(e), idx })) |
| 54 | + .filter((e) => e.badge !== null) |
| 55 | + ); |
| 56 | +
|
| 57 | + // Truncate deep function |
| 58 | + function truncateDeep(obj: unknown, maxLength = 80): unknown { |
| 59 | + if (typeof obj === 'string') { |
| 60 | + if (obj.length > maxLength) { |
| 61 | + return `<long string: ${obj.length} chars>`; |
| 62 | + } |
| 63 | + return obj; |
| 64 | + } |
| 65 | + if (Array.isArray(obj)) { |
| 66 | + return obj.map((item) => truncateDeep(item, maxLength)); |
| 67 | + } |
| 68 | + if (obj !== null && typeof obj === 'object') { |
| 69 | + const truncated: Record<string, unknown> = {}; |
| 70 | + for (const [key, value] of Object.entries(obj)) { |
| 71 | + truncated[key] = truncateDeep(value, maxLength); |
| 72 | + } |
| 73 | + return truncated; |
| 74 | + } |
| 75 | + return obj; |
| 76 | + } |
| 77 | +
|
| 78 | + async function toggleEventExpanded(idx: number, event: unknown) { |
| 79 | + if (expandedEventIdx === idx) { |
| 80 | + expandedEventIdx = null; |
| 81 | + } else { |
| 82 | + // Generate syntax-highlighted JSON if not already cached |
| 83 | + if (!highlightedEventJson[idx]) { |
| 84 | + const truncated = truncateDeep(event); |
| 85 | + const jsonString = JSON.stringify(truncated, null, 2); |
| 86 | + const html = await codeToHtml(jsonString, { |
| 87 | + lang: 'json', |
| 88 | + theme: 'night-owl' |
| 89 | + }); |
| 90 | + highlightedEventJson = { ...highlightedEventJson, [idx]: html }; |
| 91 | + } |
| 92 | + // Set expanded after HTML is ready |
| 93 | + expandedEventIdx = idx; |
| 94 | + } |
| 95 | + } |
| 96 | +</script> |
| 97 | + |
| 98 | +<Card class="h-full flex flex-col"> |
| 99 | + <CardHeader class="pb-0 pt-2 px-3 flex-shrink-0 relative"> |
| 100 | + <div class="flex items-center justify-between"> |
| 101 | + <CardTitle class="text-sm">Event Stream ({displayableEvents.length})</CardTitle> |
| 102 | + </div> |
| 103 | + </CardHeader> |
| 104 | + <CardContent class="flex-1 overflow-auto pt-1 pb-2 px-3 min-h-0"> |
| 105 | + <div class="space-y-1"> |
| 106 | + {#if displayableEvents.length === 0} |
| 107 | + <p class="text-sm text-muted-foreground text-center py-8"> |
| 108 | + No events yet. Start a flow to see events. |
| 109 | + </p> |
| 110 | + {:else} |
| 111 | + {#each displayableEvents as { badge, event, idx } (idx)} |
| 112 | + {#if badge} |
| 113 | + <button |
| 114 | + onclick={() => toggleEventExpanded(idx, event)} |
| 115 | + class="w-full text-left rounded event-badge-row event-badge-{badge.color} cursor-pointer hover:opacity-80 transition-opacity" |
| 116 | + > |
| 117 | + <div class="flex items-center gap-2 px-2 py-1.5"> |
| 118 | + <svelte:component this={badge.icon} class="w-4 h-4 flex-shrink-0" /> |
| 119 | + <div class="flex-1 min-w-0"> |
| 120 | + <div class="font-medium text-sm">{event.step_slug || 'Unknown'}</div> |
| 121 | + <div class="text-xs opacity-70"> |
| 122 | + {event.event_type.replace('step:', '')} |
| 123 | + </div> |
| 124 | + </div> |
| 125 | + <div class="flex items-center gap-2 flex-shrink-0"> |
| 126 | + <div class="text-xs opacity-70 font-mono text-muted-foreground"> |
| 127 | + {event.deltaDisplay} |
| 128 | + </div> |
| 129 | + <div class="text-xs opacity-50"> |
| 130 | + {expandedEventIdx === idx ? '▼' : '▶'} |
| 131 | + </div> |
| 132 | + </div> |
| 133 | + </div> |
| 134 | + |
| 135 | + {#if expandedEventIdx === idx && highlightedEventJson[idx]} |
| 136 | + <div class="px-2 pb-1.5" onclick={(e) => e.stopPropagation()}> |
| 137 | + <div class="event-json-display rounded overflow-x-auto"> |
| 138 | + <!-- eslint-disable-next-line svelte/no-at-html-tags --> |
| 139 | + {@html highlightedEventJson[idx]} |
| 140 | + </div> |
| 141 | + </div> |
| 142 | + {/if} |
| 143 | + </button> |
| 144 | + {/if} |
| 145 | + {/each} |
| 146 | + {/if} |
| 147 | + </div> |
| 148 | + </CardContent> |
| 149 | +</Card> |
| 150 | + |
| 151 | +<style> |
| 152 | + /* Event badge rows */ |
| 153 | + .event-badge-row { |
| 154 | + border: 1px solid transparent; |
| 155 | + } |
| 156 | +
|
| 157 | + .event-badge-row.event-badge-blue { |
| 158 | + background-color: rgba(59, 91, 219, 0.2); |
| 159 | + border-color: rgba(91, 141, 239, 0.5); |
| 160 | + color: #7ba3f0; |
| 161 | + } |
| 162 | +
|
| 163 | + .event-badge-row.event-badge-green { |
| 164 | + background-color: rgba(23, 122, 81, 0.2); |
| 165 | + border-color: rgba(32, 165, 111, 0.5); |
| 166 | + color: #2ec184; |
| 167 | + } |
| 168 | +
|
| 169 | + /* Event JSON display */ |
| 170 | + .event-json-display { |
| 171 | + max-height: 300px; |
| 172 | + } |
| 173 | +
|
| 174 | + .event-json-display :global(pre) { |
| 175 | + margin: 0 !important; |
| 176 | + padding: 8px 10px !important; |
| 177 | + background: #0d1117 !important; |
| 178 | + border-radius: 4px; |
| 179 | + font-size: 10px; |
| 180 | + line-height: 1.5; |
| 181 | + display: table; |
| 182 | + min-width: 100%; |
| 183 | + } |
| 184 | +
|
| 185 | + .event-json-display :global(code) { |
| 186 | + font-family: 'Fira Code', 'Monaco', 'Menlo', 'Courier New', monospace; |
| 187 | + white-space: pre; |
| 188 | + display: block; |
| 189 | + } |
| 190 | +</style> |
0 commit comments