@picked/svelte 0.0.41 → 0.0.42-next.2

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -10,6 +10,8 @@
   import ProjectScreen from './screens/project/ProjectScreen.svelte'
   import HistoryEntriesListScreen from './screens/history/HistoryEntriesListScreen.svelte'
   import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
+  import FeaturesListScreen from './screens/features/FeaturesListScreen.svelte'
+  import EventsListScreen from './screens/events/EventsListScreen.svelte'
 
   const experience = getExperience()
 
@@ -26,6 +28,12 @@
       component: HistoryEntriesListScreen,
       props: {},
     },
+    {
+      id: 'events',
+      label: 'Events',
+      component: EventsListScreen,
+      props: {},
+    },
     {
       id: 'responses',
       label: 'Responses',
@@ -50,6 +58,12 @@
       component: PredicatesListScreen,
       props: {},
     },
+    {
+      id: 'features',
+      label: 'Features',
+      component: FeaturesListScreen,
+      props: {},
+    },
     {
       id: 'components',
       label: 'Components',

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/dist/plugins/devtools/screens/features/FeaturesListScreen.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+  import { createStore, createEvent } from 'effector'
+  import type { FeatureBucket } from '@picked/client'
+  import { getPicked, useUnit } from '../../../../hooks'
+
+  interface FeatureSelection {
+    included: boolean
+    value: string
+  }
+
+  const { features: { listStore: featuresStore } } = getPicked()
+  const featuresList = useUnit(featuresStore)
+
+  const initSelections = createEvent<FeatureBucket[]>()
+  const featureToggled = createEvent<string>()
+  const valueChanged = createEvent<{ id: string; value: string }>()
+  const copySucceeded = createEvent()
+  const copyReset = createEvent()
+
+  const selectionsStore = createStore<Record<string, FeatureSelection>>({})
+    // Triggered whenever the features list changes. Adds an entry for any feature
+    // not yet tracked, seeding its override value from the already-resolved bucket
+    // (or 'true' as a sensible default for unresolved boolean features).
+    .on(initSelections, (state, feats) => {
+      const next = { ...state }
+      feats.forEach((feature) => {
+        if (!(feature.id in next)) {
+          const bucket = feature.isResolved ? feature.getBucket().bucket : null
+          next[feature.id] = {
+            included: false,
+            value: bucket !== null ? String(bucket) : 'true',
+          }
+        }
+      })
+      return next
+    })
+    // Toggles whether the feature is included in the generated URL.
+    .on(featureToggled, (state, id) => ({
+      ...state,
+      [id]: { ...state[id], included: !state[id].included },
+    }))
+    // Updates the override value for a feature (edited via the text/select input).
+    .on(valueChanged, (state, { id, value }) => ({
+      ...state,
+      [id]: { ...state[id], value },
+    }))
+
+  const copySuccessStore = createStore(false)
+    .on(copySucceeded, () => true)  // Show "Copied!" feedback after a successful clipboard write.
+    .on(copyReset, () => false)     // Reset back to "Copy" after the feedback timeout.
+
+  const selections = useUnit(selectionsStore)
+  const copySuccess = useUnit(copySuccessStore)
+
+  $effect(() => {
+    initSelections($featuresList)
+  })
+
+  let urlInputRef: HTMLInputElement | null = $state(null)
+
+  function getBucketValue(feature: FeatureBucket): string | null {
+    return feature.isResolved ? String(feature.getBucket().bucket) : null
+  }
+
+  function isBooleanFeature(feature: FeatureBucket): boolean {
+    if (!feature.isResolved) return true
+    const bucket = getBucketValue(feature)
+    return bucket === 'true' || bucket === 'false'
+  }
+
+  const generatedUrl = $derived.by(() => {
+    const url = new URL(window.location.href)
+    url.searchParams.delete('picked-feature')
+    const featureParams = $featuresList
+      .filter((feature) => $selections[feature.id]?.included)
+      .map((feature) => `picked-feature=${feature.id}:${$selections[feature.id].value}`)
+    const base = url.toString()
+    if (featureParams.length === 0) return base
+    const separator = url.search ? '&' : '?'
+    return base + separator + featureParams.join('&')
+  })
+
+  const hasSelections = $derived(Object.values($selections).some((s) => s.included))
+
+  async function copyUrl() {
+    try {
+      await navigator.clipboard.writeText(generatedUrl)
+      copySucceeded()
+      setTimeout(copyReset, 2000)
+    } catch {
+      urlInputRef?.select()
+    }
+  }
+
+  function refreshPage() {
+    window.location.href = generatedUrl
+  }
+</script>
+
+<div class="url-builder">
+  <p class="description">
+    Select feature overrides to generate a URL. Anyone who loads this URL will get the selected
+    feature values from page load — before any resolution occurs.
+  </p>
+
+  <table>
+    <thead>
+      <tr>
+        <th style="width: 2.5rem;">Include</th>
+        <th>Feature</th>
+        <th>Current Value</th>
+        <th>Override Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each $featuresList as feature (feature.id)}
+        {@const selection = $selections[feature.id]}
+        {@const currentValue = getBucketValue(feature)}
+        {@const isBoolean = isBooleanFeature(feature)}
+        {#if selection}
+          <tr class:selected={selection.included}>
+            <td style="text-align: center;">
+              <input
+                type="checkbox"
+                checked={selection.included}
+                onchange={() => featureToggled(feature.id)}
+                aria-label="Include {feature.name} in URL"
+              />
+            </td>
+            <td>
+              <span style="font-weight: 500;">{feature.name}</span>
+              <code
+                style="
+                display: block;
+                font-size: 10px;
+                color: #888;
+                margin-top: 2px;
+              ">{feature.key}</code>
+            </td>
+            <td>
+              {#if currentValue !== null}
+                <code style="font-size: 11px;">{currentValue}</code>
+              {:else}
+                <button onclick={() => feature.getBucket()} style="margin-left: 0.5rem; font-size: 10px; padding: 0.125rem 0.25rem;">
+                  Click to resolve
+                </button>
+              {/if}
+            </td>
+            <td>
+              {#if isBoolean}
+                <select
+                  value={selection.value}
+                  onchange={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
+                  disabled={!selection.included}
+                  style="font-size: 11px; padding: 0.125rem 0.25rem;"
+                >
+                  <option value="true">true</option>
+                  <option value="false">false</option>
+                </select>
+              {:else}
+                <input
+                  type="text"
+                  value={selection.value}
+                  oninput={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
+                  disabled={!selection.included}
+                  style="width: 100%; font-size: 11px; padding: 0.125rem 0.25rem;"
+                  placeholder="value"
+                />
+              {/if}
+            </td>
+          </tr>
+        {/if}
+      {/each}
+    </tbody>
+  </table>
+
+  {#if $featuresList.length === 0}
+    <div style="padding: 2rem; text-align: center; color: #999;">No features registered</div>
+  {/if}
+
+  <div class="url-output">
+    <div class="url-label">Generated URL</div>
+    <div class="url-row">
+      <input
+        bind:this={urlInputRef}
+        type="text"
+        readonly
+        value={generatedUrl}
+        class="url-input"
+        onclick={(e) => e.currentTarget.select()}
+        aria-label="Generated URL"
+      />
+      <button
+        onclick={copyUrl}
+        class="action-button copy-button"
+        class:success={copySuccess}
+        title="Copy URL to clipboard"
+      >
+        {copySuccess ? 'Copied!' : 'Copy'}
+      </button>
+      <button
+        onclick={refreshPage}
+        class="action-button refresh-button"
+        disabled={!hasSelections}
+        title="Reload the page with this URL"
+      >
+        Reload
+      </button>
+    </div>
+    {#if !hasSelections}
+      <p class="hint">Select at least one feature above to add overrides to the URL.</p>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .url-builder {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .description {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    font-size: 12px;
+    color: #555;
+    border-bottom: 1px solid lightgray;
+  }
+
+  tr.selected {
+    background-color: #f0f7ff;
+  }
+
+  .url-output {
+    padding: 0.75rem 0.5rem;
+    border-top: 1px solid lightgray;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .url-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #555;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .url-row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .url-input {
+    flex: 1;
+    font-size: 11px;
+    font-family: monospace;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    background-color: #f9f9f9;
+    color: #333;
+    min-width: 0;
+  }
+
+  .url-input:focus {
+    outline: 2px solid #0066cc;
+    outline-offset: -1px;
+  }
+
+  .action-button {
+    padding: 0.375rem 0.75rem;
+    font-size: 11px;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: 500;
+  }
+
+  .action-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .copy-button {
+    background-color: #2196f3;
+    color: white;
+  }
+
+  .copy-button.success {
+    background-color: #4caf50;
+  }
+
+  .refresh-button {
+    background-color: #555;
+    color: white;
+  }
+
+  .hint {
+    margin: 0;
+    font-size: 11px;
+    color: #999;
+    font-style: italic;
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.41",
+  "version": "0.0.42-next.2",
   "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.2",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },