@bramas/simulant-ui 0.1.2 → 0.2.0

package/dist/components/AlgorithmViewer.jsx

@@ -4,10 +4,13 @@
  * more lightly, on the lines of the calls that led there. Below, the definitions the algorithm
  * uses, folded to their signatures (a click on a function name opens one); an agent is marked
  * (↩) on the lines its last step returned from. Clicking a cursor explains that agent's last
- * step: its view, and each definition it called with its arguments and result.
+ * step (its view, and each definition it called with its arguments and result) in a card
+ * anchored under that cursor: it covers the code without moving it, and follows the agent's line
+ * while stepping.
  */
-import { For, Show, createMemo, createSignal, onCleanup } from "solid-js";
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import { tokenizeAll } from "./highlight.js";
+import { Icon } from "./Icon.jsx";
 import "./AlgorithmViewer.css";
 const SHORT = 48;
 const shorten = (s) => s.length > SHORT ? s.slice(0, SHORT - 1) + '…' : s;
@@ -62,7 +65,10 @@ export function AlgorithmViewer(props) {
     const [open, setOpen] = createSignal(new Set());
     // The whole group of definitions is folded at first.
     const [defsOpen, setDefsOpen] = createSignal(false);
+    // By name: an agent's index is its place in the configuration, which can change between steps.
     const [selected, setSelected] = createSignal();
+    /** The cursor the explanation is anchored to (`data-marker`). */
+    const [anchor, setAnchor] = createSignal();
     const [flash, setFlash] = createSignal();
     const defElements = new Map();
     let flashTimer;
@@ -86,7 +92,81 @@ export function AlgorithmViewer(props) {
             (target ?? el)?.scrollIntoView({ block: 'center', behavior: 'smooth' });
         });
     };
