article: add howpublished to bibtex (+ asg: sync latest, favicon/links)

app/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.astro/
+*.log

app/src/components/Hero.astro

@@ -12,6 +12,8 @@ interface Props {
   affiliation?: string; // legacy single affiliation
   published?: string;
   doi?: string;
+  paperUrl?: string; // e.g. OpenReview forum
+  browserUrl?: string; // interactive dashboard
   pdfProOnly?: boolean; // Gate PDF download to Pro users only
 }
 
@@ -24,6 +26,8 @@ const {
   affiliation,
   published,
   doi,
+  paperUrl,
+  browserUrl,
   pdfProOnly = false,
 } = Astro.props as Props;
 
@@ -177,6 +181,21 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
         </div>
       )
     }
+    {
+      (paperUrl || browserUrl) && (
+        <div class="meta-container-cell meta-container-cell--links">
+          <h3>Links</h3>
+          <p class="hero-links">
+            {paperUrl && (
+              <a class="button" href={paperUrl} target="_blank" rel="noopener noreferrer">Paper</a>
+            )}
+            {browserUrl && (
+              <a class="button" href={browserUrl} target="_blank" rel="noopener noreferrer">Dashboard</a>
+            )}
+          </p>
+        </div>
+      )
+    }
     <!-- {doi && (
       <div class="meta-container-cell">
         <h3>DOI</h3>

app/src/content/chapters/01-opacity.mdx

@@ -28,7 +28,7 @@ Understanding this latent structure matters the moment you deploy. Safety auditi
 Yet current agent analysis works at the level of a single trace. It offers no structural model of the behavior that links one run to the next.
 
 <Wide>
-<HtmlEmbed src="tape-to-fsm.html" title="A trace, read symbol by symbol, drives a finite-state machine" desc="Pick a dataset, then scrub the tape (drag or scroll) or let it play. The read-head advances through the agent's activity tape (left) and lights up the current FSM state and the transition it takes (right). A successful run threads to submit; a stuck run loops and never reaches it. These are representative traces; the full set of twelve datasets with their real extracted FSMs is in the [live dashboard](https://seongland.com/article/asg/browser)." />
+<HtmlEmbed src="tape-to-fsm.html" title="A trace, read symbol by symbol, drives a finite-state machine" desc="Pick a dataset, then scrub the tape (drag or scroll) or let it play. The read-head advances through the agent's activity tape (left) and lights up the current FSM state and the transition it takes (right). A successful run threads to submit; a stuck run loops and never reaches it. These are representative traces; the full set of twelve datasets with their real extracted FSMs is in the live dashboard." />
 </Wide>
 
 
@@ -66,5 +66,5 @@ Every dataset replays held-out traces at fitness of at least 0.997.
 The three largest source datasets are subsampled to a fixed slice: SWE-agent uses 2,000 of the 80,036 available trajectories, Mind2Web 500 of 2,350, and AgentNet 5,000 from the OpenCUA Ubuntu subset. The other nine datasets are used in full.
 
 <Note variant="info" title="Every case is in the live dashboard">
-Every figure in this article is a fixed snapshot; **every dataset and every case is live** in the [interactive dashboard](https://seongland.com/article/asg/browser), which renders all twelve datasets straight from the experiment outputs — the FSMs, the failure predictor, the runtime monitor, and more. That browser is the root; each link in this article (`…/browser?tab=…`) just opens it on the matching view.
+Every figure in this article is a fixed snapshot; **every dataset and every case is live** in the [interactive dashboard](https://seongland.com/article/asg/browser), which renders all twelve datasets straight from the experiment outputs — the FSMs, the failure predictor, the runtime monitor, and more.
 </Note>

app/src/content/embeds/system-overview.html

@@ -1,10 +1,10 @@
 <!-- System / data-flow diagram. LEFT->RIGHT: how the machine is BUILT (construction,
-     offline): raw traces -> phi abstraction -> prefix tree -> one merge -> minimal FSM.
+     offline): raw traces -> phi abstraction -> prefix tree -> one merge -> automaton.
      RIGHT: how the machine is USED at runtime by four consumers (what each reads from it).
      No result metrics — this shows data flow and execution flow, not numbers.
      Self-contained SVG; themed via the article's --asg-* CSS variables (dark-mode safe). -->
 <div class="asg-sys" id="asg-sys">
-  <svg viewBox="0 0 960 472" role="img"
+  <svg viewBox="0 0 960 460" role="img"
        aria-label="Construction pipeline: agent traces are abstracted by phi into activity sequences, accumulated into a prefix tree, and merged once into a single automaton. At runtime the same machine is read by four consumers: workflow memory, next-step prediction, failure prediction, and runtime monitoring.">
 
     <defs>
@@ -15,101 +15,101 @@
 
     <!-- ===================== connectors (behind boxes) ===================== -->
     <g class="sys-links" fill="none">
-      <path class="lnk" d="M154 240 H172" marker-end="url(#sys-arrow)"/>
-      <path class="lnk" d="M282 240 H300" marker-end="url(#sys-arrow)"/>
-      <path class="lnk lnk-key" d="M426 240 H468" marker-end="url(#sys-arrow)"/>
+      <path class="lnk" d="M150 226 H172" marker-end="url(#sys-arrow)"/>
+      <path class="lnk" d="M276 226 H300" marker-end="url(#sys-arrow)"/>
+      <path class="lnk lnk-key" d="M416 226 H466" marker-end="url(#sys-arrow)"/>
       <!-- fan-out from FSM hub to four consumers -->
-      <path class="spoke" data-task="0" d="M626 218 C666 218 650 66 690 66"/>
-      <path class="spoke" data-task="1" d="M626 232 C666 232 650 174 690 174"/>
-      <path class="spoke" data-task="2" d="M626 252 C666 252 650 282 690 282"/>
-      <path class="spoke" data-task="3" d="M626 266 C666 266 650 390 690 390"/>
+      <path class="spoke" data-task="0" d="M622 200 C648 200 642 54 664 54"/>
+      <path class="spoke" data-task="1" d="M622 216 C648 216 642 166 664 166"/>
+      <path class="spoke" data-task="2" d="M622 236 C648 236 642 278 664 278"/>
+      <path class="spoke" data-task="3" d="M622 252 C648 252 642 390 664 390"/>
     </g>
 
     <!-- operation labels above the construction arrows (clear of the box band) -->
-    <text class="op-label" x="291" y="192" text-anchor="middle">build trie</text>
-    <text class="op-label op-key" x="421" y="192" text-anchor="middle">merge states</text>
+    <text class="op-label" x="288" y="181" text-anchor="middle">build trie</text>
+    <text class="op-label op-key" x="430" y="181" text-anchor="middle">merge states</text>
 
     <!-- ===================== construction spine ===================== -->
 
     <!-- agent traces (input data) -->
     <g class="node node-src" data-stage="src">
-      <rect x="14" y="172" width="140" height="140" rx="11"/>
-      <text class="n-title" x="84" y="200" text-anchor="middle">Agent traces</text>
-      <text class="n-sub" x="84" y="221" text-anchor="middle">messages · tool calls</text>
+      <rect x="14" y="170" width="136" height="112" rx="10"/>
+      <text class="n-title" x="82" y="192" text-anchor="middle">Agent traces</text>
+      <text class="n-sub" x="82" y="208" text-anchor="middle">messages · tool calls</text>
       <g class="chips">
-        <rect x="26"  y="234" width="56" height="22" rx="5" class="chip"/>
-        <text class="chip-t" x="54"  y="249" text-anchor="middle">coding</text>
-        <rect x="88"  y="234" width="56" height="22" rx="5" class="chip"/>
-        <text class="chip-t" x="116" y="249" text-anchor="middle">web</text>
-        <rect x="26"  y="262" width="56" height="22" rx="5" class="chip"/>
-        <text class="chip-t" x="54"  y="277" text-anchor="middle">GUI</text>
-        <rect x="88"  y="262" width="56" height="22" rx="5" class="chip"/>
-        <text class="chip-t" x="116" y="277" text-anchor="middle">telecom</text>
+        <rect x="28"  y="220" width="50" height="17" rx="4" class="chip"/>
+        <text class="chip-t" x="53"  y="232" text-anchor="middle">coding</text>
+        <rect x="86"  y="220" width="50" height="17" rx="4" class="chip"/>
+        <text class="chip-t" x="111" y="232" text-anchor="middle">web</text>
+        <rect x="28"  y="241" width="50" height="17" rx="4" class="chip"/>
+        <text class="chip-t" x="53"  y="253" text-anchor="middle">GUI</text>
+        <rect x="86"  y="241" width="50" height="17" rx="4" class="chip"/>
+        <text class="chip-t" x="111" y="253" text-anchor="middle">telecom</text>
       </g>
     </g>
 
     <!-- phi: the one transform (message -> symbol) -->
     <g class="node node-phi" data-stage="phi">
-      <rect x="172" y="202" width="110" height="78" rx="11"/>
-      <text class="n-glyph" x="227" y="238" text-anchor="middle">&#966;</text>
-      <text class="n-sub" x="227" y="259" text-anchor="middle">message &#8594; symbol</text>
-      <text class="n-foot" x="227" y="273" text-anchor="middle">deterministic</text>
+      <rect x="174" y="194" width="102" height="64" rx="10"/>
+      <text class="n-glyph" x="225" y="220" text-anchor="middle">&#966;</text>
+      <text class="n-sub" x="225" y="238" text-anchor="middle">message &#8594; symbol</text>
+      <text class="n-foot" x="225" y="250" text-anchor="middle">deterministic</text>
     </g>
 
     <!-- prefix tree (intermediate data structure) -->
     <g class="node node-pta" data-stage="pta">
-      <rect x="300" y="202" width="126" height="78" rx="11"/>
-      <text class="n-title" x="363" y="230" text-anchor="middle">Prefix tree</text>
-      <text class="n-sub" x="363" y="250" text-anchor="middle">PTA</text>
-      <text class="n-foot" x="363" y="268" text-anchor="middle">branch per trace</text>
+      <rect x="302" y="194" width="114" height="64" rx="10"/>
+      <text class="n-title" x="359" y="218" text-anchor="middle">Prefix tree</text>
+      <text class="n-sub" x="359" y="234" text-anchor="middle">PTA</text>
+      <text class="n-foot" x="359" y="248" text-anchor="middle">one branch per trace</text>
     </g>
 
     <!-- FSM hub (the artifact every consumer reads) -->
     <g class="node node-fsm" data-stage="fsm">
-      <rect x="470" y="164" width="156" height="156" rx="15"/>
-      <text class="hub-eyebrow" x="548" y="193" text-anchor="middle">ONE PER AGENT</text>
-      <text class="hub-title" x="548" y="220" text-anchor="middle">Automaton</text>
+      <rect x="470" y="158" width="152" height="136" rx="14"/>
+      <text class="hub-eyebrow" x="546" y="182" text-anchor="middle">ONE PER AGENT</text>
+      <text class="hub-title" x="546" y="206" text-anchor="middle">Automaton</text>
       <g class="hub-mini">
-        <circle cx="510" cy="248" r="9"/>
-        <circle cx="548" cy="265" r="9"/>
-        <circle cx="586" cy="248" r="9" class="hub-mini-accept"/>
-        <path d="M518 250 L540 262" class="hub-edge"/>
-        <path d="M556 262 L578 250" class="hub-edge"/>
-        <path d="M518 245 L578 245" class="hub-edge"/>
+        <circle cx="508" cy="232" r="8"/>
+        <circle cx="546" cy="248" r="8"/>
+        <circle cx="584" cy="232" r="8" class="hub-mini-accept"/>
+        <path d="M515 234 L539 245" class="hub-edge"/>
+        <path d="M553 245 L577 234" class="hub-edge"/>
+        <path d="M516 229 C530 218 562 218 576 229" class="hub-edge"/>
       </g>
-      <text class="hub-foot" x="548" y="296" text-anchor="middle">states +</text>
-      <text class="hub-foot" x="548" y="309" text-anchor="middle">transition probabilities</text>
+      <text class="hub-foot" x="546" y="274" text-anchor="middle">states +</text>
+      <text class="hub-foot" x="546" y="286" text-anchor="middle">transition probabilities</text>
     </g>
 
     <!-- ===================== four runtime consumers ===================== -->
     <g class="task" data-task="0">
-      <rect x="690" y="24" width="258" height="84" rx="11"/>
-      <text class="t-title" x="708" y="56">Workflow memory</text>
-      <text class="t-sub"   x="708" y="78">state &#8594; likely next actions,</text>
-      <text class="t-sub"   x="708" y="94">injected into the agent's prompt</text>
+      <rect x="664" y="8" width="284" height="92" rx="11"/>
+      <text class="t-title" x="684" y="40">Workflow memory</text>
+      <text class="t-sub"   x="684" y="62">state &#8594; likely next actions,</text>
+      <text class="t-sub"   x="684" y="80">injected into the agent's prompt</text>
     </g>
     <g class="task" data-task="1">
-      <rect x="690" y="132" width="258" height="84" rx="11"/>
-      <text class="t-title" x="708" y="164">Next-step prediction</text>
-      <text class="t-sub"   x="708" y="186">reads P(next action | current</text>
-      <text class="t-sub"   x="708" y="202">state) off the machine</text>
+      <rect x="664" y="120" width="284" height="92" rx="11"/>
+      <text class="t-title" x="684" y="152">Next-step prediction</text>
+      <text class="t-sub"   x="684" y="174">reads P(next action | current</text>
+      <text class="t-sub"   x="684" y="192">state) off the machine</text>
     </g>
     <g class="task" data-task="2">
-      <rect x="690" y="240" width="258" height="84" rx="11"/>
-      <text class="t-title" x="708" y="272">Failure prediction</text>
-      <text class="t-sub"   x="708" y="294">replay a run &#8594; per-state</text>
-      <text class="t-sub"   x="708" y="310">features &#8594; classifier</text>
+      <rect x="664" y="232" width="284" height="92" rx="11"/>
+      <text class="t-title" x="684" y="264">Failure prediction</text>
+      <text class="t-sub"   x="684" y="286">replay a run &#8594; per-state</text>
+      <text class="t-sub"   x="684" y="304">features &#8594; classifier</text>
     </g>
     <g class="task" data-task="3">
-      <rect x="690" y="348" width="258" height="84" rx="11"/>
-      <text class="t-title" x="708" y="380">Runtime monitor</text>
-      <text class="t-sub"   x="708" y="402">online conformance check,</text>
-      <text class="t-sub"   x="708" y="418">flags drift mid-run</text>
+      <rect x="664" y="344" width="284" height="92" rx="11"/>
+      <text class="t-title" x="684" y="376">Runtime monitor</text>
+      <text class="t-sub"   x="684" y="398">online conformance check,</text>
+      <text class="t-sub"   x="684" y="416">flags drift mid-run</text>
     </g>
 
     <!-- phase captions -->
-    <text class="phase" x="305" y="340" text-anchor="middle">CONSTRUCTION &#183; built once, offline</text>
-    <text class="phase" x="819" y="456" text-anchor="middle">USED AT RUNTIME &#183; per execution</text>
+    <text class="phase" x="300" y="312" text-anchor="middle">CONSTRUCTION &#183; built once, offline</text>
+    <text class="phase" x="806" y="452" text-anchor="middle">USED AT RUNTIME &#183; per execution</text>
   </svg>
 </div>
 
@@ -132,22 +132,22 @@
 
   /* text */
   .asg-sys text { font-family: inherit; }
-  .asg-sys .n-title { font-size: 15px; font-weight: 650; fill: var(--text-color, #1a1a2e); }
-  .asg-sys .n-sub   { font-size: 11.5px; fill: var(--muted-color, rgba(0,0,0,0.55)); }
-  .asg-sys .n-foot  { font-size: 10.5px; fill: var(--muted-color, rgba(0,0,0,0.5)); font-family: var(--font-mono, ui-monospace, monospace); }
-  .asg-sys .n-glyph { font-size: 25px; font-style: italic; font-weight: 600; fill: var(--asg-ours, #3d5a80); }
+  .asg-sys .n-title { font-size: 13px; font-weight: 650; fill: var(--text-color, #1a1a2e); }
+  .asg-sys .n-sub   { font-size: 10px; fill: var(--muted-color, rgba(0,0,0,0.55)); }
+  .asg-sys .n-foot  { font-size: 9px; fill: var(--muted-color, rgba(0,0,0,0.5)); font-family: var(--font-mono, ui-monospace, monospace); }
+  .asg-sys .n-glyph { font-size: 23px; font-style: italic; font-weight: 600; fill: var(--asg-ours, #3d5a80); }
 
   .asg-sys .chip { fill: color-mix(in srgb, var(--asg-ours, #3d5a80) 12%, transparent); stroke: none; }
-  .asg-sys .chip-t { font-size: 10.5px; fill: var(--text-color, #1a1a2e); font-family: var(--font-mono, ui-monospace, monospace); }
+  .asg-sys .chip-t { font-size: 9px; fill: var(--text-color, #1a1a2e); font-family: var(--font-mono, ui-monospace, monospace); }
 
   /* operation labels on construction arrows */
-  .asg-sys .op-label { font-size: 11px; fill: var(--muted-color, rgba(0,0,0,0.6)); font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .3px; }
+  .asg-sys .op-label { font-size: 9px; fill: var(--muted-color, rgba(0,0,0,0.6)); font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .3px; }
   .asg-sys .op-key { fill: var(--asg-ours, #3d5a80); font-weight: 600; }
 
   /* FSM hub */
-  .asg-sys .hub-eyebrow { font-size: 11px; letter-spacing: 1.6px; fill: var(--asg-ours, #3d5a80); font-weight: 600; }
-  .asg-sys .hub-title   { font-size: 20px; font-weight: 700; fill: var(--text-color, #1a1a2e); }
-  .asg-sys .hub-foot    { font-size: 10.5px; fill: var(--muted-color, rgba(0,0,0,0.6)); font-family: var(--font-mono, ui-monospace, monospace); }
+  .asg-sys .hub-eyebrow { font-size: 9px; letter-spacing: 1.6px; fill: var(--asg-ours, #3d5a80); font-weight: 600; }
+  .asg-sys .hub-title   { font-size: 16px; font-weight: 700; fill: var(--text-color, #1a1a2e); }
+  .asg-sys .hub-foot    { font-size: 9px; fill: var(--muted-color, rgba(0,0,0,0.6)); font-family: var(--font-mono, ui-monospace, monospace); }
   .asg-sys .hub-mini circle { fill: var(--page-bg, #fff); stroke: var(--asg-ours, #3d5a80); stroke-width: 1.4; }
   .asg-sys .hub-mini-accept { fill: color-mix(in srgb, var(--asg-ours, #3d5a80) 22%, var(--page-bg, #fff)) !important; }
   .asg-sys .hub-edge { stroke: var(--asg-ours, #3d5a80); stroke-width: 1.2; fill: none; opacity: .7; }
@@ -169,11 +169,11 @@
     stroke-width: 1.2;
     transition: stroke .2s, fill .2s;
   }
-  .asg-sys .t-title { font-size: 15px; font-weight: 640; fill: var(--text-color, #1a1a2e); }
-  .asg-sys .t-sub   { font-size: 12px; fill: var(--muted-color, rgba(0,0,0,0.6)); }
+  .asg-sys .t-title { font-size: 16px; font-weight: 640; fill: var(--text-color, #1a1a2e); }
+  .asg-sys .t-sub   { font-size: 13px; fill: var(--muted-color, rgba(0,0,0,0.6)); }
 
   /* phase captions */
-  .asg-sys .phase { font-size: 11px; letter-spacing: 1.2px; fill: var(--muted-color, rgba(0,0,0,0.45)); font-family: var(--font-mono, ui-monospace, monospace); }
+  .asg-sys .phase { font-size: 8.5px; letter-spacing: 1.2px; fill: var(--muted-color, rgba(0,0,0,0.45)); font-family: var(--font-mono, ui-monospace, monospace); }
 
   /* hover: light up a spoke + its consumer card */
   .asg-sys .task.is-hot rect { stroke: var(--asg-ours, #3d5a80); fill: color-mix(in srgb, var(--asg-ours, #3d5a80) 7%, var(--page-bg, #fff)); }

app/src/pages/index.astro

@@ -157,7 +157,8 @@ const bibtex = `@inproceedings{cho${year ?? 2026}automata,
   author={${authorsBib}},
   booktitle={${venue}},
   year={${year ?? 2026}},
-  url={${openreviewUrl}}
+  url={${openreviewUrl}},
+  howpublished={\\url{https://seongland.com/article/asg}}
 }`;
 const envCollapse = false;
 const tableOfContentAutoCollapse = Boolean(
@@ -264,6 +265,8 @@ const licence =
       affiliation={articleFM?.affiliation}
       published={articleFM?.published}
       doi={doi}
+      paperUrl={openreviewUrl}
+      browserUrl="https://seongland.com/article/asg/browser"
       pdfProOnly={articleFM?.pdfProOnly}
     />