From 9ca61c9707f613015043bd1cecbcf19b87eaf5ff Mon Sep 17 00:00:00 2001
From: Key KQ <key.kq20052022@gmail.com>
Date: Wed, 5 Aug 2026 22:10:25 +0700
Subject: [PATCH 1/7] feat(chat): render token price charts inline in Web UI
 chat

Artifacts published as `application/vnd.agentos.chart+json` now draw as an
interactive candlestick chart in the chat transcript instead of a download
chip, and the gmgn skills emit one alongside their text summaries.

The chart goes through the existing artifact seam, so history replay redraws
it without a separate code path. lightweight-charts is imported dynamically:
it lands in its own 63.5 KB gz chunk and never loads for a chat with no
chart, leaving the Chat route at 93.8 KB gz against a 180 KB budget.

Payload strings (token names and symbols) are attacker-controlled on-chain
metadata, so every one of them reaches the DOM through textContent.

- chart.ts: payload normalization (ms->s, sort, dedupe by timestamp) plus a
  lazy, theme-aware mounter
- artifacts.ts: new `chart` category rendering a mount placeholder
- gmgn-market: scripts/kline_chart.py converts kline output to the payload
- gmgn-token: fetches a chart during research via the gmgn-market skill
---
 THIRD_PARTY_NOTICES.md                        |   2 +
 docs/artifacts-and-media.md                   |  36 ++
 docs/web-ui.md                                |   7 +-
 frontend/package-lock.json                    |  16 +
 frontend/package.json                         |   1 +
 .../src/views/chat/chat-unified-css.test.ts   |  12 +
 frontend/src/views/chat/chat-unified.css      |  80 +++-
 .../views/chat/transcript/artifacts.test.ts   |  10 +
 .../src/views/chat/transcript/artifacts.ts    |  43 +-
 .../src/views/chat/transcript/chart.test.ts   | 208 +++++++++
 frontend/src/views/chat/transcript/chart.ts   | 424 ++++++++++++++++++
 frontend/src/views/chat/transcript/history.ts |  11 +-
 frontend/src/views/chat/transcript/stream.ts  |   6 +
 frontend/src/views/chat/useTranscript.ts      |  42 ++
 .../skills/bundled/gmgn-market/SKILL.md       |  44 ++
 .../gmgn-market/scripts/kline_chart.py        | 170 +++++++
 .../skills/bundled/gmgn-token/SKILL.md        |  19 +
 17 files changed, 1123 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/views/chat/transcript/chart.test.ts
 create mode 100644 frontend/src/views/chat/transcript/chart.ts
 create mode 100644 src/agentos/skills/bundled/gmgn-market/scripts/kline_chart.py

diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md
index 78628f8c..2c4e58a4 100644
--- a/THIRD_PARTY_NOTICES.md
+++ b/THIRD_PARTY_NOTICES.md
@@ -473,8 +473,10 @@ when multiple packages use the same license.
 - `clsx@2.1.1` — MIT
 - `cookie@1.1.1` — MIT
 - `dompurify@3.4.12` — MPL-2.0 or Apache-2.0
+- `fancy-canvas@2.1.0` — MIT
 - `framer-motion@12.42.2` — MIT
 - `highlight.js@11.11.1` — BSD-3-Clause
+- `lightweight-charts@5.2.0` — Apache-2.0
 - `lucide-react@1.25.0` — ISC
 - `marked@18.0.7` — MIT
 - `motion@12.42.2` — MIT
diff --git a/docs/artifacts-and-media.md b/docs/artifacts-and-media.md
index e68a4773..0906fdb0 100644
--- a/docs/artifacts-and-media.md
+++ b/docs/artifacts-and-media.md
@@ -42,6 +42,42 @@ Use artifacts for:
 
 Use chat text for short answers, decisions, and next steps.
 
+## Inline Charts
+
+Most artifacts render in Web UI chat as a download chip; images and audio render
+inline. One more mime renders inline as an interactive chart:
+
+| Mime | Rendered as |
+|------|-------------|
+| `application/vnd.agentos.chart+json` | Candlestick chart with a volume histogram |
+
+Publish a JSON file with that mime and the chat draws it in place of the chip.
+The body is:
+
+```json
+{
+  "type": "candlestick",
+  "title": "BONK · 1h",
+  "subtitle": "SOL · 1h",
+  "candles": [
+    { "time": 1754380800, "open": 1.2e-6, "high": 1.5e-6, "low": 1.1e-6,
+      "close": 1.4e-6, "volume": 12500.5 }
+  ]
+}
+```
+
+`time` is a Unix timestamp in **seconds** and `volume` is optional; every other
+candle field is required. Rows may arrive in any order and may repeat a
+timestamp — the renderer sorts them and keeps the last entry per timestamp.
+`title` and `subtitle` are display-only text, never markup.
+
+The `gmgn-market` skill ships `scripts/kline_chart.py`, which converts GMGN
+kline output into this shape; use it as a worked example when adding charts to
+another skill.
+
+Charts render in the Web UI only. Other surfaces receive the artifact as a
+normal JSON file, so keep a short text summary in the reply alongside the chart.
+
 ## Document Skills
 
 AgentOS includes skills for common document formats:
diff --git a/docs/web-ui.md b/docs/web-ui.md
index 2897267d..3351bb08 100644
--- a/docs/web-ui.md
+++ b/docs/web-ui.md
@@ -196,7 +196,12 @@ cards for:
 - exported data files;
 - PDFs, slide decks, images, and other generated outputs.
 
-For channel delivery limits and artifact recovery, see
+Images and audio play inline in the card. An artifact published as
+`application/vnd.agentos.chart+json` renders as an interactive candlestick
+chart instead of a download chip — the `gmgn-market` and `gmgn-token` skills use
+this for token price charts.
+
+For the chart payload shape, channel delivery limits, and artifact recovery, see
 [`artifacts-and-media.md`](artifacts-and-media.md).
 
 ## Approvals
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 361f3f44..40979010 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,7 @@
         "clsx": "^2.1.1",
         "dompurify": "^3.4.12",
         "highlight.js": "^11.11.1",
+        "lightweight-charts": "^5.2.0",
         "lucide-react": "^1.25.0",
         "marked": "^18.0.7",
         "motion": "^12.42.2",
@@ -3418,6 +3419,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/fancy-canvas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
+      "integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4179,6 +4186,15 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lightweight-charts": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-5.2.0.tgz",
+      "integrity": "sha512-ey3Vas8UhV06ni+LT9TA1nEe4y8So4Mi6CL/oarNHFMyTktz/xy8e8+oh04Q//eO3t6etvFXgayz2fClyFQb5w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "fancy-canvas": "2.1.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 15b3c788..20261c66 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
     "clsx": "^2.1.1",
     "dompurify": "^3.4.12",
     "highlight.js": "^11.11.1",
+    "lightweight-charts": "^5.2.0",
     "lucide-react": "^1.25.0",
     "marked": "^18.0.7",
     "motion": "^12.42.2",
diff --git a/frontend/src/views/chat/chat-unified-css.test.ts b/frontend/src/views/chat/chat-unified-css.test.ts
index 6de27d7a..b2d7668b 100644
--- a/frontend/src/views/chat/chat-unified-css.test.ts
+++ b/frontend/src/views/chat/chat-unified-css.test.ts
@@ -46,6 +46,18 @@ describe('unified Chat CSS contract', () => {
     )
   })
 
