active_durable 0.5.0

data/app/views/layouts/active_durable/application.html.erb

@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= content_for?(:title) ? "#{yield(:title)} · ActiveDurable" : "ActiveDurable" %></title>
+  <%= csrf_meta_tags %>
+  <style nonce="<%= content_security_policy_nonce %>">
+    /* Layout: a fixed rail (statuses, recipes) and a full-width stage. Sagas are drawn as blocks wired
+       together; every animation encodes a state (running, waiting, sleeping, failed, undone). */
+    :root {
+      --paper: #f2f4fa; --surface: #ffffff; --sunken: #eaeef7;
+      --ink: #141b33; --soft: #56607e; --line: #d3daea;
+      --jade: #12936a; --jade-bg: #daf3e9; --amber: #a86f00; --amber-bg: #fcefcc;
+      --cobalt: #2c5fd6; --cobalt-bg: #e1e9fc; --ruby: #cc1f3d; --ruby-bg: #fbe1e6;
+      --violet: #6b44c8; --violet-bg: #ece5fb; --slate: #6b7593; --slate-bg: #e6e9f1;
+      --shade: rgba(20, 27, 51, .28);
+      --f-round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Nunito", "Varela Round", system-ui, sans-serif;
+      --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+      --f-code: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --paper: #0e1424; --surface: #151d33; --sunken: #10172a;
+        --ink: #e8ecf8; --soft: #9aa5c4; --line: #26304d;
+        --jade: #3dd6a0; --jade-bg: #0f3329; --amber: #f2b641; --amber-bg: #3a2d10;
+        --cobalt: #7ea6ff; --cobalt-bg: #182649; --ruby: #ff5c74; --ruby-bg: #3b1522;
+        --violet: #b08cff; --violet-bg: #281f48; --slate: #8b95b3; --slate-bg: #1d2540;
+        --shade: rgba(0, 0, 0, .45);
+        color-scheme: dark;
+      }
+    }
+    .tone-good, .st-completed { --c: var(--jade); --cb: var(--jade-bg); }
+    .tone-wait, .st-retrying, .st-waiting, .st-sleeping { --c: var(--amber); --cb: var(--amber-bg); }
+    .tone-busy, .st-running, .st-next { --c: var(--cobalt); --cb: var(--cobalt-bg); }
+    .tone-bad, .st-failed { --c: var(--ruby); --cb: var(--ruby-bg); }
+    .tone-undo, .st-undone { --c: var(--violet); --cb: var(--violet-bg); }
+    .tone-muted { --c: var(--slate); --cb: var(--slate-bg); }
+
+    * { box-sizing: border-box; }
+    html, body { min-height: 100%; }
+    body {
+      margin: 0; color: var(--ink); font: 15px/1.5 var(--f-body);
+      background-color: var(--paper);
+    }
+    a { color: var(--cobalt); text-underline-offset: 3px; }
+    :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: 6px; }
+    h1, h2, h3 { font-family: var(--f-round); margin: 0; line-height: 1.15; text-wrap: balance; }
+    h2 { font-size: 1.1rem; }
+    p { margin: 0; }
+    .muted { color: var(--soft); }
+    code, .json, .mono { font-family: var(--f-code); font-size: .82rem; overflow-wrap: anywhere; }
+
+    /* ---------- shell ---------- */
+    .shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
+    .rail {
+      position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 22px 16px;
+      display: flex; flex-direction: column; gap: 26px; border-right: 1px solid var(--line);
+      background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(8px);
+    }
+    .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
+             font: 800 1.15rem/1 var(--f-round); }
+    .logo { display: grid; grid-template-columns: repeat(2, 11px); gap: 3px; }
+    .logo i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); box-shadow: 0 2px 0 var(--shade); }
+    .logo i:nth-child(1) { --c: var(--jade); } .logo i:nth-child(2) { --c: var(--amber); }
+    .logo i:nth-child(3) { --c: var(--cobalt); } .logo i:nth-child(4) { --c: var(--ruby); }
+    .brand:hover .logo i { animation: hop .5s ease both; }
+    .brand:hover .logo i:nth-child(2) { animation-delay: .06s; } .brand:hover .logo i:nth-child(3) { animation-delay: .12s; }
+    .brand:hover .logo i:nth-child(4) { animation-delay: .18s; }
+    .rail h2 { font-size: .85rem; color: var(--soft); font-weight: 700; margin-bottom: 8px; }
+    .rail nav { display: flex; flex-direction: column; gap: 2px; }
+    .rail-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--ink);
+                 text-decoration: none; font-weight: 600; }
+    .rail-link:hover { background: var(--sunken); }
+    .rail-link[aria-current="page"] { background: var(--cb, var(--sunken)); color: var(--c, var(--ink)); }
+    .rail-link .n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--soft); font-weight: 700; }
+    .rail-link .chip { width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--slate)); box-shadow: 0 2px 0 var(--shade); flex: none; }
+    .rail-foot { margin-top: auto; color: var(--soft); font-size: .82rem; }
+
+    .stage { padding: 26px 34px 56px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
+    .flash { padding: 12px 16px; border-radius: 12px; font-weight: 600; animation: rise .35s ease both; }
+    .flash.notice { background: var(--jade-bg); color: var(--jade); }
+    .flash.alert { background: var(--ruby-bg); color: var(--ruby); }
+
+    /* ---------- headings and tools ---------- */
+    .stage-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
+    .stage-head h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.01em; }
+    .lede { color: var(--soft); font-size: 1.02rem; margin-top: 6px; }
+    .tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+    input, select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
+                    background: var(--surface); color: var(--ink); min-width: 0; }
+    button, .button { font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line);
+                      background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
+    button:hover { border-color: var(--soft); }
+    button.primary { background: var(--cobalt); border-color: var(--cobalt); color: #fff; box-shadow: 0 3px 0 var(--shade); }
+    button.danger { background: var(--ruby); border-color: var(--ruby); color: #fff; box-shadow: 0 3px 0 var(--shade); }
+    button.primary:active, button.danger:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shade); }
+    form.inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
+    .live { display: inline-flex; align-items: center; gap: 8px; }
+    .live .led { width: 9px; height: 9px; border-radius: 50%; background: var(--slate); }
+    .live[aria-pressed="true"] { border-color: var(--jade); color: var(--jade); }
+    .live[aria-pressed="true"] .led { background: var(--jade); animation: breathe 1.6s ease-in-out infinite; }
+    .live-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--jade); width: 0; z-index: 10; }
+    .live-bar.run { animation: fill var(--cycle, 5s) linear forwards; }
+
+    /* ---------- the list ---------- */
+    .sheet { background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); border-radius: 16px;
+             overflow-x: auto; }
+    table { border-collapse: collapse; width: 100%; font-size: .92rem; }
+    th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
+    th { color: var(--soft); font-weight: 700; font-size: .82rem; background: var(--sunken); white-space: nowrap; }
+    tbody tr:last-child td { border-bottom: 0; }
+    tbody tr { transition: background-color .2s; }
+    tbody tr:hover { background: var(--sunken); }
+    tr.changed { animation: rowflash 1.8s ease; }
+    .exec-link { font: 700 .95rem/1.2 var(--f-code); white-space: nowrap; text-decoration: none; color: var(--ink); }
+    .exec-link:hover { text-decoration: underline; }
+    .recipe { display: block; color: var(--soft); font-size: .82rem; margin-top: 2px; }
+    .problem { color: var(--ruby); max-width: 34ch; }
+    .when { white-space: nowrap; font-variant-numeric: tabular-nums; }
+    .status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px;
+              background: var(--cb); color: var(--c); font-weight: 700; font-size: .82rem; white-space: nowrap; }
+    .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
+    .status.tone-busy .dot, .status.tone-bad .dot { animation: breathe 1.4s ease-in-out infinite; }
+    .status.tone-wait .dot { animation: breathe 2.6s ease-in-out infinite; }
+    .pill { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
+            background: var(--sunken); color: var(--soft); white-space: nowrap; }
+    .pill-good { background: var(--jade-bg); color: var(--jade); } .pill-bad { background: var(--ruby-bg); color: var(--ruby); }
+    .pill-wait { background: var(--amber-bg); color: var(--amber); } .pill-busy { background: var(--cobalt-bg); color: var(--cobalt); }
+    .pill-undo { background: var(--violet-bg); color: var(--violet); }
+    .pager { display: flex; gap: 16px; }
+    .empty { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
+
+    /* mini track: one small block per step */
+    .mini { display: flex; align-items: center; gap: 5px; min-height: 26px; }
+    .mini .b { width: 18px; height: 18px; border-radius: 5px; background: var(--cb); border: 2px solid var(--c, var(--slate));
+               box-shadow: 0 2px 0 var(--shade); flex: none; animation: pop .35s cubic-bezier(.2, 1.6, .4, 1) both;
+               animation-delay: calc(var(--i, 0) * 45ms); }
+    .mini .b.st-completed { background: var(--c); }
+    .mini .b.k-pivot { transform: rotate(45deg) scale(.86); animation-name: pop-pivot; }
+    .mini .b.st-failed { animation: pop .35s both, shake .5s .5s ease 2; }
+    .mini .b.st-undone { background: repeating-linear-gradient(135deg, var(--cb) 0 3px, var(--c) 3px 5px); }
+    .mini .b.st-next { border-style: dashed; background: transparent; animation: pop .35s both, beat 1.2s ease-in-out infinite; }
+    .mini .b.st-retrying, .mini .b.st-sleeping { animation: pop .35s both, beat 2.2s ease-in-out infinite; }
+    .mini .b.st-waiting { animation: pop .35s both, ping-small 2s ease-out infinite; }
+    .mini .stack { display: flex; flex-direction: column; gap: 2px; }
+    .mini .stack .b { width: 18px; height: 7px; border-radius: 2px; border-width: 1.5px; box-shadow: none; }
+    .mini .more { font-size: .78rem; color: var(--soft); font-weight: 700; }
+    .no-entrance .b, .no-entrance .block, .no-entrance .wire { animation-delay: 0s !important; animation-duration: .01s !important; }
+
+    /* ---------- one execution ---------- */
+    .crumbs { color: var(--ink); font-size: .9rem; font-weight: 600; }
+    .hero { display: flex; align-items: center; gap: 22px; padding: 22px 24px; border-radius: 20px; flex-wrap: wrap;
+            background: linear-gradient(120deg, var(--cb), color-mix(in srgb, var(--surface) 90%, transparent) 70%);
+            border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); }
+    .hero h1 { font: 800 clamp(1.5rem, 3vw, 2.3rem)/1.1 var(--f-code); overflow-wrap: anywhere; }
+    .hero .sub { color: var(--soft); margin-top: 6px; }
+    .hero-main { flex: 1 1 320px; min-width: 0; }
+    .badge { font: 800 1rem/1 var(--f-round); color: var(--c); padding: 10px 16px; border-radius: 999px;
+             background: var(--surface); border: 2px solid var(--c); white-space: nowrap; }
+    .beacon { width: 54px; height: 54px; border-radius: 16px; background: var(--c); position: relative; flex: none;
+              box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 55%, #000); }
+    .hero.tone-bad .beacon { animation: alarm 1.6s ease-in-out infinite; }
+    .hero.tone-busy .beacon { animation: beat 1.3s ease-in-out infinite; }
+    .hero.tone-wait .beacon { animation: float 3s ease-in-out infinite; }
+    .hero.tone-good .beacon { animation: settle .7s cubic-bezier(.2, 1.6, .4, 1) both; }
+    .hero.tone-undo .beacon { animation: rewind 2.4s ease-in-out infinite; }
+
+    .problem-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px;
+                    background: var(--ruby-bg); color: var(--ruby); border: 1px solid color-mix(in srgb, var(--ruby) 35%, transparent); }
+    .problem-card strong { font: 700 1.05rem/1.4 var(--f-round); }
+    .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+    .actions .note { color: var(--soft); font-size: .88rem; flex-basis: 100%; }
+
+    /* the track: big blocks wired together */
+    .board { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: 20px;
+             padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 22px; }
+    .board-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
+    .track-scroll { overflow-x: auto; padding: 6px 4px 18px; }
+    .track { display: flex; align-items: center; width: 100%; }
+    .block { position: relative; flex: 1 1 0; min-width: 158px; max-width: 300px; min-height: 124px; padding: 14px 14px 12px; border-radius: 16px;
+             background: var(--cb, var(--slate-bg)); border: 2px solid var(--c, var(--slate)); --c2: color-mix(in srgb, var(--c, var(--slate)) 55%, #000);
+             box-shadow: 0 7px 0 var(--c2); display: flex; flex-direction: column; gap: 4px;
+             animation: drop .55s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
+    .block .top { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--soft); }
+    .block .kind { font-weight: 700; }
+    .block .no { font: 800 .9rem/1 var(--f-round); color: var(--c, var(--soft)); }
+    .block h3 { font-size: 1.05rem; overflow-wrap: break-word; }
+    .block .state { font-weight: 700; color: var(--c, var(--soft)); font-size: .88rem; }
+    .block .meta { color: var(--soft); font-size: .8rem; }
+    .block .peek { font: .74rem/1.3 var(--f-code); color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .block.st-completed { --cb: color-mix(in srgb, var(--jade-bg) 85%, var(--surface)); }
+    .block.k-pivot { border-width: 3px; }
+    .block.k-pivot .kind { color: var(--amber); }
+    .block.st-failed { animation: drop .55s both, shake .5s .7s ease 2; box-shadow: 0 7px 0 var(--c2), 0 0 0 6px color-mix(in srgb, var(--ruby) 18%, transparent); }
+    .block.st-undone { background: repeating-linear-gradient(135deg, var(--violet-bg) 0 10px, color-mix(in srgb, var(--violet) 22%, var(--violet-bg)) 10px 20px); }
+    .block.st-undone h3 { text-decoration: line-through; text-decoration-thickness: 2px; }
+    .block.st-next { background: transparent; border-style: dashed; box-shadow: none; animation: drop .55s both, beat 1.4s ease-in-out infinite; }
+    .block.st-retrying { animation: drop .55s both, beat 2.4s ease-in-out infinite; }
+    .block.st-running { animation: drop .55s both, beat 1.2s ease-in-out infinite; }
+    .block .radar, .block .radar::after { position: absolute; right: 12px; bottom: 12px; width: 14px; height: 14px; border-radius: 50%;
+                                          border: 2px solid var(--amber); }
+    .block .radar::after { content: ""; right: -2px; bottom: -2px; animation: ping 1.8s ease-out infinite; }
+    .block .ring { position: absolute; right: 12px; bottom: 12px; width: 22px; height: 22px; border-radius: 50%;
+                   background: conic-gradient(var(--amber) calc(var(--p, 0) * 1turn), color-mix(in srgb, var(--amber) 20%, transparent) 0);
+                   -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
+    .block .spin { position: absolute; right: 12px; bottom: 12px; width: 18px; height: 18px; border-radius: 50%;
+                   border: 3px solid color-mix(in srgb, var(--amber) 25%, transparent); border-top-color: var(--amber);
+                   animation: spin 1.1s linear infinite; }
+    .block.k-parallel { flex-grow: 1.4; min-width: 200px; }
+    .branches { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
+    .branch { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; }
+    .branch i { width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--c, var(--slate)); background: var(--cb); flex: none; }
+    .branch i.st-completed { background: var(--c); }
+    .branch i.st-retrying, .branch i.st-running { animation: beat 1.4s ease-in-out infinite; }
+
+    .wire { flex: 0 1 46px; min-width: 22px; height: 6px; border-radius: 3px; position: relative;
+            background: repeating-linear-gradient(90deg, var(--line) 0 9px, transparent 9px 15px);
+            animation: grow .4s ease both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); transform-origin: left; }
+    .wire.lit { background: repeating-linear-gradient(90deg, var(--jade) 0 9px, transparent 9px 15px); background-size: 30px 6px;
+                animation: grow .4s ease both, flow .9s linear infinite; animation-delay: calc(var(--i, 0) * 90ms + 60ms), 0s; }
+    .wire.lit.to-active { background-image: repeating-linear-gradient(90deg, var(--cobalt) 0 9px, transparent 9px 15px); }
+    .wire.back { background: repeating-linear-gradient(90deg, var(--violet) 0 9px, transparent 9px 15px); background-size: 30px 6px;
+                 animation: grow .4s ease both, flow .9s linear infinite reverse; animation-delay: calc(var(--i, 0) * 90ms + 60ms), 0s; }
+    .gate { flex: none; align-self: stretch; width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center;
+            gap: 6px; position: relative; animation: rise .5s ease both; animation-delay: calc(var(--i, 0) * 90ms); }
+    .gate::before { content: ""; width: 4px; flex: 1; min-height: 70px; border-radius: 2px;
+                    background: repeating-linear-gradient(180deg, var(--amber) 0 8px, transparent 8px 13px); }
+    .gate span { font: 700 .72rem/1.2 var(--f-round); color: var(--amber); text-align: center; }
+
+    .undo-lane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+    .undo-lane .label { color: var(--violet); font-weight: 700; margin-right: 4px; }
+    .undo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-weight: 700; font-size: .85rem;
+                 color: var(--violet); background: repeating-linear-gradient(135deg, var(--violet-bg) 0 8px, color-mix(in srgb, var(--violet) 18%, var(--violet-bg)) 8px 16px);
+                 border: 2px solid var(--violet); animation: slide-back .5s ease both; animation-delay: calc(var(--i, 0) * 120ms + .4s); }
+    .undo-chip.failed { color: var(--ruby); border-color: var(--ruby); background: var(--ruby-bg); }
+    .undo-lane .arrow { color: var(--violet); font-weight: 800; }
+
+    .details { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
+    .panel { background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); border-radius: 16px;
+             padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+    .side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
+    .panel table { font-size: .86rem; }
+    .panel td, .panel th { padding: 9px 10px; vertical-align: top; }
+    .json-block { font: .8rem/1.5 var(--f-code); background: var(--sunken); padding: 12px; border-radius: 10px; margin: 0; overflow-x: auto; }
+    .k { font-size: .76rem; color: var(--soft); font-weight: 700; margin-left: 4px; }
+    code.ticket { white-space: nowrap; overflow-wrap: normal; }
+    td.result { min-width: 20ch; }
+    .k-pivot-word { color: var(--amber); }
+    .error { color: var(--ruby); }
+    dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; }
+    dl.facts dt { color: var(--soft); } dl.facts dd { margin: 0; min-width: 0; }
+
+    /* ---------- motion ---------- */
+    @keyframes drop { from { opacity: 0; transform: translateY(-26px) scale(.92); } to { opacity: 1; transform: none; } }
+    @keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
+    @keyframes pop-pivot { from { opacity: 0; transform: rotate(45deg) scale(.2); } to { opacity: 1; transform: rotate(45deg) scale(.86); } }
+    @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+    @keyframes flow { from { background-position: 0 0; } to { background-position: 30px 0; } }
+    @keyframes beat { 0%, 100% { filter: none; } 50% { filter: brightness(1.25) drop-shadow(0 0 8px var(--c)); } }
+    @keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
+    @keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
+    @keyframes ping-small { 0% { box-shadow: 0 2px 0 var(--shade), 0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent); }
+                            100% { box-shadow: 0 2px 0 var(--shade), 0 0 0 9px transparent; } }
+    @keyframes shake { 0%, 100% { translate: 0; } 25% { translate: -4px; } 75% { translate: 4px; } }
+    @keyframes spin { to { transform: rotate(1turn); } }
+    @keyframes alarm { 0%, 100% { box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 55%, #000), 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
+                       60% { box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 55%, #000), 0 0 0 16px transparent; } }
+    @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
+    @keyframes settle { from { transform: translateY(-30px) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
+    @keyframes rewind { 0%, 100% { rotate: 0deg; } 40% { rotate: -14deg; } 60% { rotate: -14deg; } }
+    @keyframes hop { 50% { transform: translateY(-5px); } }
+    @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+    @keyframes slide-back { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
+    @keyframes fill { from { width: 0; } to { width: 100%; } }
+    @keyframes rowflash { 0% { background: color-mix(in srgb, var(--cobalt) 30%, transparent); } 100% { background: transparent; } }
+
+    @media (max-width: 1100px) { .details { grid-template-columns: minmax(0, 1fr); } }
+    @media (max-width: 860px) {
+      .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
+      .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 14px 22px;
+              border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; }
+      .rail nav { flex-direction: row; flex-wrap: wrap; }
+      .rail-foot { display: none; }
+      .stage { padding: 20px 16px 40px; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after { animation: none !important; transition: none !important; }
+    }
+  </style>
+</head>
+<body>
+  <div class="live-bar" data-live-bar></div>
+  <div class="shell">
+    <aside class="rail">
+      <%= link_to root_path, class: "brand" do %>
+        <span class="logo" aria-hidden="true"><i></i><i></i><i></i><i></i></span>ActiveDurable
+      <% end %>
+      <div data-live-rail>
+        <h2>Executions</h2>
+        <nav aria-label="Executions by status">
+          <%= link_to executions_path, class: "rail-link", "aria-current": ("page" if controller_name == "executions" && action_name == "index" && params[:status].blank?) do %>
+            <span class="chip" aria-hidden="true"></span>All<span class="n"><%= status_counts.values.sum %></span>
+          <% end %>
+          <% ActiveDurable::Execution::STATUSES.each do |status| %>
+            <% next unless status_counts[status] %>
+            <%= link_to executions_path(status: status), class: "rail-link tone-#{ActiveDurable::DashboardHelper::STATUS_TONES[status]}",
+                        "aria-current": ("page" if params[:status] == status) do %>
+              <span class="chip" aria-hidden="true"></span><%= ActiveDurable::DashboardHelper::STATUS_WORDS[status] %><span class="n"><%= status_counts[status] %></span>
+            <% end %>
+          <% end %>
+        </nav>
+      </div>
+      <% if recipe_names.any? %>
+        <div>
+          <h2>Recipes</h2>
+          <nav aria-label="Executions by recipe">
+            <% recipe_names.each do |recipe| %>
+              <%= link_to recipe, executions_path(recipe: recipe), class: "rail-link", "aria-current": ("page" if params[:recipe] == recipe) %>
+            <% end %>
+          </nav>
+        </div>
+      <% end %>
+      <p class="rail-foot">Version <%= ActiveDurable::VERSION %></p>
+    </aside>
+    <main class="stage">
+      <% flash.each do |type, message| %>
+        <p class="flash <%= type %>" role="status"><%= message %></p>
+      <% end %>
+      <%= yield %>
+    </main>
+  </div>
+  <script nonce="<%= content_security_policy_nonce %>">
+    (function () {
+      var reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+      function span(seconds) {
+        var s = Math.abs(Math.round(seconds));
+        if (s < 60) return s + " s";
+        var m = Math.floor(s / 60);
+        if (m < 60) return m + " min";
+        var h = Math.floor(m / 60);
+        if (h < 24) return h + " h " + (m % 60) + " min";
+        return Math.floor(h / 24) + " d " + (h % 24) + " h";
+      }
+
+      function tick() {
+        var now = Date.now();
+        document.querySelectorAll("time[data-relative]").forEach(function (el) {
+          var at = Date.parse(el.getAttribute("datetime"));
+          if (isNaN(at)) return;
+          var diff = (at - now) / 1000;
+          el.textContent = Math.abs(diff) < 2 ? "now" : diff > 0 ? "in " + span(diff) : span(diff) + " ago";
+        });
+        document.querySelectorAll("[data-ring-from]").forEach(function (el) {
+          var from = Date.parse(el.dataset.ringFrom), until = Date.parse(el.dataset.ringUntil);
+          if (isNaN(from) || isNaN(until) || until <= from) return;
+          el.style.setProperty("--p", Math.min(1, Math.max(0, (now - from) / (until - from))).toFixed(3));
+        });
+      }
+      tick();
+      setInterval(tick, 1000);
+
+      document.addEventListener("submit", function (event) {
+        var message = event.target.getAttribute("data-confirm");
+        if (message && !window.confirm(message)) event.preventDefault();
+      });
+
+      // Live updates on the list: re-fetch the page every few seconds and highlight rows that changed.
+      var toggle = document.querySelector("[data-live-toggle]");
+      if (!toggle) return;
+      var bar = document.querySelector("[data-live-bar]");
+      var cycle = 5000, timer = null;
+
+      function statuses() {
+        var map = {};
+        document.querySelectorAll("tr[data-id]").forEach(function (row) { map[row.dataset.id] = row.dataset.status; });
+        return map;
+      }
+
+      function restartBar() {
+        if (!bar || reduced || toggle.getAttribute("aria-pressed") !== "true") return;
+        bar.classList.remove("run"); void bar.offsetWidth; bar.style.setProperty("--cycle", cycle + "ms"); bar.classList.add("run");
+      }
+
+      function refresh() {
+        var before = statuses();
+        fetch(window.location.href, { headers: { "Accept": "text/html" }, credentials: "same-origin" })
+          .then(function (response) { return response.ok ? response.text() : null; })
+          .then(function (html) {
+            if (!html) return;
+            var doc = new DOMParser().parseFromString(html, "text/html");
+            ["[data-live-region]", "[data-live-rail]", "[data-live-summary]"].forEach(function (selector) {
+              var fresh = doc.querySelector(selector), current = document.querySelector(selector);
+              if (fresh && current) { fresh.classList.add("no-entrance"); current.replaceWith(fresh); }
+            });
+            document.querySelectorAll("tr[data-id]").forEach(function (row) {
+              if (before[row.dataset.id] !== row.dataset.status) row.classList.add("changed");
+            });
+            tick();
+          })
+          .catch(function () {})
+          .finally(restartBar);
+      }
+
+      function setLive(on) {
+        toggle.setAttribute("aria-pressed", on ? "true" : "false");
+        toggle.querySelector("[data-live-label]").textContent = on ? "Live" : "Paused";
+        clearInterval(timer); timer = null;
+        if (bar) bar.classList.remove("run");
+        if (on) { restartBar(); timer = setInterval(refresh, cycle); }
+        try { localStorage.setItem("active_durable_live", on ? "1" : "0"); } catch (e) {}
+      }
+
+      toggle.addEventListener("click", function () { setLive(toggle.getAttribute("aria-pressed") !== "true"); });
+      var saved = null;
+      try { saved = localStorage.getItem("active_durable_live"); } catch (e) {}
+      setLive(saved === "1");
+    })();
+  </script>
+</body>
+</html>

data/config/routes.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+ActiveDurable::Engine.routes.draw do
+  root "executions#index"
+
+  resources :executions, only: %i[index show], constraints: { id: %r{[^/]+} } do
+    member do
+      post :retry, action: :retry_now
+      post :compensate
+      post :rerun
+    end
+  end
+end

data/lib/active_durable/configuration.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module ActiveDurable
+  # Settings for the whole gem. Change them in an initializer with ActiveDurable.configure.
+  class Configuration
+    # How long a worker owns an execution without writing to it. Must be longer than your slowest step:
+    # every notebook write renews it.
+    attr_accessor :lease_duration
+
+    # Active Job queue for ActiveDurable::RunJob and ActiveDurable::SweepJob.
+    attr_accessor :queue_name
+
+    # Attempts for a step before the point of no return (then the saga compensates).
+    attr_accessor :step_attempts
+
+    # Attempts for a step after the point of no return (then the execution is blocked for a human).
+    attr_accessor :after_pivot_attempts
+
+    # Attempts for an undo before the execution is blocked.
+    attr_accessor :undo_attempts
+
+    # Seconds to wait before retry number n (1-based). A Proc, an Array of seconds or a fixed number.
+    attr_accessor :backoff
+
+    # The sweeper ignores executions touched more recently than this, to leave room for their own job.
+    attr_accessor :sweep_grace
+
+    # Maximum threads used by flow.parallel. Your connection pool needs at least this many + 1 connections.
+    attr_accessor :parallel_concurrency
+
+    # Returns the current time. Tests can replace it.
+    attr_accessor :clock
+
+    # Who may open the dashboard: ->(controller) { ... } returning true or false. The controller gives you
+    # request, session and authenticate_or_request_with_http_basic. Without it, the dashboard is open in
+    # development and test only: closed in production, staging and any other environment.
+    attr_accessor :dashboard_authorize
+
+    attr_writer :logger
+
+    def initialize
+      @lease_duration = 300
+      @queue_name = :default
+      @step_attempts = 3
+      @after_pivot_attempts = 25
+      @undo_attempts = 10
+      @backoff = ->(attempt) { [2**attempt, 3600].min }
+      @sweep_grace = 60
+      @parallel_concurrency = 4
+      @clock = -> { Time.current }
+      @dashboard_authorize = nil
+      @logger = nil
+    end
+
+    def logger
+      @logger || (defined?(Rails) && Rails.respond_to?(:logger) && Rails.logger) || ActiveSupport::Logger.new(nil)
+    end
+  end
+end

data/lib/active_durable/engine.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module ActiveDurable
+  # The dashboard and the rake tasks. Mount it in config/routes.rb:
+  #
+  #   mount ActiveDurable::Engine => "/durable"
+  class Engine < ::Rails::Engine
+    isolate_namespace ActiveDurable
+
+    # rails new --api apps drop cookies, sessions and flash. The dashboard needs them for its forms
+    # (CSRF protection), so it brings its own, only inside its own middleware stack.
+    initializer "active_durable.api_only_middleware" do |app|
+      if app.config.api_only
+        middleware.use ActionDispatch::Cookies
+        middleware.use ActionDispatch::Session::CookieStore, key: "_active_durable_session", same_site: :strict
+        middleware.use ActionDispatch::Flash
+      end
+    end
+
+    rake_tasks do
+      load File.expand_path("../tasks/active_durable.rake", __dir__)
+    end
+  end
+end

data/lib/active_durable/errors.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+# Error classes. Everything a recipe may want to rescue inherits from ActiveDurable::Error.
+module ActiveDurable
+  class Error < StandardError; end
+
+  # Raised when a recipe name (or version) has not been defined.
+  class UnknownRecipe < Error; end
+
+  # Raised when a recipe is written in a way the engine cannot run safely.
+  class InvalidRecipe < Error; end
+
+  # Two steps in the same recipe share a name, so their notebook entries would collide.
+  class DuplicateStepName < InvalidRecipe; end
+
+  # The recipe no longer matches what the notebook recorded for an execution in flight.
+  class RecipeChanged < Error; end
+
+  # A step returned something that cannot be stored in the notebook as JSON.
+  class NotSerializable < Error; end
+
+  # Raise it inside a step to reject the work for a business reason: no retries, straight to compensation.
+  class Abort < Error; end
+
+  # A wait_for reached its timeout before the signal arrived.
+  class WaitTimeout < Error; end
+
+  # A step ran out of attempts (or was aborted). Rescue it in a recipe to try an alternative path.
+  class StepFailed < Error
+    attr_reader :step_name
+
+    def initialize(step_name, error = nil)
+      @step_name = step_name
+      detail = error.is_a?(Exception) ? "#{error.class}: #{error.message}" : error.to_s
+      super("step :#{step_name} failed#{" (#{detail})" unless detail.empty?}")
+    end
+  end
+
+  # An undo kept failing after all its attempts. The execution is blocked for a human to review.
+  class UndoFailed < Error; end
+
+  # Control flow signals. They inherit from Exception on purpose: a `rescue => e` inside
+  # user code must not swallow them, otherwise a lost lease could keep writing.
+  class ControlFlow < Exception; end # rubocop:disable Lint/InheritException
+
+  # Another worker took over this execution (our lease expired). Stop without writing anything else.
+  class LeaseLost < ControlFlow; end
+
+  # While compensating, replay reached a step that never completed: stop moving forward.
+  class StopForward < ControlFlow; end
+
+  # Serializes an exception for the notebook and the dashboard.
+  def self.dump_error(error, step: nil)
+    {
+      "class" => error.class.name,
+      "message" => error.message.to_s[0, 2000],
+      "step" => step,
+      "at" => now.utc.iso8601(6)
+    }.compact
+  end
+end

data/lib/active_durable/execution.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module ActiveDurable
+  # One saga run: which recipe, with what input, and where it is.
+  class Execution < Record
+    self.table_name = "durable_executions"
+
+    ACTIVE = %w[pending running sleeping waiting].freeze
+    TERMINAL = %w[completed compensated blocked superseded].freeze
+    STATUSES = (ACTIVE + TERMINAL).freeze
+
+    attribute :input, JSON_TYPE, default: -> { {} }
+    attribute :output, JSON_TYPE
+    attribute :error, JSON_TYPE
+
+    has_many :steps, -> { order(:id) }, class_name: "ActiveDurable::Step",
+                                        foreign_key: :execution_id, inverse_of: :execution, dependent: :delete_all
+    has_many :signals, -> { order(:id) }, class_name: "ActiveDurable::SignalRecord",
+                                          foreign_key: :execution_id, inverse_of: :execution, dependent: :delete_all
+
+    validates :status, inclusion: { in: STATUSES }
+
+    scope :active, -> { where(status: ACTIVE) }
+    scope :terminal, -> { where(status: TERMINAL) }
+
+    # The buzón: the job is enqueued only after the row is committed. If the process dies in between,
+    # the sweeper finds the pending row and enqueues it.
+    after_create_commit { ActiveDurable.enqueue(id) }
+
+    def active?
+      ACTIVE.include?(status)
+    end
+
+    def terminal?
+      TERMINAL.include?(status)
+    end
+
+    # The forward steps in recipe order (undo entries excluded).
+    def notebook
+      steps.where.not(kind: "undo").reorder(:position).to_a
+    end
+  end
+end