@bendyline/gilde 0.1.21 → 0.1.23

package/data/project-types/fl/flashcards/versions/1.1.0/about.md

@@ -0,0 +1,8 @@
+A spaced-repetition practice bench for **{{subject}}**.
+
+Your Studiemaat writes the cards — ask for them in chat, or let them propose
+cards when a weak spot shows. You review in the **Output** tab: flip the card,
+mark it got-it or missed, and the deck's schedule decides when each card comes
+back (daily, every three days, weekly, as you prove them).
+
+After each session your Studiemaat checks in on how it went.

package/data/project-types/fl/flashcards/versions/1.1.0/deck.json

@@ -0,0 +1,7 @@
+{
+  "version": 1,
+  "subject": "{{subject}}",
+  "cards": [],
+  "dueCardIds": [],
+  "updatedAt": "2026-07-18T00:00:00.000Z"
+}

package/data/project-types/fl/flashcards/versions/1.1.0/manifest.json

@@ -0,0 +1,168 @@
+{
+  "schemaVersion": 1,
+  "version": "1.1.0",
+  "releasedAt": "2026-08-12T00:00:00Z",
+  "meesterManaged": false,
+  "params": {
+    "type": "object",
+    "properties": {
+      "subject": {
+        "type": "string",
+        "title": "What are you learning?",
+        "description": "The deck's subject — e.g. Spanish vocabulary, AWS certification, organic chemistry.",
+        "default": "Spanish vocabulary"
+      }
+    },
+    "required": [
+      "subject"
+    ]
+  },
+  "nameTemplate": "{{subject}} Flashcards",
+  "aboutTemplate": "about.md",
+  "missionTemplate": "mission.md",
+  "gezels": [
+    {
+      "templateId": "study-buddy",
+      "voorman": true
+    }
+  ],
+  "scripts": {
+    "deck-store": "import { type InferredInput, defineScript, gezel } from '@bendyline/gezel-sdk';\n\nexport const meta = defineScript({\n  name: 'deck-store',\n  description:\n    \"Read and update the flashcard deck (deck.json). Call action:'add_cards' with a cards array ([{front, back}, ...]) to add practice cards; action:'state' to see due counts and box distribution; action:'list_deck' to read every card. The review page drives 'record_review' and 'finish_session' itself.\",\n  inputs: {\n    action: {\n      type: 'string',\n      description:\n        \"One of 'state', 'list_deck', 'add_cards', 'record_review', or 'finish_session'.\",\n      required: true,\n    },\n    cards: {\n      type: 'json',\n      description: 'For add_cards: an array of {front, back} objects.',\n    },\n    cardId: { type: 'string', description: \"For record_review: the card id, e.g. 'card-3'.\" },\n    verdict: { type: 'string', description: \"For record_review: 'got-it' or 'missed'.\" },\n    reviewed: { type: 'number', description: 'For finish_session: how many cards were reviewed.' },\n    missedIds: { type: 'json', description: 'For finish_session: array of card ids that were missed.' },\n  },\n  outputs: {\n    total: { type: 'number', description: 'Cards in the deck.' },\n    due: { type: 'number', description: 'Cards due for review now.' },\n    summary: { type: 'string', description: 'Human-readable deck or session summary.' },\n    missedList: { type: 'string', description: 'Fronts of the cards missed this session (finish_session).' },\n  },\n  requires: ['workspace.read', 'workspace.write'],\n} as const);\n\nconst input = gezel.input as InferredInput<typeof meta>;\n\n// ── leitner-rules-start ──\n// Pure Leitner-box scheduling (3 boxes). Box 1 reviews daily, box 2 every\n// 3 days, box 3 weekly. A got-it promotes (capped at 3); a miss goes back\n// to box 1. Never-reviewed cards are always due. Kept self-contained\n// between these sentinels so unit tests execute the shipped bytes.\n\nvar BOX_INTERVAL_DAYS = { 1: 1, 2: 3, 3: 7 };\nvar DAY_MS = 24 * 60 * 60 * 1000;\n\nfunction isDue(card, nowMs) {\n  if (!card.lastReviewedAt) return true;\n  var interval = BOX_INTERVAL_DAYS[card.box] || 1;\n  return nowMs - Date.parse(card.lastReviewedAt) >= interval * DAY_MS;\n}\n\nfunction computeDueIds(cards, nowMs) {\n  return cards\n    .filter(function (c) {\n      return isDue(c, nowMs);\n    })\n    .sort(function (a, b) {\n      if (a.box !== b.box) return a.box - b.box;\n      return a.createdAt < b.createdAt ? -1 : a.createdAt > b.createdAt ? 1 : 0;\n    })\n    .map(function (c) {\n      return c.id;\n    });\n}\n\nfunction applyReview(card, verdict, nowIso) {\n  if (verdict === 'got-it') card.box = Math.min(3, card.box + 1);\n  else card.box = 1;\n  card.lastReviewedAt = nowIso;\n  card.stats = card.stats || { gotIt: 0, missed: 0 };\n  if (verdict === 'got-it') card.stats.gotIt += 1;\n  else card.stats.missed += 1;\n  return card;\n}\n\nfunction nextCardId(cards) {\n  var max = 0;\n  for (var i = 0; i < cards.length; i += 1) {\n    var m = /^card-(\\d+)$/.exec(cards[i].id);\n    if (m) max = Math.max(max, Number(m[1]));\n  }\n  return 'card-' + (max + 1);\n}\n// ── leitner-rules-end ──\n\nconst DECK_FILE = 'deck.json';\n\ninterface Card {\n  id: string;\n  front: string;\n  back: string;\n  box: number;\n  lastReviewedAt: string | null;\n  createdAt: string;\n  stats: { gotIt: number; missed: number };\n}\n\ninterface Deck {\n  version: number;\n  subject: string;\n  cards: Card[];\n  dueCardIds: string[];\n  updatedAt: string;\n}\n\nasync function load(): Promise<Deck> {\n  let raw: string;\n  try {\n    raw = await gezel.fs.read(DECK_FILE);\n  } catch {\n    return { version: 1, subject: 'your subject', cards: [], dueCardIds: [], updatedAt: new Date().toISOString() };\n  }\n  const parsed = JSON.parse(raw) as Partial<Deck>;\n  return {\n    version: 1,\n    subject: typeof parsed.subject === 'string' ? parsed.subject : 'your subject',\n    cards: Array.isArray(parsed.cards) ? (parsed.cards as Card[]) : [],\n    dueCardIds: [],\n    updatedAt: new Date().toISOString(),\n  };\n}\n\nasync function persist(deck: Deck): Promise<Deck> {\n  deck.dueCardIds = computeDueIds(deck.cards, Date.now());\n  deck.updatedAt = new Date().toISOString();\n  await gezel.fs.write(DECK_FILE, `${JSON.stringify(deck, null, 2)}\\n`);\n  return deck;\n}\n\nconst deck = await load();\ndeck.dueCardIds = computeDueIds(deck.cards, Date.now());\nlet summary = '';\nlet missedList = '';\n\nif (input.action === 'add_cards') {\n  const raw = Array.isArray(input.cards) ? input.cards : [];\n  const added: string[] = [];\n  for (const entry of raw) {\n    const front = typeof (entry as { front?: unknown }).front === 'string' ? (entry as { front: string }).front.trim() : '';\n    const back = typeof (entry as { back?: unknown }).back === 'string' ? (entry as { back: string }).back.trim() : '';\n    if (!front || !back) continue;\n    const card: Card = {\n      id: nextCardId(deck.cards),\n      front: front.slice(0, 300),\n      back: back.slice(0, 500),\n      box: 1,\n      lastReviewedAt: null,\n      createdAt: new Date().toISOString(),\n      stats: { gotIt: 0, missed: 0 },\n    };\n    deck.cards.push(card);\n    added.push(card.id);\n  }\n  if (added.length === 0) {\n    throw new Error(\"add_cards needs a non-empty 'cards' array of {front, back} objects.\");\n  }\n  await persist(deck);\n  summary = `Added ${added.length} card(s). ${deck.cards.length} in the deck, ${deck.dueCardIds.length} due now.`;\n} else if (input.action === 'record_review') {\n  if (!input.cardId || (input.verdict !== 'got-it' && input.verdict !== 'missed')) {\n    throw new Error(\"record_review needs 'cardId' and verdict 'got-it' or 'missed'.\");\n  }\n  const card = deck.cards.find((c) => c.id === input.cardId);\n  if (!card) throw new Error(`No card '${input.cardId}' in the deck.`);\n  applyReview(card, input.verdict, new Date().toISOString());\n  await persist(deck);\n  summary = `${card.id} marked ${input.verdict} (now box ${card.box}). ${deck.dueCardIds.length} still due.`;\n} else if (input.action === 'finish_session') {\n  const reviewed = typeof input.reviewed === 'number' ? input.reviewed : 0;\n  const missedIds = Array.isArray(input.missedIds) ? input.missedIds.map(String) : [];\n  const missedFronts = missedIds\n    .map((id) => deck.cards.find((c) => c.id === id)?.front)\n    .filter((f): f is string => typeof f === 'string');\n  missedList = missedFronts.length ? missedFronts.join(' | ') : '(none)';\n  summary = `Reviewed ${reviewed} card(s): ${reviewed - missedIds.length} got it, ${missedIds.length} missed. ${deck.dueCardIds.length} due next.`;\n} else if (input.action === 'list_deck') {\n  summary = deck.cards.length\n    ? deck.cards\n        .map((c) => `${c.id} [box ${c.box}] ${c.front} -> ${c.back}`)\n        .join('\\n')\n    : 'The deck is empty — add cards with add_cards.';\n} else if (input.action === 'state') {\n  const boxes = { 1: 0, 2: 0, 3: 0 } as Record<number, number>;\n  for (const c of deck.cards) boxes[c.box] = (boxes[c.box] ?? 0) + 1;\n  summary = deck.cards.length\n    ? `${deck.cards.length} card(s) on \"${deck.subject}\": ${deck.dueCardIds.length} due now. Boxes: ${boxes[1]} daily, ${boxes[2]} every-3-days, ${boxes[3]} weekly.`\n    : `The deck for \"${deck.subject}\" is empty — offer to write the first cards.`;\n} else {\n  throw new Error(\n    `Unknown action '${input.action}'. Use state, list_deck, add_cards, record_review, or finish_session.`,\n  );\n}\n\ngezel.output({\n  total: deck.cards.length,\n  due: deck.dueCardIds.length,\n  summary,\n  missedList,\n});\n"
+  },
+  "tools": [
+    {
+      "name": "add_cards",
+      "description": "Add flashcards to the deck. Pass a cards array of {front, back} objects — one fact per card.",
+      "script": "deck-store",
+      "inputs": {
+        "type": "object",
+        "properties": {
+          "cards": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "front": {
+                  "type": "string"
+                },
+                "back": {
+                  "type": "string"
+                }
+              },
+              "required": [
+                "front",
+                "back"
+              ]
+            },
+            "description": "The cards to add."
+          }
+        },
+        "required": [
+          "cards"
+        ]
+      },
+      "bind": {
+        "action": "add_cards"
+      }
+    },
+    {
+      "name": "deck_status",
+      "description": "See the deck: how many cards, how many due, and the box distribution.",
+      "script": "deck-store",
+      "inputs": {
+        "type": "object",
+        "properties": {}
+      },
+      "bind": {
+        "action": "state"
+      }
+    },
+    {
+      "name": "list_deck",
+      "description": "Read every card in the deck (id, box, front, back).",
+      "script": "deck-store",
+      "inputs": {
+        "type": "object",
+        "properties": {}
+      },
+      "bind": {
+        "action": "list_deck"
+      }
+    },
+    {
+      "name": "record_review",
+      "description": "The review page's per-card verdict.",
+      "script": "deck-store",
+      "inputs": {
+        "type": "object",
+        "properties": {
+          "cardId": {
+            "type": "string"
+          },
+          "verdict": {
+            "type": "string",
+            "enum": [
+              "got-it",
+              "missed"
+            ]
+          }
+        },
+        "required": [
+          "cardId",
+          "verdict"
+        ]
+      },
+      "bind": {
+        "action": "record_review"
+      }
+    },
+    {
+      "name": "finish_session",
+      "description": "The review page's end-of-session summary.",
+      "script": "deck-store",
+      "inputs": {
+        "type": "object",
+        "properties": {
+          "reviewed": {
+            "type": "number"
+          },
+          "missedIds": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        },
+        "required": [
+          "reviewed"
+        ]
+      },
+      "bind": {
+        "action": "finish_session"
+      },
+      "reaction": {
+        "gezel": "study-buddy",
+        "prompt": "The user finished a flashcard review session. {{output.summary}}\nMissed cards: {{output.missedList}}\nReply with ONE short encouraging line — specific beats generic. If any cards were missed, offer to add fresh practice cards that come at those same ideas from a new angle (add them with your deck capabilities if the user agrees)."
+      }
+    }
+  ],
+  "craftbooks": [],
+  "schedules": [],
+  "pages": {
+    "entry": "review/index.html",
+    "api": 1,
+    "reads": [
+      {
+        "source": "workspace",
+        "path": "deck.json"
+      }
+    ],
+    "tools": [
+      "record_review",
+      "finish_session"
+    ]
+  },
+  "workspaceSeed": [
+    "deck.json"
+  ]
+}

