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

package/dist/hooks/field.d.ts

@@ -1,10 +1,7 @@
-import { Field, FieldValue, FieldOptionArray, JsonValue } from '@picked/client';
+import { Field, FieldValue } from '@picked/client';
 import { Store } from 'effector';
 export interface GetFieldResponse {
-    field: Store<Field | null>;
     value: Store<FieldValue>;
-    options: Store<FieldOptionArray<JsonValue> | null>;
-    isLoading: Store<boolean>;
-    error: Store<string | null>;
+    field: Store<Field | null>;
 }
 export declare function getField(id: string): GetFieldResponse;

package/dist/hooks/field.js

@@ -1 +1 @@
-import{getPicked as i}from"./client.js";function r(t){const o=i();o.fields.resolve(t);const s=o.fields.getByFieldId(t);return{field:o.fields.getById(t),value:o.responses.getByFieldId(t),options:s.map(e=>e.options),isLoading:s.map(e=>e.status==="loading"||e.status==="idle"),error:s.map(e=>e.error??null)}}export{r as getField};
+import{getPicked as s}from"./client.js";function r(e){const t=s(),n=t.fields.getById(e),o=t.responses.getByFieldId(e);return{field:n,value:o}}export{r as getField};

package/dist/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export { getPicked, getExperience } from './client';
-export { getField } from './field';
 export { getPredicate, getPredicateResult } from './predicate';
 export { getFeature, getFeatureResult } from './feature';
 export { getAction, getActionResult } from './action';

package/dist/hooks/index.js

@@ -1 +1 @@
-import{getExperience as r,getPicked as o}from"./client.js";import{getField as p}from"./field.js";import{getPredicate as x,getPredicateResult as a}from"./predicate.js";import{getFeature as n,getFeatureResult as s}from"./feature.js";import{getAction as i,getActionResult as u}from"./action.js";import{getStep as d,setStepContext as l}from"./step.js";import{getContextScope as C,setContextScope as R,useUnit as y}from"./stores.js";import{createLocalStorageStore as k,createSessionStorageStore as q}from"./storage.js";import{getTrackRecommendationPresentEvent as E}from"./events.js";import{createQuery as v,queryCache as L,queryPresets as Q}from"./create-query/index.js";export{k as createLocalStorageStore,v as createQuery,q as createSessionStorageStore,i as getAction,u as getActionResult,C as getContextScope,r as getExperience,n as getFeature,s as getFeatureResult,p as getField,o as getPicked,x as getPredicate,a as getPredicateResult,d as getStep,E as getTrackRecommendationPresentEvent,L as queryCache,Q as queryPresets,R as setContextScope,l as setStepContext,y as useUnit};
+import{getExperience as r,getPicked as o}from"./client.js";import{getPredicate as p,getPredicateResult as a}from"./predicate.js";import{getFeature as x,getFeatureResult as n}from"./feature.js";import{getAction as s,getActionResult as f}from"./action.js";import{getStep as u,setStepContext as S}from"./step.js";import{getContextScope as d,setContextScope as l,useUnit as C}from"./stores.js";import{createLocalStorageStore as y,createSessionStorageStore as k}from"./storage.js";import{getTrackRecommendationPresentEvent as A}from"./events.js";import{createQuery as F,queryCache as h,queryPresets as v}from"./create-query/index.js";export{y as createLocalStorageStore,F as createQuery,k as createSessionStorageStore,s as getAction,f as getActionResult,d as getContextScope,r as getExperience,x as getFeature,n as getFeatureResult,o as getPicked,p as getPredicate,a as getPredicateResult,u as getStep,A as getTrackRecommendationPresentEvent,h as queryCache,v as queryPresets,l as setContextScope,S as setStepContext,C as useUnit};

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -1,6 +1,13 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/layout/page.tsx
+  @design-parity The devtools modal layout mirrors the Dashboard Page component.
+  The toolbar, main area, padding, and border radius must stay visually identical
+  to the Dashboard's AppShell content area. When modifying this layout, replicate
+  the change in the paired React component to maintain visual and behavioral parity.
+-->
 <script lang="ts">
