From ff97a693b33151baf85cf4a1fef8fcdb424a6056 Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 15:11:15 +0300
Subject: [PATCH 01/11] update prompt for html generation

---
 anton/core/llm/prompt_builder.py |  29 ++-
 anton/core/llm/prompts.py        | 423 ++++++++++++++++++++++---------
 anton/core/tools/recall_skill.py |  18 ++
 3 files changed, 349 insertions(+), 121 deletions(-)

diff --git a/anton/core/llm/prompt_builder.py b/anton/core/llm/prompt_builder.py
index d7340fe6..734bcc55 100644
--- a/anton/core/llm/prompt_builder.py
+++ b/anton/core/llm/prompt_builder.py
@@ -61,6 +61,18 @@ def _build_tool_prompts_section(self, tool_defs: list["ToolDef"] | None) -> str:
 
         return "\n\n".join(chunks)
 
+    # Built-in skills that are always available regardless of ~/.anton/skills/.
+    # Each entry must have "label" and "when_to_use".
+    _BUILTIN_SKILL_SUMMARIES: list[dict] = [
+        {
+            "label": "generate_dashboard_html",
+            "when_to_use": (
+                "when the user asks to build a dashboard, chart, report, "
+                "presentation, or any data visualization as a standalone HTML page"
+            ),
+        },
+    ]
+
     def _build_procedural_memory_section(
         self, skill_store: "SkillStore | None"
     ) -> str:
