@picked/svelte 0.0.1-dev.1770787109735 → 0.0.1-dev.1771901344537

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { combine, createStore, createEvent, sample } from 'effector'
+  import { getPicked } from '../../../../hooks'
+  import EventListItem from './EventListItem.svelte'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  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)
+
+  const columns = [
+    { key: 'time', header: 'Time', sortable: true },
+    { key: 'eventType', header: 'Event Type' },
+    { key: 'experience', header: 'Experience' },
+    { key: 'actions', header: '' },
+  ]
+
+  function handleSort() {
+    toggleSortDirection()
+  }
+</script>
+
+<Stack padding="medium">
+  <Card sectioned>
+    <DataTable
+      columns={columns}
+      rows={$sortedEvents}
+      sortKey="time"
+      sortDirection={$sortDirectionStore}
+      onSort={handleSort}
+    >
+      {#snippet row(item)}
+        {@const event = item}
+        <EventListItem
+          {event}
+          isExpanded={expandedRowIds.has(event.id)}
+          onToggle={() => toggleRow(event.id)}
+        />
+      {/snippet}
+      {#snippet empty()}
+        <EmptyState message="No events yet. Interact with the page to see events." />
+      {/snippet}
+    </DataTable>
+  </Card>
+</Stack>

package/dist/plugins/devtools/screens/experience-instances/ExperienceInstancesListScreen.svelte

@@ -7,6 +7,4 @@
   $: experienceInstances = client.experienceInstances.listStore
 </script>
 
-<div>
-  <ExperienceInstancesTable experienceInstances={$experienceInstances} />
-</div>
+<ExperienceInstancesTable experienceInstances={$experienceInstances} />

package/dist/plugins/devtools/screens/experiences/ExperienceDetailsScreen.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ExperienceStore } from '@picked/client'
   import { getPicked } from '../../../../hooks'
+  import { Button, Card, Text, CodeBlock, Stack } from '../../ui'
 
   const client = getPicked()
   export let experience: ExperienceStore
@@ -8,39 +9,39 @@
   $: config = experience.configStore
 </script>
 
-<div class="container">
-  <div>
-    <button on:click={() => client.launchExperienceById(experience.id)}>Launch experience</button>
-  </div>
+<Stack direction="vertical" gap="medium" padding="medium">
+  <Stack direction="horizontal" gap="small">
+    <Button variant="primary" size="small" onclick={() => client.launchExperienceById(experience.id)}>
+      Launch experience
+    </Button>
+  </Stack>
 
-  <div>
-    <p><b>Type</b></p>
-    <p>{$config.type}</p>
-  </div>
+  <Card sectioned>
+    <Stack direction="vertical" gap="medium" padding="medium">
+      <div>
+        <Text weight="semibold">Type</Text>
+        <Text>{$config.type}</Text>
+      </div>
 
-  <div>
-    <p><b>Target selectors</b></p>
-    <ul>
-      {#if $config.targetSelectors.length > 0}
-        {#each $config.targetSelectors as selector (selector)}
-          <li>
-            <pre>{selector.selector} || {selector.placement}</pre>
-          </li>
-        {/each}
-      {:else}
-        <li>(none)</li>
-      {/if}
-    </ul>
-  </div>
+      <div>
+        <Text weight="semibold">Target selectors</Text>
+        <ul>
+          {#if $config.targetSelectors.length > 0}
+            {#each $config.targetSelectors as selector (selector)}
+              <li>
+                <CodeBlock code="{selector.selector} || {selector.placement}" />
+              </li>
+            {/each}
+          {:else}
+            <li><Text color="subdued">(none)</Text></li>
+          {/if}
+        </ul>
+      </div>
 
-  <div>
-    <p><b>Decision logic</b></p>
-    <pre>{JSON.stringify($config.decisionLogic, null, 2)}</pre>
-  </div>
-</div>
-
-<style>
-  .container {
-    padding: 0.5em;
-  }
-</style>
+      <div>
+        <Text weight="semibold">Decision logic</Text>
+        <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
+      </div>
+    </Stack>
+  </Card>
+</Stack>

package/dist/plugins/devtools/screens/experiences/ExperienceExperienceInstancesListScreen.svelte

@@ -10,6 +10,4 @@
   $: experienceInstances = client.experienceInstances.getByExperienceId(experience.id)
 </script>
 
-<div>
-  <ExperienceInstancesTable experienceInstances={$experienceInstances} />
-</div>
+<ExperienceInstancesTable experienceInstances={$experienceInstances} />

package/dist/plugins/devtools/screens/experiences/ExperienceTreeScreen.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import * as d3 from 'd3'
   import type { ExperienceEdge, ExperienceNode, ExperienceStore } from '@picked/client'
+  import { Badge, Button, Spinner, Stack, Text, VisualizationContainer } from '../../ui'
 
   export let experience: ExperienceStore
 
@@ -237,74 +238,22 @@
   }
 </script>
 
-<div class="graph">
-  {#if loading}
-    <div class="loading-container">Loading visualization...</div>
-  {:else if error}
-    <div class="error-container">{error}</div>
-  {:else}
-    <div class="tree-container">
-      <div class="controls">
-        <button on:click={handleZoomIn} title="Zoom In">
-          <span>Zoom in</span>
-        </button>
-        <button on:click={handleZoomOut} title="Zoom Out">
-          <span>Zoom out</span>
-        </button>
-        <button on:click={handleReset} title="Reset View">
-          <span>Reset</span>
-        </button>
-        <span class="zoom-level">{Math.round(zoom * 100)}%</span>
-      </div>
-      <svg bind:this={svgEl} class="tree-svg"></svg>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .graph {
-    border: 1px solid lightgray;
-  }
-
-  .loading-container,
-  .error-container {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .error-container {
-    color: #ef4444;
-  }
-
-  .tree-container {
-    position: relative;
-    height: 100%;
-    width: 100%;
-  }
-
-  .controls {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    z-index: 10;
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  .zoom-level {
-    display: flex;
-    align-items: center;
-    border-radius: 0.25rem;
-    background-color: rgba(255, 255, 255, 0.8);
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
-  }
-
-  .tree-svg {
-    height: 100%;
-    width: 100%;
-    background-color: white;
-  }
-</style>
+{#if loading}
+  <Stack direction="horizontal" align="center" justify="center" fill>
+    <Spinner label="Loading visualization" />
+  </Stack>
+{:else if error}
+  <Stack direction="horizontal" align="center" justify="center" fill>
+    <Text color="error">{error}</Text>
+  </Stack>
+{:else}
+  <VisualizationContainer>
+    {#snippet controls()}
+      <Button variant="secondary" size="small" onclick={handleZoomIn}>Zoom in</Button>
+      <Button variant="secondary" size="small" onclick={handleZoomOut}>Zoom out</Button>
+      <Button variant="secondary" size="small" onclick={handleReset}>Reset</Button>
+      <Badge status="default" size="small">{Math.round(zoom * 100)}%</Badge>
+    {/snippet}
+    <svg bind:this={svgEl}></svg>
+  </VisualizationContainer>
+{/if}

package/dist/plugins/devtools/screens/features/FeaturesListScreen.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+  import { createEvent, createStore } from 'effector'
+  import type { FeatureBucket } from '@picked/client'
+  import { getPicked, useUnit } from '../../../../hooks'
+  import { Button, Card, CodeBlock, CopyButton, DataTable, EmptyState, Stack, Text } from '../../ui'
+
+  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 selectionsStore = createStore<Record<string, FeatureSelection>>({})
+    .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
+    })
+    .on(featureToggled, (state, id) => ({
+      ...state,
+      [id]: { ...state[id], included: !state[id].included },
+    }))
+    .on(valueChanged, (state, { id, value }) => ({
+      ...state,
+      [id]: { ...state[id], value },
+    }))
+
+  const selections = useUnit(selectionsStore)
+
+  $effect(() => {
+    initSelections($featuresList)
+  })
+
+  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))
+
+  function refreshPage() {
+    window.location.href = generatedUrl
+  }
+
+  const columns = [
+    { key: 'include', header: 'Include' },
+    { key: 'feature', header: 'Feature' },
+    { key: 'currentValue', header: 'Current Value' },
+    { key: 'overrideValue', header: 'Override Value' },
+  ]
+</script>
+
+<Stack direction="vertical" gap="medium" padding="medium">
+  <Text size="caption" color="subdued">
+    Override feature flags via URL parameters. Select features below, choose values, then copy the
+    generated URL. Recipients will see the overridden values on page load.
+  </Text>
+
+  <Card sectioned>
+    <DataTable columns={columns} rows={$featuresList}>
+      {#snippet row(item)}
+      {@const feature = item}
+      {@const selection = $selections[feature.id]}
+      {@const currentValue = getBucketValue(feature)}
+      {@const isBoolean = isBooleanFeature(feature)}
+      {#if selection}
+        <tr class:selected={selection.included}>
+          <td class="include-cell">
+            <input
+              type="checkbox"
+              checked={selection.included}
+              onchange={() => featureToggled(feature.id)}
+              aria-label="Include {feature.name} in URL"
+            />
+          </td>
+          <td>
+            <Text size="small" weight="medium">{feature.name}</Text>
+            <CodeBlock code={feature.id + ':' + feature.key} inline />
+          </td>
+          <td>
+            {#if currentValue !== null}
+              <CodeBlock code={currentValue} inline />
+            {:else}
+              <Button variant="ghost" size="small" onclick={() => feature.getBucket()}>
+                Click to resolve
+              </Button>
+            {/if}
+          </td>
+          <td>
+            {#if isBoolean}
+              <select
+                class="inline-select"
+                value={selection.value}
+                onchange={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
+                disabled={!selection.included}
+              >
+                <option value="true">true</option>
+                <option value="false">false</option>
+              </select>
+            {:else}
+              <input
+                class="inline-input"
+                type="text"
+                value={selection.value}
+                oninput={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
+                disabled={!selection.included}
+                placeholder="value"
+              />
+            {/if}
+          </td>
+        </tr>
+      {/if}
+    {/snippet}
+      {#snippet empty()}
+        <EmptyState message="No features registered" />
+      {/snippet}
+    </DataTable>
+  </Card>
+
+  <Card>
+    {#snippet header()}
+      <Text size="caption" weight="semibold" color="subdued">GENERATED URL</Text>
+    {/snippet}
+    <Stack direction="vertical" gap="small">
+      <CodeBlock code={generatedUrl} />
+      <Stack direction="horizontal" gap="small" justify="center">
+        <CopyButton text={generatedUrl} label="Copy URL" />
+        <Button
+          variant="secondary"
+          size="small"
+          onclick={refreshPage}
+          disabled={!hasSelections}
+        >
+          Reload
+        </Button>
+      </Stack>
+      {#if !hasSelections}
+        <Text size="caption" color="subdued">
+          Select at least one feature above to add overrides to the URL.
+        </Text>
+      {/if}
+    </Stack>
+  </Card>
+</Stack>

package/dist/plugins/devtools/screens/frameworks/FrameworksListScreen.svelte

@@ -1,24 +1,26 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
 
   $: frameworks = client.frameworks.listStore
+
+  const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<div>
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each $frameworks as framework (framework.name)}
+<Stack padding="medium">
+  <Card sectioned>
+    <DataTable columns={columns} rows={$frameworks}>
+      {#snippet row(item)}
+        {@const framework = item}
         <tr>
           <td>{framework.name}</td>
         </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+      {/snippet}
+      {#snippet empty()}
+        <EmptyState message="No frameworks" />
+      {/snippet}
+    </DataTable>
+  </Card>
+</Stack>

package/dist/plugins/devtools/screens/history/HistoryEntriesTable.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
   import type { HistoryEntry } from '@picked/client'
   import HistoryEntryListItem from './HistoryEntryListItem.svelte'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   export let historyEntries: HistoryEntry[]
+
+  const columns = [
+    { key: 'id', header: 'ID' },
+    { key: 'experienceId', header: 'Experience ID' },
+    { key: 'nodeId', header: 'Node ID' },
+    { key: 'nodeType', header: 'Node Type' },
+    { key: 'at', header: 'At' },
+  ]
 </script>
 
-<table>
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Experience ID</th>
-      <th>Node ID</th>
-      <th>Node Type</th>
-      <th>At</th>
-    </tr>
-  </thead>
-  <tbody>
-    {#each historyEntries as historyEntry (historyEntry.id)}
-      <HistoryEntryListItem {historyEntry} />
-    {/each}
-  </tbody>
-</table>
+<Stack padding="medium">
+  <Card sectioned>
+    <DataTable columns={columns} rows={historyEntries}>
+      {#snippet row(item)}
+        {@const historyEntry = item}
+        <HistoryEntryListItem {historyEntry} />
+      {/snippet}
+      {#snippet empty()}
+        <EmptyState message="No history entries" />
+      {/snippet}
+    </DataTable>
+  </Card>
+</Stack>

package/dist/plugins/devtools/screens/predicates/PredicatesListScreen.svelte

@@ -1,24 +1,26 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
 
   $: predicates = client.predicates.listStore
+
+  const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<div>
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each $predicates as predicate (predicate.name)}
+<Stack padding="medium">
+  <Card sectioned>
+    <DataTable columns={columns} rows={$predicates}>
+      {#snippet row(item)}
+        {@const predicate = item}
         <tr>
           <td>{predicate.name}</td>
         </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+      {/snippet}
+      {#snippet empty()}
+        <EmptyState message="No predicates" />
+      {/snippet}
+    </DataTable>
+  </Card>
+</Stack>

package/dist/plugins/devtools/screens/project/ProjectScreen.svelte

@@ -1 +1,47 @@
-<p>todo: project</p>
+<script lang="ts">
+  import { getPicked } from '../../../../hooks'
+  import { Button, Card, CodeBlock, DataTable, Stack, Text } from '../../ui'
+
+  const client = getPicked()
+
+  const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
+
+  const columns = [
+    { key: 'label', header: 'Property' },
+    { key: 'value', header: 'Value' },
+  ]
+
+  const rows = [
+    { label: 'Project ID', value: client.projectId },
+    { label: 'Organization ID', value: client.organizationId },
+    { label: 'API URL', value: client.apiUrl },
+    { label: 'Dashboard URL', value: client.dashboardUrl },
+  ]
+</script>
+
+<Stack direction="vertical" gap="medium" padding="medium">
+  <Text size="caption" color="subdued">
+    Project configuration for this Picked client instance.
+  </Text>
+
+  <Card sectioned>
+    <DataTable {columns} {rows}>
+      {#snippet row(item)}
+        <tr>
+          <td>
+            <Text size="small" weight="medium">{item.label}</Text>
+          </td>
+          <td>
+            <CodeBlock code={item.value} inline />
+          </td>
+        </tr>
+      {/snippet}
+    </DataTable>
+  </Card>
+
+  <Stack direction="horizontal" gap="small">
+    <Button variant="primary" size="small" href={dashboardProjectUrl} target="_blank">
+      Open in Dashboard
+    </Button>
+  </Stack>
+</Stack>