@picked/svelte 0.0.1-dev.1789541668638 → 0.0.1-dev.1793753513002

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

@@ -0,0 +1,59 @@
+<svelte:options namespace="svg" />
+
+<script lang="ts">
+  /** @file A timeline node's marker: its kind as a shape, its branch's colour as the fill. */
+  import type { ScreenState, TreeNodeKind } from '../../derive'
+
+  interface TimelineMarkerProps {
+    kind: TreeNodeKind
+    /** The marker's centre. */
+    x: number
+    y: number
+    /** Half the marker's width. */
+    r: number
+    fill: string
+    /** Where the node sits on the visitor's route. Null draws the marker plain. */
+    state?: ScreenState | null
+    selected?: boolean
+  }
+
+  const { kind, x, y, r, fill, state = null, selected = false }: TimelineMarkerProps = $props()
+
+  /** A seen or selected marker takes the dark rim. */
+  const marked = $derived(selected || state === 'visited' || state === 'current')
+</script>
+
+{#if kind === 'decision'}
+  <polygon
+    class="marker"
+    class:marked
+    {fill}
+    points="{x},{y - r} {x + r},{y} {x},{y + r} {x - r},{y}"
+  />
+{:else if kind === 'journey'}
+  <rect
+    class="marker"
+    class:marked
+    {fill}
+    x={x - r}
+    y={y - r}
+    width={r * 2}
+    height={r * 2}
+    rx="1.5"
+  />
+{:else}
+  <circle class="marker" class:marked {fill} cx={x} cy={y} {r} />
+{/if}
+
+<style>
+  /* The fill is the branch's colour, set on the element. */
+  .marker {
+    stroke: var(--color-white);
+    stroke-width: 2;
+  }
+
+  .marker.marked {
+    stroke: #1e3a8a;
+    stroke-width: 2.5;
+  }
+</style>

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

@@ -0,0 +1,214 @@
+<script lang="ts">
+  /**
+   * @file The This session tab: where the visitor is, what the reviewer is looking at, and what has
+   * been answered so far. A reviewer's first question is "where am I and is this the right thing",
+   * so the tab answers that before it offers a single control.
+   */
+  import type { Picked } from '@picked/client'
+  import { Badge, Button, Card, EmptyState, Stack, Text } from '../../ui'
+  import { configSourceLabel, describeAnswer, deslug } from '../../derive'
+  import type { HistoryEntry, SafetyPosture } from '../../derive'
+  import type { JourneyView } from '../../session'
+
+  interface SessionPanelProps {
+    client: Picked
+    posture: SafetyPosture
+    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. */
+    onShowAnswers: () => void
+  }
+
+  const { client, posture, journey, history, onShowAnswers }: SessionPanelProps = $props()
+
+  // An SDK store read straight off the prop: effector stores meet Svelte's store contract, so `$`
+  // subscribes, and `$derived` keeps it on whichever client the panel is given.
+  const fields = $derived(client.fields.listStore)
+  const fieldsByKey = $derived(new Map($fields.map((field) => [field.key, field])))
+
+  const previewToken = $derived(client.searchParams['preview-token']?.[0])
+  const staged = $derived(previewToken !== undefined && previewToken.length > 0)
+
+  interface HistoryRow {
+    id: string
+    /** Set on an entry's first row only — the screen cell spans the rest. */
+    screen: { name: string; journey: string; span: number } | null
+    question: string
+    answer: string
+  }
+
+  /** One row per answer, the screen named once per submit — read top to bottom, it is the journey. */
+  const rows = $derived<HistoryRow[]>(
+    history.flatMap((entry) =>
+      entry.answers.map((answer, index) => {
+        const field = fieldsByKey.get(answer.key)
+        const view = field === undefined ? null : describeAnswer(answer.value, field)
+        return {
+          id: `${entry.id}:${answer.key}`,
+          screen:
+            index === 0
+              ? { name: entry.stepName, journey: entry.experienceName, span: entry.answers.length }
+              : null,
+          question: view?.noun ?? deslug(answer.key),
+          answer: view?.display ?? String(answer.value),
+        }
+      }),
+    ),
+  )
+</script>
+
+<Stack direction="vertical" gap="medium">
+  <Card>
+    <Stack direction="vertical" gap="small">
+      <Text size="caption" color="subdued" weight="semibold">WHERE YOU ARE</Text>
+      {#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.
+        </Text>
+      {:else}
+        <Stack direction="vertical" gap="none">
+          <Text size="large" weight="semibold">{journey.stepName ?? 'Moving between screens'}</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.
+          </Text>
+        {/if}
+      {/if}
+    </Stack>
+  </Card>
+
+  <Card>
+    <Stack direction="vertical" gap="small">
+      <Text size="caption" color="subdued" weight="semibold">WHAT YOU ARE LOOKING AT</Text>
+      <Stack direction="horizontal" gap="small" wrap>
+        {#if posture.label !== null}
+          <Badge status={posture.readOnly ? 'warning' : 'default'} testId="devtools-session-env">
+            {posture.label}
+          </Badge>
+        {/if}
+        <Badge status={staged ? 'info' : 'default'} testId="devtools-session-source">
+          {configSourceLabel(previewToken)}
+        </Badge>
+      </Stack>
+      {#if staged}
+        <Text size="small" color="subdued">
+          Content and settings here have not been published yet, so they can differ from the live
+          site. That difference is expected.
+        </Text>
+      {/if}
+      {#if posture.reason !== null}
+        <Text size="small" color="subdued">{posture.reason}</Text>
+      {/if}
+    </Stack>
+  </Card>
+
+  <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>
+        {#if rows.length > 0}
+          <Button variant="ghost" size="small" onclick={onShowAnswers}>Change an answer</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."
+        />
+      {: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>
+            </tr>
+          </thead>
+          <tbody>
+            {#each rows as row (row.id)}
+              <tr class:first={row.screen !== null}>
+                {#if row.screen !== null}
+                  <th scope="rowgroup" rowspan={row.screen.span} class="screen">
+                    <span class="screen-name">{row.screen.name}</span>
+                    <span class="screen-journey">{row.screen.journey}</span>
+                  </th>
+                {/if}
+                <td class="question">{row.question}</td>
+                <td class="answer">{row.answer}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      {/if}
+    </Stack>
+  </Card>
+</Stack>
+
+<style>
+  .history {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
+
+  .history th,
+  .history td {
+    padding: var(--space-1-5) var(--space-2);
+    text-align: left;
+    vertical-align: top;
+    overflow-wrap: anywhere;
+  }
+
+  .history thead th {
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    color: var(--color-gray-500);
+    border-bottom: 1px solid var(--color-gray-200);
+  }
+
+  /* A rule between submits, none between the answers of one screen. */
+  .history tbody tr.first {
+    border-top: 1px solid var(--color-gray-100);
+  }
+
+  .history thead th:first-child {
+    width: 34%;
+  }
+
+  .history thead th:nth-child(2) {
+    width: 28%;
+  }
+
+  .screen {
+    font-weight: normal;
+  }
+
+  .screen-name {
+    display: block;
+    font-size: var(--text-sm);
+    color: var(--color-gray-900);
+  }
+
+  .screen-journey {
+    display: block;
+    font-size: var(--text-xs);
+    color: var(--color-gray-500);
+  }
+
+  .question {
+    font-size: var(--text-xs);
+    color: var(--color-gray-500);
+  }
+
+  .answer {
+    font-size: var(--text-sm);
+    color: var(--color-gray-900);
+  }
+</style>

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

@@ -0,0 +1,279 @@
+<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.
+   *
+   * 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.
+   */
+  import type { FeatureBucket, Picked } from '@picked/client'
+  import { Badge, Button, Card, CodeBlock, CopyButton, EmptyState, Stack, Text } from '../../ui'
+
+  interface VariationsPanelProps {
+    client: Picked
+  }
+
+  const { client }: VariationsPanelProps = $props()
+
+  /** The URL parameter the SDK reads its overrides from. */
+  const OVERRIDE_PARAM = 'picked-feature'
+  /** Every feature's control arm. */
+  const CONTROL_VALUE = 'false'
+  /** A boolean feature's two arms. */
+  const BOOLEAN_ARMS = ['true', 'false']
+
+  const features = $derived(client.features.listStore)
+  /** The arm the reviewer has chosen, by feature id. Absent means "leave this one alone". */
+  let chosen = $state<Record<string, string | undefined>>({})
+
+  /**
+   * The arm a feature is serving right now.
+   *
+   * @param {FeatureBucket} feature - The feature to read.
+   * @returns {string | null} The served arm as text, or null while the feature is undecided.
+   * @example
+   * servedArm(feature) // 'true'
+   */
+  function servedArm(feature: FeatureBucket): string | null {
+    return feature.isResolved ? String(feature.getBucket().bucket) : null
+  }
+
+  /**
+   * The arms a feature can be forced to: a published feature's own variants, else the two
+   * structural arms of a boolean one. A feature of unknown shape takes free text — the same
+   * classification the Developer group's Features screen makes, because it is the SDK's own
+   * bucketing rule.
+   *
+   * @param {FeatureBucket} feature - The feature to read.
+   * @returns {string[] | null} The arms' values as text, or null for free text.
+   * @example
+   * armsOf(booleanFeature) // ['true', 'false']
+   */
+  function armsOf(feature: FeatureBucket): string[] | null {
+    const variants = feature.variants
+    if (variants !== undefined && variants.length > 0) {
+      return variants.map((variant) => String(variant.value))
+    }
+
+    const served = servedArm(feature)
+    if (feature.valueType === 'text' || (served !== null && !BOOLEAN_ARMS.includes(served))) {
+      return null
+    }
+
+    return BOOLEAN_ARMS
+  }
+
+  /**
+   * What an arm is called on screen. `true` and `false` are structural, not words a reviewer uses.
+   *
+   * @param {FeatureBucket} feature - The feature the arm belongs to.
+   * @param {string} value - The arm's value, as text.
+   * @returns {string} The arm's name.
+   * @example
+   * armLabel(feature, 'true') // 'On'
+   */
+  function armLabel(feature: FeatureBucket, value: string): string {
+    if (value === 'true') return 'On'
+    if (value === CONTROL_VALUE) return 'Off'
+    const variant = feature.variants?.find((entry) => String(entry.value) === value)
+    return variant?.key ?? value
+  }
+
+  /**
+   * Resolves a feature that has not bucketed yet. An unresolved feature answers a promise and a
+   * resolved one answers its bucket, so the result is only awaited when there is something to await.
+   *
+   * @param {FeatureBucket} feature - The feature to resolve.
+   * @example
+   * resolveBucket(feature) // the "Now: …" badge appears once it settles
+   */
+  function resolveBucket(feature: FeatureBucket): void {
+    const result = feature.getBucket()
+    if (result instanceof Promise) result.catch(() => undefined)
+  }
+
+  /**
+   * Chooses an arm to force for a feature.
+   *
+   * @param {string} featureId - The feature's id.
+   * @param {string} value - The arm's value, as text.
+   * @example
+   * choose('hero-layout', 'video-hero')
+   */
+  function choose(featureId: string, value: string): void {
+    chosen = { ...chosen, [featureId]: value }
+  }
+
+  /**
+   * Stops forcing a feature, so it buckets as normal again.
+   *
+   * @param {string} featureId - The feature's id.
+   * @example
+   * release('hero-layout')
+   */
+  function release(featureId: string): void {
+    chosen = Object.fromEntries(Object.entries(chosen).filter(([id]) => id !== featureId))
+  }
+
+  /**
+   * This page's address with the chosen arms as overrides, replacing any already on it.
+   *
+   * @param {string} href - The page's address.
+   * @param {Readonly<Record<string, string | undefined>>} arms - The chosen arm, by feature id.
+   * @returns {string} The address that reproduces the chosen arms.
+   * @example
+   * overrideUrl('https://example.com/', { hero: 'video' }) // 'https://example.com/?picked-feature=hero%3Avideo'
+   */
+  function overrideUrl(href: string, arms: Readonly<Record<string, string | undefined>>): string {
+    const url = new URL(href)
+    url.searchParams.delete(OVERRIDE_PARAM)
+    for (const [id, value] of Object.entries(arms)) {
+      if (value === undefined) continue
+      // `searchParams` escapes a value holding a colon or an ampersand — that is what keeps the
+      // round trip exact.
+      url.searchParams.append(OVERRIDE_PARAM, `${id}:${value}`)
+    }
+
+    return url.toString()
+  }
+
+  const chosenCount = $derived(Object.keys(chosen).length)
+  const shareUrl = $derived(
+    typeof window === 'undefined' ? '' : overrideUrl(window.location.href, chosen),
+  )
+
+  /**
+   * Reloads the page with the chosen arms forced.
+   *
+   * @example
+   * apply()
+   */
+  function apply(): void {
+    window.location.href = shareUrl
+  }
+</script>
+
+<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."
+    />
+  {:else}
+    <Card sectioned>
+      <ul class="features" data-testid="devtools-variations">
+        {#each $features as feature (feature.id)}
+          {@const arms = armsOf(feature)}
+          {@const served = servedArm(feature)}
+          <li class="feature" data-testid="devtools-variations-row" data-feature-id={feature.id}>
+            <div class="feature-head">
+              <Text size="medium" weight="medium">{feature.name}</Text>
+              {#if served !== null}
+                <Badge status="default" size="small">Now: {armLabel(feature, served)}</Badge>
+              {:else}
+                <Button variant="ghost" size="small" onclick={() => resolveBucket(feature)}>
+                  Check which version
+                </Button>
+              {/if}
+            </div>
+
+            {#if arms}
+              <div class="arms" role="group" aria-label="Version of {feature.name}">
+                {#each arms as arm, index (index)}
+                  <label class="option-label">
+                    <input
+                      type="radio"
+                      name="variation-{feature.id}"
+                      checked={chosen[feature.id] === arm}
+                      onchange={() => choose(feature.id, arm)}
+                    />
+                    <Text size="small" inline>{armLabel(feature, arm)}</Text>
+                  </label>
+                {/each}
+              </div>
+            {:else}
+              <input
+                class="inline-input"
+                type="text"
+                value={chosen[feature.id] ?? ''}
+                placeholder="Type the version to force"
+                aria-label="Version of {feature.name}"
+                oninput={(event) => choose(feature.id, event.currentTarget.value)}
+              />
+            {/if}
+
+            {#if chosen[feature.id] !== undefined}
+              <Button variant="ghost" size="small" onclick={() => release(feature.id)}>
+                Leave this one alone
+              </Button>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </Card>
+
+    <Card>
+      {#snippet header()}
+        <Text size="caption" color="subdued" weight="semibold">YOUR LINK</Text>
+      {/snippet}
+      <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
+            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
+            </Button>
+            <CopyButton
+              text={shareUrl}
+              label="Copy link"
+              showLabel
+              testId="devtools-variations-copy"
+            />
+          </Stack>
+        {/if}
+      </Stack>
+    </Card>
+  {/if}
+</Stack>
+
+<style>
+  .features {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .feature {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    align-items: flex-start;
+    padding: var(--space-3);
+    border-bottom: 1px solid var(--color-gray-200);
+  }
+
+  .feature:last-child {
+    border-bottom: none;
+  }
+
+  .feature-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    width: 100%;
+  }
+
+  .arms {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+  }
+</style>

package/dist/plugins/devtools/screens/config/ConfigScreen.svelte

@@ -27,6 +27,12 @@
           ? '—'
           : `snapshot ${client.versionSkew.seeded} kept over resolved ${client.versionSkew.resolved}`,
     },
+    {
+      label: 'Preview',
+      value: client.previewUnavailable
+        ? 'Unavailable: the workspace no longer exists. Serving the published configuration.'
+        : '—',
+    },
   ]
 
   const configColumns = [

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-  /** @file Screen hosting user-registered custom devtools tools as nested tabs. */
+  /** @file Screen hosting the developer-placed custom tools as nested tabs. */
   import { getPicked } from '../../../../hooks'
   import AdaptedToolHost from '../../components/AdaptedToolHost.svelte'
   import Tabs from '../../components/Tabs.svelte'
-  import { readCustomTools } from '../../customTools'
+  import { developerTools, readCustomTools } from '../../customTools'
   import { Button, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
   const docsUrl = `${client.documentationSiteUrl}/chrome-extension#custom-tools`
-  const tools = readCustomTools(client)
+  const tools = developerTools(readCustomTools(client))
   const tabs = tools.map((tool) => ({
     id: tool.id,
     label: tool.label,

package/dist/plugins/devtools/screens/responses/ResponseTableRow.svelte

@@ -3,11 +3,13 @@
   import type { ResponseListItem, Field, FieldValue, JsonValue } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
+  import { readOnlyReasonFromContext } from '../../posture-context'
 
   export let field: Field
   export let response: ResponseListItem | null
 
   const client = getPicked()
+  const readOnlyReason = readOnlyReasonFromContext()
 
   let isEditing = false
   let editValue = ''
@@ -266,6 +268,10 @@
         <Button variant="primary" size="small" onclick={saveEdit}>Save</Button>
         <Button variant="destructive" size="small" onclick={cancelEdit}>Cancel</Button>
       </Stack>
+    {:else if readOnlyReason !== null}
+      <span title={readOnlyReason} data-testid="devtools-response-read-only">
+        <Text size="caption" color="subdued">Read-only</Text>
+      </span>
     {:else}
       <Stack direction="horizontal" gap="none" align="end">
         <Button variant="secondary" size="small" onclick={startEdit}>

package/dist/plugins/devtools/session/index.d.ts

@@ -0,0 +1,3 @@
+/** @file Public entrypoint for the review tools' session model. */
+export { createSessionData } from './session';
+export type { BusEvent, JourneyView, SessionClient, SessionData, SessionInstance, SessionOptions, } from './session';

package/dist/plugins/devtools/session/index.js

@@ -0,0 +1 @@
+export{createSessionData}from"./session.js";