-  import { getExperience } from '../../hooks'
-  import PickedLogo from './PickedLogo.svelte'
+  import { getExperience, getPicked } from '../../hooks'
+  import { Button, Heading, Stack } from './ui'
   import Tabs from './components/Tabs.svelte'
   import ExperiencesListScreen from './screens/experiences/ExperiencesListScreen.svelte'
   import ExperienceInstancesListScreen from './screens/experience-instances/ExperienceInstancesListScreen.svelte'
@@ -10,8 +17,14 @@
   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'
+  import PickedIcon from './PickedIcon.svelte'
 
   const experience = getExperience()
+  const client = getPicked()
+
+  const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
 
   const tabs = [
     {
@@ -26,6 +39,12 @@
       component: HistoryEntriesListScreen,
       props: {},
     },
+    {
+      id: 'events',
+      label: 'Events',
+      component: EventsListScreen,
+      props: {},
+    },
     {
       id: 'responses',
       label: 'Responses',
@@ -50,6 +69,12 @@
       component: PredicatesListScreen,
       props: {},
     },
+    {
+      id: 'features',
+      label: 'Features',
+      component: FeaturesListScreen,
+      props: {},
+    },
     {
       id: 'components',
       label: 'Components',
@@ -77,9 +102,19 @@
   >
     <div class="backdrop"></div>
     <div class="container">
-      <header class="header" id="devtools-header">
-        <PickedLogo />
-        <button on:click={() => experience.close()}>Close</button>
+      <header class="toolbar" id="devtools-header">
+        <div class="toolbar-left">
+          <Stack direction="horizontal" gap="small" >
+            <PickedIcon height={25} width={25}/>
+            <Heading size="small">Developer Tools</Heading>
+          </Stack>
+        </div>
+        <div class="toolbar-center"></div>
+        <div class="toolbar-right">
+          <Button variant="ghost" size="small" href={client.documentationSiteUrl} target="_blank">Docs</Button>
+          <Button variant="ghost" size="small" href={dashboardProjectUrl} target="_blank">Dashboard</Button>
+          <Button variant="ghost" size="small" onclick={() => experience.close()}>Close</Button>
+        </div>
       </header>
       <section class="main">
         <Tabs {tabs} initialTab={1} />
@@ -89,82 +124,86 @@
 {:else}
   <button
     class="floating-button"
-    on:click={() => experience.open()}
+    onclick={() => experience.open()}
     aria-label="Open Picked Devtools"
     title="Open Picked Devtools (or press .)"
   >
-    <PickedLogo />
+    <PickedIcon height={25} width={25}/>
   </button>
 {/if}
 
 <style>
   *,
   .devtools * {
-    box-sizing: inherit;
+    box-sizing: border-box;
   }
 
   .devtools {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     z-index: 999999999;
-    padding: 2em;
+    padding: 48px;
     display: grid;
     place-items: center;
     overflow: hidden;
-    font-size: 13px;
-    color: black;
-    line-height: 1;
-  }
-
-  .devtools button {
-    font-size: 13px;
-    color: black;
-    line-height: 1;
   }
 
   .backdrop {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 1;
   }
 
   .container {
-    background-color: white;
+    background-color: var(--color-white);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
     display: flex;
     flex-direction: column;
-    padding: 0.5rem;
-    border-radius: 4px;
-    box-shadow: 4px 4px 4px #00000029;
-    border: 1px solid lightgray;
+    overflow: hidden;
     z-index: 2;
-    overflow: auto;
     width: 100%;
     height: 100%;
   }
 
-  .header {
-    height: 50px;
-    border-bottom: 1px solid lightgray;
+  .toolbar {
+    height: 40px;
+    background-color: var(--color-white);
+    border-bottom: 1px solid var(--color-gray-200);
+    padding: 0 var(--space-4);
     display: flex;
     align-items: center;
-    padding: 0.5em;
     justify-content: space-between;
+    flex-shrink: 0;
+  }
+
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .toolbar-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
   }
 
   .main {
-    flex: 1 1 auto;
-    display: grid;
+    flex: 1;
+    background-color: var(--color-gray-50);
+    overflow: auto;
+    display: flex;
     flex-direction: column;
-    height: 100%;
   }
 
+  /* Global table styles for screens that still use raw tables */
   .devtools :global(table) {
     width: 100%;
     border-collapse: collapse;
@@ -172,47 +211,48 @@
 
   .devtools :global(th),
   .devtools :global(td) {
-    padding: 0.5rem;
+    padding: var(--space-2);
     text-align: left;
-    border-bottom: 1px solid lightgray;
+    border-bottom: 1px solid var(--color-gray-200);
+    font-size: var(--text-sm);
+    color: var(--color-gray-900);
   }
 
   .devtools :global(th) {
-    padding: 0.5rem;
-    font-weight: normal;
-    background-color: #f0f0f0;
+    font-weight: var(--font-medium);
+    background-color: var(--color-gray-50);
+  }
+
+  .devtools :global(th:first-child),
+  .devtools :global(td:first-child) {
+    padding-left: var(--space-4);
+  }
+
+  .devtools :global(th:last-child),
+  .devtools :global(td:last-child) {
+    padding-right: var(--space-4);
   }
 
   .floating-button {
     position: fixed;
-    bottom: 1.5rem;
+    bottom: 1rem;
     right: 1.5rem;
-    width: 4.5rem;
-    height: 4.5rem;
-    border-radius: 50%;
-    background-color: white;
-    border: 1px solid lightgray;
-    box-shadow: 0 4px 12px rgba(21, 73, 255, 0.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    border-radius: 6px;
+    background-color: var(--color-white);
+    display: grid;
+    place-items: center;
     cursor: pointer;
     z-index: 999999;
-    transition: all 0.2s ease;
-    padding: 0;
-  }
+    border: 0 transparent;
+    padding: 6px;
+    box-shadow: 2px 2px 4px #00000029;
 
-  .floating-button:hover {
-    box-shadow: 0 6px 16px rgba(21, 73, 255, 0.3);
-    transform: scale(1.05);
+    &:hover {
+      background-color: #f5f5f5;
+    }
   }
 
-  .floating-button:active {
-    transform: scale(0.95);
-  }
 
-  .floating-button :global(svg) {
-    width: 2.25rem;
-    height: 2.25rem;
-  }
+
+
 </style>

package/dist/plugins/devtools/PickedIcon.svelte

@@ -0,0 +1,19 @@
+<!-- PickedIcon.svelte -->
+<script lang="ts">
+  export let width = 48
+  export let height = 48
+</script>
+
+<svg {width} {height} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g opacity="0.5">
+    <ellipse opacity="0.8" cx="32.5807" cy="7.38424" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
+    <circle opacity="0.6" cx="31.4947" cy="8.47015" r="6.29832" fill="#01AD7A"/>
+    <ellipse opacity="0.4" cx="30.4088" cy="9.55607" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
+    <ellipse opacity="0.2" cx="29.3229" cy="10.642" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
+    <circle opacity="0.1" cx="28.237" cy="11.7279" r="6.29832" fill="#01AD7A"/>
+  </g>
+  <ellipse cx="33.6664" cy="6.29832" rx="6.29832" ry="6.29832" fill="#00CD90"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5997 16.1802C14.5788 16.1802 16.1832 14.5758 16.1832 12.5967C16.1832 10.6175 14.5788 9.01315 12.5997 9.01315C10.6206 9.01315 9.01617 10.6175 9.01617 12.5967C9.01617 14.5758 10.6206 16.1802 12.5997 16.1802ZM12.5997 18.895C16.0782 18.895 18.898 16.0751 18.898 12.5967C18.898 9.11821 16.0782 6.29836 12.5997 6.29836C9.12123 6.29836 6.30138 9.11821 6.30138 12.5967C6.30138 16.0751 9.12123 18.895 12.5997 18.895Z" fill="#1549FF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5997 30.9486C14.5788 30.9486 16.1832 29.3442 16.1832 27.3651C16.1832 25.386 14.5788 23.7816 12.5997 23.7816C10.6206 23.7816 9.01617 25.386 9.01617 27.3651C9.01617 29.3442 10.6206 30.9486 12.5997 30.9486ZM12.5997 33.6634C16.0782 33.6634 18.898 30.8436 18.898 27.3651C18.898 23.8866 16.0782 21.0668 12.5997 21.0668C9.12123 21.0668 6.30138 23.8866 6.30138 27.3651C6.30138 30.8436 9.12123 33.6634 12.5997 33.6634Z" fill="#1549FF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.3683 30.9486C29.3474 30.9486 30.9518 29.3442 30.9518 27.3651C30.9518 25.386 29.3474 23.7816 27.3683 23.7816C25.3891 23.7816 23.7847 25.386 23.7847 27.3651C23.7847 29.3442 25.3891 30.9486 27.3683 30.9486ZM27.3683 33.6634C30.8467 33.6634 33.6666 30.8436 33.6666 27.3651C33.6666 23.8866 30.8467 21.0668 27.3683 21.0668C23.8898 21.0668 21.0699 23.8866 21.0699 27.3651C21.0699 30.8436 23.8898 33.6634 27.3683 33.6634Z" fill="#1549FF"/>
+</svg>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { ExperienceInstance } from '@picked/client'
+  import { Button } from '../ui'
 
   export let experienceInstance: ExperienceInstance
 
@@ -15,7 +16,7 @@
 
 <tr>
   <td>{experienceInstance.experienceId}</td>
-  <td><button onclick={() => experienceInstance.toggleOpen()}>{$isOpen}</button></td>
+  <td><Button variant="ghost" size="small" onclick={() => experienceInstance.toggleOpen()}>{$isOpen}</Button></td>
   <td>{$currentNode?.id || ''}</td>
   <td>{$currentNode?.type || ''}</td>
   <td>{$currentStep?.id || ''}</td>

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

@@ -1,27 +1,33 @@
 <script lang="ts">
   import type { ExperienceInstance } from '@picked/client'
   import ExperienceInstanceListItem from './ExperienceInstanceListItem.svelte'
+  import { Card, DataTable, EmptyState, Stack } from '../ui'
 
   export let experienceInstances: ExperienceInstance[]
+
+  const columns = [
+    { key: 'experience', header: 'Experience' },
+    { key: 'isOpen', header: 'Is Open' },
+    { key: 'currentNodeId', header: 'Current node ID' },
+    { key: 'currentNodeType', header: 'Current node Type' },
+    { key: 'currentStepId', header: 'Current step ID' },
+    { key: 'currentStepTitle', header: 'Current step Title' },
+    { key: 'nextSteps', header: 'Next reachable steps amount' },
+    { key: 'stepsToOrigin', header: 'Steps to origin' },
+    { key: 'stepsToEnd', header: 'Steps to end' },
+  ]
 </script>
 
-<table>
-  <thead>
-    <tr>
-      <th>Experience</th>
-      <th>Is Open</th>
-      <th>Current node ID</th>
-      <th>Current node Type</th>
-      <th>Current step ID</th>
-      <th>Current step Title</th>
-      <th>Next reachable steps amount</th>
-      <th>Steps to origin</th>
-      <th>Steps to end</th>
-    </tr>
-  </thead>
-  <tbody>
-    {#each experienceInstances as experienceInstance (experienceInstance.experienceId)}
-      <ExperienceInstanceListItem {experienceInstance} />
-    {/each}
-  </tbody>
-</table>
+<Stack padding="medium">
+  <Card sectioned>
+    <DataTable columns={columns} rows={experienceInstances}>
+      {#snippet row(item)}
+        {@const experienceInstance = item}
+        <ExperienceInstanceListItem {experienceInstance} />
+      {/snippet}
+      {#snippet empty()}
+        <EmptyState message="No experience instances" />
+      {/snippet}
+    </DataTable>
+  </Card>
+</Stack>

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

@@ -82,37 +82,50 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    flex: 1;
   }
 
   .tab-list {
     display: flex;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--color-gray-200);
+    flex-shrink: 0;
+    overflow-x: auto;
   }
 
   .tab-button {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     border: none;
     background: none;
     cursor: pointer;
     border-bottom: 2px solid transparent;
+    font-size: var(--text-sm);
+    color: var(--color-gray-600);
+    font-family: inherit;
+    white-space: nowrap;
+    transition: color 0.15s ease, border-color 0.15s ease;
   }
 
   .tab-button:hover {
-    background-color: #f0f0f0;
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-900);
   }
 
   .tab-button.active {
-    border-bottom: 2px solid #000;
+    border-bottom-color: var(--color-gray-900);
+    color: var(--color-gray-900);
+    font-weight: var(--font-medium);
   }
 
-  .tab-button:focus {
-    outline: 2px solid #0066cc;
-    outline-offset: -2px;
+  .tab-button:focus-visible {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: calc(-1 * var(--ring-width));
   }
 
   .tab-panel {
     flex: 1 1 auto;
     display: grid;
+    align-content: start;
+    overflow: auto;
   }
 
   .tab-panel:not(.active) {

package/dist/plugins/devtools/experience.js

@@ -1 +1 @@
-import{createExperience as e}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as o}from"../../component.js";import t from"./DevToolsExperience.svelte";const p=e({id:"svelte-devtools",name:"Picked Devtools",decide:{},targets:[{selector:"body",placement:"append"}],component:o(t)});p.addStep({label:"Tools"});export{p as devtoolsExperience};
+import{createExperience as e}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as o}from"../../component.js";import t from"./DevToolsExperience.svelte";import p from"./ui/tokens.css.js";const r=e({id:"svelte-devtools",name:"Picked Devtools",decide:{},targets:[{selector:"body",placement:"append"}],component:o(t,{css:[p]})});r.addStep({label:"Tools"});export{r as devtoolsExperience};

package/dist/plugins/devtools/screens/components/ComponentsListScreen.svelte

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

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

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import type { EventBusPayload, EventHistoryEntry } from '@picked/client'
+  import { Badge, Card, CodeBlock, Stack, Text } from '../../ui'
+
+  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[] = []
+
+    fields.push({ label: 'Type', value: payload.type })
+
+    if ('value' in payload && payload.value !== undefined) {
+      fields.push({ label: 'Value', value: payload.value })
+    }
+
+    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 })
+        }
+      }
+    }
+
+    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 })
+        }
+      }
+    }
+
+    if ('form' in payload && payload.form) {
+      fields.push({ label: 'Form', value: JSON.stringify(payload.form) })
+    }
+
+    if ('feature' in payload && payload.feature) {
+      fields.push({ label: 'Feature', value: JSON.stringify(payload.feature) })
+    }
+
+    if ('exception' in payload && payload.exception) {
+      fields.push({ label: 'Exception', value: JSON.stringify(payload.exception) })
+    }
+
+    if ('version' in payload && payload.version) {
+      fields.push({ label: 'Version', value: payload.version })
+    }
+
+    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 class="event-row" onclick={onToggle}>
+  <td>
+    <span class="expand-icon">
+      {isExpanded ? '▼' : '▶'}
+    </span>
+    <CodeBlock code={formatTime(event.at)} inline />
+  </td>
+  <td>
+    <Badge status="info">{event.payload.type}</Badge>
+  </td>
+  <td>
+    <Text size="small">
+      {'experience' in event.payload && event.payload.experience ? event.payload.experience.experienceId : '-'}
+    </Text>
+  </td>
+  <td>
+    <Text size="caption" color="subdued">
+      {isExpanded ? 'Click to collapse' : 'Click to expand payload'}
+    </Text>
+  </td>
+</tr>
+{#if isExpanded}
+  <tr>
+    <td colspan="4" class="details-cell">
+      <Stack direction="vertical" gap="small">
+        <Text size="small" weight="semibold">Event Payload</Text>
+        <Card>
+          <Stack direction="vertical" gap="small">
+            {#each getPayloadFields(event.payload) as field}
+              <Text size="caption" inline>
+                <Text size="caption" weight="semibold" color="subdued" inline>{field.label}:</Text>
+                <CodeBlock code={formatValue(field.value)} inline />
+              </Text>
+            {/each}
+          </Stack>
+        </Card>
+      </Stack>
+    </td>
+  </tr>
+{/if}

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { getPicked } from '../../../../hooks'
+  import EventsTable from './EventsTable.svelte'
+  import { Divider, Spacer, Stack, Text } from '../../ui'
+
+  const { events } = getPicked()
+</script>
+
+<Stack direction="vertical" gap="none" fill>
+  <EventsTable />
+  <Spacer />
+  <Divider />
+  <Stack padding="small">
+    <Text size="caption" color="subdued">
+      {$events.length} events
+    </Text>
+  </Stack>
+</Stack>