npm - yaml-flow - Versions diffs - 6.0.0 → 7.1.0 - Mend

yaml-flow 6.0.0 → 7.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/examples/example-board/demo-shell-localstorage.html ADDED Viewed

@@ -0,0 +1,774 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Example Board Demo (LocalStorage Runtime)</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/yaml-flow@7.1.0/browser/compute-jsonata.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/leader-line/leader-line.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/yaml-flow@7.1.0/browser/live-cards.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/yaml-flow@7.1.0/browser/board-livecards-localstorage.js"></script>
+</head>
+<body class="bg-light">
+  <div class="container-fluid py-3">
+    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
+      <div>
+        <h1 class="h4 mb-0" id="boardTitle">Example Board (LocalStorage Runtime)</h1>
+        <div class="small text-muted" id="boardDesc"></div>
+      </div>
+      <div class="d-flex align-items-center gap-2">
+        <button class="btn btn-sm btn-outline-primary" id="modeBoard">Board</button>
+        <button class="btn btn-sm btn-outline-primary" id="modeCanvas">Canvas</button>
+        <button class="btn btn-sm btn-outline-secondary" id="autoLayout">Auto Layout</button>
+        <button class="btn btn-sm btn-outline-danger" id="resetDemo">Reset Demo</button>
+        <div class="form-check ms-2">
+          <input class="form-check-input" type="checkbox" id="devModeToggle" checked />
+          <label class="form-check-label" for="devModeToggle">Dev Mode</label>
+        </div>
+      </div>
+    </div>
+    <div class="alert alert-info small py-2 mb-3">
+      LocalStorage runtime mode: board state persisted in browser localStorage via
+      <code>board-livecards-localstorage</code> + <code>server-runtime</code>.
+      Source fetches are done by a demo task executor in this HTML using source_def url/url-list and
+      reporting results via <code>reportSourceFetched</code>.
+    </div>
+    <div id="boardRoot">
+      <div class="d-flex align-items-center justify-content-center" style="height: 72vh;">
+        <div class="text-center">
+          <div class="spinner-border mb-3" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+          <p class="text-muted">Initializing board...</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    (function () {
+      'use strict';
+      var buildBoardState = window.BoardLiveCardsLocalStorage && window.BoardLiveCardsLocalStorage.buildBoardState;
+      var applyNotification = window.BoardLiveCardsLocalStorage && window.BoardLiveCardsLocalStorage.applyNotification;
+      var createBoardLiveCardsLocalStorage = window.BoardLiveCardsLocalStorage && window.BoardLiveCardsLocalStorage.create;
+      if (!buildBoardState || !applyNotification || !createBoardLiveCardsLocalStorage) {
+        document.getElementById('boardRoot').innerHTML =
+          '<div class="alert alert-danger">Required scripts not loaded. Run <code>npm run build:browser</code> first.</div>';
+        return;
+      }
+      var NAMESPACE = 'demo-board';
+      var currentMode = 'canvas';
+      var board = null;
+      var stateRef = { current: null }; // read accessor for resolve(); board.setState owns the state
+      var app = null;
+      var pendingNotifications = []; // buffer for notifications arriving before board is ready
+      function clone(x) { return JSON.parse(JSON.stringify(x)); }
+      function nowIso() { return new Date().toISOString(); }
+      var INLINE_CARDS = [
+        {
+          id: 'card-portfolio',
+          meta: {
+            title: 'My Portfolio',
+            tags: ['portfolio'],
+            desc: 'Manage your holdings inline. Changes propagate downstream.',
+          },
+          provides: [{ bindTo: 'holdings', ref: 'card_data.holdings' }],
+          compute: [],
+          view: {
+            elements: [
+              {
+                kind: 'editable-table',
+                label: 'Holdings',
+                data: {
+                  bind: 'card_data.holdings',
+                  writeTo: 'card_data.holdings',
+                  columns: ['ticker', 'quantity', 'cost_basis'],
+                  schema: { properties: { quantity: { type: 'number' }, cost_basis: { type: 'number' } } },
+                },
+              },
+            ],
+            layout: { board: { col: 4, order: 1 }, canvas: { x: 20, y: 50, w: 340, h: 330 } },
+            features: { refresh: true, chat: true },
+          },
+          card_data: {
+            holdings: [
+              { ticker: 'AAPL', quantity: 10, cost_basis: 150 },
+              { ticker: 'MSFT', quantity: 5, cost_basis: 310 },
+              { ticker: 'GOOGL', quantity: 2, cost_basis: 280 },
+              { ticker: 'TSLA', quantity: 3, cost_basis: 200 },
+            ],
+          },
+        },
+        {
+          id: 'card-market-prices',
+          meta: {
+            title: 'Market Prices',
+            tags: ['prices', 'market'],
+            desc: 'Fetches prices from Yahoo Finance v8 API using source_def url-list.',
+          },
+          requires: ['holdings'],
+          source_defs: [
+            {
+              bindTo: 'quotes',
+              outputFile: 'market-prices-quotes.json',
+              projections: {
+                url_list: "requires.holdings.ticker.('https://query1.finance.yahoo.com/v8/finance/chart/' & $ & '?interval=1d&range=1d')",
+              },
+              'url-list': {
+                headers: { 'User-Agent': 'Mozilla/5.0 (compatible; portfolio-tracker-demo/1.0)' },
+                cacheTimeout: 300,
+              },
+            },
+          ],
+          compute: [
+            {
+              bindTo: 'normalizedQuotes',
+              expr: '{ "quoteResponse": { "result": $map(fetched_sources.quotes, function($r) { ($m := $r.chart.result[0].meta; $prev := $m.chartPreviousClose; $chg := $m.regularMarketPrice - $prev; { "symbol": $m.symbol, "shortName": $m.shortName ? $m.shortName : $m.longName, "regularMarketPrice": $m.regularMarketPrice, "regularMarketChange": $chg, "regularMarketChangePercent": $chg / $prev * 100 }) }), "error": null } }',
+            },
+            {
+              bindTo: 'prices',
+              expr: '$map(computed_values.normalizedQuotes.quoteResponse.result, function($q) { {"ticker": $q.symbol, "name": $q.shortName, "price": $round($q.regularMarketPrice, 2), "change": $round($q.regularMarketChange, 2), "chg_pct": $round($q.regularMarketChangePercent, 2)} })',
+            },
+          ],
+          provides: [{ bindTo: 'quotes', ref: 'computed_values.normalizedQuotes' }],
+          view: {
+            elements: [
+              {
+                kind: 'table',
+                label: 'Prices',
+                data: { bind: 'computed_values.prices', columns: ['ticker', 'name', 'price', 'change', 'chg_pct'], sortable: true },
+              },
+            ],
+            layout: { board: { col: 4, order: 2 }, canvas: { x: 400, y: 50, w: 400, h: 340 } },
+            features: { refresh: true },
+          },
+          card_data: {},
+        },
+        {
+          id: 'card-portfolio-value',
+          meta: {
+            title: 'Portfolio Value',
+            tags: ['portfolio', 'value'],
+            desc: 'Calculates value and P&L from holdings + quotes.',
+          },
+          requires: ['holdings', 'quotes'],
+          provides: [{ bindTo: 'positions', ref: 'computed_values.positions' }],
+          compute: [
+            {
+              bindTo: 'positions',
+              expr: '($hMap := $merge(requires.holdings.{ticker: $}); $map(requires.quotes.quoteResponse.result, function($q) { ($h := $lookup($hMap, $q.symbol); $qty := $h.quantity; $cb := $h.cost_basis; $val := $round($q.regularMarketPrice * $qty, 2); $cost := $round($cb * $qty, 2); $chg := $round($q.regularMarketChange * $qty, 2); {"ticker": $q.symbol, "quantity": $qty, "cost_basis": $cb, "price": $round($q.regularMarketPrice, 2), "value": $val, "gain_$": $round($val - $cost, 2), "gain_%": $round(($val - $cost) / $cost * 100, 2), "chg_$": $chg, "chg_pct": $round($q.regularMarketChangePercent, 2)}) }))',
+            },
+            {
+              bindTo: 'totalValue',
+              expr: '$round($sum(computed_values.positions.value), 2)',
+            },
+            {
+              bindTo: 'gainers',
+              expr: '$count($filter(computed_values.positions, function($p){ $p.chg_pct > 0 }))',
+            },
+            {
+              bindTo: 'losers',
+              expr: '$count($filter(computed_values.positions, function($p){ $p.chg_pct < 0 }))',
+            },
+            {
+              bindTo: 'gainersLosers',
+              expr: "computed_values.gainers & ' up · ' & computed_values.losers & ' down'",
+            },
+          ],
+          view: {
+            elements: [
+              { kind: 'metric', label: 'Portfolio Value ($)', data: { bind: 'computed_values.totalValue' } },
+              { kind: 'text', data: { bind: 'computed_values.gainersLosers' } },
+              { kind: 'table', label: 'Positions', data: { bind: 'computed_values.positions', columns: ['ticker', 'value', 'gain_$', 'gain_%'], sortable: true } },
+            ],
+            layout: { board: { col: 4, order: 3 }, canvas: { x: 840, y: 50, w: 420, h: 380 } },
+            features: { chat: true },
+          },
+          card_data: {},
+        },
+        {
+          id: 'card-portfolio-intelligence',
+          meta: {
+            title: 'Portfolio Intelligence',
+            tags: ['portfolio', 'analysis'],
+            desc: 'Derived analysis from computed positions.',
+          },
+          requires: ['positions'],
+          source_defs: [
+            {
+              bindTo: 'analysis',
+              outputFile: 'card-concentration-analysis.json',
+              kind: 'mock-llm-random',
+              prompt: 'Analyze this portfolio JSON and provide concise mix, pnl, risks, and action insights: {{positions_json}}',
+              projections: {
+                positions_json: 'requires.positions',
+              },
+            },
+          ],
+          compute: [
+            { bindTo: 'intel', expr: 'fetched_sources.analysis.intel ? fetched_sources.analysis.intel : (fetched_sources.analysis.mix ? fetched_sources.analysis.mix : fetched_sources.analysis.response)' },
+            { bindTo: 'risk_signal', expr: 'fetched_sources.analysis.risk_signal ? fetched_sources.analysis.risk_signal : fetched_sources.analysis.risks' },
+            { bindTo: 'action_signal', expr: 'fetched_sources.analysis.action_signal ? fetched_sources.analysis.action_signal : (fetched_sources.analysis.action ? fetched_sources.analysis.action : fetched_sources.analysis.response)' },
+          ],
+          provides: [
+            { bindTo: 'intel', ref: 'computed_values.intel' },
+            { bindTo: 'risk_signal', ref: 'computed_values.risk_signal' },
+            { bindTo: 'action_signal', ref: 'computed_values.action_signal' },
+          ],
+          view: {
+            elements: [
+              { kind: 'markdown', label: 'Intel', data: { bind: 'computed_values.intel' } },
+            ],
+            layout: { board: { col: 3, order: 4 }, canvas: { x: 1300, y: 50, w: 340, h: 200 } },
+            features: { refresh: true, chat: true },
+          },
+          card_data: {},
+        },
+        {
+          id: 'card-portfolio-risks',
+          meta: { title: 'Risk Watch', tags: ['portfolio', 'risk'], desc: 'Risk signals from Portfolio Intelligence.' },
+          requires: ['risk_signal'],
+          view: {
+            elements: [{ kind: 'markdown', data: { bind: 'requires.risk_signal' } }],
+            layout: { board: { col: 3, order: 5 }, canvas: { x: 1300, y: 270, w: 340, h: 220 } },
+          },
+          card_data: {},
+        },
+        {
+          id: 'card-portfolio-action',
+          meta: { title: 'Action Signal', tags: ['portfolio', 'action'], desc: 'Action recommendation from Portfolio Intelligence.' },
+          requires: ['action_signal'],
+          view: {
+            elements: [{ kind: 'markdown', data: { bind: 'requires.action_signal' } }],
+            layout: { board: { col: 4, order: 6 }, canvas: { x: 1660, y: 50, w: 300, h: 160 } },
+          },
+          card_data: {},
+        },
+      ];
+      function hasPersistedBoardState() {
+        var key = NAMESPACE + ':card-store:kv:_index';
+        try { return localStorage.getItem(key) !== null; } catch { return false; }
+      }
+      // ── Task executor helpers (protocol-native) ─────────────────────────────
+      var TASK_CACHE_KEY = NAMESPACE + ':task-executor-cache';
+      function readTaskCache() {
+        try {
+          var raw = localStorage.getItem(TASK_CACHE_KEY);
+          return raw ? JSON.parse(raw) : {};
+        } catch (_) { return {}; }
+      }
+      function writeTaskCache(cache) {
+        try { localStorage.setItem(TASK_CACHE_KEY, JSON.stringify(cache)); } catch (_) {}
+      }
+      var TASK_EXECUTOR_CAPABILITIES = {
+        version: '1.0',
+        executor: 'portfolio-tracker-browser-task-executor',
+        subcommands: ['run-source-fetch', 'describe-capabilities'],
+        sourceKinds: {
+          'mock-llm-random': {
+            description: 'Return a pre-cooked LLM-like response after a random delay based on source_def.prompt.',
+            inputSchema: {
+              kind: { type: 'string', required: true, description: 'Must be "mock-llm-random".' },
+              prompt: { type: 'string', required: true, description: 'Prompt text used to pick a pre-cooked response.' },
+              bindTo: { type: 'string', required: true, description: 'Output token for fetched source.' },
+              outputFile: { type: 'string', required: false, description: 'Optional output artifact filename.' },
+            },
+            outputShape: '{ response: string, latency_ms: number, prompt_echo: string, intel?: string, risk_signal?: string, action_signal?: string }',
+          },
+          mock: {
+            description: 'Return static in-page mock data by source_def.mock key.',
+            inputSchema: {
+              mock: { type: 'string', required: true, description: 'Key in in-page MOCK_DB.' },
+              bindTo: { type: 'string', required: true, description: 'Output token for fetched source.' },
+              outputFile: { type: 'string', required: false, description: 'Optional output artifact filename.' },
+            },
+            outputShape: 'any JSON value from MOCK_DB[mock].',
+          },
+          url: {
+            description: 'Fetch JSON from a single URL described by source_def.url.url.',
+            inputSchema: {
+              url: { type: 'object', required: true, description: 'Object containing url string and optional headers/args.' },
+              bindTo: { type: 'string', required: true, description: 'Output token for fetched source.' },
+              outputFile: { type: 'string', required: false, description: 'Optional output artifact filename.' },
+            },
+            outputShape: 'JSON object from fetched URL.',
+          },
+          'url-list': {
+            description: 'Fetch JSON from each resolved URL in source_def._projections.url_list.',
+            inputSchema: {
+              'url-list': { type: 'object', required: true, description: 'Object with optional request headers.' },
+              bindTo: { type: 'string', required: true, description: 'Output token for fetched source.' },
+              outputFile: { type: 'string', required: false, description: 'Optional output artifact filename.' },
+              _projections: { type: 'object', required: true, description: 'Must include resolved url_list array.' },
+            },
+            outputShape: 'JSON array, one element per fetched URL.',
+          },
+        },
+      };
+      var MOCK_DB = {
+        analysis: {
+          intel: '- Local demo mode: using mock analysis source.\n- Provide a custom executor for copilot/workiq in CLI hosts.',
+          risk_signal: '- TSLA: elevated volatility.\n- Portfolio concentration is moderate in tech names.',
+          action_signal: '- Hold positions; rebalance only if single-name concentration crosses 35%.',
+          // Back-compat aliases for persisted old card definitions / cached payloads.
+          mix: '- Local demo mode: using mock analysis source.\n- Provide a custom executor for copilot/workiq in CLI hosts.',
+          risks: '- TSLA: elevated volatility.\n- Portfolio concentration is moderate in tech names.',
+          action: '- Hold positions; rebalance only if single-name concentration crosses 35%.',
+        },
+      };
+      function interpolateTemplate(template, values) {
+        return String(template || '').replace(/\{\{\s*([a-zA-Z0-9_.-]+)\s*\}\}/g, function (_m, key) {
+          var v = values && Object.prototype.hasOwnProperty.call(values, key) ? values[key] : '';
+          if (v === null || v === undefined) return '';
+          if (typeof v === 'object') {
+            try { return JSON.stringify(v); } catch (_e) { return String(v); }
+          }
+          return String(v);
+        });
+      }
+      function resolveUrlsForSourceDef(sourceDef) {
+        if (sourceDef.url && sourceDef.url.url) {
+          var context = Object.assign({}, sourceDef._projections || {}, (sourceDef.url.args || {}));
+          return [interpolateTemplate(sourceDef.url.url, context)];
+        }
+        if (sourceDef['url-list']) {
+          return Array.isArray(sourceDef._projections && sourceDef._projections.url_list)
+            ? sourceDef._projections.url_list
+            : [];
+        }
+        return [];
+      }
+      var DEFAULT_QUOTES = {
+        AAPL: { symbol: 'AAPL', longName: 'Apple Inc.', regularMarketPrice: 290, regularMarketChange: 0.8, regularMarketChangePercent: 0.28 },
+        MSFT: { symbol: 'MSFT', longName: 'Microsoft Corp.', regularMarketPrice: 420, regularMarketChange: -0.6, regularMarketChangePercent: -0.14 },
+        GOOGL: { symbol: 'GOOGL', longName: 'Alphabet Inc.', regularMarketPrice: 395, regularMarketChange: 1.2, regularMarketChangePercent: 0.30 },
+        TSLA: { symbol: 'TSLA', longName: 'Tesla Inc.', regularMarketPrice: 399, regularMarketChange: -2.1, regularMarketChangePercent: -0.52 },
+      };
+      function buildDefaultYahooQuoteResponse(url) {
+        var m = String(url || '').match(/\/chart\/([^?]+)/);
+        var symbol = m ? decodeURIComponent(m[1]).toUpperCase() : 'UNKNOWN';
+        var quote = DEFAULT_QUOTES[symbol] || {
+          symbol: symbol,
+          longName: symbol,
+          regularMarketPrice: 150,
+          regularMarketChange: 0,
+          regularMarketChangePercent: 0,
+        };
+        return {
+          chart: {
+            result: [{ meta: quote }],
+            error: null,
+          },
+        };
+      }
+      function buildSyntheticYahooQuoteResponse(url) {
+        var m = String(url || '').match(/\/chart\/([^?]+)/);
+        var symbol = m ? decodeURIComponent(m[1]).toUpperCase() : 'UNKNOWN';
+        var seed = symbol.split('').reduce(function (s, ch) { return s + ch.charCodeAt(0); }, 0);
+        var price = 90 + (seed % 260);
+        var change = (((seed % 21) - 10) / 10);
+        var changePct = price ? (change / price) * 100 : 0;
+        return {
+          chart: {
+            result: [{
+              meta: {
+                symbol: symbol,
+                longName: symbol,
+                regularMarketPrice: Number(price.toFixed(2)),
+                regularMarketChange: Number(change.toFixed(2)),
+                regularMarketChangePercent: Number(changePct.toFixed(2)),
+              },
+            }],
+            error: null,
+          },
+        };
+      }
+      function hasValidYahooMeta(payload) {
+        return !!(
+          payload
+          && payload.chart
+          && Array.isArray(payload.chart.result)
+          && payload.chart.result[0]
+          && payload.chart.result[0].meta
+          && typeof payload.chart.result[0].meta.symbol === 'string'
+        );
+      }
+      function normalizeYahooQuotePayload(url, payload) {
+        return hasValidYahooMeta(payload) ? payload : buildDefaultYahooQuoteResponse(url);
+      }
+      function normalizeYahooQuoteList(urls, list) {
+        var src = Array.isArray(list) ? list : [];
+        return urls.map(function (u, idx) {
+          return normalizeYahooQuotePayload(u, src[idx]);
+        });
+      }
+      function pickRandomItem(arr) {
+        if (!Array.isArray(arr) || arr.length === 0) return '';
+        return arr[Math.floor(Math.random() * arr.length)];
+      }
+      function resolveMockLlmResponse(prompt) {
+        var p = String(prompt || '').toLowerCase();
+        if (p.indexOf('portfolio') >= 0 || p.indexOf('holding') >= 0 || p.indexOf('ticker') >= 0) {
+          return pickRandomItem([
+            'Portfolio summary: concentration is moderate; rebalance only if a single position exceeds 35%.',
+            'Portfolio insight: momentum is mixed today, with gains led by high-beta positions.',
+            'Portfolio note: maintain allocation discipline and review downside risk before adding exposure.',
+          ]);
+        }
+        if (p.indexOf('risk') >= 0 || p.indexOf('volatility') >= 0 || p.indexOf('drawdown') >= 0) {
+          return pickRandomItem([
+            'Risk view: near-term volatility is elevated; consider tighter stop-loss thresholds.',
+            'Risk view: correlation risk is rising; diversify across non-overlapping factors.',
+            'Risk view: downside tails are widening; reduce leverage and preserve optionality.',
+          ]);
+        }
+        if (p.indexOf('action') >= 0 || p.indexOf('recommend') >= 0 || p.indexOf('next step') >= 0) {
+          return pickRandomItem([
+            'Suggested action: hold current positions and reassess after the next session close.',
+            'Suggested action: trim top concentration by 5% and rotate into lower-volatility names.',
+            'Suggested action: stage entries over multiple intervals instead of a single fill.',
+          ]);
+        }
+        return pickRandomItem([
+          'Mock LLM response: scenario remains neutral with balanced upside and downside signals.',
+          'Mock LLM response: wait for confirmation before changing allocation materially.',
+          'Mock LLM response: maintain risk controls and monitor regime shift indicators.',
+        ]);
+      }
+      function buildMockLlmAnalysis(prompt) {
+        var p = String(prompt || '').toLowerCase();
+        if (p.indexOf('portfolio') >= 0 || p.indexOf('positions') >= 0 || p.indexOf('ticker') >= 0) {
+          return {
+            intel: pickRandomItem([
+              '- Largest exposure remains concentrated in mega-cap tech names.\n- Diversification is moderate across current holdings.',
+              '- Portfolio mix is growth-tilted with moderate single-name concentration.\n- P&L contribution is uneven across current positions.',
+            ]),
+            risk_signal: pickRandomItem([
+              '- Primary risk is concentration and correlation during volatility spikes.\n- Monitor drawdown risk in top-weight positions.',
+              '- Risk posture is medium-high due to momentum clustering.\n- Downside sensitivity increases in gap-down sessions.',
+            ]),
+            action_signal: pickRandomItem([
+              '- Hold core positions and rebalance only if top holding breaches concentration threshold.',
+              '- Trim strongest outperformer modestly and redistribute into lower-volatility exposure.',
+            ]),
+          };
+        }
+        var generic = resolveMockLlmResponse(prompt);
+        return {
+          intel: generic,
+          risk_signal: generic,
+          action_signal: generic,
+        };
+      }
+      async function delayedMockLlmResult(prompt) {
+        var delayMs = 1000 + Math.floor(Math.random() * 2001);
+        await new Promise(function (resolve) { setTimeout(resolve, delayMs); });
+        var analysis = buildMockLlmAnalysis(prompt);
+        return {
+          response: analysis.intel || resolveMockLlmResponse(prompt),
+          latency_ms: delayMs,
+          prompt_echo: String(prompt || ''),
+          intel: analysis.intel,
+          risk_signal: analysis.risk_signal,
+          action_signal: analysis.action_signal,
+        };
+      }
+      /** Attempt a real network fetch for a single URL. Returns null on failure. */
+      function fetchUrlFromNetwork(url, headers) {
+        return fetch(url, { method: 'GET', headers: headers || {} })
+          .then(function (resp) { if (!resp.ok) throw new Error('HTTP ' + resp.status); return resp.json(); })
+          .catch(function () { return null; });
+      }
+      async function bootstrap() {
+        var initCards = hasPersistedBoardState() ? [] : clone(INLINE_CARDS);
+        // Task executor executes only declared source kinds.
+        // No shell-side cache or computed-value synthesis.
+        app = createBoardLiveCardsLocalStorage(NAMESPACE, {
+          cards: initCards,
+          taskExecutor: async function (_ref, args) {
+            if (args && (args.subcommand === 'describe-capabilities' || args.command === 'describe-capabilities')) {
+              return { dispatched: true, data: clone(TASK_EXECUTOR_CAPABILITIES) };
+            }
+            var sourceDef = args && args.source_def;
+            if (!sourceDef || !sourceDef.bindTo) return { dispatched: true };
+            var callbackToken = args.callback && args.callback.token;
+            if (!callbackToken) return { dispatched: true };
+            // Extract cardId from callback token
+            var cardId = 'unknown';
+            try {
+              var decoded = JSON.parse(atob(callbackToken.replace(/-/g, '+').replace(/_/g, '/')));
+              cardId = decoded.cid || 'unknown';
+            } catch (_) {}
+            var bindTo = sourceDef.bindTo;
+            var urls = resolveUrlsForSourceDef(sourceDef);
+            var headers = sourceDef.url && sourceDef.url.headers
+              ? sourceDef.url.headers
+              : (sourceDef['url-list'] && sourceDef['url-list'].headers ? sourceDef['url-list'].headers : {});
+            var resultValue = null;
+            if (sourceDef.kind === 'mock-llm-random') {
+              if (typeof sourceDef.prompt !== 'string' || sourceDef.prompt.trim() === '') {
+                app.reportSourceFetchFailure(callbackToken, 'mock-llm-random requires non-empty prompt');
+                return { dispatched: false, error: 'mock-llm-random requires non-empty prompt' };
+              }
+              var resolvedPrompt = interpolateTemplate(sourceDef.prompt, sourceDef._projections || {});
+              resultValue = await delayedMockLlmResult(resolvedPrompt);
+            } else if (sourceDef.mock) {
+              resultValue = MOCK_DB[sourceDef.mock];
+              if (resultValue === undefined) {
+                app.reportSourceFetchFailure(callbackToken, 'mock key not found: ' + sourceDef.mock);
+                return { dispatched: false, error: 'mock key not found: ' + sourceDef.mock };
+              }
+            /* Yahoo Finance url/url-list branch disabled — re-enable to fetch live quotes.
+            } else if (sourceDef.url || sourceDef['url-list']) {
+              if (!Array.isArray(urls) || urls.length === 0) {
+                app.reportSourceFetchFailure(callbackToken, 'no resolved URLs for source_def');
+                return { dispatched: false, error: 'no resolved URLs for source_def' };
+              }
+              var requestKey = JSON.stringify(urls);
+              var cache = readTaskCache();
+              if (!cache.completed) cache.completed = {};
+              if (!cache.completed[cardId]) cache.completed[cardId] = {};
+              var cachedEntry = cache.completed[cardId][bindTo];
+              var cachedValue = null;
+              if (cachedEntry && typeof cachedEntry === 'object' && !Array.isArray(cachedEntry)
+                && Object.prototype.hasOwnProperty.call(cachedEntry, '_requestKey')
+                && Object.prototype.hasOwnProperty.call(cachedEntry, 'value')) {
+                if (cachedEntry._requestKey === requestKey) cachedValue = cachedEntry.value;
+              }
+              if (cachedValue === null) {
+                var seeded = sourceDef.url
+                  ? buildDefaultYahooQuoteResponse(urls[0])
+                  : urls.map(function (u) { return buildDefaultYahooQuoteResponse(u); });
+                cache.completed[cardId][bindTo] = { _requestKey: requestKey, value: clone(seeded) };
+                writeTaskCache(cache);
+                cachedValue = seeded;
+              }
+              // Ensure cached payload shape always matches quote compute expectations.
+              cachedValue = sourceDef.url
+                ? normalizeYahooQuotePayload(urls[0], cachedValue)
+                : normalizeYahooQuoteList(urls, cachedValue);
+              resultValue = cachedValue;
+              // Fire-and-forget refresh: updates localStorage cache for next invocation.
+              Promise.all(urls.map(function (u) { return fetchUrlFromNetwork(u, headers); }))
+                .then(function (networkResults) {
+                  var hasAny = networkResults.some(function (r) { return r !== null; });
+                  if (!hasAny) return;
+                  var freshCache = readTaskCache();
+                  if (!freshCache.completed) freshCache.completed = {};
+                  if (!freshCache.completed[cardId]) freshCache.completed[cardId] = {};
+                  var currentEntry = freshCache.completed[cardId][bindTo];
+                  var currentValue = (currentEntry && currentEntry.value !== undefined) ? currentEntry.value : cachedValue;
+                  var nextValue;
+                  if (sourceDef.url) {
+                    nextValue = networkResults[0] !== null
+                      ? normalizeYahooQuotePayload(urls[0], networkResults[0])
+                      : normalizeYahooQuotePayload(urls[0], currentValue);
+                  } else {
+                    var base = normalizeYahooQuoteList(urls, currentValue);
+                    networkResults.forEach(function (res, idx) {
+                      if (res !== null) base[idx] = normalizeYahooQuotePayload(urls[idx], res);
+                    });
+                    nextValue = base;
+                  }
+                  freshCache.completed[cardId][bindTo] = { _requestKey: requestKey, value: clone(nextValue) };
+                  writeTaskCache(freshCache);
+                })
+                .catch(function () { keep cache as-is on refresh failure });
+            */
+            } else if (sourceDef.url || sourceDef['url-list']) {
+              // Seeded synthetic quotes; no network fetch.
+              if (!Array.isArray(urls) || urls.length === 0) {
+                app.reportSourceFetchFailure(callbackToken, 'no resolved URLs for source_def');
+                return { dispatched: false, error: 'no resolved URLs for source_def' };
+              }
+              resultValue = sourceDef.url
+                ? buildDefaultYahooQuoteResponse(urls[0])
+                : urls.map(function (u) { return buildDefaultYahooQuoteResponse(u); });
+            } else {
+              app.reportSourceFetchFailure(callbackToken, 'unsupported source kind in browser executor');
+              return { dispatched: false, error: 'unsupported source kind in browser executor' };
+            }
+            var blobKey = cardId + '/' + (sourceDef.outputFile || bindTo + '.json');
+            var blobRef = app.writeMemoryBlob(blobKey, JSON.stringify(resultValue));
+            app.reportSourceFetched(callbackToken, blobRef);
+            return { dispatched: true };
+          },
+          onWarn: function (msg) { console.warn('[localstorage-runtime]', msg); },
+          onBoardChange: function (event) {
+            if (!event || !Array.isArray(event.notifications) || event.notifications.length === 0) return;
+            if (!board) {
+              // Board not yet created — buffer for replay after initialization.
+              pendingNotifications.push.apply(pendingNotifications, event.notifications);
+              return;
+            }
+            if (board.core && board.core.devMode) {
+              console.log('[notifications]', event.notifications);
+            }
+            board.setState(function (prev) {
+              var next = applyNotification(prev, event.notifications, function () {
+                return app.getState();
+              });
+              stateRef.current = next;
+              return next;
+            });
+          },
+        });
+        document.getElementById('boardTitle').textContent = 'Portfolio Tracker (LocalStorage Runtime)';
+        document.getElementById('boardDesc').textContent =
+          'Cards are inline in HTML. Runtime state is persisted in localStorage.';
+        await app.bootstrap();
+        // Build initial state: apply any notifications buffered during bootstrap
+        // (the persisted-state snapshot from publishPersistedStateSnapshot), then
+        // fall back to a direct getState() read for fresh starts where no snapshot
+        // was published.
+        stateRef.current = pendingNotifications.length > 0
+          ? applyNotification(buildBoardState(null, null), pendingNotifications, function () { return app.getState(); })
+          : buildBoardState(app.getState(), null);
+        pendingNotifications = [];
+        var engine = LiveCard.init({
+          resolve: function (id) { return stateRef.current && stateRef.current.modelsById[id]; },
+          chartLib: (typeof Chart !== 'undefined') ? Chart : null,
+          markdown: (typeof marked !== 'undefined') ? function (t) { return marked.parse(t); } : null,
+          sanitize: (typeof DOMPurify !== 'undefined') ? function (t) { return DOMPurify.sanitize(t); } : null,
+          onPatchState: async function (id, patch) {
+            await app.patchCard(id, patch || {});
+          },
+          onRefresh: async function (id) {
+            await app.patchCard(id, {});
+          },
+          onAction: async function (id, actionType, payload) {
+            await app.applyCardAction(id, actionType, payload || {});
+          },
+          getChatMessages: function (id) {
+            return app.readChatRecords(id).map(function (m) {
+              return {
+                role: m && typeof m.role === 'string' ? m.role : 'system',
+                text: m && typeof m.text === 'string' ? m.text : '',
+                files: Array.isArray(m && m.files) ? m.files : [],
+              };
+            });
+          },
+        });
+        document.getElementById('boardRoot').innerHTML = '';
+        board = LiveCard.Board(engine, document.getElementById('boardRoot'), {
+          initialState: stateRef.current,
+          getNodeIds: function (s) { return s.cardIds; },
+          selectNode: function (s, id) { return s.modelsById[id]; },
+          mode: currentMode,
+          canvas: {},
+        });
+        if (board && document.getElementById('devModeToggle').checked) {
+          board.core.setDevMode(true);
+        }
+        document.getElementById('modeBoard').addEventListener('click', function () {
+          currentMode = 'board';
+          if (board) board.core.setMode('board');
+        });
+        document.getElementById('modeCanvas').addEventListener('click', function () {
+          currentMode = 'canvas';
+          if (board) board.core.setMode('canvas');
+        });
+        document.getElementById('autoLayout').addEventListener('click', function () {
+          currentMode = 'canvas';
+          if (board) {
+            board.core.setMode('canvas');
+            board.core.autoLayout();
+          }
+        });
+        document.getElementById('devModeToggle').addEventListener('change', function () {
+          if (board) board.core.setDevMode(this.checked);
+        });
+      }
+      function resetDemoStorage() {
+        localStorage.clear();
+      }
+      function showResetOverlay() {
+        var overlay = document.createElement('div');
+        overlay.style.cssText = 'position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);';
+        overlay.innerHTML = '<div style="color:#fff;font-size:2rem;font-weight:600;letter-spacing:0.05em;">Resetting\u2026</div>';
+        document.body.appendChild(overlay);
+      }
+      document.getElementById('resetDemo').addEventListener('click', function () {
+        showResetOverlay();
+        setTimeout(function () {
+          resetDemoStorage();
+          window.location.reload();
+        }, 400);
+      });
+      bootstrap().catch(function (err) {
+        console.error(err);
+        document.getElementById('boardRoot').innerHTML =
+          '<div class="alert alert-danger">Failed to start LocalStorage runtime demo: ' +
+          String(err && err.message || err) + '</div>';
+      });
+    })();
+  </script>
+</body>
+</html>