@picked/svelte 0.0.1-dev.1793769511104 → 0.0.1-dev.1793776638554

package/dist/plugins/devtools/review/journey/JourneyPanel.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   /**
-   * @file The Journey map tab: any journey's flow in plain English — the Developer group's
-   * experience tree without the node ids or the raw JSON Logic. It opens on the journey in front
-   * of the reviewer, and the picker reaches every other experience in the workspace.
+   * @file The Flow tab: any experience's flow in plain English — the Developer group's
+   * experience tree without the node ids or the raw JSON Logic. It opens on the experience in
+   * front of the reviewer, and the picker reaches every other experience in the workspace.
    *
-   * Navigation is BACKWARDS ONLY, and only in the journey that is OPEN. A screen already visited is
-   * a plain `goToStepByKey`: the flow has been through every action in between, so returning to it
-   * is safe. A screen AHEAD is rendered but not clickable — jumping forward skips the actions that
-   * make it renderable, and the screen it lands on can render an error state no visitor could
-   * reach. Forward motion belongs to the journey itself, or to a custom tool that replays one.
+   * Navigation is BACKWARDS ONLY, and only in the experience that is OPEN. A step already visited
+   * is a plain `goToStepByKey`: the flow has been through every action in between, so returning to
+   * it is safe. A step AHEAD is rendered but not clickable — jumping forward skips the actions that
+   * make it renderable, and the step it lands on can render an error state no visitor could reach.
+   * Forward motion belongs to the experience itself, or to a custom tool that replays one.
    *
    * THREE VIEWS, ONE GRAPH. The outline answers "where am I, and why did it go there"; the map
    * answers "what shape is this, and where does each branch end"; the timeline answers "in what
    * order, and where do the branches meet again". All three read the same `treeStore` through the
-   * same vocabulary modules, so a screen is named identically in each and they cannot drift.
+   * same vocabulary modules, so a step is named identically in each and they cannot drift.
    */
   import type { Picked } from '@picked/client'
   import { Badge, Banner, Button, Card, EmptyState } from '../../ui'
@@ -155,14 +155,14 @@
    * @param {OutlineRow} row - The row to explain.
    * @returns {string | undefined} The reason, or undefined when there is nothing to explain.
    * @example
-   * jumpReason(aheadRow) // "You haven't answered enough to get here yet."
+   * jumpReason(aheadRow) // "Your responses don't reach this step yet."
    */
   function jumpReason(row: OutlineRow): string | undefined {
     if (row.kind !== 'screen') return undefined
     if (posture.reason !== null) return posture.reason
-    if (!isOpen) return "This journey isn't open, so there is nowhere to go back to."
-    if (row.state === 'current') return "You're on this screen."
-    if (row.state === 'ahead') return "You haven't answered enough to get here yet."
+    if (!isOpen) return "This experience isn't open, so there is nowhere to go back to."
+    if (row.state === 'current') return "You're on this step."
+    if (row.state === 'ahead') return "Your responses don't reach this step yet."
     return undefined
   }
 