package/data/project-types/fl/flashcards/versions/1.1.0/mission.md

@@ -0,0 +1,6 @@
+- A living deck on {{subject}}: a few sharp new cards whenever they're needed,
+  never bulk filler.
+- Due cards get reviewed most days; the page's schedule is the source of truth.
+- Every missed card gets another road in — fresh cards on the same idea from a
+  new angle, offered after the session.
+- Encouragement always, shame never: a miss is the system working.

package/data/project-types/fl/flashcards/versions/1.1.0/pages/review/index.html

@@ -0,0 +1,476 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="gezel-demo" content="standalone" />
+    <title>Flashcards</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --bg: #faf7f2;
+        --card: #fff;
+        --ink: #2b2620;
+        --muted: #7a7166;
+        --accent: #b5651d;
+        --track: #ece5da;
+        --good: #4a7c59;
+        --warn: #a4552e;
+      }
+      :root[data-theme='dark'] {
+        --bg: #1c1a17;
+        --card: #262320;
+        --ink: #efe9e0;
+        --muted: #a59a8c;
+        --accent: #e0894a;
+        --track: #3a352f;
+        --good: #7fae8d;
+        --warn: #d98a63;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root:not([data-theme='light']) {
+          --bg: #1c1a17;
+          --card: #262320;
+          --ink: #efe9e0;
+          --muted: #a59a8c;
+          --accent: #e0894a;
+          --track: #3a352f;
+          --good: #7fae8d;
+          --warn: #d98a63;
+        }
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+        background: var(--bg);
+        color: var(--ink);
+        padding: 1.5rem 1.25rem;
+      }
+      main { max-width: 560px; margin: 0 auto; }
+      h1 {
+        font-family: Georgia, 'PT Serif', 'Times New Roman', serif;
+        font-size: 1.35rem;
+        font-weight: 600;
+        margin: 0 0 0.15rem;
+      }
+      .sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }
+      .dots { display: flex; gap: 0.3rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
+      .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--track); }
+      .dot.done-good { background: var(--good); }
+      .dot.done-miss { background: var(--warn); }
+      .dot.current { background: var(--accent); }
+      .flashcard {
+        background: var(--card);
+        border: 1px solid var(--track);
+        border-radius: 10px;
+        min-height: 200px;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        padding: 1.5rem;
+        font-size: 1.15rem;
+        cursor: pointer;
+        user-select: none;
+      }
+      .flashcard .face-label {
+        display: block;
+        font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--muted);
+        margin-bottom: 0.6rem;
+      }
+      .actions { display: flex; gap: 0.6rem; margin-top: 0.85rem; justify-content: center; }
+      .actions button {
+        border: 1px solid var(--track);
+        background: var(--card);
+        color: var(--ink);
+        border-radius: 6px;
+        padding: 0.45rem 1.1rem;
+        font: inherit;
+        cursor: pointer;
+      }
+      .actions button.got { border-color: var(--good); color: var(--good); }
+      .actions button.miss { border-color: var(--warn); color: var(--warn); }
+      .actions button:disabled { opacity: 0.5; cursor: default; }
+      .empty, .done {
+        background: var(--card);
+        border: 1px dashed var(--track);
+        border-radius: 10px;
+        padding: 1.5rem;
+        text-align: center;
+        color: var(--muted);
+      }
+      .banner {
+        border: 1px solid var(--accent);
+        border-radius: 6px;
+        padding: 0.45rem 0.7rem;
+        font-size: 0.85rem;
+        margin-bottom: 0.75rem;
+        display: none;
+      }
+      .banner.show { display: block; }
+      .hint { font-size: 0.78rem; color: var(--muted); text-align: center; margin-top: 0.5rem; }
+      .note {
+        margin: 0 0 0.85rem;
+        padding: 0.5rem 0.65rem;
+        border: 1px solid var(--track);
+        border-radius: 6px;
+        background: var(--card);
+        color: var(--muted);
+        font-size: 0.8rem;
+      }
+      .demo-banner {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+        margin: 0 0 0.85rem;
+        padding: 0.5rem 0.65rem;
+        border: 1px solid var(--accent);
+        border-radius: 6px;
+        background: color-mix(in srgb, var(--card) 88%, var(--accent));
+        color: var(--ink);
+        font-size: 0.8rem;
+      }
+      .demo-banner[hidden] { display: none; }
+      .demo-banner strong { font-weight: 700; }
+      .demo-reset {
+        flex: none;
+        padding: 0.25rem 0.5rem;
+        border: 1px solid var(--accent);
+        border-radius: 6px;
+        background: var(--card);
+        color: var(--ink);
+        cursor: pointer;
+        font: inherit;
+      }
+      .demo-reset:hover { border-color: var(--ink); }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="demo-banner" data-gezel-demo-banner hidden>
+        <span><strong>Demo mode</strong> — sample data stays in this page.</span>
+        <button type="button" class="demo-reset" onclick="location.reload()">Reset demo</button>
+      </div>
+      <p class="note" id="browser-note" hidden>
+        Viewing from a browser tab — the deck stays live, but reviews happen in the app's Output pane.
+      </p>
+      <div class="banner" id="banner"></div>
+      <h1 id="title">Flashcards</h1>
+      <p class="sub" id="sub">Loading the deck…</p>
+      <div class="dots" id="dots"></div>
+      <div id="stage"></div>
+      <p class="hint" id="hint"></p>
+    </main>
+    <script>
+/* gezel-page-demo-stub v1 */
+/*
+ * The canonical demo stub for Gezel type pages. MIT License.
+ *
+ * Paste this file's bytes verbatim into a <script> block ahead of the
+ * page's own code, then call makeDemoGezel({ page, tools, data }) with the
+ * page's demo handlers. Served by Gezel, the real window.gezel is already
+ * injected and the stub steps aside; opened as a raw file (the live demos
+ * on gezelgilde.com), it installs a window.gezel whose tools and data are
+ * the page-supplied handler maps — one code path in every mode. `tools`
+ * and `data` map a tool name / declared read path to a function; data
+ * handlers back read() and list(), and url() returns the handler's value
+ * or passes a data: URI through. See docs/page-authoring.md.
+ */
+(function () {
+  'use strict';
+  window.makeDemoGezel = function (opts) {
+    if (window.gezel) return window.gezel;
+    var page = (opts && opts.page) || {};
+    var tools = (opts && opts.tools) || {};
+    var data = (opts && opts.data) || {};
+    var themeListeners = [];
+    var media = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+    var ui = {
+      theme: { mode: media && media.matches ? 'dark' : 'light' },
+      onTheme: function (cb) {
+        themeListeners.push(cb);
+        return function () {
+          var at = themeListeners.indexOf(cb);
+          if (at >= 0) themeListeners.splice(at, 1);
+        };
+      },
+    };
+    if (media && media.addEventListener) {
+      media.addEventListener('change', function (ev) {
+        ui.theme = { mode: ev.matches ? 'dark' : 'light' };
+        themeListeners.slice().forEach(function (cb) { cb(ui.theme); });
+      });
+    }
+    function fail(code, message) {
+      var err = new Error(message);
+      err.code = code;
+      return Promise.reject(err);
+    }
+    function run(map, key, arg) {
+      if (!Object.prototype.hasOwnProperty.call(map, key)) return null;
+      return Promise.resolve().then(function () { return map[key](arg); });
+    }
+    window.gezel = {
+      page: {
+        api: 1,
+        projectId: 'demo',
+        source: 'type',
+        entry: page.entry || 'index.html',
+        typeName: page.typeName || 'demo',
+        params: page.params || {},
+        mode: 'demo',
+      },
+      tools: {
+        list: function () { return Promise.resolve(Object.keys(tools)); },
+        invoke: function (name, input) {
+          var call = run(tools, name, input || {});
+          if (!call) return fail('not-allowed', "The demo does not handle the tool '" + name + "'.");
+          return call.then(function (output) { return { output: output }; });
+        },
+      },
+      data: {
+        read: function (path, o) {
+          return run(data, path, o || {}) || fail('not-allowed', "The demo has no data for '" + path + "'.");
+        },
+        list: function (path, o) {
+          return run(data, path, o || {}) || Promise.resolve([]);
+        },
+        watch: function () { return function () {}; },
+        url: function (path) {
+          if (Object.prototype.hasOwnProperty.call(data, path)) return String(data[path]({}));
+          return typeof path === 'string' && path.indexOf('data:') === 0 ? path : '';
+        },
+      },
+      ui: ui,
+      refresh: function () {},
+    };
+    return window.gezel;
+  };
+})();
+    </script>
+    <script>
+      (function () {
+        'use strict';
+
+        // ── demo deck (used only when the page opens as a raw file) ──
+        var demoDeck = {
+          subject: 'Dutch for a market morning',
+          cards: [
+            { id: 'card-1', front: 'Hoeveel kost dit?', back: 'How much does this cost?' },
+            { id: 'card-2', front: 'een bos bloemen', back: 'a bunch of flowers' },
+            { id: 'card-3', front: 'Mag ik pinnen?', back: 'Can I pay by card?' },
+            { id: 'card-4', front: 'Dat is alles, dank u.', back: 'That is all, thank you.' },
+          ],
+          dueCardIds: ['card-1', 'card-2', 'card-3', 'card-4'],
+        };
+        function demoCard(id) {
+          return demoDeck.cards.find(function (c) { return c.id === id; }) || null;
+        }
+
+        makeDemoGezel({
+          page: { entry: 'review/index.html', typeName: 'Flashcards' },
+          tools: {
+            record_review: function (input) {
+              var card = demoCard(input && input.cardId);
+              if (!card) throw new Error("No card '" + (input && input.cardId) + "' in the demo deck.");
+              // The demo deck stays due so the session can be replayed;
+              // Reset demo restores everything else.
+              return { summary: card.id + ' marked ' + input.verdict + '.' };
+            },
+            finish_session: function (input) {
+              var reviewed = (input && input.reviewed) || 0;
+              var missed = ((input && input.missedIds) || []).length;
+              return { summary: 'Reviewed ' + reviewed + ' card(s): ' + (reviewed - missed) + ' got it, ' + missed + ' missed.' };
+            },
+          },
+          data: {
+            'deck.json': function () { return demoDeck; },
+          },
+        });
+
+        // ── one code path from here: window.gezel exists in every mode ──
+        var demoMode = gezel.page.mode === 'demo';
+        var browserMode = gezel.page.mode === 'browser';
+
+        function applyTheme(mode) {
+          document.documentElement.setAttribute('data-theme', mode === 'dark' ? 'dark' : 'light');
+        }
+        applyTheme(gezel.ui.theme.mode);
+        gezel.ui.onTheme(function (theme) { applyTheme(theme.mode); });
+
+        if (demoMode) document.querySelector('[data-gezel-demo-banner]').hidden = false;
+        if (browserMode) document.getElementById('browser-note').hidden = false;
+
+        var deck = null;
+        // The session queue is snapshotted from dueCardIds at start so a
+        // background change never reshuffles cards mid-session.
+        var queue = null;
+        var idx = 0;
+        var flipped = false;
+        var results = [];
+        var busy = false;
+
+        function esc(s) {
+          return String(s).replace(/[&<>"]/g, function (c) {
+            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
+          });
+        }
+        function setBanner(text) {
+          var el = document.getElementById('banner');
+          el.textContent = text || '';
+          el.className = text ? 'banner show' : 'banner';
+        }
+        function invokeErrorText(err) {
+          if (err && err.code === 'unavailable') {
+            return "Reviews happen in the app's Output pane — this browser tab stays view-only.";
+          }
+          return String(err && err.message ? err.message : err);
+        }
+        function cardById(id) {
+          return (deck.cards || []).find(function (c) { return c.id === id; }) || null;
+        }
+
+        function render() {
+          var stage = document.getElementById('stage');
+          var dots = document.getElementById('dots');
+          var hint = document.getElementById('hint');
+          if (!deck) return;
+          if (deck.subject) document.getElementById('title').textContent = 'Flashcards: ' + deck.subject;
+
+          if (!deck.cards || deck.cards.length === 0) {
+            document.getElementById('sub').textContent = 'The deck is empty.';
+            dots.innerHTML = '';
+            hint.textContent = '';
+            stage.innerHTML =
+              '<div class="empty">No cards yet — ask your Studiemaat to write the first ones.</div>';
+            return;
+          }
+
+          if (queue === null || (idx >= queue.length && queue.length === 0)) {
+            document.getElementById('sub').textContent =
+              deck.dueCardIds.length > 0
+                ? deck.dueCardIds.length + ' card(s) due.'
+                : 'Nothing due right now.';
+            dots.innerHTML = '';
+            hint.textContent = '';
+            stage.innerHTML =
+              deck.dueCardIds.length > 0
+                ? '<div class="actions"><button type="button" id="start">Start review (' + deck.dueCardIds.length + ')</button></div>'
+                : '<div class="done">All caught up — nothing due. Your Studiemaat can always add more.</div>';
+            var startBtn = document.getElementById('start');
+            if (startBtn) startBtn.addEventListener('click', startSession);
+            return;
+          }
+
+          if (idx >= queue.length) {
+            var missed = results.filter(function (r) { return r.verdict === 'missed'; }).length;
+            document.getElementById('sub').textContent =
+              'Session done: ' + (results.length - missed) + ' got it, ' + missed + ' missed.';
+            hint.textContent = '';
+            stage.innerHTML = '<div class="done">Nice work — your Studiemaat has the recap.</div>';
+            return;
+          }
+
+          var card = cardById(queue[idx]);
+          if (!card) {
+            idx += 1;
+            render();
+            return;
+          }
+          document.getElementById('sub').textContent = 'Card ' + (idx + 1) + ' of ' + queue.length;
+          dots.innerHTML = queue
+            .map(function (id, i) {
+              if (i === idx) return '<span class="dot current"></span>';
+              var r = results[i];
+              if (!r) return '<span class="dot"></span>';
+              return '<span class="dot ' + (r.verdict === 'missed' ? 'done-miss' : 'done-good') + '"></span>';
+            })
+            .join('');
+          stage.innerHTML =
+            '<div class="flashcard" id="card"><div><span class="face-label">' +
+            (flipped ? 'Back' : 'Front') + '</span>' + esc(flipped ? card.back : card.front) +
+            '</div></div>' +
+            (flipped
+              ? '<div class="actions">' +
+                '<button type="button" class="got" id="got"' + (busy ? ' disabled' : '') + '>Got it</button>' +
+                '<button type="button" class="miss" id="miss"' + (busy ? ' disabled' : '') + '>Missed</button>' +
+                '</div>'
+              : '');
+          hint.textContent = flipped ? '' : 'Tap the card to reveal the answer.';
+          document.getElementById('card').addEventListener('click', function () {
+            if (!flipped) {
+              flipped = true;
+              render();
+            }
+          });
+          if (flipped) {
+            document.getElementById('got').addEventListener('click', function () { grade('got-it'); });
+            document.getElementById('miss').addEventListener('click', function () { grade('missed'); });
+          }
+        }
+
+        function startSession() {
+          queue = deck.dueCardIds.slice();
+          idx = 0;
+          flipped = false;
+          results = [];
+          render();
+        }
+
+        function grade(verdict) {
+          if (busy) return;
+          busy = true;
+          render();
+          var cardId = queue[idx];
+          gezel.tools
+            .invoke('record_review', { cardId: cardId, verdict: verdict })
+            .then(function () {
+              busy = false;
+              results[idx] = { cardId: cardId, verdict: verdict };
+              idx += 1;
+              flipped = false;
+              if (idx >= queue.length) return finishSession();
+              render();
+            })
+            .catch(function (err) {
+              busy = false;
+              setBanner(invokeErrorText(err));
+              render();
+            });
+        }
+
+        function finishSession() {
+          var missedIds = results
+            .filter(function (r) { return r.verdict === 'missed'; })
+            .map(function (r) { return r.cardId; });
+          return gezel.tools
+            .invoke('finish_session', { reviewed: results.length, missedIds: missedIds })
+            .catch(function () {})
+            .then(function () {
+              render();
+              return loadDeck();
+            });
+        }
+
+        function loadDeck() {
+          return gezel.data
+            .read('deck.json')
+            .then(function (next) {
+              deck = next;
+              // Only re-render outside an active session — mid-session the
+              // snapshot queue drives the UI.
+              if (queue === null || idx >= queue.length) render();
+            })
+            .catch(function () {});
+        }
+
+        loadDeck();
+        gezel.data.watch('deck.json', function () { loadDeck(); });
+      })();
+    </script>
+  </body>
+</html>