@bramas/simulant-ui 0.1.1 → 0.2.0

package/src/components/AlgorithmViewer.tsx

@@ -4,11 +4,14 @@
  * 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, type JSX } from 'solid-js';
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount, type JSX } from 'solid-js';
 import type { AgentExecutionState, AlgorithmSource, TraceCall } from '@bramas/simulant-core/types/project';
 import { tokenizeAll, type Line } from './highlight';
+import { Icon } from './Icon';
 import './AlgorithmViewer.css';
 
 export type { AgentExecutionState, AlgorithmSource } from '@bramas/simulant-core/types/project';
@@ -16,6 +19,14 @@ export type { AgentExecutionState, AlgorithmSource } from '@bramas/simulant-core
 export interface AlgorithmViewerProps {
   source: AlgorithmSource;
   agents?: AgentExecutionState[];
+  /** Buttons for the header's end (the page's panel controls). */
+  actions?: JSX.Element;
+  /** A press on the header (the page drags the panel from there). */
+  onHeadPointerDown?: (e: PointerEvent) => void;
+  /** The agent selected elsewhere (by name): its cursors are emphasized. */
+  highlighted?: string | null;
+  /** Called with the agent's name when one of its cursors is clicked. */
+  onSelectAgent?: (name: string) => void;
 }
 
 type Mark = { agent: AgentExecutionState; kind: 'at' | 'call' | 'return' };
@@ -74,7 +85,10 @@ export function AlgorithmViewer(props: AlgorithmViewerProps) {
   const [open, setOpen] = createSignal<Set<string>>(new Set());
   // The whole group of definitions is folded at first.
   const [defsOpen, setDefsOpen] = createSignal(false);
-  const [selected, setSelected] = createSignal<number | undefined>();
+  // By name: an agent's index is its place in the configuration, which can change between steps.
+  const [selected, setSelected] = createSignal<string | undefined>();
+  /** The cursor the explanation is anchored to (`data-marker`). */
+  const [anchor, setAnchor] = createSignal<string | undefined>();
   const [flash, setFlash] = createSignal<string | undefined>();
   const defElements = new Map<string, HTMLElement>();
   let flashTimer: ReturnType<typeof setTimeout> | undefined;
@@ -94,7 +108,69 @@ export function AlgorithmViewer(props: AlgorithmViewerProps) {
       (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: Mark, def: string | undefined, line: number) => `${m.kind}-${m.agent.agentId}-${def ?? 'main'}-${line}`;
+  const markerAt = (key: string) => scroller?.querySelector<HTMLElement>(`[data-marker="${CSS.escape(key)}"]`);
+  /** Opens (or closes, from the same cursor) an agent's explanation, under the cursor `key`. */
+  const select = (a: AgentExecutionState, key?: string) => {
+    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: KeyboardEvent) => { 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: HTMLDivElement | undefined;
+  createEffect(() => {
+    mainMarks();
+    queueMicrotask(() => {
+      const line = scroller?.querySelector<HTMLElement>('.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: HTMLDivElement | undefined;
+  let reveal = false;
+  const [place, setPlace] = createSignal<{ top: number; left: number; width: number; arrow: number } | undefined>();
+  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: { lines: Line[]; marks: Map<number, Mark[]>; def?: string }): JSX.Element => (
     <For each={p.lines}>
@@ -120,12 +196,13 @@ export function AlgorithmViewer(props: AlgorithmViewerProps) {
                 <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 }}
+                      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)}
+                      onClick={() => select(m.agent, markerKey(m, p.def, line.number))}
                     >
                       {m.kind === 'at' ? '◀' : m.kind === 'call' ? '◁' : '↩'} {m.agent.agentId}
                     </span>
@@ -168,89 +245,125 @@ export function AlgorithmViewer(props: AlgorithmViewerProps) {
 
   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<number, Mark[]>();
+                  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()} />
+        </Show>
       </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<number, Mark[]>();
-              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>
     </div>
   );
 }

package/src/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/src/components/BranchPicker.tsx

@@ -5,6 +5,7 @@
  */
 import { For, Show, createMemo, createSignal, onCleanup, onMount } from 'solid-js';
 import type { ExecutionStatus } from '@bramas/simulant-core/types/project';
+import { Icon } from './Icon';
 import './BranchPicker.css';
 
 export type Branch = {
@@ -62,14 +63,17 @@ export function BranchPicker(props: BranchPickerProps) {
     <div class="bp-backdrop" onClick={e => { if (e.target === e.currentTarget) 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 => (
@@ -77,6 +81,7 @@ export function BranchPicker(props: BranchPickerProps) {
                 <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>