@forgecharts/sdk 1.3.9 → 1.3.10

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import React11, { forwardRef, useRef, useState, useImperativeHandle, useEffect, useCallback, createContext, useMemo, useContext } from 'react';
+import React11, { forwardRef, useRef, useState, useImperativeHandle, useEffect, useCallback, createContext, useMemo, useContext, useReducer } from 'react';
 import { TextStyle, Application, Container, Graphics, Text, FillGradient } from 'pixi.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import ReactDOM from 'react-dom';
@@ -17841,7 +17841,143 @@ var logo_dark_default = "../logo_dark-B2KCSRPJ.png";
 
 // src/react/assets/logo_light.png
 var logo_light_default = "../logo_light-NAWNBY4G.png";
+var _ws = null;
+var _listeners = /* @__PURE__ */ new Set();
+var _subscribed = /* @__PURE__ */ new Set();
+var _reconnectTimer = null;
+var _authToken = null;
 function setWsAuthToken(token) {
+  _authToken = token;
+}
+function _wsUrl() {
+  const base = typeof window === "undefined" ? "ws://localhost:4001/ws" : `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/ws`;
+  return _authToken ? `${base}?token=${encodeURIComponent(_authToken)}` : base;
+}
+function _send(msg) {
+  if (_ws?.readyState === WebSocket.OPEN) {
+    _ws.send(JSON.stringify(msg));
+  }
+}
+function _ensureConnected() {
+  if (_ws && (_ws.readyState === WebSocket.CONNECTING || _ws.readyState === WebSocket.OPEN)) return;
+  if (_reconnectTimer) {
+    clearTimeout(_reconnectTimer);
+    _reconnectTimer = null;
+  }
+  _ws = new WebSocket(_wsUrl());
+  _ws.onopen = () => {
+    for (const sym of _subscribed) {
+      _send({ type: "subscribe_quote", symbol: sym });
+    }
+  };
+  _ws.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data);
+      if (msg.type === "quote") {
+        for (const listener of _listeners) {
+          listener(msg.payload);
+        }
+      }
+    } catch {
+    }
+  };
+  _ws.onclose = () => {
+    _ws = null;
+    if (_subscribed.size > 0) {
+      _reconnectTimer = setTimeout(_ensureConnected, 3e3);
+    }
+  };
+}
+function _addListener(fn) {
+  _listeners.add(fn);
+}
+function _removeListener(fn) {
+  _listeners.delete(fn);
+}
+function _subscribe(symbols) {
+  _ensureConnected();
+  for (const sym of symbols) {
+    if (!_subscribed.has(sym)) {
+      _subscribed.add(sym);
+      _send({ type: "subscribe_quote", symbol: sym });
+    }
+  }
+}
+function _unsubscribe(symbols) {
+  for (const sym of symbols) {
+    _subscribed.delete(sym);
+    _send({ type: "unsubscribe_quote", symbol: sym });
+  }
+  if (_subscribed.size === 0 && _ws) {
+    _ws.close();
+    _ws = null;
+  }
+}
+function quoteReducer(state, action) {
+  if (action.type === "tick") {
+    const prices = new Map(state.prices);
+    prices.set(action.symbol, action.last);
+    const volumes = action.volume !== void 0 ? new Map(state.volumes).set(action.symbol, action.volume) : state.volumes;
+    if (action.dir) {
+      const dirs = new Map(state.dirs);
+      dirs.set(action.symbol, action.dir);
+      return { prices, dirs, volumes };
+    }
+    return { prices, dirs: state.dirs, volumes };
+  }
+  if (action.type === "clear_dir") {
+    if (!state.dirs.has(action.symbol)) return state;
+    const dirs = new Map(state.dirs);
+    dirs.delete(action.symbol);
+    return { ...state, dirs };
+  }
+  return state;
+}
+var FLASH_MS = 300;
+function useWatchlistQuotes(symbols, enabled = true) {
+  const [state, dispatch] = useReducer(quoteReducer, void 0, () => ({
+    prices: /* @__PURE__ */ new Map(),
+    dirs: /* @__PURE__ */ new Map(),
+    volumes: /* @__PURE__ */ new Map()
+  }));
+  const symbolsKey = symbols.slice().sort().join(",");
+  const flashTimers = useRef(/* @__PURE__ */ new Map());
+  const listenerRef = useRef(null);
+  const onQuote = useCallback((payload) => {
+    if (!_subscribed.has(payload.symbol)) return;
+    const tickAction = { type: "tick", symbol: payload.symbol, last: payload.last, dir: payload.dir };
+    if (payload.volume !== void 0) tickAction.volume = payload.volume;
+    dispatch(tickAction);
+    if (payload.dir) {
+      const existing = flashTimers.current.get(payload.symbol);
+      if (existing !== void 0) clearTimeout(existing);
+      const t = setTimeout(() => {
+        dispatch({ type: "clear_dir", symbol: payload.symbol });
+        flashTimers.current.delete(payload.symbol);
+      }, FLASH_MS);
+      flashTimers.current.set(payload.symbol, t);
+    }
+  }, []);
+  useEffect(() => {
+    if (listenerRef.current) _removeListener(listenerRef.current);
+    listenerRef.current = onQuote;
+    _addListener(onQuote);
+    return () => {
+      if (listenerRef.current) _removeListener(listenerRef.current);
+      listenerRef.current = null;
+      for (const t of flashTimers.current.values()) clearTimeout(t);
+      flashTimers.current.clear();
+    };
+  }, [onQuote]);
+  useEffect(() => {
+    if (!enabled) return;
+    const syms = symbols.filter(Boolean);
+    if (syms.length > 0) _subscribe(syms);
+    return () => {
+      if (syms.length > 0) _unsubscribe(syms);
+    };
+  }, [symbolsKey, enabled]);
+  return { prices: state.prices, dirs: state.dirs, volumes: state.volumes };
 }
 
 // src/react/assets/Rithmic.png