@@ -71,12 +83,17 @@ def _build_procedural_memory_section(
         the full procedure. Returns an empty string if no store is wired
         or no skills are saved — the caller skips the section entirely.
         """
-        if skill_store is None:
-            return ""
-        try:
-            summaries = skill_store.list_summaries()
-        except Exception:
-            return ""
+        summaries: list[dict] = list(self._BUILTIN_SKILL_SUMMARIES)
+        if skill_store is not None:
+            try:
+                user_summaries = skill_store.list_summaries()
+            except Exception:
+                user_summaries = []
+            # User skills override builtins with the same label.
+            builtin_labels = {s["label"] for s in summaries}
+            for s in user_summaries:
+                if s.get("label") not in builtin_labels:
+                    summaries.append(s)
         if not summaries:
             return ""
 
diff --git a/anton/core/llm/prompts.py b/anton/core/llm/prompts.py
index 73f57da6..3de22211 100644
--- a/anton/core/llm/prompts.py
+++ b/anton/core/llm/prompts.py
@@ -236,124 +236,317 @@
 
 
 VISUALIZATIONS_HTML_OUTPUT_FORMAT_PROMPT = """\
-LIST THE INSIGHTS (terse — one line each, not an essay):
-Before coding, list the insights you want to present/convey/highlight as `1 - <chart/infographic/etc>: <insight it conveys and why it matters>..`
-Example: `1 - Line chart of weekly signups: shows growth inflection after the March launch, flags whether momentum is sustained.`
-This is a checklist, not a brief — no narrative prose, no design discussion.
-
-BUILD THE DASHBOARD — use multiple scratchpad cells, but produce ONE single self-contained HTML file:
-
-  CRITICAL: The final dashboard MUST be a single .html file with ALL data, CSS, and JS inlined. \
-Do NOT reference external local files (like data.js) — browsers block local file:// cross-references \
-for security reasons and the dashboard will silently fail to load data.
-
-  SECURITY (critical): Dashboards may be published to the web. NEVER embed API keys, tokens, \
-passwords, connection strings, or any credentials in the HTML, JS, or inline data. Fetch data \
-in scratchpad cells using credentials from environment variables, then serialize only the \
-resulting data into the dashboard. If the user explicitly asks to embed a credential \
-(e.g. for a live-updating dashboard), warn them that publishing will expose it and get \
-confirmation before proceeding.
-
-  Build the parts in separate cells, then assemble at the end:
-
-  CELL 1 — Serialize data to a JS string variable (programmatic, no HTML):
-  Serialize all computed data (dataframes, metrics, KPIs) into a Python string. Build a \
-Python dict with keys like "kpis", "tables", "charts" — each containing the relevant data. \
-Convert DataFrames with df.to_dict(orient='records'). Use json.dumps(data, default=str) to \
-handle dates, Decimal, numpy types. Store as a Python variable: \
-`data_js = 'const D = ' + json_string + ';'` — do NOT write to a separate file.
-
-  CELL 2 — Build CSS + HTML structure as a Python string variable:
-  Write the HTML head (styles, CDN script tags) and body structure (header, KPIs, chart divs, \
-tabs, tables) as a Python string variable `html_body`. This cell builds the template.
-
-  CELL 3+ — Build JS chart rendering logic as Python string variables:
-  Write the JavaScript that initializes charts, populates tables, handles tabs, etc. \
-Split across multiple cells if needed to avoid token limits. Store as `js_charts` etc.
-
-  FINAL CELL — Assemble and write the HTML file:
-  Combine: `html = html_body.replace('</body>', f'<script>{{data_js}}{{js_charts}}</script></body>')` \
-or similar.
-
-  SELF-CONTAINED OUTPUT (critical):
-  Prefer inlining everything — CSS in `<style>`, JS in `<script>`, data as JS variables. \
-A single .html file is the most portable and publishable format. \
-If the dataset is very large (>100KB of JSON), you may write it to a separate .js file \
-in the SAME directory and reference it with a \
-relative `<script src="dashboard_data.js">` tag. The publisher will auto-bundle sibling \
-files referenced in the HTML. Never reference files outside the output directory.
-
-  WHY: (1) Browsers block local file:// cross-references across directories. \
-(2) Splitting the build across cells catches JS/CSS errors early — if a cell has a syntax issue \
-in a string, you'll see it before the final assembly. (3) Large datasets in single cells timeout. \
-(4) Self-contained files can be published to the web via /publish without missing assets.
-
-  PYTHON → JS STRING SAFETY (critical):
-  When building JS code inside Python strings, escape sequences get resolved by Python BEFORE \
-writing to the file. This means '\\n' in Python becomes a literal newline in the output, which \
-breaks JavaScript string literals. Rules:
-  - Use '\\\\n' in Python if you need a literal \\n in the JS output
-  - Use raw strings (r"...") for JS code blocks when possible
-  - NEVER use '\\n', '\\t', or '\\\"' inside JS strings within Python — double-escape them
-  - After writing the file, sanity-check that no string literals span multiple lines
+# HTML dashboard / presentation output
+
+The dashboard is produced as a **single self-contained `.html` file**. You build
+it by filling placeholders in a shared HTML template with strings returned by
+small isolated functions, each living in its own scratchpad cell.
 
-Output format:
-- Unless the user explicitly asks for a different format, always output visualizations \
-as polished, single-file HTML pages — never raw PNGs or bare image files.
 {output_context}
 
-Visual design:
-- Make it look good by default. Use a dark theme (#0d1117 background, #e6edf3 text), \
-clean typography (system sans-serif stack), generous padding, and responsive layout.
-- ALWAYS use Apache ECharts for interactive charts. Load it via CDN: \
-`<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>`. \
-No Python dependencies needed — just write the HTML with inline JS. Use ECharts' built-in \
-dark theme: `echarts.init(dom, 'dark')`, then customize colors to match #0d1117 background.
-- NEVER use Plotly, matplotlib, or other charting libraries unless the user explicitly asks.
-
-Line smoothing (critical — smooth: true misrepresents volatile data):
-- DEFAULT: `smooth: false` on ALL line series. Straight segments between data points are \
-the honest representation — they show actual volatility, drawdowns, and inflection points.
-- EXCEPTION: Use `smooth: true` ONLY for cumulative/monotonic series (cumulative returns, \
-running totals, growth curves) where the trend matters more than point-to-point moves.
-- Decision heuristic: Does the line ever reverse direction meaningfully? If yes → smooth: false. \
-Is it a running sum, cumulative metric, or long-horizon trend? → smooth: true is acceptable.
-- Line widths: 2.5 for hero/primary lines, 1.5 for multi-line comparisons, 1 for secondary/reference lines.
-
-Chart readability (critical — labels must NEVER overlap):
-- Use `axisLabel: {{ rotate: -45 }}` or `{{ rotate: 45 }}` on crowded axes. \
-Set `grid: {{ containLabel: true }}` so labels never clip. Use `legend: {{ type: 'scroll', \
-bottom: 0 }}` to place scrollable legends below the chart. For pie/donut charts use \
-`label: {{ show: true, position: 'outside' }}` with `labelLayout: {{ hideOverlap: true }}`. \
-For bar charts with many categories, use horizontal bars (`yAxis` as category) or \
-abbreviate labels with `axisLabel: {{ formatter }}`. Always configure rich `tooltip` with \
-`formatter` functions for precise value display on hover. Use `dataZoom` for time series \
-so users can zoom into ranges.
-
-Multi-tab / multi-view dashboards (critical — charts fail silently on hidden containers):
-- ECharts, Chart.js, and Plotly all render nothing when called on a container with \
-`display: none` or 0×0 dimensions — no error, no warning, just a blank chart. \
-NEVER call `echarts.init()` inside `DOMContentLoaded` for tabs/pages that start hidden.
-- Initialize charts lazily, gated on first visibility: in the tab-click handler, \
-check a `Set` of already-rendered tabs and call the page's init function only on \
-first visit. Example pattern: \
-`const _rendered = new Set(['overview']); function showPage(name) {{ /* toggle classes */ \
-if (!_rendered.has(name)) {{ _rendered.add(name); initChartsFor(name); }} }}` \
-— only the default-visible page initializes on load.
-
-Layout and composition:
-- For non-chart visualizations (tables, reports, dashboards), write clean HTML/CSS directly. \
-Use CSS grid or flexbox. Add subtle styling: rounded corners, soft shadows, hover effects.
-- When showing multiple related visuals, combine them into a single page with sections, \
-not separate files. Ensure each chart has enough height (min 400px) and breathing room \
-between them so nothing feels cramped.
-- Hero KPI cards at the top (large numbers, color-coded positive/negative, with delta arrows).
-- Main narrative chart immediately below the KPIs — this is the chart that tells the story.
-- Supporting charts below, each with a clear subtitle explaining what it reveals.
-- Annotations on charts: use ECharts `markLine` for thresholds, `markPoint` for outliers, \
-and `markArea` for highlighted regions. A chart without annotations is a missed opportunity.
-- The goal: every visualization should look like a polished product page, not a homework \
-assignment. Think dark-mode dashboard, not Jupyter default.\
+## 1. General guidance
+
+### Output
+- Always produce ONE `.html` file with CSS, JS, and data inlined — never reference
+  external local files (browsers block local `file://` cross-references).
+- If the data payload is very large (>100 KB), you may write it to a sibling
+  `.js` file in the same output directory; the publisher auto-bundles siblings.
+  Never reference files outside that directory.
+
+### Security
+- Dashboards may be published to the web. NEVER embed API keys, tokens, passwords,
+  or connection strings in the HTML, JS, or inline data. Fetch data in scratchpad
+  cells using credentials from environment variables, then serialize only the
+  resulting data into the dashboard. If the user explicitly asks to embed a
+  credential, warn them first and confirm.
+
+### Visual style
+- Dark theme by default: `#0d1117` background, `#e6edf3` text, clean sans-serif,
+  generous padding, responsive layout. Hero KPI cards on top (big numbers,
+  color-coded deltas), main narrative chart below, supporting charts after.
+- Think polished product page, not Jupyter default.
+
+### Charts
+- Use Apache ECharts (CDN loaded in the template). Dark theme: `echarts.init(dom, 'dark')`.
+- NEVER use Plotly, matplotlib, or other libs unless the user explicitly asks.
+- **Line smoothing:** default `smooth: false` on all line series — straight
+  segments are the honest representation of volatile data. Use `smooth: true`
+  only for cumulative/monotonic series (running totals, growth curves).
+- **Readability:** use `axisLabel: {{ rotate: -45 }}` on crowded axes,
+  `grid: {{ containLabel: true }}` so labels never clip, `legend: {{ type: 'scroll', bottom: 0 }}`,
+  `labelLayout: {{ hideOverlap: true }}` on pies. Configure `tooltip.formatter` for
+  precise values. Use `dataZoom` for time series.
+- **Annotations:** use `markLine` for thresholds, `markPoint` for outliers,
+  `markArea` for highlighted regions — a chart without them is a missed opportunity.
+- **Hidden containers (critical):** ECharts renders nothing on a container with
+  `display: none` or 0×0 dimensions. For tabs/pages that start hidden,
+  initialize charts lazily on first visibility, not on `DOMContentLoaded`.
+
+### Python → JS string safety
+When you embed JS code inside a Python string, Python resolves escape sequences
+BEFORE the file is written. `'\\n'` becomes a real newline and breaks JS string
+literals. Use `'\\\\n'` for a literal `\\n`, prefer raw strings (`r"..."`) for JS
+blocks, and sanity-check the final file for stray multi-line string literals.
+
+## 2. HTML template
+
+Below is the shared HTML skeleton. It ships with a GitHub-dark CSS theme, the
+ECharts CDN, a pre-registered `github-dark` ECharts theme, and an `initChart`
+helper. You never modify it inline — your block functions produce strings that
+replace the `AGENT: XXX` markers via `template.replace(...)`. Markers in HTML
+contexts use `<!-- AGENT: XXX -->` syntax; markers inside `<style>` or
+`<script>` use `/* AGENT: XXX */` so they stay valid CSS/JS.
+
+Markers (each appears exactly once):
+
+| Marker | Location | What your function returns |
+|--------|----------|----------------------------|
+| `<!-- AGENT: PAGE_TITLE -->` | inside `<title>` | plain-text title (no tags) |
+| `/* AGENT: CUSTOM_STYLES */` | end of `<style>` | extra CSS — only if the base theme is insufficient, otherwise empty string |
+| `<!-- AGENT: HEADER -->` | top of `<body>` | `<div class="header">...</div>` with `.badge`, `<h1>`, `.subtitle`, optional `.source-link` |
+| `<!-- AGENT: CONTENT -->` | main body area | one or more `<section>` blocks holding charts, tables, KPIs |
+| `/* AGENT: CHART_DATA */` | in `<script>` | JS `const` declarations for datasets used by charts |
+| `/* AGENT: CHART_INITS */` | in `<script>` | `initChart('dom-id', {{ ...echarts option... }})` calls, one per chart container |
+
+Template file contents:
+
+```html
+<!-- DASHBOARD_HTML_TEMPLATE -->
+```
+
+## 3. Reading the template in scratchpad
+
+The template file ships inside the installed `anton` package at
+`anton/templates/template-dark-github.html`. Define the helper below in one of
+your first scratchpad cells so the final assembly cell can call it:
+
+```python
+def __read_html_template():
+    import anton
+    from pathlib import Path
+    path = Path(anton.__file__).parent / "templates" / "template-dark-github.html"
+    return path.read_text(encoding="utf-8")
+```
+
+Call `__read_html_template()` exactly once — from inside `__get_html()` — to
+obtain the template string, then apply the six `.replace(...)` substitutions
+described in section 5. Do NOT hold the template in a module-level variable;
+read it fresh inside the assembly function so each build is self-contained.
+
+## 4. DashSpec
+
+Before writing any HTML, produce a **DashSpec** — a short YAML plan that
+captures the page structure. Only after the spec is complete do you generate
+the HTML. The spec is an internal artifact: your own plan, not shown to the
+end user.
+
+**Why:**
+- Catch structural mistakes before HTML generation.
+- Make each block's purpose explicit before committing to code.
+- Keep generation deterministic: each spec block maps to one HTML fragment
+  (→ one scratchpad cell, one `__get_block_<id>()` function).
+
+### Format
+
+```yaml
+docType: dash-spec
+version: "0.1"
+
+meta:
+  title: string
+
+layout: string             # short prose: overall page layout
+
+header:  {{ ...block }}      # optional
+sidebar: {{ ...block }}      # optional
+blocks:  [ ...block ]      # main body
+```
+
+### Block shape
+
+```yaml
+id: string                 # snake_case, unique across the spec
+type: string               # short description of the block's role
+description: string        # what this block displays / contains
+class: string              # optional, CSS classes
+children: [ ...block ]     # optional, nested blocks
+```
+
+`type` is free-form — write a concise role label (e.g. `kpi_card`,
+`line_chart`, `filters_panel`, `nav_links`). No fixed vocabulary.
+
+### Rules
+
+1. Every block has `id`, `type`, and `description`. `class` and `children`
+   are optional.
+2. IDs are unique across the whole spec, snake_case.
+3. `description` explains intent, not appearance — what the block is for
+   and what data or content it holds.
+4. `layout` is a sentence or two describing the overall composition
+   (e.g. "Sidebar on the left, header on top, main grid on the right").
+5. Keep it shallow — nest with `children` only when it genuinely helps.
+6. Self-check before building: unique IDs, every block has `description`,
+   `layout` makes sense.
+
+### Example — Dashboard
+
+```yaml
+docType: dash-spec
+version: "0.1"
+
+meta:
+  title: "Q4 Sales Overview"
+
+layout: "Fixed header on top, sidebar on the left with navigation,
+  main content area on the right with a KPI row followed by two charts
+  and a products table."
+
+header:
+  id: top_bar
+  type: page_header
+  description: "Page title on the left, date range selector on the right."
+
+sidebar:
+  id: nav
+  type: navigation_panel
+  description: "Links to sibling dashboards: Overview, Regions, Products."
+
+blocks:
+  - id: kpi_row
+    type: kpi_group
+    description: "Three headline metrics for the quarter: total revenue,
+      order count, and average order value."
+    children:
+      - id: kpi_revenue
+        type: kpi_card
+        description: "Total revenue, computed as sum of monthly revenue."
+      - id: kpi_orders
+        type: kpi_card
+        description: "Total orders across the quarter."
+      - id: kpi_aov
+        type: kpi_card
+        description: "Average order value = revenue / orders."
+
+  - id: revenue_trend
+    type: line_chart
+    description: "Monthly revenue trajectory over the quarter, ECharts line."
+
+  - id: region_split
+    type: bar_chart
+    description: "Revenue by region, sorted descending, ECharts bar."
+
+  - id: top_products
+    type: data_table
+    class: "dense sortable"
+    description: "Top 10 products by revenue with SKU, name, and revenue columns."
+```
+
+### Example — Presentation
+
+```yaml
+docType: dash-spec
+version: "0.1"
+
+meta:
+  title: "Q4 Sales Review"
+
+layout: "Vertical stack of full-viewport slides, navigated by scroll or arrow keys."
+
+blocks:
+  - id: cover
+    type: title_slide
+    description: "Deck title and subtitle, centered."
+
+  - id: key_findings
+    type: bullet_slide
+    description: "Heading 'Key Findings' with three bullets summarizing
+      the quarter's headline takeaways."
+
+  - id: revenue_chart
+    type: chart_slide
+    description: "Full-slide ECharts line chart of monthly revenue,
+      with a short heading above."
+
+  - id: closing
+    type: quote_slide
+    description: "Closing quote that frames the next-quarter ask."
+```
+
+## 5. Build workflow
+
+### Step 1 — List insights
+Already required by the insights-first workflow at the top of this prompt: one
+line per chart/block in the form `<kind>: <insight it conveys and why it matters>`.
+This checklist is the input for DashSpec — no narrative prose, no design discussion.
+
+### Step 2 — Write DashSpec
+Produce the `DashSpec` YAML following the format in section 4. Do NOT embed
+data values in it — only structure and references. This is a plan, not a
+payload. Self-check before moving on: unique IDs, every block has
+`description`, `layout` makes sense.
+
+### Step 3 — Build the dashboard across scratchpad cells
+
+Each scratchpad cell defines exactly ONE isolated Python function whose name
+starts with double underscore (`__`). The function returns a string. This keeps
+the scratchpad namespace clean — no stray module-level variables.
+
+Rules for all cells:
+- One function per cell. Name it `__<role>` (double underscore prefix).
+- Return a string. Never print or write to files from these functions —
+  only the final `__get_html()` cell writes output.
+- If the function needs to use a variable declared in an earlier cell, **make a
+  copy** before mutating (`copy.deepcopy(x)` or `x.copy()`). Never modify
+  shared state — other functions rely on the original.
+- Keep each cell small. If a single block would push the cell past a few hundred
+  lines, split it into smaller helper blocks in separate cells.
+
+Cell layout — one function per marker in the template, plus one function per
+block from DashSpec:
+
+| Cell | Function | Target marker | Returns |
+|------|----------|---------------|---------|
+| 1 | `__get_page_title()` | `<!-- AGENT: PAGE_TITLE -->` | plain-text title, no tags |
+| 2 | `__make_custom_styles()` | `/* AGENT: CUSTOM_STYLES */` | extra CSS if needed; return `""` when the base theme is enough |
+| 3 | `__get_header()` | `<!-- AGENT: HEADER -->` | `<div class="header">` with `.badge`, `<h1>`, `.subtitle`, optional `.source-link` |
+| 4 | `__get_chart_data()` | `/* AGENT: CHART_DATA */` | JS `const` declarations for datasets, e.g. `const signups = [...];`. Serialize with `json.dumps(data, default=str)`; DataFrames → `df.to_dict(orient='records')` |
+| 5 | `__get_chart_inits()` | `/* AGENT: CHART_INITS */` | one `initChart('dom-id', {{ ...option... }});` call per chart container from the blocks |
+| 6..N | `__get_block_<id>()` | concatenated into `<!-- AGENT: CONTENT -->` | HTML fragment for that block — `<section>` with KPIs, chart `<div>` placeholders (the `initChart` call lives in cell 5, not here), tables, text |
+| Final | `__get_html()` | — | reads the template, replaces all markers, writes the file, returns the path |
+
+Rules for keeping functions coordinated:
+- Every chart needs a matching pair: a `<div id="...">` inside some `__get_block_<id>()` AND an `initChart('...', {{...}})` inside `__get_chart_inits()`. The DOM ids must match exactly.
+- `__get_chart_data()` names datasets referenced by `__get_chart_inits()`. Keep naming stable across the two.
+
+The final cell looks roughly like this:
+
+```python
+def __get_html():
+    template = __read_html_template()
+    content = (
+        __get_block_kpi_row()
+        + __get_block_main_chart()
+        + __get_block_detail_table()
+        # ...one line per block, in DashSpec order
+    )
+    html = (
+        template
+        .replace("<!-- AGENT: PAGE_TITLE -->", __get_page_title())
+        .replace("/* AGENT: CUSTOM_STYLES */", __make_custom_styles())
+        .replace("<!-- AGENT: HEADER -->",     __get_header())
+        .replace("<!-- AGENT: CONTENT -->",    content)
+        .replace("/* AGENT: CHART_DATA */",    __get_chart_data())
+        .replace("/* AGENT: CHART_INITS */",   __get_chart_inits())
+    )
+    path = "<output path>"  # see output_context
+    with open(path, "wt", encoding="utf-8") as f:
+        f.write(html)
+    return f"dashboard saved to {{path}}"
+```
+
+Splitting the work across cells catches syntax errors early (a broken string in
+one block fails fast), keeps each cell well under the scratchpad's 120-second
+timeout, and makes the final assembly trivially reviewable.\
 """
 
 
diff --git a/anton/core/tools/recall_skill.py b/anton/core/tools/recall_skill.py
index 290e5af1..8f78aeec 100644
--- a/anton/core/tools/recall_skill.py
+++ b/anton/core/tools/recall_skill.py
@@ -14,10 +14,19 @@
 
 from __future__ import annotations
 
+from pathlib import Path
 from typing import TYPE_CHECKING
 
+from anton.core.llm.prompts import VISUALIZATIONS_HTML_OUTPUT_FORMAT_PROMPT
 from anton.core.tools.tool_defs import ToolDef
 
+_DASHBOARD_TEMPLATE_PATH = (
+    Path(__file__).resolve().parent.parent.parent
+    / "templates"
+    / "template-dark-github.html"
+)
+_DASHBOARD_TEMPLATE_MARKER = "<!-- DASHBOARD_HTML_TEMPLATE -->"
+
 if TYPE_CHECKING:
     from anton.core.session import ChatSession
 
@@ -51,6 +60,12 @@
 }
 
 
+def get_generate_dashboard_html_prompt() -> str:
+    rendered = VISUALIZATIONS_HTML_OUTPUT_FORMAT_PROMPT.format(output_context="")
+    html_template = _DASHBOARD_TEMPLATE_PATH.read_text(encoding="utf-8")
+    return rendered.replace(_DASHBOARD_TEMPLATE_MARKER, html_template)
+
+
 def _format_skill_response(skill, *, warning: str = "") -> str:
     """Render the recall payload sent back to the LLM as a tool result."""
     parts: list[str] = []
@@ -77,6 +92,9 @@ async def handle_recall_skill(session: "ChatSession", tc_input: dict) -> str:
             "Pick one from the procedural memory list in your system prompt."
         )
 
+    if label_in == "generate_dashboard_html":
+        return get_generate_dashboard_html_prompt()
+
     store = getattr(session, "_skill_store", None)
     if store is None:
         return (

From bfb28187b1e3586014f59783ada45ddcdde49449 Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 15:13:07 +0300
Subject: [PATCH 02/11] add template

---
 anton/templates/template-dark-github.html | 226 ++++++++++++++++++++++
 1 file changed, 226 insertions(+)
 create mode 100644 anton/templates/template-dark-github.html

diff --git a/anton/templates/template-dark-github.html b/anton/templates/template-dark-github.html
new file mode 100644
index 00000000..cd936c6d
--- /dev/null
+++ b/anton/templates/template-dark-github.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title><!-- AGENT: PAGE_TITLE --></title>
+
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+
+<style>
+:root {
+  --bg:      #0d1117;
+  --bg2:     #161b22;
+  --bg3:     #1c2128;
+  --border:  #30363d;
+  --text:    #e6edf3;
+  --muted:   #8b949e;
+  --accent:  #58a6ff;  /* blue   */
+  --accent2: #f78166;  /* coral  */
+  --accent3: #3fb950;  /* green  */
+  --accent4: #d29922;  /* yellow */
+  --purple:  #bc8cff;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  padding: 24px;
+  min-height: 100vh;
+}
+
+/* Header */
+.header { text-align: center; padding: 40px 20px 32px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
+.header .badge { display: inline-block; background: rgba(88,166,255,0.12); border: 1px solid rgba(88,166,255,0.3); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; }
+.header h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px; }
+.header .subtitle { color: var(--muted); font-size: 1rem; max-width: 600px; margin: 0 auto; }
+.source-link { display: inline-block; margin-top: 12px; color: var(--accent); font-size: 0.85rem; text-decoration: none; opacity: 0.8; }
+.source-link:hover { opacity: 1; text-decoration: underline; }
+
+/* Grids */
+.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; }
+.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
+.col-span-2 { grid-column: span 2; }
+.col-span-3 { grid-column: span 3; }
+
+/* Card */
+.card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
+.card-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
+.card h2 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 16px; }
+
+/* KPI */
+.kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; }
+.kpi .kpi-icon  { font-size: 1.8rem; margin-bottom: 8px; }
+.kpi .kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1; margin-bottom: 4px; }
+.kpi .kpi-label { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.5px; }
+.kpi.blue   .kpi-value { color: var(--accent); }
+.kpi.green  .kpi-value { color: var(--accent3); }
+.kpi.orange .kpi-value { color: var(--accent4); }
+.kpi.red    .kpi-value { color: var(--accent2); }
+.kpi.purple .kpi-value { color: var(--purple); }
+
+/* Steps */
+.steps { display: flex; flex-direction: column; gap: 0; }
+.step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
+.step:last-child { border-bottom: none; }
+.step-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; margin-top: 2px; }
+.step-num.s0 { background: rgba(247,129,102,0.2); color: var(--accent2); border: 1px solid rgba(247,129,102,0.4); }
+.step-num.s1 { background: rgba(210,153,34,0.2); color: var(--accent4); border: 1px solid rgba(210,153,34,0.4); }
+.step-num.s2 { background: rgba(88,166,255,0.2); color: var(--accent);  border: 1px solid rgba(88,166,255,0.4); }
+.step-num.s3 { background: rgba(63,185,80,0.2);  color: var(--accent3); border: 1px solid rgba(63,185,80,0.4); }
+.step-num.s4 { background: rgba(188,140,255,0.2); color: var(--purple); border: 1px solid rgba(188,140,255,0.4); }
+.step-content h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; color: var(--text); }
+.step-content p  { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
+.step-content code { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 0.78rem; color: var(--accent3); font-family: 'Consolas', monospace; }
+
+/* Tables */
+.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
+.data-table th { background: var(--bg3); color: var(--muted); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--border); }
+.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
+.data-table tr:last-child td { border-bottom: none; }
+.data-table tr:hover td { background: var(--bg3); }
+
+/* Tags */
+.tag { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
+.tag-red    { background: rgba(247,129,102,0.15); color: var(--accent2); border: 1px solid rgba(247,129,102,0.3); }
+.tag-yellow { background: rgba(210,153,34,0.15); color: var(--accent4); border: 1px solid rgba(210,153,34,0.3); }
+.tag-blue   { background: rgba(88,166,255,0.15); color: var(--accent);  border: 1px solid rgba(88,166,255,0.3); }
+.tag-green  { background: rgba(63,185,80,0.15);  color: var(--accent3); border: 1px solid rgba(63,185,80,0.3); }
+.tag-purple { background: rgba(188,140,255,0.15); color: var(--purple); border: 1px solid rgba(188,140,255,0.3); }
+
+/* Chart containers */
+.chart-container    { width: 100%; height: 320px; }
+.chart-container-lg { width: 100%; height: 380px; }
+.chart-container-sm { width: 100%; height: 200px; }
+
+/* Callouts */
+.insight-box { background: rgba(88,166,255,0.06); border: 1px solid rgba(88,166,255,0.2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin-top: 16px; }
+.insight-box p { font-size: 0.83rem; color: var(--text); line-height: 1.6; }
+.insight-box strong { color: var(--accent); }
+
+.quote { background: var(--bg3); border-left: 3px solid var(--purple); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 0; }
+.quote p { font-size: 0.9rem; font-style: italic; color: var(--text); line-height: 1.6; }
+.quote .author { font-size: 0.75rem; color: var(--muted); margin-top: 8px; font-style: normal; }
+
+/* Section */
+section { margin-bottom: 32px; }
+section > .section-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
+section > .section-title::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; }
+
+/* Responsive */
+@media (max-width: 900px) {
+  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+  .col-span-2, .col-span-3 { grid-column: span 1; }
+  .header h1 { font-size: 1.6rem; }
+}
+
+/* AGENT: CUSTOM_STYLES */
+
+</style>
+</head>
+<body>
+
+<!-- AGENT: HEADER -->
+
+<!-- AGENT: CONTENT -->
+
+<script>
+const githubDarkTheme = {
+  color: ['#58a6ff', '#3fb950', '#d29922', '#f78166', '#bc8cff',
+          '#79c0ff', '#ff7b72', '#e3b341', '#a5d6ff', '#56d364'],
+  backgroundColor: 'transparent',
+  textStyle: { color: '#e6edf3', fontFamily: "'Segoe UI', system-ui, sans-serif" },
+
+  title:    { textStyle: { color: '#e6edf3', fontWeight: 600 },
+              subtextStyle: { color: '#8b949e' } },
+
+  line:    { itemStyle: { borderWidth: 0 }, lineStyle: { width: 2 }, symbolSize: 6, symbol: 'circle', smooth: false },
+  bar:     { itemStyle: { borderRadius: 2, borderWidth: 0 } },
+  pie:     { itemStyle: { borderColor: '#0d1117', borderWidth: 1 } },
+  scatter: { itemStyle: { borderWidth: 0 } },
+  radar:   { itemStyle: { borderWidth: 2 }, lineStyle: { width: 2 }, symbolSize: 4, symbol: 'circle' },
+  candlestick: { itemStyle: { color: '#3fb950', color0: '#f85149', borderColor: '#3fb950', borderColor0: '#f85149', borderWidth: 1 } },
+  graph:   { itemStyle: { borderWidth: 0 }, lineStyle: { color: '#30363d', width: 1 },
+             color: ['#58a6ff','#3fb950','#d29922','#f78166','#bc8cff'],
+             label: { color: '#e6edf3' } },
+  gauge:   { title: { color: '#e6edf3' }, detail: { color: '#e6edf3' } },
+  funnel:  { itemStyle: { borderColor: '#0d1117', borderWidth: 1 } },
+  sankey:  { itemStyle: { borderWidth: 0 }, lineStyle: { color: 'source', opacity: 0.4 } },
+
+  categoryAxis: {
+    axisLine:  { show: true, lineStyle: { color: '#30363d' } },
+    axisTick:  { show: false, lineStyle: { color: '#30363d' } },
+    axisLabel: { show: true, color: '#8b949e' },
+    splitLine: { show: false, lineStyle: { color: ['#21262d'], opacity: 0.5 } },
+    splitArea: { show: false }
+  },
+  valueAxis: {
+    axisLine:  { show: true, lineStyle: { color: '#30363d' } },
+    axisTick:  { show: false, lineStyle: { color: '#30363d' } },
+    axisLabel: { show: true, color: '#8b949e' },
+    splitLine: { show: true, lineStyle: { color: ['#21262d'], opacity: 0.6 } },
+    splitArea: { show: false }
+  },
+  logAxis: {
+    axisLine:  { show: true, lineStyle: { color: '#30363d' } },
+    axisLabel: { show: true, color: '#8b949e' },
+    splitLine: { show: true, lineStyle: { color: ['#21262d'], opacity: 0.6 } }
+  },
+  timeAxis: {
+    axisLine:  { show: true, lineStyle: { color: '#30363d' } },
+    axisLabel: { show: true, color: '#8b949e' },
+    splitLine: { show: true, lineStyle: { color: ['#21262d'], opacity: 0.6 } }
+  },
+
+  legend:  { textStyle: { color: '#8b949e' }, inactiveColor: '#484f58',
+             itemStyle: { borderColor: 'transparent' } },
+  tooltip: { backgroundColor: '#1c2128', borderColor: '#30363d', borderWidth: 1,
+             textStyle: { color: '#e6edf3' },
+             axisPointer: {
+               lineStyle:  { color: '#58a6ff', width: 1 },
+               crossStyle: { color: '#58a6ff', width: 1 },
+               shadowStyle:{ color: 'rgba(88,166,255,0.08)' },
+               label: { backgroundColor: '#1c2128', color: '#e6edf3' }
+             } },
+  toolbox: { iconStyle: { borderColor: '#8b949e' },
+             emphasis: { iconStyle: { borderColor: '#58a6ff' } } },
+  timeline: { lineStyle: { color: '#30363d', width: 1 },
+              itemStyle: { color: '#58a6ff' },
+              controlStyle: { color: '#58a6ff', borderColor: '#58a6ff' },
+              checkpointStyle: { color: '#58a6ff', borderColor: '#0d1117' },
+              label: { color: '#8b949e' },
+              emphasis: { itemStyle: { color: '#79c0ff' }, label: { color: '#e6edf3' } } },
+  visualMap: { color: ['#58a6ff', '#3fb950', '#d29922', '#f78166'],
+               textStyle: { color: '#8b949e' } },
+  dataZoom:  { backgroundColor: 'rgba(28,33,40,0.5)',
+               dataBackgroundColor: 'rgba(88,166,255,0.15)',
+               fillerColor: 'rgba(88,166,255,0.12)',
+               handleColor: '#58a6ff', handleSize: '100%',
+               borderColor: '#30363d',
+               textStyle: { color: '#8b949e' } },
+  markPoint: { label: { color: '#e6edf3' },
+               emphasis: { label: { color: '#e6edf3' } } }
+};
+echarts.registerTheme('github-dark', githubDarkTheme);
+
+const __charts = [];
+function initChart(id, options) {
+  const el = document.getElementById(id);
+  if (!el) { console.warn('initChart: element not found:', id); return null; }
+  const chart = echarts.init(el, 'github-dark');
+  chart.setOption(options);
+  __charts.push(chart);
+  return chart;
+}
+window.addEventListener('resize', () => __charts.forEach(c => c.resize()));
+
+/* AGENT: CHART_DATA */
+
+/* AGENT: CHART_INITS */
+
+</script>
+
+</body>
+</html>

From bf2a477796fb1539d973f08bd5875a72ac86c993 Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 15:54:49 +0300
Subject: [PATCH 03/11] erase_scratchpad_history tool

---
 anton/core/llm/prompts.py | 17 ++++++++++++++++-
 anton/core/session.py     |  6 ++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/anton/core/llm/prompts.py b/anton/core/llm/prompts.py
index 3de22211..83f28a7c 100644
--- a/anton/core/llm/prompts.py
+++ b/anton/core/llm/prompts.py
@@ -500,6 +500,11 @@ def __read_html_template():
   shared state — other functions rely on the original.
 - Keep each cell small. If a single block would push the cell past a few hundred
   lines, split it into smaller helper blocks in separate cells.
+- **Every cell in the dashboard build must start with a `# DELETABLE: <short
+  description>` comment on the very first line** (e.g. `# DELETABLE: build header
+  HTML`). Once the final file is on disk, the intermediate code is no longer
+  useful in context; the marker is what lets `erase_scratchpad_history` clear
+  these cells afterwards. The comment has no effect on execution.
 
 Cell layout — one function per marker in the template, plus one function per
 block from DashSpec:
@@ -521,6 +526,7 @@ def __read_html_template():
 The final cell looks roughly like this:
 
 ```python
+# DELETABLE: assemble template and write final HTML file
 def __get_html():
     template = __read_html_template()
     content = (
@@ -546,7 +552,16 @@ def __get_html():
 
 Splitting the work across cells catches syntax errors early (a broken string in
 one block fails fast), keeps each cell well under the scratchpad's 120-second
-timeout, and makes the final assembly trivially reviewable.\
+timeout, and makes the final assembly trivially reviewable.
+
+### Step 4 — Reclaim context
+After the final `__get_html()` cell has returned the path, call the
+`erase_scratchpad_history` tool (no arguments). It walks every cell you
+marked `# DELETABLE: <desc>` and replaces its code with `# DELETED: <desc>`
+in both the live scratchpad and the message history — the dashboard HTML on
+disk is the artifact, so the intermediate code no longer needs to occupy
+context. Skipping this step is not an error, but it bloats later turns with
+code the user can reread from the file any time.\
 """
 
 
diff --git a/anton/core/session.py b/anton/core/session.py
index 25720bb7..8efc81ee 100644
--- a/anton/core/session.py
+++ b/anton/core/session.py
@@ -13,6 +13,7 @@
 from anton.core.memory.cerebellum import Cerebellum
 from anton.core.memory.skills import SkillStore
 from anton.core.tools.recall_skill import RECALL_SKILL_TOOL
+from anton.core.tools.erase_scratchpad_history import ERASE_SCRATCHPAD_HISTORY_TOOL
 from anton.core.llm.prompts import RESILIENCE_NUDGE
 from anton.core.llm.provider import (
     ContextOverflowError,
@@ -405,6 +406,11 @@ def _build_core_tools(self) -> None:
         # Procedural memory retrieval — always available, no-op if no skills.
         self.tool_registry.register_tool(RECALL_SKILL_TOOL)
 
+        # Context compaction for file-artifact workflows: the agent marks
+        # intermediate cells with `# DELETABLE: <desc>` and calls this after
+        # writing the final file to disk.
+        self.tool_registry.register_tool(ERASE_SCRATCHPAD_HISTORY_TOOL)
+
     async def close(self) -> None:
         """Clean up scratchpads and other resources."""
         await self._scratchpads.close_all()

From f0711b1035376d6abb72ea8337bc815307f869b7 Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 17:18:45 +0300
Subject: [PATCH 04/11] fix

---
 anton/templates/template-dark-github.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/anton/templates/template-dark-github.html b/anton/templates/template-dark-github.html
index cd936c6d..2f4123c1 100644
--- a/anton/templates/template-dark-github.html
+++ b/anton/templates/template-dark-github.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

From b74c425caa66b2c0796a391d43d41bad8aa1fbe8 Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 17:20:05 +0300
Subject: [PATCH 05/11] new template

---
 anton/core/llm/prompts.py                     |  12 +-
 anton/core/tools/recall_skill.py              |   2 +-
 ...te-dark-github.html => template-dark.html} | 122 ++++++++----------
 3 files changed, 64 insertions(+), 72 deletions(-)
 rename anton/templates/{template-dark-github.html => template-dark.html} (53%)

diff --git a/anton/core/llm/prompts.py b/anton/core/llm/prompts.py
index 83f28a7c..a5059003 100644
--- a/anton/core/llm/prompts.py
+++ b/anton/core/llm/prompts.py
@@ -317,14 +317,14 @@
 ## 3. Reading the template in scratchpad
 
 The template file ships inside the installed `anton` package at
-`anton/templates/template-dark-github.html`. Define the helper below in one of
+`anton/templates/template-dark.html`. Define the helper below in one of
 your first scratchpad cells so the final assembly cell can call it:
 
 ```python
 def __read_html_template():
     import anton
     from pathlib import Path
-    path = Path(anton.__file__).parent / "templates" / "template-dark-github.html"
+    path = Path(anton.__file__).parent / "templates" / "template-dark.html"
     return path.read_text(encoding="utf-8")
 ```
 
@@ -505,6 +505,14 @@ def __read_html_template():
   HTML`). Once the final file is on disk, the intermediate code is no longer
   useful in context; the marker is what lets `erase_scratchpad_history` clear
   these cells afterwards. The comment has no effect on execution.
+- **Append an approximate progress percentage to the end of every cell's
+  `one_line_description`** so the user sees the build advancing. Compute
+  `total = 6 + N` where `N = len(DashSpec.blocks)` (5 fixed cells + N block
+  cells + 1 final `__get_html()`). For the K-th cell (1-based) append
+  `" (~{{pct}}% done)"` with `pct = round(K / total * 100)`. Example for a
+  dashboard with 3 blocks (`total=9`): cell 1 → `"build page title (~11% done)"`,
+  cell 5 → `"build chart inits (~56% done)"`, final cell → `"assemble and save
+  dashboard (~100% done)"`.
 
 Cell layout — one function per marker in the template, plus one function per
 block from DashSpec:
diff --git a/anton/core/tools/recall_skill.py b/anton/core/tools/recall_skill.py
index 8f78aeec..2948f2b3 100644
--- a/anton/core/tools/recall_skill.py
+++ b/anton/core/tools/recall_skill.py
@@ -23,7 +23,7 @@
 _DASHBOARD_TEMPLATE_PATH = (
     Path(__file__).resolve().parent.parent.parent
     / "templates"
-    / "template-dark-github.html"
+    / "template-dark.html"
 )
 _DASHBOARD_TEMPLATE_MARKER = "<!-- DASHBOARD_HTML_TEMPLATE -->"
 
diff --git a/anton/templates/template-dark-github.html b/anton/templates/template-dark.html
similarity index 53%
rename from anton/templates/template-dark-github.html
rename to anton/templates/template-dark.html
index 2f4123c1..d969d256 100644
--- a/anton/templates/template-dark-github.html
+++ b/anton/templates/template-dark.html
@@ -1,3 +1,4 @@
+<!-- V2 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -25,55 +26,34 @@
 body {
   background: var(--bg);
   color: var(--text);
-  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
   padding: 24px;
+  max-width: 1440px;
+  margin: 0 auto;
   min-height: 100vh;
 }
 
-/* Header */
-.header { text-align: center; padding: 40px 20px 32px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
-.header .badge { display: inline-block; background: rgba(88,166,255,0.12); border: 1px solid rgba(88,166,255,0.3); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; }
-.header h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px; }
-.header .subtitle { color: var(--muted); font-size: 1rem; max-width: 600px; margin: 0 auto; }
-.source-link { display: inline-block; margin-top: 12px; color: var(--accent); font-size: 0.85rem; text-decoration: none; opacity: 0.8; }
-.source-link:hover { opacity: 1; text-decoration: underline; }
-
-/* Grids */
-.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; }
-.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; }
-.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
+/* Grid — single utility, agent sets --cols inline (default 2) */
+.grid { display: grid; gap: 20px; margin-bottom: 24px;
+        grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
 .col-span-2 { grid-column: span 2; }
-.col-span-3 { grid-column: span 3; }
 
 /* Card */
 .card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
-.card-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
+.card-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
 .card h2 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 16px; }
 
