hypervibes 0.0.0-stage → 0.4.0

package/.build/server/assets/_authenticated.agents._agentId.chart-BIA8wy73.js

@@ -0,0 +1,2644 @@
+import { r as lineEnds, t as createIndicatorRenderer } from "./indicator-renderer-B2muPS-8.js";
+import { t as agentChatQueryOptions } from "./agent-queries-Cmx8RiUx.js";
+import { r as modelChoicesQueryOptions } from "./provider-queries-BaZWLw8J.js";
+import { n as defaultChartOverlays } from "./trading-contracts-zWq1Hxnb.js";
+import { c as chartIntervals, d as mergeChartCandles, f as randomUuid, i as newDrawing, l as intervalMillis, n as drawing, r as drawingKinds, s as visibleDrawing, u as isChartInterval } from "./contracts-CG-nZuYJ.js";
+import { a as changeChartLayout, i as chartLayoutsQueryOptions, n as chartHistoryQueryOptions, o as createChartLayout, r as chartInstrumentsQueryOptions, s as deleteChartLayout, t as chartFillsQueryOptions } from "./chart-queries-Bc3AfsEb.js";
+import { t as Route } from "./_authenticated.agents._agentId.chart-D4aj8Qy9.js";
+import { i as indicatorQueryOptions, r as indicatorListQueryOptions, t as chartIndicatorQueryOptions } from "./indicator-queries-4dY1-LXx.js";
+import { i as formatMoneyText, n as compareDecimals } from "./decimal-BthtZ77w.js";
+import { n as configButton, r as configInput, t as ConfigDialog } from "./config-dialog-9gSAjwwT.js";
+import { i as useAgentEventsStatus, n as useAgentChartEvents, r as useAgentEvent } from "./agent-events-DK9Yz5__.js";
+import { t as AgentChatPage } from "./agent-chat-page-DChiz8KQ.js";
+import { n as SingleInstrumentPicker } from "./instrument-picker-CRroLwVq.js";
+import { t as IndicatorInputFields } from "./indicator-input-fields-bzuhIh6t.js";
+import { useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CandlestickSeries, ColorType, HistogramSeries, LineStyle, createChart, createSeriesMarkers } from "lightweight-charts";
+import { useInfiniteQuery, useMutation, useQueries, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { createPortal } from "react-dom";
+//#region src/components/chart-drawings.tsx
+function ChartDrawings({ document, revision, projection, tool, selected, disabled, svgRef, onSelect, onSave, onDrawn, onEdit }) {
+	const [preparationError, setPreparationError] = useState("");
+	const [anchor, setAnchor] = useState(null);
+	const [preview, setPreview] = useState(null);
+	const [draft, setDraft] = useState(null);
+	const drag = useRef(null);
+	const committedRevision = draft?.revision;
+	const blocked = disabled || committedRevision != null && revision < committedRevision;
+	useEffect(() => {
+		if (committedRevision != null && revision >= committedRevision) setDraft((current) => current?.revision === committedRevision ? null : current);
+	}, [revision, committedRevision]);
+	const screen = (point) => {
+		const x = projection.x(point.time), y = projection.y(point.price);
+		return x === null || y === null ? null : {
+			x,
+			y
+		};
+	};
+	function location(event) {
+		const bounds = svgRef.current.getBoundingClientRect();
+		return projection.point(Math.max(0, Math.min(projection.width, event.clientX - bounds.left)), Math.max(0, Math.min(projection.height, event.clientY - bounds.top)), document.magnet !== (event.ctrlKey || event.metaKey));
+	}
+	function start(event, drawing, handle) {
+		if (tool !== "select" || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (blocked || drag.current) return;
+		onSelect(drawing.id);
+		if (drawing.locked) return;
+		const point = location(event);
+		if (!point) return;
+		svgRef.current.setPointerCapture(event.pointerId);
+		drag.current = {
+			drawing,
+			handle,
+			start: point,
+			draft: null,
+			pointerId: event.pointerId
+		};
+	}
+	function move(event) {
+		if (drag.current && drag.current.pointerId !== event.pointerId) return;
+		const point = location(event);
+		if (!point) return;
+		if (anchor) setPreview(point);
+		const moving = drag.current;
+		if (!moving) return;
+		const points = moving.drawing.points.map((old, index) => moving.handle === index ? point : moving.handle !== null ? old : {
+			time: Math.max(0, old.time + point.time - moving.start.time),
+			price: Math.max(1e-12, old.price + point.price - moving.start.price)
+		});
+		moving.draft = {
+			...moving.drawing,
+			points
+		};
+		setDraft({
+			drawing: moving.draft,
+			revision: null
+		});
+	}
+	async function persist(drawing) {
+		let savedRevision;
+		try {
+			savedRevision = await onSave(drawing);
+		} catch {}
+		setDraft((current) => current?.drawing !== drawing ? current : savedRevision === void 0 ? null : {
+			drawing,
+			revision: savedRevision
+		});
+	}
+	function finish(event) {
+		const moving = drag.current;
+		if (!moving || moving.pointerId !== event.pointerId) return;
+		drag.current = null;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		if (moving.draft) persist(moving.draft);
+	}
+	function cancel(event) {
+		if (!drag.current || drag.current.pointerId !== event.pointerId) return;
+		drag.current = null;
+		setDraft(null);
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+	}
+	function place(event) {
+		if (blocked || event.button !== 0) return;
+		const point = location(event);
+		if (!point) return;
+		if (tool === "select") {
+			onSelect("");
+			return;
+		}
+		const single = [
+			"horizontal",
+			"horizontal-ray",
+			"vertical",
+			"text"
+		].includes(tool);
+		if (!single && !anchor) {
+			setAnchor(point);
+			setPreview(point);
+			return;
+		}
+		try {
+			const drawing = newDrawing(tool, document.coin, single ? [point] : [anchor, point]);
+			setPreparationError("");
+			if (["text", "callout"].includes(tool)) drawing.text = "Note";
+			onSave(drawing);
+			onSelect(drawing.id);
+			setAnchor(null);
+			setPreview(null);
+			onDrawn();
+		} catch (cause) {
+			setPreparationError(cause instanceof Error ? cause.message : "Unable to prepare the drawing");
+		}
+	}
+	const previewDrawing = draft && (draft.revision === null || revision < draft.revision) ? draft.drawing : null;
+	const drawings = document.drawings.filter((d) => visibleDrawing(d, document)).map((d) => previewDrawing?.id === d.id ? previewDrawing : d);
+	if (anchor && preview && tool !== "select") drawings.push({
+		...newDrawing(tool, document.coin, [anchor, preview], "preview"),
+		color: "#71717a"
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("svg", {
+		ref: svgRef,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: projection.width,
+		height: projection.height,
+		viewBox: `0 0 ${projection.width} ${projection.height}`,
+		"aria-label": "Chart drawings",
+		className: "absolute left-0 top-0 z-10 overflow-hidden",
+		style: {
+			pointerEvents: tool === "select" || blocked ? "none" : "auto",
+			cursor: tool === "select" ? "default" : "crosshair",
+			touchAction: "none"
+		},
+		onPointerDown: place,
+		onPointerMove: move,
+		onPointerUp: finish,
+		onPointerCancel: cancel,
+		onLostPointerCapture: cancel,
+		children: [tool !== "select" && !blocked && /* @__PURE__ */ jsx("rect", {
+			"data-drawing-surface": "true",
+			width: projection.width,
+			height: projection.height,
+			fill: "transparent",
+			style: { pointerEvents: "all" }
+		}), drawings.map((drawing) => {
+			const a = screen(drawing.points[0]), b = screen(drawing.points[1] ?? drawing.points[0]);
+			if (!a || !b) return null;
+			const [from, to] = lineEnds(drawing.kind, a, b, projection.width);
+			const stroke = {
+				stroke: drawing.color,
+				strokeWidth: drawing.width,
+				strokeDasharray: drawing.dashed ? "6 4" : void 0,
+				fill: "none"
+			};
+			const path = drawing.kind === "vertical" ? `M ${a.x} 0 L ${a.x} ${projection.height}` : `M ${from.x} ${from.y} L ${to.x} ${to.y}`;
+			const rectangle = drawing.kind === "rectangle";
+			const text = drawing.kind === "text";
+			const labelPoint = drawing.kind === "callout" ? b : a;
+			const active = selected === drawing.id;
+			return /* @__PURE__ */ jsxs("g", {
+				"aria-label": drawing.name,
+				onDoubleClick: (event) => {
+					if (tool === "select" && !drawing.locked && !blocked) {
+						event.stopPropagation();
+						onSelect(drawing.id);
+						onEdit();
+					}
+				},
+				children: [
+					/* @__PURE__ */ jsxs("title", { children: [
+						drawing.name,
+						drawing.locked ? " (locked)" : "",
+						" · ",
+						drawing.author === "agent" ? "Agent" : "You"
+					] }),
+					rectangle ? /* @__PURE__ */ jsx("rect", {
+						x: Math.min(a.x, b.x),
+						y: Math.min(a.y, b.y),
+						width: Math.abs(b.x - a.x),
+						height: Math.abs(b.y - a.y),
+						...stroke,
+						fill: drawing.color,
+						fillOpacity: drawing.fillOpacity
+					}) : !text ? /* @__PURE__ */ jsx("path", {
+						d: path,
+						...stroke
+					}) : null,
+					drawing.kind === "arrow" && /* @__PURE__ */ jsx("path", {
+						d: `M ${b.x - 12 * Math.cos(Math.atan2(b.y - a.y, b.x - a.x) - .45)} ${b.y - 12 * Math.sin(Math.atan2(b.y - a.y, b.x - a.x) - .45)} L ${b.x} ${b.y} L ${b.x - 12 * Math.cos(Math.atan2(b.y - a.y, b.x - a.x) + .45)} ${b.y - 12 * Math.sin(Math.atan2(b.y - a.y, b.x - a.x) + .45)}`,
+						...stroke
+					}),
+					(drawing.kind === "horizontal" || drawing.kind === "horizontal-ray") && /* @__PURE__ */ jsx("text", {
+						x: projection.width - 6,
+						y: a.y - 5,
+						textAnchor: "end",
+						fill: drawing.color,
+						fontSize: "11",
+						fontFamily: "sans-serif",
+						stroke: "#0d0d10",
+						strokeWidth: "3",
+						paintOrder: "stroke",
+						children: drawing.points[0].price.toLocaleString("en", { maximumSignificantDigits: 10 })
+					}),
+					drawing.text && /* @__PURE__ */ jsx("text", {
+						x: labelPoint.x + 6,
+						y: labelPoint.y - 8,
+						fill: drawing.color,
+						fontSize: "13",
+						fontFamily: "sans-serif",
+						stroke: "#0d0d10",
+						strokeWidth: "3",
+						paintOrder: "stroke",
+						children: drawing.text.split("\n").map((line, i) => /* @__PURE__ */ jsx("tspan", {
+							x: labelPoint.x + 6,
+							dy: i ? "1.2em" : 0,
+							children: line
+						}, i))
+					}),
+					tool === "select" && (rectangle ? /* @__PURE__ */ jsx("rect", {
+						x: Math.min(a.x, b.x),
+						y: Math.min(a.y, b.y),
+						width: Math.abs(b.x - a.x),
+						height: Math.abs(b.y - a.y),
+						fill: "transparent",
+						stroke: "transparent",
+						strokeWidth: "12",
+						style: {
+							pointerEvents: "all",
+							cursor: blocked ? "progress" : drawing.locked ? "pointer" : "move"
+						},
+						onPointerDown: (event) => start(event, drawing, null)
+					}) : text ? /* @__PURE__ */ jsx("rect", {
+						x: a.x,
+						y: a.y - 24,
+						width: Math.max(60, drawing.text.length * 8),
+						height: "30",
+						fill: "transparent",
+						style: {
+							pointerEvents: "all",
+							cursor: blocked ? "progress" : drawing.locked ? "pointer" : "move"
+						},
+						onPointerDown: (event) => start(event, drawing, null)
+					}) : /* @__PURE__ */ jsx("path", {
+						d: path,
+						fill: "none",
+						stroke: "transparent",
+						strokeWidth: "14",
+						style: {
+							pointerEvents: "stroke",
+							cursor: blocked ? "progress" : drawing.locked ? "pointer" : "move"
+						},
+						onPointerDown: (event) => start(event, drawing, null)
+					})),
+					active && drawing.points.map((p, index) => {
+						const position = screen(p);
+						return position ? /* @__PURE__ */ jsx("circle", {
+							"data-handle": "true",
+							cx: position.x,
+							cy: position.y,
+							r: "5",
+							fill: "#0d0d10",
+							stroke: drawing.color,
+							strokeWidth: "2",
+							style: {
+								pointerEvents: tool === "select" ? "all" : "none",
+								cursor: blocked ? "progress" : drawing.locked ? "not-allowed" : "grab"
+							},
+							onPointerDown: (event) => start(event, drawing, index)
+						}, index) : null;
+					})
+				]
+			}, drawing.id);
+		})]
+	}), preparationError && /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		className: "absolute left-2 top-2 z-20 text-sm text-red-300",
+		children: preparationError
+	})] });
+}
+//#endregion
+//#region src/charts/trading-overlays.ts
+var buyColor = "#34d399";
+var sellColor = "#f87171";
+var displayPrice = (value) => {
+	const price = Number(value);
+	return Number.isFinite(price) && price > 0 ? price : null;
+};
+function accountSectionFresh(snapshot, section, interrupted) {
+	return !interrupted && snapshot?.live?.status === "connected" && snapshot.live.sections[section].fresh;
+}
+/** Numbers are used only for chart coordinates; labels retain exchange decimals. */
+function tradeMarkers(fills, candles, step) {
+	const bars = new Set(candles.map((candle) => candle.time));
+	return fills.flatMap((fill) => {
+		const time = Math.floor(fill.time / 1e3 / step) * step, price = displayPrice(fill.price);
+		if (!bars.has(time) || price === null) return [];
+		const buy = fill.side === "Buy";
+		return [{
+			id: fill.id,
+			time,
+			price,
+			position: buy ? "atPriceBottom" : "atPriceTop",
+			shape: buy ? "arrowUp" : "arrowDown",
+			color: buy ? buyColor : sellColor
+		}];
+	}).sort((a, b) => a.time - b.time || String(a.id).localeCompare(String(b.id)));
+}
+function accountPriceLines(coin, snapshot, visibility, interrupted) {
+	const result = /* @__PURE__ */ new Map();
+	const position = snapshot?.positions?.find((p) => p.coin === coin);
+	const size = position?.size.replace(/^-/, "");
+	const sign = position ? compareDecimals(position.size, "0") : null;
+	if (visibility.position && position && sign !== null && sign !== 0) {
+		const price = displayPrice(position.entryPrice);
+		const stale = !accountSectionFresh(snapshot, "perps", interrupted);
+		if (price !== null) result.set("position", {
+			price,
+			color: stale ? "#a1a1aa" : sign > 0 ? buyColor : sellColor,
+			lineWidth: 2,
+			lineStyle: LineStyle.Solid,
+			axisLabelVisible: true,
+			title: `${stale ? "STALE · " : ""}${sign > 0 ? "Long" : "Short"} · ${size} ${coin} · P&L ${compareDecimals(position.unrealizedPnl, "0") === 1 ? "+" : ""}${formatMoneyText(position.unrealizedPnl)} USDC`
+		});
+	}
+	const orders = new Map((snapshot?.orders ?? []).map((order) => [order.id, {
+		order,
+		pending: false
+	}]));
+	const children = (order) => {
+		for (const child of order.children ?? []) {
+			if (!orders.has(child.id)) orders.set(child.id, {
+				order: child,
+				pending: true
+			});
+			children(child);
+		}
+	};
+	if (visibility.orders) for (const order of snapshot?.orders ?? []) children(order);
+	if (visibility.orders) for (const { order, pending } of orders.values()) {
+		if (order.coin !== coin) continue;
+		const price = displayPrice(order.triggerPrice ?? order.price);
+		if (price === null) continue;
+		const stale = !accountSectionFresh(snapshot, "orders", interrupted);
+		const quantity = order.positionTpsl ? "Entire position" : `${order.size} ${coin}`;
+		result.set(`order:${order.id}`, {
+			price,
+			color: stale ? "#a1a1aa" : order.side === "Buy" ? buyColor : sellColor,
+			lineWidth: 1,
+			lineStyle: order.triggerPrice === void 0 ? LineStyle.Dashed : LineStyle.Dotted,
+			axisLabelVisible: true,
+			title: `${stale ? "STALE · " : ""}${pending ? "Pending · " : ""}${order.side} ${order.type}${order.triggerPrice === void 0 ? "" : " trigger"} · ${quantity}`
+		});
+	}
+	return result;
+}
+/** Owned by the chart lifecycle: detach primitives before removing the chart. */
+function createTradingOverlays(chart, price, hover) {
+	const plugin = createSeriesMarkers(price, [], { autoScale: false });
+	const lines = /* @__PURE__ */ new Map();
+	let fillsById = /* @__PURE__ */ new Map();
+	const crosshair = (event) => {
+		const id = event.hoveredInfo?.objectId;
+		const fill = typeof id === "string" ? fillsById.get(id) : void 0;
+		hover(fill && event.point ? {
+			fill,
+			x: event.point.x,
+			y: event.point.y
+		} : null);
+	};
+	chart.subscribeCrosshairMove(crosshair);
+	return {
+		trades(fills, candles, step) {
+			fillsById = new Map(fills.map((fill) => [fill.id, fill]));
+			plugin.setMarkers(tradeMarkers(fills, candles, step));
+			hover(null);
+		},
+		account(coin, snapshot, visibility, interrupted) {
+			const next = accountPriceLines(coin, snapshot, visibility, interrupted);
+			for (const [id, line] of lines) if (!next.has(id)) {
+				price.removePriceLine(line);
+				lines.delete(id);
+			}
+			for (const [id, options] of next) {
+				const line = lines.get(id);
+				if (line) line.applyOptions(options);
+				else lines.set(id, price.createPriceLine(options));
+			}
+		},
+		close() {
+			chart.unsubscribeCrosshairMove(crosshair);
+			plugin.detach();
+			for (const line of lines.values()) price.removePriceLine(line);
+			lines.clear();
+		}
+	};
+}
+//#endregion
+//#region src/components/use-chart-account.ts
+var noFills = [];
+function useChartAccount(id, coin, from, to, visibility) {
+	const [account, setAccount] = useState({
+		id,
+		snapshot: null,
+		interrupted: false
+	});
+	const [retry, setRetry] = useState(0);
+	const enabled = visibility.position || visibility.orders;
+	const { interrupted, streamErrors, reconnect } = useAgentEventsStatus();
+	useAgentEvent("dashboard", (event) => {
+		setAccount({
+			id,
+			snapshot: JSON.parse(event.data),
+			interrupted: false
+		});
+	}, enabled);
+	useEffect(() => {
+		setAccount({
+			id,
+			snapshot: null,
+			interrupted: false
+		});
+	}, [
+		id,
+		enabled,
+		retry
+	]);
+	useEffect(() => {
+		if (!enabled) return;
+		if (streamErrors["dashboard"] || interrupted) setAccount((current) => current.interrupted ? current : {
+			...current,
+			interrupted: true
+		});
+	}, [
+		enabled,
+		interrupted,
+		streamErrors
+	]);
+	const trades = useInfiniteQuery({
+		...chartFillsQueryOptions(id, coin, from, to),
+		enabled: visibility.trades && to > from
+	});
+	const { hasNextPage, isFetching, isError, fetchNextPage } = trades;
+	useEffect(() => {
+		if (visibility.trades && hasNextPage && !isFetching && !isError) fetchNextPage();
+	}, [
+		visibility.trades,
+		hasNextPage,
+		isFetching,
+		isError,
+		fetchNextPage
+	]);
+	const fills = useMemo(() => {
+		if (!trades.data) return noFills;
+		const byId = /* @__PURE__ */ new Map();
+		for (const page of trades.data.pages) for (const fill of page.fills) byId.set(fill.id, fill);
+		return [...byId.values()];
+	}, [trades.data]);
+	const snapshot = account.id === id ? account.snapshot : null;
+	const messages = [];
+	if (enabled) if (!snapshot) messages.push(account.interrupted ? "Account unavailable · Retry to reconnect" : "Connecting account…");
+	else {
+		if (visibility.position && !accountSectionFresh(snapshot, "perps", account.interrupted)) messages.push("Position data stale");
+		if (visibility.orders && !accountSectionFresh(snapshot, "orders", account.interrupted)) messages.push("Order data stale");
+	}
+	if (visibility.trades && to > from) {
+		if (isError) messages.push("Trade history unavailable · displayed markers may be stale");
+		else if (trades.isPending || hasNextPage) messages.push("Loading trade history…");
+		const page = trades.data?.pages[0];
+		if (page && (!page.sync?.updatedAt || page.sync.error)) messages.push("Trade journal syncing or unavailable · history may be incomplete");
+		if (page?.historyLimited) messages.push("Exchange history is limited · showing available journal fills");
+	}
+	return {
+		snapshot,
+		interrupted: account.interrupted,
+		fills,
+		messages,
+		canRetry: enabled && account.interrupted || visibility.trades && isError,
+		retry: () => {
+			setRetry((n) => n + 1);
+			reconnect();
+			if (visibility.trades) trades.refetch();
+		}
+	};
+}
+//#endregion
+//#region src/components/use-chart-indicators.ts
+function useChartIndicators(agentId, layout) {
+	const width = intervalMillis[layout.document.interval];
+	const [clock, setClock] = useState(() => Date.now());
+	useEffect(() => {
+		let timer;
+		const next = () => {
+			setClock(Date.now());
+			timer = setTimeout(next, width - Date.now() % width + 1e3);
+		};
+		next();
+		return () => clearTimeout(timer);
+	}, [width]);
+	const end = Math.floor(clock / width) * width;
+	const query = useQuery({
+		...chartIndicatorQueryOptions(agentId, layout.id, layout.revision, layout.document.coin, layout.document.interval, end),
+		enabled: layout.document.indicators.some((i) => !i.hidden)
+	});
+	const identity = JSON.stringify([
+		layout.id,
+		layout.document.coin,
+		layout.document.interval,
+		layout.document.indicators
+	]);
+	const previous = useRef(void 0);
+	useEffect(() => {
+		if (query.data) previous.current = {
+			identity,
+			data: query.data
+		};
+	}, [identity, query.data]);
+	const data = query.data ?? (previous.current?.identity === identity ? previous.current.data : void 0);
+	return {
+		data,
+		status: query.isError ? "error" : query.isFetching || data?.end !== end ? data ? "stale" : "loading" : "current",
+		error: query.error?.message,
+		retry: () => {
+			query.refetch();
+		}
+	};
+}
+//#endregion
+//#region src/components/market-chart.tsx
+function MarketChart({ id, layout, tool, selected, disabled, statusHost, overlayVisibility = defaultChartOverlays, onSelect, onSave, onDrawn, onEdit, ref }) {
+	const client = useQueryClient();
+	const indicatorData = useChartIndicators(id, layout);
+	const [generated, setGenerated] = useState(null);
+	const host = useRef(null), svg = useRef(null), active = useRef(null);
+	const [status, setStatus] = useState("connecting");
+	const [error, setError] = useState("");
+	const [historyStatus, setHistoryStatus] = useState("Loading candles…");
+	const [retry, setRetry] = useState(0), [frame, setFrame] = useState(0);
+	const [hover, setHover] = useState(null);
+	const { coin, interval } = layout.document;
+	const { interrupted: socketInterrupted, streamErrors, reconnect } = useAgentEventsStatus();
+	const chartStreamError = streamErrors["chart"];
+	const onSnapshot = useRef(() => {});
+	useAgentChartEvents(coin, interval, (event) => {
+		onSnapshot.current(JSON.parse(event.data));
+	});
+	useEffect(() => {
+		if (chartStreamError) {
+			const current = active.current;
+			if (current) current.status = "reconnecting";
+			setStatus("reconnecting");
+		} else if (socketInterrupted) {
+			const current = active.current;
+			if (current) current.status = "reconnecting";
+			setStatus("reconnecting");
+		}
+	}, [chartStreamError, socketInterrupted]);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		let disposed = false, loading = false, initialized = false, hasMore = true, historyFailed = false, raf = 0;
+		const chart = createChart(element, {
+			autoSize: true,
+			layout: {
+				background: {
+					type: ColorType.Solid,
+					color: "#0d0d10"
+				},
+				textColor: "#a1a1aa",
+				attributionLogo: true
+			},
+			grid: {
+				vertLines: { color: "#1c1c22" },
+				horzLines: { color: "#1c1c22" }
+			},
+			rightPriceScale: { borderColor: "#27272a" },
+			timeScale: {
+				timeVisible: true,
+				secondsVisible: false,
+				borderColor: "#27272a"
+			}
+		});
+		const price = chart.addSeries(CandlestickSeries, {
+			upColor: "#34d399",
+			downColor: "#f87171",
+			borderVisible: false,
+			wickUpColor: "#34d399",
+			wickDownColor: "#f87171"
+		});
+		price.priceScale().applyOptions({ scaleMargins: {
+			top: .06,
+			bottom: .25
+		} });
+		const volume = chart.addSeries(HistogramSeries, {
+			priceFormat: { type: "volume" },
+			priceScaleId: "volume"
+		});
+		volume.priceScale().applyOptions({
+			scaleMargins: {
+				top: .8,
+				bottom: 0
+			},
+			visible: false
+		});
+		const overlays = createTradingOverlays(chart, price, setHover);
+		const indicators = createIndicatorRenderer(chart, price);
+		const state = {
+			chart,
+			price,
+			candles: [],
+			status: "connecting",
+			overlays,
+			indicators,
+			evidence: []
+		};
+		const generatedHover = (event) => {
+			const id = event.hoveredInfo?.objectId;
+			const text = typeof id === "string" ? indicators.describe(id) : void 0;
+			setGenerated(typeof id === "string" && text !== void 0 ? {
+				id,
+				text
+			} : null);
+		};
+		chart.subscribeCrosshairMove(generatedHover);
+		active.current = state;
+		const redraw = () => {
+			if (raf || disposed) return;
+			raf = requestAnimationFrame(() => {
+				raf = 0;
+				if (!disposed) setFrame((n) => n + 1);
+			});
+		};
+		const draw = () => {
+			const close = state.candles.at(-1)?.close;
+			if (close && close > 0) {
+				const precision = Math.min(12, Math.max(2, 5 - Math.floor(Math.log10(close))));
+				price.applyOptions({ priceFormat: {
+					type: "price",
+					precision,
+					minMove: 10 ** -precision
+				} });
+			}
+			price.setData(state.candles.map((c) => ({
+				...c,
+				time: c.time
+			})));
+			volume.setData(state.candles.map((c) => ({
+				time: c.time,
+				value: c.volume,
+				color: c.close >= c.open ? "#34d39960" : "#f8717160"
+			})));
+			redraw();
+		};
+		const load = async (before) => {
+			if (disposed || loading || !hasMore) return;
+			loading = true;
+			setHistoryStatus("Loading candles…");
+			try {
+				const result = await client.fetchQuery(chartHistoryQueryOptions(id, coin, interval, before));
+				if (disposed) return;
+				const range = chart.timeScale().getVisibleLogicalRange(), oldest = state.candles[0]?.time;
+				state.candles = mergeChartCandles(result.candles, state.candles);
+				const added = oldest === void 0 ? 0 : state.candles.filter((c) => c.time < oldest).length;
+				hasMore = result.hasMore && (before === void 0 || added > 0);
+				draw();
+				if (!initialized && state.candles.length) chart.timeScale().setVisibleLogicalRange({
+					from: Math.max(0, state.candles.length - 120),
+					to: state.candles.length + 3
+				});
+				else if (range && added) chart.timeScale().setVisibleLogicalRange({
+					from: range.from + added,
+					to: range.to + added
+				});
+				initialized = true;
+				historyFailed = false;
+				setHistoryStatus(hasMore ? "" : "No older candles available from Hyperliquid.");
+			} catch (failure) {
+				if (!disposed) {
+					historyFailed = true;
+					setError(failure instanceof Error ? failure.message : "Candle history is unavailable.");
+					setHistoryStatus("History unavailable. Retry to reload.");
+				}
+			} finally {
+				loading = false;
+			}
+		};
+		const onRange = (range) => {
+			redraw();
+			if (range && range.from < 50 && initialized && !historyFailed && state.candles.length) load(state.candles[0].time * 1e3);
+		};
+		chart.timeScale().subscribeVisibleLogicalRangeChange(onRange);
+		chart.timeScale().subscribeSizeChange(redraw);
+		chart.subscribeCrosshairMove(redraw);
+		element.addEventListener("pointermove", redraw, { passive: true });
+		element.addEventListener("wheel", redraw, { passive: true });
+		onSnapshot.current = (snapshot) => {
+			if (disposed) return;
+			state.status = snapshot.status;
+			setStatus(snapshot.status);
+			const previousLength = state.candles.length;
+			state.candles = mergeChartCandles(state.candles, snapshot.candles);
+			if (!initialized || state.candles.length !== previousLength) draw();
+			else {
+				for (const c of snapshot.candles) {
+					price.update({
+						...c,
+						time: c.time
+					}, true);
+					volume.update({
+						time: c.time,
+						value: c.volume,
+						color: c.close >= c.open ? "#34d39960" : "#f8717160"
+					}, true);
+				}
+				redraw();
+			}
+		};
+		setError("");
+		load();
+		return () => {
+			disposed = true;
+			active.current = null;
+			onSnapshot.current = () => {};
+			cancelAnimationFrame(raf);
+			element.removeEventListener("pointermove", redraw);
+			element.removeEventListener("wheel", redraw);
+			chart.timeScale().unsubscribeVisibleLogicalRangeChange(onRange);
+			chart.timeScale().unsubscribeSizeChange(redraw);
+			chart.unsubscribeCrosshairMove(redraw);
+			chart.unsubscribeCrosshairMove(generatedHover);
+			indicators.close();
+			overlays.close();
+			chart.remove();
+		};
+	}, [
+		client,
+		id,
+		coin,
+		interval,
+		retry
+	]);
+	const state = active.current;
+	const candles = state?.candles;
+	const step = intervalMillis[interval] / 1e3;
+	const account = useChartAccount(id, coin, (candles?.[0]?.time ?? 0) * 1e3, candles?.length ? (candles.at(-1).time + step) * 1e3 : 0, overlayVisibility);
+	useEffect(() => {
+		if (state && state === active.current && candles) state.overlays.trades(overlayVisibility.trades ? account.fills : [], candles, step);
+	}, [
+		state,
+		candles,
+		step,
+		account.fills,
+		overlayVisibility.trades
+	]);
+	useEffect(() => {
+		if (state && state === active.current) state.overlays.account(coin, account.snapshot, overlayVisibility, account.interrupted);
+	}, [
+		state,
+		coin,
+		account.snapshot,
+		account.interrupted,
+		overlayVisibility
+	]);
+	useEffect(() => {
+		if (!state || state !== active.current || !candles?.length) return;
+		const configurations = layout.document.indicators;
+		for (const evidence of state.evidence) if (!configurations.some((i) => i.id === evidence.configuration.id && !i.hidden)) state.indicators.remove(evidence.configuration.id);
+		state.evidence = configurations.filter((i) => !i.hidden).map((configuration) => {
+			const item = indicatorData.data?.instances.find((item) => item.instanceId === configuration.id);
+			if (item?.result) try {
+				state.indicators.apply(configuration, item.result, candles);
+			} catch (error) {
+				state.indicators.remove(configuration.id);
+				return {
+					configuration,
+					status: "error",
+					error: error instanceof Error ? error.message : "Unable to render indicator"
+				};
+			}
+			else state.indicators.remove(configuration.id);
+			return {
+				configuration,
+				result: item?.result,
+				status: item?.error ? "error" : indicatorData.status,
+				error: item?.error ?? indicatorData.error
+			};
+		});
+	}, [
+		state,
+		candles,
+		layout.document.indicators,
+		indicatorData.data,
+		indicatorData.status,
+		indicatorData.error
+	]);
+	const projection = state ? projectChart(state, intervalMillis[interval] / 1e3) : null;
+	const handle = { capture: async (frozenLayout, selectedDrawingId, includeImage) => {
+		const current = active.current;
+		if (!current?.candles.length) throw new Error("Wait for chart candles before sending chart context.");
+		const range = current.chart.timeScale().getVisibleLogicalRange();
+		if (!range) throw new Error("Chart viewport is not ready.");
+		const step = intervalMillis[frozenLayout.document.interval] / 1e3;
+		const from = timeAt(current.candles, range.from, step), to = timeAt(current.candles, range.to, step);
+		const visible = current.candles.filter((c) => c.time >= from && c.time <= to);
+		if (visible.length > 1500) throw new Error("Zoom in to at most 1,500 visible candles before sending chart context.");
+		const capture = {
+			layoutId: frozenLayout.id,
+			revision: frozenLayout.revision,
+			capturedAt: Date.now(),
+			status: current.status,
+			range: {
+				from: Math.max(0, from),
+				to
+			},
+			candles: visible,
+			indicators: current.evidence.map(({ configuration, result, status, error }) => ({
+				instanceId: configuration.id,
+				indicatorId: configuration.indicatorId,
+				configuration,
+				status,
+				...error ? { error: error.slice(0, 1e3) } : {},
+				...result ? { result: {
+					version: result.version,
+					sourceHash: result.sourceHash,
+					engine: result.engine,
+					wrapperVersion: result.wrapperVersion,
+					resultHash: result.resultHash,
+					resolvedInputs: result.resolvedInputs,
+					inputSchemaHash: result.inputSchemaHash,
+					computedAt: result.computedAt,
+					end: result.end,
+					dataset: result.dataset,
+					coverage: result.coverage,
+					sampleScope: "partial-visible",
+					sample: result.values.filter((p) => p.time >= from && p.time <= to).slice(-20),
+					objects: [...result.markers.filter((m) => m.displayTime >= from && m.displayTime <= to).map((m) => ({
+						id: m.id,
+						kind: m.kind,
+						time: m.time,
+						text: m.text ?? m.character
+					})), ...result.drawings.map((d) => ({
+						id: d.id,
+						kind: d.kind,
+						time: d.kind === "label" ? d.at.time : d.from.time,
+						text: d.kind === "line" ? void 0 : d.text
+					})).filter((d) => d.time >= from && d.time <= to)].slice(-20)
+				} } : {}
+			})),
+			...generated ? { selectedGeneratedObjectId: generated.id } : {},
+			...selectedDrawingId ? { selectedDrawingId } : {}
+		};
+		if (includeImage) capture.image = await screenshot(current.chart.takeScreenshot(), svg.current);
+		if (new TextEncoder().encode(JSON.stringify(capture)).byteLength > 9e5) throw new Error("Chart context is too large. Zoom in or disable Include chart image.");
+		return capture;
+	} };
+	useEffect(() => {
+		if (typeof ref === "function") {
+			ref(handle);
+			return () => {
+				ref(null);
+			};
+		}
+		if (ref) {
+			ref.current = handle;
+			return () => {
+				ref.current = null;
+			};
+		}
+	});
+	const indicatorMessages = layout.document.indicators.some((i) => !i.hidden) ? [
+		indicatorData.status !== "current" ? `Indicators: ${indicatorData.status === "stale" ? "waiting for closed candle" : indicatorData.status}` : "",
+		indicatorData.error,
+		...indicatorData.data?.instances.flatMap((i) => i.error ? [i.error] : []) ?? []
+	].filter((message) => Boolean(message)) : [];
+	const statusMessages = [
+		status === "reconnecting" ? "Reconnecting… Data may be stale." : "",
+		historyStatus,
+		error,
+		chartStreamError ?? "",
+		...indicatorMessages,
+		...account.messages
+	].filter(Boolean);
+	const indicatorFailed = indicatorMessages.length > 0 && Boolean(indicatorData.error || indicatorData.data?.instances.some((i) => i.error));
+	const needsAttention = Boolean(error || indicatorFailed || account.canRetry);
+	const loading = status !== "live" || needsAttention || indicatorMessages.length > 0 || account.messages.length > 0 || historyStatus === "Loading candles…";
+	const disconnected = status === "reconnecting";
+	const connectionLabel = disconnected ? "Disconnected" : loading ? "Loading" : "Connected";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col gap-2",
+		"data-frame": frame,
+		children: [statusHost && createPortal(/* @__PURE__ */ jsxs("details", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx("summary", {
+				className: "flex cursor-pointer list-none items-center gap-2 whitespace-nowrap text-xs text-zinc-400 [&::-webkit-details-marker]:hidden",
+				title: statusMessages.join("\n") || "All chart data is up to date. Click for details.",
+				children: /* @__PURE__ */ jsxs("span", {
+					role: "status",
+					"aria-label": "Chart connection",
+					title: statusMessages.join("\n") || void 0,
+					className: "inline-flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: `inline-block h-2 w-2 rounded-full ${disconnected ? "bg-red-400" : loading ? "bg-amber-400" : "bg-emerald-400"}`
+						}),
+						connectionLabel,
+						statusMessages.length > 0 && /* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: [" · ", statusMessages.join(" · ")]
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				"aria-label": "Chart data status",
+				className: "absolute right-0 top-full z-50 mt-2 w-80 max-w-[calc(100vw-2rem)] space-y-3 rounded-xl border border-zinc-700 bg-zinc-950 p-4 text-sm text-zinc-300 shadow-xl",
+				children: [
+					/* @__PURE__ */ jsx("h3", {
+						className: "font-medium text-white",
+						children: "Chart status"
+					}),
+					/* @__PURE__ */ jsxs("p", { children: ["Market stream: ", status === "live" ? "Connected" : status === "connecting" ? "Connecting…" : "Disconnected"] }),
+					statusMessages.length ? /* @__PURE__ */ jsx("ul", {
+						className: "space-y-2",
+						children: statusMessages.map((message, index) => /* @__PURE__ */ jsx("li", { children: message }, index))
+					}) : /* @__PURE__ */ jsx("p", { children: "All chart data is up to date." }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap gap-3",
+						children: [
+							(error || status === "reconnecting") && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "cursor-pointer underline",
+								onClick: () => {
+									setStatus("connecting");
+									setRetry((n) => n + 1);
+									reconnect();
+								},
+								children: "Retry chart"
+							}),
+							indicatorMessages.length > 0 && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "cursor-pointer underline",
+								onClick: indicatorData.retry,
+								children: "Retry indicators"
+							}),
+							account.canRetry && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "cursor-pointer underline",
+								onClick: account.retry,
+								children: "Retry account data"
+							})
+						]
+					})
+				]
+			})]
+		}), statusHost), /* @__PURE__ */ jsxs("div", {
+			className: "relative min-h-64 flex-1 overflow-hidden rounded-xl border border-zinc-800",
+			"aria-label": `${coin} ${interval} candlestick and volume chart`,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					ref: host,
+					className: "absolute inset-0 z-0"
+				}),
+				generated && /* @__PURE__ */ jsxs("div", {
+					role: "tooltip",
+					className: "pointer-events-none absolute left-2 top-2 z-20 max-w-[calc(100%-5rem)] rounded bg-zinc-950/85 px-2 py-1 text-xs text-zinc-300",
+					children: ["Read-only Pine object: ", generated.text]
+				}),
+				hover && overlayVisibility.trades && /* @__PURE__ */ jsxs("div", {
+					role: "tooltip",
+					"aria-label": "Trade fill",
+					className: "pointer-events-none absolute z-20 max-w-72 rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-xs text-zinc-200 shadow-xl",
+					style: {
+						left: Math.max(0, Math.min(hover.x + 12, (projection?.width ?? 300) - 280)),
+						top: Math.max(0, Math.min(hover.y + 12, (projection?.height ?? 100) - 70))
+					},
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: hover.fill.side === "Buy" ? "text-emerald-400" : "text-red-400",
+						children: [
+							hover.fill.side,
+							" · ",
+							hover.fill.size,
+							" ",
+							coin,
+							" @ ",
+							hover.fill.price
+						]
+					}), /* @__PURE__ */ jsx("time", {
+						dateTime: new Date(hover.fill.time).toISOString(),
+						children: new Date(hover.fill.time).toLocaleString()
+					})]
+				}),
+				projection && /* @__PURE__ */ jsx(ChartDrawings, {
+					document: layout.document,
+					revision: layout.revision,
+					projection,
+					tool,
+					selected,
+					disabled,
+					svgRef: svg,
+					onSelect,
+					onSave,
+					onDrawn,
+					onEdit
+				}, `${layout.id}/${coin}/${interval}/${tool}`)
+			]
+		})]
+	});
+}
+function timeAt(candles, logical, step) {
+	if (!candles.length) return 0;
+	const floor = Math.floor(logical), a = candles[Math.max(0, Math.min(candles.length - 1, floor))];
+	if (logical < 0) return candles[0].time + logical * step;
+	if (floor >= candles.length - 1) return a.time + (logical - candles.length + 1) * step;
+	return a.time + (candles[floor + 1].time - a.time) * (logical - floor);
+}
+function logicalAt(candles, time, step) {
+	if (!candles.length) return 0;
+	if (time < candles[0].time) return (time - candles[0].time) / step;
+	let lo = 0, hi = candles.length - 1;
+	while (lo < hi) {
+		const mid = Math.ceil((lo + hi) / 2);
+		if (candles[mid].time <= time) lo = mid;
+		else hi = mid - 1;
+	}
+	return lo + (time - candles[lo].time) / (candles[lo + 1] ? candles[lo + 1].time - candles[lo].time : step);
+}
+function projectChart(state, step) {
+	const { chart, price, candles } = state, scale = chart.timeScale();
+	const coordinateAt = (logical) => {
+		const index = Math.floor(logical), fraction = logical - index;
+		const left = scale.logicalToCoordinate(index);
+		if (left === null || fraction === 0) return left;
+		const right = scale.logicalToCoordinate(index + 1);
+		return right === null ? null : left + (right - left) * fraction;
+	};
+	return {
+		width: Math.max(0, chart.chartElement().clientWidth - chart.priceScale("right").width()),
+		height: Math.max(0, chart.panes()[0]?.getHeight() ?? chart.chartElement().clientHeight - scale.height()),
+		x: (time) => coordinateAt(logicalAt(candles, time, step)),
+		y: (value) => price.priceToCoordinate(value),
+		point: (x, y, snap) => {
+			const nearest = scale.coordinateToLogical(x), value = price.coordinateToPrice(y);
+			if (nearest === null || value === null || value <= 0) return null;
+			const index = Math.floor(nearest), left = coordinateAt(index), right = coordinateAt(index + 1);
+			if (left === null || right === null || left === right) return null;
+			const logical = index + (x - left) / (right - left);
+			const candle = candles[Math.round(logical)];
+			if (snap && candle) {
+				const nearest = [
+					candle.open,
+					candle.high,
+					candle.low,
+					candle.close
+				].reduce((a, b) => Math.abs(a - value) < Math.abs(b - value) ? a : b);
+				return {
+					time: candle.time,
+					price: nearest
+				};
+			}
+			return {
+				time: Math.max(0, timeAt(candles, logical, step)),
+				price: value
+			};
+		}
+	};
+}
+async function screenshot(canvas, svg) {
+	const context = canvas.getContext("2d");
+	if (!context) throw new Error("Chart screenshot is unavailable in this browser.");
+	if (svg) {
+		const clone = svg.cloneNode(true);
+		clone.querySelectorAll("[data-handle]").forEach((node) => node.remove());
+		const url = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(clone)], { type: "image/svg+xml" }));
+		try {
+			const image = new Image();
+			image.src = url;
+			await image.decode();
+			const ratio = canvas.width / Math.max(1, canvas.clientWidth || canvas.width / window.devicePixelRatio);
+			context.drawImage(image, 0, 0, Number(svg.getAttribute("width")) * ratio, Number(svg.getAttribute("height")) * ratio);
+		} finally {
+			URL.revokeObjectURL(url);
+		}
+	}
+	const output = document.createElement("canvas");
+	for (const max of [
+		1600,
+		1e3,
+		700
+	]) {
+		const ratio = Math.min(1, max / canvas.width, 1e3 / canvas.height);
+		output.width = Math.round(canvas.width * ratio);
+		output.height = Math.round(canvas.height * ratio);
+		output.getContext("2d").drawImage(canvas, 0, 0, output.width, output.height);
+		const data = output.toDataURL("image/png").split(",")[1];
+		if (data.length <= 7e5) return data;
+	}
+	throw new Error("Chart image is too large. Zoom in or disable Include chart image.");
+}
+//#endregion
+//#region src/components/use-chart-layouts.ts
+/** SSE snapshots are authoritative, including reconnects, agent edits and other tabs. */
+function useChartLayouts(id, instruments) {
+	const client = useQueryClient();
+	const { data: layouts } = useSuspenseQuery(chartLayoutsQueryOptions(id));
+	const [selected, setSelected] = useState(layouts[0]?.id ?? "");
+	const mutation = useMutation({ mutationFn: (operation) => operation() });
+	const pending = mutation.isPending;
+	const error = mutation.error?.message;
+	const [connectionError, setConnectionError] = useState("");
+	const [ready, setReady] = useState(false);
+	const busy = useRef(false), alive = useRef(true), streamVersion = useRef(0);
+	const key = `hypervibes:chart-layout:${id}`;
+	const restorePreference = useEffectEvent(() => {
+		try {
+			const saved = localStorage.getItem(key);
+			if (saved && layouts.some((l) => l.id === saved)) setSelected(saved);
+		} catch {}
+	});
+	const { interrupted, controlMessage, streamErrors } = useAgentEventsStatus();
+	useAgentEvent("chart-layouts", (event) => {
+		streamVersion.current++;
+		const snapshot = JSON.parse(event.data);
+		client.setQueryData(chartLayoutsQueryOptions(id).queryKey, (current = []) => {
+			const known = new Map(current.map((layout) => [layout.id, layout]));
+			return snapshot.map((layout) => {
+				const previous = known.get(layout.id);
+				return previous && previous.revision > layout.revision ? previous : layout;
+			});
+		});
+		setReady(true);
+		setConnectionError("");
+	});
+	useEffect(() => {
+		const topicError = streamErrors["chart-layouts"];
+		if (topicError) setConnectionError(topicError);
+		else if (interrupted) setConnectionError(controlMessage || "Chart layout connection interrupted. Reconnecting…");
+	}, [
+		interrupted,
+		controlMessage,
+		streamErrors
+	]);
+	useEffect(() => {
+		alive.current = true;
+		restorePreference();
+		return () => {
+			alive.current = false;
+			streamVersion.current++;
+		};
+	}, [client, id]);
+	async function run(operation) {
+		if (busy.current) return void 0;
+		busy.current = true;
+		const before = streamVersion.current;
+		try {
+			return await mutation.mutateAsync(() => operation(before));
+		} catch {
+			return;
+		} finally {
+			busy.current = false;
+		}
+	}
+	function choose(layoutId) {
+		setSelected(layoutId);
+		try {
+			localStorage.setItem(key, layoutId);
+		} catch {}
+	}
+	function accept(layout, requireExisting = false) {
+		if (!alive.current) return;
+		client.setQueryData(chartLayoutsQueryOptions(id).queryKey, (current = []) => {
+			const previous = current.find((item) => item.id === layout.id);
+			if (requireExisting && !previous || previous && previous.revision >= layout.revision) return current;
+			return [layout, ...current.filter((item) => item.id !== layout.id)];
+		});
+	}
+	const layout = layouts.find((item) => item.id === selected) ?? layouts[0];
+	async function create(name, duplicate = false, defaultId) {
+		let layoutId = defaultId;
+		return run(async (before) => {
+			layoutId ??= randomUuid();
+			const result = await createChartLayout({ data: {
+				id,
+				layoutId,
+				settings: {
+					name,
+					...duplicate ? {} : {
+						coin: instruments.includes("BTC") ? "BTC" : instruments[0] ?? "BTC",
+						interval: "1h"
+					}
+				},
+				...duplicate && layout ? { sourceId: layout.id } : {}
+			} });
+			if (streamVersion.current === before) accept(result);
+			if (alive.current) choose(result.id);
+			return result;
+		});
+	}
+	const initialize = useRef(false);
+	const initializeLayout = useEffectEvent(() => {
+		create("My chart");
+	});
+	useEffect(() => {
+		if (!ready || initialize.current || !instruments.length) return;
+		initialize.current = true;
+		if (!layouts.length) initializeLayout();
+	}, [
+		ready,
+		layouts.length,
+		instruments.length
+	]);
+	async function change(action, edit) {
+		if (!layout) return void 0;
+		let requestId;
+		return run(async (before) => {
+			requestId ??= randomUuid();
+			const result = await changeChartLayout({ data: {
+				id,
+				layoutId: layout.id,
+				revision: layout.revision,
+				requestId,
+				action,
+				edit
+			} });
+			accept(result, streamVersion.current !== before);
+			return result;
+		});
+	}
+	async function remove() {
+		if (!layout) return;
+		await run(async (before) => {
+			await deleteChartLayout({ data: {
+				id,
+				layoutId: layout.id,
+				revision: layout.revision
+			} });
+			if (alive.current) {
+				if (streamVersion.current === before) client.setQueryData(chartLayoutsQueryOptions(id).queryKey, (current) => current?.filter((item) => item.id !== layout.id));
+				setSelected("");
+			}
+		});
+	}
+	return {
+		layouts,
+		layout,
+		pending,
+		error: error || connectionError,
+		ready,
+		choose,
+		create,
+		remove,
+		change
+	};
+}
+//#endregion
+//#region src/components/chart-drawing-editor.tsx
+function ChartDrawingEditor({ value, pending, saveError, onCancel, onApply }) {
+	const [draft, setDraft] = useState(value), [error, setError] = useState("");
+	async function apply() {
+		try {
+			if (await onApply(drawing(draft))) onCancel();
+		} catch (cause) {
+			setError(cause instanceof Error ? cause.message : "Invalid drawing settings");
+		}
+	}
+	return /* @__PURE__ */ jsxs(ConfigDialog, {
+		title: "Drawing settings",
+		onCancel,
+		onApply: () => {
+			apply();
+		},
+		applyDisabled: pending || value.locked,
+		children: [/* @__PURE__ */ jsxs("fieldset", {
+			disabled: pending || value.locked,
+			className: "space-y-4 disabled:opacity-50",
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "block space-y-1 text-sm",
+					children: ["Name", /* @__PURE__ */ jsx("input", {
+						autoFocus: true,
+						className: configInput,
+						value: draft.name,
+						maxLength: 100,
+						onChange: (e) => setDraft({
+							...draft,
+							name: e.target.value
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "block space-y-1 text-sm",
+					children: ["Text", /* @__PURE__ */ jsx("textarea", {
+						className: configInput,
+						value: draft.text,
+						rows: 3,
+						maxLength: 1e3,
+						onChange: (e) => setDraft({
+							...draft,
+							text: e.target.value
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "block space-y-1 text-sm",
+					children: ["Group", /* @__PURE__ */ jsx("input", {
+						className: configInput,
+						value: draft.group,
+						maxLength: 80,
+						onChange: (e) => setDraft({
+							...draft,
+							group: e.target.value
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-4",
+					children: [
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex items-center gap-2 text-sm",
+							children: ["Color", /* @__PURE__ */ jsx("input", {
+								type: "color",
+								className: "cursor-pointer",
+								value: draft.color,
+								onChange: (e) => setDraft({
+									...draft,
+									color: e.target.value
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex items-center gap-2 text-sm",
+							children: ["Width", /* @__PURE__ */ jsx("select", {
+								className: "cursor-pointer rounded bg-zinc-900 p-2",
+								value: draft.width,
+								onChange: (e) => setDraft({
+									...draft,
+									width: Number(e.target.value)
+								}),
+								children: [
+									1,
+									2,
+									3,
+									4,
+									5
+								].map((n) => /* @__PURE__ */ jsx("option", { children: n }, n))
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "cursor-pointer text-sm",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								className: "mr-2 cursor-pointer",
+								checked: draft.dashed,
+								onChange: (e) => setDraft({
+									...draft,
+									dashed: e.target.checked
+								})
+							}), "Dashed"]
+						})
+					]
+				}),
+				draft.kind === "rectangle" && /* @__PURE__ */ jsxs("label", {
+					className: "block text-sm",
+					children: ["Fill opacity", /* @__PURE__ */ jsx("input", {
+						type: "range",
+						className: "ml-3 cursor-pointer",
+						min: "0",
+						max: "0.6",
+						step: "0.05",
+						value: draft.fillOpacity,
+						onChange: (e) => setDraft({
+							...draft,
+							fillOpacity: Number(e.target.value)
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("fieldset", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ jsx("legend", {
+						className: "mb-2 text-sm",
+						children: "Coordinates · UTC seconds / price"
+					}), draft.points.map((point, i) => /* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-2 gap-3",
+						children: [/* @__PURE__ */ jsxs("label", {
+							className: "text-xs text-zinc-400",
+							children: [
+								"Anchor ",
+								i + 1,
+								" time",
+								/* @__PURE__ */ jsx("input", {
+									type: "number",
+									step: "any",
+									className: configInput,
+									value: point.time,
+									onChange: (e) => setDraft({
+										...draft,
+										points: draft.points.map((p, n) => n === i ? {
+											...p,
+											time: Number(e.target.value)
+										} : p)
+									})
+								})
+							]
+						}), /* @__PURE__ */ jsxs("label", {
+							className: "text-xs text-zinc-400",
+							children: [
+								"Anchor ",
+								i + 1,
+								" price",
+								/* @__PURE__ */ jsx("input", {
+									type: "number",
+									step: "any",
+									className: configInput,
+									value: point.price,
+									onChange: (e) => setDraft({
+										...draft,
+										points: draft.points.map((p, n) => n === i ? {
+											...p,
+											price: Number(e.target.value)
+										} : p)
+									})
+								})
+							]
+						})]
+					}, i))]
+				}),
+				/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", {
+					className: "mb-2 text-sm",
+					children: "Visible timeframes · none selected means all"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-3",
+					children: chartIntervals.map((interval) => /* @__PURE__ */ jsxs("label", {
+						className: "cursor-pointer text-xs",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							className: "mr-1 cursor-pointer",
+							checked: draft.intervals.includes(interval),
+							onChange: (e) => setDraft({
+								...draft,
+								intervals: e.target.checked ? [...draft.intervals, interval] : draft.intervals.filter((i) => i !== interval)
+							})
+						}), interval]
+					}, interval))
+				})] })
+			]
+		}), (error || saveError) && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "mt-3 text-sm text-red-300",
+			children: error || saveError
+		})]
+	});
+}
+//#endregion
+//#region src/components/chart-layout-settings.tsx
+var actions = [
+	{
+		action: "new",
+		label: "New"
+	},
+	{
+		action: "duplicate",
+		label: "Duplicate"
+	},
+	{
+		action: "rename",
+		label: "Rename"
+	},
+	{
+		action: "delete",
+		label: "Delete"
+	},
+	{
+		action: "notes",
+		label: "Layout notes"
+	}
+];
+/** A non-modal popup, portaled so the scrolling single-row toolbar cannot clip it. */
+function ChartLayoutSettings({ pending, hasLayout, onAction }) {
+	const [open, setOpen] = useState(false);
+	const [position, setPosition] = useState({
+		left: 0,
+		top: 0
+	});
+	const button = useRef(null), popup = useRef(null);
+	const popupId = useId();
+	useLayoutEffect(() => {
+		if (!open) return;
+		const place = () => {
+			const anchor = button.current.getBoundingClientRect(), panel = popup.current.getBoundingClientRect();
+			setPosition({
+				left: Math.max(8, Math.min(anchor.left, window.innerWidth - panel.width - 8)),
+				top: Math.max(8, Math.min(anchor.bottom + 6, window.innerHeight - panel.height - 8))
+			});
+		};
+		place();
+		popup.current.querySelector("button:not(:disabled)")?.focus();
+		window.addEventListener("resize", place);
+		window.addEventListener("scroll", place, true);
+		return () => {
+			window.removeEventListener("resize", place);
+			window.removeEventListener("scroll", place, true);
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const outside = (event) => {
+			if (event.target instanceof Node && !popup.current?.contains(event.target) && !button.current?.contains(event.target)) setOpen(false);
+		};
+		const escape = (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			setOpen(false);
+			button.current?.focus();
+		};
+		document.addEventListener("pointerdown", outside);
+		document.addEventListener("focusin", outside);
+		document.addEventListener("keydown", escape, true);
+		return () => {
+			document.removeEventListener("pointerdown", outside);
+			document.removeEventListener("focusin", outside);
+			document.removeEventListener("keydown", escape, true);
+		};
+	}, [open]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		ref: button,
+		type: "button",
+		"aria-label": "Layout settings",
+		title: "Layout settings",
+		"aria-haspopup": "dialog",
+		"aria-expanded": open,
+		"aria-controls": open ? popupId : void 0,
+		onClick: () => setOpen(!open),
+		className: "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-zinc-700 text-zinc-300 hover:bg-zinc-800 aria-expanded:bg-zinc-800",
+		children: /* @__PURE__ */ jsxs("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "size-4",
+			children: [/* @__PURE__ */ jsx("path", { d: "m9 3-.7 2.4-2 .9-2.3-.6-2 3.5 1.6 1.8v2l-1.6 1.8 2 3.5 2.3-.6 2 .9L9 21h6l.7-2.4 2-.9 2.3.6 2-3.5-1.6-1.8v-2L22 9.2l-2-3.5-2.3.6-2-.9L15 3Z" }), /* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "3"
+			})]
+		})
+	}), open && createPortal(/* @__PURE__ */ jsx("div", {
+		ref: popup,
+		id: popupId,
+		role: "dialog",
+		"aria-label": "Layout settings",
+		className: "fixed z-40 max-h-[calc(100dvh-1rem)] w-52 max-w-[calc(100vw-1rem)] overflow-y-auto rounded-xl border border-zinc-700 bg-zinc-950 p-1.5 shadow-2xl",
+		style: position,
+		children: actions.map(({ action, label }) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled: pending || !hasLayout && action !== "new",
+			"aria-label": action === "delete" ? "Delete layout" : void 0,
+			className: `block w-full cursor-pointer rounded-lg px-3 py-2 text-left text-sm hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40 ${action === "delete" ? "text-red-300" : "text-zinc-200"} ${action === "notes" ? "mt-1 border-t border-zinc-800" : ""}`,
+			onClick: () => {
+				setOpen(false);
+				button.current?.focus();
+				onAction(action);
+			},
+			children: label
+		}, action))
+	}), document.body)] });
+}
+//#endregion
+//#region src/components/chart-indicator-controls.tsx
+var iconButton$1 = "inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-40";
+function IndicatorActionIcon({ name }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "h-4 w-4",
+		children: /* @__PURE__ */ jsx("path", { d: {
+			eye: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0",
+			"eye-off": "m3 3 18 18 M10.6 5.1A12 12 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3 4 M6.5 6.5A22 22 0 0 0 2 12s3.5 7 10 7a12 12 0 0 0 5.5-1.5 M10 10a3 3 0 0 0 4 4",
+			gear: "m9 3-.5 3-2 1-3-.5-2 3 2 2v2l-2 2 2 3 3-.5 2 1 .5 3h4l.5-3 2-1 3 .5 2-3-2-2v-2l2-2-2-3-3 .5-2-1L13 3Z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0",
+			trash: "M3 6h18 M9 6V3h6v3 M5 6l1 15h12l1-15 M10 10v7 M14 10v7",
+			up: "m6 12 6-6 6 6 M12 6v14"
+		}[name] })
+	});
+}
+function ChartIndicatorControls({ agentId, instances, disabled, onChange }) {
+	const [open, setOpen] = useState(false), [editing, setEditing] = useState(null);
+	const [adding, setAdding] = useState(false), [preparationError, setPreparationError] = useState("");
+	const [query, setQuery] = useState(""), [offset, setOffset] = useState(0);
+	const catalog = useQuery({
+		...indicatorListQueryOptions(agentId, {
+			query,
+			offset,
+			limit: 20
+		}),
+		enabled: open
+	});
+	const indicatorIds = [...new Set(instances.map((instance) => instance.indicatorId))];
+	const details = useQueries({ queries: indicatorIds.map((indicatorId) => ({
+		...indicatorQueryOptions(agentId, indicatorId),
+		enabled: open
+	})) });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: configButton,
+			"aria-label": "Indicators",
+			disabled,
+			onClick: () => setOpen(true),
+			children: [
+				"Indicators (",
+				instances.length,
+				")"
+			]
+		}),
+		open && !editing && /* @__PURE__ */ jsxs(ConfigDialog, {
+			title: "Chart indicators",
+			onCancel: () => setOpen(false),
+			onApply: () => setOpen(false),
+			applyLabel: "Done",
+			children: [
+				instances.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "overflow-x-auto rounded-xl border border-zinc-800",
+					children: /* @__PURE__ */ jsxs("table", {
+						"aria-label": "Indicators on chart",
+						className: "w-full text-left text-sm",
+						children: [/* @__PURE__ */ jsx("thead", {
+							className: "border-b border-zinc-800 text-zinc-400",
+							children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "px-4 py-3 font-medium",
+								children: "Indicator"
+							}), /* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "px-4 py-3 text-right font-medium",
+								children: "Actions"
+							})] })
+						}), /* @__PURE__ */ jsx("tbody", {
+							className: "divide-y divide-zinc-800",
+							children: instances.map((instance, index) => {
+								const detail = details[indicatorIds.indexOf(instance.indicatorId)];
+								const name = detail?.data?.descriptor.name ?? (detail?.isError ? "Unavailable indicator" : "Loading indicator…");
+								const visibility = `${instance.hidden ? "Show" : "Hide"} ${name}`;
+								return /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
+									className: `px-4 py-3 ${instance.hidden ? "text-zinc-500" : "text-zinc-200"}`,
+									children: name
+								}), /* @__PURE__ */ jsx("td", {
+									className: "px-4 py-2",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex justify-end gap-1",
+										children: [
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: iconButton$1,
+												"aria-label": visibility,
+												title: visibility,
+												disabled,
+												onClick: () => {
+													onChange(instances.map((v) => v.id === instance.id ? {
+														...v,
+														hidden: !v.hidden
+													} : v));
+												},
+												children: /* @__PURE__ */ jsx(IndicatorActionIcon, { name: instance.hidden ? "eye-off" : "eye" })
+											}),
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: iconButton$1,
+												"aria-label": `Configure ${name}`,
+												title: `Configure ${name}`,
+												disabled,
+												onClick: () => {
+													setAdding(false);
+													setEditing(instance);
+												},
+												children: /* @__PURE__ */ jsx(IndicatorActionIcon, { name: "gear" })
+											}),
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: iconButton$1,
+												"aria-label": `Move ${name} up`,
+												title: `Move ${name} up`,
+												disabled: disabled || index === 0,
+												onClick: () => {
+													const next = [...instances];
+													[next[index - 1], next[index]] = [next[index], next[index - 1]];
+													onChange(next);
+												},
+												children: /* @__PURE__ */ jsx(IndicatorActionIcon, { name: "up" })
+											}),
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: `${iconButton$1} hover:text-red-300`,
+												"aria-label": `Remove ${name}`,
+												title: `Remove ${name}`,
+												disabled,
+												onClick: () => {
+													onChange(instances.filter((v) => v.id !== instance.id));
+												},
+												children: /* @__PURE__ */ jsx(IndicatorActionIcon, { name: "trash" })
+											})
+										]
+									})
+								})] }, instance.id);
+							})
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "my-3 block text-sm",
+					children: ["Search", /* @__PURE__ */ jsx("input", {
+						className: "block w-full rounded-xl border border-zinc-700 bg-zinc-950 p-3 text-sm text-white",
+						value: query,
+						onChange: (e) => {
+							setQuery(e.target.value);
+							setOffset(0);
+						}
+					})]
+				}),
+				(preparationError || catalog.error) && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					children: preparationError || catalog.error?.message
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					className: "space-y-2",
+					children: catalog.data?.indicators.map((entry) => /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center justify-between gap-2 text-sm",
+						children: [/* @__PURE__ */ jsxs("span", { children: [
+							entry.name,
+							" · ",
+							entry.builtIn ? "Built-in" : `Custom · v${entry.version}`
+						] }), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "cursor-pointer rounded-full border border-zinc-700 px-4 py-2 text-sm text-zinc-200 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-50",
+							disabled: disabled || instances.length >= 10,
+							onClick: () => {
+								try {
+									const id = randomUuid();
+									setPreparationError("");
+									setAdding(true);
+									setEditing({
+										id,
+										indicatorId: entry.id,
+										configuredVersion: entry.version,
+										inputs: {},
+										pane: "auto",
+										hidden: false,
+										styles: {}
+									});
+								} catch (cause) {
+									setPreparationError(cause instanceof Error ? cause.message : "Unable to prepare the indicator");
+								}
+							},
+							children: "Add"
+						})]
+					}, entry.id))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-3 flex gap-2",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "cursor-pointer rounded-full border border-zinc-700 px-4 py-2 text-sm text-zinc-200 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-50",
+						disabled: !offset,
+						onClick: () => setOffset(Math.max(0, offset - 20)),
+						children: "Previous"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "cursor-pointer rounded-full border border-zinc-700 px-4 py-2 text-sm text-zinc-200 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-50",
+						disabled: catalog.data?.nextOffset == null,
+						onClick: () => setOffset(catalog.data.nextOffset),
+						children: "Next"
+					})]
+				})
+			]
+		}),
+		editing && /* @__PURE__ */ jsx(IndicatorInstanceDialog, {
+			agentId,
+			initial: editing,
+			adding,
+			disabled: disabled || adding && instances.length >= 10,
+			onCancel: () => setEditing(null),
+			onApply: async (value) => {
+				if (await onChange(adding ? [...instances, value] : instances.map((v) => v.id === value.id ? value : v))) {
+					setEditing(null);
+					if (adding) setOpen(false);
+				}
+			}
+		}, editing.id)
+	] });
+}
+function IndicatorInstanceDialog({ agentId, initial, adding, disabled, onCancel, onApply }) {
+	const [draft, setDraft] = useState(initial), [styles, setStyles] = useState(JSON.stringify(initial.styles)), [error, setError] = useState("");
+	const detail = useQuery(indicatorQueryOptions(agentId, initial.indicatorId));
+	return /* @__PURE__ */ jsxs(ConfigDialog, {
+		title: adding ? "Add indicator" : "Configure indicator",
+		applyLabel: adding ? "Add to chart" : "Apply",
+		onCancel,
+		applyDisabled: disabled || !detail.data,
+		onApply: () => {
+			try {
+				const parsed = JSON.parse(styles);
+				if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) throw new Error("Styles must be an object keyed by output ID");
+				onApply({
+					...draft,
+					configuredVersion: detail.data.descriptor.version,
+					styles: parsed
+				}).catch((e) => setError(e instanceof Error ? e.message : "Unable to save settings"));
+			} catch (e) {
+				setError(e instanceof Error ? e.message : "Invalid styles");
+			}
+		},
+		children: [
+			detail.data && /* @__PURE__ */ jsx(IndicatorInputFields, {
+				schema: detail.data.descriptor.inputs,
+				value: draft.inputs,
+				onChange: (inputs) => setDraft({
+					...draft,
+					inputs
+				}),
+				disabled
+			}),
+			/* @__PURE__ */ jsxs("details", {
+				className: "rounded-xl border border-zinc-800 p-3",
+				children: [
+					/* @__PURE__ */ jsx("summary", {
+						className: "cursor-pointer text-sm text-zinc-400 hover:text-white",
+						children: "Advanced options"
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "my-3 block text-sm",
+						children: ["Pane", /* @__PURE__ */ jsxs("select", {
+							className: `${configInput} cursor-pointer`,
+							value: draft.pane,
+							onChange: (e) => setDraft({
+								...draft,
+								pane: e.target.value
+							}),
+							children: [
+								/* @__PURE__ */ jsx("option", {
+									value: "auto",
+									children: "Default"
+								}),
+								/* @__PURE__ */ jsx("option", {
+									value: "price",
+									children: "Price pane"
+								}),
+								/* @__PURE__ */ jsx("option", {
+									value: "separate",
+									children: "Separate pane"
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "block text-sm",
+						children: ["Output styles (JSON keyed by exact output ID)", /* @__PURE__ */ jsx("textarea", {
+							rows: 4,
+							className: `${configInput} font-mono`,
+							value: styles,
+							onChange: (e) => setStyles(e.target.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "text-xs text-zinc-500",
+						children: [
+							"Example: ",
+							`{"EMA":{"color":"#ff9900","width":2,"hidden":false}}`,
+							". display.none cannot be overridden."
+						]
+					})
+				]
+			}),
+			(error || detail.error) && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-red-300",
+				children: error || detail.error?.message
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/agent-chart-page.tsx
+var control = "cursor-pointer rounded-lg border border-zinc-700 text-xs text-zinc-300 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40";
+var button = `${control} px-2.5 py-1.5`;
+var iconButton = `${control} flex size-8 shrink-0 items-center justify-center aria-pressed:border-violet-700 aria-pressed:bg-violet-950/50 aria-pressed:text-violet-200`;
+var toolLabels = {
+	select: "Select",
+	horizontal: "Horizontal line",
+	"horizontal-ray": "Horizontal ray",
+	vertical: "Vertical line",
+	trend: "Trend line",
+	ray: "Ray",
+	extended: "Extended line",
+	rectangle: "Rectangle zone",
+	text: "Text",
+	callout: "Callout",
+	arrow: "Arrow"
+};
+var toolIcons = {
+	select: "↖",
+	horizontal: "━",
+	"horizontal-ray": "╶",
+	vertical: "│",
+	trend: "╱",
+	ray: "↗",
+	extended: "⤢",
+	rectangle: "▭",
+	text: "T",
+	callout: "☷",
+	arrow: "➜"
+};
+var iconPaths = {
+	magnet: "M5 3v10a7 7 0 0 0 14 0V3h-4v10a3 3 0 0 1-6 0V3ZM5 7h4m6 0h4",
+	eye: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12Zm7 0a3 3 0 1 0 6 0 3 3 0 0 0-6 0",
+	hidden: "m3 3 18 18M10 5.2a12 12 0 0 1 2-.2c7 0 10 7 10 7a19 19 0 0 1-3 4M6 6.5A19 19 0 0 0 2 12s3 7 10 7a13 13 0 0 0 5-1",
+	tools: "m4 20 4-1L20 7l-4-4L4 15Zm10-15 4 4M4 15l4 4M14 16l5 5 3-3-5-5",
+	lock: "M6 10h12v11H6ZM8 10V6a4 4 0 0 1 8 0v4m-4 5v2",
+	unlock: "M6 10h12v11H6ZM8 10V6a4 4 0 0 1 8 0m-4 9v2",
+	account: "M3 6h18M3 12h18M3 18h18M7 3v6m10 0v6m-7 0v6",
+	chat: "M3 4h18v16H3ZM15 4v16m3-10 2 2-2 2",
+	chatHidden: "M3 4h18v16H3ZM15 4v16m-4-10-2 2 2 2"
+};
+function ChartIcon({ name }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "size-4",
+		children: /* @__PURE__ */ jsx("path", { d: iconPaths[name] })
+	});
+}
+var minChatWidth = 240;
+var maxChatWidth = 560;
+function AgentChartPage({ id, instruments, initialChat, choices }) {
+	const { layouts, layout, pending, error, ready, choose, create, remove, change } = useChartLayouts(id, instruments);
+	const [tool, setTool] = useState("select"), [selected, setSelected] = useState("");
+	const [chatOpen, setChatOpen] = useState(true), [chatWidth, setChatWidth] = useState(360);
+	const [editing, setEditing] = useState(false), [keepDrawing, setKeepDrawing] = useState(false), [toolsOpen, setToolsOpen] = useState(false);
+	const [nameDialog, setNameDialog] = useState(null), [notesOpen, setNotesOpen] = useState(false);
+	const [overlayDialog, setOverlayDialog] = useState(false), [overlays, setOverlays] = useState(defaultChartOverlays);
+	const overlayPreferences = `hypervibes:chart-overlays:v1:${id}`;
+	useEffect(() => {
+		let value = defaultChartOverlays;
+		try {
+			const saved = JSON.parse(localStorage.getItem(overlayPreferences) ?? "null");
+			if (saved && typeof saved === "object" && "trades" in saved && typeof saved.trades === "boolean" && "position" in saved && typeof saved.position === "boolean" && "orders" in saved && typeof saved.orders === "boolean") value = {
+				trades: saved.trades,
+				position: saved.position,
+				orders: saved.orders
+			};
+		} catch {}
+		setOverlays(value);
+	}, [overlayPreferences]);
+	const chart = useRef(null), workspace = useRef(null), canvas = useRef(null);
+	const [chatLimit, setChatLimit] = useState(maxChatWidth);
+	const [chartStatusHost, setChartStatusHost] = useState(null);
+	const splitWidth = Math.min(chatWidth, chatLimit);
+	const clampWidth = (width) => Math.max(minChatWidth, Math.min(chatLimit, width));
+	useEffect(() => {
+		if (!workspace.current || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (entry) setChatLimit(Math.max(minChatWidth, Math.min(maxChatWidth, Math.floor(entry.contentRect.width - 292))));
+		});
+		observer.observe(workspace.current);
+		return () => observer.disconnect();
+	}, []);
+	const resize = useRef(null);
+	const preferences = `hypervibes:chart-panel:${id}`;
+	const [restoredPreferences, setRestoredPreferences] = useState(null);
+	useEffect(() => {
+		try {
+			const saved = JSON.parse(localStorage.getItem(preferences) ?? "null");
+			if (saved && typeof saved === "object") {
+				if ("open" in saved && typeof saved.open === "boolean") setChatOpen(saved.open);
+				if ("width" in saved && typeof saved.width === "number" && Number.isFinite(saved.width)) setChatWidth(Math.max(minChatWidth, Math.min(maxChatWidth, saved.width)));
+			}
+		} catch {}
+		setRestoredPreferences(preferences);
+	}, [preferences]);
+	function panelPreference(open, width) {
+		setChatOpen(open);
+		setChatWidth(width);
+		try {
+			localStorage.setItem(preferences, JSON.stringify({
+				open,
+				width
+			}));
+		} catch {}
+	}
+	const selectedObject = layout?.document.drawings.find((d) => d.id === selected && d.coin === layout.document.coin);
+	const objects = layout?.document.drawings.filter((d) => d.coin === layout.document.coin) ?? [];
+	const allLocked = objects.length > 0 && objects.every((d) => d.locked);
+	const timeframeHidden = layout ? objects.filter((d) => !d.hidden && d.intervals.length > 0 && !d.intervals.includes(layout.document.interval)) : [];
+	async function save(drawing) {
+		return (await change("edit", {
+			label: `Edit ${drawing.name}`,
+			upsert: [drawing]
+		}))?.revision;
+	}
+	function selectLayout(value) {
+		choose(value);
+		setSelected("");
+		setTool("select");
+		setEditing(false);
+	}
+	function layoutAction(action) {
+		if (action === "notes") setNotesOpen(true);
+		else if (action === "delete") {
+			if (layout && window.confirm(`Delete saved layout “${layout.document.name}”? Its chat messages remain available.`)) remove();
+		} else setNameDialog(action);
+	}
+	function onKey(event) {
+		if (event.target instanceof HTMLElement && (event.target.matches("input,textarea,select") || event.target.isContentEditable) || document.querySelector("dialog[open]")) return;
+		if (event.key === "Escape" && tool !== "select") {
+			event.preventDefault();
+			event.stopPropagation();
+			setTool("select");
+			return;
+		}
+		const key = event.key.toLowerCase();
+		if ((event.ctrlKey || event.metaKey) && (key === "z" || key === "y")) {
+			event.preventDefault();
+			const redo = key === "y" || event.shiftKey;
+			if (!pending && (redo ? layout?.canRedo : layout?.canUndo)) change(redo ? "redo" : "undo");
+		}
+		if ((event.key === "Delete" || event.key === "Backspace") && selectedObject && !selectedObject.locked && !pending) {
+			event.preventDefault();
+			change("edit", {
+				label: `Delete ${selectedObject.name}`,
+				remove: [selectedObject.id]
+			});
+		}
+	}
+	if (!instruments.length) return /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		className: "text-amber-200",
+		children: "No perpetual instruments are available."
+	});
+	if (restoredPreferences !== preferences || !layout && !ready) return /* @__PURE__ */ jsx("section", {
+		ref: workspace,
+		"aria-label": "Trading chart",
+		"aria-busy": "true",
+		className: "flex h-[calc(100dvh-6rem)] min-h-[480px] w-full items-center justify-center rounded-xl border border-zinc-800 bg-[#0d0d10]",
+		children: /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "text-sm text-zinc-500",
+			children: "Loading chart workspace…"
+		})
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		ref: workspace,
+		"aria-label": "Trading chart",
+		onKeyDown: onKey,
+		className: "flex h-[calc(100dvh-6rem)] min-h-[480px] w-full min-w-0 flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "sr-only",
+				children: "Chart workspace"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "toolbar",
+				"aria-label": "Chart controls",
+				className: "flex shrink-0 flex-nowrap items-center gap-1.5 overflow-x-auto pb-1",
+				children: [
+					/* @__PURE__ */ jsxs("select", {
+						"aria-label": "Layout",
+						value: layout?.id ?? "",
+						disabled: pending,
+						onChange: (e) => selectLayout(e.target.value),
+						className: `${button} h-8 w-40 shrink-0 truncate bg-zinc-950`,
+						children: [!layouts.length && /* @__PURE__ */ jsx("option", {
+							value: "",
+							children: "No layouts"
+						}), layouts.map((l) => /* @__PURE__ */ jsx("option", {
+							value: l.id,
+							children: l.document.name
+						}, l.id))]
+					}),
+					/* @__PURE__ */ jsx(ChartLayoutSettings, {
+						pending,
+						hasLayout: Boolean(layout),
+						onAction: layoutAction
+					}),
+					/* @__PURE__ */ jsx(SingleInstrumentPicker, {
+						instruments,
+						value: layout?.document.coin ?? null,
+						disabled: pending || !layout,
+						saveError: error,
+						className: `${control} h-8 shrink-0 px-2`,
+						onChange: async (coin) => {
+							if (!layout) return false;
+							if (coin === layout.document.coin) return true;
+							if (!await change("edit", {
+								label: "Change instrument",
+								settings: { coin }
+							})) return false;
+							setSelected("");
+							setTool("select");
+							setEditing(false);
+							return true;
+						}
+					}, layout?.id),
+					/* @__PURE__ */ jsxs("select", {
+						"aria-label": "Timeframe",
+						value: layout?.document.interval ?? "",
+						disabled: pending || !layout,
+						onChange: (e) => {
+							if (isChartInterval(e.target.value)) {
+								setTool("select");
+								change("edit", {
+									label: "Change timeframe",
+									settings: { interval: e.target.value }
+								});
+							}
+						},
+						className: `${button} h-8 w-20 shrink-0 bg-zinc-950`,
+						children: [!layout && /* @__PURE__ */ jsx("option", {
+							value: "",
+							children: "Timeframe"
+						}), chartIntervals.map((interval) => /* @__PURE__ */ jsx("option", { children: interval }, interval))]
+					}),
+					layout && /* @__PURE__ */ jsx(ChartIndicatorControls, {
+						agentId: id,
+						instances: layout.document.indicators,
+						disabled: pending,
+						onChange: async (indicators) => Boolean(await change("edit", {
+							label: "Configure indicators",
+							settings: { indicators }
+						}))
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButton,
+						"aria-label": "Account overlays",
+						title: "Account overlays · Trades, position and orders (read-only)",
+						disabled: !layout,
+						onClick: () => setOverlayDialog(true),
+						children: /* @__PURE__ */ jsx(ChartIcon, { name: "account" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButton,
+						"aria-label": "Magnet",
+						"aria-pressed": layout?.document.magnet ?? false,
+						disabled: pending || !layout,
+						title: `${layout?.document.magnet ? "Magnet on" : "Magnet off"} · Snap to candle OHLC · Ctrl/Cmd temporarily inverts snapping`,
+						onClick: () => {
+							if (layout) change("edit", {
+								label: "Toggle magnet",
+								settings: { magnet: !layout.document.magnet }
+							});
+						},
+						children: /* @__PURE__ */ jsx(ChartIcon, { name: "magnet" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButton,
+						"aria-label": layout?.document.hideDrawings ? "Show drawings" : "Hide drawings",
+						"aria-pressed": Boolean(layout && !layout.document.hideDrawings),
+						disabled: pending || !layout,
+						title: layout?.document.hideDrawings ? "Show drawings" : "Hide drawings",
+						onClick: () => {
+							if (layout) change("edit", {
+								label: "Toggle drawings",
+								settings: { hideDrawings: !layout.document.hideDrawings }
+							});
+						},
+						children: /* @__PURE__ */ jsx(ChartIcon, { name: layout?.document.hideDrawings ? "hidden" : "eye" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButton,
+						"aria-label": toolsOpen ? "Hide annotation tools" : "Show annotation tools",
+						"aria-pressed": toolsOpen,
+						"aria-expanded": toolsOpen,
+						disabled: !layout,
+						title: toolsOpen ? "Hide annotation tools" : "Show annotation tools",
+						onClick: () => {
+							setToolsOpen(!toolsOpen);
+							setTool("select");
+						},
+						children: /* @__PURE__ */ jsx(ChartIcon, { name: "tools" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButton,
+						"aria-label": allLocked ? "Unlock objects" : "Lock objects",
+						"aria-pressed": allLocked,
+						disabled: pending || !objects.length,
+						title: `${allLocked ? "Unlock" : "Lock"} all annotations for ${layout?.document.coin ?? "this instrument"}`,
+						onClick: () => {
+							change("edit", {
+								label: allLocked ? "Unlock drawings" : "Lock drawings",
+								upsert: objects.filter((d) => d.locked === allLocked).map((d) => ({
+									...d,
+									locked: !allLocked
+								}))
+							});
+						},
+						children: /* @__PURE__ */ jsx(ChartIcon, { name: allLocked ? "lock" : "unlock" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButton,
+						"aria-label": chatOpen ? "Hide chat" : "Show chat",
+						"aria-pressed": chatOpen,
+						"aria-expanded": chatOpen,
+						title: chatOpen ? "Hide chat" : "Show chat",
+						onClick: () => panelPreference(!chatOpen, splitWidth),
+						children: /* @__PURE__ */ jsx(ChartIcon, { name: chatOpen ? "chat" : "chatHidden" })
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: setChartStatusHost,
+						"aria-label": "Chart status",
+						className: "ml-auto flex h-8 shrink-0 items-center pl-2"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: pending ? "Saving…" : error ? "Not saved · see error" : layout ? "Saved" : ready ? "Create a layout to begin" : "Loading…"
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-sm text-amber-200",
+				children: error
+			}),
+			layout && !layout.document.hideDrawings && timeframeHidden.length > 0 && /* @__PURE__ */ jsxs("p", {
+				role: "status",
+				className: "flex flex-wrap items-center gap-2 text-xs text-amber-200",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					timeframeHidden.length,
+					" ",
+					timeframeHidden.length === 1 ? "drawing" : "drawings",
+					" hidden on ",
+					layout.document.interval,
+					" by timeframe settings."
+				] }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: button,
+					disabled: pending || timeframeHidden.every((d) => d.locked),
+					title: "Remove timeframe restrictions from these unlocked drawings. Locked drawings are unchanged.",
+					onClick: () => {
+						change("edit", {
+							label: "Show drawings on all timeframes",
+							upsert: timeframeHidden.filter((d) => !d.locked).map((d) => ({
+								...d,
+								intervals: []
+							}))
+						});
+					},
+					children: "Show on all timeframes"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"aria-label": "Chart and chat workspace",
+				className: "flex min-h-0 flex-1 overflow-x-auto",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-[280px] flex-1 gap-2",
+					children: [layout && toolsOpen && /* @__PURE__ */ jsxs("div", {
+						role: "toolbar",
+						"aria-label": "Drawing tools",
+						className: "flex w-11 shrink-0 flex-col gap-1 overflow-y-auto",
+						children: [["select", ...drawingKinds].map((kind) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": toolLabels[kind],
+							title: `${toolLabels[kind]}${kind === "select" ? "" : " · click to place anchors"}`,
+							"aria-pressed": tool === kind,
+							disabled: pending,
+							onClick: () => {
+								setTool(kind);
+								setSelected("");
+							},
+							className: `${control} py-1.5 text-lg ${tool === kind ? "border-violet-500 bg-violet-950/50 text-violet-200" : ""}`,
+							children: toolIcons[kind]
+						}, kind)), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: `${control} py-1.5`,
+							"aria-label": "Keep drawing",
+							"aria-pressed": keepDrawing,
+							title: "Keep drawing after placing an object",
+							onClick: () => setKeepDrawing(!keepDrawing),
+							children: "∞"
+						})]
+					}), layout ? /* @__PURE__ */ jsxs("div", {
+						ref: canvas,
+						tabIndex: 0,
+						"aria-label": "Chart canvas",
+						onPointerDown: (e) => {
+							if (!(e.target instanceof Element) || !e.target.closest("button,input,textarea,select")) e.currentTarget.focus();
+						},
+						className: "flex min-w-0 flex-1 flex-col outline-none focus-visible:ring-1 focus-visible:ring-violet-500",
+						children: [/* @__PURE__ */ jsx(MarketChart, {
+							ref: chart,
+							id,
+							layout,
+							tool,
+							selected,
+							disabled: pending,
+							statusHost: chartStatusHost,
+							overlayVisibility: overlays,
+							onSelect: (drawingId) => {
+								setSelected(drawingId);
+								canvas.current?.focus({ preventScroll: true });
+							},
+							onSave: save,
+							onDrawn: () => {
+								if (!keepDrawing) setTool("select");
+							},
+							onEdit: () => setEditing(true)
+						}, `${layout.id}/${layout.document.coin}/${layout.document.interval}`), (toolsOpen || selectedObject) && /* @__PURE__ */ jsxs("div", {
+							className: "flex min-h-8 flex-wrap items-center gap-2 py-1 text-xs text-zinc-500",
+							children: [toolsOpen && /* @__PURE__ */ jsxs("span", { children: [toolLabels[tool], tool !== "select" ? " · Click anchors · Esc cancels" : " · Select an object or draw from the toolbar"] }), selectedObject && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-violet-300",
+									children: selectedObject.name
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: button,
+									disabled: pending || selectedObject.locked,
+									onClick: () => setEditing(true),
+									children: "Settings"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: button,
+									disabled: pending,
+									onClick: () => {
+										save({
+											...selectedObject,
+											locked: !selectedObject.locked
+										});
+									},
+									children: selectedObject.locked ? "Unlock" : "Lock"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: button,
+									disabled: pending || selectedObject.locked,
+									onClick: () => {
+										change("edit", {
+											label: `Delete ${selectedObject.name}`,
+											remove: [selectedObject.id]
+										});
+									},
+									children: "Delete"
+								})
+							] })]
+						})]
+					}) : /* @__PURE__ */ jsx("p", {
+						className: "p-4 text-sm text-zinc-500",
+						children: "Create a layout from the layout settings to begin."
+					})]
+				}), /* @__PURE__ */ jsx("aside", {
+					hidden: !chatOpen,
+					"aria-label": "Chart chat panel",
+					className: "min-h-0 shrink-0",
+					style: { width: splitWidth + 12 },
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex h-full min-h-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							role: "separator",
+							"aria-label": "Resize chart chat",
+							"aria-orientation": "vertical",
+							"aria-valuemin": minChatWidth,
+							"aria-valuemax": chatLimit,
+							"aria-valuenow": splitWidth,
+							"aria-valuetext": `${splitWidth}px chat width`,
+							tabIndex: 0,
+							className: "flex w-3 shrink-0 cursor-col-resize touch-none items-center justify-center rounded hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-violet-500",
+							onKeyDown: (e) => {
+								const delta = e.key === "ArrowLeft" ? 20 : e.key === "ArrowRight" ? -20 : 0;
+								if (delta || e.key === "Home" || e.key === "End") {
+									e.preventDefault();
+									panelPreference(true, e.key === "Home" ? minChatWidth : e.key === "End" ? chatLimit : clampWidth(splitWidth + delta));
+								}
+							},
+							onPointerDown: (e) => {
+								if (e.button !== 0) return;
+								e.preventDefault();
+								resize.current = {
+									x: e.clientX,
+									width: splitWidth,
+									pointerId: e.pointerId
+								};
+								e.currentTarget.setPointerCapture(e.pointerId);
+							},
+							onPointerMove: (e) => {
+								const moving = resize.current;
+								if (moving && moving.pointerId === e.pointerId) setChatWidth(clampWidth(moving.width + moving.x - e.clientX));
+							},
+							onPointerUp: (e) => {
+								const moving = resize.current;
+								if (!moving || moving.pointerId !== e.pointerId) return;
+								resize.current = null;
+								if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+								panelPreference(true, clampWidth(moving.width + moving.x - e.clientX));
+							},
+							onPointerCancel: (e) => {
+								const moving = resize.current;
+								if (moving && moving.pointerId === e.pointerId) {
+									setChatWidth(moving.width);
+									resize.current = null;
+									if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+								}
+							},
+							onLostPointerCapture: (e) => {
+								const moving = resize.current;
+								if (moving && moving.pointerId === e.pointerId) {
+									setChatWidth(moving.width);
+									resize.current = null;
+								}
+							},
+							children: /* @__PURE__ */ jsx("span", { className: "h-12 w-1 rounded bg-zinc-700" })
+						}), /* @__PURE__ */ jsx("div", {
+							className: "min-h-0 min-w-0 flex-1",
+							children: /* @__PURE__ */ jsx(AgentChatPage, {
+								initial: initialChat,
+								choices,
+								embedded: true,
+								visible: chatOpen,
+								chartContext: layout ? {
+									label: `${layout.document.name} · ${layout.document.coin} · ${layout.document.interval}${tool === "select" ? "" : " · Finish drawing or choose Select before sending"}`,
+									disabled: pending || tool !== "select",
+									capture: async (image) => {
+										if (!chart.current) throw new Error("Chart is not ready");
+										return chart.current.capture(layout, selectedObject?.id ?? "", image);
+									}
+								} : void 0
+							})
+						})]
+					})
+				})]
+			}),
+			editing && selectedObject && layout && /* @__PURE__ */ jsx(ChartDrawingEditor, {
+				value: selectedObject,
+				pending,
+				saveError: error,
+				onCancel: () => setEditing(false),
+				onApply: async (drawing) => await save(drawing) !== void 0
+			}, `${layout.id}/${layout.revision}/${selected}`),
+			overlayDialog && /* @__PURE__ */ jsx(ChartOverlayDialog, {
+				value: overlays,
+				onCancel: () => setOverlayDialog(false),
+				onApply: (value) => {
+					setOverlays(value);
+					setOverlayDialog(false);
+					try {
+						localStorage.setItem(overlayPreferences, JSON.stringify(value));
+					} catch {}
+				}
+			}),
+			notesOpen && layout && /* @__PURE__ */ jsx(LayoutNotesDialog, {
+				notes: layout.document.notes,
+				pending,
+				error,
+				onCancel: () => setNotesOpen(false),
+				onApply: async (notes) => {
+					if (await change("edit", {
+						label: "Update layout notes",
+						settings: { notes }
+					})) setNotesOpen(false);
+				}
+			}, layout.id),
+			nameDialog && /* @__PURE__ */ jsx(LayoutNameDialog, {
+				title: nameDialog === "new" ? "New layout" : nameDialog === "duplicate" ? "Duplicate layout" : "Rename layout",
+				initial: nameDialog === "new" ? "My chart" : `${layout?.document.name ?? "Chart"}${nameDialog === "duplicate" ? " copy" : ""}`,
+				pending,
+				error,
+				onCancel: () => setNameDialog(null),
+				onApply: async (name, operationId) => {
+					if (nameDialog === "rename" ? await change("edit", {
+						label: "Rename layout",
+						settings: { name }
+					}) : await create(name, nameDialog === "duplicate", operationId)) {
+						setNameDialog(null);
+						setSelected("");
+					}
+				}
+			}, nameDialog)
+		]
+	});
+}
+function ChartOverlayDialog({ value, onApply, onCancel }) {
+	const [draft, setDraft] = useState(value);
+	return /* @__PURE__ */ jsxs(ConfigDialog, {
+		title: "Account overlays",
+		onCancel,
+		onApply: () => onApply(draft),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "space-y-3 text-sm",
+			children: [
+				["trades", "Historical buys & sells"],
+				["position", "Current position"],
+				["orders", "Open orders & TP/SL triggers"]
+			].map(([key, label]) => /* @__PURE__ */ jsxs("label", {
+				className: "flex cursor-pointer items-center gap-3",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: draft[key],
+					onChange: (event) => setDraft({
+						...draft,
+						[key]: event.target.checked
+					}),
+					className: "cursor-pointer accent-violet-500"
+				}), label]
+			}, key))
+		}), /* @__PURE__ */ jsx("p", {
+			className: "mt-4 text-xs text-zinc-500",
+			children: "Read-only data from this Agent’s linked Hyperliquid account, including manual trades. History follows the journal. Visibility is saved on this device, independently of layouts and annotations."
+		})]
+	});
+}
+function LayoutNotesDialog({ notes, pending, error, onApply, onCancel }) {
+	const [value, setValue] = useState(notes);
+	return /* @__PURE__ */ jsxs(ConfigDialog, {
+		title: "Layout notes",
+		applyLabel: "Save notes",
+		applyDisabled: pending,
+		onCancel,
+		onApply: () => {
+			onApply(value);
+		},
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: "block space-y-2 text-sm",
+				children: ["Notes", /* @__PURE__ */ jsx("textarea", {
+					autoFocus: true,
+					rows: 6,
+					maxLength: 8e3,
+					className: configInput,
+					value,
+					disabled: pending,
+					onChange: (e) => setValue(e.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xs text-zinc-500",
+				children: "Local to this layout. Not published research or Agent-wide insights."
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-sm text-red-300",
+				children: error
+			})
+		]
+	});
+}
+function LayoutNameDialog({ title, initial, pending, error, onApply, onCancel }) {
+	const [name, setName] = useState(initial);
+	const request = useRef(null);
+	const [preparationError, setPreparationError] = useState("");
+	async function apply() {
+		try {
+			setPreparationError("");
+			if (request.current?.name !== name.trim()) request.current = {
+				name: name.trim(),
+				id: randomUuid()
+			};
+			await onApply(name.trim(), request.current.id);
+		} catch (cause) {
+			setPreparationError(cause instanceof Error ? cause.message : "Unable to prepare the layout");
+		}
+	}
+	return /* @__PURE__ */ jsxs(ConfigDialog, {
+		title,
+		onCancel,
+		onApply: () => {
+			apply();
+		},
+		applyDisabled: pending || !name.trim(),
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: "block space-y-2 text-sm",
+				children: ["Name", /* @__PURE__ */ jsx("input", {
+					autoFocus: true,
+					maxLength: 80,
+					value: name,
+					disabled: pending,
+					onChange: (e) => setName(e.target.value),
+					className: configInput
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-3 text-xs text-zinc-500",
+				children: "Layouts autosave instrument, timeframe, objects, styles and notes. Reopening follows the latest candles."
+			}),
+			(preparationError || error) && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-sm text-red-300",
+				children: preparationError || error
+			})
+		]
+	});
+}
+//#endregion
+//#region src/routes/_authenticated.agents.$agentId.chart.tsx?tsr-split=component
+function ChartRoute() {
+	const { agentId } = Route.useParams();
+	const { data: instruments, error } = useSuspenseQuery(chartInstrumentsQueryOptions(agentId));
+	const { data: choices } = useSuspenseQuery(modelChoicesQueryOptions());
+	const { data: chat } = useSuspenseQuery(agentChatQueryOptions(agentId));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [error && /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		className: "text-sm text-amber-200",
+		children: error.message
+	}), /* @__PURE__ */ jsx(AgentChartPage, {
+		id: agentId,
+		instruments,
+		initialChat: chat,
+		choices
+	}, agentId)] });
+}
+//#endregion
+export { ChartRoute as component };