@@ -29688,6 +29824,741 @@ function ScriptDrawer({ onClose, onAddIndicator, apiUrl, getAuthToken }) {
     ] })
   ] });
 }
+
+// src/react/shell/watchlistApi.ts
+var _apiBase = "/api";
+var _memToken = null;
+var _getAuthToken = null;
+async function _resolveToken() {
+  if (_getAuthToken) {
+    try {
+      return await _getAuthToken();
+    } catch {
+    }
+  }
+  if (_memToken) return _memToken;
+  if (typeof localStorage !== "undefined") return localStorage.getItem("forgecharts-token");
+  return null;
+}
+async function _authHeader() {
+  const token = await _resolveToken();
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+async function apiFetch(method, path, body) {
+  const bodyInit = body !== void 0 ? JSON.stringify(body) : null;
+  const res = await fetch(`${_apiBase}${path}`, {
+    method,
+    headers: { "Content-Type": "application/json", ...await _authHeader() },
+    ...bodyInit !== null ? { body: bodyInit } : {}
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(err.error ?? res.statusText);
+  }
+  if (res.status === 204) return void 0;
+  return res.json();
+}
+var watchlistApi = {
+  configure(cfg) {
+    if (cfg.apiBase) _apiBase = cfg.apiBase;
+    if (cfg.getAuthToken) _getAuthToken = cfg.getAuthToken;
+    if (cfg.token) _memToken = cfg.token;
+  },
+  setToken(token) {
+    _memToken = token;
+  },
+  getAll() {
+    return apiFetch("GET", "/watchlist");
+  },
+  addItem(symbol, group_id) {
+    return apiFetch("POST", "/watchlist/items", { symbol, group_id });
+  },
+  removeItem(id) {
+    return apiFetch("DELETE", `/watchlist/items/${encodeURIComponent(id)}`);
+  },
+  moveItemToGroup(id, group_id) {
+    return apiFetch("PATCH", `/watchlist/items/${encodeURIComponent(id)}`, { group_id });
+  },
+  addGroup(name) {
+    return apiFetch("POST", "/watchlist/groups", { name });
+  },
+  removeGroup(id) {
+    return apiFetch("DELETE", `/watchlist/groups/${encodeURIComponent(id)}`);
+  },
+  reorderItems(ids) {
+    return apiFetch("PUT", "/watchlist/items/reorder", { ids });
+  }
+};
+var LOCAL_KEY = "forgecharts:watchlist";
+function _localRead() {
+  try {
+    const raw = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_KEY) : null;
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed.groups) && Array.isArray(parsed.items)) return parsed;
+    }
+  } catch {
+  }
+  return { groups: [], items: [] };
+}
+function _localWrite(data) {
+  try {
+    if (typeof localStorage !== "undefined") localStorage.setItem(LOCAL_KEY, JSON.stringify(data));
+  } catch {
+  }
+}
+function _localId() {
+  return `wl-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+var localWatchlistApi = {
+  async getAll() {
+    return _localRead();
+  },
+  async addItem(symbol, group_id) {
+    const data = _localRead();
+    const existing = data.items.find((i) => i.symbol === symbol && i.group_id === (group_id ?? null));
+    if (existing) return existing;
+    const item = {
+      id: _localId(),
+      group_id: group_id ?? null,
+      symbol,
+      position: data.items.length,
+      created_at: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    data.items.push(item);
+    _localWrite(data);
+    return item;
+  },
+  async removeItem(id) {
+    const data = _localRead();
+    data.items = data.items.filter((i) => i.id !== id);
+    _localWrite(data);
+  },
+  async moveItemToGroup(id, group_id) {
+    const data = _localRead();
+    const item = data.items.find((i) => i.id === id);
+    if (!item) throw new Error("Watchlist item not found");
+    item.group_id = group_id;
+    _localWrite(data);
+    return item;
+  },
+  async addGroup(name) {
+    const data = _localRead();
+    const group = {
+      id: _localId(),
+      name,
+      position: data.groups.length,
+      created_at: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    data.groups.push(group);
+    _localWrite(data);
+    return group;
+  },
+  async removeGroup(id) {
+    const data = _localRead();
+    data.groups = data.groups.filter((g) => g.id !== id);
+    for (const item of data.items) {
+      if (item.group_id === id) item.group_id = null;
+    }
+    _localWrite(data);
+  },
+  async reorderItems(ids) {
+    const data = _localRead();
+    const order = new Map(ids.map((id, idx) => [id, idx]));
+    data.items.sort((a, b) => (order.get(a.id) ?? a.position) - (order.get(b.id) ?? b.position));
+    data.items.forEach((item, idx) => {
+      item.position = idx;
+    });
+    _localWrite(data);
+  }
+};
+function fmtPrice2(v) {
+  const abs = Math.abs(v);
+  const dec = abs >= 1e3 ? 2 : abs >= 1 ? 2 : abs >= 1e-4 ? 4 : 6;
+  return v.toLocaleString("en-US", { minimumFractionDigits: dec, maximumFractionDigits: dec });
+}
+function fmtVolume(v) {
+  if (v >= 1e9) return (v / 1e9).toFixed(2) + "B";
+  if (v >= 1e6) return (v / 1e6).toFixed(2) + "M";
+  if (v >= 1e3) return (v / 1e3).toFixed(1) + "K";
+  return v.toLocaleString("en-US");
+}
+function SymbolRow({
+  item,
+  quote,
+  flash,
+  dragOver,
+  highlighted,
+  logoUrl,
+  onSelect,
+  onRemove,
+  onContextMenu,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd
+}) {
+  const liveColor = flash === "up" ? "var(--wl-up)" : flash === "down" ? "var(--wl-down)" : quote ? quote.change >= 0 ? "var(--wl-up)" : "var(--wl-down)" : "var(--text-muted)";
+  const changeColor = quote ? quote.change >= 0 ? "var(--wl-up)" : "var(--wl-down)" : "var(--text-muted)";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `wl-row${dragOver ? " wl-drag-over" : ""}${highlighted ? " agent-highlight" : ""}`,
+      draggable: true,
+      onDragStart,
+      onDragOver,
+      onDrop,
+      onDragEnd,
+      onClick: onSelect,
+      onContextMenu,
+      title: item.symbol,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "wl-drag-handle", title: "Drag to reorder", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 8 12", width: "8", height: "12", fill: "currentColor", children: [
+          /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "0", y: "5", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "0", y: "10", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "5", y: "0", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "5", y: "10", width: "2", height: "2", rx: "1" })
+        ] }) }),
+        item.symbol.includes(":") && /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "wl-logo",
+            src: logoUrl ?? `/api/logos/${encodeURIComponent(item.symbol.split(":")[0].toUpperCase())}`,
+            alt: "",
+            onError: (e) => {
+              const img = e.currentTarget;
+              if (logoUrl && !img.src.includes("/api/logos/")) {
+                img.src = `/api/logos/${encodeURIComponent(item.symbol.split(":")[0].toUpperCase())}`;
+              } else {
+                img.style.display = "none";
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "wl-symbol", children: item.symbol }),
+        quote ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `wl-last${flash ? ` wl-flash-${flash}` : ""}`,
+              style: { color: liveColor },
+              children: fmtPrice2(quote.last)
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "wl-change", style: { color: changeColor }, children: [
+            quote.change >= 0 ? "+" : "",
+            fmtPrice2(quote.change)
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "wl-pct", style: { color: changeColor }, children: [
+            quote.change >= 0 ? "+" : "",
+            quote.changePct.toFixed(2),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "wl-vol", children: quote.volume !== void 0 ? fmtVolume(quote.volume) : "\u2014" })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "wl-no-data", children: "\u2014" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "wl-remove-btn",
+            title: "Remove",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            children: "\u2715"
+          }
+        )
+      ]
+    }
+  );
+}
+function WatchlistDrawer({ onClose, onSelectSymbol, symbolResolver, mode = "managed" }) {
+  const api = mode === "local" ? localWatchlistApi : watchlistApi;
+  const [groups, setGroups] = useState([]);
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [addError, setAddError] = useState("");
+  const [ctxMenu, setCtxMenu] = useState(null);
+  const [groupDialog, setGroupDialog] = useState(null);
+  const [groupName, setGroupName] = useState("");
+  const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+  const [logoMap, setLogoMap] = useState(/* @__PURE__ */ new Map());
+  const [drawerWidth, setDrawerWidth] = useState(360);
+  const [colWidths, setColWidths] = useState({ sym: 120, last: 70, chg: 70, pct: 60, vol: 52 });
+  const [dragItemId, setDragItemId] = useState(null);
+  const [dropTargetId, setDropTargetId] = useState(null);
+  const [highlightedSymbol, setHighlightedSymbol] = useState(null);
+  const ctxRef = useRef(null);
+  const drawerRef = useRef(null);
+  const dragState = useRef(null);
+  const colDragRef = useRef(null);
+  useAgentUIEvent("watchlist:highlight", ({ symbol }) => {
+    setHighlightedSymbol(symbol);
+    setTimeout(() => setHighlightedSymbol(null), 1800);
+  });
+  const onColResizeMouseDown = (e, left, right) => {
+    e.preventDefault();
+    e.stopPropagation();
+    colDragRef.current = {
+      left,
+      right,
+      startX: e.clientX,
+      startLW: colWidths[left],
+      startRW: right ? colWidths[right] : 0
+    };
+    const onMove = (ev) => {
+      if (!colDragRef.current) return;
+      const { left: l, right: r, startX, startLW, startRW } = colDragRef.current;
+      const delta = ev.clientX - startX;
+      const maxGrow = r ? startRW - 36 : Infinity;
+      const maxShrink = startLW - 36;
+      const clamped = Math.min(maxGrow, Math.max(-maxShrink, delta));
+      setColWidths((prev) => {
+        const next = { ...prev, [l]: startLW + clamped };
+        if (r) next[r] = startRW - clamped;
+        return next;
+      });
+    };
+    const onUp = () => {
+      colDragRef.current = null;
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const onResizeMouseDown = (e) => {
+    e.preventDefault();
+    dragState.current = { startX: e.clientX, startW: drawerWidth };
+    const onMove = (ev) => {
+      if (!dragState.current) return;
+      const delta = dragState.current.startX - ev.clientX;
+      const next = Math.min(600, Math.max(240, dragState.current.startW + delta));
+      setDrawerWidth(next);
+    };
+    const onUp = () => {
+      dragState.current = null;
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const reload = useCallback(async () => {
+    try {
+      const data = await api.getAll();
+      setGroups(data.groups);
+      setItems(data.items);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    reload();
+  }, [reload]);
+  useEffect(() => {
+    if (items.length === 0 || mode === "local") return;
+    const syms = [...new Set(items.map((i) => i.symbol))].join(",");
+    fetch(`/api/reference/symbols/logos?symbols=${encodeURIComponent(syms)}`).then((r) => r.ok ? r.json() : {}).then((map) => setLogoMap(new Map(Object.entries(map)))).catch(() => {
+    });
+  }, [items, mode]);
+  const symbols = items.map((i) => i.symbol);
+  const { prices: livePrices, dirs: liveDirs, volumes: liveVolumes } = useWatchlistQuotes(symbols, mode !== "local");
+  const sessionOpenRef = useRef(/* @__PURE__ */ new Map());
+  const quotes = useRef(/* @__PURE__ */ new Map()).current;
+  quotes.clear();
+  for (const [sym, last] of livePrices) {
+    if (!sessionOpenRef.current.has(sym)) {
+      sessionOpenRef.current.set(sym, last);
+    }
+    const open = sessionOpenRef.current.get(sym);
+    const change = last - open;
+    const q = {
+      last,
+      change,
+      changePct: open !== 0 ? change / open * 100 : 0
+    };
+    const vol = liveVolumes.get(sym);
+    if (vol !== void 0) q.volume = vol;
+    quotes.set(sym, q);
+  }
+  const prevItemsRef = useRef([]);
+  if (prevItemsRef.current !== items) {
+    const prevSyms = new Set(prevItemsRef.current.map((i) => i.symbol));
+    const nextSyms = new Set(items.map((i) => i.symbol));
+    for (const s of prevSyms) {
+      if (!nextSyms.has(s)) sessionOpenRef.current.delete(s);
+    }
+    prevItemsRef.current = items;
+  }
+  useEffect(() => {
+    if (!ctxMenu) return;
+    const handler = (e) => {
+      if (ctxRef.current && !ctxRef.current.contains(e.target)) setCtxMenu(null);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [ctxMenu]);
+  const handleAddFromSearch = useCallback(async (symbol) => {
+    setSearchOpen(false);
+    setAddError("");
+    try {
+      await api.addItem(symbol);
+      await reload();
+    } catch (err) {
+      setAddError(err instanceof Error ? err.message : "Failed to add");
+    }
+  }, [reload]);
+  const handleRemove = async (id) => {
+    await api.removeItem(id);
+    await reload();
+  };
+  const openCtxMenu = (e, item) => {
+    e.preventDefault();
+    setCtxMenu({ x: e.clientX, y: e.clientY, itemId: item.id, symbol: item.symbol });
+  };
+  const openGroupDialog = (itemId) => {
+    setCtxMenu(null);
+    setGroupName("");
+    setGroupDialog({ itemId });
+  };
+  const handleCreateGroup = async () => {
+    const name = groupName.trim();
+    if (!name || !groupDialog) return;
+    const group = await api.addGroup(name);
+    await api.moveItemToGroup(groupDialog.itemId, group.id);
+    setGroupDialog(null);
+    await reload();
+  };
+  const handleMoveToExisting = async (itemId, groupId) => {
+    setCtxMenu(null);
+    await api.moveItemToGroup(itemId, groupId);
+    await reload();
+  };
+  const handleUngroup = async (itemId) => {
+    setCtxMenu(null);
+    await api.moveItemToGroup(itemId, null);
+    await reload();
+  };
+  const handleDragStart = (e, itemId) => {
+    setDragItemId(itemId);
+    e.dataTransfer.effectAllowed = "move";
+  };
+  const handleDragOver = (e, targetId) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (targetId !== dragItemId) setDropTargetId(targetId);
+  };
+  const handleDrop = async (e, targetId) => {
+    e.preventDefault();
+    if (!dragItemId || dragItemId === targetId) return;
+    setDragItemId(null);
+    setDropTargetId(null);
+    const dragItem = items.find((i) => i.id === dragItemId);
+    const targetItem = items.find((i) => i.id === targetId);
+    if (!dragItem || !targetItem) return;
+    const sameGroup = dragItem.group_id === targetItem.group_id;
+    if (!sameGroup) {
+      try {
+        await api.moveItemToGroup(dragItem.id, targetItem.group_id);
+      } catch {
+        await reload();
+        return;
+      }
+      const updated = items.map(
+        (i) => i.id === dragItem.id ? { ...i, group_id: targetItem.group_id } : i
+      );
+      const targetGroup = updated.filter((i) => i.group_id === targetItem.group_id);
+      const fromIdx = targetGroup.findIndex((i) => i.id === dragItem.id);
+      const toIdx = targetGroup.findIndex((i) => i.id === targetId);
+      if (fromIdx !== -1 && toIdx !== -1 && fromIdx !== toIdx) {
+        const [moved] = targetGroup.splice(fromIdx, 1);
+        targetGroup.splice(toIdx, 0, moved);
+      }
+      const rest = updated.filter((i) => i.group_id !== targetItem.group_id);
+      const newItems = [...rest, ...targetGroup];
+      setItems(newItems);
+      try {
+        await api.reorderItems(newItems.map((i) => i.id));
+      } catch {
+        await reload();
+      }
+    } else {
+      const groupItems = items.filter((i) => i.group_id === dragItem.group_id);
+      const fromIdx = groupItems.findIndex((i) => i.id === dragItemId);
+      const toIdx = groupItems.findIndex((i) => i.id === targetId);
+      if (fromIdx === -1 || toIdx === -1) return;
+      const reordered = [...groupItems];
+      const [moved] = reordered.splice(fromIdx, 1);
+      reordered.splice(toIdx, 0, moved);
+      const rest = items.filter((i) => i.group_id !== dragItem.group_id);
+      const newItems = [...rest, ...reordered];
+      setItems(newItems);
+      try {
+        await api.reorderItems(newItems.map((i) => i.id));
+      } catch {
+        await reload();
+      }
+    }
+  };
+  const handleDragEnd = () => {
+    setDragItemId(null);
+    setDropTargetId(null);
+  };
+  const handleRemoveGroup = async (groupId) => {
+    await api.removeGroup(groupId);
+    await reload();
+  };
+  const toggleCollapse = (groupId) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      next.has(groupId) ? next.delete(groupId) : next.add(groupId);
+      return next;
+    });
+  };
+  const ungrouped = items.filter((i) => i.group_id === null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: drawerRef,
+      className: "wl-drawer",
+      style: {
+        width: drawerWidth,
+        "--wl-sym": `${colWidths.sym}px`,
+        "--wl-last": `${colWidths.last}px`,
+        "--wl-chg": `${colWidths.chg}px`,
+        "--wl-pct": `${colWidths.pct}px`,
+        "--wl-vol": `${colWidths.vol}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "wl-resize-handle", onMouseDown: onResizeMouseDown }),
+        /* @__PURE__ */ jsxs("div", { className: "wl-header", children: [
+          /* @__PURE__ */ jsxs("span", { className: "wl-header-title", children: [
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: [
+              /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "12", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
+              /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "9", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
+              /* @__PURE__ */ jsx("rect", { x: "2", y: "11", width: "10", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" })
+            ] }),
+            "Watchlist"
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "wl-close-btn", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "12", height: "12", stroke: "currentColor", strokeWidth: "1.8", children: [
+            /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "2", y2: "12" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "wl-add-row", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              readOnly: true,
+              className: "wl-add-input",
+              placeholder: "Add symbol  e.g. BINANCE:BTCUSDT",
+              onClick: () => setSearchOpen(true),
+              onFocus: () => setSearchOpen(true),
+              style: { cursor: "pointer" }
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { className: "wl-add-btn", onClick: () => setSearchOpen(true), title: "Add", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "12", height: "12", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx("line", { x1: "7", y1: "1", x2: "7", y2: "13" }),
+            /* @__PURE__ */ jsx("line", { x1: "1", y1: "7", x2: "13", y2: "7" })
+          ] }) })
+        ] }),
+        addError && /* @__PURE__ */ jsx("div", { className: "wl-add-error", children: addError }),
+        /* @__PURE__ */ jsxs("div", { className: "wl-col-headers", children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsxs("span", { className: "wl-col-symbol", children: [
+            "Symbol",
+            /* @__PURE__ */ jsx("div", { className: "wl-col-resize", onMouseDown: (e) => onColResizeMouseDown(e, "sym", "last") })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "wl-col-last", children: [
+            "Last",
+            /* @__PURE__ */ jsx("div", { className: "wl-col-resize", onMouseDown: (e) => onColResizeMouseDown(e, "last", "chg") })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "wl-col-chg", children: [
+            "Chg",
+            /* @__PURE__ */ jsx("div", { className: "wl-col-resize", onMouseDown: (e) => onColResizeMouseDown(e, "chg", "pct") })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "wl-col-pct", children: [
+            "Chg%",
+            /* @__PURE__ */ jsx("div", { className: "wl-col-resize", onMouseDown: (e) => onColResizeMouseDown(e, "pct", "vol") })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "wl-col-vol", children: "Vol" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "wl-list", children: [
+          loading && /* @__PURE__ */ jsx("div", { className: "wl-empty", children: "Loading\u2026" }),
+          groups.map((group) => {
+            const groupItems = items.filter((i) => i.group_id === group.id);
+            const isCollapsed = collapsed.has(group.id);
+            return /* @__PURE__ */ jsxs("div", { className: "wl-group", children: [
+              /* @__PURE__ */ jsxs("div", { className: "wl-group-header", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "wl-group-toggle",
+                    onClick: () => toggleCollapse(group.id),
+                    title: isCollapsed ? "Expand" : "Collapse",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        viewBox: "0 0 10 10",
+                        width: "8",
+                        height: "8",
+                        stroke: "currentColor",
+                        fill: "none",
+                        strokeWidth: "1.5",
+                        style: { transform: isCollapsed ? "rotate(-90deg)" : "none", transition: "transform 0.15s" },
+                        children: /* @__PURE__ */ jsx("polyline", { points: "2,3 5,7 8,3" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "wl-group-name", children: group.name }),
+                /* @__PURE__ */ jsx("span", { className: "wl-group-count", children: groupItems.length }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "wl-remove-btn wl-group-del",
+                    title: "Remove group (items become ungrouped)",
+                    onClick: () => handleRemoveGroup(group.id),
+                    children: "\u2715"
+                  }
+                )
+              ] }),
+              !isCollapsed && groupItems.map((item) => /* @__PURE__ */ jsx(
+                SymbolRow,
+                {
+                  item,
+                  quote: quotes.get(item.symbol),
+                  flash: liveDirs.get(item.symbol),
+                  dragOver: dropTargetId === item.id,
+                  highlighted: highlightedSymbol === item.symbol,
+                  ...logoMap.get(item.symbol) !== void 0 && { logoUrl: logoMap.get(item.symbol) },
+                  onSelect: () => onSelectSymbol(item.symbol),
+                  onRemove: () => handleRemove(item.id),
+                  onContextMenu: (e) => openCtxMenu(e, item),
+                  onDragStart: (e) => handleDragStart(e, item.id),
+                  onDragOver: (e) => handleDragOver(e, item.id),
+                  onDrop: (e) => handleDrop(e, item.id),
+                  onDragEnd: handleDragEnd
+                },
+                item.id
+              ))
+            ] }, group.id);
+          }),
+          ungrouped.length > 0 && groups.length > 0 && /* @__PURE__ */ jsx("div", { className: "wl-group-label-ungrouped", children: "Other" }),
+          ungrouped.map((item) => /* @__PURE__ */ jsx(
+            SymbolRow,
+            {
+              item,
+              quote: quotes.get(item.symbol),
+              flash: liveDirs.get(item.symbol),
+              dragOver: dropTargetId === item.id,
+              highlighted: highlightedSymbol === item.symbol,
+              ...logoMap.get(item.symbol) !== void 0 && { logoUrl: logoMap.get(item.symbol) },
+              onSelect: () => onSelectSymbol(item.symbol),
+              onRemove: () => handleRemove(item.id),
+              onContextMenu: (e) => openCtxMenu(e, item),
+              onDragStart: (e) => handleDragStart(e, item.id),
+              onDragOver: (e) => handleDragOver(e, item.id),
+              onDrop: (e) => handleDrop(e, item.id),
+              onDragEnd: handleDragEnd
+            },
+            item.id
+          )),
+          !loading && items.length === 0 && /* @__PURE__ */ jsxs("div", { className: "wl-empty", children: [
+            "No symbols yet.",
+            /* @__PURE__ */ jsx("br", {}),
+            "Type a symbol above and press Enter."
+          ] })
+        ] }),
+        ctxMenu && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: ctxRef,
+            className: "wl-ctx-menu",
+            style: { top: ctxMenu.y, left: ctxMenu.x },
+            children: [
+              groups.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "wl-ctx-section", children: "Move to group" }),
+                groups.map((g) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "wl-ctx-item",
+                    onClick: () => handleMoveToExisting(ctxMenu.itemId, g.id),
+                    children: g.name
+                  },
+                  g.id
+                )),
+                /* @__PURE__ */ jsx("div", { className: "wl-ctx-divider" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "wl-ctx-item",
+                  onClick: () => openGroupDialog(ctxMenu.itemId),
+                  children: "New group\u2026"
+                }
+              ),
+              items.find((i) => i.id === ctxMenu.itemId)?.group_id && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "wl-ctx-item",
+                  onClick: () => handleUngroup(ctxMenu.itemId),
+                  children: "Remove from group"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "wl-ctx-divider" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "wl-ctx-item wl-ctx-item--danger",
+                  onClick: () => {
+                    setCtxMenu(null);
+                    handleRemove(ctxMenu.itemId);
+                  },
+                  children: "Remove symbol"
+                }
+              )
+            ]
+          }
+        ),
+        groupDialog && /* @__PURE__ */ jsx("div", { className: "wl-dialog-backdrop", children: /* @__PURE__ */ jsxs("div", { className: "wl-dialog", children: [
+          /* @__PURE__ */ jsx("div", { className: "wl-dialog-title", children: "Add to group" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "wl-dialog-input",
+              placeholder: "Group name",
+              value: groupName,
+              onChange: (e) => setGroupName(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleCreateGroup();
+              },
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "wl-dialog-actions", children: [
+            /* @__PURE__ */ jsx("button", { className: "wl-dialog-cancel", onClick: () => setGroupDialog(null), children: "Cancel" }),
+            /* @__PURE__ */ jsx("button", { className: "wl-dialog-confirm", onClick: handleCreateGroup, disabled: !groupName.trim(), children: "Save" })
+          ] })
+        ] }) }),
+        searchOpen && /* @__PURE__ */ jsx(
+          SymbolSearchDialog,
+          {
+            current: "",
+            onSelect: handleAddFromSearch,
+            onClose: () => setSearchOpen(false),
+            symbolResolver
+          }
+        )
+      ]
+    }
+  );
+}
 function ChartWorkspace({
   // TabBar
   tabs,
@@ -29737,6 +30608,7 @@ function ChartWorkspace({
   // RightToolbar
   watchlistOpen,
   onToggleWatchlist,
+  builtinWatchlistDrawer,
   orderEntryOpen,
   onToggleOrderEntry,
   showOrderEntry,
@@ -29800,6 +30672,10 @@ function ChartWorkspace({
   const effOnToggleScriptDrawer = onToggleScriptDrawer ?? (() => setAutoScriptOpen((o) => !o));
   const effScriptDrawerOpen = onToggleScriptDrawer ? scriptDrawerOpen ?? false : autoScriptOpen;
   const closeScriptDrawer = onToggleScriptDrawer ?? (() => setAutoScriptOpen(false));
+  const [autoWatchlistOpen, setAutoWatchlistOpen] = React11.useState(false);
+  const effOnToggleWatchlist = onToggleWatchlist ?? (() => setAutoWatchlistOpen((o) => !o));
+  const effWatchlistOpen = onToggleWatchlist ? watchlistOpen ?? false : autoWatchlistOpen;
+  const closeWatchlist = onToggleWatchlist ?? (() => setAutoWatchlistOpen(false));
   const gate = (hostProp, licensed) => hostProp !== false && licensed;
   const effShowTradeButton = gate(showTradeButton, capabilities.orderEntry) && effOnToggleTradeDrawer !== void 0;
   const effShowOrderEntry = gate(showOrderEntry, capabilities.orderEntry) && effOnToggleOrderEntry !== void 0;
@@ -29972,13 +30848,22 @@ function ChartWorkspace({
               ...getAuthToken !== void 0 ? { getAuthToken } : {}
             }
           ),
+          builtinWatchlistDrawer !== false && effWatchlistOpen && capabilities.watchlists && /* @__PURE__ */ jsx(
+            WatchlistDrawer,
+            {
+              mode: "local",
+              onClose: closeWatchlist,
+              onSelectSymbol: onSymbolChange,
+              symbolResolver
+            }
+          ),
           leftDrawers,
           drawers,
           /* @__PURE__ */ jsx(
             RightToolbar,
             {
-              watchlistOpen,
-              onToggleWatchlist,
+              watchlistOpen: effWatchlistOpen,
+              onToggleWatchlist: effOnToggleWatchlist,
               orderEntryOpen: effOrderEntryOpen,
               onToggleOrderEntry: effOnToggleOrderEntry ?? (() => {
               }),