@363045841yyt/klinechart-core 0.8.2 → 0.8.3

package/src/engine/renderers/Indicator/ichimoku.ts

@@ -1,5 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import { resolveThemeColors } from '../../../tokens'
 import type { KLineData } from '../../../types/price'
 import type { IchimokuRenderState } from '../../indicators/ichimokuState'
 import { createIchimokuStateKey, EMPTY_ICHIMOKU_STATE } from '../../indicators/ichimokuState'
@@ -14,8 +15,6 @@ const KIJUN_COLOR = '#2563eb'
 const SPAN_A_COLOR = '#16a34a'
 const SPAN_B_COLOR = '#dc2626'
 const CHIKOU_COLOR = '#7c3aed'
-const CLOUD_BULL = 'rgba(34, 197, 94, 0.15)'
-const CLOUD_BEAR = 'rgba(239, 68, 68, 0.15)'
 
 type Point = { x: number; y: number }
 
@@ -58,6 +57,7 @@ export function createIchimokuRendererPlugin(options: IchimokuRendererOptions =
 
         draw(context: RenderContext) {
             const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const stateKey = resolveKey()
             if (!stateKey) return
             const state = pluginHost?.getSharedState<IchimokuRenderState>(stateKey)
@@ -94,7 +94,7 @@ export function createIchimokuRendererPlugin(options: IchimokuRendererOptions =
             if (params.showCloud && cloudSegs.length >= 2) {
                 ctx.save()
                 ctx.translate(-scrollLeft, 0)
-                fillCloud(ctx, cloudSegs)
+                fillCloud(ctx, cloudSegs, colors.candleUpBody, colors.candleDownBody)
                 ctx.restore()
             }
 
@@ -153,11 +153,16 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
 function fillCloud(
     ctx: CanvasRenderingContext2D,
     segs: { x: number; ya: number; yb: number; bull: boolean }[],
+    bullColor: string,
+    bearColor: string,
+    alpha = 0.15,
 ): void {
+    ctx.save()
+    ctx.globalAlpha = alpha
     for (let i = 0; i < segs.length - 1; i++) {
         const a = segs[i]!
         const b = segs[i + 1]!
-        ctx.fillStyle = a.bull ? CLOUD_BULL : CLOUD_BEAR
+        ctx.fillStyle = a.bull ? bullColor : bearColor
         ctx.beginPath()
         ctx.moveTo(a.x, a.ya)
         ctx.lineTo(b.x, b.ya)
@@ -166,6 +171,7 @@ function fillCloud(
         ctx.closePath()
         ctx.fill()
     }
+    ctx.restore()
 }
 
 export function getIchimokuTitleInfo(

package/src/engine/renderers/Indicator/sar.ts

@@ -1,5 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import { resolveThemeColors } from '../../../tokens'
 import type { KLineData } from '../../../types/price'
 import type { SARRenderState } from '../../indicators/sarState'
 import { createSARStateKey, EMPTY_SAR_STATE } from '../../indicators/sarState'
@@ -9,8 +10,6 @@ import type { IndicatorScheduler, SARSchedulerConfig } from '../../indicators/sc
 import { calcSARData } from '../../indicators/calculators'
 import { createValuePointVisibleStateComposer } from '../../indicators/visibleStateComposers'
 
-const SAR_UP_COLOR = '#22c55e'
-const SAR_DOWN_COLOR = '#ef4444'
 const DOT_RADIUS = 1.5
 const TAU = Math.PI * 2
 
@@ -59,6 +58,7 @@ export function createSARRendererPlugin(options: SARRendererOptions = {}): Rende
 
         draw(context: RenderContext) {
             const { ctx, pane, range, scrollLeft, kLineCenters } = context
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
             const stateKey = resolveKey()
             if (!stateKey) return
@@ -77,7 +77,7 @@ export function createSARRendererPlugin(options: SARRendererOptions = {}): Rende
                 const centerX = kLineCenters[i - range.start]
                 if (centerX === undefined) continue
                 const y = pane.yAxis.priceToY(point.value)
-                ctx.fillStyle = point.trend === 'up' ? SAR_UP_COLOR : SAR_DOWN_COLOR
+                ctx.fillStyle = point.trend === 'up' ? colors.candleUpBody : colors.candleDownBody
                 ctx.beginPath()
                 ctx.arc(centerX, y, DOT_RADIUS, 0, TAU)
                 ctx.fill()

package/src/engine/renderers/Indicator/supertrend.ts

@@ -1,5 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import { resolveThemeColors } from '../../../tokens'
 import type { KLineData } from '../../../types/price'
 import type { SuperTrendRenderState } from '../../indicators/supertrendState'
 import { createSuperTrendStateKey, EMPTY_SUPERTREND_STATE } from '../../indicators/supertrendState'
@@ -9,9 +10,6 @@ import type { IndicatorScheduler, SuperTrendSchedulerConfig } from '../../indica
 import { calcSuperTrendData } from '../../indicators/calculators'
 import { createValuePointVisibleStateComposer } from '../../indicators/visibleStateComposers'
 
-const ST_UP_COLOR = '#22c55e'
-const ST_DOWN_COLOR = '#ef4444'
-
 export interface SuperTrendRendererOptions {
     paneId?: string
 }
@@ -51,6 +49,7 @@ export function createSuperTrendRendererPlugin(options: SuperTrendRendererOption
 
         draw(context: RenderContext) {
             const { ctx, pane, range, scrollLeft, kLineCenters } = context
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const stateKey = resolveKey()
             if (!stateKey) return
             const state = pluginHost?.getSharedState<SuperTrendRenderState>(stateKey)
@@ -77,7 +76,7 @@ export function createSuperTrendRendererPlugin(options: SuperTrendRendererOption
                 const y = pane.yAxis.priceToY(point.value)
 
                 if (prevX !== null && prevTrend === point.trend) {
-                    ctx.strokeStyle = point.trend === 'up' ? ST_UP_COLOR : ST_DOWN_COLOR
+                    ctx.strokeStyle = point.trend === 'up' ? colors.candleUpBody : colors.candleDownBody
                     ctx.beginPath()
                     ctx.moveTo(prevX, prevY!)
                     ctx.lineTo(centerX, y)

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './reactivity'
 export * from './controllers'
+export * from './mcp'
 export { VERSION } from './version'
 export * from './tokens'
 export { formatTimestamp } from './utils/dateFormat'

package/src/mcp/chartBridge.ts

@@ -0,0 +1,220 @@
+import type { ToolCall, ToolResult, ControllerDescription, ToolCallHandler } from './types'
+
+export interface ChartBridgeOptions {
+  wsUrl: string
+  onToolCall: ToolCallHandler
+  sessionId?: string
+  autoReconnect?: boolean
+  reconnectDelay?: number
+  heartbeatInterval?: number
+  wsImpl?: new (url: string) => WebSocket
+}
+
+export type ChartBridgeEvent =
+  | 'connected'
+  | 'disconnected'
+  | 'error'
+  | 'stateChanged'
+
+type MessageHandler = (...args: unknown[]) => void
+
+export class ChartBridge {
+  readonly sessionId: string
+  private readonly autoReconnect: boolean
+  private readonly reconnectDelay: number
+  private readonly heartbeatInterval: number
+  private readonly onToolCall: ToolCallHandler
+
+  private readonly wsImpl: new (url: string) => WebSocket
+  private ws: WebSocket | null = null
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null
+  private heartbeatTimer: ReturnType<typeof setInterval> | null = null
+  private destroyed = false
+
+  private listeners = new Map<ChartBridgeEvent, Set<MessageHandler>>()
+
+  onConnected?: () => void
+  onDisconnected?: () => void
+  onError?: (err: Error) => void
+  onStateChange?: () => void
+
+  constructor(options: ChartBridgeOptions) {
+    this.sessionId = options.sessionId ?? crypto.randomUUID()
+    this.autoReconnect = options.autoReconnect ?? true
+    this.reconnectDelay = options.reconnectDelay ?? 3000
+    this.heartbeatInterval = options.heartbeatInterval ?? 30_000
+    this.onToolCall = options.onToolCall
+    this.wsImpl = options.wsImpl ?? WebSocket
+    this.wsUrl = options.wsUrl
+  }
+
+  private wsUrl: string
+
+  async connect(): Promise<void> {
+    if (this.destroyed) return
+    this.disconnect()
+
+    return new Promise((resolve, reject) => {
+      try {
+        const ws = new this.wsImpl(this.wsUrl)
+
+        ws.onopen = () => {
+          this.ws = ws
+          console.info(
+            `[ChartBridge] WS opened → sending register (sessionId=${this.sessionId})`,
+          )
+          ws.send(JSON.stringify({ type: 'register', sessionId: this.sessionId }))
+          this.startHeartbeat()
+          this.onConnected?.()
+          this.emit('connected')
+          resolve()
+        }
+
+        ws.onmessage = (event: MessageEvent) => {
+          let msg: Record<string, unknown>
+          try {
+            msg = JSON.parse(event.data as string)
+          } catch {
+            return
+          }
+          this.handleMessage(msg)
+        }
+
+        ws.onclose = () => {
+          console.warn(
+            `[ChartBridge] WS closed, autoReconnect=${this.autoReconnect}`,
+          )
+          this.ws = null
+          this.stopHeartbeat()
+          this.onDisconnected?.()
+          this.emit('disconnected')
+          if (this.autoReconnect && !this.destroyed) {
+            this.scheduleReconnect()
+          }
+        }
+
+        ws.onerror = () => {
+          console.error(`[ChartBridge] WS error — connection failed`)
+          const err = new Error('WebSocket connection failed')
+          this.onError?.(err)
+          this.emit('error', err)
+          reject(err)
+        }
+      } catch (err) {
+        reject(err)
+      }
+    })
+  }
+
+  disconnect(): void {
+    this.ws?.close()
+    this.ws = null
+    this.cancelReconnect()
+    this.stopHeartbeat()
+  }
+
+  destroy(): void {
+    this.destroyed = true
+    this.disconnect()
+    this.listeners.clear()
+  }
+
+  private handleMessage(msg: Record<string, unknown>): void {
+    switch (msg.type) {
+      case 'registered':
+        break
+
+      case 'tool:call': {
+        const call = msg.call as ToolCall
+        const requestId = msg.requestId as string
+        this.dispatchToolCall(requestId, call)
+        break
+      }
+
+      case 'ping': {
+        this.ws?.send(JSON.stringify({ type: 'pong' }))
+        break
+      }
+    }
+  }
+
+  private async dispatchToolCall(requestId: string, call: ToolCall): Promise<void> {
+    const result = await this.onToolCall(call)
+    this.sendResult(requestId, result)
+
+    if (this.onStateChange) {
+      this.onStateChange()
+    }
+    this.emit('stateChanged')
+  }
+
+  private sendResult(requestId: string, result: ToolResult): void {
+    this.ws?.send(
+      JSON.stringify({
+        type: 'tool:result',
+        requestId,
+        result,
+      }),
+    )
+  }
+
+  sendStateUpdate(
+    descriptions: Record<string, ControllerDescription>,
+  ): void {
+    this.ws?.send(
+      JSON.stringify({
+        type: 'state:update',
+        sessionId: this.sessionId,
+        descriptions,
+      }),
+    )
+  }
+
+  private startHeartbeat(): void {
+    this.stopHeartbeat()
+    this.heartbeatTimer = setInterval(() => {
+      if (this.ws?.readyState === 1) {
+        this.ws.send(JSON.stringify({ type: 'ping' }))
+      }
+    }, this.heartbeatInterval)
+  }
+
+  private stopHeartbeat(): void {
+    if (this.heartbeatTimer !== null) {
+      clearInterval(this.heartbeatTimer)
+      this.heartbeatTimer = null
+    }
+  }
+
+  private scheduleReconnect(): void {
+    this.cancelReconnect()
+    this.reconnectTimer = setTimeout(() => {
+      if (!this.destroyed) {
+        this.connect()
+      }
+    }, this.reconnectDelay)
+  }
+
+  private cancelReconnect(): void {
+    if (this.reconnectTimer !== null) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+  }
+
+  private emit(event: ChartBridgeEvent, ...args: unknown[]): void {
+    this.listeners.get(event)?.forEach((fn) => fn(...args))
+  }
+
+  on(event: ChartBridgeEvent, handler: MessageHandler): () => void {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set())
+    }
+    this.listeners.get(event)!.add(handler)
+    return () => this.listeners.get(event)?.delete(handler)
+  }
+
+  off(event: ChartBridgeEvent, handler: MessageHandler): void {
+    this.listeners.get(event)?.delete(handler)
+  }
+}

package/src/mcp/index.ts

@@ -0,0 +1,2 @@
+export { ChartBridge, type ChartBridgeOptions, type ChartBridgeEvent } from './chartBridge'
+export type { ToolCall, ToolResult, ControllerDescription, ToolCallHandler } from './types'

package/src/mcp/types.ts

@@ -0,0 +1,19 @@
+export interface ToolCall {
+  name: string
+  input: Record<string, unknown>
+}
+
+export interface ToolResult {
+  success: boolean
+  error?: string
+  data?: unknown
+}
+
+export type ToolCallHandler = (call: ToolCall) => ToolResult | Promise<ToolResult>
+
+export interface ControllerDescription {
+  controllerId: string
+  summary: string
+  facts: Readonly<Record<string, string | number | boolean | null>>
+  warnings?: ReadonlyArray<string>
+}

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.8.2"
+export const VERSION = "0.8.3"