@picked/svelte 0.0.1-dev.1788925875333 → 0.0.1-next.1

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

@@ -1,42 +1,30 @@
 <script lang="ts">
-  /** @file D3-based tree visualization of an experience's node graph in the devtools panel. */
-  import { onDestroy } from 'svelte'
   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
 
   let svgEl: SVGSVGElement
   let zoom = 1
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- reserved for future node details panel
   let selectedNode = null
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, sonarjs/no-unused-collection -- reserved for future path highlighting
   let highlightedPath: string[][] = []
-  let error: string | null = null
+  let error = null
   const loading = false
 
   let treeRenderingDone = false
-  let tooltipEl: d3.Selection<HTMLDivElement, unknown, null, undefined> | null = null
-
-  onDestroy(() => {
-    tooltipEl?.remove()
-    tooltipEl = null
-  })
 
   const tree = experience.treeStore
 
+  $: steps = $tree.steps
   $: nodes = $tree.nodes
   $: edges = $tree.edges
-  $: conditions = $tree.conditions
-
+  $: conditionals = $tree.conditionals
 
   let zoomBehavior: d3.ZoomBehavior<SVGSVGElement, unknown>
 
   interface ProcessedNode {
     id: string
     name: string
-    tooltip?: string
     type: string
     children: ProcessedNode[]
     _originalNode: ExperienceNode
@@ -46,98 +34,10 @@
     _referenceTo?: string
   }
 