-    const selectedAgent = createMemo(() => (props.agents ?? []).find(a => a.index !== undefined && a.index === selected()));
+    const selectedAgent = createMemo(() => (props.agents ?? []).find(a => a.agentId === selected()));
+    const markerKey = (m, def, line) => `${m.kind}-${m.agent.agentId}-${def ?? 'main'}-${line}`;
+    const markerAt = (key) => scroller?.querySelector(`[data-marker="${CSS.escape(key)}"]`);
+    /** Opens (or closes, from the same cursor) an agent's explanation, under the cursor `key`. */
+    const select = (a, key) => {
+        const same = selected() === a.agentId && (key === undefined || key === anchor());
+        setSelected(same ? undefined : a.agentId);
+        setAnchor(same ? undefined : key);
+        reveal = !same;
+        if (!same)
+            props.onSelectAgent?.(a.agentId);
+    };
+    const close = () => { setSelected(undefined); setAnchor(undefined); };
+    const onKey = (e) => { if (e.key === 'Escape')
+        close(); };
+    window.addEventListener('keydown', onKey);
+    onCleanup(() => window.removeEventListener('keydown', onKey));
+    // The agents' lines stay in view while stepping: scroll to the first one when it is hidden.
+    let scroller;
+    createEffect(() => {
+        mainMarks();
+        queueMicrotask(() => {
+            const line = scroller?.querySelector('.algorithm-body > .algorithm-line.highlighted');
+            if (!scroller || !line)
+                return;
+            const view = scroller.getBoundingClientRect(), box = line.getBoundingClientRect();
+            if (box.top < view.top + 8 || box.bottom > view.bottom - 8) {
+                scroller.scrollTop += box.top - view.top - view.height / 3;
+            }
+        });
+    });
+    // The explanation's card: under its cursor (the agent's current line when that cursor is gone),
+    // in the scrolling content, so that it scrolls with the code.
+    let card;
+    let reveal = false;
+    const [place, setPlace] = createSignal();
+    const reposition = () => {
+        const a = selectedAgent();
+        if (!scroller || !a)
+            return setPlace(undefined);
+        const marker = (anchor() && markerAt(anchor())) || markerAt(`at-${a.agentId}-main-${lineOf(a)}`);
+        if (!marker)
+            return setPlace(undefined);
+        const view = scroller.getBoundingClientRect(), box = marker.getBoundingClientRect();
+        const x = box.left + box.width / 2 - view.left + scroller.scrollLeft;
+        const width = Math.max(240, Math.min(400, scroller.clientWidth - 16));
+        const left = Math.max(scroller.scrollLeft + 8, Math.min(x - 48, scroller.scrollLeft + scroller.clientWidth - width - 8));
+        setPlace({ top: box.bottom - view.top + scroller.scrollTop + 6, left, width, arrow: x - left });
+        // When opened by a click, the card is scrolled into view.
+        if (reveal)
+            queueMicrotask(() => {
+                reveal = false;
+                if (!card || !scroller)
+                    return;
+                const c = card.getBoundingClientRect(), v = scroller.getBoundingClientRect();
+                if (c.bottom > v.bottom - 8)
+                    scroller.scrollTop += Math.min(c.bottom - v.bottom + 8, c.top - v.top - 40);
+            });
+    };
+    createEffect(() => {
+        selected();
+        anchor();
+        mainMarks();
+        defMarks();
+        defsOpen();
+        open();
+        queueMicrotask(reposition);
+    });
+    onMount(() => {
+        if (!scroller)
+            return;
+        const observer = new ResizeObserver(() => reposition());
+        observer.observe(scroller);
+        onCleanup(() => observer.disconnect());
+    });
     const Code = (p) => (<For each={p.lines}>
       {(line) => {
             const marks = () => p.marks.get(line.number) ?? [];
@@ -107,9 +187,9 @@ export function AlgorithmViewer(props) {
             <Show when={marks().length > 0}>
               <span class="agent-markers">
                 <For each={marks()}>
-                  {(m) => (<span class={`agent-marker${m.kind === 'call' ? ' call-marker' : m.kind === 'return' ? ' return-marker' : ''}${selected() === m.agent.index ? ' selected' : ''}`} style={{ color: m.agent.color }} title={m.kind === 'at' ? `${m.agent.agentId} is at this line: click to explain its last step`
+                  {(m) => (<span class={`agent-marker${m.kind === 'call' ? ' call-marker' : m.kind === 'return' ? ' return-marker' : ''}${selected() === m.agent.agentId || props.highlighted === m.agent.agentId ? ' selected' : ''}`} style={{ '--agent': m.agent.color }} data-marker={markerKey(m, p.def, line.number)} title={m.kind === 'at' ? `${m.agent.agentId} is at this line: click to explain its last step`
                         : m.kind === 'call' ? `${m.agent.agentId} is inside the procedure called here`
-                            : `${m.agent.agentId}'s last step returned from this line: click to explain it`} onClick={() => setSelected(s => s === m.agent.index ? undefined : m.agent.index)}>
+                            : `${m.agent.agentId}'s last step returned from this line: click to explain it`} onClick={() => select(m.agent, markerKey(m, p.def, line.number))}>
                       {m.kind === 'at' ? '◀' : m.kind === 'call' ? '◁' : '↩'} {m.agent.agentId}
                     </span>)}
                 </For>
@@ -141,78 +221,103 @@ export function AlgorithmViewer(props) {
       </For>
     </ul>);
     return (<div class="algorithm-viewer">
-      <div class="algorithm-header">
-        <h3 class="algorithm-caption">{props.source.name}</h3>
+      <div class={`algorithm-header${props.onHeadPointerDown ? ' algorithm-header-draggable' : ''}`} onPointerDown={e => props.onHeadPointerDown?.(e)}>
+        <Icon name="file"/>
         <Show when={props.source.file}>
           <span class="algorithm-file">{props.source.file.split('/').pop()}</span>
+          <Icon name="chevronRight" size={12} class="algorithm-crumb"/>
         </Show>
+        <h3 class="algorithm-caption">{props.source.name}</h3>
+        <span class="sim-spacer"/>
+        <div class="algorithm-agents" aria-label="Agents">
+          <For each={props.agents ?? []}>
+            {(a) => (<button onPointerDown={e => e.stopPropagation()} class={`algorithm-agent${selected() === a.agentId || props.highlighted === a.agentId ? ' selected' : ''}`} style={{ '--agent': a.color }} onClick={() => {
+                // The card opens under the agent's cursor, scrolled into view.
+                const key = `at-${a.agentId}-main-${lineOf(a)}`;
+                select(a, key);
+                queueMicrotask(() => markerAt(key)?.closest('.algorithm-line')?.scrollIntoView({ block: 'nearest' }));
+            }} title={`${a.agentId}: line ${lineOf(a)}. Click to explain its last step`} aria-pressed={selected() === a.agentId}>
+                <span class="algorithm-agent-dot"/>{a.agentId}<span class="algorithm-agent-line">{lineOf(a)}</span>
+              </button>)}
+          </For>
+        </div>
+        {props.actions}
       </div>
 
-      <Show when={selectedAgent()}>
-        {a => (<div class="ex-panel">
+      <div class="algorithm-scroll" ref={scroller}>
+        <div class="algorithm-body">
+          <Code lines={lines()} marks={mainMarks()}/>
+        </div>
+
+        <Show when={defLines().length > 0}>
+          <div class="algorithm-defs">
+            <div class="defs-title" onClick={() => setDefsOpen(v => !v)} title={defsOpen() ? 'Fold the definitions' : 'Show the definitions'}>
+              <Icon name="chevronRight" size={13} class={defsOpen() ? 'defs-chevron open' : 'defs-chevron'}/> Definitions <span class="sim-muted">{defLines().length} · a click on a function name opens its definition</span>
+            </div>
+            <Show when={defsOpen()}>
+              <For each={defLines()}>
+                {(d) => {
+            const marks = () => defMarks().get(d.name) ?? new Map();
+            const agents = () => [...new Map([...marks().values()].flat().map(m => [m.agent.index, m.agent])).values()];
+            return (<div class={`def${flash() === d.name ? ' flash' : ''}`} ref={el => defElements.set(d.name, el)}>
+                      <Show when={open().has(d.name)} fallback={<div class="algorithm-line def-folded" onClick={() => toggle(d.name)} title="Show the definition">
+                          <span class="line-number">▸</span>
+                          <span class="line-content">
+                            <For each={d.tokens[0]?.tokens ?? []}>{(t) => t.kind ? <span class={`tok-${t.kind}`}>{t.text}</span> : t.text}</For>
+                          </span>
+                          <Show when={agents().length}>
+                            <span class="agent-markers">
+                              <For each={agents()}>{(a) => <span class="agent-marker return-marker" style={{ '--agent': a.color }}>↩ {a.agentId}</span>}</For>
+                            </span>
+                          </Show>
+                        </div>}>
+                        <div class="def-open">
+                          <div class="def-fold" onClick={() => toggle(d.name)} title="Fold">▾ {d.name}</div>
+                          <Code lines={d.tokens} marks={marks()} def={d.name}/>
+                        </div>
+                      </Show>
+                    </div>);
+        }}
+              </For>
+            </Show>
+          </div>
+        </Show>
+
+        <Show when={selectedAgent() && place()}>
+          <div ref={card} class="ex-card" role="dialog" aria-label={`Last step of ${selectedAgent().agentId}`} style={{ top: `${place().top}px`, left: `${place().left}px`, width: `${place().width}px`, '--arrow': `${place().arrow}px`, '--agent': selectedAgent().color }}>
             <div class="ex-head">
-              <strong style={{ color: a().color }}>{a().agentId}</strong>
-              <Show when={a().explanation} fallback={<span class="sim-muted">did not take a decision in the last step (not activated, or the initial configuration).</span>}>
-                {e => (<span>
-                    last step: <span class="tok-action">move</span> {e().move}
-                    <Show when={e().line !== undefined}> · decided at line {e().line}</Show>
-                    <span class="sim-muted"> · frame: {e().frame}</span>
-                  </span>)}
-              </Show>
-              <span style={{ flex: 1 }}/>
-              <button class="sim-ghost sim-icon" onClick={() => setSelected(undefined)} title="Close">✕</button>
+              <span class="ex-agent"><span class="algorithm-agent-dot"/>{selectedAgent().agentId}</span>
+              <span class="ex-title">Last step</span>
+              <span class="sim-spacer"/>
+              <button class="sim-ghost sim-icon sim-sm" onClick={close} aria-label="Close the explanation" title="Close (Esc)"><Icon name="close" size={14}/></button>
             </div>
-            <Show when={a().explanation}>
+            <Show when={selectedAgent().explanation} fallback={<p class="ex-none">No decision in the last step: the agent was not activated, or this is the initial configuration.</p>}>
               {e => (<>
-                  <div class="ex-view">
-                    <For each={Object.entries(e().view)}>
-                      {([k, v]) => <div><span class="si-key">{k}</span> <span class="ex-result" title={v}>{v}</span></div>}
-                    </For>
+                  <div class="ex-meta">
+                    <span><span class="tok-action">move</span> {e().move}</span>
+                    <Show when={e().line !== undefined}><span>decided at line {e().line}</span></Show>
+                    <span>frame: {e().frame}</span>
+                  </div>
+                  <div class="ex-section">
+                    <h4>Sensors</h4>
+                    <Show when={Object.keys(e().view).length} fallback={<p class="ex-none">No sensor.</p>}>
+                      <dl class="ex-view">
+                        <For each={Object.entries(e().view)}>
+                          {([k, v]) => <><dt class="si-key">{k}</dt><dd class="ex-result">{v}</dd></>}
+                        </For>
+                      </dl>
+                    </Show>
+                  </div>
+                  <div class="ex-section">
+                    <h4>Calls</h4>
+                    <Show when={e().calls.length} fallback={<p class="ex-none">No definition was called.</p>}>
+                      <CallTree calls={e().calls} depth={0}/>
+                    </Show>
                   </div>
-                  <Show when={e().calls.length} fallback={<p class="sim-muted ex-none">No definition was called.</p>}>
-                    <CallTree calls={e().calls} depth={0}/>
-                  </Show>
                 </>)}
             </Show>
-          </div>)}
-      </Show>
-
-      <div class="algorithm-body">
-        <Code lines={lines()} marks={mainMarks()}/>
-      </div>
-
-      <Show when={defLines().length > 0}>
-        <div class="algorithm-defs">
-          <div class="defs-title" onClick={() => setDefsOpen(v => !v)} title={defsOpen() ? 'Fold the definitions' : 'Show the definitions'}>
-            {defsOpen() ? '▾' : '▸'} Definitions <span class="sim-muted">({defLines().length}; a click on a function name opens its definition)</span>
           </div>
-          <Show when={defsOpen()}>
-          <For each={defLines()}>
-            {(d) => {
-            const marks = () => defMarks().get(d.name) ?? new Map();
-            const agents = () => [...new Map([...marks().values()].flat().map(m => [m.agent.index, m.agent])).values()];
-            return (<div class={`def${flash() === d.name ? ' flash' : ''}`} ref={el => defElements.set(d.name, el)}>
-                  <Show when={open().has(d.name)} fallback={<div class="algorithm-line def-folded" onClick={() => toggle(d.name)} title="Show the definition">
-                      <span class="line-number">▸</span>
-                      <span class="line-content">
-                        <For each={d.tokens[0]?.tokens ?? []}>{(t) => t.kind ? <span class={`tok-${t.kind}`}>{t.text}</span> : t.text}</For>
-                      </span>
-                      <Show when={agents().length}>
-                        <span class="agent-markers">
-                          <For each={agents()}>{(a) => <span class="agent-marker return-marker" style={{ color: a.color }}>↩ {a.agentId}</span>}</For>
-                        </span>
-                      </Show>
-                    </div>}>
-                    <div class="def-open">
-                      <div class="def-fold" onClick={() => toggle(d.name)} title="Fold">▾ {d.name}</div>
-                      <Code lines={d.tokens} marks={marks()} def={d.name}/>
-                    </div>
-                  </Show>
-                </div>);
-        }}
-          </For>
-          </Show>
-        </div>
-      </Show>
+        </Show>
+      </div>
     </div>);
 }

package/dist/components/BranchPicker.css

@@ -4,93 +4,135 @@
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(2px);
   z-index: 50;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem;
+  animation: bp-fade 0.15s ease-out;
+}
+
+@keyframes bp-fade {
+  from { opacity: 0; }
 }
 
 .bp-window {
   background: var(--sim-surface);
   color: var(--sim-text);
   border: 1px solid var(--sim-border);
-  border-radius: var(--sim-radius);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+  border-radius: 14px;
+  box-shadow: var(--sim-shadow-lg);
   width: min(1100px, 100%);
   max-height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 1rem 1.25rem;
+  overflow: hidden;
 }
 
 .bp-header {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 14px 14px 18px;
+  border-bottom: 1px solid var(--sim-border);
 }
 
-.bp-header h3 {
-  margin: 0;
-  font-size: 1.05rem;
+.bp-header > .sim-svg {
+  margin-top: 2px;
+  color: var(--sim-muted);
 }
 
-.bp-header input {
-  max-width: 18rem;
+.bp-title {
+  min-width: 0;
+}
+
+.bp-header h3 {
   margin: 0;
+  font-size: 15px;
 }
 
 .bp-help {
-  margin: 0.4rem 0 0.75rem;
+  margin: 3px 0 0;
+  font-size: 12.5px;
+  color: var(--sim-muted);
+  max-width: 52rem;
+}
+
+.bp-header input {
+  max-width: 16rem;
 }
 
 .bp-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
+  gap: 12px;
   overflow: auto;
-  padding: 2px;
+  padding: 16px 18px 18px;
+  background: var(--sim-bg);
 }
 
-.sim-app .bp-branch,
-.bp-branch {
+.sim-app .bp-branch {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 0.35rem;
+  align-items: stretch;
+  gap: 8px;
   width: 100%;
-  padding: 0.5rem;
-  background: var(--sim-surface-2);
+  padding: 8px;
+  background: var(--sim-surface);
   color: var(--sim-text);
-  border: 2px solid var(--sim-border);
-  border-radius: 8px;
-  text-align: center;
-  font-size: 0.8rem;
+  border: 1px solid var(--sim-border);
+  border-radius: 10px;
+  text-align: left;
+  font-size: 12.5px;
+  box-shadow: var(--sim-shadow-sm);
+  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
 }
 
-.bp-branch:hover {
+.sim-app .bp-branch:hover {
   border-color: var(--sim-accent);
+  box-shadow: var(--sim-shadow-md);
+  transform: translateY(-1px);
 }
 
-.bp-branch.bp-current {
-  border-color: var(--sim-highlight);
-  background: var(--sim-highlight-soft);
+.sim-app .bp-branch.bp-current {
+  border-color: var(--sim-accent);
+  box-shadow: 0 0 0 3px var(--sim-accent-soft);
 }
 
 .bp-thumb {
-  background: white;
-  border-radius: 6px;
+  align-self: center;
+  background-color: var(--sim-stage);
+  background-image: radial-gradient(var(--sim-stage-dot) 1px, transparent 1.2px);
+  background-size: 14px 14px;
+  border-radius: 7px;
+  border: 1px solid var(--sim-border);
 }
 
 .bp-caption {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.bp-current-tag {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--sim-accent);
+}
+
+.bp-caption .sim-chip {
+  margin-left: auto;
+  height: 20px;
+  font-size: 11px;
 }
 
 .bp-label {
   font-family: var(--sim-mono);
-  font-size: 0.72rem;
+  font-size: 11.5px;
   color: var(--sim-muted);
   word-break: break-word;
 }

package/dist/components/BranchPicker.jsx

@@ -4,6 +4,7 @@
  * pick one.
  */
 import { For, Show, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { Icon } from "./Icon.jsx";
 import "./BranchPicker.css";
 export { distinguishing } from "../sim/branches.js";
 const VERDICT_TEXT = { success: 'success', failure: 'failure', inProgress: 'not yet' };
@@ -40,20 +41,24 @@ export function BranchPicker(props) {
         props.onClose(); }}>
       <div class="bp-window" role="dialog" aria-modal="true" aria-label="Branches">
         <div class="bp-header">
-          <h3>{props.branches.length} branches at this step</h3>
+          <Icon name="branch"/>
+          <div class="bp-title">
+            <h3>{props.branches.length} branches at this step</h3>
+            <p class="bp-help">Each branch is one way the adversary can play this round; only the choices that differ between branches and are not the first option are listed.</p>
+          </div>
+          <span class="sim-spacer"/>
           <Show when={props.branches.length > 8}>
             <input type="search" placeholder="Filter (index or choice)" value={filter()} onInput={e => setFilter(e.currentTarget.value)} aria-label="Filter the branches"/>
           </Show>
-          <span style={{ flex: 1 }}/>
-          <button class="sim-ghost sim-icon" onClick={props.onClose} title="Close (Esc)">✕</button>
+          <button class="sim-ghost sim-icon" onClick={props.onClose} aria-label="Close" title="Close (Esc)"><Icon name="close"/></button>
         </div>
-        <p class="sim-muted bp-help">Each branch is one way the adversary can play this round; only the choices that differ between branches and are not the first option are listed.</p>
         <div class="bp-grid">
           <For each={shown()} fallback={<p class="sim-muted">No branch matches.</p>}>
             {b => (<button class={`bp-branch${b.index === props.current ? ' bp-current' : ''}`} onClick={() => props.onPick(b.index)} title={b.label}>
                 <Show when={props.draw}><Thumb index={b.index}/></Show>
                 <span class="bp-caption">
                   <strong>Branch {b.index}</strong>
+                  <Show when={b.index === props.current}><span class="bp-current-tag">current</span></Show>
                   <Show when={b.verdict}>{v => <span class={`sim-chip sim-${v()}`}>{VERDICT_TEXT[v()]}</span>}</Show>
                 </span>
                 <span class="bp-label">{b.short || b.label || '(no choice)'}</span>