-/* KPI */
-.kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; }
-.kpi .kpi-icon  { font-size: 1.8rem; margin-bottom: 8px; }
-.kpi .kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1; margin-bottom: 4px; }
+/* KPI — use --c for accent color, e.g. style="--c: var(--accent3)" */
+.kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; --c: var(--accent); }
+.kpi .kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1; margin-bottom: 4px; color: var(--c); }
 .kpi .kpi-label { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.5px; }
-.kpi.blue   .kpi-value { color: var(--accent); }
-.kpi.green  .kpi-value { color: var(--accent3); }
-.kpi.orange .kpi-value { color: var(--accent4); }
-.kpi.red    .kpi-value { color: var(--accent2); }
-.kpi.purple .kpi-value { color: var(--purple); }
-
-/* Steps */
-.steps { display: flex; flex-direction: column; gap: 0; }
-.step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
-.step:last-child { border-bottom: none; }
-.step-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; margin-top: 2px; }
-.step-num.s0 { background: rgba(247,129,102,0.2); color: var(--accent2); border: 1px solid rgba(247,129,102,0.4); }
-.step-num.s1 { background: rgba(210,153,34,0.2); color: var(--accent4); border: 1px solid rgba(210,153,34,0.4); }
-.step-num.s2 { background: rgba(88,166,255,0.2); color: var(--accent);  border: 1px solid rgba(88,166,255,0.4); }
-.step-num.s3 { background: rgba(63,185,80,0.2);  color: var(--accent3); border: 1px solid rgba(63,185,80,0.4); }
-.step-num.s4 { background: rgba(188,140,255,0.2); color: var(--purple); border: 1px solid rgba(188,140,255,0.4); }
-.step-content h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; color: var(--text); }
-.step-content p  { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
-.step-content code { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 0.78rem; color: var(--accent3); font-family: 'Consolas', monospace; }
+
+/* Tags — use --c for color, e.g. <span class="tag" style="--c: var(--accent3)"> */
+.tag { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 4px;
+       --c: var(--accent);
+       color: var(--c);
+       background: color-mix(in oklab, var(--c) 15%, transparent);
+       border: 1px solid color-mix(in oklab, var(--c) 30%, transparent); }
 
 /* Tables */
 .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
@@ -82,38 +62,23 @@
 .data-table tr:last-child td { border-bottom: none; }
 .data-table tr:hover td { background: var(--bg3); }
 
-/* Tags */
-.tag { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
-.tag-red    { background: rgba(247,129,102,0.15); color: var(--accent2); border: 1px solid rgba(247,129,102,0.3); }
-.tag-yellow { background: rgba(210,153,34,0.15); color: var(--accent4); border: 1px solid rgba(210,153,34,0.3); }
-.tag-blue   { background: rgba(88,166,255,0.15); color: var(--accent);  border: 1px solid rgba(88,166,255,0.3); }
-.tag-green  { background: rgba(63,185,80,0.15);  color: var(--accent3); border: 1px solid rgba(63,185,80,0.3); }
-.tag-purple { background: rgba(188,140,255,0.15); color: var(--purple); border: 1px solid rgba(188,140,255,0.3); }
-
 /* Chart containers */
 .chart-container    { width: 100%; height: 320px; }
 .chart-container-lg { width: 100%; height: 380px; }
-.chart-container-sm { width: 100%; height: 200px; }
 
 /* Callouts */
 .insight-box { background: rgba(88,166,255,0.06); border: 1px solid rgba(88,166,255,0.2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin-top: 16px; }
 .insight-box p { font-size: 0.83rem; color: var(--text); line-height: 1.6; }
-.insight-box strong { color: var(--accent); }
-
-.quote { background: var(--bg3); border-left: 3px solid var(--purple); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 0; }
-.quote p { font-size: 0.9rem; font-style: italic; color: var(--text); line-height: 1.6; }
-.quote .author { font-size: 0.75rem; color: var(--muted); margin-top: 8px; font-style: normal; }
 
 /* Section */
 section { margin-bottom: 32px; }
-section > .section-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
+section > .section-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
 section > .section-title::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; }
 
 /* Responsive */
 @media (max-width: 900px) {
-  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
-  .col-span-2, .col-span-3 { grid-column: span 1; }
-  .header h1 { font-size: 1.6rem; }
+  .grid { grid-template-columns: 1fr; }
+  .col-span-2 { grid-column: span 1; }
 }
 
 /* AGENT: CUSTOM_STYLES */
@@ -122,8 +87,6 @@
 </head>
 <body>
 
-<!-- AGENT: HEADER -->
-
 <!-- AGENT: CONTENT -->
 
 <script>
@@ -131,13 +94,13 @@
   color: ['#58a6ff', '#3fb950', '#d29922', '#f78166', '#bc8cff',
           '#79c0ff', '#ff7b72', '#e3b341', '#a5d6ff', '#56d364'],
   backgroundColor: 'transparent',
-  textStyle: { color: '#e6edf3', fontFamily: "'Segoe UI', system-ui, sans-serif" },
+  textStyle: { color: '#e6edf3', fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif" },
 
   title:    { textStyle: { color: '#e6edf3', fontWeight: 600 },
               subtextStyle: { color: '#8b949e' } },
 
-  line:    { itemStyle: { borderWidth: 0 }, lineStyle: { width: 2 }, symbolSize: 6, symbol: 'circle', smooth: false },
-  bar:     { itemStyle: { borderRadius: 2, borderWidth: 0 } },
+  line:    { itemStyle: { borderWidth: 0 }, lineStyle: { width: 2 }, symbol: 'none', smooth: false },
+  bar:     { itemStyle: { borderRadius: 0, borderWidth: 0 } },
   pie:     { itemStyle: { borderColor: '#0d1117', borderWidth: 1 } },
   scatter: { itemStyle: { borderWidth: 0 } },
   radar:   { itemStyle: { borderWidth: 2 }, lineStyle: { width: 2 }, symbolSize: 4, symbol: 'circle' },
@@ -151,27 +114,27 @@
 
   categoryAxis: {
     axisLine:  { show: true, lineStyle: { color: '#30363d' } },
-    axisTick:  { show: false, lineStyle: { color: '#30363d' } },
+    axisTick:  { show: false },
     axisLabel: { show: true, color: '#8b949e' },
-    splitLine: { show: false, lineStyle: { color: ['#21262d'], opacity: 0.5 } },
+    splitLine: { show: false, lineStyle: { color: '#21262d' } },
     splitArea: { show: false }
   },
   valueAxis: {
     axisLine:  { show: true, lineStyle: { color: '#30363d' } },
-    axisTick:  { show: false, lineStyle: { color: '#30363d' } },
+    axisTick:  { show: false },
     axisLabel: { show: true, color: '#8b949e' },
-    splitLine: { show: true, lineStyle: { color: ['#21262d'], opacity: 0.6 } },
+    splitLine: { show: true, lineStyle: { color: '#21262d' } },
     splitArea: { show: false }
   },
   logAxis: {
     axisLine:  { show: true, lineStyle: { color: '#30363d' } },
     axisLabel: { show: true, color: '#8b949e' },
-    splitLine: { show: true, lineStyle: { color: ['#21262d'], opacity: 0.6 } }
+    splitLine: { show: true, lineStyle: { color: '#21262d' } }
   },
   timeAxis: {
     axisLine:  { show: true, lineStyle: { color: '#30363d' } },
     axisLabel: { show: true, color: '#8b949e' },
-    splitLine: { show: true, lineStyle: { color: ['#21262d'], opacity: 0.6 } }
+    splitLine: { show: true, lineStyle: { color: '#21262d' } }
   },
 
   legend:  { textStyle: { color: '#8b949e' }, inactiveColor: '#484f58',
@@ -200,7 +163,17 @@
                handleColor: '#58a6ff', handleSize: '100%',
                borderColor: '#30363d',
                textStyle: { color: '#8b949e' } },
-  markPoint: { label: { color: '#e6edf3' },
+  markPoint: { symbol: 'roundRect', symbolSize: [60, 22],
+               itemStyle: { borderColor: '#30363d', borderWidth: 1 },
+               label: { position: 'inside', color: '#e6edf3', fontSize: 11, fontWeight: 600,
+                        textBorderColor: 'transparent', textBorderWidth: 0 },
+               emphasis: { label: { color: '#e6edf3' } } },
+  markLine:  { symbol: ['none', 'none'],
+               lineStyle: { color: '#8b949e', type: 'dashed', width: 1 },
+               label: { position: 'insideEndTop', color: '#e6edf3', fontSize: 11,
+                        textBorderColor: 'transparent', textBorderWidth: 0,
+                        backgroundColor: 'rgba(28,33,40,0.85)',
+                        padding: [3, 6], borderRadius: 3 },
                emphasis: { label: { color: '#e6edf3' } } }
 };
 echarts.registerTheme('github-dark', githubDarkTheme);
@@ -214,7 +187,18 @@
   __charts.push(chart);
   return chart;
 }
-window.addEventListener('resize', () => __charts.forEach(c => c.resize()));
+
+/* Debounced resize via ResizeObserver — reacts to layout changes, not just window resize */
+let __resizeTimer;
+const __resizeAll = () => {
+  clearTimeout(__resizeTimer);
+  __resizeTimer = setTimeout(() => __charts.forEach(c => c.resize()), 80);
+};
+window.addEventListener('resize', __resizeAll);
+if (window.ResizeObserver) {
+  const __ro = new ResizeObserver(__resizeAll);
+  __ro.observe(document.body);
+}
 
 /* AGENT: CHART_DATA */
 

From 3775b66c6243a2dbd657da42ea621b76261f445a Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 17:20:32 +0300
Subject: [PATCH 06/11] erase_scratchpad_history tool

---
 anton/core/tools/erase_scratchpad_history.py | 146 +++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 anton/core/tools/erase_scratchpad_history.py

diff --git a/anton/core/tools/erase_scratchpad_history.py b/anton/core/tools/erase_scratchpad_history.py
new file mode 100644
index 00000000..336c051b
--- /dev/null
+++ b/anton/core/tools/erase_scratchpad_history.py
@@ -0,0 +1,146 @@
+"""The `erase_scratchpad_history` tool — drop intermediate scratchpad code from
+context once the artifact it produced has been written to disk.
+
+When the agent builds an HTML dashboard (or any file artifact) across many
+scratchpad cells, every `exec` call and its code string lives on in the message
+history. Once the final HTML is on disk, that intermediate code is redundant —
+the file is the source of truth. This tool blanks the code of cells that the
+agent marked with `# DELETABLE: <description>` as the first line, both in the
+live pad and in the assistant message history, so follow-up turns don't pay
+the context tax.
+
+Scope is deliberately narrow: only `input.code` of matching scratchpad exec
+tool calls and `cell.code` of matching cells. Outputs, descriptions, and other
+tool types are untouched.
+"""
+
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
+from anton.core.tools.tool_defs import ToolDef
+
+if TYPE_CHECKING:
+    from anton.core.session import ChatSession
+
+
+_MARKER = "# DELETABLE:"
+
+
+_DESCRIPTION = (
+    "Erase the Python code of scratchpad cells you previously marked with "
+    "`# DELETABLE: <short description>` as their first line. Call this after "
+    "a file artifact (HTML dashboard, presentation, etc.) has been written to "
+    "disk — the file is the source of truth, so the intermediate generation "
+    "code is no longer useful in the conversation context.\n\n"
+    "The tool scans both the live scratchpad cells and the assistant message "
+    "history, and replaces every matching `code` value with "
+    "`# DELETED: <description>` (the description from the marker is preserved "
+    "so you can still see what each cell did). Outputs, descriptions on the "
+    "tool call, and anything without the marker are left untouched. Safe to "
+    "call repeatedly — cells already cleared are skipped."
+)
+
+
+_INPUT_SCHEMA = {
+    "type": "object",
+    "properties": {},
+    "required": [],
+    "additionalProperties": False,
+}
+
+
+def _extract_deletable_description(code: str) -> str | None:
+    """If the first non-blank line of `code` is `# DELETABLE: <desc>`, return
+    <desc>. Otherwise None.
+
+    Leading blank lines (common when the model emits multi-line code blocks)
+    are ignored so the marker still matches.
+    """
+    if not isinstance(code, str):
+        return None
+    stripped = code.lstrip()
+    first_line = stripped.split("\n", 1)[0].strip()
+    if not first_line.startswith(_MARKER):
+        return None
+    return first_line[len(_MARKER):].strip()
+
+
+def _replacement(description: str) -> str:
+    if description:
+        return f"# DELETED: {description}"
+    return "# DELETED"
+
+
+async def handle_erase_scratchpad_history(
+    session: "ChatSession", tc_input: dict
+) -> str:
+    """Clear code of DELETABLE-marked cells in live pads and history."""
+    cells_cleared = 0
+    history_blocks_cleared = 0
+
+    # 1. Live scratchpad cells
+    for pad in session._scratchpads.pads.values():
+        for cell in pad.cells:
+            desc = _extract_deletable_description(cell.code)
+            if desc is None:
+                continue
+            cell.code = _replacement(desc)
+            cells_cleared += 1
+
+    # 2. Message history — only scratchpad exec tool_use blocks.
+    # Skip the last assistant message (it contains this tool call itself).
+    history = session._history
+    last_idx = len(history) - 1
+    for idx, msg in enumerate(history):
+        if idx == last_idx and msg.get("role") == "assistant":
+            continue
+        content = msg.get("content")
+        if not isinstance(content, list):
+            continue
+        for block in content:
+            if not isinstance(block, dict):
+                continue
+            if block.get("type") != "tool_use":
+                continue
+            if block.get("name") != "scratchpad":
+                continue
+            tc_in = block.get("input")
+            if not isinstance(tc_in, dict):
+                continue
+            if tc_in.get("action") != "exec":
+                continue
+            code = tc_in.get("code")
+            desc = _extract_deletable_description(code)
+            if desc is None:
+                continue
+            tc_in["code"] = _replacement(desc)
+            history_blocks_cleared += 1
+
+    session._persist_history()
+
+    if cells_cleared == 0 and history_blocks_cleared == 0:
+        return (
+            "No DELETABLE cells found. Either none were marked with "
+            "`# DELETABLE: <description>` on their first line, or they have "
+            "already been cleared."
+        )
+
+    return (
+        f"Cleared {cells_cleared} live scratchpad cells and "
+        f"{history_blocks_cleared} tool-call entries in history."
+    )
+
+
+ERASE_SCRATCHPAD_HISTORY_TOOL = ToolDef(
+    name="erase_scratchpad_history",
+    description=_DESCRIPTION,
+    input_schema=_INPUT_SCHEMA,
+    handler=handle_erase_scratchpad_history,
+)
+
+
+__all__ = [
+    "ERASE_SCRATCHPAD_HISTORY_TOOL",
+    "handle_erase_scratchpad_history",
+]

From 19a0a6af3050b4f9d46aa3044840187ce50ba9c1 Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 17:54:47 +0300
Subject: [PATCH 07/11] prompt update

---
 anton/core/llm/prompts.py | 142 ++++++++++++++++++--------------------
 1 file changed, 69 insertions(+), 73 deletions(-)

diff --git a/anton/core/llm/prompts.py b/anton/core/llm/prompts.py
index a5059003..d7b06e4b 100644
--- a/anton/core/llm/prompts.py
+++ b/anton/core/llm/prompts.py
@@ -302,7 +302,7 @@
 | Marker | Location | What your function returns |
 |--------|----------|----------------------------|
 | `<!-- AGENT: PAGE_TITLE -->` | inside `<title>` | plain-text title (no tags) |
-| `/* AGENT: CUSTOM_STYLES */` | end of `<style>` | extra CSS — only if the base theme is insufficient, otherwise empty string |
+| `/* AGENT: CUSTOM_STYLES */` | end of `<style>` | extra CSS — feel free to add any rules, keyframes, or utility classes the dashboard needs (new `.card-*` variants, block-specific layouts, animations, custom gradients, etc.). Return `""` only when the base theme already covers everything. |
 | `<!-- AGENT: HEADER -->` | top of `<body>` | `<div class="header">...</div>` with `.badge`, `<h1>`, `.subtitle`, optional `.source-link` |
 | `<!-- AGENT: CONTENT -->` | main body area | one or more `<section>` blocks holding charts, tables, KPIs |
 | `/* AGENT: CHART_DATA */` | in `<script>` | JS `const` declarations for datasets used by charts |
@@ -329,9 +329,19 @@ def __read_html_template():
 ```
 
 Call `__read_html_template()` exactly once — from inside `__get_html()` — to
-obtain the template string, then apply the six `.replace(...)` substitutions
-described in section 5. Do NOT hold the template in a module-level variable;
-read it fresh inside the assembly function so each build is self-contained.
+obtain the template string, then apply only the `.replace(...)` substitutions
+that apply to your dashboard. You do NOT have to fill every marker — the
+section 2 markers are all valid HTML / CSS / JS comments in their respective
+contexts, so any you leave untouched remain as invisible comments in the
+output and don't affect rendering. A minimal dashboard may only replace
+`PAGE_TITLE` and `CONTENT`, or just `CONTENT` if a bare title is fine. Do NOT
+hold the template in a module-level variable; read it fresh inside the
+assembly function so each build is self-contained.
+
+The one exception is `<!-- AGENT: PAGE_TITLE -->`: it sits inside `<title>`,
+where HTML comments are treated as literal text. If you don't replace it, the
+browser tab shows the raw marker — so replace it whenever you care about the
+title.
 
 ## 4. DashSpec
 
@@ -344,7 +354,8 @@ def __read_html_template():
 - Catch structural mistakes before HTML generation.
 - Make each block's purpose explicit before committing to code.
 - Keep generation deterministic: each spec block maps to one HTML fragment
-  (→ one scratchpad cell, one `__get_block_<id>()` function).
+  via its own `__get_block_<id>()` function. Related small functions can
+  share a scratchpad cell — see section 5 for packing rules.
 
 ### Format
 
@@ -441,43 +452,15 @@ def __read_html_template():
     description: "Top 10 products by revenue with SKU, name, and revenue columns."
 ```
 
-### Example — Presentation
-
-```yaml
-docType: dash-spec
-version: "0.1"
-
-meta:
-  title: "Q4 Sales Review"
-
-layout: "Vertical stack of full-viewport slides, navigated by scroll or arrow keys."
-
-blocks:
-  - id: cover
-    type: title_slide
-    description: "Deck title and subtitle, centered."
-
-  - id: key_findings
-    type: bullet_slide
-    description: "Heading 'Key Findings' with three bullets summarizing
-      the quarter's headline takeaways."
-
-  - id: revenue_chart
-    type: chart_slide
-    description: "Full-slide ECharts line chart of monthly revenue,
-      with a short heading above."
-
-  - id: closing
-    type: quote_slide
-    description: "Closing quote that frames the next-quarter ask."
-```
-
 ## 5. Build workflow
 
 ### Step 1 — List insights
-Already required by the insights-first workflow at the top of this prompt: one
-line per chart/block in the form `<kind>: <insight it conveys and why it matters>`.
-This checklist is the input for DashSpec — no narrative prose, no design discussion.
+Jot down a tight checklist of what the page must show — one line per block in
+the form `<kind>: <insight it conveys and why it matters>`
+(e.g. `kpi_card: total revenue to anchor the quarter at a glance`,
+`line_chart: monthly revenue trajectory to spot inflection points`,
+`quote_slide: closing quote that frames the next-quarter ask`). This
+checklist is the input for DashSpec.
 
 ### Step 2 — Write DashSpec
 Produce the `DashSpec` YAML following the format in section 4. Do NOT embed
@@ -487,51 +470,64 @@ def __read_html_template():
 
 ### Step 3 — Build the dashboard across scratchpad cells
 
-Each scratchpad cell defines exactly ONE isolated Python function whose name
-starts with double underscore (`__`). The function returns a string. This keeps
-the scratchpad namespace clean — no stray module-level variables.
-
-Rules for all cells:
-- One function per cell. Name it `__<role>` (double underscore prefix).
+Every piece of output is produced by a Python function whose name starts with
+double underscore (`__`). Each function returns a string. This keeps the
+scratchpad namespace clean — no stray module-level variables.
+
+Rules:
+- One `__<role>` function per block / marker. Name it `__<role>` (double
+  underscore prefix), so no function — and no stray module-level variable —
+  leaks into the user-visible scratchpad namespace.
+- You do NOT need one scratchpad cell per function. Pack several related
+  small functions into the same cell when that's natural (e.g. three short
+  KPI-card blocks can share one cell). Break into more cells only when a
+  cell would otherwise grow past ~150 lines, or when functions need very
+  different imports / setup.
+- `__get_html()` is always its own final cell — don't bundle it with anything.
 - Return a string. Never print or write to files from these functions —
   only the final `__get_html()` cell writes output.
 - If the function needs to use a variable declared in an earlier cell, **make a
   copy** before mutating (`copy.deepcopy(x)` or `x.copy()`). Never modify
   shared state — other functions rely on the original.
-- Keep each cell small. If a single block would push the cell past a few hundred
-  lines, split it into smaller helper blocks in separate cells.
-- **Every cell in the dashboard build must start with a `# DELETABLE: <short
+- **Every cell in the page build must start with a `# DELETABLE: <short
   description>` comment on the very first line** (e.g. `# DELETABLE: build header
   HTML`). Once the final file is on disk, the intermediate code is no longer
   useful in context; the marker is what lets `erase_scratchpad_history` clear
   these cells afterwards. The comment has no effect on execution.
 - **Append an approximate progress percentage to the end of every cell's
-  `one_line_description`** so the user sees the build advancing. Compute
-  `total = 6 + N` where `N = len(DashSpec.blocks)` (5 fixed cells + N block
-  cells + 1 final `__get_html()`). For the K-th cell (1-based) append
-  `" (~{{pct}}% done)"` with `pct = round(K / total * 100)`. Example for a
-  dashboard with 3 blocks (`total=9`): cell 1 → `"build page title (~11% done)"`,
-  cell 5 → `"build chart inits (~56% done)"`, final cell → `"assemble and save
-  dashboard (~100% done)"`.
-
-Cell layout — one function per marker in the template, plus one function per
-block from DashSpec:
-
-| Cell | Function | Target marker | Returns |
-|------|----------|---------------|---------|
-| 1 | `__get_page_title()` | `<!-- AGENT: PAGE_TITLE -->` | plain-text title, no tags |
-| 2 | `__make_custom_styles()` | `/* AGENT: CUSTOM_STYLES */` | extra CSS if needed; return `""` when the base theme is enough |
-| 3 | `__get_header()` | `<!-- AGENT: HEADER -->` | `<div class="header">` with `.badge`, `<h1>`, `.subtitle`, optional `.source-link` |
-| 4 | `__get_chart_data()` | `/* AGENT: CHART_DATA */` | JS `const` declarations for datasets, e.g. `const signups = [...];`. Serialize with `json.dumps(data, default=str)`; DataFrames → `df.to_dict(orient='records')` |
-| 5 | `__get_chart_inits()` | `/* AGENT: CHART_INITS */` | one `initChart('dom-id', {{ ...option... }});` call per chart container from the blocks |
-| 6..N | `__get_block_<id>()` | concatenated into `<!-- AGENT: CONTENT -->` | HTML fragment for that block — `<section>` with KPIs, chart `<div>` placeholders (the `initChart` call lives in cell 5, not here), tables, text |
-| Final | `__get_html()` | — | reads the template, replaces all markers, writes the file, returns the path |
+  `one_line_description`** so the user sees the build advancing. Before the
+  first cell, decide how you'll pack the functions into cells and let
+  `total` be that cell count (always including the final `__get_html()`
+  cell). For the K-th cell (1-based) append `" (~{{pct}}% done)"` with
+  `pct = round(K / total * 100)`. Example with `total=6` cells: cell 1 →
+  `"build title + styles (~17% done)"`, cell 3 → `"build kpi + main blocks
+  (~50% done)"`, final cell → `"assemble and save dashboard (~100% done)"`.
+  If the plan changes mid-build, recompute `total` from the new plan —
+  percentages only need to trend upward, not be exact.
+
+Function layout — one function per marker in the template, plus one function
+per block from DashSpec. Cell packing is up to you (see the rules above).
+
+| Function | Target marker | Returns |
+|----------|---------------|---------|
+| `__get_page_title()` | `<!-- AGENT: PAGE_TITLE -->` | plain-text title, no tags |
+| `__make_custom_styles()` | `/* AGENT: CUSTOM_STYLES */` | any CSS rules, keyframes, or utility classes this dashboard needs — adding custom styles is encouraged whenever the base classes don't fit the design (new card variants, block-specific grids, animations, hover states, layered gradients, etc.). Reuse the theme CSS variables (`var(--bg)`, `var(--accent)`, etc.) for consistency. Return `""` only when nothing extra is required. |
+| `__get_header()` | `<!-- AGENT: HEADER -->` | `<div class="header">` with `.badge`, `<h1>`, `.subtitle`, optional `.source-link` |
+| `__get_chart_data()` | `/* AGENT: CHART_DATA */` | JS `const` declarations for datasets, e.g. `const signups = [...];`. Serialize with `json.dumps(data, default=str)`; DataFrames → `df.to_dict(orient='records')` |
+| `__get_chart_inits()` | `/* AGENT: CHART_INITS */` | one `initChart('dom-id', {{ ...option... }});` call per chart container from the blocks |
+| `__get_block_<id>()` (one per DashSpec block) | concatenated into `<!-- AGENT: CONTENT -->` | HTML fragment for that block — `<section>` with KPIs, chart `<div>` placeholders (the `initChart` call lives in `__get_chart_inits`, not here), tables, text |
+| `__get_html()` | — | reads the template, replaces all markers, writes the file, returns the path |
 
 Rules for keeping functions coordinated:
 - Every chart needs a matching pair: a `<div id="...">` inside some `__get_block_<id>()` AND an `initChart('...', {{...}})` inside `__get_chart_inits()`. The DOM ids must match exactly.
 - `__get_chart_data()` names datasets referenced by `__get_chart_inits()`. Keep naming stable across the two.
 
-The final cell looks roughly like this:
+The final cell looks roughly like the example below. Include only the
+`.replace(...)` calls (and their corresponding fixed cells) that your
+dashboard actually needs — skip `CUSTOM_STYLES` if the base theme is enough,
+skip `HEADER` if the design has no top banner, skip both `CHART_DATA` and
+`CHART_INITS` if there are no charts. The unmodified markers stay as inert
+comments in the output.
 
 ```python
 # DELETABLE: assemble template and write final HTML file
@@ -546,11 +542,11 @@ def __get_html():
     html = (
         template
         .replace("<!-- AGENT: PAGE_TITLE -->", __get_page_title())
-        .replace("/* AGENT: CUSTOM_STYLES */", __make_custom_styles())
-        .replace("<!-- AGENT: HEADER -->",     __get_header())
+        .replace("/* AGENT: CUSTOM_STYLES */", __make_custom_styles())  # omit if no custom CSS
+        .replace("<!-- AGENT: HEADER -->",     __get_header())          # omit if no header
         .replace("<!-- AGENT: CONTENT -->",    content)
-        .replace("/* AGENT: CHART_DATA */",    __get_chart_data())
-        .replace("/* AGENT: CHART_INITS */",   __get_chart_inits())
+        .replace("/* AGENT: CHART_DATA */",    __get_chart_data())      # omit if no charts
+        .replace("/* AGENT: CHART_INITS */",   __get_chart_inits())     # omit if no charts
     )
     path = "<output path>"  # see output_context
     with open(path, "wt", encoding="utf-8") as f:

From adcf83dd8fedd59e487be8815b4212ccd22a57eb Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 17:54:55 +0300
Subject: [PATCH 08/11] template update

---
 anton/templates/template-dark.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/anton/templates/template-dark.html b/anton/templates/template-dark.html
index d969d256..92de7946 100644
--- a/anton/templates/template-dark.html
+++ b/anton/templates/template-dark.html
@@ -86,6 +86,7 @@
 </style>
 </head>
 <body>
+<!-- AGENT: HEADER -->
 
 <!-- AGENT: CONTENT -->
 

From a140904c1ca5aa6ab58c5db3c891acb550bbaad8 Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 18:26:24 +0300
Subject: [PATCH 09/11] fill output_context in the template

---
 anton/core/tools/recall_skill.py | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/anton/core/tools/recall_skill.py b/anton/core/tools/recall_skill.py
index 2948f2b3..9a6bd9f6 100644
--- a/anton/core/tools/recall_skill.py
+++ b/anton/core/tools/recall_skill.py
@@ -60,8 +60,17 @@
 }
 
 
-def get_generate_dashboard_html_prompt() -> str:
-    rendered = VISUALIZATIONS_HTML_OUTPUT_FORMAT_PROMPT.format(output_context="")
+def get_generate_dashboard_html_prompt(
+    session: "ChatSession | None" = None,
+) -> str:
+    output_context = ""
+    if session is not None:
+        ctx = getattr(session, "_system_prompt_context", None)
+        if ctx is not None:
+            output_context = getattr(ctx, "output_context", "") or ""
+    rendered = VISUALIZATIONS_HTML_OUTPUT_FORMAT_PROMPT.format(
+        output_context=output_context
+    )
     html_template = _DASHBOARD_TEMPLATE_PATH.read_text(encoding="utf-8")
     return rendered.replace(_DASHBOARD_TEMPLATE_MARKER, html_template)
 
@@ -93,7 +102,7 @@ async def handle_recall_skill(session: "ChatSession", tc_input: dict) -> str:
         )
 
     if label_in == "generate_dashboard_html":
-        return get_generate_dashboard_html_prompt()
+        return get_generate_dashboard_html_prompt(session)
 
     store = getattr(session, "_skill_store", None)
     if store is None:

From 0977f53952cd7b77840384b36da380fc301721a8 Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 18:47:53 +0300
Subject: [PATCH 10/11] tests

---
 tests/test_prompt_builder_skills.py | 20 +++++++++++++-------
 tests/test_session_skills_init.py   |  8 ++++++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/tests/test_prompt_builder_skills.py b/tests/test_prompt_builder_skills.py
index 6796e16e..3a7878e8 100644
--- a/tests/test_prompt_builder_skills.py
+++ b/tests/test_prompt_builder_skills.py
@@ -48,15 +48,20 @@ def _build_prompt(builder: ChatSystemPromptBuilder, **overrides) -> str:
 
 
 class TestProceduralMemorySection:
-    def test_no_store_omits_section(self):
+    def test_no_store_renders_only_builtins(self):
         builder = ChatSystemPromptBuilder()
         prompt = _build_prompt(builder, skill_store=None)
-        assert "Procedural memory" not in prompt
+        # Section is always present because at least one built-in skill exists.
+        assert "## Procedural memory" in prompt
+        assert "`generate_dashboard_html`" in prompt
 
-    def test_empty_store_omits_section(self, empty_store: SkillStore):
+    def test_empty_store_renders_only_builtins(self, empty_store: SkillStore):
         builder = ChatSystemPromptBuilder()
         prompt = _build_prompt(builder, skill_store=empty_store)
-        assert "Procedural memory" not in prompt
+        assert "## Procedural memory" in prompt
+        assert "`generate_dashboard_html`" in prompt
+        # No user-skill labels leak in from an empty store.
+        assert "`csv_summary`" not in prompt
 
     def test_populated_store_renders_section(self, populated_store: SkillStore):
         builder = ChatSystemPromptBuilder()
@@ -130,8 +135,8 @@ def test_handles_skill_without_when_to_use(self, tmp_path: Path):
         assert "`bare`" in prompt
         # No crash, even with no when_to_use
 
-    def test_skip_section_when_store_raises(self, tmp_path: Path, monkeypatch):
-        """If the store blows up at read time, the section is omitted gracefully."""
+    def test_store_failure_falls_back_to_builtins(self, tmp_path: Path, monkeypatch):
+        """If the store blows up at read time, we still render the built-ins."""
         s = SkillStore(root=tmp_path / "skills_broken")
 
         def boom(self):
@@ -140,4 +145,5 @@ def boom(self):
         monkeypatch.setattr(SkillStore, "list_summaries", boom)
         builder = ChatSystemPromptBuilder()
         prompt = _build_prompt(builder, skill_store=s)
-        assert "Procedural memory" not in prompt
+        assert "## Procedural memory" in prompt
+        assert "`generate_dashboard_html`" in prompt
diff --git a/tests/test_session_skills_init.py b/tests/test_session_skills_init.py
index 76c584af..ab09f5bb 100644
--- a/tests/test_session_skills_init.py
+++ b/tests/test_session_skills_init.py
@@ -74,7 +74,7 @@ def test_section_appears_when_store_passed(
         assert "## Procedural memory" in prompt
         assert "csv_summary" in prompt
 
-    def test_section_omitted_when_no_store(self):
+    def test_section_renders_builtins_when_no_store(self):
         builder = ChatSystemPromptBuilder()
         prompt = builder.build(
             current_datetime="2026-04-10",
@@ -82,7 +82,11 @@ def test_section_omitted_when_no_store(self):
             proactive_dashboards=False,
             skill_store=None,
         )
-        assert "Procedural memory" not in prompt
+        # Section is always present because of hardcoded built-in skills.
+        assert "## Procedural memory" in prompt
+        assert "`generate_dashboard_html`" in prompt
+        # No user skills leak when there's no store.
+        assert "csv_summary" not in prompt
 
 
 class TestDispatchRoundtrip:

From 2d7e65939c4a1fcccb7719870b9b4a7f6d2ec793 Mon Sep 17 00:00:00 2001
From: Max Stepanov <stpmax@yandex.ru>
Date: Fri, 24 Apr 2026 20:11:50 +0300
Subject: [PATCH 11/11] add cell with spec

---
 anton/core/llm/prompts.py | 34 ++++++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/anton/core/llm/prompts.py b/anton/core/llm/prompts.py
index d7b06e4b..42e2e1e1 100644
--- a/anton/core/llm/prompts.py
+++ b/anton/core/llm/prompts.py
@@ -347,8 +347,9 @@ def __read_html_template():
 
 Before writing any HTML, produce a **DashSpec** — a short YAML plan that
 captures the page structure. Only after the spec is complete do you generate
-the HTML. The spec is an internal artifact: your own plan, not shown to the
-end user.
+the HTML. The spec lives inside a scratchpad cell (see Step 2 in section 5) —
+never written directly into the chat message — so it stays out of the user's
+view but remains accessible to every later cell in the build.
 
 **Why:**
 - Catch structural mistakes before HTML generation.
@@ -463,10 +464,31 @@ def __read_html_template():
 checklist is the input for DashSpec.
 
 ### Step 2 — Write DashSpec
-Produce the `DashSpec` YAML following the format in section 4. Do NOT embed
-data values in it — only structure and references. This is a plan, not a
-payload. Self-check before moving on: unique IDs, every block has
-`description`, `layout` makes sense.
+The `DashSpec` YAML is produced as your **first scratchpad cell** — never as
+a YAML code block in the chat response. Assign it to `__dash_spec` and print
+it back so the plan is captured in the tool result:
+
+```python
+# DELETABLE: draft dashboard spec
+__dash_spec = '''
+docType: dash-spec
+version: "0.1"
+
+meta:
+  title: "..."
+
+layout: "..."
+
+blocks:
+  - id: ...
+    type: ...
+    description: ...
+'''
+```
+
+Follow the format in section 4. Do NOT embed data values in the spec — only
+structure and references. Self-check before moving on: unique IDs, every block
+has `description`, `layout` makes sense.
 
 ### Step 3 — Build the dashboard across scratchpad cells