-  /**
-   * Type guard that checks if a value is a non-null, non-array object.
-   *
-   * @param val - The value to check.
-   * @example
-   * ```typescript
-   * isRecord({ key: 'value' }) // true
-   * isRecord([1, 2]) // false
-   * ```
-   */
-  function isRecord(val: unknown): val is Record<string, unknown> {
-    return val !== null && typeof val === 'object' && !Array.isArray(val)
-  }
-
-  /**
-   * Recursively formats a JSON Logic rule into a human-readable string.
-   *
-   * @param rule - The JSON Logic rule object to format.
-   * @example
-   * ```typescript
-   * formatLogicRule({ '==': [{ var: 'age' }, 18] }) // 'age = 18'
-   * ```
-   */
-  // eslint-disable-next-line sonarjs/cognitive-complexity -- recursive logic rule formatter handles all operator types
-  function formatLogicRule(rule: unknown): string {
-    if (rule === null || rule === undefined) return '?'
-    if (typeof rule === 'string') return rule
-    if (typeof rule === 'number' || typeof rule === 'boolean') return String(rule)
-    if (Array.isArray(rule)) {
-      return rule.map(formatLogicRule).join(', ')
-    }
-
-    if (isRecord(rule)) {
-      const keys = Object.keys(rule)
-      if (keys.length === 0) return 'Condition'
-      const op = keys[0]
-      const args = rule[op]
-
-      if (op === 'var') {
-        return String(Array.isArray(args) ? args[0] : args)
-      }
-
-      const compOps: Record<string, string> = {
-        '==': '=',
-        '===': '=',
-        '!=': '≠',
-        '!==': '≠',
-        '>': '>',
-        '<': '<',
-        '>=': '≥',
-        '<=': '≤',
-      }
-      if (op in compOps && Array.isArray(args) && args.length >= 2) {
-        return `${formatLogicRule(args[0])} ${compOps[op]} ${formatLogicRule(args[1])}`
-      }
-
-      if (op === 'and' && Array.isArray(args)) {
-        return args.map(formatLogicRule).join(' & ')
-      }
-
-      if (op === 'or' && Array.isArray(args)) {
-        return args.map(formatLogicRule).join(' | ')
-      }
-
-      if ((op === '!' || op === 'not') && Array.isArray(args)) {
-        return `!${formatLogicRule(args[0])}`
-      }
-
-      if (op === 'in' && Array.isArray(args) && args.length >= 2) {
-        return `${formatLogicRule(args[0])} in ${formatLogicRule(args[1])}`
-      }
-
-      return `${op}(?)`
-    }
-
-    return '?'
-  }
-
-  /**
-   * Renders the experience node graph as an interactive D3 tree visualization.
-   *
-   * @example
-   * ```typescript
-   * renderGraph() // builds and renders the SVG tree
-   * ```
-   */
   function renderGraph() {
     d3.select(svgEl).selectAll('*').remove()
 
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
-    const conditionsMap = new Map(conditions.map((c) => [c.id, c]))
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
+    const stepsMap = new Map(steps.map((s) => [s.id, s]))
     const outgoingEdges = new Map<string, ExperienceEdge[]>()
     edges.forEach((e) => {
       if (!outgoingEdges.has(e.sourceNodeId)) outgoingEdges.set(e.sourceNodeId, [])
@@ -146,32 +46,17 @@
 
     const getNodeLabel = (node: ExperienceNode): string => {
       if (node.type === 'origin') return 'Start'
-      if (node.type === 'step') return node.name ?? 'Unknown Step'
-
-      if (node.type === 'condition') {
-        const conditionItem = node.conditionId ? conditionsMap.get(node.conditionId) : undefined
-        return conditionItem?.name ?? 'Condition'
-      }
-
-      if (node.type === 'action') return node.name ?? node.actionKey ?? 'Action'
-
+      if (node.type === 'step' && node.stepId)
+        return stepsMap.get(node.stepId)?.label ?? 'Unknown Step'
+      if (node.type === 'conditional' && node.conditionalId) return `Condition'}`
       return 'Unknown Node'
     }
 
-    const getNodeTooltip = (node: ExperienceNode): string | undefined => {
-      if (node.type !== 'condition') return undefined
-      const conditionItem = node.conditionId ? conditionsMap.get(node.conditionId) : undefined
-      if (conditionItem?.logic) return formatLogicRule(conditionItem.logic)
-      return undefined
-    }
-
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
     const processedNodes = new Map<string, ProcessedNode>()
     nodes.forEach((n) => {
       processedNodes.set(n.id, {
         id: n.id,
         name: getNodeLabel(n),
-        tooltip: getNodeTooltip(n),
         type: n.type,
         children: [],
         _originalNode: n,
@@ -195,17 +80,15 @@
     }
 
     if (rootNode) {
-      // Use a global visited set so join nodes (multiple incoming branches converging
-      // to the same node) only appear once in the tree, with reference nodes on
-      // subsequent visits to indicate the convergence point.
-      // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
-      const globalVisited = new Set<string>()
-      const convertGraphToTree = (node: ProcessedNode): ProcessedNode => {
-        if (globalVisited.has(node.id)) {
+      const convertGraphToTree = (
+        node: ProcessedNode,
+        visited = new Set<string>(),
+      ): ProcessedNode => {
+        if (visited.has(node.id)) {
           return {
             ...node,
             id: `${node.id}_ref`,
-            name: `↩ ${node.name}`,
+            name: `${node.name} (ref)`,
             type: `${node.type}_ref`,
             children: [],
             _isReference: true,
@@ -213,8 +96,9 @@
           }
         }
 
-        globalVisited.add(node.id)
-        return { ...node, children: node.children.map((c) => convertGraphToTree(c)) }
+        const newVisited = new Set(visited)
+        newVisited.add(node.id)
+        return { ...node, children: node.children.map((c) => convertGraphToTree(c, newVisited)) }
       }
 
       const treeData = convertGraphToTree(rootNode)
@@ -243,143 +127,50 @@
 
       const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
 
-      const linkGenerator = d3
-        .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, d3.HierarchyPointNode<ProcessedNode>>()
-        .x((d) => d.y)
-        .y((d) => d.x)
-
       g.selectAll('.link')
         .data(treeRoot.links())
         .enter()
         .append('path')
         .attr('class', 'link')
         .attr('fill', 'none')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('stroke', (d: any) => {
-          if (d.source.data.type !== 'condition') return '#94a3b8'
-          const targetId = d.target.data._isReference
-            ? d.target.data._referenceTo
-            : d.target.data.id
-          const edge = d.source.data._originalEdges.find(
-            (e: ExperienceEdge) => e.destinationNodeId === targetId,
-          )
-          if (edge?.sourceHandle === 'true') return '#10b981'
-          if (edge?.sourceHandle === 'false') return '#ef4444'
-          return '#94a3b8'
-        })
+        .attr('stroke', '#94a3b8')
         .attr('stroke-width', 2)
-        .attr('d', linkGenerator)
-
-      // Label true/false branches from condition nodes
-      g.selectAll('.edge-label')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .data(treeRoot.links().filter((d: any) => d.source.data.type === 'condition'))
-        .enter()
-        .append('text')
-        .attr('class', 'edge-label')
-        .attr('text-anchor', 'middle')
-        .attr('font-size', '10px')
-        .attr('font-weight', 'bold')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('x', (d: any) => (d.source.y + d.target.y) / 2)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('y', (d: any) => (d.source.x + d.target.x) / 2 - 6)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('fill', (d: any) => {
-          const targetId = d.target.data._isReference
-            ? d.target.data._referenceTo
-            : d.target.data.id
-          const edge = d.source.data._originalEdges.find(
-            (e: ExperienceEdge) => e.destinationNodeId === targetId,
-          )
-          if (edge?.sourceHandle === 'true') return '#10b981'
-          if (edge?.sourceHandle === 'false') return '#ef4444'
-          return '#64748b'
-        })
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .text((d: any) => {
-          const targetId = d.target.data._isReference
-            ? d.target.data._referenceTo
-            : d.target.data.id
-          const edge = d.source.data._originalEdges.find(
-            (e: ExperienceEdge) => e.destinationNodeId === targetId,
-          )
-          if (edge?.sourceHandle === 'true') return 'Yes'
-          if (edge?.sourceHandle === 'false') return 'No'
-          return ''
-        })
+        .attr(
+          'd',
+          d3
+            .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, ProcessedNode>()
+            .x((d) => d.y)
+            .y((d) => d.x),
+        )
 
-      const nodesSelection = g
+      const nodes = g
         .selectAll('.node')
         .data(treeRoot.descendants())
         .enter()
         .append('g')
         .attr('class', 'node')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('transform', (d: any) => `translate(${d.y},${d.x})`)
+        .attr('transform', (d: any) => `translate(${d.y},${d.x})`) // d3.HierarchyPointNode uses x, y
 
-      const circles = nodesSelection
+      nodes
         .append('circle')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('r', (d: any) => (d.data.type === 'origin' ? 15 : 10))
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('fill', (d: any) => {
           if (d.data._isReference) return '#38bdf8'
-          if (d.data.type === 'origin') return '#6b7280'
-          if (d.data.type === 'condition') return '#f59e0b'
-          if (d.data.type === 'action') return '#22c55e'
-          return '#3b82f6'
+          if (d.data.type === 'origin') return '#00cd90'
+          if (d.data.type === 'conditional') return '#f59e0b'
+          return '#1748ff'
         })
         .attr('stroke', '#fff')
         .attr('stroke-width', 2)
 
-      tooltipEl?.remove()
-      tooltipEl = d3
-        .select(svgEl.parentElement)
-        .append('div')
-
-      const tooltip = tooltipEl
-        .style('position', 'absolute')
-        .style('pointer-events', 'none')
-        .style('background', '#1e293b')
-        .style('color', '#f8fafc')
-        .style('padding', '6px 10px')
-        .style('border-radius', '6px')
-        .style('font-size', '11px')
-        .style('max-width', '260px')
-        .style('white-space', 'pre-wrap')
-        .style('opacity', '0')
-        .style('z-index', '10')
-
-      circles
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .filter((d: any) => d.data.tooltip)
-        .style('cursor', 'default')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .on('mouseenter', function showTooltip(event: MouseEvent, d: any) {
-          const container = svgEl.parentElement
-          if (!container || !d.data.tooltip) return
-          const rect = container.getBoundingClientRect()
-          tooltip
-            .text(d.data.tooltip)
-            .style('left', `${event.clientX - rect.left + 12}px`)
-            .style('top', `${event.clientY - rect.top - 8}px`)
-            .style('opacity', '1')
-        })
-        .on('mouseleave', function hideTooltip() {
-          tooltip.style('opacity', '0')
-        })
-
-      nodesSelection
+      nodes
         .append('text')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('dy', (d: any) => (d.children ? -15 : 25))
         .attr('text-anchor', 'middle')
         .attr('font-size', '12px')
         .attr('fill', '#1e293b')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .text((d: any) =>
-          d.data.name.length > 30 ? `${d.data.name.slice(0, 27)}...` : d.data.name,
+          d.data.name.length > 25 ? `${d.data.name.slice(0, 22)}...` : d.data.name,
         )
 
       svg.on('dblclick.zoom', null) // Remove default double click zoom
@@ -408,27 +199,11 @@
     treeRenderingDone = true
   }
 
-  /**
-   * Zooms the tree visualization in by 20%.
-   *
-   * @example
-   * ```typescript
-   * handleZoomIn() // increases zoom level
-   * ```
-   */
   function handleZoomIn() {
     if (!svgEl || !zoomBehavior) return
     d3.select(svgEl).transition().duration(250).call(zoomBehavior.scaleBy, 1.2)
   }
 
-  /**
-   * Zooms the tree visualization out by 20%.
-   *
-   * @example
-   * ```typescript
-   * handleZoomOut() // decreases zoom level
-   * ```
-   */
   function handleZoomOut() {
     if (!svgEl || !zoomBehavior) return
     d3.select(svgEl)
@@ -437,14 +212,6 @@
       .call(zoomBehavior.scaleBy, 1 / 1.2)
   }
 
-  /**
-   * Resets the tree visualization zoom and position to the default centered view.
-   *
-   * @example
-   * ```typescript
-   * handleReset() // resets zoom to default
-   * ```
-   */
   function handleReset() {
     if (!svgEl || !zoomBehavior) return
     const width = svgEl.clientWidth
@@ -458,15 +225,6 @@
     d3.select(svgEl).transition().duration(750).call(zoomBehavior.transform, initialTransform)
   }
 
-  /**
-   * Closes the node details panel and resets all link/node highlights.
-   *
-   * @example
-   * ```typescript
-   * closeNodeDetails() // resets selection and highlighting
-   * ```
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- reserved for future node details panel
   function closeNodeDetails() {
     selectedNode = null
     if (svgEl) {
@@ -479,22 +237,74 @@
   }
 </script>
 
-{#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}
+<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>

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  /** @file Screen listing all registered experiences as tabs in the devtools panel. */
   import Tabs from '../../components/Tabs.svelte'
   import { getPicked } from '../../../../hooks'
   import ExperienceScreen from './ExperienceScreen.svelte'
@@ -10,7 +9,7 @@
   $: tabs = $experiences.map((experience) => {
     return {
       id: experience.id,
-      label: experience.name,
+      label: experience.id,
       component: ExperienceScreen,
       props: {
         experience,

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

@@ -1,26 +1,24 @@
 <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>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={$frameworks}>
-      {#snippet row(item)}
-        {@const framework = item}
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each $frameworks as framework (framework.name)}
         <tr>
           <td>{framework.name}</td>
         </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No frameworks" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+      {/each}
+    </tbody>
+  </table>
+</div>

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

@@ -1,29 +1,23 @@
 <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>
 
-<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>
+<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>

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

@@ -1,18 +1,12 @@
 <script lang="ts">
-  /** @file List item row displaying a navigation history entry in the devtools history screen. */
   import type { HistoryEntry } from '@picked/client'
-  import { getPicked } from '../../../../hooks'
 
   export let historyEntry: HistoryEntry
-
-  const client = getPicked()
-  const experienceStore = client.experiences.getById(historyEntry.experienceId)
-  $: experienceName = $experienceStore?.name ?? historyEntry.experienceId
 </script>
 
 <tr>
   <td>{historyEntry.id}</td>
-  <td>{experienceName}</td>
+  <td>{historyEntry.experienceId}</td>
   <td>{historyEntry.node.id}</td>
   <td>{historyEntry.node.type}</td>
   <td>{historyEntry.at}</td>