@picked/svelte 0.0.41 → 0.0.42-next.1

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -10,6 +10,7 @@
   import ProjectScreen from './screens/project/ProjectScreen.svelte'
   import HistoryEntriesListScreen from './screens/history/HistoryEntriesListScreen.svelte'
   import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
+  import EventsListScreen from './screens/events/EventsListScreen.svelte'
 
   const experience = getExperience()
 
@@ -26,6 +27,12 @@
       component: HistoryEntriesListScreen,
       props: {},
     },
+    {
+      id: 'events',
+      label: 'Events',
+      component: EventsListScreen,
+      props: {},
+    },
     {
       id: 'responses',
       label: 'Responses',

package/dist/plugins/devtools/components/ExperienceInstancesTable.svelte

@@ -20,7 +20,7 @@
     </tr>
   </thead>
   <tbody>
-    {#each experienceInstances as experienceInstance (experienceInstance.experienceId)}
+    {#each experienceInstances as experienceInstance (experienceInstance.id)}
       <ExperienceInstanceListItem {experienceInstance} />
     {/each}
   </tbody>

package/dist/plugins/devtools/screens/events/EventListItem.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type { EventBusPayload, EventHistoryEntry } from '@picked/client'
+
+  export let event: EventHistoryEntry
+  export let isExpanded: boolean
+  export let onToggle: () => void
+
+  function formatTime(date: Date): string {
+    return date.toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      fractionalSecondDigits: 3,
+    })
+  }
+
+  interface PayloadField {
+    label: string
+    value: unknown
+  }
+
+  function getPayloadFields(payload: EventBusPayload): PayloadField[] {
+    const fields: PayloadField[] = []
+
+    // Add type
+    fields.push({ label: 'Type', value: payload.type })
+
+    // Add optional value field if present
+    if ('value' in payload && payload.value !== undefined) {
+      fields.push({ label: 'Value', value: payload.value })
+    }
+
+    // Add experience identifiers if present
+    if ('experience' in payload && payload.experience) {
+      const exp = payload.experience
+      if (exp && typeof exp === 'object') {
+        if ('id' in exp && exp.id) {
+          fields.push({ label: 'Experience ID', value: exp.id })
+        }
+        if ('experienceId' in exp && exp.experienceId) {
+          fields.push({ label: 'Experience Type', value: exp.experienceId })
+        }
+      }
+    }
+
+    // Add step information if present
+    if ('step' in payload && payload.step) {
+      const step = payload.step
+      if (step && typeof step === 'object') {
+        if ('id' in step && step.id) {
+          fields.push({ label: 'Step ID', value: step.id })
+        }
+        if ('label' in step && step.label) {
+          fields.push({ label: 'Step Label', value: step.label })
+        }
+      }
+    }
+
+    // Add form information if present
+    if ('form' in payload && payload.form) {
+      fields.push({ label: 'Form', value: JSON.stringify(payload.form) })
+    }
+
+    // Add feature information if present
+    if ('feature' in payload && payload.feature) {
+      fields.push({ label: 'Feature', value: JSON.stringify(payload.feature) })
+    }
+
+    // Add exception/validation errors if present
+    if ('exception' in payload && payload.exception) {
+      fields.push({ label: 'Exception', value: JSON.stringify(payload.exception) })
+    }
+
+    // Add version if present
+    if ('version' in payload && payload.version) {
+      fields.push({ label: 'Version', value: payload.version })
+    }
+
+    // Add session id if present
+    if ('id' in payload && payload.id && payload.type === 'session') {
+      fields.push({ label: 'Session ID', value: payload.id })
+    }
+
+    return fields
+  }
+
+  function formatValue(value: unknown): string {
+    if (value === null) return 'null'
+    if (value === undefined) return 'undefined'
+    if (typeof value === 'string') return value
+    if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+    return JSON.stringify(value)
+  }
+</script>
+
+<tr on:click={onToggle} style="cursor: pointer;">
+  <td style="font-family: monospace; font-size: 12px;">
+    <span style="margin-right: 0.5rem; display: inline-block; width: 12px;">
+      {isExpanded ? '▼' : '▶'}
+    </span>
+    {formatTime(event.at)}
+  </td>
+  <td>
+    <code
+      style="display: inline-block; padding: 0.25rem 0.5rem; background-color: #e8f4ff; border: 1px solid #b3d9ff; border-radius: 3px; font-size: 12px; color: #0066cc;"
+    >
+      {event.payload.type}
+    </code>
+  </td>
+  <td style="font-size: 13px; color: #333;">
+    {'experience' in event.payload && event.payload.experience ? event.payload.experience.experienceId : '-'}
+  </td>
+  <td style="font-size: 12px; color: #666; font-style: italic;">
+    {isExpanded ? 'Click to collapse' : 'Click to expand payload'}
+  </td>
+</tr>
+{#if isExpanded}
+  <tr>
+    <td colspan="4" style="background-color: #f8f9fa; padding: 1rem; border-left: 3px solid #0066cc;">
+      <div style="font-weight: 600; margin-bottom: 0.5rem; font-size: 13px; color: #333;">
+        Event Payload
+      </div>
+      <div
+        style="background-color: #fff; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: 4px;"
+      >
+        {#each getPayloadFields(event.payload) as field}
+          <div style="margin-bottom: 0.5rem; font-size: 12px;">
+            <span style="font-weight: 600; color: #555; margin-right: 0.5rem;"
+              >{field.label}:</span
+            >
+            <code
+              style="font-family: 'Monaco', 'Menlo', 'Courier New', monospace; background-color: #f0f0f0; padding: 0.125rem 0.25rem; border-radius: 2px; color: #333;"
+            >
+              {formatValue(field.value)}
+            </code>
+          </div>
+        {/each}
+      </div>
+    </td>
+  </tr>
+{/if}

package/dist/plugins/devtools/screens/events/EventsListScreen.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { getPicked } from '../../../../hooks'
+  import EventsTable from './EventsTable.svelte'
+
+  const { events } = getPicked()
+</script>
+
+<div style="display: flex; flex-direction: column; height: 100%;">
+  <EventsTable />
+  <div
+    style="margin-top: auto; padding: 0.5rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid lightgray;"
+  >
+    <div style="display: flex; gap: 0.5rem; align-items: center;">
+      <span style="font-size: 13px; color: #666;">
+        {$events.length} events
+      </span>
+    </div>
+  </div>
+</div>

package/dist/plugins/devtools/screens/events/EventsTable.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { combine, createStore, createEvent, sample } from 'effector'
+  import { getPicked } from '../../../../hooks'
+  import EventListItem from './EventListItem.svelte'
+  import type { EventHistoryEntry } from '@picked/client'
+
+  const { events } = getPicked()
+
+  let expandedRowIds = new Set<number>()
+
+  function toggleRow(eventId: number) {
+    const newSet = new Set(expandedRowIds)
+    if (newSet.has(eventId)) {
+      newSet.delete(eventId)
+    } else {
+      newSet.add(eventId)
+    }
+    expandedRowIds = newSet
+  }
+
+
+  const sortDirectionStore = createStore<'asc' | 'desc'>('desc')
+  const toggleSortDirection = createEvent<void>()
+  const oppositeSortDirection: Record<'asc' | 'desc', 'asc' | 'desc'> = { asc: 'desc', desc: 'asc' }
+
+  sample({
+    clock: toggleSortDirection,
+    source: sortDirectionStore,
+    fn: (dir) => oppositeSortDirection[dir],
+    target: sortDirectionStore,
+  })
+
+  function sortEvents(history: EventHistoryEntry[], sort: 'asc' | 'desc'): EventHistoryEntry[] {
+    return [...history].sort((a, b) => {
+      const diff = a.at.getTime() - b.at.getTime()
+      return sort === 'asc' ? diff : -diff
+    })
+  }
+
+  const sortedEvents = combine(events, sortDirectionStore, sortEvents)
+</script>
+
+<table>
+  <thead>
+    <tr>
+      <th
+        style="width: 140px; cursor: pointer; user-select: none;"
+        on:click={() => toggleSortDirection()}
+      >
+        Time {$sortDirectionStore === 'asc' ? '↑' : '↓'}
+      </th>
+      <th style="width: 200px;">Event Type</th>
+      <th style="width: 180px;">Experience</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {#if $sortedEvents.length === 0}
+      <tr>
+        <td colspan="4" style="text-align: center; padding: 2rem; color: #666;">
+            No events yet. Interact with the page to see events.
+        </td>
+      </tr>
+    {:else}
+      {#each $sortedEvents as event (event.at)}
+        <EventListItem
+          {event}
+          isExpanded={expandedRowIds.has(event.id)}
+          onToggle={() => toggleRow(event.id)}
+        />
+      {/each}
+    {/if}
+  </tbody>
+</table>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.41",
+  "version": "0.0.42-next.1",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -75,7 +75,7 @@
   ],
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.41",
+    "@picked/client": "0.0.42-next.1",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },