@rune-kit/rune 2.8.0 → 2.11.0

package/extensions/trading/skills/chart-components.md

@@ -1,55 +1,55 @@
----
-name: "chart-components"
-pack: "@rune/trading"
-description: "Financial chart patterns — candlestick, line, and area charts using TradingView Lightweight Charts. Real-time update handlers, zoom, crosshair sync, indicator overlays, and responsive layout with reduced-motion support."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# chart-components
-
-Financial chart patterns — candlestick, line, and area charts using TradingView Lightweight Charts. Real-time update handlers, zoom, crosshair sync, indicator overlays, and responsive layout with reduced-motion support.
-
-#### Workflow
-
-**Step 1 — Detect chart library and configure chart instance**
-Use `Grep` to check for `lightweight-charts` or `@tradingview/charting_library` in `package.json`. Initialize with `createChart(container, { autoSize: true, layout: { background: { color: '#0c1419' } } })`. Create a `CandlestickSeries` with green/red up/down colors matching the project palette.
-
-**Step 2 — Real-time update handler**
-Subscribe to the normalized WebSocket feed from `realtime-data`. On each tick, call `series.update({ time, open, high, low, close, volume })`. Batch rapid updates with `requestAnimationFrame` to avoid layout thrashing. Use `Read` to verify the container element is stable (not re-mounting on every render).
-
-**Step 3 — Responsive layout and reduced-motion**
-Use `Bash` to run `window.matchMedia('(prefers-reduced-motion: reduce)')` check at init time. When true, disable chart animations (`animation: { duration: 0 }`). Add `ResizeObserver` on the container and call `chart.applyOptions({ width, height })` on size change.
-
-#### Example
-
-```typescript
-import { createChart, CandlestickSeries } from 'lightweight-charts';
-
-function initCandlestickChart(container: HTMLElement): CandlestickSeries {
-  const reducedMotion = window.matchMedia(
-    '(prefers-reduced-motion: reduce)',
-  ).matches;
-
-  const chart = createChart(container, {
-    autoSize: true,
-    layout: { background: { color: '#0c1419' }, textColor: '#a0aeb8' },
-    grid: { vertLines: { color: '#2a3f52' }, horzLines: { color: '#2a3f52' } },
-    crosshair: { mode: 1 },
-    animation: { duration: reducedMotion ? 0 : 300 },
-  });
-
-  const series = chart.addSeries(CandlestickSeries, {
-    upColor: '#00d084',
-    downColor: '#ff6b6b',
-    borderVisible: false,
-    wickUpColor: '#00d084',
-    wickDownColor: '#ff6b6b',
-  });
-
-  new ResizeObserver(() => chart.applyOptions({ width: container.clientWidth }))
-    .observe(container);
-
-  return series;
-}
-```
+---
+name: "chart-components"
+pack: "@rune/trading"
+description: "Financial chart patterns — candlestick, line, and area charts using TradingView Lightweight Charts. Real-time update handlers, zoom, crosshair sync, indicator overlays, and responsive layout with reduced-motion support."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# chart-components
+
+Financial chart patterns — candlestick, line, and area charts using TradingView Lightweight Charts. Real-time update handlers, zoom, crosshair sync, indicator overlays, and responsive layout with reduced-motion support.
+
+#### Workflow
+
+**Step 1 — Detect chart library and configure chart instance**
+Use `Grep` to check for `lightweight-charts` or `@tradingview/charting_library` in `package.json`. Initialize with `createChart(container, { autoSize: true, layout: { background: { color: '#0c1419' } } })`. Create a `CandlestickSeries` with green/red up/down colors matching the project palette.
+
+**Step 2 — Real-time update handler**
+Subscribe to the normalized WebSocket feed from `realtime-data`. On each tick, call `series.update({ time, open, high, low, close, volume })`. Batch rapid updates with `requestAnimationFrame` to avoid layout thrashing. Use `Read` to verify the container element is stable (not re-mounting on every render).
+
+**Step 3 — Responsive layout and reduced-motion**
+Use `Bash` to run `window.matchMedia('(prefers-reduced-motion: reduce)')` check at init time. When true, disable chart animations (`animation: { duration: 0 }`). Add `ResizeObserver` on the container and call `chart.applyOptions({ width, height })` on size change.
+
+#### Example
+
+```typescript
+import { createChart, CandlestickSeries } from 'lightweight-charts';
+
+function initCandlestickChart(container: HTMLElement): CandlestickSeries {
+  const reducedMotion = window.matchMedia(
+    '(prefers-reduced-motion: reduce)',
+  ).matches;
+
+  const chart = createChart(container, {
+    autoSize: true,
+    layout: { background: { color: '#0c1419' }, textColor: '#a0aeb8' },
+    grid: { vertLines: { color: '#2a3f52' }, horzLines: { color: '#2a3f52' } },
+    crosshair: { mode: 1 },
+    animation: { duration: reducedMotion ? 0 : 300 },
+  });
+
+  const series = chart.addSeries(CandlestickSeries, {
+    upColor: '#00d084',
+    downColor: '#ff6b6b',
+    borderVisible: false,
+    wickUpColor: '#00d084',
+    wickDownColor: '#ff6b6b',
+  });
+
+  new ResizeObserver(() => chart.applyOptions({ width: container.clientWidth }))
+    .observe(container);
+
+  return series;
+}
+```

package/extensions/trading/skills/experiment-loop.md

@@ -1,125 +1,125 @@
----
-name: "experiment-loop"
-pack: "@rune/trading"
-description: "Scientific method for trading strategy development — hypothesize → implement → backtest → analyze → refine. Prevents the #1 strategy development failure: changing parameters randomly without tracking what was tested, what worked, and why."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# experiment-loop
-
-Scientific method for trading strategy development — hypothesize → implement → backtest → analyze → refine. Prevents the #1 strategy development failure: changing parameters randomly without tracking what was tested, what worked, and why.
-
-#### Workflow
-
-**Step 1 — Define hypothesis**
-Every strategy change starts as a falsifiable hypothesis:
-```
-HYPOTHESIS: [What you believe]
-EVIDENCE: [Why you believe it — chart observation, backtest anomaly, market regime]
-TEST: [How to verify — specific backtest config, date range, token set]
-SUCCESS CRITERIA: [Measurable threshold — "win rate > 55% AND max drawdown < 15%"]
-FAILURE CRITERIA: [When to reject — "win rate < 45% OR drawdown > 25%"]
-```
-
-Check `.rune/experiments/` for prior experiments on the same component. If a similar hypothesis was already tested and rejected, flag it: "This was tested in experiment #12 and rejected because [reason]. Proceed anyway?"
-
-**Step 2 — Implement variant**
-Create the strategy variant in an isolated branch or config:
-- Use `Grep` to find the parameter or logic being changed
-- Create a named variant (e.g., `rsi_entry_v6_longer_period`) — NEVER modify the production logic directly
-- Document the exact change: "Changed RSI period from 7 to 14, challenge threshold from 65 to 60"
-- If logic change (not just parameter): ensure backtest engine mirrors the change (production-backtest sync from `trade-logic`)
-
-**Step 3 — Run backtest**
-Execute backtest against the defined test conditions:
-- Use `Bash` to run the backtest command with the variant config
-- Capture results: total PnL, win rate, max drawdown, Sharpe ratio, number of trades
-- Compare against the control (current production parameters)
-- Record execution time and date range
-
-**Step 4 — Analyze results**
-Structured analysis against success/failure criteria:
-
-```
-EXPERIMENT #14: RSI Period 14 vs 7
-STATUS: REJECTED ❌
-
-RESULTS:
-  | Metric        | Control (v5) | Variant (v6) | Δ       |
-  |---------------|-------------|-------------|---------|
-  | Total PnL     | $20,445     | $18,200     | -$2,245 |
-  | Win Rate      | 58.3%       | 52.1%       | -6.2%   |
-  | Max Drawdown  | 12.4%       | 14.8%       | +2.4%   |
-  | Sharpe Ratio  | 1.42        | 1.18        | -0.24   |
-  | Trade Count   | 156         | 89          | -67     |
-
-CONCLUSION: Longer RSI period reduces signal frequency by 43% without
-improving quality. Win rate dropped below 55% threshold. REJECTED.
-
-INSIGHT: RSI 7 captures mean-reversion signals faster on 15m timeframe.
-Longer periods may suit 4H+ timeframes (not tested — add to backlog).
-```
-
-**Step 5 — Record and route**
-Save experiment to `.rune/experiments/<number>-<name>.md`:
-- If **ACCEPTED**: update production parameters → run `trade-logic` to sync manifest → commit
-- If **REJECTED**: record conclusion and insight → add derived hypotheses to backlog
-- If **INCONCLUSIVE**: define additional test conditions or longer date range → re-run
-- Link to the experiment from `trade-logic` manifest: "RSI Entry v5: validated by experiment #14"
-
-Update experiment index `.rune/experiments/index.md`:
-```
-| # | Hypothesis | Component | Status | Key Metric | Date |
-|---|-----------|-----------|--------|------------|------|
-| 14 | RSI 14 > RSI 7 | rsi_entry | ❌ Rejected | WR 52% < 55% | 2025-03-15 |
-| 13 | EMA 120 wick exit | ema_follow | ✅ Accepted | PnL +$2,036 | 2025-03-10 |
-```
-
-#### Example
-
-```python
-# Experiment runner pattern
-from dataclasses import dataclass
-from decimal import Decimal
-
-@dataclass(frozen=True)
-class ExperimentConfig:
-    name: str
-    hypothesis: str
-    variant_params: dict[str, str | int | float]
-    control_params: dict[str, str | int | float]
-    date_range: tuple[str, str]
-    tokens: list[str]
-    success_criteria: dict[str, tuple[str, float]]  # metric: (operator, threshold)
-
-@dataclass(frozen=True)
-class ExperimentResult:
-    config: ExperimentConfig
-    control_metrics: dict[str, Decimal]
-    variant_metrics: dict[str, Decimal]
-    status: str  # 'accepted' | 'rejected' | 'inconclusive'
-    conclusion: str
-    insights: list[str]
-
-def evaluate_experiment(result: ExperimentResult) -> str:
-    """Evaluate variant against success criteria."""
-    for metric, (op, threshold) in result.config.success_criteria.items():
-        variant_val = result.variant_metrics.get(metric, Decimal('0'))
-        if op == '>' and variant_val <= Decimal(str(threshold)):
-            return 'rejected'
-        if op == '<' and variant_val >= Decimal(str(threshold)):
-            return 'rejected'
-    return 'accepted'
-
-# Usage:
-# config = ExperimentConfig(
-#     name="rsi_period_14",
-#     hypothesis="RSI 14 captures better signals than RSI 7 on 15m",
-#     variant_params={"rsi_period": 14, "challenge_threshold": 60},
-#     control_params={"rsi_period": 7, "challenge_threshold": 65},
-#     date_range=("2024-09-01", "2025-03-01"),
-#     tokens=["BTCUSDT", "ETHUSDT", "SOLUSDT"],
-#     success_criteria={"win_rate": (">", 0.55), "max_drawdown": ("<", 0.15)},
-# )
-```
+---
+name: "experiment-loop"
+pack: "@rune/trading"
+description: "Scientific method for trading strategy development — hypothesize → implement → backtest → analyze → refine. Prevents the #1 strategy development failure: changing parameters randomly without tracking what was tested, what worked, and why."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# experiment-loop
+
+Scientific method for trading strategy development — hypothesize → implement → backtest → analyze → refine. Prevents the #1 strategy development failure: changing parameters randomly without tracking what was tested, what worked, and why.
+
+#### Workflow
+
+**Step 1 — Define hypothesis**
+Every strategy change starts as a falsifiable hypothesis:
+```
+HYPOTHESIS: [What you believe]
+EVIDENCE: [Why you believe it — chart observation, backtest anomaly, market regime]
+TEST: [How to verify — specific backtest config, date range, token set]
+SUCCESS CRITERIA: [Measurable threshold — "win rate > 55% AND max drawdown < 15%"]
+FAILURE CRITERIA: [When to reject — "win rate < 45% OR drawdown > 25%"]
+```
+
+Check `.rune/experiments/` for prior experiments on the same component. If a similar hypothesis was already tested and rejected, flag it: "This was tested in experiment #12 and rejected because [reason]. Proceed anyway?"
+
+**Step 2 — Implement variant**
+Create the strategy variant in an isolated branch or config:
+- Use `Grep` to find the parameter or logic being changed
+- Create a named variant (e.g., `rsi_entry_v6_longer_period`) — NEVER modify the production logic directly
+- Document the exact change: "Changed RSI period from 7 to 14, challenge threshold from 65 to 60"
+- If logic change (not just parameter): ensure backtest engine mirrors the change (production-backtest sync from `trade-logic`)
+
+**Step 3 — Run backtest**
+Execute backtest against the defined test conditions:
+- Use `Bash` to run the backtest command with the variant config
+- Capture results: total PnL, win rate, max drawdown, Sharpe ratio, number of trades
+- Compare against the control (current production parameters)
+- Record execution time and date range
+
+**Step 4 — Analyze results**
+Structured analysis against success/failure criteria:
+
+```
+EXPERIMENT #14: RSI Period 14 vs 7
+STATUS: REJECTED ❌
+
+RESULTS:
+  | Metric        | Control (v5) | Variant (v6) | Δ       |
+  |---------------|-------------|-------------|---------|
+  | Total PnL     | $20,445     | $18,200     | -$2,245 |
+  | Win Rate      | 58.3%       | 52.1%       | -6.2%   |
+  | Max Drawdown  | 12.4%       | 14.8%       | +2.4%   |
+  | Sharpe Ratio  | 1.42        | 1.18        | -0.24   |
+  | Trade Count   | 156         | 89          | -67     |
+
+CONCLUSION: Longer RSI period reduces signal frequency by 43% without
+improving quality. Win rate dropped below 55% threshold. REJECTED.
+
+INSIGHT: RSI 7 captures mean-reversion signals faster on 15m timeframe.
+Longer periods may suit 4H+ timeframes (not tested — add to backlog).
+```
+
+**Step 5 — Record and route**
+Save experiment to `.rune/experiments/<number>-<name>.md`:
+- If **ACCEPTED**: update production parameters → run `trade-logic` to sync manifest → commit
+- If **REJECTED**: record conclusion and insight → add derived hypotheses to backlog
+- If **INCONCLUSIVE**: define additional test conditions or longer date range → re-run
+- Link to the experiment from `trade-logic` manifest: "RSI Entry v5: validated by experiment #14"
+
+Update experiment index `.rune/experiments/index.md`:
+```
+| # | Hypothesis | Component | Status | Key Metric | Date |
+|---|-----------|-----------|--------|------------|------|
+| 14 | RSI 14 > RSI 7 | rsi_entry | ❌ Rejected | WR 52% < 55% | 2025-03-15 |
+| 13 | EMA 120 wick exit | ema_follow | ✅ Accepted | PnL +$2,036 | 2025-03-10 |
+```
+
+#### Example
+
+```python
+# Experiment runner pattern
+from dataclasses import dataclass
+from decimal import Decimal
+
+@dataclass(frozen=True)
+class ExperimentConfig:
+    name: str
+    hypothesis: str
+    variant_params: dict[str, str | int | float]
+    control_params: dict[str, str | int | float]
+    date_range: tuple[str, str]
+    tokens: list[str]
+    success_criteria: dict[str, tuple[str, float]]  # metric: (operator, threshold)
+
+@dataclass(frozen=True)
+class ExperimentResult:
+    config: ExperimentConfig
+    control_metrics: dict[str, Decimal]
+    variant_metrics: dict[str, Decimal]
+    status: str  # 'accepted' | 'rejected' | 'inconclusive'
+    conclusion: str
+    insights: list[str]
+
+def evaluate_experiment(result: ExperimentResult) -> str:
+    """Evaluate variant against success criteria."""
+    for metric, (op, threshold) in result.config.success_criteria.items():
+        variant_val = result.variant_metrics.get(metric, Decimal('0'))
+        if op == '>' and variant_val <= Decimal(str(threshold)):
+            return 'rejected'
+        if op == '<' and variant_val >= Decimal(str(threshold)):
+            return 'rejected'
+    return 'accepted'
+
+# Usage:
+# config = ExperimentConfig(
+#     name="rsi_period_14",
+#     hypothesis="RSI 14 captures better signals than RSI 7 on 15m",
+#     variant_params={"rsi_period": 14, "challenge_threshold": 60},
+#     control_params={"rsi_period": 7, "challenge_threshold": 65},
+#     date_range=("2024-09-01", "2025-03-01"),
+#     tokens=["BTCUSDT", "ETHUSDT", "SOLUSDT"],
+#     success_criteria={"win_rate": (">", 0.55), "max_drawdown": ("<", 0.15)},
+# )
+```

