unspaghettit 0.2.0 → 0.4.0

package/src/features/behavior-model/presentation/components/PersonasManager.svelte

@@ -1,130 +1,130 @@
-<script lang="ts">
-  import type { Feature } from '$features/behavior-model/domain/entities/Feature';
-  import type { Persona } from '$features/behavior-model/domain/entities/Persona';
-  import type { PersonaId } from '$features/behavior-model/domain/value-objects/ids';
-  import { asPersonaId } from '$features/behavior-model/domain/value-objects/ids';
-  import {
-    addPersona,
-    removePersona,
-    updatePersona
-  } from '$features/behavior-model/domain/services/FeatureTransforms';
-  import { featureStore } from '$features/behavior-model/presentation/stores/featureStore.svelte';
-  import { cryptoIdGenerator } from '$shared/domain/IdGenerator';
-  import PersonaEditor from './PersonaEditor.svelte';
-
-  type Props = { feature: Feature };
-  let { feature }: Props = $props();
-
-  let expandedId = $state<PersonaId | null>(null);
-
-  // Pull every state path defined anywhere in the feature and every
-  // parameter name used by any action. So persona authors can pick
-  // from real, existing identifiers instead of typing free text.
-  const availablePaths = $derived.by(() => {
-    const seen = new Set<string>();
-    const out: (typeof feature.surfaces)[number]['stateDefinitions'][number]['path'][] = [];
-    for (const surface of feature.surfaces) {
-      for (const def of surface.stateDefinitions) {
-        if (seen.has(def.path)) continue;
-        seen.add(def.path);
-        out.push(def.path);
-      }
-    }
-    return out;
-  });
-
-  const availableParameterNames = $derived.by(() => {
-    const seen = new Set<string>();
-    const out: string[] = [];
-    for (const surface of feature.surfaces) {
-      for (const cap of surface.actions) {
-        for (const param of cap.parameters) {
-          if (seen.has(param.name)) continue;
-          seen.add(param.name);
-          out.push(param.name);
-        }
-      }
-    }
-    return out.sort();
-  });
-
-  async function add() {
-    const persona: Persona = {
-      id: asPersonaId(cryptoIdGenerator()),
-      name: 'New persona',
-      description: '',
-      stateOverrides: [],
-      parameterOverrides: []
-    };
-    await featureStore.mutate((current) => addPersona(current, persona));
-    expandedId = persona.id;
-  }
-
-  async function update(persona: Persona) {
-    await featureStore.mutate((current) => updatePersona(current, persona));
-  }
-
-  async function remove(id: PersonaId) {
-    if (!confirm('Delete this persona?')) return;
-    await featureStore.mutate((current) => removePersona(current, id));
-  }
-</script>
-
-<div class="space-y-3 text-sm">
-  <p class="text-xs text-neutral-500">
-    Personas are named "fake users" with preset state and parameter values. Pick one in the
-    Simulator tab to auto-fill state and action inputs.
-  </p>
-
-  <button
-    type="button"
-    class="w-full rounded-md border border-neutral-300 px-3 py-1.5 text-xs hover:bg-neutral-50"
-    onclick={add}
-  >
-    + New persona
-  </button>
-
-  {#if feature.personas.length === 0}
-    <p class="rounded-md border border-dashed border-neutral-300 p-3 text-center text-xs text-neutral-500">
-      No personas yet. Add one to test the simulator with predefined state.
-    </p>
-  {:else}
-    <ul class="space-y-2">
-      {#each feature.personas as persona (persona.id)}
-        <li class="rounded-md border {expandedId === persona.id ? 'border-brand-300 ring-1 ring-brand-200' : 'border-neutral-200'}">
-          <header class="flex items-center justify-between gap-2 px-3 py-2">
-            <button
-              type="button"
-              class="flex flex-1 items-center gap-2 text-left"
-              onclick={() => (expandedId = expandedId === persona.id ? null : persona.id)}
-            >
-              <span class="text-xs text-neutral-400">{expandedId === persona.id ? '▾' : '▸'}</span>
-              <span class="font-medium text-neutral-900">{persona.name}</span>
-              <span class="text-xs text-neutral-500">
-                {persona.stateOverrides.length} state · {persona.parameterOverrides.length} params
-              </span>
-            </button>
-            <button
-              type="button"
-              class="text-xs text-neutral-400 hover:text-red-600"
-              onclick={() => remove(persona.id)}
-              aria-label="Remove persona"
-            >
-              ✕
-            </button>
-          </header>
-          {#if expandedId === persona.id}
-            <div class="border-t border-neutral-200 p-3">
-              <PersonaEditor
-                {persona}
-                {availablePaths}
-                {availableParameterNames}
-                onChange={(next) => update(next)}
-              />
-            </div>
-          {/if}
-        </li>
-      {/each}
-    </ul>
-  {/if}
-</div>
+<script lang="ts">
+  import type { Feature } from '$features/behavior-model/domain/entities/Feature';
+  import type { Persona } from '$features/behavior-model/domain/entities/Persona';
+  import type { PersonaId } from '$features/behavior-model/domain/value-objects/ids';
+  import { asPersonaId } from '$features/behavior-model/domain/value-objects/ids';
+  import {
+    addPersona,
+    removePersona,
+    updatePersona
+  } from '$features/behavior-model/domain/services/FeatureTransforms';
+  import { featureStore } from '$features/behavior-model/presentation/stores/featureStore.svelte';
+  import { cryptoIdGenerator } from '$shared/domain/IdGenerator';
+  import PersonaEditor from './PersonaEditor.svelte';
+
+  type Props = { feature: Feature };
+  let { feature }: Props = $props();
+
+  let expandedId = $state<PersonaId | null>(null);
+
+  // Pull every state path defined anywhere in the feature and every
+  // parameter name used by any action. So persona authors can pick
+  // from real, existing identifiers instead of typing free text.
+  const availablePaths = $derived.by(() => {
+    const seen = new Set<string>();
+    const out: (typeof feature.surfaces)[number]['stateDefinitions'][number]['path'][] = [];
+    for (const surface of feature.surfaces) {
+      for (const def of surface.stateDefinitions) {
+        if (seen.has(def.path)) continue;
+        seen.add(def.path);
+        out.push(def.path);
+      }
+    }
+    return out;
+  });
+
+  const availableParameterNames = $derived.by(() => {
+    const seen = new Set<string>();
+    const out: string[] = [];
+    for (const surface of feature.surfaces) {
+      for (const cap of surface.actions) {
+        for (const param of cap.parameters) {
+          if (seen.has(param.name)) continue;
+          seen.add(param.name);
+          out.push(param.name);
+        }
+      }
+    }
+    return out.sort();
+  });
+
+  async function add() {
+    const persona: Persona = {
+      id: asPersonaId(cryptoIdGenerator()),
+      name: 'New persona',
+      description: '',
+      stateOverrides: [],
+      parameterOverrides: []
+    };
+    await featureStore.mutate((current) => addPersona(current, persona));
+    expandedId = persona.id;
+  }
+
+  async function update(persona: Persona) {
+    await featureStore.mutate((current) => updatePersona(current, persona));
+  }
+
+  async function remove(id: PersonaId) {
+    if (!confirm('Delete this persona?')) return;
+    await featureStore.mutate((current) => removePersona(current, id));
+  }
+</script>
+
+<div class="space-y-3 text-sm">
+  <p class="text-xs text-neutral-500">
+    Personas are named "fake users" with preset state and parameter values. Pick one in the
+    Simulator tab to auto-fill state and action inputs.
+  </p>
+
+  <button
+    type="button"
+    class="w-full rounded-md border border-neutral-300 px-3 py-1.5 text-xs hover:bg-neutral-50"
+    onclick={add}
+  >
+    + New persona
+  </button>
+
+  {#if feature.personas.length === 0}
+    <p class="rounded-md border border-dashed border-neutral-300 p-3 text-center text-xs text-neutral-500">
+      No personas yet. Add one to test the simulator with predefined state.
+    </p>
+  {:else}
+    <ul class="space-y-2">
+      {#each feature.personas as persona (persona.id)}
+        <li class="rounded-md border {expandedId === persona.id ? 'border-brand-300 ring-1 ring-brand-200' : 'border-neutral-200'}">
+          <header class="flex items-center justify-between gap-2 px-3 py-2">
+            <button
+              type="button"
+              class="flex flex-1 items-center gap-2 text-left"
+              onclick={() => (expandedId = expandedId === persona.id ? null : persona.id)}
+            >
+              <span class="text-xs text-neutral-400">{expandedId === persona.id ? '▾' : '▸'}</span>
+              <span class="font-medium text-neutral-900">{persona.name}</span>
+              <span class="text-xs text-neutral-500">
+                {persona.stateOverrides.length} state · {persona.parameterOverrides.length} params
+              </span>
+            </button>
+            <button
+              type="button"
+              class="text-xs text-neutral-400 hover:text-red-600"
+              onclick={() => remove(persona.id)}
+              aria-label="Remove persona"
+            >
+              ✕
+            </button>
+          </header>
+          {#if expandedId === persona.id}
+            <div class="border-t border-neutral-200 p-3">
+              <PersonaEditor
+                {persona}
+                {availablePaths}
+                {availableParameterNames}
+                onChange={(next) => update(next)}
+              />
+            </div>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>

package/src/features/behavior-model/presentation/components/ReachabilityGoalEditor.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+  import {
+    ALL_REACHABILITY_GOAL_KINDS,
+    type ReachabilityGoal,
+    type ReachabilityGoalKind
+  } from '$features/behavior-model/domain/entities/ReachabilityGoal';
+  import {
+    ALL_OPERATORS,
+    operatorLabel,
+    operatorRequiresRightOperand,
+    type Operator
+  } from '$features/behavior-model/domain/value-objects/Operator';
+  import {
+    isCompositeCondition,
+    type LeafRuleCondition
+  } from '$features/behavior-model/domain/value-objects/RuleCondition';
+  import {
+    isStatePath,
+    asStatePath,
+    type StatePath
+  } from '$features/behavior-model/domain/value-objects/StatePath';
+  import StatePathSelect from './StatePathSelect.svelte';
+  import ConditionRightEditor from './ConditionRightEditor.svelte';
+
+  type Props = {
+    goal: ReachabilityGoal;
+    availablePaths: readonly StatePath[];
+    onChange: (next: ReachabilityGoal) => void;
+    onRemove: () => void;
+  };
+  let { goal, availablePaths, onChange, onRemove }: Props = $props();
+
+  const KIND_LABEL: Record<ReachabilityGoalKind, string> = {
+    reachable: 'Reachable (the target can be reached at all)',
+    always_reachable: 'Always reachable (stays reachable from every state)'
+  };
+
+  // Composite conditions are edited as JSON here, same as InvariantEditor.
+  const leaf = $derived(
+    isCompositeCondition(goal.condition) ? null : (goal.condition as LeafRuleCondition)
+  );
+
+  function patchCondition(patch: Partial<LeafRuleCondition>) {
+    if (leaf === null) return;
+    onChange({ ...goal, condition: { ...leaf, ...patch } });
+  }
+
+  function updatePath(value: string) {
+    if (!isStatePath(value)) return;
+    patchCondition({ left: asStatePath(value) });
+  }
+
+  function updateOperator(op: Operator) {
+    if (leaf === null) return;
+    const requiresRight = operatorRequiresRightOperand(op);
+    onChange({
+      ...goal,
+      condition: {
+        left: leaf.left,
+        operator: op,
+        ...(requiresRight ? { right: leaf.right ?? '' } : {})
+      }
+    });
+  }
+
+  function backToLeaf() {
+    const fallback = availablePaths[0] ?? asStatePath('state.path');
+    onChange({ ...goal, condition: { left: fallback, operator: 'is_true' } });
+  }
+
+  function startComposite(kind: 'all' | 'any') {
+    const seed = leaf
+      ? [{ left: leaf.left, operator: leaf.operator, ...(leaf.right !== undefined ? { right: leaf.right } : {}) }]
+      : [];
+    onChange({ ...goal, condition: { kind, conditions: seed } });
+  }
+
+  let compositeDraft = $state('');
+  let compositeError = $state<string | null>(null);
+  $effect(() => {
+    if (isCompositeCondition(goal.condition)) {
+      const formatted = JSON.stringify(goal.condition, null, 2);
+      if (compositeDraft.trim().length === 0) compositeDraft = formatted;
+    }
+  });
+
+  function commitComposite() {
+    try {
+      const parsed = JSON.parse(compositeDraft);
+      if (!parsed || typeof parsed !== 'object' || !('kind' in parsed)) {
+        compositeError = 'Top-level must be an object with `kind: "all" | "any" | "not"`.';
+        return;
+      }
+      const k = (parsed as { kind?: string }).kind;
+      if (k !== 'all' && k !== 'any' && k !== 'not') {
+        compositeError = '`kind` must be "all", "any", or "not".';
+        return;
+      }
+      compositeError = null;
+      onChange({ ...goal, condition: parsed as typeof goal.condition });
+    } catch (e) {
+      compositeError = (e as Error).message;
+    }
+  }
+</script>
+
+<div class="space-y-2 rounded-md border border-slate-200 bg-white p-3">
+  <div class="flex items-center gap-2">
+    <input
+      type="text"
+      class="flex-1 rounded-md border border-slate-300 px-2 py-1 text-sm font-medium"
+      value={goal.name}
+      onblur={(e) => onChange({ ...goal, name: (e.target as HTMLInputElement).value })}
+      placeholder="Goal name"
+    />
+    <button
+      type="button"
+      class="text-xs text-slate-400 hover:text-red-600"
+      onclick={onRemove}
+      aria-label="Remove reachability goal"
+    >
+      Remove
+    </button>
+  </div>
+
+  <label class="flex items-center gap-2 text-[11px] text-slate-500">
+    <span class="shrink-0">Kind</span>
+    <select
+      class="flex-1 rounded-md border border-slate-300 px-2 py-1 text-xs"
+      value={goal.kind}
+      onchange={(e) =>
+        onChange({ ...goal, kind: (e.target as HTMLSelectElement).value as ReachabilityGoalKind })}
+    >
+      {#each ALL_REACHABILITY_GOAL_KINDS as kind}
+        <option value={kind}>{KIND_LABEL[kind]}</option>
+      {/each}
+    </select>
+  </label>
+
+  <div class="rounded-md bg-slate-50 p-3">
+    <div class="mb-2 flex flex-wrap items-center gap-1 text-[10px]">
+      <span class="text-slate-500">Target:</span>
+      <button
+        type="button"
+        class="rounded px-1.5 py-0.5 {leaf
+          ? 'bg-slate-900 text-white'
+          : 'border border-slate-300 text-slate-600 hover:bg-white'}"
+        onclick={backToLeaf}
+        disabled={leaf !== null}
+      >
+        Single
+      </button>
+      <button
+        type="button"
+        class="rounded px-1.5 py-0.5 {isCompositeCondition(goal.condition) && (goal.condition as { kind: string }).kind === 'all'
+          ? 'bg-slate-900 text-white'
+          : 'border border-slate-300 text-slate-600 hover:bg-white'}"
+        onclick={() => startComposite('all')}
+      >
+        All of
+      </button>
+      <button
+        type="button"
+        class="rounded px-1.5 py-0.5 {isCompositeCondition(goal.condition) && (goal.condition as { kind: string }).kind === 'any'
+          ? 'bg-slate-900 text-white'
+          : 'border border-slate-300 text-slate-600 hover:bg-white'}"
+        onclick={() => startComposite('any')}
+      >
+        Any of
+      </button>
+    </div>
+    {#if leaf}
+      <div class="flex flex-wrap items-start gap-2 text-sm">
+        <span class="mt-1.5 font-mono text-xs text-slate-500">REACH</span>
+        <StatePathSelect
+          value={typeof leaf.left === 'string' ? leaf.left : ''}
+          {availablePaths}
+          onCommit={updatePath}
+        />
+        <select
+          class="mt-0.5 rounded-md border border-slate-300 px-2 py-1 text-xs"
+          value={leaf.operator}
+          onchange={(e) => updateOperator((e.target as HTMLSelectElement).value as Operator)}
+        >
+          {#each ALL_OPERATORS as op}
+            <option value={op}>{operatorLabel(op)}</option>
+          {/each}
+        </select>
+        {#if operatorRequiresRightOperand(leaf.operator)}
+          <ConditionRightEditor
+            value={leaf.right}
+            {availablePaths}
+            onChange={(right) => patchCondition({ right })}
+          />
+        {/if}
+      </div>
+    {:else}
+      <div class="space-y-1">
+        <p class="text-[11px] text-slate-500">
+          Composite target (<span class="font-mono">{(goal.condition as { kind: string }).kind}</span>). Each entry can be a leaf or another composite.
+        </p>
+        <textarea
+          class="mono min-h-32 w-full rounded-md border border-slate-300 px-2 py-1 text-xs"
+          bind:value={compositeDraft}
+          onblur={commitComposite}
+        ></textarea>
+        {#if compositeError}
+          <p class="text-[11px] text-red-600">{compositeError}</p>
+        {:else}
+          <p class="text-[11px] text-slate-500">Saved on blur. Switch back to "Single" for visual editing.</p>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  <input
+    type="text"
+    class="w-full rounded-md border border-slate-200 px-2 py-1 text-xs"
+    value={goal.description ?? ''}
+    onblur={(e) => onChange({ ...goal, description: (e.target as HTMLInputElement).value })}
+    placeholder="Description (what this goal means)"
+  />
+  <input
+    type="text"
+    class="w-full rounded-md border border-slate-200 px-2 py-1 text-xs"
+    value={goal.message ?? ''}
+    onblur={(e) => onChange({ ...goal, message: (e.target as HTMLInputElement).value })}
+    placeholder="Message shown when the goal is unmet"
+  />
+</div>

package/src/features/behavior-model/presentation/components/ReachabilityGoalsEditor.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Feature } from '$features/behavior-model/domain/entities/Feature';
+  import type { ReachabilityGoal } from '$features/behavior-model/domain/entities/ReachabilityGoal';
+  import { featureStore } from '$features/behavior-model/presentation/stores/featureStore.svelte';
+  import {
+    addReachabilityGoal,
+    removeReachabilityGoal,
+    updateReachabilityGoal
+  } from '$features/behavior-model/domain/services/FeatureTransforms';
+  import { newReachabilityGoal } from '$features/behavior-model/presentation/view-models/factories';
+  import { cryptoIdGenerator } from '$shared/domain/IdGenerator';
+  import ReachabilityGoalEditor from './ReachabilityGoalEditor.svelte';
+
+  type Props = { feature: Feature };
+  let { feature }: Props = $props();
+
+  // Goals are feature-level, so the state-path picker spans every surface.
+  const availablePaths = $derived(
+    feature.surfaces.flatMap((s) => s.stateDefinitions.map((d) => d.path))
+  );
+  const goals = $derived(feature.reachabilityGoals ?? []);
+
+  async function add() {
+    const fallbackPath = availablePaths[0] ?? ('state.path' as unknown as never);
+    const goal = newReachabilityGoal(cryptoIdGenerator, {
+      name: 'New reachability goal',
+      kind: 'reachable',
+      left: fallbackPath as string
+    });
+    await featureStore.mutate((current) => addReachabilityGoal(current, goal));
+  }
+
+  async function update(next: ReachabilityGoal) {
+    await featureStore.mutate((current) => updateReachabilityGoal(current, next.id, next));
+  }
+
+  async function remove(id: ReachabilityGoal['id']) {
+    await featureStore.mutate((current) => removeReachabilityGoal(current, id));
+  }
+</script>
+
+<div class="space-y-3">
+  <div class="rounded-md border border-lime-200 bg-lime-50/50 p-3 text-xs text-lime-900">
+    <p class="font-semibold">Reachability goals (liveness)</p>
+    <p class="mt-0.5 text-[11px] leading-relaxed">
+      The complement to invariants: invariants say "nothing bad ever happens", goals say
+      "something good stays reachable". <span class="font-medium">Reachable</span> — some reachable
+      state satisfies the target (catches a state the product can never get to).
+      <span class="font-medium">Always reachable</span> — the target stays reachable from every
+      state (catches a flow that can get permanently stuck). Checked by the model checker
+      (Verify / <span class="font-mono">unspa check --model-check</span>), which returns the
+      shortest action path to any trap.
+    </p>
+  </div>
+
+  <div class="flex justify-end">
+    <button
+      type="button"
+      class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-50"
+      onclick={add}
+    >
+      <span class="text-base leading-none">+</span> Add reachability goal
+    </button>
+  </div>
+
+  {#if goals.length === 0}
+    <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50/30 p-6 text-center">
+      <p class="text-sm font-medium text-slate-700">No reachability goals yet</p>
+      <p class="mx-auto mt-1 max-w-md text-xs text-slate-500">
+        Optional — add one when a key state must stay reachable (e.g. "an order can always reach
+        delivered or cancelled"). Run a model check to see them verified with counterexample paths.
+      </p>
+    </div>
+  {:else}
+    <div class="space-y-2">
+      {#each goals as goal (goal.id)}
+        <ReachabilityGoalEditor
+          {goal}
+          {availablePaths}
+          onChange={(next) => update(next)}
+          onRemove={() => remove(goal.id)}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>