+  it('reserves chart geometry and overlays the status so a drawn chart cannot shift the transcript', () => {
+    // The canvas is filled after a lazy import plus a payload fetch, so its
+    // height must exist before either resolves.
+    expect(css).toMatch(/\.chat-surface \.msg-artifact-chart__canvas \{[\s\S]*?height: 20rem;/)
+    // Canvas and status share one grid cell — hiding the status must not
+    // collapse a row.
+    expect(css).toMatch(
+      /\.chat-surface \.msg-artifact-chart__canvas,[\s\S]*?\.chat-surface \.msg-artifact-chart__status \{[\s\S]*?grid-row: 2;[\s\S]*?grid-column: 1;/,
+    )
+    expect(css).toMatch(/\.chat-surface \.msg-artifact-charts \{[\s\S]*?max-width: 100%;/)
+  })
+
   it('reserves portalled header geometry before reactive controls mount', () => {
     expect(css).toMatch(
       /\.shell-chat-header__context \{[\s\S]*?min-height: 2\.5rem;[\s\S]*?overflow: visible;/,
diff --git a/frontend/src/views/chat/chat-unified.css b/frontend/src/views/chat/chat-unified.css
index 756bb759..6f2507db 100644
--- a/frontend/src/views/chat/chat-unified.css
+++ b/frontend/src/views/chat/chat-unified.css
@@ -228,7 +228,8 @@
 }
 
 .chat-surface .msg-artifact-gallery,
-.chat-surface .msg-artifact-files {
+.chat-surface .msg-artifact-files,
+.chat-surface .msg-artifact-charts {
   display: grid;
   gap: 0.625rem;
 }
@@ -241,6 +242,12 @@
   max-width: min(36rem, 100%);
 }
 
+/* Charts take the full transcript column — a candlestick series is unreadable
+   at gallery-card width. */
+.chat-surface .msg-artifact-charts {
+  max-width: 100%;
+}
+
 .chat-surface .msg-artifact-card {
   display: flex;
   flex-direction: column;
@@ -285,6 +292,77 @@
   font-weight: 600;
 }
 
+/* Chart artifacts (chart.ts). The canvas is drawn asynchronously by
+   lightweight-charts after a lazy import plus a payload fetch, so the card
+   reserves its full height up front — same no-layout-shift contract the image
+   preview above follows. */
+.chat-surface .msg-artifact-chart {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.75rem;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-surface);
+  background: color-mix(in srgb, var(--card) 92%, transparent);
+  color: var(--foreground);
+}
+
+.chat-surface .msg-artifact-chart__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.chat-surface .msg-artifact-chart__name {
+  overflow: hidden;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-surface .msg-artifact-chart__download {
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  text-decoration: none;
+}
+
+.chat-surface .msg-artifact-chart__download:hover {
+  color: var(--foreground);
+}
+
+/* Canvas and status share one grid cell so the status can disappear on a
+   successful draw without collapsing a row and shifting the transcript. */
+.chat-surface .msg-artifact-chart__canvas,
+.chat-surface .msg-artifact-chart__status {
+  grid-row: 2;
+  grid-column: 1;
+}
+
+.chat-surface .msg-artifact-chart__canvas {
+  width: 100%;
+  height: 20rem;
+}
+
+.chat-surface .msg-artifact-chart__status {
+  place-self: center;
+  margin: 0;
+  color: var(--muted-foreground);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  pointer-events: none;
+}
+
+.chat-surface .msg-artifact-chart__status[hidden] {
+  display: none;
+}
+
 .chat-surface .msg-artifact-card__meta {
   color: var(--muted-foreground);
   font: 500 0.6875rem/1.4 var(--font-mono);
diff --git a/frontend/src/views/chat/transcript/artifacts.test.ts b/frontend/src/views/chat/transcript/artifacts.test.ts
index 9826019a..5d54b908 100644
--- a/frontend/src/views/chat/transcript/artifacts.test.ts
+++ b/frontend/src/views/chat/transcript/artifacts.test.ts
@@ -19,6 +19,7 @@ import {
   artifactPreviewUrl,
   artifactAuthenticatedDownloadUrl,
 } from './artifacts'
+import { CHART_ARTIFACT_MIME } from './chart'
 
 /* ── artifactMime / artifactName (chat.js:7523-7529) ────────────────────── */
 
@@ -93,6 +94,14 @@ describe('artifactCategory (parity chat.js:7538)', () => {
     )
     expect(artifactCategory({} as never)).toBe('file')
   })
+  it('classifies the AgentOS chart mime as "chart" (no legacy counterpart)', () => {
+    // Wins over the +json extension fallback, which would otherwise land the
+    // chart payload in 'data' and render it as a download chip.
+    expect(artifactCategory({ mime: CHART_ARTIFACT_MIME, name: 'bonk.chart.json' } as never)).toBe(
+      'chart',
+    )
+    expect(artifactCategory({ mime: 'application/json', name: 'x.json' } as never)).toBe('data')
+  })
 })
 
 /* ── artifactCategoryLabel (chat.js:7551) ───────────────────────────────── */
@@ -103,6 +112,7 @@ describe('artifactCategoryLabel (parity chat.js:7551)', () => {
     expect(artifactCategoryLabel('document')).toBe('doc')
     expect(artifactCategoryLabel('code')).toBe('code')
     expect(artifactCategoryLabel('audio')).toBe('audio')
+    expect(artifactCategoryLabel('chart')).toBe('chart')
   })
   it('defaults unknown / visual / file categories to "file"', () => {
     expect(artifactCategoryLabel('visual')).toBe('file')
diff --git a/frontend/src/views/chat/transcript/artifacts.ts b/frontend/src/views/chat/transcript/artifacts.ts
index 80558218..2c9e5290 100644
--- a/frontend/src/views/chat/transcript/artifacts.ts
+++ b/frontend/src/views/chat/transcript/artifacts.ts
@@ -27,6 +27,8 @@
 
 export { publishArtifactTargetName } from './tools'
 
+import { isChartArtifact } from './chart'
+
 /* ── Artifact shape ─────────────────────────────────────────────────────── */
 
 /** The artifact payload the gateway emits (open-ended; only cited fields used). */
@@ -97,9 +99,12 @@ export function artifactExtension(name: string): string {
   return trimmed.slice(idx + 1)
 }
 
-// chat.js:7538-7549 — category: visual | audio | data | document | code | file.
+// chat.js:7538-7549 — category: visual | audio | data | document | code | file,
+// plus the AgentOS-native 'chart' category (chart.ts) which has no legacy
+// counterpart: it renders an inline chart rather than a download chip.
 // NOTE: image/* maps to 'visual' (NOT 'image' — the brief example was wrong).
 export function artifactCategory(artifact: Artifact | null | undefined): string {
+  if (isChartArtifact(artifact)) return 'chart'
   const mime = artifactMime(artifact)
   if (mime.startsWith('image/')) return 'visual'
   if (mime.startsWith('audio/')) return 'audio'
@@ -115,6 +120,8 @@ export function artifactCategory(artifact: Artifact | null | undefined): string
 // chat.js:7551-7559 — category → chip glyph label.
 export function artifactCategoryLabel(category: string): string {
   switch (category) {
+    case 'chart':
+      return 'chart'
     case 'data':
       return 'data'
     case 'document':
@@ -228,6 +235,12 @@ export interface ArtifactRendererDeps {
   toast?: (message: string, kind?: string, durationMs?: number) => void
   /** chat.js `_chatDiag` — the diagnostics ring. Default: no-op. */
   diag?: (event: string, detail: Record<string, unknown>) => void
+  /**
+   * Draw any chart placeholders that just entered `container` (chart.ts
+   * `mountCharts`). AgentOS-native — no legacy counterpart. Default: no-op, so
+   * a controller that never composes a mounter simply renders inert cards.
+   */
+  mountCharts?: (container: HTMLElement) => void
 }
 
 /* ── Factory ────────────────────────────────────────────────────────────── */
@@ -245,6 +258,7 @@ export function createArtifactRenderer(deps: ArtifactRendererDeps) {
   const escAttr = deps.escAttr ?? deps.esc
   const toast = deps.toast ?? (() => {})
   const diag = deps.diag ?? (() => {})
+  const mountCharts = deps.mountCharts ?? ((): void => {})
 
   const urlContext = (): ArtifactUrlContext => ({
     sessionKey: deps.getSessionKey() || '',
@@ -265,13 +279,15 @@ export function createArtifactRenderer(deps: ArtifactRendererDeps) {
     }
     artifacts.forEach((artifact) => {
       const category = artifactCategory(artifact)
-      const groupKind = category === 'visual' ? 'visual' : 'file'
+      const groupKind = category === 'visual' ? 'visual' : category === 'chart' ? 'chart' : 'file'
       if (groupKind !== openGroup) {
         closeGroup()
         html +=
           groupKind === 'visual'
             ? '<div class="msg-artifact-gallery">'
-            : '<div class="msg-artifact-files">'
+            : groupKind === 'chart'
+              ? '<div class="msg-artifact-charts">'
+              : '<div class="msg-artifact-files">'
         openGroup = groupKind
       }
       const name = artifactName(artifact)
@@ -283,7 +299,20 @@ export function createArtifactRenderer(deps: ArtifactRendererDeps) {
       const downloadUrl = artifactDownloadUrl(artifact || {})
       const downloadHref = artifactAuthenticatedDownloadUrl(downloadUrl, { sessionKey, token })
       const meta = [mime, size].filter(Boolean).join(' · ')
-      if (isImageArtifact(artifact)) {
+      if (category === 'chart') {
+        // A mount placeholder, not a finished card: the chart mounter fetches
+        // `data-chart-src` and draws into `__canvas`. Geometry is reserved in
+        // CSS so the transcript does not jump when the chart lands.
+        const payloadUrl = artifactPreviewUrl(artifact || {}, { sessionKey, token })
+        html += `<div class="msg-artifact-chart" data-chart-src="${escAttr(payloadUrl)}" data-artifact-category="${escAttr(category)}" data-artifact-download="${escAttr(downloadUrl)}" data-artifact-id="${escAttr(artifact?.id || '')}" data-artifact-name="${escAttr(name)}">
+          <div class="msg-artifact-chart__header">
+            <span class="msg-artifact-chart__name">${esc(name)}</span>
+            <a class="msg-artifact-chart__download" href="${escAttr(downloadHref)}" download="${escAttr(name)}" data-artifact-download="${escAttr(downloadUrl)}">Download</a>
+          </div>
+          <div class="msg-artifact-chart__canvas"></div>
+          <p class="msg-artifact-chart__status">Loading chart…</p>
+        </div>`
+      } else if (isImageArtifact(artifact)) {
         const previewUrl = artifactPreviewUrl(artifact || {}, { sessionKey, token })
         html += `<a class="msg-artifact-card msg-artifact-card--image" href="${escAttr(downloadHref)}" download="${escAttr(name)}" data-artifact-category="${escAttr(category)}" data-artifact-download="${escAttr(downloadUrl)}" data-artifact-id="${escAttr(artifact?.id || '')}" data-artifact-name="${escAttr(name)}" title="Download ${escAttr(name)}">
           ${previewUrl ? `<img class="msg-artifact-preview" src="${esc(previewUrl)}" alt="${esc(name)}" loading="lazy">` : '<span class="msg-artifact-preview msg-artifact-preview--empty" aria-hidden="true"></span>'}
@@ -324,7 +353,10 @@ export function createArtifactRenderer(deps: ArtifactRendererDeps) {
     const bubble = deps.ensureStreamBubble()
     deps.markVisibleStreamEvent('artifact')
     const body = bubble.querySelector('.msg-body')
-    if (body) body.insertAdjacentHTML('beforeend', renderArtifacts([payload]))
+    if (body) {
+      body.insertAdjacentHTML('beforeend', renderArtifacts([payload]))
+      mountCharts(body as HTMLElement)
+    }
     if (deps.getAutoScroll()) deps.scrollToBottom()
     diag('artifact.append.done', { name: payload.name, mime: payload.mime })
   }
@@ -340,6 +372,7 @@ export function createArtifactRenderer(deps: ArtifactRendererDeps) {
     const artifacts = deps.getStreamArtifacts()
     if (artifacts.length > 0) {
       body.insertAdjacentHTML('beforeend', renderArtifacts(artifacts))
+      mountCharts(body as HTMLElement)
       if (deps.getAutoScroll()) deps.scrollToBottom()
     }
   }
diff --git a/frontend/src/views/chat/transcript/chart.test.ts b/frontend/src/views/chat/transcript/chart.test.ts
new file mode 100644
index 00000000..09848bae
--- /dev/null
+++ b/frontend/src/views/chat/transcript/chart.test.ts
@@ -0,0 +1,208 @@
+// Pure-helper tests for the chart-artifact renderer (chart.ts).
+//
+// The imperative mounter draws through lightweight-charts against a real canvas
+// and is covered by the live-browser sweep, not here. What IS covered here is
+// everything that decides WHAT gets drawn: mime matching, payload
+// normalization, the ordering/dedup contract lightweight-charts asserts on, and
+// the price precision that keeps sub-cent meme tokens readable.
+
+import { describe, it, expect } from 'vitest'
+import {
+  CHART_ARTIFACT_MIME,
+  chartTheme,
+  hasVolume,
+  isChartArtifact,
+  normalizeChartPayload,
+  priceDecimals,
+  volumeSeriesData,
+} from './chart'
+
+/* ── isChartArtifact ────────────────────────────────────────────────────── */
+
+describe('isChartArtifact', () => {
+  it('matches the chart mime', () => {
+    expect(isChartArtifact({ mime: CHART_ARTIFACT_MIME })).toBe(true)
+  })
+  it('matches case-insensitively and ignores mime parameters', () => {
+    expect(isChartArtifact({ mime: 'APPLICATION/VND.AGENTOS.CHART+JSON' })).toBe(true)
+    expect(isChartArtifact({ mime: `${CHART_ARTIFACT_MIME}; charset=utf-8` })).toBe(true)
+  })
+  it('does not match plain JSON or a missing mime', () => {
+    expect(isChartArtifact({ mime: 'application/json' })).toBe(false)
+    expect(isChartArtifact({})).toBe(false)
+    expect(isChartArtifact(null)).toBe(false)
+  })
+})
+
+/* ── normalizeChartPayload ──────────────────────────────────────────────── */
+
+const candle = (time: number, close = 1): Record<string, unknown> => ({
+  time,
+  open: 1,
+  high: 2,
+  low: 0.5,
+  close,
+})
+
+describe('normalizeChartPayload', () => {
+  it('returns null for non-objects and payloads without a candle array', () => {
+    expect(normalizeChartPayload(null)).toBeNull()
+    expect(normalizeChartPayload('nope')).toBeNull()
+    expect(normalizeChartPayload({})).toBeNull()
+    expect(normalizeChartPayload({ candles: 'no' })).toBeNull()
+  })
+
+  it('returns null when every candle is unusable', () => {
+    expect(normalizeChartPayload({ candles: [{ time: 1 }, null, { open: 1 }] })).toBeNull()
+  })
+
+  it('keeps title and subtitle as trimmed strings', () => {
+    const payload = normalizeChartPayload({
+      title: '  BONK · 1h  ',
+      subtitle: ' SOL ',
+      candles: [candle(100)],
+    })
+    expect(payload?.title).toBe('BONK · 1h')
+    expect(payload?.subtitle).toBe('SOL')
+  })
+
+  it('defaults title and subtitle to empty strings when absent or non-string', () => {
+    const payload = normalizeChartPayload({ title: 42, candles: [candle(100)] })
+    expect(payload?.title).toBe('')
+    expect(payload?.subtitle).toBe('')
+  })
+
+  it('coerces numeric strings, which is what the GMGN CLI emits', () => {
+    const payload = normalizeChartPayload({
+      candles: [{ time: '1700000000', open: '1.5', high: '2', low: '1', close: '1.75' }],
+    })
+    expect(payload?.candles[0]).toEqual({
+      time: 1700000000,
+      open: 1.5,
+      high: 2,
+      low: 1,
+      close: 1.75,
+    })
+  })
+
+  it('drops rows missing any OHLC field rather than defaulting them to zero', () => {
+    const payload = normalizeChartPayload({
+      candles: [candle(100), { time: 200, open: 1, high: 2, low: 1 }, candle(300)],
+    })
+    expect(payload?.candles.map((c) => c.time)).toEqual([100, 300])
+  })
+
+  it('sorts ascending — lightweight-charts asserts on unordered data', () => {
+    const payload = normalizeChartPayload({ candles: [candle(300), candle(100), candle(200)] })
+    expect(payload?.candles.map((c) => c.time)).toEqual([100, 200, 300])
+  })
+
+  it('de-duplicates repeated timestamps, keeping the last restatement', () => {
+    const payload = normalizeChartPayload({ candles: [candle(100, 5), candle(100, 9)] })
+    expect(payload?.candles).toHaveLength(1)
+    expect(payload?.candles[0]?.close).toBe(9)
+  })
+
+  it('converts millisecond timestamps to seconds', () => {
+    const payload = normalizeChartPayload({ candles: [candle(1754380800000)] })
+    expect(payload?.candles[0]?.time).toBe(1754380800)
+  })
+
+  it('leaves second-precision timestamps untouched', () => {
+    const payload = normalizeChartPayload({ candles: [candle(1754380800)] })
+    expect(payload?.candles[0]?.time).toBe(1754380800)
+  })
+
+  it('rejects non-positive and non-finite timestamps', () => {
+    const payload = normalizeChartPayload({
+      candles: [candle(0), candle(-5), { ...candle(1), time: 'soon' }, candle(100)],
+    })
+    expect(payload?.candles.map((c) => c.time)).toEqual([100])
+  })
+
+  it('carries volume when present and drops a negative one', () => {
+    const payload = normalizeChartPayload({
+      candles: [
+        { ...candle(100), volume: 250 },
+        { ...candle(200), volume: -3 },
+      ],
+    })
+    expect(payload?.candles[0]?.volume).toBe(250)
+    expect(payload?.candles[1]?.volume).toBeUndefined()
+  })
+})
+
+/* ── hasVolume / volumeSeriesData ───────────────────────────────────────── */
+
+describe('hasVolume', () => {
+  it('is true when any candle carries volume', () => {
+    const payload = normalizeChartPayload({
+      candles: [candle(100), { ...candle(200), volume: 7 }],
+    })
+    expect(hasVolume(payload!)).toBe(true)
+  })
+  it('is false when no candle carries volume', () => {
+    const payload = normalizeChartPayload({ candles: [candle(100)] })
+    expect(hasVolume(payload!)).toBe(false)
+  })
+})
+
+describe('volumeSeriesData', () => {
+  it('colors a rising candle up and a falling candle down, defaulting volume to 0', () => {
+    const payload = normalizeChartPayload({
+      candles: [
+        { time: 100, open: 1, high: 3, low: 1, close: 2, volume: 10 },
+        { time: 200, open: 2, high: 3, low: 0.5, close: 1 },
+      ],
+    })
+    const theme = chartTheme('dark')
+    const rows = volumeSeriesData(payload!, theme)
+    expect(rows[0]).toEqual({ time: 100, value: 10, color: theme.volumeUpColor })
+    expect(rows[1]).toEqual({ time: 200, value: 0, color: theme.volumeDownColor })
+  })
+
+  it('treats an unchanged close as up, matching the candle body color', () => {
+    const payload = normalizeChartPayload({
+      candles: [{ time: 100, open: 2, high: 3, low: 1, close: 2, volume: 4 }],
+    })
+    const theme = chartTheme('light')
+    expect(volumeSeriesData(payload!, theme)[0]?.color).toBe(theme.volumeUpColor)
+  })
+})
+
+/* ── chartTheme ─────────────────────────────────────────────────────────── */
+
+describe('chartTheme', () => {
+  it('gives dark and light distinct text colors over a transparent card', () => {
+    expect(chartTheme('dark').textColor).not.toBe(chartTheme('light').textColor)
+    expect(chartTheme('dark').background).toBe('transparent')
+    expect(chartTheme('light').background).toBe('transparent')
+  })
+})
+
+/* ── priceDecimals ──────────────────────────────────────────────────────── */
+
+describe('priceDecimals', () => {
+  const withCloses = (...closes: number[]) =>
+    normalizeChartPayload({ candles: closes.map((close, i) => candle((i + 1) * 100, close)) })!
+
+  it('uses 2 decimals for prices at or above 1', () => {
+    expect(priceDecimals(withCloses(1, 42, 1500))).toBe(2)
+  })
+
+  it('scales past the leading zeros so meme-token moves stay visible', () => {
+    // 0.00000123 → 5 leading zeros → 9 decimals, not the default 2.
+    expect(priceDecimals(withCloses(0.00000123))).toBe(9)
+  })
+
+  it('keys off the smallest close in the range, not the largest', () => {
+    // 1e-3 → floor(-log10) = 3 → 3 + 4 = 7, rather than the 2 that 5 alone
+    // would have produced.
+    expect(priceDecimals(withCloses(5, 0.001))).toBe(7)
+  })
+
+  it('ignores zero closes and caps the precision', () => {
+    expect(priceDecimals(withCloses(0, 2))).toBe(2)
+    expect(priceDecimals(withCloses(1e-30))).toBe(12)
+  })
+})
diff --git a/frontend/src/views/chat/transcript/chart.ts b/frontend/src/views/chat/transcript/chart.ts
new file mode 100644
index 00000000..80623099
--- /dev/null
+++ b/frontend/src/views/chat/transcript/chart.ts
@@ -0,0 +1,424 @@
+// Chat transcript — inline price-chart artifacts.
+//
+// A skill publishes a JSON artifact with the `application/vnd.agentos.chart+json`
+// mime; the artifact renderer emits a mount placeholder for it (instead of the
+// usual download chip) and this module fetches the payload and draws a
+// candlestick chart into that placeholder.
+//
+// Two surfaces, mirroring artifacts.ts / tools.ts:
+//   1. Pure helpers (top-level exports) — mime match, payload normalization,
+//      theme colors. No DOM, no network, no lightweight-charts import. This is
+//      the unit-test surface (chart.test.ts).
+//   2. `createChartMounter(deps)` — the imperative mounter the artifact renderer
+//      composes. It lazy-imports lightweight-charts so the ~59 KB gz library
+//      lands in its own chunk and never loads for a chat that shows no chart.
+//
+// SECURITY: every payload-derived string reaches the DOM through `textContent`,
+// never `innerHTML`. Chart titles carry token names and symbols, which are
+// fully attacker-controlled on-chain metadata (see the gmgn-token skill's
+// untrusted-data warning) — they are display data, never markup.
+
+// Type-only — erased at compile time, so it does not pull the library into the
+// Chat chunk. The runtime import stays dynamic, inside `draw`.
+import type { UTCTimestamp } from 'lightweight-charts'
+
+import type { Artifact } from './artifacts'
+
+/** The mime a skill publishes to get an inline chart instead of a download chip. */
+export const CHART_ARTIFACT_MIME = 'application/vnd.agentos.chart+json'
+
+/** Rendered height of a chart card, in CSS pixels. Mirrors the CSS reservation. */
+export const CHART_HEIGHT = 320
+
+/* ── Payload shape ──────────────────────────────────────────────────────── */
+
+/** One OHLC candle. `time` is a Unix timestamp in seconds. */
+export interface ChartCandle {
+  time: number
+  open: number
+  high: number
+  low: number
+  close: number
+  volume?: number
+}
+
+/** The artifact body a skill writes. Only `candles` is required. */
+export interface ChartPayload {
+  type: 'candlestick'
+  title: string
+  subtitle: string
+  candles: ChartCandle[]
+}
+
+/* ── Pure helpers (unit-tested) ─────────────────────────────────────────── */
+
+/** True when the artifact should render as an inline chart. */
+export function isChartArtifact(artifact: Artifact | null | undefined): boolean {
+  if (!artifact || !artifact.mime) return false
+  return String(artifact.mime).toLowerCase().split(';')[0]?.trim() === CHART_ARTIFACT_MIME
+}
+
+function finiteNumber(value: unknown): number | null {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : null
+  if (typeof value === 'string' && value.trim() !== '') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : null
+  }
+  return null
+}
+
+/**
+ * Normalize a raw timestamp to Unix **seconds**.
+ *
+ * GMGN's kline route returns milliseconds while lightweight-charts expects
+ * seconds, and the conversion happens skill-side. This is the backstop for a
+ * payload that slipped through in milliseconds: anything past ~5138-11-16
+ * (1e11 seconds) is far outside any real candle range, so treat it as ms.
+ */
+function normalizeTime(value: unknown): number | null {
+  const raw = finiteNumber(value)
+  if (raw === null || raw <= 0) return null
+  const seconds = raw > 1e11 ? Math.floor(raw / 1000) : Math.floor(raw)
+  return seconds > 0 ? seconds : null
+}
+
+function normalizeCandle(raw: unknown): ChartCandle | null {
+  if (!raw || typeof raw !== 'object') return null
+  const row = raw as Record<string, unknown>
+  const time = normalizeTime(row.time)
+  const open = finiteNumber(row.open)
+  const high = finiteNumber(row.high)
+  const low = finiteNumber(row.low)
+  const close = finiteNumber(row.close)
+  if (time === null || open === null || high === null || low === null || close === null) return null
+  const volume = finiteNumber(row.volume)
+  const candle: ChartCandle = { time, open, high, low, close }
+  if (volume !== null && volume >= 0) candle.volume = volume
+  return candle
+}
+
+function textField(value: unknown): string {
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+/**
+ * Validate and normalize an artifact body into a drawable payload, or return
+ * null when there is nothing to draw.
+ *
+ * Candles are coerced to numbers, invalid rows dropped, then sorted ascending
+ * and de-duplicated by timestamp — lightweight-charts asserts on unordered or
+ * repeated times and would otherwise throw during `setData`, taking the whole
+ * transcript render down with it. On a duplicate timestamp the later entry
+ * wins, matching how an exchange restates the most recent candle.
+ */
+export function normalizeChartPayload(raw: unknown): ChartPayload | null {
+  if (!raw || typeof raw !== 'object') return null
+  const body = raw as Record<string, unknown>
+  if (!Array.isArray(body.candles)) return null
+
+  const byTime = new Map<number, ChartCandle>()
+  for (const entry of body.candles) {
+    const candle = normalizeCandle(entry)
+    if (candle) byTime.set(candle.time, candle)
+  }
+  if (byTime.size === 0) return null
+
+  const candles = [...byTime.values()].sort((a, b) => a.time - b.time)
+  return {
+    type: 'candlestick',
+    title: textField(body.title),
+    subtitle: textField(body.subtitle),
+    candles,
+  }
+}
+
+/** True when at least one candle carries a volume, so the histogram is worth drawing. */
+export function hasVolume(payload: ChartPayload): boolean {
+  return payload.candles.some((candle) => typeof candle.volume === 'number')
+}
+
+/** One volume-histogram row per candle, colored by that candle's direction. */
+export function volumeSeriesData(
+  payload: ChartPayload,
+  theme: ChartTheme,
+): Array<{ time: UTCTimestamp; value: number; color: string }> {
+  return payload.candles.map((candle) => ({
+    time: candle.time as UTCTimestamp,
+    value: candle.volume ?? 0,
+    color: candle.close >= candle.open ? theme.volumeUpColor : theme.volumeDownColor,
+  }))
+}
+
+export type ChartThemeMode = 'dark' | 'light'
+
+/** The palette a chart uses for a theme. Kept pure so the colors are testable. */
+export interface ChartTheme {
+  background: string
+  textColor: string
+  gridColor: string
+  borderColor: string
+  upColor: string
+  downColor: string
+  volumeUpColor: string
+  volumeDownColor: string
+}
+
+const DARK_THEME: ChartTheme = {
+  background: 'transparent',
+  textColor: '#8b949e',
+  gridColor: 'rgba(139, 148, 158, 0.12)',
+  borderColor: 'rgba(139, 148, 158, 0.25)',
+  upColor: '#26a69a',
+  downColor: '#ef5350',
+  volumeUpColor: 'rgba(38, 166, 154, 0.4)',
+  volumeDownColor: 'rgba(239, 83, 80, 0.4)',
+}
+
+const LIGHT_THEME: ChartTheme = {
+  background: 'transparent',
+  textColor: '#57606a',
+  gridColor: 'rgba(87, 96, 106, 0.12)',
+  borderColor: 'rgba(87, 96, 106, 0.22)',
+  upColor: '#0f9d81',
+  downColor: '#e03131',
+  volumeUpColor: 'rgba(15, 157, 129, 0.35)',
+  volumeDownColor: 'rgba(224, 49, 49, 0.35)',
+}
+
+/** The palette for a theme mode. */
+export function chartTheme(mode: ChartThemeMode): ChartTheme {
+  return mode === 'dark' ? DARK_THEME : LIGHT_THEME
+}
+
+/**
+ * Decimal places to show for a price scale, derived from the smallest close.
+ *
+ * Meme tokens trade at prices like 0.0000000123, which the library's default
+ * 2-decimal formatter would flatten to "0.00" on every axis label.
+ */
+export function priceDecimals(payload: ChartPayload): number {
+  let smallest = Infinity
+  for (const candle of payload.candles) {
+    const value = Math.abs(candle.close)
+    if (value > 0 && value < smallest) smallest = value
+  }
+  if (!Number.isFinite(smallest)) return 2
+  if (smallest >= 1) return 2
+  // One extra digit past the leading zeros keeps small moves visible.
+  const leadingZeros = Math.floor(-Math.log10(smallest))
+  return Math.min(12, leadingZeros + 4)
+}
+
+/* ── Injected mounter dependencies ──────────────────────────────────────── */
+
+export interface ChartMounterDeps {
+  /** Fetch a chart artifact body from its (authenticated) URL. */
+  fetchPayload: (url: string) => Promise<unknown>
+  /** The active theme mode, read at mount time and on every theme change. */
+  getTheme: () => ChartThemeMode
+  /** chat.js `_chatDiag` — the diagnostics ring. Default: no-op. */
+  diag?: (event: string, detail: Record<string, unknown>) => void
+}
+
+/* ── Factory ────────────────────────────────────────────────────────────── */
+
+/**
+ * Create the chart mounter bound to the transcript's fetch + theme surface.
+ *
+ * `mountCharts(root)` is idempotent: it only picks up placeholders that have
+ * not been mounted yet, so the streaming path may call it after every artifact
+ * append and the history path after a bulk replay, without double-drawing.
+ */
+export function createChartMounter(deps: ChartMounterDeps) {
+  const diag = deps.diag ?? ((): void => {})
+  const mounted = new Set<HTMLElement>()
+  const disposers: Array<() => void> = []
+  const applyThemeCallbacks: Array<(mode: ChartThemeMode) => void> = []
+
+  function setStatus(host: HTMLElement, message: string): void {
+    const status = host.querySelector<HTMLElement>('.msg-artifact-chart__status')
+    if (!status) return
+    // textContent, never innerHTML — see the security note at the top.
+    status.textContent = message
+    status.hidden = message === ''
+  }
+
+  async function draw(host: HTMLElement, payload: ChartPayload): Promise<void> {
+    const canvasHost = host.querySelector<HTMLElement>('.msg-artifact-chart__canvas')
+    if (!canvasHost) return
+
+    // Prefer the payload's own title over the artifact filename. Both are
+    // attacker-influenced token metadata, so this stays on textContent.
+    if (payload.title) {
+      const label = host.querySelector<HTMLElement>('.msg-artifact-chart__name')
+      if (label) label.textContent = payload.title
+    }
+    if (payload.subtitle) {
+      const label = host.querySelector<HTMLElement>('.msg-artifact-chart__name')
+      if (label) label.title = payload.subtitle
+    }
+
+    const lib = await import('lightweight-charts')
+    const theme = chartTheme(deps.getTheme())
+    const decimals = priceDecimals(payload)
+
+    const chart = lib.createChart(canvasHost, {
+      height: CHART_HEIGHT,
+      width: canvasHost.clientWidth || 600,
+      layout: {
+        background: { type: lib.ColorType.Solid, color: theme.background },
+        textColor: theme.textColor,
+        // TradingView asks that the attribution logo stay visible on the
+        // Apache-2.0 build; leaving the default in place keeps us in the clear.
+        attributionLogo: true,
+      },
+      grid: {
+        vertLines: { color: theme.gridColor },
+        horzLines: { color: theme.gridColor },
+      },
+      rightPriceScale: { borderColor: theme.borderColor },
+      timeScale: { borderColor: theme.borderColor, timeVisible: true, secondsVisible: false },
+      // No chart-level `localization.priceFormatter` here on purpose: it wins
+      // over every series' own priceFormat, so a price precision wide enough
+      // for meme tokens would also print volume as "2739.0000000000". Each
+      // series formats its own scale instead.
+    })
+
+    const candleSeries = chart.addSeries(lib.CandlestickSeries, {
+      upColor: theme.upColor,
+      downColor: theme.downColor,
+      borderUpColor: theme.upColor,
+      borderDownColor: theme.downColor,
+      wickUpColor: theme.upColor,
+      wickDownColor: theme.downColor,
+      priceFormat: { type: 'price', precision: decimals, minMove: 10 ** -decimals },
+    })
+    // `Time` is a branded number in lightweight-charts; our normalized Unix
+    // seconds satisfy the UTCTimestamp contract.
+    candleSeries.setData(
+      payload.candles.map((candle) => ({ ...candle, time: candle.time as UTCTimestamp })),
+    )
+
+    let volumeSeries: ReturnType<typeof chart.addSeries> | null = null
+    if (hasVolume(payload)) {
+      volumeSeries = chart.addSeries(lib.HistogramSeries, {
+        priceScaleId: 'volume',
+        priceFormat: { type: 'volume' },
+      })
+      chart.priceScale('volume').applyOptions({
+        scaleMargins: { top: 0.8, bottom: 0 },
+      })
+      volumeSeries.setData(volumeSeriesData(payload, theme))
+    }
+
+    chart.timeScale().fitContent()
+
+    // Re-theme in place rather than tearing the chart down, so a theme toggle
+    // does not reset the user's pan/zoom.
+    const applyTheme = (mode: ChartThemeMode): void => {
+      const next = chartTheme(mode)
+      chart.applyOptions({
+        layout: {
+          background: { type: lib.ColorType.Solid, color: next.background },
+          textColor: next.textColor,
+        },
+        grid: {
+          vertLines: { color: next.gridColor },
+          horzLines: { color: next.gridColor },
+        },
+        rightPriceScale: { borderColor: next.borderColor },
+        timeScale: { borderColor: next.borderColor },
+      })
+      candleSeries.applyOptions({
+        upColor: next.upColor,
+        downColor: next.downColor,
+        borderUpColor: next.upColor,
+        borderDownColor: next.downColor,
+        wickUpColor: next.upColor,
+        wickDownColor: next.downColor,
+      })
+      volumeSeries?.setData(volumeSeriesData(payload, next))
+    }
+    applyThemeCallbacks.push(applyTheme)
+
+    // The transcript column resizes with the window and the sidebar; the chart
+    // is canvas-based so it cannot reflow on its own.
+    let observer: ResizeObserver | null = null
+    if (typeof ResizeObserver === 'function') {
+      observer = new ResizeObserver(() => {
+        const width = canvasHost.clientWidth
+        if (width > 0) chart.applyOptions({ width })
+      })
+      observer.observe(canvasHost)
+    }
+
+    disposers.push(() => {
+      observer?.disconnect()
+      chart.remove()
+    })
+    setStatus(host, '')
+  }
+
+  async function mountOne(host: HTMLElement): Promise<void> {
+    const url = host.dataset.chartSrc || ''
+    if (!url) {
+      setStatus(host, 'Chart data is unavailable.')
+      return
+    }
+    try {
+      diag('chart.mount.start', { url })
+      const raw = await deps.fetchPayload(url)
+      const payload = normalizeChartPayload(raw)
+      if (!payload) {
+        setStatus(host, 'Chart data could not be read.')
+        diag('chart.mount.empty', { url })
+        return
+      }
+      await draw(host, payload)
+      diag('chart.mount.done', { url, candles: payload.candles.length })
+    } catch (error) {
+      setStatus(host, 'Chart failed to load.')
+      diag('chart.mount.error', { url, error: String(error) })
+    }
+  }
+
+  /** Mount every not-yet-mounted chart placeholder inside `root`. */
+  function mountCharts(root: HTMLElement | null | undefined): void {
+    if (!root) return
+    const hosts = root.querySelectorAll<HTMLElement>('[data-chart-src]')
+    hosts.forEach((host) => {
+      if (mounted.has(host)) return
+      mounted.add(host)
+      void mountOne(host)
+    })
+  }
+
+  /** Push a theme change into every live chart. */
+  function applyTheme(mode: ChartThemeMode): void {
+    applyThemeCallbacks.forEach((apply) => {
+      try {
+        apply(mode)
+      } catch {
+        // A chart removed mid-toggle must not break the remaining ones.
+      }
+    })
+  }
+
+  /** Tear down every live chart (route unmount / session reset). */
+  function destroyAll(): void {
+    disposers.forEach((dispose) => {
+      try {
+        dispose()
+      } catch {
+        // Already-removed charts are fine to skip.
+      }
+    })
+    disposers.length = 0
+    applyThemeCallbacks.length = 0
+    mounted.clear()
+  }
+
+  return { mountCharts, applyTheme, destroyAll }
+}
+
+export type ChartMounter = ReturnType<typeof createChartMounter>
diff --git a/frontend/src/views/chat/transcript/history.ts b/frontend/src/views/chat/transcript/history.ts
index cac8be86..ae65fec6 100644
--- a/frontend/src/views/chat/transcript/history.ts
+++ b/frontend/src/views/chat/transcript/history.ts
@@ -162,6 +162,12 @@ export interface HistoryRenderDeps {
   renderMessageAttachmentHtml: (attachment: Record<string, unknown>) => string
   /** chat.js:5691-5694/7595 — render persisted artifact cards as escaped HTML. */
   renderArtifacts: (artifacts: Artifact[]) => string
+  /**
+   * chart.ts `mountCharts` — draw chart placeholders in a replayed row.
+   * AgentOS-native (no legacy counterpart); optional so focused history tests
+   * need not supply it.
+   */
+  mountCharts?: (container: HTMLElement) => void
   /** chat.js:5611-5616 — remove foreign/unstamped dock residue before a rebuild. */
   prepareHistoryRouterFx: () => void
   /** chat.js:5712-5741 — rebuild a settled dock receipt from persisted usage. */
@@ -585,7 +591,10 @@ export function createHistoryRenderer(deps: HistoryRenderDeps) {
       const artifacts = historyMessageArtifacts(msg)
       if (artifacts.length > 0) {
         const body = div.querySelector<HTMLElement>('.msg-body')
-        if (body) body.insertAdjacentHTML('beforeend', deps.renderArtifacts(artifacts))
+        if (body) {
+          body.insertAdjacentHTML('beforeend', deps.renderArtifacts(artifacts))
+          deps.mountCharts?.(body)
+        }
       }
 
       // Tool reconstruction and the user-attachment body rewrite above remove
diff --git a/frontend/src/views/chat/transcript/stream.ts b/frontend/src/views/chat/transcript/stream.ts
index c050795d..4c633a27 100644
--- a/frontend/src/views/chat/transcript/stream.ts
+++ b/frontend/src/views/chat/transcript/stream.ts
@@ -194,6 +194,11 @@ export interface TranscriptHeaderStateRef {
  */
 export interface StreamControllerDeps {
   markdown?: MarkdownDep
+  /**
+   * chart.ts `mountCharts` — draw chart-artifact placeholders that just entered
+   * `container`. AgentOS-native (no legacy counterpart). Default: no-op.
+   */
+  mountCharts?: (container: HTMLElement) => void
   /** chat.js:419/387/391 — display-text sanitizers. Default: identity. */
   stripProtocolTextLeak?: (text: string) => string
   stripDirectiveTags?: (text: string) => string
@@ -1418,6 +1423,7 @@ export function createStreamController(
     esc,
     toast,
     diag,
+    mountCharts: deps.mountCharts,
   })
 
   /* ── compaction renderer (chat.js:2916-3397 + 8654-8710, compaction.ts) ── */
diff --git a/frontend/src/views/chat/useTranscript.ts b/frontend/src/views/chat/useTranscript.ts
index 3248b9e8..2f08558f 100644
--- a/frontend/src/views/chat/useTranscript.ts
+++ b/frontend/src/views/chat/useTranscript.ts
@@ -3,7 +3,9 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 import { useRpc } from '@/app/providers'
 import { useApprovals } from '@/services/approval-monitor'
+import { useTheme } from '@/stores/theme'
 import { chatMarkdown } from './markdown'
+import { createChartMounter, type ChartMounter } from './transcript/chart'
 import {
   createStreamController,
   type StreamController,
@@ -65,6 +67,22 @@ function getAuthToken(): string {
   }
 }
 
+/**
+ * Fetch a chart artifact body for the chart mounter (chart.ts).
+ *
+ * The URL already carries `sessionKey` + `token` query params (the artifact
+ * renderer builds it through `artifactPreviewUrl`); the Authorization header
+ * mirrors `downloadArtifact` so both auth paths are accepted.
+ */
+async function fetchChartPayload(url: string): Promise<unknown> {
+  const token = getAuthToken()
+  const headers: Record<string, string> = {}
+  if (token) headers['Authorization'] = `Bearer ${token}`
+  const response = await fetch(url, { method: 'GET', headers, credentials: 'same-origin' })
+  if (!response.ok) throw new Error(`chart artifact request failed: HTTP ${response.status}`)
+  return response.json()
+}
+
 /**
  * Imperative transcript controller + live wiring.
  *
@@ -421,10 +439,33 @@ export function useTranscript(opts: {
     [stampRowMeta],
   )
 
+  // Chart artifacts (chart.ts). The mounter owns every live chart on this
+  // transcript so a theme toggle can re-color them in place and a route unmount
+  // can dispose the canvases.
+  const [chartMounter] = useState<ChartMounter>(() =>
+    createChartMounter({
+      fetchPayload: fetchChartPayload,
+      getTheme: () => useTheme.getState().mode,
+    }),
+  )
+  const mountCharts = useCallback(
+    (container: HTMLElement) => chartMounter.mountCharts(container),
+    [chartMounter],
+  )
+
+  useEffect(() => {
+    const unsubscribe = useTheme.subscribe((state) => chartMounter.applyTheme(state.mode))
+    return () => {
+      unsubscribe()
+      chartMounter.destroyAll()
+    }
+  }, [chartMounter])
+
   // eslint-disable-next-line react-hooks/refs -- factory stores the refs and reads .current only later, inside methods invoked outside render (never at creation)
   const [controller] = useState<StreamController>(() =>
     createStreamController(containerRef, {
       markdown: chatMarkdown,
+      mountCharts,
       stripProtocolTextLeak,
       stripDirectiveTags,
       stripGeneratedArtifactMarkers,
@@ -743,6 +784,7 @@ export function useTranscript(opts: {
         }),
       renderMessageAttachmentHtml,
       renderArtifacts: (artifacts) => controller.renderArtifacts(artifacts),
+      mountCharts,
       prepareHistoryRouterFx: () => controller.prepareHistoryRouterFx(),
       reconcileHistoryRouterFx: (usage, options) =>
         controller.reconcileHistoryRouterFx(usage, options),
diff --git a/src/agentos/skills/bundled/gmgn-market/SKILL.md b/src/agentos/skills/bundled/gmgn-market/SKILL.md
index 55edae07..f019dab5 100644
--- a/src/agentos/skills/bundled/gmgn-market/SKILL.md
+++ b/src/agentos/skills/bundled/gmgn-market/SKILL.md
@@ -977,6 +977,50 @@ Total volume: ${sum of all volume fields} USD
 Trend: [brief description — e.g. "steady uptrend", "sharp drop then recovery", "sideways"]
 ```
 
+## Rendering the Candlestick Chart
+
+Whenever you run `market kline`, also publish a chart artifact so the user sees a
+real candlestick chart, not just the text summary. Pipe the raw response through
+the bundled converter and publish what it writes:
+
+```bash
+gmgn-cli market kline --chain sol --address <addr> --resolution 1h \
+  --from <unix_ts> --to <unix_ts> --raw \
+  | python3 {baseDir}/scripts/kline_chart.py \
+      --symbol <SYMBOL> --chain sol --resolution 1h \
+      --output <symbol>-1h.chart.json
+```
+
+Then call `publish_artifact` with that path and
+`mime=application/vnd.agentos.chart+json`. The surface draws the chart inline;
+do not describe the artifact as a download or put a URL in your reply.
+
+Keep the text Price Summary as well — the chart shows the shape, the summary
+carries the numbers.
+
+### Choosing a resolution
+
+Pick the window from how old the token is (`creation_timestamp` from
+`gmgn-cli token info`, Unix seconds) unless the user asked for a specific range.
+The aim is roughly 30–100 candles: fewer looks empty, more turns to noise.
+
+| Token age | Range | `--resolution` |
+|-----------|-------|----------------|
+| < 6 hours | since creation | `1m` |
+| < 3 days | 24 hours | `15m` |
+| < 30 days | 7 days | `1h` |
+| ≥ 30 days | 30 days | `4h` |
+
+When the user names a range ("last hour", "this week"), honor it and pick the
+resolution that keeps the candle count in that same 30–100 band.
+
+### Failure handling
+
+The converter exits non-zero and explains itself on stderr when the response has
+no usable candles. If that happens, skip the chart, still present the text
+summary, and do not retry the CLI call — an empty candle list means the token
+has no trades in that window, not that the request failed.
+
 ### `market trending` — Top Tokens Table
 
 Present the top results (default: top 10, or as requested) as a table:
diff --git a/src/agentos/skills/bundled/gmgn-market/scripts/kline_chart.py b/src/agentos/skills/bundled/gmgn-market/scripts/kline_chart.py
new file mode 100644
index 00000000..a8cda7b5
--- /dev/null
+++ b/src/agentos/skills/bundled/gmgn-market/scripts/kline_chart.py
@@ -0,0 +1,170 @@
+#!/usr/bin/env python3
+"""Turn ``gmgn-cli market kline --raw`` output into a chat chart artifact.
+
+The Web chat renders an artifact whose mime is
+``application/vnd.agentos.chart+json`` as an inline candlestick chart instead of
+a download chip. This script does the shape conversion so the model never has to
+copy a candle array through its context:
+
+    gmgn-cli market kline --chain sol --address <addr> --resolution 1h --raw \\
+      | python3 {baseDir}/scripts/kline_chart.py --symbol BONK --chain sol \\
+          --resolution 1h --output bonk-1h.chart.json
+
+It then prints the written path, which is what ``publish_artifact`` takes.
+
+Two conversions matter and are easy to get wrong by hand:
+
+* GMGN returns ``time`` in **milliseconds**; the chart wants **seconds**.
+* GMGN's ``volume`` is USD traded while ``amount`` is token units. The chart's
+  volume histogram shows USD, so ``volume`` is the field to carry over.
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import sys
+from pathlib import Path
+from typing import Any
+
+CHART_MIME = "application/vnd.agentos.chart+json"
+CANDLE_KEYS = ("open", "high", "low", "close")
+
+
+def _looks_like_candles(value: Any) -> bool:
+    if not isinstance(value, list) or not value:
+        return False
+    first = value[0]
+    return isinstance(first, dict) and all(key in first for key in CANDLE_KEYS)
+
+
+def _find_candles(payload: Any, depth: int = 0) -> list[dict[str, Any]]:
+    """Locate the candle array inside a GMGN response.
+
+    The CLI has shipped the rows bare, under ``list``, and under
+    ``data.list`` across versions, so search rather than assume a path.
+    """
+    if depth > 6:
+        return []
+    if _looks_like_candles(payload):
+        return list(payload)
+    if isinstance(payload, dict):
+        for key in ("list", "data", "klines", "candles", "result"):
+            if key in payload:
+                found = _find_candles(payload[key], depth + 1)
+                if found:
+                    return found
+        for value in payload.values():
+            found = _find_candles(value, depth + 1)
+            if found:
+                return found
+    return []
+
+
+def _number(value: Any) -> float | None:
+    if isinstance(value, bool):
+        return None
+    if isinstance(value, (int, float)):
+        return float(value)
+    if isinstance(value, str) and value.strip():
+        try:
+            return float(value)
+        except ValueError:
+            return None
+    return None
+
+
+def _seconds(value: Any) -> int | None:
+    raw = _number(value)
+    if raw is None or raw <= 0:
+        return None
+    # Anything past 1e11 seconds is far outside any real candle range, so it is
+    # a millisecond timestamp — which is what GMGN actually returns.
+    return int(raw // 1000) if raw > 1e11 else int(raw)
+
+
+def convert_candles(rows: list[dict[str, Any]]) -> list[dict[str, Any]]:
+    """Return chart-ready candles, oldest first, one row per timestamp."""
+    by_time: dict[int, dict[str, Any]] = {}
+    for row in rows:
+        if not isinstance(row, dict):
+            continue
+        time_s = _seconds(row.get("time"))
+        values = {key: _number(row.get(key)) for key in CANDLE_KEYS}
+        if time_s is None or any(v is None for v in values.values()):
+            continue
+        candle: dict[str, Any] = {"time": time_s}
+        candle.update({key: values[key] for key in CANDLE_KEYS})
+        volume = _number(row.get("volume"))
+        if volume is not None and volume >= 0:
+            candle["volume"] = volume
+        by_time[time_s] = candle
+    return [by_time[key] for key in sorted(by_time)]
+
+
+def build_payload(
+    candles: list[dict[str, Any]],
+    *,
+    symbol: str,
+    chain: str,
+    resolution: str,
+) -> dict[str, Any]:
+    title = f"{symbol} · {resolution}" if symbol and resolution else (symbol or "Price")
+    subtitle_parts = [part for part in (chain.upper() if chain else "", resolution) if part]
+    return {
+        "type": "candlestick",
+        "title": title,
+        "subtitle": " · ".join(subtitle_parts),
+        "candles": candles,
+    }
+
+
+def parse_args(argv: list[str] | None = None) -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument(
+        "--input",
+        default="-",
+        help="Kline JSON file, or '-' to read stdin (default).",
+    )
+    parser.add_argument("--output", required=True, help="Where to write the chart artifact.")
+    parser.add_argument("--symbol", default="", help="Token symbol, for the chart title.")
+    parser.add_argument("--chain", default="", help="Chain id, for the chart subtitle.")
+    parser.add_argument("--resolution", default="", help="Candle resolution, e.g. 1h.")
+    return parser.parse_args(argv)
+
+
+def main(argv: list[str] | None = None) -> int:
+    args = parse_args(argv)
+
+    raw = sys.stdin.read() if args.input == "-" else Path(args.input).read_text(encoding="utf-8")
+    if not raw.strip():
+        print("kline_chart: no input received", file=sys.stderr)
+        return 1
+    try:
+        response = json.loads(raw)
+    except json.JSONDecodeError as exc:
+        print(f"kline_chart: input is not valid JSON: {exc}", file=sys.stderr)
+        return 1
+
+    candles = convert_candles(_find_candles(response))
+    if not candles:
+        print("kline_chart: no usable candles in the response", file=sys.stderr)
+        return 1
+
+    payload = build_payload(
+        candles,
+        symbol=args.symbol.strip(),
+        chain=args.chain.strip(),
+        resolution=args.resolution.strip(),
+    )
+    output = Path(args.output).expanduser()
+    output.parent.mkdir(parents=True, exist_ok=True)
+    output.write_text(json.dumps(payload, ensure_ascii=False), encoding="utf-8")
+
+    print(f"wrote {len(candles)} candles to {output}")
+    print(f"publish_artifact path={output} mime={CHART_MIME}")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/src/agentos/skills/bundled/gmgn-token/SKILL.md b/src/agentos/skills/bundled/gmgn-token/SKILL.md
index 9dfb7543..501888e8 100644
--- a/src/agentos/skills/bundled/gmgn-token/SKILL.md
+++ b/src/agentos/skills/bundled/gmgn-token/SKILL.md
@@ -682,6 +682,25 @@ Steps: `token info` → `token security` → `token pool` → market heat check
 
 **For active risk monitoring** on a held position (user asks "any risk warnings", "are whales dumping", "is liquidity still healthy"), follow: [`docs/workflow-risk-warning.md`](../../docs/workflow-risk-warning.md). Uses `token security` + `token pool` + `token holders` to flag whale exits, liquidity drain, and developer dumps.
 
+## Price Chart During Research
+
+`token info` gives a price snapshot but no candles, so a research answer reads
+better with a chart alongside the summary card. After `token info` succeeds, use
+the **`gmgn-market`** skill to fetch `market kline` and publish the candlestick
+chart artifact — that skill owns the kline route and ships the converter script
+(`scripts/kline_chart.py`); follow its "Rendering the Candlestick Chart" section
+rather than reimplementing the conversion here.
+
+Pick the resolution from the `creation_timestamp` you already have from
+`token info`, using the token-age table in that same section.
+
+Add the chart when the user asks about price, trend, or due diligence. Skip it
+when they asked a narrow non-price question (just holders, just the honeypot
+check) — an unrequested extra API call spends rate-limit budget for nothing.
+
+**If `is_honeypot = "yes"`, do not fetch a chart.** Stop at the honeypot warning
+as the security section requires.
+
 ---
 
 ## Output Format

From 0e1206371d512d85f87462565a185cf3d78a9928 Mon Sep 17 00:00:00 2001
From: Key KQ <key.kq20052022@gmail.com>
Date: Thu, 6 Aug 2026 14:13:28 +0700
Subject: [PATCH 2/7] fix(chat): make inline charts buildable, self-contained,
 and disposable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four gaps in the inline-chart feature, found by re-reading it against
what it was supposed to do rather than against its own description.

The Control UI build failed on every CI runner, so nothing downstream of
it ever ran — not ruff, not mypy, not pytest, not vitest. `fancy-canvas`,
a dependency of lightweight-charts, publishes a `files` allowlist
covering only its compiled JavaScript, so its MIT text never leaves the
source repository and the license bundler found nothing to embed. The
upstream license is now vendored under frontend/vendor-licenses/ and used
only when an installed package ships none; a package with neither a
license nor a vendored copy still fails the build, so a new dependency
without attribution stays a deliberate decision.

A chart was supposed to appear when the gmgn-token skill researched a
token. Instead gmgn-token deferred to gmgn-market — which owns the
converter script and the resolution table — and the loader has no
skill-to-skill dependency mechanism (`requires` covers bins and env
only). With only gmgn-token enabled the chart silently never appeared.
Each skill now ships the converter and the guidance it needs to publish a
chart alone, pinned byte-for-byte against each other.

Charts leaked on every session switch and every "load earlier": the
mounter disposed them only on route unmount, but the transcript rebuilds
its rows in place, stranding a canvas, a ResizeObserver and a theme
callback per rebuild. Live charts are now keyed by their host so a
detached row can be swept, and the two rebuild sites sweep.

None of the drawing or wiring had tests — the pure payload helpers did,
but a rename on either side of the placeholder contract would have shown
the user nothing at all and failed no test. The mounter, the placeholder
markup, the stream and history handoffs, and the renderer-to-mounter
contract are covered against a stubbed lightweight-charts, and the
converter gained pytest coverage now that two skills carry it.

Charts also share one library import instead of racing one per chart.
---
 THIRD_PARTY_NOTICES.md                        |  10 +
 .../views/chat/transcript/artifacts.test.ts   | 103 ++++-
 .../src/views/chat/transcript/chart.test.ts   | 357 +++++++++++++++++-
 frontend/src/views/chat/transcript/chart.ts   | 104 +++--
 .../src/views/chat/transcript/history.test.ts |  44 +++
 frontend/src/views/chat/useTranscript.ts      |   8 +-
 .../vendor-licenses/fancy-canvas-LICENSE.txt  |   7 +
 scripts/build_control_ui.py                   |  40 +-
 .../skills/bundled/gmgn-token/SKILL.md        |  51 ++-
 .../bundled/gmgn-token/scripts/kline_chart.py | 170 +++++++++
 tests/test_scripts/test_build_control_ui.py   |  76 ++++
 tests/test_skill_gmgn_charts.py               | 138 +++++++
 12 files changed, 1062 insertions(+), 46 deletions(-)
 create mode 100644 frontend/vendor-licenses/fancy-canvas-LICENSE.txt
 create mode 100644 src/agentos/skills/bundled/gmgn-token/scripts/kline_chart.py
 create mode 100644 tests/test_skill_gmgn_charts.py

diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md
index 2c4e58a4..c9f317d8 100644
--- a/THIRD_PARTY_NOTICES.md
+++ b/THIRD_PARTY_NOTICES.md
@@ -496,6 +496,16 @@ The type-only `@types/*` and `csstype` packages installed to compile the
 TypeScript source do not enter the browser bundle and are intentionally
 omitted from this production list.
 
+### Vendored dependency licenses
+
+`fancy-canvas@2.1.0` (a dependency of `lightweight-charts`) publishes a `files`
+allowlist covering only its compiled JavaScript and type declarations, so its
+MIT text is absent from the npm tarball. The upstream license from
+https://github.com/tradingview/fancy-canvas is kept verbatim at
+`frontend/vendor-licenses/fancy-canvas-LICENSE.txt`, and the Control UI builder
+appends it to the generated ledger marked as vendored. Packages that ship no
+license and have no vendored copy still fail the build.
+
 ### React Control UI fonts
 
 - Inter Variable — Copyright (c) 2016 The Inter Project Authors
diff --git a/frontend/src/views/chat/transcript/artifacts.test.ts b/frontend/src/views/chat/transcript/artifacts.test.ts
index 5d54b908..f37a9d24 100644
--- a/frontend/src/views/chat/transcript/artifacts.test.ts
+++ b/frontend/src/views/chat/transcript/artifacts.test.ts
@@ -5,19 +5,27 @@
 // DOM (appendArtifact / renderArtifacts / renderStreamArtifacts / downloadArtifact)
 // is verified by a live-browser sweep (parity matrix), NOT here — it needs the
 // live streaming controller + a real gateway serving the download.
+//
+// The one exception is the chart placeholder, which has no legacy counterpart:
+// it renders no visible card of its own, so a broken placeholder shows the user
+// nothing at all rather than a wrong-looking chip. Its hooks and its handoff to
+// the chart mounter are pinned below.
 
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import {
   artifactMime,
   artifactName,
   artifactExtension,
   artifactCategory,
   artifactCategoryLabel,
+  createArtifactRenderer,
   isImageArtifact,
   isAudioArtifact,
   artifactDownloadUrl,
   artifactPreviewUrl,
   artifactAuthenticatedDownloadUrl,
+  type Artifact,
+  type ArtifactRendererDeps,
 } from './artifacts'
 import { CHART_ARTIFACT_MIME } from './chart'
 
@@ -203,3 +211,96 @@ describe('artifactAuthenticatedDownloadUrl (parity chat.js:7583)', () => {
     ).toBe('/api/v1/artifacts/5?sessionKey=k')
   })
 })
+
+/* ── chart placeholder + mounter handoff (AgentOS-native) ───────────────── */
+
+const CHART_ARTIFACT: Artifact = {
+  id: 'art-1',
+  name: 'bonk.chart.json',
+  mime: CHART_ARTIFACT_MIME,
+  download_url: '/api/v1/artifacts/art-1',
+}
+
+function chartRendererDeps(overrides: Partial<ArtifactRendererDeps> = {}) {
+  const bubble = document.createElement('div')
+  const body = document.createElement('div')
+  body.className = 'msg-body'
+  bubble.appendChild(body)
+  const streamArtifacts: Artifact[] = []
+  const deps: ArtifactRendererDeps = {
+    ensureStreamBubble: () => bubble,
+    markVisibleStreamEvent: () => {},
+    scrollToBottom: () => {},
+    getAutoScroll: () => false,
+    getStreamBubble: () => bubble,
+    pushStreamArtifact: (artifact) => streamArtifacts.push(artifact),
+    getStreamArtifacts: () => streamArtifacts,
+    getSessionKey: () => 'agent:main:webchat:test',
+    getAuthToken: () => 'tok',
+    esc: (value) => value,
+    ...overrides,
+  }
+  return { deps, body, streamArtifacts }
+}
+
+describe('createArtifactRenderer chart artifacts', () => {
+  it('renders a mount placeholder carrying the hooks the mounter looks for', () => {
+    const { deps } = chartRendererDeps()
+
+    const container = document.createElement('div')
+    container.innerHTML = createArtifactRenderer(deps).renderArtifacts([CHART_ARTIFACT])
+
+    const host = container.querySelector<HTMLElement>('[data-chart-src]')
+    expect(host).not.toBeNull()
+    // The payload URL must be authenticated the same way a download is.
+    expect(host?.dataset.chartSrc).toBe(
+      '/api/v1/artifacts/art-1?sessionKey=agent%3Amain%3Awebchat%3Atest&token=tok',
+    )
+    expect(host?.querySelector('.msg-artifact-chart__canvas')).not.toBeNull()
+    expect(host?.querySelector('.msg-artifact-chart__status')).not.toBeNull()
+    expect(host?.querySelector('.msg-artifact-chart__name')).toHaveTextContent('bonk.chart.json')
+    // A chart groups with charts, never into the file-chip row.
+    expect(container.querySelector('.msg-artifact-charts')).not.toBeNull()
+    expect(container.querySelector('.msg-artifact-files')).toBeNull()
+  })
+
+  it('still offers the raw payload as a download', () => {
+    const { deps } = chartRendererDeps()
+
+    const container = document.createElement('div')
+    container.innerHTML = createArtifactRenderer(deps).renderArtifacts([CHART_ARTIFACT])
+
+    expect(container.querySelector('.msg-artifact-chart__download')).toHaveAttribute(
+      'download',
+      'bonk.chart.json',
+    )
+  })
+
+  it('hands a streamed chart artifact to the mounter as soon as it lands', () => {
+    const mountCharts = vi.fn()
+    const { deps, body } = chartRendererDeps({ mountCharts })
+
+    createArtifactRenderer(deps).appendArtifact(CHART_ARTIFACT)
+
+    // Without this call the placeholder sits at "Loading chart…" forever.
+    expect(mountCharts).toHaveBeenCalledWith(body)
+    expect(body.querySelector('[data-chart-src]')).not.toBeNull()
+  })
+
+  it('hands flushed stream artifacts to the mounter on the settle pass', () => {
+    const mountCharts = vi.fn()
+    const { deps, body, streamArtifacts } = chartRendererDeps({ mountCharts })
+    streamArtifacts.push(CHART_ARTIFACT)
+
+    createArtifactRenderer(deps).renderStreamArtifacts()
+
+    expect(mountCharts).toHaveBeenCalledWith(body)
+  })
+
+  it('renders inert cards when no mounter is composed in', () => {
+    const { deps, body } = chartRendererDeps()
+
+    expect(() => createArtifactRenderer(deps).appendArtifact(CHART_ARTIFACT)).not.toThrow()
+    expect(body.querySelector('[data-chart-src]')).not.toBeNull()
+  })
+})
diff --git a/frontend/src/views/chat/transcript/chart.test.ts b/frontend/src/views/chat/transcript/chart.test.ts
index 09848bae..d611fe76 100644
--- a/frontend/src/views/chat/transcript/chart.test.ts
+++ b/frontend/src/views/chat/transcript/chart.test.ts
@@ -1,15 +1,19 @@
-// Pure-helper tests for the chart-artifact renderer (chart.ts).
+// Tests for the chart-artifact renderer (chart.ts).
 //
-// The imperative mounter draws through lightweight-charts against a real canvas
-// and is covered by the live-browser sweep, not here. What IS covered here is
-// everything that decides WHAT gets drawn: mime matching, payload
-// normalization, the ordering/dedup contract lightweight-charts asserts on, and
-// the price precision that keeps sub-cent meme tokens readable.
+// Two surfaces, mirroring the module: the pure helpers that decide WHAT gets
+// drawn (mime matching, payload normalization, the ordering/dedup contract
+// lightweight-charts asserts on, the price precision that keeps sub-cent meme
+// tokens readable), and the imperative mounter, exercised against a stubbed
+// lightweight-charts so a silent "no chart appeared" regression fails here
+// rather than only in a live browser. Real canvas painting stays a browser
+// concern; everything up to the library call does not.
 
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { createArtifactRenderer } from './artifacts'
 import {
   CHART_ARTIFACT_MIME,
   chartTheme,
+  createChartMounter,
   hasVolume,
   isChartArtifact,
   normalizeChartPayload,
@@ -17,6 +21,102 @@ import {
   volumeSeriesData,
 } from './chart'
 
+/* ── lightweight-charts stub ────────────────────────────────────────────── */
+
+interface FakeSeries {
+  setData: ReturnType<typeof vi.fn>
+  applyOptions: ReturnType<typeof vi.fn>
+}
+
+interface FakeChart {
+  addSeries: ReturnType<typeof vi.fn>
+  priceScale: ReturnType<typeof vi.fn>
+  timeScale: ReturnType<typeof vi.fn>
+  applyOptions: ReturnType<typeof vi.fn>
+  remove: ReturnType<typeof vi.fn>
+  series: FakeSeries[]
+}
+
+const lib = vi.hoisted(() => ({ charts: [] as unknown[], createChart: vi.fn() }))
+
+vi.mock('lightweight-charts', () => ({
+  ColorType: { Solid: 'solid' },
+  CandlestickSeries: { kind: 'candlestick' },
+  HistogramSeries: { kind: 'histogram' },
+  createChart: lib.createChart,
+}))
+
+function makeFakeChart(): FakeChart {
+  const series: FakeSeries[] = []
+  return {
+    series,
+    addSeries: vi.fn(() => {
+      const next: FakeSeries = { setData: vi.fn(), applyOptions: vi.fn() }
+      series.push(next)
+      return next
+    }),
+    priceScale: vi.fn(() => ({ applyOptions: vi.fn() })),
+    timeScale: vi.fn(() => ({ fitContent: vi.fn() })),
+    applyOptions: vi.fn(),
+    remove: vi.fn(),
+  }
+}
+
+function createdCharts(): FakeChart[] {
+  return lib.charts as FakeChart[]
+}
+
+/**
+ * The placeholder the artifact renderer emits. The hooks it must carry —
+ * `[data-chart-src]` plus the canvas/status/name children — are pinned against
+ * the real renderer in artifacts.test.ts; this builds the same shape so the
+ * mounter can be exercised on its own.
+ */
+function placeholder(url: string): HTMLElement {
+  const host = document.createElement('div')
+  host.className = 'msg-artifact-chart'
+  if (url) host.dataset.chartSrc = url
+  else host.setAttribute('data-chart-src', '')
+  host.innerHTML =
+    '<div class="msg-artifact-chart__header">' +
+    '<span class="msg-artifact-chart__name">bonk.chart.json</span>' +
+    '</div>' +
+    '<div class="msg-artifact-chart__canvas"></div>' +
+    '<p class="msg-artifact-chart__status">Loading chart…</p>'
+  return host
+}
+
+function mountRoot(...hosts: HTMLElement[]): HTMLElement {
+  const root = document.createElement('div')
+  hosts.forEach((host) => root.appendChild(host))
+  document.body.appendChild(root)
+  return root
+}
+
+function statusOf(host: HTMLElement): string {
+  return host.querySelector('.msg-artifact-chart__status')?.textContent ?? ''
+}
+
+const CANDLES = [
+  { time: 100, open: 1, high: 2, low: 1, close: 2, volume: 10 },
+  { time: 200, open: 2, high: 3, low: 2, close: 1, volume: 20 },
+]
+
+function payloadBody(): unknown {
+  return { type: 'candlestick', title: 'BONK · 1h', subtitle: 'SOL · 1h', candles: CANDLES }
+}
+
+beforeEach(() => {
+  document.body.innerHTML = ''
+  lib.charts.length = 0
+  lib.createChart.mockReset()
+  lib.createChart.mockImplementation(() => {
+    const chart = makeFakeChart()
+    lib.charts.push(chart)
+    return chart
+  })
+})
+
 /* ── isChartArtifact ────────────────────────────────────────────────────── */
 
 describe('isChartArtifact', () => {
@@ -206,3 +306,246 @@ describe('priceDecimals', () => {
     expect(priceDecimals(withCloses(1e-30))).toBe(12)
   })
 })
+
+/* ── createChartMounter ─────────────────────────────────────────────────── */
+
+describe('createChartMounter', () => {
+  it('fetches the payload and draws a chart into the placeholder', async () => {
+    const fetchPayload = vi.fn(async () => payloadBody())
+    const host = placeholder('/api/v1/artifacts/art-1?sessionKey=s&token=t')
+    const root = mountRoot(host)
+    const mounter = createChartMounter({ fetchPayload, getTheme: () => 'dark' })
+
+    mounter.mountCharts(root)
+
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+    expect(fetchPayload).toHaveBeenCalledWith('/api/v1/artifacts/art-1?sessionKey=s&token=t')
+    const [chart] = createdCharts()
+    // Candles plus the volume histogram, each fed its own data.
+    expect(chart?.addSeries).toHaveBeenCalledTimes(2)
+    expect(chart?.series[0]?.setData).toHaveBeenCalledWith(
+      CANDLES.map((candle) => expect.objectContaining({ time: candle.time, close: candle.close })),
+    )
+    // The status line is what the user stares at while nothing is painted yet.
+    await vi.waitFor(() => expect(statusOf(host)).toBe(''))
+  })
+
+  it('titles the card from the payload rather than the artifact filename', async () => {
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const root = mountRoot(host)
+    const mounter = createChartMounter({
+      fetchPayload: async () => payloadBody(),
+      getTheme: () => 'light',
+    })
+
+    mounter.mountCharts(root)
+
+    await vi.waitFor(() =>
+      expect(host.querySelector('.msg-artifact-chart__name')?.textContent).toBe('BONK · 1h'),
+    )
+    // Token metadata is attacker-controlled, so it must never become markup.
+    expect(host.querySelector('.msg-artifact-chart__name')?.innerHTML).toBe('BONK · 1h')
+  })
+
+  it('mounts a placeholder once even when called after every streamed artifact', async () => {
+    const fetchPayload = vi.fn(async () => payloadBody())
+    const root = mountRoot(placeholder('/api/v1/artifacts/art-1'))
+    const mounter = createChartMounter({ fetchPayload, getTheme: () => 'dark' })
+
+    mounter.mountCharts(root)
+    mounter.mountCharts(root)
+    mounter.mountCharts(root)
+
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+    expect(fetchPayload).toHaveBeenCalledTimes(1)
+  })
+
+  it('skips the volume histogram when no candle carries a volume', async () => {
+    const root = mountRoot(placeholder('/api/v1/artifacts/art-1'))
+    const mounter = createChartMounter({
+      fetchPayload: async () => ({ candles: [{ time: 100, open: 1, high: 2, low: 1, close: 2 }] }),
+      getTheme: () => 'dark',
+    })
+
+    mounter.mountCharts(root)
+
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+    expect(createdCharts()[0]?.addSeries).toHaveBeenCalledTimes(1)
+  })
+
+  it('says so when the payload cannot be read, instead of leaving "Loading" forever', async () => {
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const mounter = createChartMounter({
+      fetchPayload: async () => ({ candles: [] }),
+      getTheme: () => 'dark',
+    })
+
+    mounter.mountCharts(mountRoot(host))
+
+    await vi.waitFor(() => expect(statusOf(host)).toBe('Chart data could not be read.'))
+    expect(createdCharts()).toHaveLength(0)
+  })
+
+  it('says so when the payload request fails', async () => {
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const mounter = createChartMounter({
+      fetchPayload: async () => {
+        throw new Error('HTTP 404')
+      },
+      getTheme: () => 'dark',
+    })
+
+    mounter.mountCharts(mountRoot(host))
+
+    await vi.waitFor(() => expect(statusOf(host)).toBe('Chart failed to load.'))
+  })
+
+  it('does not fetch for a placeholder that carries no source', async () => {
+    const fetchPayload = vi.fn(async () => payloadBody())
+    const host = placeholder('')
+    const mounter = createChartMounter({ fetchPayload, getTheme: () => 'dark' })
+
+    mounter.mountCharts(mountRoot(host))
+
+    await vi.waitFor(() => expect(statusOf(host)).toBe('Chart data is unavailable.'))
+    expect(fetchPayload).not.toHaveBeenCalled()
+  })
+
+  it('disposes charts whose row was rebuilt away', async () => {
+    // A session switch and "load earlier" both replace every row wholesale.
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const root = mountRoot(host)
+    const mounter = createChartMounter({
+      fetchPayload: async () => payloadBody(),
+      getTheme: () => 'dark',
+    })
+    mounter.mountCharts(root)
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+
+    root.innerHTML = ''
+    mounter.pruneDetached()
+
+    expect(createdCharts()[0]?.remove).toHaveBeenCalledTimes(1)
+  })
+
+  it('re-mounts a rebuilt row rather than treating the old host as still drawn', async () => {
+    const root = mountRoot(placeholder('/api/v1/artifacts/art-1'))
+    const mounter = createChartMounter({
+      fetchPayload: async () => payloadBody(),
+      getTheme: () => 'dark',
+    })
+    mounter.mountCharts(root)
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+
+    root.innerHTML = ''
+    root.appendChild(placeholder('/api/v1/artifacts/art-1'))
+    mounter.mountCharts(root)
+
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(2))
+    expect(createdCharts()[0]?.remove).toHaveBeenCalledTimes(1)
+  })
+
+  it('re-colors live charts on a theme toggle and skips the pruned ones', async () => {
+    const first = placeholder('/api/v1/artifacts/art-1')
+    const second = placeholder('/api/v1/artifacts/art-2')
+    const root = mountRoot(first, second)
+    const mounter = createChartMounter({
+      fetchPayload: async () => payloadBody(),
+      getTheme: () => 'dark',
+    })
+    mounter.mountCharts(root)
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(2))
+
+    first.remove()
+    mounter.applyTheme('light')
+
+    // Re-themed in place, so a toggle does not reset the user's pan/zoom.
+    expect(createdCharts()[1]?.applyOptions).toHaveBeenCalled()
+    expect(createdCharts()[0]?.applyOptions).not.toHaveBeenCalled()
+    expect(createdCharts()[0]?.remove).toHaveBeenCalledTimes(1)
+  })
+
+  it('drops a chart whose row disappeared while the payload was in flight', async () => {
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const root = mountRoot(host)
+    let release = (): void => {}
+    const mounter = createChartMounter({
+      fetchPayload: async () => {
+        await new Promise<void>((resolve) => {
+          release = resolve
+        })
+        return payloadBody()
+      },
+      getTheme: () => 'dark',
+    })
+
+    mounter.mountCharts(root)
+    root.innerHTML = ''
+    release()
+
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+    await vi.waitFor(() => expect(createdCharts()[0]?.remove).toHaveBeenCalledTimes(1))
+  })
+
+  it('tears every chart down on route unmount', async () => {
+    const root = mountRoot(
+      placeholder('/api/v1/artifacts/art-1'),
+      placeholder('/api/v1/artifacts/art-2'),
+    )
+    const mounter = createChartMounter({
+      fetchPayload: async () => payloadBody(),
+      getTheme: () => 'dark',
+    })
+    mounter.mountCharts(root)
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(2))
+
+    mounter.destroyAll()
+
+    expect(createdCharts()[0]?.remove).toHaveBeenCalledTimes(1)
+    expect(createdCharts()[1]?.remove).toHaveBeenCalledTimes(1)
+  })
+})
+
+/* ── renderer → mounter contract ────────────────────────────────────────── */
+
+describe('the artifact renderer and the chart mounter agree on the placeholder', () => {
+  it('draws a chart into markup produced by the real artifact renderer', async () => {
+    // The two modules meet through class names and a data attribute only, so
+    // nothing but a test like this catches a rename on one side.
+    const bubble = document.createElement('div')
+    const body = document.createElement('div')
+    body.className = 'msg-body'
+    bubble.appendChild(body)
+    document.body.appendChild(bubble)
+
+    const renderer = createArtifactRenderer({
+      ensureStreamBubble: () => bubble,
+      markVisibleStreamEvent: () => {},
+      scrollToBottom: () => {},
+      getAutoScroll: () => false,
+      getStreamBubble: () => bubble,
+      pushStreamArtifact: () => {},
+      getStreamArtifacts: () => [],
+      getSessionKey: () => 'agent:main:webchat:test',
+      getAuthToken: () => 'tok',
+      esc: (value) => value,
+    })
+    body.innerHTML = renderer.renderArtifacts([
+      {
+        id: 'art-1',
+        name: 'bonk.chart.json',
+        mime: CHART_ARTIFACT_MIME,
+        download_url: '/api/v1/artifacts/art-1',
+      },
+    ])
+
+    const fetchPayload = vi.fn(async () => payloadBody())
+    createChartMounter({ fetchPayload, getTheme: () => 'dark' }).mountCharts(body)
+
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+    expect(fetchPayload).toHaveBeenCalledWith(
+      '/api/v1/artifacts/art-1?sessionKey=agent%3Amain%3Awebchat%3Atest&token=tok',
+    )
+    expect(body.querySelector('.msg-artifact-chart__status')?.textContent).toBe('')
+  })
+})
diff --git a/frontend/src/views/chat/transcript/chart.ts b/frontend/src/views/chat/transcript/chart.ts
index 80623099..cf65b793 100644
--- a/frontend/src/views/chat/transcript/chart.ts
+++ b/frontend/src/views/chat/transcript/chart.ts
@@ -211,6 +211,26 @@ export function priceDecimals(payload: ChartPayload): number {
 
 /* ── Injected mounter dependencies ──────────────────────────────────────── */
 
+/**
+ * Load lightweight-charts once, however many charts a transcript holds.
+ *
+ * The import stays dynamic so the library keeps its own chunk and never loads
+ * for a chat with no charts. Caching the promise means several charts arriving
+ * together share one resolution instead of each racing its own.
+ */
+let libraryPromise: Promise<typeof import('lightweight-charts')> | null = null
+
+function loadChartLibrary(): Promise<typeof import('lightweight-charts')> {
+  libraryPromise ??= import('lightweight-charts')
+  return libraryPromise
+}
+
+/** A drawn chart, held by its host element so the mounter can sweep it later. */
+interface LiveChart {
+  dispose: () => void
+  applyTheme: (mode: ChartThemeMode) => void
+}
+
 export interface ChartMounterDeps {
   /** Fetch a chart artifact body from its (authenticated) URL. */
   fetchPayload: (url: string) => Promise<unknown>
@@ -231,9 +251,37 @@ export interface ChartMounterDeps {
  */
 export function createChartMounter(deps: ChartMounterDeps) {
   const diag = deps.diag ?? ((): void => {})
-  const mounted = new Set<HTMLElement>()
-  const disposers: Array<() => void> = []
-  const applyThemeCallbacks: Array<(mode: ChartThemeMode) => void> = []
+  /** Hosts this mounter has picked up — payload in flight or chart drawn. */
+  const claimed = new Set<HTMLElement>()
+  /** Drawn charts, keyed by host so a detached row can be swept (`pruneDetached`). */
+  const live = new Map<HTMLElement, LiveChart>()
+
+  function disposeQuietly(entry: LiveChart): void {
+    try {
+      entry.dispose()
+    } catch {
+      // A chart the library already tore down is fine to skip.
+    }
+  }
+
+  /**
+   * Dispose every chart whose host has left the document.
+   *
+   * The transcript rebuilds its rows wholesale — on a session switch and on
+   * "load earlier" — which detaches all existing chart hosts. Each stranded
+   * chart otherwise keeps a canvas, a ResizeObserver and a theme callback alive
+   * for as long as the Chat route stays mounted.
+   */
+  function pruneDetached(): void {
+    for (const host of [...claimed]) {
+      if (host.isConnected) continue
+      claimed.delete(host)
+      const entry = live.get(host)
+      if (!entry) continue
+      live.delete(host)
+      disposeQuietly(entry)
+    }
+  }
 
   function setStatus(host: HTMLElement, message: string): void {
     const status = host.querySelector<HTMLElement>('.msg-artifact-chart__status')
@@ -258,7 +306,7 @@ export function createChartMounter(deps: ChartMounterDeps) {
       if (label) label.title = payload.subtitle
     }
 
-    const lib = await import('lightweight-charts')
+    const lib = await loadChartLibrary()
     const theme = chartTheme(deps.getTheme())
     const decimals = priceDecimals(payload)
 
@@ -339,7 +387,6 @@ export function createChartMounter(deps: ChartMounterDeps) {
       })
       volumeSeries?.setData(volumeSeriesData(payload, next))
     }
-    applyThemeCallbacks.push(applyTheme)
 
     // The transcript column resizes with the window and the sidebar; the chart
     // is canvas-based so it cannot reflow on its own.
@@ -352,10 +399,21 @@ export function createChartMounter(deps: ChartMounterDeps) {
       observer.observe(canvasHost)
     }
 
-    disposers.push(() => {
-      observer?.disconnect()
-      chart.remove()
-    })
+    const entry: LiveChart = {
+      applyTheme,
+      dispose: () => {
+        observer?.disconnect()
+        chart.remove()
+      },
+    }
+    // The row can be rebuilt while the payload and the library are in flight —
+    // a chart drawn into a detached host has nobody to show it.
+    if (!host.isConnected) {
+      claimed.delete(host)
+      disposeQuietly(entry)
+      return
+    }
+    live.set(host, entry)
     setStatus(host, '')
   }
 
@@ -385,40 +443,36 @@ export function createChartMounter(deps: ChartMounterDeps) {
   /** Mount every not-yet-mounted chart placeholder inside `root`. */
   function mountCharts(root: HTMLElement | null | undefined): void {
     if (!root) return
+    // Any row rebuild that adds a chart also detached the previous ones.
+    pruneDetached()
     const hosts = root.querySelectorAll<HTMLElement>('[data-chart-src]')
     hosts.forEach((host) => {
-      if (mounted.has(host)) return
-      mounted.add(host)
+      if (claimed.has(host)) return
+      claimed.add(host)
       void mountOne(host)
     })
   }
 
   /** Push a theme change into every live chart. */
   function applyTheme(mode: ChartThemeMode): void {
-    applyThemeCallbacks.forEach((apply) => {
+    pruneDetached()
+    live.forEach((entry) => {
       try {
-        apply(mode)
+        entry.applyTheme(mode)
       } catch {
         // A chart removed mid-toggle must not break the remaining ones.
       }
     })
   }
 
-  /** Tear down every live chart (route unmount / session reset). */
+  /** Tear down every live chart (route unmount). */
   function destroyAll(): void {
-    disposers.forEach((dispose) => {
-      try {
-        dispose()
-      } catch {
-        // Already-removed charts are fine to skip.
-      }
-    })
-    disposers.length = 0
-    applyThemeCallbacks.length = 0
-    mounted.clear()
+    live.forEach(disposeQuietly)
+    live.clear()
+    claimed.clear()
   }
 
-  return { mountCharts, applyTheme, destroyAll }
+  return { mountCharts, applyTheme, destroyAll, pruneDetached }
 }
 
 export type ChartMounter = ReturnType<typeof createChartMounter>
diff --git a/frontend/src/views/chat/transcript/history.test.ts b/frontend/src/views/chat/transcript/history.test.ts
index 4ebda086..b6fd0a04 100644
--- a/frontend/src/views/chat/transcript/history.test.ts
+++ b/frontend/src/views/chat/transcript/history.test.ts
@@ -639,3 +639,47 @@ describe('createHistoryRenderer persisted rich content', () => {
     expect(a2.title).not.toBe('')
   })
 })
+
+describe('createHistoryRenderer chart artifacts', () => {
+  it('hands a replayed row to the chart mounter so history redraws charts', () => {
+    // Charts ride the artifact seam, so a reload has to redraw them; without
+    // this handoff a refreshed conversation shows an empty chart card.
+    const thread = document.createElement('div')
+    document.body.appendChild(thread)
+    const mountCharts = vi.fn()
+    const messages = [
+      {
+        role: 'assistant',
+        text: 'here is the chart',
+        artifacts: [
+          {
+            id: 'art-1',
+            name: 'bonk.chart.json',
+            mime: 'application/vnd.agentos.chart+json',
+          },
+        ],
+      },
+    ] as unknown as ChatMessage[]
+    const renderer = createHistoryRenderer(historyDeps(thread, { mountCharts }))
+
+    renderer.renderHistoryMessages(messages, pagingState(messages))
+
+    const body = thread.querySelector('.msg-body') as HTMLElement
+    expect(mountCharts).toHaveBeenCalledWith(body)
+  })
+
+  it('replays rows without a mounter composed in', () => {
+    const thread = document.createElement('div')
+    document.body.appendChild(thread)
+    const messages = [
+      {
+        role: 'assistant',
+        text: 'here is the chart',
+        artifacts: [{ id: 'art-1', name: 'bonk.chart.json', mime: 'image/png' }],
+      },
+    ] as unknown as ChatMessage[]
+    const renderer = createHistoryRenderer(historyDeps(thread))
+
+    expect(() => renderer.renderHistoryMessages(messages, pagingState(messages))).not.toThrow()
+  })
+})
diff --git a/frontend/src/views/chat/useTranscript.ts b/frontend/src/views/chat/useTranscript.ts
index 2f08558f..a3056e30 100644
--- a/frontend/src/views/chat/useTranscript.ts
+++ b/frontend/src/views/chat/useTranscript.ts
@@ -1088,6 +1088,9 @@ export function useTranscript(opts: {
             }
           : {},
       )
+      // The rebuild above replaced every row, so any chart from the previous
+      // session (or the previous page of this one) is now detached.
+      chartMounter.pruneDetached()
       // chat.js:3119 — overlay the history compaction-summary separators once
       // the message rows exist.
       controller.renderCompactionSummarySeparators(messages)
@@ -1100,6 +1103,7 @@ export function useTranscript(opts: {
     historyQuery.fetchStatus,
     historyRenderer,
     controller,
+    chartMounter,
     opts.sessionKey,
     revealTranscriptIfSettled,
     subscriptionSettleRevision,
@@ -1162,6 +1166,8 @@ export function useTranscript(opts: {
           previousScrollHeight,
           previousScrollTop,
         })
+        // Same rebuild, same sweep: the pre-existing chart rows were replaced.
+        chartMounter.pruneDetached()
         // Re-overlay the compaction-summary separators against the new row set.
         controller.renderCompactionSummarySeparators(mergedMessages)
       } catch {
@@ -1175,7 +1181,7 @@ export function useTranscript(opts: {
     reloadHistoryRef.current = () => {
       void queryClient.invalidateQueries({ queryKey: ['chat', 'history', opts.sessionKey] })
     }
-  }, [opts.sessionKey, historyRenderer, rpc, queryClient, controller])
+  }, [opts.sessionKey, historyRenderer, rpc, queryClient, controller, chartMounter])
 
   /* ── Reset (`/reset`) clears the visible thread ─────────────────────────── */
 
diff --git a/frontend/vendor-licenses/fancy-canvas-LICENSE.txt b/frontend/vendor-licenses/fancy-canvas-LICENSE.txt
new file mode 100644
index 00000000..b12ed6dc
--- /dev/null
+++ b/frontend/vendor-licenses/fancy-canvas-LICENSE.txt
@@ -0,0 +1,7 @@
+Copyright (c) 2019 TradingView, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/scripts/build_control_ui.py b/scripts/build_control_ui.py
index 9605a2b6..316ec42a 100644
--- a/scripts/build_control_ui.py
+++ b/scripts/build_control_ui.py
@@ -33,6 +33,17 @@
     "Inter-LICENSE.txt",
     "JetBrainsMono-LICENSE.txt",
 )
+# A few npm packages publish a tarball that carries no license file at all —
+# `fancy-canvas` sets a `files` allowlist of .js/.mjs/.d.ts and nothing else, so
+# its MIT text never leaves the source repository. The bundle still owes every
+# dependency its license verbatim, so the upstream text is vendored here and
+# used *only* when the installed package ships none. Keyed by package name; a
+# package missing from this map keeps failing the build, so a new dependency
+# without a license is still a deliberate decision rather than a silent gap.
+VENDORED_LICENSE_DIRNAME = "vendor-licenses"
+VENDORED_PACKAGE_LICENSES = {
+    "fancy-canvas": "fancy-canvas-LICENSE.txt",
+}
 REQUIRED_DIST_FILES = ("theme-bootstrap.js",)
 TYPE_ONLY_PACKAGES = frozenset({"csstype"})
 RUNTIME_TEXT_SUFFIXES = frozenset({".css", ".html", ".js", ".json", ".map", ".mjs"})
@@ -164,7 +175,11 @@ def _package_directory(frontend_dir: Path, package: ProductionPackage) -> Path:
     return package_dir
 
 
-def _license_files(package_dir: Path) -> tuple[Path, ...]:
+def _license_files(
+    frontend_dir: Path,
+    package: ProductionPackage,
+    package_dir: Path,
+) -> tuple[Path, ...]:
     prefixes = ("copying", "licence", "license")
     candidates = tuple(
         sorted(
@@ -176,9 +191,18 @@ def _license_files(package_dir: Path) -> tuple[Path, ...]:
             key=lambda path: path.name.casefold(),
         )
     )
-    if not candidates:
+    if candidates:
+        return candidates
+
+    vendored_name = VENDORED_PACKAGE_LICENSES.get(package.name)
+    if vendored_name is None:
         raise ControlUIError(f"No upstream LICENSE file found in {package_dir}")
-    return candidates
+    vendored_path = frontend_dir / VENDORED_LICENSE_DIRNAME / vendored_name
+    if not vendored_path.is_file():
+        raise ControlUIError(
+            f"Vendored license for {package.identifier} is missing: {vendored_path}"
+        )
+    return (vendored_path,)
 
 
 def render_third_party_licenses(frontend_dir: Path) -> bytes:
@@ -191,8 +215,14 @@ def render_third_party_licenses(frontend_dir: Path) -> bytes:
         output.extend(b"\n" + b"=" * 80 + b"\n")
         output.extend(f"Package: {package.identifier}\n".encode())
         output.extend(f"Declared license: {package.license_expression}\n".encode())
-        for license_path in _license_files(package_dir):
-            output.extend(f"License file: {license_path.name}\n".encode())
+        for license_path in _license_files(frontend_dir, package, package_dir):
+            label = license_path.name
+            if license_path.parent.name == VENDORED_LICENSE_DIRNAME:
+                # Say plainly where the text came from, so a reader of the
+                # bundle can tell it was taken from the upstream source
+                # repository rather than the published tarball.
+                label = f"{label} (vendored from the upstream repository)"
+            output.extend(f"License file: {label}\n".encode())
             output.extend(b"-" * 80 + b"\n")
             license_bytes = license_path.read_bytes()
             if not license_bytes:
diff --git a/src/agentos/skills/bundled/gmgn-token/SKILL.md b/src/agentos/skills/bundled/gmgn-token/SKILL.md
index 501888e8..311b9301 100644
--- a/src/agentos/skills/bundled/gmgn-token/SKILL.md
+++ b/src/agentos/skills/bundled/gmgn-token/SKILL.md
@@ -685,14 +685,44 @@ Steps: `token info` → `token security` → `token pool` → market heat check
 ## Price Chart During Research
 
 `token info` gives a price snapshot but no candles, so a research answer reads
-better with a chart alongside the summary card. After `token info` succeeds, use
-the **`gmgn-market`** skill to fetch `market kline` and publish the candlestick
-chart artifact — that skill owns the kline route and ships the converter script
-(`scripts/kline_chart.py`); follow its "Rendering the Candlestick Chart" section
-rather than reimplementing the conversion here.
+better with a real candlestick chart alongside the summary card. Fetch the
+candles with `market kline` and pipe them through the bundled converter, then
+publish what it writes:
 
-Pick the resolution from the `creation_timestamp` you already have from
-`token info`, using the token-age table in that same section.
+```bash
+gmgn-cli market kline --chain sol --address <addr> --resolution 1h \
+  --from <unix_ts> --to <unix_ts> --raw \
+  | python3 {baseDir}/scripts/kline_chart.py \
+      --symbol <SYMBOL> --chain sol --resolution 1h \
+      --output <symbol>-1h.chart.json
+```
+
+Then call `publish_artifact` with that path and
+`mime=application/vnd.agentos.chart+json`. Passing the mime is what makes the
+Web chat draw the chart inline — without it the payload arrives as a plain JSON
+download chip. Do not describe the artifact as a download or put a URL in your
+reply.
+
+Keep the text summary as well — the chart shows the shape, the summary carries
+the numbers.
+
+### Choosing a resolution
+
+Pick the window from the `creation_timestamp` you already have from
+`token info` (Unix seconds), unless the user asked for a specific range. The aim
+is roughly 30–100 candles: fewer looks empty, more turns to noise.
+
+| Token age | Range | `--resolution` |
+|-----------|-------|----------------|
+| < 6 hours | since creation | `1m` |
+| < 3 days | 24 hours | `15m` |
+| < 30 days | 7 days | `1h` |
+| ≥ 30 days | 30 days | `4h` |
+
+When the user names a range ("last hour", "this week"), honor it and pick the
+resolution that keeps the candle count in that same 30–100 band.
+
+### When to draw one
 
 Add the chart when the user asks about price, trend, or due diligence. Skip it
 when they asked a narrow non-price question (just holders, just the honeypot
@@ -701,6 +731,13 @@ check) — an unrequested extra API call spends rate-limit budget for nothing.
 **If `is_honeypot = "yes"`, do not fetch a chart.** Stop at the honeypot warning
 as the security section requires.
 
+### Failure handling
+
+The converter exits non-zero and explains itself on stderr when the response has
+no usable candles. If that happens, skip the chart, still present the text
+summary, and do not retry the CLI call — an empty candle list means the token
+has no trades in that window, not that the request failed.
+
 ---
 
 ## Output Format
diff --git a/src/agentos/skills/bundled/gmgn-token/scripts/kline_chart.py b/src/agentos/skills/bundled/gmgn-token/scripts/kline_chart.py
new file mode 100644
index 00000000..a8cda7b5
--- /dev/null
+++ b/src/agentos/skills/bundled/gmgn-token/scripts/kline_chart.py
@@ -0,0 +1,170 @@
+#!/usr/bin/env python3
+"""Turn ``gmgn-cli market kline --raw`` output into a chat chart artifact.
+
+The Web chat renders an artifact whose mime is
+``application/vnd.agentos.chart+json`` as an inline candlestick chart instead of
+a download chip. This script does the shape conversion so the model never has to
+copy a candle array through its context:
+
+    gmgn-cli market kline --chain sol --address <addr> --resolution 1h --raw \\
+      | python3 {baseDir}/scripts/kline_chart.py --symbol BONK --chain sol \\
+          --resolution 1h --output bonk-1h.chart.json
+
+It then prints the written path, which is what ``publish_artifact`` takes.
+
+Two conversions matter and are easy to get wrong by hand:
+
+* GMGN returns ``time`` in **milliseconds**; the chart wants **seconds**.
+* GMGN's ``volume`` is USD traded while ``amount`` is token units. The chart's
+  volume histogram shows USD, so ``volume`` is the field to carry over.
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import sys
+from pathlib import Path
+from typing import Any
+
+CHART_MIME = "application/vnd.agentos.chart+json"
+CANDLE_KEYS = ("open", "high", "low", "close")
+
+
+def _looks_like_candles(value: Any) -> bool:
+    if not isinstance(value, list) or not value:
+        return False
+    first = value[0]
+    return isinstance(first, dict) and all(key in first for key in CANDLE_KEYS)
+
+
+def _find_candles(payload: Any, depth: int = 0) -> list[dict[str, Any]]:
+    """Locate the candle array inside a GMGN response.
+
+    The CLI has shipped the rows bare, under ``list``, and under
+    ``data.list`` across versions, so search rather than assume a path.
+    """
+    if depth > 6:
+        return []
+    if _looks_like_candles(payload):
+        return list(payload)
+    if isinstance(payload, dict):
+        for key in ("list", "data", "klines", "candles", "result"):
+            if key in payload:
+                found = _find_candles(payload[key], depth + 1)
+                if found:
+                    return found
+        for value in payload.values():
+            found = _find_candles(value, depth + 1)
+            if found:
+                return found
+    return []
+
+
+def _number(value: Any) -> float | None:
+    if isinstance(value, bool):
+        return None
+    if isinstance(value, (int, float)):
+        return float(value)
+    if isinstance(value, str) and value.strip():
+        try:
+            return float(value)
+        except ValueError:
+            return None
+    return None
+
+
+def _seconds(value: Any) -> int | None:
+    raw = _number(value)
+    if raw is None or raw <= 0:
+        return None
+    # Anything past 1e11 seconds is far outside any real candle range, so it is
+    # a millisecond timestamp — which is what GMGN actually returns.
+    return int(raw // 1000) if raw > 1e11 else int(raw)
+
+
+def convert_candles(rows: list[dict[str, Any]]) -> list[dict[str, Any]]:
+    """Return chart-ready candles, oldest first, one row per timestamp."""
+    by_time: dict[int, dict[str, Any]] = {}
+    for row in rows:
+        if not isinstance(row, dict):
+            continue
+        time_s = _seconds(row.get("time"))
+        values = {key: _number(row.get(key)) for key in CANDLE_KEYS}
+        if time_s is None or any(v is None for v in values.values()):
+            continue
+        candle: dict[str, Any] = {"time": time_s}
+        candle.update({key: values[key] for key in CANDLE_KEYS})
+        volume = _number(row.get("volume"))
+        if volume is not None and volume >= 0:
+            candle["volume"] = volume
+        by_time[time_s] = candle
+    return [by_time[key] for key in sorted(by_time)]
+
+
+def build_payload(
+    candles: list[dict[str, Any]],
+    *,
+    symbol: str,
+    chain: str,
+    resolution: str,
+) -> dict[str, Any]:
+    title = f"{symbol} · {resolution}" if symbol and resolution else (symbol or "Price")
+    subtitle_parts = [part for part in (chain.upper() if chain else "", resolution) if part]
+    return {
+        "type": "candlestick",
+        "title": title,
+        "subtitle": " · ".join(subtitle_parts),
+        "candles": candles,
+    }
+
+
+def parse_args(argv: list[str] | None = None) -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument(
+        "--input",
+        default="-",
+        help="Kline JSON file, or '-' to read stdin (default).",
+    )
+    parser.add_argument("--output", required=True, help="Where to write the chart artifact.")
+    parser.add_argument("--symbol", default="", help="Token symbol, for the chart title.")
+    parser.add_argument("--chain", default="", help="Chain id, for the chart subtitle.")
+    parser.add_argument("--resolution", default="", help="Candle resolution, e.g. 1h.")
+    return parser.parse_args(argv)
+
+
+def main(argv: list[str] | None = None) -> int:
+    args = parse_args(argv)
+
+    raw = sys.stdin.read() if args.input == "-" else Path(args.input).read_text(encoding="utf-8")
+    if not raw.strip():
+        print("kline_chart: no input received", file=sys.stderr)
+        return 1
+    try:
+        response = json.loads(raw)
+    except json.JSONDecodeError as exc:
+        print(f"kline_chart: input is not valid JSON: {exc}", file=sys.stderr)
+        return 1
+
+    candles = convert_candles(_find_candles(response))
+    if not candles:
+        print("kline_chart: no usable candles in the response", file=sys.stderr)
+        return 1
+
+    payload = build_payload(
+        candles,
+        symbol=args.symbol.strip(),
+        chain=args.chain.strip(),
+        resolution=args.resolution.strip(),
+    )
+    output = Path(args.output).expanduser()
+    output.parent.mkdir(parents=True, exist_ok=True)
+    output.write_text(json.dumps(payload, ensure_ascii=False), encoding="utf-8")
+
+    print(f"wrote {len(candles)} candles to {output}")
+    print(f"publish_artifact path={output} mime={CHART_MIME}")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/tests/test_scripts/test_build_control_ui.py b/tests/test_scripts/test_build_control_ui.py
index 7c0a175e..02d64e38 100644
--- a/tests/test_scripts/test_build_control_ui.py
+++ b/tests/test_scripts/test_build_control_ui.py
@@ -81,6 +81,22 @@ def write_frontend_fixture(root: Path) -> tuple[Path, bytes]:
     return frontend, license_bytes
 
 
+def add_licenseless_package(frontend: Path, name: str, version: str) -> Path:
+    """Install a runtime package that ships no license file, like fancy-canvas."""
+    package_dir = frontend / "node_modules" / name
+    package_dir.mkdir(parents=True)
+    (package_dir / "index.js").write_text("export default null\n", encoding="utf-8")
+    (package_dir / "package.json").write_text(
+        json.dumps({"name": name, "version": version}),
+        encoding="utf-8",
+    )
+    lock_path = frontend / "package-lock.json"
+    lock = json.loads(lock_path.read_text(encoding="utf-8"))
+    lock["packages"][f"node_modules/{name}"] = {"version": version, "license": "MIT"}
+    lock_path.write_text(json.dumps(lock), encoding="utf-8")
+    return package_dir
+
+
 def write_dist_fixture(root: Path) -> Path:
     dist = root / DIST_REL
     assets = dist / "assets"
@@ -124,6 +140,66 @@ def test_license_bundle_is_deterministic_verbatim_and_runtime_only(tmp_path: Pat
     assert b"JetBrains Mono font license fixture." in first
 
 
+def test_a_package_shipping_no_license_falls_back_to_the_vendored_text(
+    tmp_path: Path,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # fancy-canvas publishes a `files` allowlist that omits its LICENSE, so the
+    # verbatim text has to come from the repository copy instead.
+    module = load_script()
+    frontend, _ = write_frontend_fixture(tmp_path)
+    add_licenseless_package(frontend, "chartlib", "2.1.0")
+    monkeypatch.setitem(module.VENDORED_PACKAGE_LICENSES, "chartlib", "chartlib-LICENSE.txt")
+    vendored_dir = frontend / module.VENDORED_LICENSE_DIRNAME
+    vendored_dir.mkdir()
+    (vendored_dir / "chartlib-LICENSE.txt").write_bytes(b"Vendored MIT text, byte-for-byte.\n")
+
+    bundle = module.render_third_party_licenses(frontend)
+
+    assert b"Package: chartlib@2.1.0\n" in bundle
+    assert b"Vendored MIT text, byte-for-byte.\n" in bundle
+    # The bundle must not pass vendored text off as something the tarball carried.
+    assert b"chartlib-LICENSE.txt (vendored from the upstream repository)\n" in bundle
+
+
+def test_a_package_shipping_no_license_and_no_vendored_entry_still_fails(
+    tmp_path: Path,
+) -> None:
+    # The fallback is an allowlist, not a blanket escape hatch: a new dependency
+    # without a license must stay a deliberate decision.
+    module = load_script()
+    frontend, _ = write_frontend_fixture(tmp_path)
+    add_licenseless_package(frontend, "unreviewed-package", "1.0.0")
+
+    with pytest.raises(module.ControlUIError, match="No upstream LICENSE file found"):
+        module.render_third_party_licenses(frontend)
+
+
+def test_a_declared_vendored_license_that_is_missing_fails_the_build(
+    tmp_path: Path,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    module = load_script()
+    frontend, _ = write_frontend_fixture(tmp_path)
+    add_licenseless_package(frontend, "chartlib", "2.1.0")
+    monkeypatch.setitem(module.VENDORED_PACKAGE_LICENSES, "chartlib", "chartlib-LICENSE.txt")
+
+    with pytest.raises(module.ControlUIError, match="Vendored license for chartlib@2.1.0"):
+        module.render_third_party_licenses(frontend)
+
+
+def test_every_vendored_license_in_the_repo_exists_and_carries_a_copyright() -> None:
+    # Guards the real checked-in files, which the fixture tests cannot see.
+    module = load_script()
+    vendored_dir = REPO_ROOT / "frontend" / module.VENDORED_LICENSE_DIRNAME
+
+    assert module.VENDORED_PACKAGE_LICENSES
+    for package_name, filename in module.VENDORED_PACKAGE_LICENSES.items():
+        text = (vendored_dir / filename).read_text(encoding="utf-8")
+        assert "Copyright" in text, f"{package_name} vendored license has no copyright line"
+        assert "Permission is hereby granted" in text
+
+
 def test_verify_requires_license_bundle_and_runtime_relative_assets(tmp_path: Path) -> None:
     module = load_script()
     frontend, _ = write_frontend_fixture(tmp_path)
diff --git a/tests/test_skill_gmgn_charts.py b/tests/test_skill_gmgn_charts.py
new file mode 100644
index 00000000..03cee958
--- /dev/null
+++ b/tests/test_skill_gmgn_charts.py
@@ -0,0 +1,138 @@
+"""The inline-chart converter shipped with the GMGN skills.
+
+Both `gmgn-market` and `gmgn-token` publish chart artifacts on their own, so
+each carries its own copy of the converter — `{baseDir}` only ever resolves to
+the skill that is actually loaded. These tests pin the copies together and cover
+the two conversions that are easy to get wrong by hand: GMGN's millisecond
+timestamps and its USD-vs-token-units volume fields.
+"""
+
+from __future__ import annotations
+
+import importlib.util
+import sys
+from pathlib import Path
+from typing import Any
+
+import pytest
+
+BUNDLED = Path(__file__).resolve().parents[1] / "src" / "agentos" / "skills" / "bundled"
+MARKET_SCRIPT = BUNDLED / "gmgn-market" / "scripts" / "kline_chart.py"
+TOKEN_SCRIPT = BUNDLED / "gmgn-token" / "scripts" / "kline_chart.py"
+CHART_MIME = "application/vnd.agentos.chart+json"
+
+
+def load_converter() -> Any:
+    spec = importlib.util.spec_from_file_location("kline_chart", MARKET_SCRIPT)
+    assert spec is not None
+    assert spec.loader is not None
+    module = importlib.util.module_from_spec(spec)
+    sys.modules[spec.name] = module
+    spec.loader.exec_module(module)
+    return module
+
+
+def test_both_skills_ship_the_same_converter_byte_for_byte() -> None:
+    # Two copies exist so either skill works alone; they must not drift apart.
+    assert MARKET_SCRIPT.read_bytes() == TOKEN_SCRIPT.read_bytes()
+
+
+@pytest.mark.parametrize("skill", ["gmgn-market", "gmgn-token"])
+def test_each_skill_can_publish_a_chart_without_the_other(skill: str) -> None:
+    body = (BUNDLED / skill / "SKILL.md").read_text(encoding="utf-8")
+
+    # Its own script, its own mime — no hop through a sibling skill that may not
+    # be enabled.
+    assert "{baseDir}/scripts/kline_chart.py" in body
+    assert CHART_MIME in body
+    assert "--resolution" in body
+
+
+def test_gmgn_token_no_longer_defers_the_chart_to_gmgn_market() -> None:
+    body = (BUNDLED / "gmgn-token" / "SKILL.md").read_text(encoding="utf-8")
+    chart_section = body.split("## Price Chart During Research", maxsplit=1)[1]
+    chart_section = chart_section.split("\n## ", maxsplit=1)[0]
+
+    assert "gmgn-market" not in chart_section
+
+
+def test_candles_are_found_under_every_shape_the_cli_has_shipped() -> None:
+    module = load_converter()
+    row = {"time": 1, "open": "1", "high": "2", "low": "0.5", "close": "1.5"}
+
+    assert module._find_candles([row]) == [row]
+    assert module._find_candles({"list": [row]}) == [row]
+    assert module._find_candles({"data": {"list": [row]}}) == [row]
+    assert module._find_candles({"nope": 1}) == []
+
+
+def test_millisecond_timestamps_become_seconds() -> None:
+    module = load_converter()
+    rows = [{"time": 1735689600000, "open": "1", "high": "2", "low": "1", "close": "2"}]
+
+    assert module.convert_candles(rows)[0]["time"] == 1735689600
+
+
+def test_second_precision_timestamps_are_left_alone() -> None:
+    module = load_converter()
+    rows = [{"time": 1735689600, "open": "1", "high": "2", "low": "1", "close": "2"}]
+
+    assert module.convert_candles(rows)[0]["time"] == 1735689600
+
+
+def test_rows_are_sorted_oldest_first_and_deduplicated_by_timestamp() -> None:
+    module = load_converter()
+    rows = [
+        {"time": 200, "open": "2", "high": "2", "low": "2", "close": "2"},
+        {"time": 100, "open": "1", "high": "1", "low": "1", "close": "1"},
+        # A restatement of the 200 candle: the later row wins.
+        {"time": 200, "open": "3", "high": "3", "low": "3", "close": "3"},
+    ]
+
+    candles = module.convert_candles(rows)
+
+    assert [candle["time"] for candle in candles] == [100, 200]
+    assert candles[1]["close"] == 3.0
+
+
+def test_a_row_missing_any_ohlc_field_is_dropped_rather_than_zero_filled() -> None:
+    module = load_converter()
+    rows = [
+        {"time": 100, "open": "1", "high": "2", "low": "1"},
+        {"time": 200, "open": "1", "high": "2", "low": "1", "close": "2"},
+    ]
+
+    assert [candle["time"] for candle in module.convert_candles(rows)] == [200]
+
+
+def test_usd_volume_is_carried_and_a_negative_one_dropped() -> None:
+    module = load_converter()
+    base = {"open": "1", "high": "2", "low": "1", "close": "2"}
+    rows = [
+        # `volume` is USD; `amount` is token units and must not be used.
+        {"time": 100, **base, "volume": "1214", "amount": "5379110"},
+        {"time": 200, **base, "volume": "-5"},
+    ]
+
+    candles = module.convert_candles(rows)
+
+    assert candles[0]["volume"] == 1214.0
+    assert "volume" not in candles[1]
+
+
+def test_the_payload_carries_the_mime_the_web_chat_matches_on() -> None:
+    module = load_converter()
+
+    assert module.CHART_MIME == CHART_MIME
+
+
+def test_the_payload_titles_itself_from_the_symbol_and_resolution() -> None:
+    module = load_converter()
+    candles = [{"time": 100, "open": 1.0, "high": 2.0, "low": 1.0, "close": 2.0}]
+
+    payload = module.build_payload(candles, symbol="BONK", chain="sol", resolution="1h")
+
+    assert payload["type"] == "candlestick"
+    assert payload["title"] == "BONK · 1h"
+    assert payload["subtitle"] == "SOL · 1h"
+    assert payload["candles"] == candles

From dd25336d0b668e0ad248e3c5f0751b736a80aada Mon Sep 17 00:00:00 2001
From: Key KQ <key.kq20052022@gmail.com>
Date: Thu, 6 Aug 2026 14:36:42 +0700
Subject: [PATCH 3/7] docs(skills): keep the chart artifact inside the
 workspace
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

publish_artifact only accepts files under the active workspace, and a
model told to build a chart payload will reach for /tmp unless told
otherwise — which fails the publish after the candles were already
fetched. Both chart sections now say to keep --output a bare filename.
---
 src/agentos/skills/bundled/gmgn-market/SKILL.md | 5 +++++
 src/agentos/skills/bundled/gmgn-token/SKILL.md  | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/agentos/skills/bundled/gmgn-market/SKILL.md b/src/agentos/skills/bundled/gmgn-market/SKILL.md
index f019dab5..927b2825 100644
--- a/src/agentos/skills/bundled/gmgn-market/SKILL.md
+++ b/src/agentos/skills/bundled/gmgn-market/SKILL.md
@@ -991,6 +991,11 @@ gmgn-cli market kline --chain sol --address <addr> --resolution 1h \
       --output <symbol>-1h.chart.json
 ```
 
+Keep `--output` a bare filename as shown. Scripts run with the workspace as
+their working directory, and `publish_artifact` only accepts files inside that
+workspace — writing to `/tmp` or any other absolute path outside it makes the
+publish fail.
+
 Then call `publish_artifact` with that path and
 `mime=application/vnd.agentos.chart+json`. The surface draws the chart inline;
 do not describe the artifact as a download or put a URL in your reply.
diff --git a/src/agentos/skills/bundled/gmgn-token/SKILL.md b/src/agentos/skills/bundled/gmgn-token/SKILL.md
index 311b9301..1992d55c 100644
--- a/src/agentos/skills/bundled/gmgn-token/SKILL.md
+++ b/src/agentos/skills/bundled/gmgn-token/SKILL.md
@@ -697,6 +697,11 @@ gmgn-cli market kline --chain sol --address <addr> --resolution 1h \
       --output <symbol>-1h.chart.json
 ```
 
+Keep `--output` a bare filename as shown. Scripts run with the workspace as
+their working directory, and `publish_artifact` only accepts files inside that
+workspace — writing to `/tmp` or any other absolute path outside it makes the
+publish fail.
+
 Then call `publish_artifact` with that path and
 `mime=application/vnd.agentos.chart+json`. Passing the mime is what makes the
 Web chat draw the chart inline — without it the payload arrives as a plain JSON

From 2b251ad4de870d8e4879694c3e3772323b1bb670 Mon Sep 17 00:00:00 2001
From: Key KQ <key.kq20052022@gmail.com>
Date: Thu, 6 Aug 2026 14:50:49 +0700
Subject: [PATCH 4/7] fix(chat): stop a click on the chart from downloading the
 file
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The transcript binds one delegated click handler that downloads any
non-anchor element resolving to `[data-artifact-download]`, and the chart
placeholder stamped that attribute on its outer host. Every click that
landed anywhere inside the card — including a pan, a zoom, or a crosshair
move on the canvas itself — matched it, called preventDefault, and
fetched the JSON. The chart drew, but it could not be touched.

The audio card already had the answer: it is the other non-anchor card,
and it keeps the attribute off the host and only on its Download anchor,
which the handler steps aside for because it is an anchor. The chart card
now does the same, and the transcript export still resolves the URL
through the child-anchor fallback written for audio.

The test asserts the canvas resolves to no download target, which fails
if the attribute ever returns to the host.
---
 .../views/chat/transcript/artifacts.test.ts   | 30 +++++++++++++++++++
 .../src/views/chat/transcript/artifacts.ts    |  8 ++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/chat/transcript/artifacts.test.ts b/frontend/src/views/chat/transcript/artifacts.test.ts
index f37a9d24..13043482 100644
--- a/frontend/src/views/chat/transcript/artifacts.test.ts
+++ b/frontend/src/views/chat/transcript/artifacts.test.ts
@@ -264,6 +264,36 @@ describe('createArtifactRenderer chart artifacts', () => {
     expect(container.querySelector('.msg-artifact-files')).toBeNull()
   })
 
+  it('does not turn a click on the chart itself into a download', () => {
+    // useTranscript delegates clicks: any non-anchor element that resolves to
+    // [data-artifact-download] downloads the file. A chart is interactive, so
+    // the host must not carry it — otherwise every pan, zoom and crosshair
+    // click fetches the JSON instead of moving the chart.
+    const { deps } = chartRendererDeps()
+
+    const container = document.createElement('div')
+    container.innerHTML = createArtifactRenderer(deps).renderArtifacts([CHART_ARTIFACT])
+
+    const canvas = container.querySelector<HTMLElement>('.msg-artifact-chart__canvas')
+    expect(canvas?.closest('[data-artifact-download]')).toBeNull()
+    expect(container.querySelector('.msg-artifact-chart')).not.toHaveAttribute(
+      'data-artifact-download',
+    )
+  })
+
+  it('keeps the download on the anchor, which the click handler steps aside for', () => {
+    const { deps } = chartRendererDeps()
+
+    const container = document.createElement('div')
+    container.innerHTML = createArtifactRenderer(deps).renderArtifacts([CHART_ARTIFACT])
+
+    const link = container.querySelector<HTMLElement>('.msg-artifact-chart__download')
+    // Resolving to itself and being an anchor is exactly what makes the
+    // delegated handler leave it to the browser's native download.
+    expect(link?.closest('[data-artifact-download]')).toBe(link)
+    expect(link?.tagName).toBe('A')
+  })
+
   it('still offers the raw payload as a download', () => {
     const { deps } = chartRendererDeps()
 
diff --git a/frontend/src/views/chat/transcript/artifacts.ts b/frontend/src/views/chat/transcript/artifacts.ts
index 2c9e5290..8725af1b 100644
--- a/frontend/src/views/chat/transcript/artifacts.ts
+++ b/frontend/src/views/chat/transcript/artifacts.ts
@@ -303,8 +303,14 @@ export function createArtifactRenderer(deps: ArtifactRendererDeps) {
         // A mount placeholder, not a finished card: the chart mounter fetches
         // `data-chart-src` and draws into `__canvas`. Geometry is reserved in
         // CSS so the transcript does not jump when the chart lands.
+        //
+        // `data-artifact-download` stays OFF the host and lives only on the
+        // Download anchor below — same as the audio card. The transcript's
+        // delegated click handler downloads any non-anchor element carrying
+        // that attribute, so stamping it here would turn every pan, zoom and
+        // crosshair click on the canvas into a file download.
         const payloadUrl = artifactPreviewUrl(artifact || {}, { sessionKey, token })
-        html += `<div class="msg-artifact-chart" data-chart-src="${escAttr(payloadUrl)}" data-artifact-category="${escAttr(category)}" data-artifact-download="${escAttr(downloadUrl)}" data-artifact-id="${escAttr(artifact?.id || '')}" data-artifact-name="${escAttr(name)}">
+        html += `<div class="msg-artifact-chart" data-chart-src="${escAttr(payloadUrl)}" data-artifact-category="${escAttr(category)}" data-artifact-id="${escAttr(artifact?.id || '')}" data-artifact-name="${escAttr(name)}">
           <div class="msg-artifact-chart__header">
             <span class="msg-artifact-chart__name">${esc(name)}</span>
             <a class="msg-artifact-chart__download" href="${escAttr(downloadHref)}" download="${escAttr(name)}" data-artifact-download="${escAttr(downloadUrl)}">Download</a>

From 8e81201c8193478906102ba887fad079cdc0245d Mon Sep 17 00:00:00 2001
From: Key KQ <key.kq20052022@gmail.com>
Date: Thu, 6 Aug 2026 15:16:31 +0700
Subject: [PATCH 5/7] feat(chat): read out OHLC and the move under the
 crosshair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

lightweight-charts ships no tooltip, so the chart could show a shape and
nothing else: hovering a candle told you neither what it opened at nor
how far it moved, which is most of what a candle is for.

A readout strip above the canvas now carries the hovered candle's time,
OHLC and volume, plus close against open as a signed percentage — the
move the body itself draws, not the move since the previous close. It
rests on the newest candle until the cursor arrives and returns there
when the cursor leaves, so the strip is never blank.

The strip takes its own grid row rather than floating over the canvas:
an overlay would cover the candles it describes and could be clipped by
the card. Its height is reserved up front so the first hover cannot shift
the transcript, and it is pointer-events: none so it cannot swallow the
crosshair it reports on.

Prices use the payload's own precision, so a token trading at 0.0000123
reads at full resolution instead of flattening to 0.00, and the
percentage takes its colour from the same palette as the candle body in
both themes.
---
 .../src/views/chat/chat-unified-css.test.ts   |  18 +-
 frontend/src/views/chat/chat-unified.css      |  63 +++++-
 .../views/chat/transcript/artifacts.test.ts   |   2 +
 .../src/views/chat/transcript/artifacts.ts    |   1 +
 .../src/views/chat/transcript/chart.test.ts   | 181 +++++++++++++++++-
 frontend/src/views/chat/transcript/chart.ts   | 137 ++++++++++++-
 6 files changed, 396 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/chat/chat-unified-css.test.ts b/frontend/src/views/chat/chat-unified-css.test.ts
index b2d7668b..a0ff24c9 100644
--- a/frontend/src/views/chat/chat-unified-css.test.ts
+++ b/frontend/src/views/chat/chat-unified-css.test.ts
@@ -53,11 +53,27 @@ describe('unified Chat CSS contract', () => {
     // Canvas and status share one grid cell — hiding the status must not
     // collapse a row.
     expect(css).toMatch(
-      /\.chat-surface \.msg-artifact-chart__canvas,[\s\S]*?\.chat-surface \.msg-artifact-chart__status \{[\s\S]*?grid-row: 2;[\s\S]*?grid-column: 1;/,
+      /\.chat-surface \.msg-artifact-chart__canvas,[\s\S]*?\.chat-surface \.msg-artifact-chart__status \{[\s\S]*?grid-row: 3;[\s\S]*?grid-column: 1;/,
     )
     expect(css).toMatch(/\.chat-surface \.msg-artifact-charts \{[\s\S]*?max-width: 100%;/)
   })
 
+  it('reserves the crosshair readout its own row so the first hover cannot shift the chart', () => {
+    // The strip is empty until a chart draws, so its height has to exist
+    // before the first crosshair move fills it.
+    expect(css).toMatch(
+      /\.chat-surface \.msg-artifact-chart__readout \{[\s\S]*?grid-row: 2;[\s\S]*?min-height: 1\.125rem;/,
+    )
+    // Three rows: header, readout, then the canvas cell.
+    expect(css).toMatch(
+      /\.chat-surface \.msg-artifact-chart \{[\s\S]*?grid-template-rows: auto auto 1fr;/,
+    )
+    // The strip must not swallow the crosshair it is reporting on.
+    expect(css).toMatch(
+      /\.chat-surface \.msg-artifact-chart__readout \{[\s\S]*?pointer-events: none;/,
+    )
+  })
+
   it('reserves portalled header geometry before reactive controls mount', () => {
     expect(css).toMatch(
       /\.shell-chat-header__context \{[\s\S]*?min-height: 2\.5rem;[\s\S]*?overflow: visible;/,
diff --git a/frontend/src/views/chat/chat-unified.css b/frontend/src/views/chat/chat-unified.css
index 6f2507db..6f0d238f 100644
--- a/frontend/src/views/chat/chat-unified.css
+++ b/frontend/src/views/chat/chat-unified.css
@@ -298,7 +298,7 @@
    preview above follows. */
 .chat-surface .msg-artifact-chart {
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto auto 1fr;
   gap: 0.5rem;
   width: 100%;
   padding: 0.75rem;
@@ -341,7 +341,7 @@
    successful draw without collapsing a row and shifting the transcript. */
 .chat-surface .msg-artifact-chart__canvas,
 .chat-surface .msg-artifact-chart__status {
-  grid-row: 2;
+  grid-row: 3;
   grid-column: 1;
 }
 
@@ -363,6 +363,65 @@
   display: none;
 }
 
+/* Crosshair readout. lightweight-charts has no tooltip, so this strip carries
+   the hovered candle's OHLC and its move. It takes its own row above the
+   canvas rather than floating over it, so it can neither be clipped by the
+   card nor cover a candle, and it reserves its height up front so the first
+   hover does not shift the chart. */
+.chat-surface .msg-artifact-chart__readout {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.0625rem 0.625rem;
+  grid-row: 2;
+  grid-column: 1;
+  min-height: 1.125rem;
+  padding: 0 0.125rem;
+  color: var(--muted-foreground);
+  font: 500 0.6875rem/1.125rem var(--font-mono);
+  pointer-events: none;
+}
+
+.chat-surface .msg-artifact-chart__readout-cell[hidden] {
+  display: none;
+}
+
+.chat-surface .msg-artifact-chart__readout-label {
+  margin-right: 0.1875rem;
+  opacity: 0.65;
+}
+
+.chat-surface .msg-artifact-chart__readout-value {
+  color: var(--foreground);
+}
+
+.chat-surface
+  .msg-artifact-chart__readout-cell[data-direction='up']
+  .msg-artifact-chart__readout-value {
+  color: #26a69a;
+}
+
+.chat-surface
+  .msg-artifact-chart__readout-cell[data-direction='down']
+  .msg-artifact-chart__readout-value {
+  color: #ef5350;
+}
+
+/* Mirror chartTheme()'s light palette so the move reads the same colour as the
+   candle body it describes. */
+:root[data-theme='light']
+  .chat-surface
+  .msg-artifact-chart__readout-cell[data-direction='up']
+  .msg-artifact-chart__readout-value {
+  color: #0f9d81;
+}
+
+:root[data-theme='light']
+  .chat-surface
+  .msg-artifact-chart__readout-cell[data-direction='down']
+  .msg-artifact-chart__readout-value {
+  color: #e03131;
+}
+
 .chat-surface .msg-artifact-card__meta {
   color: var(--muted-foreground);
   font: 500 0.6875rem/1.4 var(--font-mono);
diff --git a/frontend/src/views/chat/transcript/artifacts.test.ts b/frontend/src/views/chat/transcript/artifacts.test.ts
index 13043482..034482e3 100644
--- a/frontend/src/views/chat/transcript/artifacts.test.ts
+++ b/frontend/src/views/chat/transcript/artifacts.test.ts
@@ -258,6 +258,8 @@ describe('createArtifactRenderer chart artifacts', () => {
     )
     expect(host?.querySelector('.msg-artifact-chart__canvas')).not.toBeNull()
     expect(host?.querySelector('.msg-artifact-chart__status')).not.toBeNull()
+    // The mounter fills this on draw; it must exist for the crosshair readout.
+    expect(host?.querySelector('.msg-artifact-chart__readout')).not.toBeNull()
     expect(host?.querySelector('.msg-artifact-chart__name')).toHaveTextContent('bonk.chart.json')
     // A chart groups with charts, never into the file-chip row.
     expect(container.querySelector('.msg-artifact-charts')).not.toBeNull()
diff --git a/frontend/src/views/chat/transcript/artifacts.ts b/frontend/src/views/chat/transcript/artifacts.ts
index 8725af1b..ab8eaada 100644
--- a/frontend/src/views/chat/transcript/artifacts.ts
+++ b/frontend/src/views/chat/transcript/artifacts.ts
@@ -315,6 +315,7 @@ export function createArtifactRenderer(deps: ArtifactRendererDeps) {
             <span class="msg-artifact-chart__name">${esc(name)}</span>
             <a class="msg-artifact-chart__download" href="${escAttr(downloadHref)}" download="${escAttr(name)}" data-artifact-download="${escAttr(downloadUrl)}">Download</a>
           </div>
+          <div class="msg-artifact-chart__readout"></div>
           <div class="msg-artifact-chart__canvas"></div>
           <p class="msg-artifact-chart__status">Loading chart…</p>
         </div>`
diff --git a/frontend/src/views/chat/transcript/chart.test.ts b/frontend/src/views/chat/transcript/chart.test.ts
index d611fe76..26919f61 100644
--- a/frontend/src/views/chat/transcript/chart.test.ts
+++ b/frontend/src/views/chat/transcript/chart.test.ts
@@ -12,8 +12,11 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createArtifactRenderer } from './artifacts'
 import {
   CHART_ARTIFACT_MIME,
+  candleReadout,
   chartTheme,
+  compactNumber,
   createChartMounter,
+  formatCandleTime,
   hasVolume,
   isChartArtifact,
   normalizeChartPayload,
@@ -28,13 +31,18 @@ interface FakeSeries {
   applyOptions: ReturnType<typeof vi.fn>
 }
 
+type CrosshairHandler = (param: { time?: unknown }) => void
+
 interface FakeChart {
   addSeries: ReturnType<typeof vi.fn>
   priceScale: ReturnType<typeof vi.fn>
   timeScale: ReturnType<typeof vi.fn>
   applyOptions: ReturnType<typeof vi.fn>
   remove: ReturnType<typeof vi.fn>
+  subscribeCrosshairMove: ReturnType<typeof vi.fn>
+  unsubscribeCrosshairMove: ReturnType<typeof vi.fn>
   series: FakeSeries[]
+  crosshair: CrosshairHandler[]
 }
 
 const lib = vi.hoisted(() => ({ charts: [] as unknown[], createChart: vi.fn() }))
@@ -48,8 +56,10 @@ vi.mock('lightweight-charts', () => ({
 
 function makeFakeChart(): FakeChart {
   const series: FakeSeries[] = []
+  const crosshair: CrosshairHandler[] = []
   return {
     series,
+    crosshair,
     addSeries: vi.fn(() => {
       const next: FakeSeries = { setData: vi.fn(), applyOptions: vi.fn() }
       series.push(next)
@@ -59,6 +69,13 @@ function makeFakeChart(): FakeChart {
     timeScale: vi.fn(() => ({ fitContent: vi.fn() })),
     applyOptions: vi.fn(),
     remove: vi.fn(),
+    subscribeCrosshairMove: vi.fn((handler: CrosshairHandler) => {
+      crosshair.push(handler)
+    }),
+    unsubscribeCrosshairMove: vi.fn((handler: CrosshairHandler) => {
+      const at = crosshair.indexOf(handler)
+      if (at >= 0) crosshair.splice(at, 1)
+    }),
   }
 }
 
@@ -81,11 +98,24 @@ function placeholder(url: string): HTMLElement {
     '<div class="msg-artifact-chart__header">' +
     '<span class="msg-artifact-chart__name">bonk.chart.json</span>' +
     '</div>' +
+    '<div class="msg-artifact-chart__readout"></div>' +
     '<div class="msg-artifact-chart__canvas"></div>' +
     '<p class="msg-artifact-chart__status">Loading chart…</p>'
   return host
 }
 
+function readoutOf(host: HTMLElement): string {
+  const cells = host.querySelectorAll<HTMLElement>('.msg-artifact-chart__readout-cell')
+  return Array.from(cells)
+    .filter((cell) => !cell.hidden)
+    .map((cell) => {
+      const label = cell.querySelector('.msg-artifact-chart__readout-label')?.textContent ?? ''
+      const value = cell.querySelector('.msg-artifact-chart__readout-value')?.textContent ?? ''
+      return label ? `${label} ${value}` : value
+    })
+    .join(' ')
+}
+
 function mountRoot(...hosts: HTMLElement[]): HTMLElement {
   const root = document.createElement('div')
   hosts.forEach((host) => root.appendChild(host))
@@ -98,8 +128,8 @@ function statusOf(host: HTMLElement): string {
 }
 
 const CANDLES = [
-  { time: 100, open: 1, high: 2, low: 1, close: 2, volume: 10 },
-  { time: 200, open: 2, high: 3, low: 2, close: 1, volume: 20 },
+  { time: 1785801600, open: 1, high: 2, low: 1, close: 2, volume: 10 },
+  { time: 1785805200, open: 2, high: 3, low: 2, close: 1, volume: 20 },
 ]
 
 function payloadBody(): unknown {
@@ -549,3 +579,150 @@ describe('the artifact renderer and the chart mounter agree on the placeholder',
     expect(body.querySelector('.msg-artifact-chart__status')?.textContent).toBe('')
   })
 })
+
+/* ── crosshair readout ──────────────────────────────────────────────────── */
+
+describe('compactNumber', () => {
+  it('shortens thousands, millions and billions so a volume cannot widen the card', () => {
+    expect(compactNumber(842)).toBe('842')
+    expect(compactNumber(10_140)).toBe('10.1K')
+    expect(compactNumber(2_400_000)).toBe('2.4M')
+    expect(compactNumber(3_120_000_000)).toBe('3.1B')
+  })
+  it('rounds sub-unit volumes rather than printing a decimal', () => {
+    expect(compactNumber(0.4)).toBe('0')
+  })
+})
+
+describe('formatCandleTime', () => {
+  it('formats in UTC, matching the axis underneath', () => {
+    // lightweight-charts plots UTC, so a local-time readout would disagree
+    // with the very axis it sits above.
+    expect(formatCandleTime(1785801600)).toBe('2026-08-04 00:00 UTC')
+  })
+})
+
+describe('candleReadout', () => {
+  const base = { time: 1785801600, open: 100, high: 120, low: 90, close: 110 }
+
+  it('reports the move within the candle, close against open', () => {
+    const readout = candleReadout(base, 2)
+    expect(readout.change).toBe('+10.00%')
+    expect(readout.direction).toBe('up')
+    expect([readout.open, readout.high, readout.low, readout.close]).toEqual([
+      '100.00',
+      '120.00',
+      '90.00',
+      '110.00',
+    ])
+  })
+
+  it('signs a fall and colours it down', () => {
+    const readout = candleReadout({ ...base, close: 80 }, 2)
+    expect(readout.change).toBe('-20.00%')
+    expect(readout.direction).toBe('down')
+  })
+
+  it('treats an unchanged close as up, matching the candle body', () => {
+    const readout = candleReadout({ ...base, close: 100 }, 2)
+    expect(readout.change).toBe('+0.00%')
+    expect(readout.direction).toBe('up')
+  })
+
+  it('does not divide by a zero open', () => {
+    expect(candleReadout({ ...base, open: 0, close: 5 }, 2).change).toBe('+0.00%')
+  })
+
+  it('honours the payload price precision, so meme tokens stay readable', () => {
+    const readout = candleReadout({ ...base, open: 1.23e-5, close: 1.24e-5 }, 9)
+    expect(readout.open).toBe('0.000012300')
+    expect(readout.close).toBe('0.000012400')
+  })
+
+  it('leaves volume empty when the candle carries none', () => {
+    expect(candleReadout(base, 2).volume).toBe('')
+    expect(candleReadout({ ...base, volume: 10_140 }, 2).volume).toBe('10.1K')
+  })
+})
+
+describe('createChartMounter readout', () => {
+  it('rests on the newest candle before the cursor arrives', async () => {
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const mounter = createChartMounter({
+      fetchPayload: async () => payloadBody(),
+      getTheme: () => 'dark',
+    })
+
+    mounter.mountCharts(mountRoot(host))
+
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+    // CANDLES[1] is the newest: close 1 against open 2 — a 50% fall.
+    await vi.waitFor(() => expect(readoutOf(host)).toContain('-50.00%'))
+    expect(readoutOf(host)).toContain('Vol 20')
+  })
+
+  it('follows the candle under the crosshair', async () => {
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const mounter = createChartMounter({
+      fetchPayload: async () => payloadBody(),
+      getTheme: () => 'dark',
+    })
+    mounter.mountCharts(mountRoot(host))
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+
+    createdCharts()[0]?.crosshair.forEach((handler) => handler({ time: CANDLES[0]!.time }))
+
+    // The older candle rose from 1 to 2.
+    expect(readoutOf(host)).toContain('+100.00%')
+    expect(readoutOf(host)).toContain('2026-08-04 00:00 UTC')
+  })
+
+  it('falls back to the newest candle when the cursor leaves the chart', async () => {
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const mounter = createChartMounter({
+      fetchPayload: async () => payloadBody(),
+      getTheme: () => 'dark',
+    })
+    mounter.mountCharts(mountRoot(host))
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+    createdCharts()[0]?.crosshair.forEach((handler) => handler({ time: CANDLES[0]!.time }))
+
+    // Off the plot, lightweight-charts reports no time.
+    createdCharts()[0]?.crosshair.forEach((handler) => handler({}))
+
+    expect(readoutOf(host)).toContain('-50.00%')
+  })
+
+  it('hides the volume cell for a payload without volumes', async () => {
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const mounter = createChartMounter({
+      fetchPayload: async () => ({ candles: [{ time: 100, open: 1, high: 2, low: 1, close: 2 }] }),
+      getTheme: () => 'dark',
+    })
+
+    mounter.mountCharts(mountRoot(host))
+
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+    expect(readoutOf(host)).not.toContain('Vol')
+  })
+
+  it('unsubscribes from the crosshair before tearing the chart down', async () => {
+    const host = placeholder('/api/v1/artifacts/art-1')
+    const mounter = createChartMounter({
+      fetchPayload: async () => payloadBody(),
+      getTheme: () => 'dark',
+    })
+    mounter.mountCharts(mountRoot(host))
+    await vi.waitFor(() => expect(createdCharts()).toHaveLength(1))
+
+    mounter.destroyAll()
+
+    const chart = createdCharts()[0]
+    expect(chart?.unsubscribeCrosshairMove).toHaveBeenCalled()
+    expect(chart?.crosshair).toHaveLength(0)
+    // Order matters: remove() tears the internals down and would reject it.
+    const unsubOrder = chart?.unsubscribeCrosshairMove.mock.invocationCallOrder[0] ?? 0
+    const removeOrder = chart?.remove.mock.invocationCallOrder[0] ?? 0
+    expect(unsubOrder).toBeLessThan(removeOrder)
+  })
+})
diff --git a/frontend/src/views/chat/transcript/chart.ts b/frontend/src/views/chat/transcript/chart.ts
index cf65b793..9e9a787e 100644
--- a/frontend/src/views/chat/transcript/chart.ts
+++ b/frontend/src/views/chat/transcript/chart.ts
@@ -20,7 +20,7 @@
 
 // Type-only — erased at compile time, so it does not pull the library into the
 // Chat chunk. The runtime import stays dynamic, inside `draw`.
-import type { UTCTimestamp } from 'lightweight-charts'
+import type { MouseEventParams, Time, UTCTimestamp } from 'lightweight-charts'
 
 import type { Artifact } from './artifacts'
 
@@ -209,6 +209,67 @@ export function priceDecimals(payload: ChartPayload): number {
   return Math.min(12, leadingZeros + 4)
 }
 
+/* ── Crosshair readout ──────────────────────────────────────────────────── */
+
+/** One candle rendered for the readout strip, every field already a string. */
+export interface CandleReadout {
+  time: string
+  open: string
+  high: string
+  low: string
+  close: string
+  /** Close against open, signed and suffixed — "+1.27%". */
+  change: string
+  direction: 'up' | 'down'
+  /** Compact USD volume, or '' when the candle carries none. */
+  volume: string
+}
+
+/** Thousands-grouped short form, so a volume column cannot widen the card. */
+export function compactNumber(value: number): string {
+  const abs = Math.abs(value)
+  if (abs >= 1e9) return `${(value / 1e9).toFixed(1)}B`
+  if (abs >= 1e6) return `${(value / 1e6).toFixed(1)}M`
+  if (abs >= 1e3) return `${(value / 1e3).toFixed(1)}K`
+  return `${Math.round(value)}`
+}
+
+/**
+ * Format a candle timestamp in UTC.
+ *
+ * lightweight-charts plots UTC unless a timezone is configured, so the readout
+ * has to agree with the axis underneath it rather than with the reader's clock.
+ */
+export function formatCandleTime(seconds: number): string {
+  const at = new Date(seconds * 1000)
+  const pad = (value: number): string => String(value).padStart(2, '0')
+  const date = `${at.getUTCFullYear()}-${pad(at.getUTCMonth() + 1)}-${pad(at.getUTCDate())}`
+  return `${date} ${pad(at.getUTCHours())}:${pad(at.getUTCMinutes())} UTC`
+}
+
+/**
+ * Everything the readout shows for one candle.
+ *
+ * The percentage is close against open — the move *within* the candle, which is
+ * what a candle body draws — not against the previous close.
+ */
+export function candleReadout(candle: ChartCandle, decimals: number): CandleReadout {
+  const price = (value: number): string => value.toFixed(decimals)
+  const delta = candle.open === 0 ? 0 : ((candle.close - candle.open) / candle.open) * 100
+  const rounded = Number(delta.toFixed(2))
+  return {
+    time: formatCandleTime(candle.time),
+    open: price(candle.open),
+    high: price(candle.high),
+    low: price(candle.low),
+    close: price(candle.close),
+    change: `${rounded >= 0 ? '+' : ''}${rounded.toFixed(2)}%`,
+    // A flat candle draws as an up candle (see volumeSeriesData); match it.
+    direction: candle.close >= candle.open ? 'up' : 'down',
+    volume: typeof candle.volume === 'number' ? compactNumber(candle.volume) : '',
+  }
+}
+
 /* ── Injected mounter dependencies ──────────────────────────────────────── */
 
 /**
@@ -225,6 +286,60 @@ function loadChartLibrary(): Promise<typeof import('lightweight-charts')> {
   return libraryPromise
 }
 
+/**
+ * Build the readout strip's cells once and return an updater for them.
+ *
+ * The cells are created here rather than in the placeholder markup so the
+ * strip stays empty until a chart actually draws, and every value lands
+ * through `textContent`.
+ */
+function mountReadout(host: HTMLElement, decimals: number): ((candle: ChartCandle) => void) | null {
+  const strip = host.querySelector<HTMLElement>('.msg-artifact-chart__readout')
+  if (!strip) return null
+  strip.replaceChildren()
+
+  const values = new Map<string, HTMLElement>()
+  const cells = new Map<string, HTMLElement>()
+  const addCell = (key: string, label: string): void => {
+    const cell = document.createElement('span')
+    cell.className = 'msg-artifact-chart__readout-cell'
+    if (label) {
+      const tag = document.createElement('span')
+      tag.className = 'msg-artifact-chart__readout-label'
+      tag.textContent = label
+      cell.appendChild(tag)
+    }
+    const value = document.createElement('span')
+    value.className = 'msg-artifact-chart__readout-value'
+    cell.appendChild(value)
+    strip.appendChild(cell)
+    values.set(key, value)
+    cells.set(key, cell)
+  }
+
+  addCell('time', '')
+  addCell('open', 'O')
+  addCell('high', 'H')
+  addCell('low', 'L')
+  addCell('close', 'C')
+  addCell('change', '')
+  addCell('volume', 'Vol')
+
+  return (candle: ChartCandle): void => {
+    const readout = candleReadout(candle, decimals)
+    values.get('time')!.textContent = readout.time
+    values.get('open')!.textContent = readout.open
+    values.get('high')!.textContent = readout.high
+    values.get('low')!.textContent = readout.low
+    values.get('close')!.textContent = readout.close
+    values.get('change')!.textContent = readout.change
+    values.get('volume')!.textContent = readout.volume
+    // Colour the move the same way the candle body is coloured.
+    cells.get('change')!.dataset.direction = readout.direction
+    cells.get('volume')!.hidden = readout.volume === ''
+  }
+}
+
 /** A drawn chart, held by its host element so the mounter can sweep it later. */
 interface LiveChart {
   dispose: () => void
@@ -361,6 +476,23 @@ export function createChartMounter(deps: ChartMounterDeps) {
 
     chart.timeScale().fitContent()
 
+    let crosshairUnsubscribe: (() => void) | null = null
+    // lightweight-charts ships no tooltip: a crosshair alone cannot say what a
+    // candle opened at or how far it moved, so the readout strip does. It rests
+    // on the newest candle and follows the cursor while it is over the chart.
+    const updateReadout = mountReadout(host, decimals)
+    const byTime = new Map(payload.candles.map((entry) => [entry.time, entry]))
+    const newest = payload.candles[payload.candles.length - 1]
+    if (updateReadout && newest) {
+      updateReadout(newest)
+      const onCrosshairMove = (param: MouseEventParams<Time>): void => {
+        const at = typeof param.time === 'number' ? param.time : null
+        updateReadout((at === null ? undefined : byTime.get(at)) ?? newest)
+      }
+      chart.subscribeCrosshairMove(onCrosshairMove)
+      crosshairUnsubscribe = (): void => chart.unsubscribeCrosshairMove(onCrosshairMove)
+    }
+
     // Re-theme in place rather than tearing the chart down, so a theme toggle
     // does not reset the user's pan/zoom.
     const applyTheme = (mode: ChartThemeMode): void => {
@@ -402,6 +534,9 @@ export function createChartMounter(deps: ChartMounterDeps) {
     const entry: LiveChart = {
       applyTheme,
       dispose: () => {
+        // Unsubscribe before remove(): the chart tears its internals down and
+        // will not accept the call afterwards.
+        crosshairUnsubscribe?.()
         observer?.disconnect()
         chart.remove()
       },

From 86a00bb7e0f615e8f70ce40f1aa1833478854d43 Mon Sep 17 00:00:00 2001
From: Key KQ <key.kq20052022@gmail.com>
Date: Thu, 6 Aug 2026 16:12:41 +0700
Subject: [PATCH 6/7] docs(artifacts): spell out how a skill publishes a chart

The section documented the payload but not the two steps that actually
produce a chart, which are also the two that fail quietly: the file has
to be inside the workspace, and publish_artifact needs the mime spelled
out or the filename guess makes it a plain download chip.

Also corrects the converter's home now that both gmgn skills carry a
copy, and says why a skill cannot borrow another skill's script.
---
 docs/artifacts-and-media.md | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/docs/artifacts-and-media.md b/docs/artifacts-and-media.md
index 0906fdb0..d76c308d 100644
--- a/docs/artifacts-and-media.md
+++ b/docs/artifacts-and-media.md
@@ -51,7 +51,25 @@ inline. One more mime renders inline as an interactive chart:
 |------|-------------|
 | `application/vnd.agentos.chart+json` | Candlestick chart with a volume histogram |
 
-Publish a JSON file with that mime and the chat draws it in place of the chip.
+There is nothing to register: any skill gets a chart by publishing a file with
+that mime. Two steps, and both have a failure mode worth knowing.
+
+**1. Write the JSON inside the workspace.** Scripts run with the workspace as
+their working directory, so a bare filename lands in the right place.
+`publish_artifact` rejects anything outside the workspace, so an absolute path
+like `/tmp/chart.json` fails *after* the data has already been fetched.
+
+**2. Publish it with the mime spelled out.**
+
+```
+publish_artifact path=bonk-1h.chart.json mime=application/vnd.agentos.chart+json
+```
+
+Passing `mime` is what makes the chart appear. Omit it and the filename guess
+returns `application/json`, which classifies as a data artifact and renders as
+an ordinary download chip — no error, just no chart. Tell the model to pass it
+explicitly in your SKILL.md.
+
 The body is:
 
 ```json
@@ -71,9 +89,16 @@ candle field is required. Rows may arrive in any order and may repeat a
 timestamp — the renderer sorts them and keeps the last entry per timestamp.
 `title` and `subtitle` are display-only text, never markup.
 
-The `gmgn-market` skill ships `scripts/kline_chart.py`, which converts GMGN
-kline output into this shape; use it as a worked example when adding charts to
-another skill.
+Hovering a candle reveals its open, high, low, close, volume, and the move from
+open to close as a percentage, so there is no need to repeat those numbers in
+the reply.
+
+The `gmgn-market` and `gmgn-token` skills each ship `scripts/kline_chart.py`,
+which converts GMGN kline output into this shape; use it as a worked example
+when adding charts to another skill. Note that they carry a copy each rather
+than sharing one: `{baseDir}` resolves to the skill that is running, so a skill
+cannot reach into another skill's `scripts/` directory — and the skill it
+pointed at may not even be enabled. Give your skill its own copy.
 
 Charts render in the Web UI only. Other surfaces receive the artifact as a
 normal JSON file, so keep a short text summary in the reply alongside the chart.

From 0bce2529dd98215072b84fed14e6b140051bebb8 Mon Sep 17 00:00:00 2001
From: Key KQ <key.kq20052022@gmail.com>
Date: Fri, 7 Aug 2026 15:49:54 +0700
Subject: [PATCH 7/7] docs(skills): make the inline-chart contract findable
 while authoring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The chart contract was documented only in artifacts-and-media.md, which
nothing on the skill-authoring path links to. features/skills.md — the
canonical skills reference — never mentioned artifacts at all, so a skill
author had no way to learn that publishing one mime rather than another
is the whole difference between a chart and a download chip.

features/skills.md now lists the mimes that render inline and links to
the contract; the tools reference says the same on the publish_artifact
row. skill_create points at it in its result rather than its description,
which would spend tokens on every turn to say something that only matters
at the moment a skill is written.
---
 docs/features/skills.md                  | 19 +++++++++++++++++++
 docs/tools-and-sandbox.md                |  2 +-
 src/agentos/tools/builtin/skill_tools.py | 12 +++++++++++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/docs/features/skills.md b/docs/features/skills.md
index c3cf35e7..0821e518 100644
--- a/docs/features/skills.md
+++ b/docs/features/skills.md
@@ -190,6 +190,25 @@ agentos skills tap remove <owner/repo>
 
 Use taps when your team maintains its own skill catalog.
 
+## What a Skill Can Put in the Chat
+
+Besides text, a skill hands files to the surface with `publish_artifact`. Most
+arrive in Web UI chat as a download chip, but some mimes render inline instead:
+
+| Mime | Rendered as |
+| --- | --- |
+| `image/*` | Inline preview |
+| `audio/*` | Inline player |
+| `application/vnd.agentos.chart+json` | Interactive candlestick chart |
+
+Nothing has to be registered for this: the mime a skill publishes decides how
+its output is drawn, so any skill can render a chart without a frontend change.
+
+[`artifacts-and-media.md`](../artifacts-and-media.md#inline-charts) carries the
+payload shape, the workspace rule `publish_artifact` enforces, and the two
+mistakes that produce no error and no chart — omitting the mime, and writing the
+file outside the workspace.
+
 ## Publish and Inspect
 
 Publish a skill directory:
diff --git a/docs/tools-and-sandbox.md b/docs/tools-and-sandbox.md
index b166c9de..175587fc 100644
--- a/docs/tools-and-sandbox.md
+++ b/docs/tools-and-sandbox.md
@@ -20,7 +20,7 @@ For a focused permissions guide, see
 | Web | `web_search`, `web_fetch`, `http_request`. |
 | Memory | `memory_search`, `memory_save`, `memory_get`, `memory_delete`, `memory`. |
 | Sessions | `sessions_send`, `sessions_spawn`, `sessions_list`, `sessions_history`, `session_status`. |
-| Artifacts | `publish_artifact`. |
+| Artifacts | `publish_artifact`. The mime decides the rendering: some draw inline in chat rather than as a download chip — see [artifacts-and-media.md](artifacts-and-media.md#inline-charts). |
 | Media | image generation, PDF, TTS, and media helpers. |
 | Skills | `skill_list`, `skill_view`, `skill_create`, `skill_edit`, `install_skill_deps`, `meta_invoke`. |
 | Control | cron scheduling and gateway control operations. |
diff --git a/src/agentos/tools/builtin/skill_tools.py b/src/agentos/tools/builtin/skill_tools.py
index 486f80be..5c485e5e 100644
--- a/src/agentos/tools/builtin/skill_tools.py
+++ b/src/agentos/tools/builtin/skill_tools.py
@@ -1070,7 +1070,17 @@ async def skill_create(
         _loader.invalidate_cache()
 
         logger.info("skill_create.success", name=name)
-        return f"Skill '{name}' created at {skill_file}"
+        # Say this at creation time rather than in the tool description, which
+        # would cost tokens on every turn: a skill author has no way to guess
+        # that the mime alone decides whether output draws inline or arrives as
+        # a download chip.
+        return (
+            f"Skill '{name}' created at {skill_file}. "
+            "For output that should draw inline in Web chat instead of as a "
+            "download chip, have the skill publish_artifact with an inline mime "
+            "(application/vnd.agentos.chart+json renders a candlestick chart); "
+            "docs/artifacts-and-media.md documents the payload."
+        )
 
     @tool(
         name="skill_edit",