package/extensions/trading/skills/fintech-patterns.md

@@ -1,47 +1,47 @@
----
-name: "fintech-patterns"
-pack: "@rune/trading"
-description: "Financial application patterns — safe money handling with Decimal/BigInt, transaction processing, audit trails, regulatory compliance, and PnL calculations."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# fintech-patterns
-
-Financial application patterns — safe money handling with Decimal/BigInt, transaction processing, audit trails, regulatory compliance, and PnL calculations. Prevents the #1 fintech bug: float arithmetic on money.
-
-#### Workflow
-
-**Step 1 — Detect money handling code**
-Use `Grep` to scan for raw float arithmetic on price/amount/balance fields: `Grep pattern="(price|amount|balance|pnl)\s*[\+\-\*\/]" glob="**/*.ts"`. Flag any result not wrapped in Decimal or BigInt.
-
-**Step 2 — Enforce Decimal/BigInt boundaries**
-Use `Read` on each flagged file to identify entry points (API response parsing, user input). Replace raw number literals with `new Decimal(value)` at parse time. All arithmetic must flow through Decimal operations until final display.
-
-**Step 3 — Implement audit trail and verify rounding**
-Use `Bash` to run `tsc --noEmit` confirming no implicit `any` on financial fields. Add an immutable audit log entry on every mutation (create, fill, cancel). Verify rounding mode is `ROUND_HALF_EVEN` (banker's rounding) for all display formatting.
-
-#### Example
-
-```typescript
-import Decimal from 'decimal.js';
-
-Decimal.set({ rounding: Decimal.ROUND_HALF_EVEN });
-
-// NEVER: const fee = price * 0.001
-// ALWAYS: Decimal arithmetic — exact, auditable
-function calculateFee(price: string, quantity: string, feeRate: string): Decimal {
-  return new Decimal(price)
-    .times(new Decimal(quantity))
-    .times(new Decimal(feeRate))
-    .toDecimalPlaces(8);
-}
-
-function formatUSD(value: Decimal): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: 2,
-  }).format(value.toNumber());
-}
-```
+---
+name: "fintech-patterns"
+pack: "@rune/trading"
+description: "Financial application patterns — safe money handling with Decimal/BigInt, transaction processing, audit trails, regulatory compliance, and PnL calculations."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# fintech-patterns
+
+Financial application patterns — safe money handling with Decimal/BigInt, transaction processing, audit trails, regulatory compliance, and PnL calculations. Prevents the #1 fintech bug: float arithmetic on money.
+
+#### Workflow
+
+**Step 1 — Detect money handling code**
+Use `Grep` to scan for raw float arithmetic on price/amount/balance fields: `Grep pattern="(price|amount|balance|pnl)\s*[\+\-\*\/]" glob="**/*.ts"`. Flag any result not wrapped in Decimal or BigInt.
+
+**Step 2 — Enforce Decimal/BigInt boundaries**
+Use `Read` on each flagged file to identify entry points (API response parsing, user input). Replace raw number literals with `new Decimal(value)` at parse time. All arithmetic must flow through Decimal operations until final display.
+
+**Step 3 — Implement audit trail and verify rounding**
+Use `Bash` to run `tsc --noEmit` confirming no implicit `any` on financial fields. Add an immutable audit log entry on every mutation (create, fill, cancel). Verify rounding mode is `ROUND_HALF_EVEN` (banker's rounding) for all display formatting.
+
+#### Example
+
+```typescript
+import Decimal from 'decimal.js';
+
+Decimal.set({ rounding: Decimal.ROUND_HALF_EVEN });
+
+// NEVER: const fee = price * 0.001
+// ALWAYS: Decimal arithmetic — exact, auditable
+function calculateFee(price: string, quantity: string, feeRate: string): Decimal {
+  return new Decimal(price)
+    .times(new Decimal(quantity))
+    .times(new Decimal(feeRate))
+    .toDecimalPlaces(8);
+}
+
+function formatUSD(value: Decimal): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+  }).format(value.toNumber());
+}
+```

package/extensions/trading/skills/indicator-library.md

@@ -1,58 +1,58 @@
----
-name: "indicator-library"
-pack: "@rune/trading"
-description: "Technical indicator implementations — SMA, EMA, RSI, MACD, Bollinger Bands, VWAP. Streaming calculation patterns that update incrementally on each new tick rather than recomputing the full history."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# indicator-library
-
-Technical indicator implementations — SMA, EMA, RSI, MACD, Bollinger Bands, VWAP. Streaming calculation patterns that update incrementally on each new tick rather than recomputing the full history.
-
-#### Workflow
-
-**Step 1 — Select indicators and initialize state**
-Use `Read` on the product spec or existing chart config to identify required indicators. For each, allocate a rolling window buffer sized to the longest period (e.g., 200 for SMA-200). Initialize with historical OHLCV data fetched via REST before the WebSocket feed opens.
-
-**Step 2 — Streaming incremental calculation**
-On each new tick from `realtime-data`, push the close price into the rolling buffer and evict the oldest value. Recompute only the current indicator value — not the full series. For RSI, maintain running average gains/losses using Wilder smoothing. Use `Bash` to run unit tests comparing streaming output against a reference batch computation.
-
-**Step 3 — Overlay on chart component**
-Create a `LineSeries` on the chart instance from `chart-components` for each indicator. On each streaming update, call `indicatorSeries.update({ time, value })`. Use `Grep` to confirm indicator series are cleaned up (`chart.removeSeries(s)`) when the symbol or timeframe changes to prevent memory leaks.
-
-#### Example
-
-```typescript
-class StreamingSMA {
-  private readonly window: number[] = [];
-
-  constructor(private readonly period: number) {}
-
-  update(price: number): number | null {
-    this.window.push(price);
-    if (this.window.length > this.period) {
-      this.window.shift();
-    }
-    if (this.window.length < this.period) return null;
-    const sum = this.window.reduce((acc, v) => acc + v, 0);
-    return sum / this.period;
-  }
-}
-
-class StreamingEMA {
-  private ema: number | null = null;
-  private readonly k: number;
-
-  constructor(private readonly period: number) {
-    this.k = 2 / (period + 1);
-  }
-
-  update(price: number): number | null {
-    this.ema = this.ema === null
-      ? price
-      : price * this.k + this.ema * (1 - this.k);
-    return this.ema;
-  }
-}
-```
+---
+name: "indicator-library"
+pack: "@rune/trading"
+description: "Technical indicator implementations — SMA, EMA, RSI, MACD, Bollinger Bands, VWAP. Streaming calculation patterns that update incrementally on each new tick rather than recomputing the full history."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# indicator-library
+
+Technical indicator implementations — SMA, EMA, RSI, MACD, Bollinger Bands, VWAP. Streaming calculation patterns that update incrementally on each new tick rather than recomputing the full history.
+
+#### Workflow
+
+**Step 1 — Select indicators and initialize state**
+Use `Read` on the product spec or existing chart config to identify required indicators. For each, allocate a rolling window buffer sized to the longest period (e.g., 200 for SMA-200). Initialize with historical OHLCV data fetched via REST before the WebSocket feed opens.
+
+**Step 2 — Streaming incremental calculation**
+On each new tick from `realtime-data`, push the close price into the rolling buffer and evict the oldest value. Recompute only the current indicator value — not the full series. For RSI, maintain running average gains/losses using Wilder smoothing. Use `Bash` to run unit tests comparing streaming output against a reference batch computation.
+
+**Step 3 — Overlay on chart component**
+Create a `LineSeries` on the chart instance from `chart-components` for each indicator. On each streaming update, call `indicatorSeries.update({ time, value })`. Use `Grep` to confirm indicator series are cleaned up (`chart.removeSeries(s)`) when the symbol or timeframe changes to prevent memory leaks.
+
+#### Example
+
+```typescript
+class StreamingSMA {
+  private readonly window: number[] = [];
+
+  constructor(private readonly period: number) {}
+
+  update(price: number): number | null {
+    this.window.push(price);
+    if (this.window.length > this.period) {
+      this.window.shift();
+    }
+    if (this.window.length < this.period) return null;
+    const sum = this.window.reduce((acc, v) => acc + v, 0);
+    return sum / this.period;
+  }
+}
+
+class StreamingEMA {
+  private ema: number | null = null;
+  private readonly k: number;
+
+  constructor(private readonly period: number) {
+    this.k = 2 / (period + 1);
+  }
+
+  update(price: number): number | null {
+    this.ema = this.ema === null
+      ? price
+      : price * this.k + this.ema * (1 - this.k);
+    return this.ema;
+  }
+}
+```