@@ -219,13 +219,13 @@
 <div class="journey">
   {#if selectedKey === null}
     <EmptyState
-      message="No journeys yet"
+      message="No experiences yet"
       hint="The workspace has not loaded its experiences. Reload the page if this does not change."
     />
   {:else}
     <!-- One row: how to look on the left, what to look at on the right. -->
     <div class="controls">
-      <div class="views" role="group" aria-label="Journey view">
+      <div class="views" role="group" aria-label="Flow view">
         <button
           type="button"
           class="view"
@@ -261,12 +261,12 @@
       <div class="picker">
         {#if followed !== null && !isOpen}
           <Button variant="ghost" size="small" onclick={() => (picked = null)}>
-            Back to the open journey
+            Back to the open experience
           </Button>
         {/if}
         <select
           class="picker-select"
-          aria-label="Journey"
+          aria-label="Experience"
           value={selectedKey}
           onchange={pick}
           data-testid="devtools-journey-picker"
@@ -287,8 +287,8 @@
     {#if rows.length === 0}
       <Card sectioned>
         <EmptyState
-          message="This journey has no screens yet"
-          hint="Its flow has not loaded, or it is built entirely from background steps."
+          message="This experience has no steps yet"
+          hint="Its flow has not loaded, or it is built entirely from actions."
         />
       </Card>
     {:else if layout !== null}
@@ -343,7 +343,7 @@
               {:else if row.kind === 'arm'}
                 <span class="arm">{row.label}</span>
               {:else if row.kind === 'end'}
-                <span class="end-row">⇥ Ends: {row.label} (behind the scenes)</span>
+                <span class="end-row">⇥ Ends: {row.label} (action)</span>
               {:else if row.kind === 'journey'}
                 <span class="journey-row">
                   <span class="marker muted" aria-hidden="true"></span>

package/dist/plugins/devtools/review/journey/JourneyTimeline.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
   /**
-   * @file The journey drawn as a TIMELINE — `git log --graph` for a flow. One row per node, top to
-   * bottom; branches run in lanes beside the rows and MERGE back into the node they meet, so a
-   * screen many branches reach is one row with lines converging on it, not a tree full of dashed
-   * jumps. `derive/journey-timeline` owns the layout; this file owns selection and scrolling only.
+   * @file An experience's flow drawn as a TIMELINE — `git log --graph` for a flow. One row per
+   * node, top to bottom; branches run in lanes beside the rows and MERGE back into the node they
+   * meet, so a step many branches reach is one row with lines converging on it, not a tree full of
+   * dashed jumps. `derive/journey-timeline` owns the layout; this file owns selection and scrolling
+   * only.
    *
    * A LOOP is the one thing a git graph never has. It stays off the drawing and rides on its row as
    * a "↩ back to …" note, and the details pane can take the reviewer to its target.
    *
    * COLOUR IS THE BRANCH, as in a git tool: every line and dot takes its branch's colour, so the
    * eye can follow one route down the lanes. That frees the node KIND to be a SHAPE — a circle for
-   * a screen, a diamond for a decision, a square for another journey. Actions are not drawn at all;
-   * where a branch ends on one, the row names it.
+   * a step, a diamond for a condition, a square for another experience. Actions are not drawn at
+   * all; where a branch ends on one, the row names it.
    *
    * ROWS ARE HTML, LINES ARE SVG, the same split as the map: each row is a real `<button>` the full
    * width of the timeline, and the graph column is painted over its left edge with
    * `pointer-events: none`, so clicking a dot or its label selects the same row.
    */
   import { tick } from 'svelte'
-  import { COLOURS, ROW_HEIGHT } from '../../derive'
+  import { COLOURS, NODE_LABELS, ROW_HEIGHT } from '../../derive'
   import type { TimelineLayout, TimelineNode, TreeNodeKind } from '../../derive'
   import TimelineMarker from './TimelineMarker.svelte'
 
@@ -32,11 +33,11 @@
   const { layout, canNavigate, onJump }: JourneyTimelineProps = $props()
 
   const KIND_LABELS: Record<TreeNodeKind, string> = {
-    start: 'Start',
-    screen: 'Screen',
-    decision: 'Decision',
-    system: 'Behind the scenes',
-    journey: 'Opens another journey',
+    start: NODE_LABELS.origin,
+    screen: NODE_LABELS.step,
+    decision: NODE_LABELS.condition,
+    system: NODE_LABELS.action,
+    journey: NODE_LABELS.experience,
   }
 
   /** Marker size per kind — the start a little larger, as on the map. */
@@ -242,7 +243,7 @@
               >
             {/each}
             {#each node.ends as end (end.key)}
-              <span class="end" title="Hands off to {end.label}, behind the scenes"
+              <span class="end" title="Hands off to the {end.label} action"
                 >⇥ {end.armLabel === null ? '' : `${end.armLabel}: `}{end.label}</span
               >
             {/each}
@@ -331,13 +332,13 @@
                   {#if end.armLabel !== null}
                     <span class="arm arm-{end.arm ?? 'none'}">{end.armLabel}</span>
                   {/if}
-                  <span class="end-text">Ends: {end.label} (behind the scenes)</span>
+                  <span class="end-text">Ends: {end.label} (action)</span>
                 </li>
               {/each}
             </ul>
           </div>
         {:else}
-          <p class="text">The journey ends here.</p>
+          <p class="text">The experience ends here.</p>
         {/if}
 
         {#if selectedNode.rule !== null}
@@ -347,7 +348,7 @@
 
         {#if canJump(selectedNode)}
           <button type="button" class="action" onclick={() => goBack(selectedNode)}>
-            Go back to this screen
+            Go back to this step
           </button>
         {/if}
       {/if}
@@ -355,14 +356,14 @@
   </div>
 
   <p class="legend">
-    <span class="key-swatch kind-start"></span> Start
-    <span class="key-swatch kind-screen"></span> Screen
-    <span class="key-swatch kind-decision"></span> Decision
-    <span class="key-swatch kind-journey"></span> Opens another journey
+    <span class="key-swatch kind-start"></span> {KIND_LABELS.start}
+    <span class="key-swatch kind-screen"></span> {KIND_LABELS.screen}
+    <span class="key-swatch kind-decision"></span> {KIND_LABELS.decision}
+    <span class="key-swatch kind-journey"></span> {KIND_LABELS.journey}
     <span class="key-swatch seen"></span> Seen
     <span class="key-swatch current"></span> You are here
     <span
-      >· each colour is one branch · a decision's Yes runs straight on · ↩ loops back · ⇥ hands off</span
+      >· each colour is one branch · a condition's Yes runs straight on · ↩ loops back · ⇥ hands off</span
     >
   </p>
 </div>

package/dist/plugins/devtools/review/personas/PersonaBuilder.svelte

@@ -215,7 +215,7 @@
       if (typeof result === 'string' || result === false) {
         errors = {
           ...errors,
-          [field.key]: typeof result === 'string' ? result : 'This answer is not accepted.',
+          [field.key]: typeof result === 'string' ? result : 'This response is not accepted.',
         }
         return
       }
@@ -245,13 +245,13 @@
   function endText(row: Extract<BuilderRow, { kind: 'end' }>): string {
     switch (row.reason) {
       case 'loop':
-        return `The journey goes back to “${row.name ?? 'an earlier screen'}” here.`
+        return `The flow goes back to “${row.name ?? 'an earlier step'}” here.`
       case 'handoff':
-        return `${row.name ?? 'Another journey'} takes over here, outside this build.`
+        return `${row.name ?? 'Another experience'} takes over here, outside this build.`
       case 'limit':
-        return 'The journey is too long to walk here, so it stops.'
+        return 'The flow is too long to walk here, so it stops.'
       case 'end':
-        return 'The journey ends here.'
+        return 'The experience ends here.'
     }
   }
 
@@ -274,18 +274,18 @@
 
 <div class="builder" data-testid="devtools-persona-builder">
   {#if journeyOptions.length === 0}
-    <Text size="small" color="subdued">This page has no journeys to build a persona in.</Text>
+    <Text size="small" color="subdued">This page has no experiences to build a persona in.</Text>
   {:else}
     <Select
       label="Starts in"
       name="devtools-builder-start"
       options={journeyOptions}
       value={start}
-      placeholder="Pick a journey"
+      placeholder="Pick an experience"
       onchange={onStartChange}
     />
     <Text size="small" color="subdued">
-      Answer each screen; the next one appears below. Where the site's own code decides the route,
+      Complete each step; the next one appears below. Where the site's own code decides the route,
       pick the outcome to follow. The real outcome decides when the persona loads.
     </Text>
 
@@ -351,21 +351,21 @@
                     </div>
                   {:else if kind === 'system'}
                     <Text size="small" color="subdued">
-                      This is answered on its own screen. The persona stops here, so load it and
-                      answer it there.
+                      This is set on its own step. The persona stops here, so load it and set it
+                      there.
                     </Text>
                   {/if}
                 </div>
               {/if}
             {:else}
               <Text size="small" color="subdued">
-                Nothing to answer here. The customer continues.
+                Nothing to fill in here. The visitor continues.
               </Text>
             {/each}
           </li>
         {:else if row.kind === 'choice'}
           <li class="decision" data-testid="devtools-builder-decision">
-            <Text size="small">The site decides: {row.question}</Text>
+            <Text size="small">The site's code decides: {row.question}</Text>
             <div class="choices">
               <ChoiceButton
                 label="Yes"

package/dist/plugins/devtools/review/personas/PersonaCard.svelte

@@ -10,16 +10,18 @@
     /** True while this persona is loading. */
     loading: boolean
     onLoad: () => void
+    /** Opens it in the form; absent for a persona the site defines. */
+    onEdit?: () => void
     /** Deletes it; absent for a persona the site defines. */
     onDelete?: () => void
   }
 
-  const { persona, loadReason, loading, onLoad, onDelete }: PersonaCardProps = $props()
+  const { persona, loadReason, loading, onLoad, onEdit, onDelete }: PersonaCardProps = $props()
 
   let confirming = $state(false)
 
   const answers = $derived(Object.keys(persona.responses).length)
-  const answerLabel = $derived(answers === 1 ? '1 answer' : `${answers} answers`)
+  const answerLabel = $derived(answers === 1 ? '1 response' : `${answers} responses`)
   const summary = $derived(
     persona.load === null
       ? `${answerLabel} · ${describeLanding(persona.landing)}`
@@ -52,6 +54,9 @@
         >
           Load
         </Button>
+        {#if onEdit}
+          <Button variant="ghost" size="small" onclick={onEdit}>Edit</Button>
+        {/if}
         {#if onDelete}
           <Button variant="ghost" size="small" onclick={() => (confirming = true)}>Delete</Button>
         {/if}

package/dist/plugins/devtools/review/personas/PersonasPanel.svelte

@@ -5,7 +5,8 @@
    * answering the journey's questions here, screen by screen, or from where they are on the page.
    * A persona keeps the answers a customer gives on fields they can see, the screens moved on from,
    * the screen it stops on and the page it starts on. Loading one reloads that page clean and walks
-   * the journey with its answers, screen by screen, up to that screen.
+   * the journey with its answers, screen by screen, up to that screen. Site tools placed here
+   * follow, each a section under its label.
    */
   import type { FieldValue, Picked } from '@picked/client'
   import { getStepFields } from '@picked/client/form'
@@ -27,6 +28,8 @@
     type RouteEntry,
     type SafetyPosture,
   } from '../../derive'
+  import AdaptedToolHost from '../../components/AdaptedToolHost.svelte'
+  import type { CustomTool } from '../../customTools'
   import type { JourneyView } from '../../session'
   import { loadUrl, startPersonaLoad } from './load-persona'
   import PersonaBuilder from './PersonaBuilder.svelte'
@@ -52,6 +55,8 @@
       selfAdvancingSteps: ReadonlySet<string>
       handoffs: Readonly<Record<string, string>>
     }
+    /** The site's tools placed in this tab. */
+    tools?: readonly CustomTool[]
     /** How the last load's walk ended; `null` when no load ran on this page. */
     walkNotice: Notice | null
     onWalkNoticeDismiss: () => void
@@ -83,6 +88,7 @@
     hiddenKeys,
     codeOwned,
     personaWalk,
+    tools = [],
     walkNotice,
     onWalkNoticeDismiss,
     getStorage = () => window.localStorage,
@@ -108,6 +114,8 @@
 
   let saved = $state<Persona[]>(readSaved())
   let creating = $state(false)
+  /** The saved persona the form edits; `null` while it makes a new one. */
+  let editingId = $state<string | null>(null)
   /** How a new persona is made: answered here, or taken from where the reviewer is. */
   let mode = $state<'build' | 'capture'>('build')
   let name = $state('')
@@ -125,7 +133,7 @@
   /** The answers Save would keep; `null` while they are read. */
   let captured = $state<Record<string, FieldValue> | null>(null)
 
-  const isEmpty = $derived(personas.length === 0 && saved.length === 0)
+  const isEmpty = $derived(personas.length === 0 && saved.length === 0 && tools.length === 0)
   const postureReason = $derived(posture.canEditAnswers ? undefined : (posture.reason ?? undefined))
 
   /**
@@ -154,19 +162,19 @@
   const buildSummary = $derived.by(() => {
     if (buildWalk === null) return 'Working out the route…'
     const count = Object.keys(buildWalk.answers).length
-    const answers = count === 1 ? '1 answer' : `${count} answers`
+    const answers = count === 1 ? '1 response' : `${count} responses`
     const stop = buildWalk.landing
     if (stop === null) return `Saves ${answers}.`
     const screen = stop.stepName ?? deslug(stop.stepKey ?? '')
-    return `Saves ${answers}. Loading it walks the journey to ${screen}.`
+    return `Saves ${answers}. Loading it walks the experience to ${screen}.`
   })
 
   const captureSummary = $derived.by(() => {
-    if (captured === null) return 'Reading your answers…'
+    if (captured === null) return 'Reading your responses…'
     const count = Object.keys(captured).length
-    const answers = count === 1 ? '1 answer' : `${count} answers`
+    const answers = count === 1 ? '1 response' : `${count} responses`
     if (landing === null)
-      return `Saves ${answers}. No journey is open, so it loads the answers only.`
+      return `Saves ${answers}. No experience is open, so it loads the responses only.`
     const journeyName = landing.experienceName ?? deslug(landing.experienceKey)
     if (landing.stepKey === null) return `Saves ${answers}. Loading it walks ${journeyName}.`
     const screen = landing.stepName ?? deslug(landing.stepKey)
@@ -240,6 +248,7 @@
     const responses = client.responses.getAllStore.getState()
     const answeredHere = [...asked].some((key) => !isBlank(responses[key]))
     creating = true
+    editingId = null
     mode = answeredHere ? 'capture' : 'build'
     name = ''
     description = ''
@@ -254,6 +263,42 @@
     buildWalk = null
   }
 
+  /**
+   * Opens the form on a saved persona, to answer its questions again here. The walk starts in its
+   * first journey with its answers and its picks for the site's own decisions, so changing an
+   * answer re-routes the screens after it.
+   *
+   * @param {Persona} persona - The persona to edit.
+   * @example startEdit(persona)
+   */
+  function startEdit(persona: Persona): void {
+    creating = true
+    editingId = persona.id
+    mode = 'build'
+    name = persona.name
+    description = persona.description ?? ''
+    entryText = persona.entryUrl ?? `${window.location.pathname}${window.location.search}`
+    nameError = null
+    entryError = null
+    notice = null
+    captured = null
+    buildStart =
+      persona.passed.at(0)?.experienceKey ?? persona.landing?.experienceKey ?? defaultStart()
+    buildAnswers = { ...persona.responses }
+    buildChoices = { ...persona.choices }
+    buildWalk = null
+  }
+
+  /**
+   * Closes the form without saving.
+   *
+   * @example cancel()
+   */
+  function cancel(): void {
+    creating = false
+    editingId = null
+  }
+
   /**
    * What Save keeps, from the build or from where the reviewer is.
    *
@@ -262,7 +307,7 @@
    * @example await capture('/compare')
    */
   async function capture(entryUrl: string | null): Promise<PersonaCapture | null> {
-    const id = newId()
+    const id = editingId ?? newId()
     const savedAt = new Date().toISOString()
     if (mode === 'build') {
       if (buildWalk === null) return null
@@ -270,6 +315,7 @@
         responses: buildWalk.answers,
         journey: buildWalk.landing,
         passed: buildWalk.passed,
+        choices: buildChoices,
         entryUrl: entryUrl ?? '',
         id,
         savedAt,
@@ -287,7 +333,8 @@
   }
 
   /**
-   * Saves where the reviewer is as a new persona, in this browser.
+   * Saves the form's persona in this browser: a new one at the end of the list, an edited one in
+   * its place.
    *
    * @returns {Promise<void>} Settles once it is saved or refused.
    * @example await save()
@@ -307,11 +354,15 @@
       return
     }
 
-    saved = [...saved, result.persona]
+    const edited = editingId !== null
+    saved = edited
+      ? saved.map((entry) => (entry.id === result.persona.id ? result.persona : entry))
+      : [...saved, result.persona]
     creating = false
+    editingId = null
     const stored = writeSavedPersonas(getStorage, client.projectId, saved)
     notice = stored
-      ? { status: 'success', text: `Saved ${result.persona.name}.` }
+      ? { status: 'success', text: `${edited ? 'Updated' : 'Saved'} ${result.persona.name}.` }
       : {
           status: 'warning',
           text: `${result.persona.name} is here until you reload. This browser would not let it be saved.`,
@@ -387,14 +438,14 @@
     <Card>
       <div class="form">
         <Stack direction="vertical" gap="medium">
-          <Text weight="semibold">New persona</Text>
+          <Text weight="semibold">{editingId === null ? 'New persona' : 'Edit persona'}</Text>
           <RadioGroup
             label="Make it by"
             name="persona-mode"
             orientation="horizontal"
             value={mode}
             options={[
-              { value: 'build', label: 'Answering the questions here' },
+              { value: 'build', label: 'Filling in the fields here' },
               { value: 'capture', label: 'Using where I am now' },
             ]}
             onchange={(value) => (mode = value === 'capture' ? 'capture' : 'build')}
@@ -452,7 +503,7 @@
           </Text>
           <div class="form-actions">
             <Button variant="primary" size="small" onclick={() => void save()}>Save</Button>
-            <Button variant="ghost" size="small" onclick={() => (creating = false)}>Cancel</Button>
+            <Button variant="ghost" size="small" onclick={cancel}>Cancel</Button>
           </div>
         </Stack>
       </div>
@@ -461,7 +512,7 @@
     <div class="empty">
       <EmptyState
         message="No personas or scenarios yet"
-        hint="Walk the journey the way a customer would, then save it here to load it again in one click."
+        hint="Walk the experience the way a visitor would, then save it here to load it again in one click."
       />
       <Button variant="primary" onclick={startCreate}>Create</Button>
     </div>
@@ -494,11 +545,22 @@
           loadReason={loadReason(persona)}
           loading={loadingId === persona.id}
           onLoad={() => void load(persona)}
+          onEdit={() => startEdit(persona)}
           onDelete={() => remove(persona)}
         />
       {/each}
     </section>
   {/if}
+
+  {#each tools as tool (tool.id)}
+    <section class="group" aria-label={tool.label} data-testid="devtools-persona-tool-{tool.id}">
+      <h3 class="group-title">{tool.label}</h3>
+      {#if tool.description}
+        <Text size="small" color="subdued">{tool.description}</Text>
+      {/if}
+      <AdaptedToolHost {tool} flush />
+    </section>
+  {/each}
 </div>
 
 <style>

package/dist/plugins/devtools/review/personas/load-persona.d.ts

@@ -83,8 +83,8 @@ export interface WalkSettings {
     openOrder: () => readonly string[];
     /** Step keys that move on by themselves, such as a loader. The walk waits on them. */
     selfAdvancing: ReadonlySet<string>;
-    /** Answers every walk gives when a screen asks them, over the persona's own. */
-    answers: Readonly<Record<string, FieldValue>>;
+    /** Responses every walk gives when a step asks for their fields, over the persona's own. */
+    responses: Readonly<Record<string, FieldValue>>;
     /**
      * The keys a screen asks: its fields that show now, minus the code-owned ones.
      *

package/dist/plugins/devtools/review/personas/load-persona.js

@@ -1 +1 @@
-import{deslug as e,screenName as t}from"../../derive/plain-language/plain-language.js";import{pickJourney as n}from"../../derive/journey-pick/journey-pick.js";import"../../derive/index.js";import{getStepFields as r}from"@picked/client/form";var i=`picked-devtools-persona-load`,a=30,o={sleep:e=>new Promise(t=>{setTimeout(t,e)}),bootTries:500,openTries:20,startTries:100,advanceTries:500,returnTries:33,selfAdvanceTries:1e3,maxHops:60};function s(e){return`${e.experienceKey}/${e.stepKey}`}async function c(e,t,n){for(let r=0;r<=t;r++){let i=e();if(i!==null)return i;r<t&&await n.sleep(a)}return null}function l(e,r,i){let a=e.experienceInstances.listStore.getState().filter(e=>r.has(e.experienceKey)),o=n(a,{exclude:i.exclude,precedence:i.precedence,openOrder:i.openOrder()}),s=o?.currentStepStore.getState();return o===void 0||s==null||o.currentNodeStore.getState()?.type!==`step`||o.stateStore.getState()!==`ready`?null:{instance:o,screen:{experienceKey:o.experienceKey,stepKey:s.key},fieldKeys:s.fieldKeys,stop:{experienceName:o.experienceName,stepName:t(s.name,s.key)}}}async function u(e,t,n){await e.openExperienceByKey(t),await c(()=>e.experienceInstances.listStore.getState().some(e=>e.experienceKey===t&&e.isOpenStore.getState())?!0:null,n.openTries,n)===null&&await e.launchExperienceByKey(t,{bypassCondition:!0,initialiseOpen:!0})}function d(e,t){let n={};for(let r of t)Object.hasOwn(e,r)&&(n[r]=e[r]);return n}async function f(e,t,n){let i=e.fields.listStore.getState(),a=t.flatMap(e=>i.filter(t=>t.key===e));return(await r(e,a)).map(e=>e.key).filter(e=>!n.has(e))}function p(e,t,n){try{n.storage.setItem(i,t.id)}catch{return!1}return e.responses.clearAll(),e.history.restore({entries:[]}),n.navigate(n.url),!0}function m(e,t){let n=new URL(e??`${t.pathname}${t.search}`,`https://entry.invalid`);for(let[e,r]of new URLSearchParams(t.search))e.startsWith(`picked-`)&&!n.searchParams.has(e)&&n.searchParams.append(e,r);return`${n.pathname}${n.search}`}function h(e){try{let t=e.getItem(i);return e.removeItem(i),t!==null&&t.length>0?t:null}catch{return null}}function g(e,t){return e===null||e.experienceKey!==t.experienceKey?!1:e.stepKey===null||e.stepKey===t.stepKey}async function _(e,t,n){let r=!1,i=0;return await c(()=>{let n=e.resting();return n===null?(r=!0,i=0,null):s(n.screen)!==t||(r&&(i+=1),i>e.timing.returnTries?!1:null)},n,e.timing)===!0}async function v(e,t){let n=await e.settings.askedOn(t.fieldKeys),r=n.filter(t=>Object.hasOwn(e.answers,t));if(r.length>0){let{errors:n}=await e.client.responses.commit(d(e.answers,r));if(n.length>0)return{end:`invalid`,at:t.stop}}if(g(e.landing,t.screen))return{end:`arrived`,at:t.stop};let i=s(t.screen);return e.settings.selfAdvancing.has(t.screen.stepKey)?await _(e,i,e.timing.selfAdvanceTries)?null:{end:`stuck`,at:t.stop}:(n.length>0?r.length===n.length:e.passed.has(i))?(t.instance.goToNextStep(),await _(e,i,e.timing.advanceTries)?null:{end:`stuck`,at:t.stop}):{end:`needs-answer`,at:t.stop}}async function y(e,t,n,r=o){let{landing:i}=t,a=t.passed.at(0)?.experienceKey??i?.experienceKey;if(a===void 0)return Object.keys(t.responses).length>0&&e.responses.register({...t.responses}),{end:`answers-only`,at:null};let d=new Set(t.passed.map(e=>e.experienceKey));i!==null&&d.add(i.experienceKey);let f={client:e,settings:n,timing:r,landing:i,passed:new Set(t.passed.map(s)),answers:{...t.responses,...n.answers},resting:()=>l(e,d,n)};await c(()=>e.readyStore.getState()?!0:null,r.bootTries,r),await c(f.resting,r.startTries,r)===null&&await u(e,a,r);for(let e=0;e<r.maxHops;e++){let e=await c(f.resting,r.startTries,r);if(e===null)return{end:`no-journey`,at:null};let t=await v(f,e);if(t!==null)return t}return{end:`hop-limit`,at:null}}function b(t,n){let{name:r}=t,i=n.at===null?``:`“${n.at.stepName}”`;switch(n.end){case`arrived`:return{status:`success`,text:`Loaded ${r} on ${i}.`};case`answers-only`:return{status:`success`,text:`Loaded ${r}’s answers.`};case`needs-answer`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. ${r} has no answer for that screen.`};case`invalid`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. An answer there no longer passes its check.`};case`stuck`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. The journey did not move on from there.`};case`no-journey`:{let n=t.passed.at(0)?.experienceKey??t.landing?.experienceKey;return{status:`error`,text:`${r} did not load: ${t.landing?.experienceName??(n===void 0?`its journey`:e(n))} didn't open on this page.`}}case`hop-limit`:return{status:`warning`,text:`Stopped loading ${r} after too many screens. The journey may be going round in a loop.`}}}export{i as PENDING_LOAD_KEY,m as loadUrl,f as screenQuestions,p as startPersonaLoad,h as takePendingLoad,b as walkNotice,y as walkPersona};
+import{deslug as e,screenName as t}from"../../derive/plain-language/plain-language.js";import{pickJourney as n}from"../../derive/journey-pick/journey-pick.js";import"../../derive/index.js";import{getStepFields as r}from"@picked/client/form";var i=`picked-devtools-persona-load`,a=30,o={sleep:e=>new Promise(t=>{setTimeout(t,e)}),bootTries:500,openTries:20,startTries:100,advanceTries:500,returnTries:33,selfAdvanceTries:1e3,maxHops:60};function s(e){return`${e.experienceKey}/${e.stepKey}`}async function c(e,t,n){for(let r=0;r<=t;r++){let i=e();if(i!==null)return i;r<t&&await n.sleep(a)}return null}function l(e,r,i){let a=e.experienceInstances.listStore.getState().filter(e=>r.has(e.experienceKey)),o=n(a,{exclude:i.exclude,precedence:i.precedence,openOrder:i.openOrder()}),s=o?.currentStepStore.getState();return o===void 0||s==null||o.currentNodeStore.getState()?.type!==`step`||o.stateStore.getState()!==`ready`?null:{instance:o,screen:{experienceKey:o.experienceKey,stepKey:s.key},fieldKeys:s.fieldKeys,stop:{experienceName:o.experienceName,stepName:t(s.name,s.key)}}}async function u(e,t,n){await e.openExperienceByKey(t),await c(()=>e.experienceInstances.listStore.getState().some(e=>e.experienceKey===t&&e.isOpenStore.getState())?!0:null,n.openTries,n)===null&&await e.launchExperienceByKey(t,{bypassCondition:!0,initialiseOpen:!0})}function d(e,t){let n={};for(let r of t)Object.hasOwn(e,r)&&(n[r]=e[r]);return n}async function f(e,t,n){let i=e.fields.listStore.getState(),a=t.flatMap(e=>i.filter(t=>t.key===e));return(await r(e,a)).map(e=>e.key).filter(e=>!n.has(e))}function p(e,t,n){try{n.storage.setItem(i,t.id)}catch{return!1}return e.responses.clearAll(),e.history.restore({entries:[]}),n.navigate(n.url),!0}function m(e,t){let n=new URL(e??`${t.pathname}${t.search}`,`https://entry.invalid`);for(let[e,r]of new URLSearchParams(t.search))e.startsWith(`picked-`)&&!n.searchParams.has(e)&&n.searchParams.append(e,r);return`${n.pathname}${n.search}`}function h(e){try{let t=e.getItem(i);return e.removeItem(i),t!==null&&t.length>0?t:null}catch{return null}}function g(e,t){return e===null||e.experienceKey!==t.experienceKey?!1:e.stepKey===null||e.stepKey===t.stepKey}async function _(e,t,n){let r=!1,i=0;return await c(()=>{let n=e.resting();return n===null?(r=!0,i=0,null):s(n.screen)!==t||(r&&(i+=1),i>e.timing.returnTries?!1:null)},n,e.timing)===!0}async function v(e,t){let n=await e.settings.askedOn(t.fieldKeys),r=n.filter(t=>Object.hasOwn(e.answers,t));if(r.length>0){let{errors:n}=await e.client.responses.commit(d(e.answers,r));if(n.length>0)return{end:`invalid`,at:t.stop}}if(g(e.landing,t.screen))return{end:`arrived`,at:t.stop};let i=s(t.screen);return e.settings.selfAdvancing.has(t.screen.stepKey)?await _(e,i,e.timing.selfAdvanceTries)?null:{end:`stuck`,at:t.stop}:(n.length>0?r.length===n.length:e.passed.has(i))?(t.instance.goToNextStep(),await _(e,i,e.timing.advanceTries)?null:{end:`stuck`,at:t.stop}):{end:`needs-answer`,at:t.stop}}async function y(e,t,n,r=o){let{landing:i}=t,a=t.passed.at(0)?.experienceKey??i?.experienceKey;if(a===void 0)return Object.keys(t.responses).length>0&&e.responses.register({...t.responses}),{end:`answers-only`,at:null};let d=new Set(t.passed.map(e=>e.experienceKey));i!==null&&d.add(i.experienceKey);let f={client:e,settings:n,timing:r,landing:i,passed:new Set(t.passed.map(s)),answers:{...t.responses,...n.responses},resting:()=>l(e,d,n)};await c(()=>e.readyStore.getState()?!0:null,r.bootTries,r),await c(f.resting,r.startTries,r)===null&&await u(e,a,r);for(let e=0;e<r.maxHops;e++){let e=await c(f.resting,r.startTries,r);if(e===null)return{end:`no-journey`,at:null};let t=await v(f,e);if(t!==null)return t}return{end:`hop-limit`,at:null}}function b(t,n){let{name:r}=t,i=n.at===null?``:`“${n.at.stepName}”`;switch(n.end){case`arrived`:return{status:`success`,text:`Loaded ${r} on ${i}.`};case`answers-only`:return{status:`success`,text:`Loaded ${r}’s responses.`};case`needs-answer`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. ${r} has no response for a field there.`};case`invalid`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. A response there no longer passes its check.`};case`stuck`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. The experience did not move on from there.`};case`no-journey`:{let n=t.passed.at(0)?.experienceKey??t.landing?.experienceKey;return{status:`error`,text:`${r} did not load: ${t.landing?.experienceName??(n===void 0?`its experience`:e(n))} didn't open on this page.`}}case`hop-limit`:return{status:`warning`,text:`Stopped loading ${r} after too many steps. The flow may be going round in a loop.`}}}export{i as PENDING_LOAD_KEY,m as loadUrl,f as screenQuestions,p as startPersonaLoad,h as takePendingLoad,b as walkNotice,y as walkPersona};

package/dist/plugins/devtools/review/session/SessionPanel.svelte

@@ -16,7 +16,7 @@
     journey: JourneyView | null
     /** Every screen submitted since the session record started, oldest first. */
     history: readonly HistoryEntry[]
-    /** Opens the Answers tab, so the answer summary leads somewhere it can be acted on. */
+    /** Opens the Responses tab, so the response summary leads somewhere it can be acted on. */
     onShowAnswers: () => void
   }
 
@@ -65,18 +65,18 @@
       {#if journey === null}
         <Text size="medium">Nothing is open yet.</Text>
         <Text size="small" color="subdued">
-          Start a journey on the page, and this will follow you.
+          Start an experience on the page, and this will follow you.
         </Text>
       {:else}
         <Stack direction="vertical" gap="none">
-          <Text size="large" weight="semibold">{journey.stepName ?? 'Moving between screens'}</Text>
+          <Text size="large" weight="semibold">{journey.stepName ?? 'Moving between steps'}</Text>
           <Text size="small" color="subdued">in {journey.experienceName}</Text>
         </Stack>
         {#if journey.inTransit}
           <!-- The engine is transiting a condition or action node, so the recorded step is the one
                just LEFT. Saying so stops a "stuck on loading" report being filed against it. -->
           <Text size="small" color="subdued">
-            Still working — the next screen has not settled yet.
+            Still working — the next step has not settled yet.
           </Text>
         {/if}
       {/if}
@@ -111,24 +111,24 @@
   <Card>
     <Stack direction="vertical" gap="small">
       <Stack direction="horizontal" gap="small" align="space-between" justify="center">
-        <Text size="caption" color="subdued" weight="semibold">WHAT YOU ANSWERED</Text>
+        <Text size="caption" color="subdued" weight="semibold">YOUR RESPONSES</Text>
         {#if rows.length > 0}
-          <Button variant="ghost" size="small" onclick={onShowAnswers}>Change an answer</Button>
+          <Button variant="ghost" size="small" onclick={onShowAnswers}>Change a response</Button>
         {/if}
       </Stack>
 
       {#if rows.length === 0}
         <EmptyState
-          message="Nothing answered yet"
-          hint="Each screen you answer is listed here, in order. Answers from before this page loaded are on the Answers tab."
+          message="No responses yet"
+          hint="Each step you submit is listed here, in order. Responses from before this page loaded are on the Responses tab."
         />
       {:else}
         <table class="history" data-testid="devtools-session-answers">
           <thead>
             <tr>
-              <th scope="col">Screen</th>
-              <th scope="col">Question</th>
-              <th scope="col">Answer</th>
+              <th scope="col">Step</th>
+              <th scope="col">Field</th>
+              <th scope="col">Response</th>
             </tr>
           </thead>
           <tbody>