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

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

@@ -21,7 +21,7 @@
   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)}`

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,
@@ -127,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))
 
   /**
@@ -156,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)
@@ -439,7 +445,7 @@
             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')}
@@ -506,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>
@@ -545,6 +551,16 @@
       {/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>

package/dist/plugins/devtools/review/variations/VariationsPanel.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   /**
-   * @file The Variations tab: features as named variations, aimed at someone deciding whether a
-   * variation looks right rather than someone debugging bucketing.
+   * @file The Feature flags tab: each feature flag by name, aimed at someone deciding whether a
+   * variant looks right.
    *
    * The mechanism is the SDK's: `?picked-feature=<id>:<value>` forces an arm on the next page load.
-   * What changes is the framing — a variation is NAMED, its arms are radio buttons rather than an
-   * include checkbox plus a value dropdown, and the payoff is a link the reviewer can send to
-   * someone else so both people look at the same thing.
+   * A feature flag is NAMED, its variants are radio buttons, and the payoff is a link the reviewer
+   * can send to someone else so both people look at the same thing.
    */
   import type { FeatureBucket, Picked } from '@picked/client'
   import { Badge, Button, Card, CodeBlock, CopyButton, EmptyState, Stack, Text } from '../../ui'
@@ -158,8 +157,8 @@
 <Stack direction="vertical" gap="medium">
   {#if $features.length === 0}
     <EmptyState
-      message="No variations are running on this site"
-      hint="When an A/B test or a switched-on feature is published, it appears here and you can force either version."
+      message="No feature flags are running on this site"
+      hint="When a feature flag is published, it appears here and you can force any of its variants."
     />
   {:else}
     <Card sectioned>
@@ -174,13 +173,13 @@
                 <Badge status="default" size="small">Now: {armLabel(feature, served)}</Badge>
               {:else}
                 <Button variant="ghost" size="small" onclick={() => resolveBucket(feature)}>
-                  Check which version
+                  Check which variant
                 </Button>
               {/if}
             </div>
 
             {#if arms}
-              <div class="arms" role="group" aria-label="Version of {feature.name}">
+              <div class="arms" role="group" aria-label="Variant of {feature.name}">
                 {#each arms as arm, index (index)}
                   <label class="option-label">
                     <input
@@ -198,8 +197,8 @@
                 class="inline-input"
                 type="text"
                 value={chosen[feature.id] ?? ''}
-                placeholder="Type the version to force"
-                aria-label="Version of {feature.name}"
+                placeholder="Type the variant to force"
+                aria-label="Variant of {feature.name}"
                 oninput={(event) => choose(feature.id, event.currentTarget.value)}
               />
             {/if}
@@ -221,14 +220,14 @@
       <Stack direction="vertical" gap="small">
         {#if chosenCount === 0}
           <Text size="small" color="subdued">
-            Pick a version above. The page reloads showing it, and the link below reproduces exactly
+            Pick a variant above. The page reloads showing it, and the link below reproduces exactly
             what you saw for anyone you send it to.
           </Text>
         {:else}
           <CodeBlock code={shareUrl} />
           <Stack direction="horizontal" gap="small">
             <Button variant="primary" size="small" onclick={apply} testId="devtools-variations-apply">
-              Show me this version
+              Show me this variant
             </Button>
             <CopyButton
               text={shareUrl}

package/dist/plugins/devtools/screens/custom-tools/CustomToolsScreen.svelte

@@ -1,35 +1,21 @@
 <script lang="ts">
   /**
-   * @file The Custom Tools tab: every custom tool placed neither `'review'` nor `'footer'`, as
-   * nested tabs. With none, it says what a custom tool is and links the how-to page.
+   * @file The Custom Tools page, listed while no tool sits in that group: it says what a custom
+   * tool is and links the how-to page.
    */
   import { getPicked } from '../../../../hooks'
-  import AdaptedToolHost from '../../components/AdaptedToolHost.svelte'
-  import Tabs from '../../components/Tabs.svelte'
-  import { developerTools, readCustomTools } from '../../customTools'
   import { Button, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
   const docsUrl = `${client.documentationSiteUrl}/how-to/add-a-tool-to-the-devtools`
-  const tools = developerTools(readCustomTools(client))
-  const tabs = tools.map((tool) => ({
-    id: tool.id,
-    label: tool.label,
-    component: AdaptedToolHost,
-    props: { tool },
-  }))
 </script>
 
-{#if tabs.length > 0}
-  <Tabs {tabs} />
-{:else}
-  <Stack direction="vertical" gap="medium" padding="medium" justify="center">
-    <EmptyState
-      message="No custom tools yet"
-      hint="A developer can add tools for this site here, such as test customers or a way to request a change."
-    />
-    <Button variant="secondary" size="small" href={docsUrl} target="_blank">
-      How to add a custom tool
-    </Button>
-  </Stack>
-{/if}
+<Stack direction="vertical" gap="medium" padding="medium" justify="center">
+  <EmptyState
+    message="No custom tools yet"
+    hint="A developer can add tools for this site here, such as test accounts or a way to request a change."
+  />
+  <Button variant="secondary" size="small" href={docsUrl} target="_blank">
+    How to add a custom tool
+  </Button>
+</Stack>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  /** @file Detail screen for a single experience, showing its config, target selectors, and decision logic. */
+  /** @file Detail screen for a single experience, showing its config, target selectors, and condition. */
   import type { ExperienceStore } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Card, Text, CodeBlock, Stack } from '../../ui'
@@ -36,7 +36,7 @@
       </div>
 
       <div>
-        <Text weight="semibold">Decision logic</Text>
+        <Text weight="semibold">Condition</Text>
         <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
       </div>
     </Stack>

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

@@ -132,7 +132,7 @@
 
   const columns = [
     { key: 'include', header: 'Include' },
-    { key: 'feature', header: 'Feature' },
+    { key: 'feature', header: 'Feature flag' },
     { key: 'currentValue', header: 'Current Value' },
     { key: 'overrideValue', header: 'Override Value' },
   ]
@@ -140,8 +140,8 @@
 
 <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.
+    Override feature flags via URL parameters. Select feature flags below, choose values, then copy
+    the generated URL. Recipients will see the overridden values on page load.
   </Text>
 
   <Card sectioned>

package/dist/plugins/devtools/sidebar/Sidebar.svelte

@@ -2,13 +2,16 @@
   @paired-component apps/dashboard/src/shared/ui/navigation/sidebar-row-classes.ts
   @design-parity A row mirrors the Dashboard sidebar row: 28px high, text-sm, rounded-md, a 10%
   current-colour fill when selected and 5% on hover, a label that fades out instead of wrapping.
-  The Developer row mirrors the Dashboard's folding nav group (sidebar-nav-group.tsx).
+  The Custom Tools and Developer rows mirror the Dashboard's folding nav group (sidebar-nav-group.tsx).
 -->
 <script lang="ts">
-  /** @file The devtools sidebar: the main tabs, then the folding Developer group. */
+  /**
+   * @file The devtools sidebar: the main tabs, the folding Custom Tools group, then the folding
+   * Developer group.
+   */
   import { DEVELOPER_LABEL } from '../derive/plain-language'
   import type { NavModel } from './nav'
-  import { nextFocusIndex } from './nav'
+  import { CUSTOM_TOOLS_GROUP, CUSTOM_TOOLS_LABEL, nextFocusIndex } from './nav'
   import SidebarRow from './SidebarRow.svelte'
 
   interface Props {
@@ -17,11 +20,22 @@
     selected: string
     /** Whether the Developer group lists its screens. */
     developerOpen: boolean
+    /** Whether the Custom Tools group lists its tools. */
+    customOpen: boolean
     onSelect: (id: string) => void
     onToggleDeveloper: () => void
+    onToggleCustom: () => void
   }
 
-  const { nav, selected, developerOpen, onSelect, onToggleDeveloper }: Props = $props()
+  const {
+    nav,
+    selected,
+    developerOpen,
+    customOpen,
+    onSelect,
+    onToggleDeveloper,
+    onToggleCustom,
+  }: Props = $props()
 
   let list: HTMLElement | undefined = $state()
 
@@ -57,6 +71,26 @@
         onPress={() => onSelect(item.id)}
       />
     {/each}
+    {#if nav.custom.length > 0}
+      <SidebarRow
+        label={CUSTOM_TOOLS_LABEL}
+        testId="devtools-nav-{CUSTOM_TOOLS_GROUP}"
+        depth={0}
+        expanded={customOpen}
+        onPress={onToggleCustom}
+      />
+      {#if customOpen}
+        {#each nav.custom as item (item.id)}
+          <SidebarRow
+            label={item.label}
+            testId="devtools-nav-{item.id}"
+            depth={2}
+            selected={selected === item.id}
+            onPress={() => onSelect(item.id)}
+          />
+        {/each}
+      {/if}
+    {/if}
     <li class="divider" role="presentation"></li>
     <SidebarRow
       label={DEVELOPER_LABEL}