build: recompile client bundle with ModuleLoader wrapper
This commit is contained in:
parent
8448defde8
commit
62a7bc13f0
6 changed files with 129 additions and 73 deletions
|
|
@ -275,3 +275,4 @@ async function aggregateTokens(customSessionsRoot) {
|
|||
export {
|
||||
aggregateTokens
|
||||
};
|
||||
//# sourceMappingURL=aggregator.js.map
|
||||
|
|
|
|||
7
lib/aggregator.js.map
Normal file
7
lib/aggregator.js.map
Normal file
File diff suppressed because one or more lines are too long
179
lib/client.js
179
lib/client.js
|
|
@ -1,9 +1,45 @@
|
|||
window.__ModuleLoader__.load({ id: "dsh-plugin-token-heatmap", factory: (require) => { var module = { exports: {} }; var exports = module.exports;
|
||||
var __create = Object.create;
|
||||
var __defProp = Object.defineProperty;
|
||||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||
var __getProtoOf = Object.getPrototypeOf;
|
||||
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||
var __export = (target, all) => {
|
||||
for (var name2 in all)
|
||||
__defProp(target, name2, { get: all[name2], enumerable: true });
|
||||
};
|
||||
var __copyProps = (to, from, except, desc) => {
|
||||
if (from && typeof from === "object" || typeof from === "function") {
|
||||
for (let key of __getOwnPropNames(from))
|
||||
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||
}
|
||||
return to;
|
||||
};
|
||||
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
||||
// If the importer is in node compatibility mode or this is not an ESM
|
||||
// file that has been converted to a CommonJS file using a Babel-
|
||||
// compatible transform (i.e. "__esModule" has not been set), then set
|
||||
// "default" to the CommonJS "module.exports" for node compatibility.
|
||||
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
||||
mod
|
||||
));
|
||||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||
|
||||
// src/client/index.tsx
|
||||
import React3, { useState as useState2, useEffect as useEffect2 } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
var index_exports = {};
|
||||
__export(index_exports, {
|
||||
apply: () => apply,
|
||||
inject: () => inject,
|
||||
name: () => name
|
||||
});
|
||||
module.exports = __toCommonJS(index_exports);
|
||||
var import_react3 = __toESM(require("react"), 1);
|
||||
var import_client = require("react-dom/client");
|
||||
|
||||
// src/client/HeatmapView.tsx
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
var import_react = __toESM(require("react"), 1);
|
||||
function formatNumber(num) {
|
||||
if (num >= 1e9) return (num / 1e9).toFixed(2) + "B";
|
||||
if (num >= 1e6) return (num / 1e6).toFixed(1) + "M";
|
||||
|
|
@ -23,12 +59,12 @@ var DEEPSEEK_LEVELS = [
|
|||
"#4f46e5"
|
||||
];
|
||||
function HeatmapView() {
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [selectedSessionId, setSelectedSessionId] = useState("all");
|
||||
const [hoveredDay, setHoveredDay] = useState(null);
|
||||
const [tooltipPos, setTooltipPos] = useState(null);
|
||||
const [data, setData] = (0, import_react.useState)(null);
|
||||
const [loading, setLoading] = (0, import_react.useState)(true);
|
||||
const [error, setError] = (0, import_react.useState)(null);
|
||||
const [selectedSessionId, setSelectedSessionId] = (0, import_react.useState)("all");
|
||||
const [hoveredDay, setHoveredDay] = (0, import_react.useState)(null);
|
||||
const [tooltipPos, setTooltipPos] = (0, import_react.useState)(null);
|
||||
const fetchStats = () => {
|
||||
setLoading(true);
|
||||
fetch("/api/dsh-token-heatmap/stats").then((r) => {
|
||||
|
|
@ -42,10 +78,10 @@ function HeatmapView() {
|
|||
setLoading(false);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
(0, import_react.useEffect)(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
const activeView = useMemo(() => {
|
||||
const activeView = (0, import_react.useMemo)(() => {
|
||||
if (!data) return null;
|
||||
if (selectedSessionId === "all") {
|
||||
return {
|
||||
|
|
@ -111,7 +147,7 @@ function HeatmapView() {
|
|||
sessionTitle: session.title
|
||||
};
|
||||
}, [data, selectedSessionId]);
|
||||
const calendarGrid = useMemo(() => {
|
||||
const calendarGrid = (0, import_react.useMemo)(() => {
|
||||
if (!activeView) return null;
|
||||
const weeks = [];
|
||||
const now = /* @__PURE__ */ new Date();
|
||||
|
|
@ -146,7 +182,7 @@ function HeatmapView() {
|
|||
}
|
||||
return weeks;
|
||||
}, [activeView]);
|
||||
const monthHeaders = useMemo(() => {
|
||||
const monthHeaders = (0, import_react.useMemo)(() => {
|
||||
if (!calendarGrid) return [];
|
||||
const headers = [];
|
||||
let lastMonth = -1;
|
||||
|
|
@ -164,10 +200,10 @@ function HeatmapView() {
|
|||
return headers;
|
||||
}, [calendarGrid]);
|
||||
if (loading && !data) {
|
||||
return /* @__PURE__ */ React.createElement("div", { style: { padding: "40px 20px", textAlign: "center", color: "var(--dsw-alias-label-secondary)" } }, "Loading token usage statistics...");
|
||||
return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "40px 20px", textAlign: "center", color: "var(--dsw-alias-label-secondary)" } }, "Loading token usage statistics...");
|
||||
}
|
||||
if (error) {
|
||||
return /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", color: "var(--dsw-alias-state-error-primary, #ef4444)" } }, "Failed to load heatmap: ", error, /* @__PURE__ */ React.createElement(
|
||||
return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "20px", color: "var(--dsw-alias-state-error-primary, #ef4444)" } }, "Failed to load heatmap: ", error, /* @__PURE__ */ import_react.default.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick: fetchStats,
|
||||
|
|
@ -187,7 +223,7 @@ function HeatmapView() {
|
|||
if (!data || !activeView) return null;
|
||||
const { summary } = activeView;
|
||||
const cacheHitPercent = summary.totalTokens > 0 ? Math.round(summary.totalCacheReadTokens / summary.totalTokens * 100) : 0;
|
||||
return /* @__PURE__ */ React.createElement(
|
||||
return /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -200,7 +236,7 @@ function HeatmapView() {
|
|||
color: "var(--dsw-alias-label-primary, #eeeeee)"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -212,7 +248,7 @@ function HeatmapView() {
|
|||
marginBottom: 20
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
|
||||
"h2",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -226,7 +262,7 @@ function HeatmapView() {
|
|||
}
|
||||
},
|
||||
"Token Usage Activity",
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -241,7 +277,7 @@ function HeatmapView() {
|
|||
},
|
||||
"52 Weeks"
|
||||
)
|
||||
), /* @__PURE__ */ React.createElement(
|
||||
), /* @__PURE__ */ import_react.default.createElement(
|
||||
"p",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -252,7 +288,7 @@ function HeatmapView() {
|
|||
},
|
||||
"Daily token volume and request step intensity across sessions"
|
||||
)),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, color: "var(--dsw-alias-label-tertiary)" } }, "Session:"), /* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: 12, color: "var(--dsw-alias-label-tertiary)" } }, "Session:"), /* @__PURE__ */ import_react.default.createElement(
|
||||
"select",
|
||||
{
|
||||
value: selectedSessionId,
|
||||
|
|
@ -269,9 +305,9 @@ function HeatmapView() {
|
|||
maxWidth: 240
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("option", { value: "all" }, "All Sessions (", data.sessions.length, " total)"),
|
||||
data.sessions.map((s) => /* @__PURE__ */ React.createElement("option", { key: s.id, value: s.id }, new Date(s.createdAt).toLocaleDateString(), " \xB7 ", s.title.slice(0, 32)))
|
||||
)), /* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement("option", { value: "all" }, "All Sessions (", data.sessions.length, " total)"),
|
||||
data.sessions.map((s) => /* @__PURE__ */ import_react.default.createElement("option", { key: s.id, value: s.id }, new Date(s.createdAt).toLocaleDateString(), " \xB7 ", s.title.slice(0, 32)))
|
||||
)), /* @__PURE__ */ import_react.default.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick: fetchStats,
|
||||
|
|
@ -293,7 +329,7 @@ function HeatmapView() {
|
|||
"\u21BB Refresh"
|
||||
))
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -303,7 +339,7 @@ function HeatmapView() {
|
|||
marginBottom: 20
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -313,11 +349,11 @@ function HeatmapView() {
|
|||
padding: "14px 16px"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Total Tokens"),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-brand-primary, #6366f1)" } }, formatNumber(summary.totalTokens)),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatExact(summary.totalTokens), " tokens")
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Total Tokens"),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-brand-primary, #6366f1)" } }, formatNumber(summary.totalTokens)),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatExact(summary.totalTokens), " tokens")
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -327,11 +363,11 @@ function HeatmapView() {
|
|||
padding: "14px 16px"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Cache Hit Ratio"),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8" } }, cacheHitPercent, "%"),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatNumber(summary.totalCacheReadTokens), " cached reads")
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Cache Hit Ratio"),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8" } }, cacheHitPercent, "%"),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatNumber(summary.totalCacheReadTokens), " cached reads")
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -341,11 +377,11 @@ function HeatmapView() {
|
|||
padding: "14px 16px"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, selectedSessionId === "all" ? "Daily Average" : "Total Steps"),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, selectedSessionId === "all" ? formatNumber(summary.dailyAverage) : summary.totalTurns),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, selectedSessionId === "all" ? `Across ${summary.activeDays} active days` : `${formatNumber(summary.totalInputTokens + summary.totalOutputTokens)} billed`)
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, selectedSessionId === "all" ? "Daily Average" : "Total Steps"),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, selectedSessionId === "all" ? formatNumber(summary.dailyAverage) : summary.totalTurns),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, selectedSessionId === "all" ? `Across ${summary.activeDays} active days` : `${formatNumber(summary.totalInputTokens + summary.totalOutputTokens)} billed`)
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -355,12 +391,12 @@ function HeatmapView() {
|
|||
padding: "14px 16px"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, selectedSessionId === "all" ? "Active Streak" : "Active Days"),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, selectedSessionId === "all" ? `${summary.currentStreak} days` : `${summary.activeDays} days`),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, selectedSessionId === "all" ? `Longest streak: ${summary.longestStreak} days` : `Session: ${activeView.sessionTitle.slice(0, 24)}`)
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, selectedSessionId === "all" ? "Active Streak" : "Active Days"),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, selectedSessionId === "all" ? `${summary.currentStreak} days` : `${summary.activeDays} days`),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, selectedSessionId === "all" ? `Longest streak: ${summary.longestStreak} days` : `Session: ${activeView.sessionTitle.slice(0, 24)}`)
|
||||
)
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -372,7 +408,7 @@ function HeatmapView() {
|
|||
overflowX: "auto"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -384,10 +420,10 @@ function HeatmapView() {
|
|||
fontWeight: 600
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("span", null, "Contribution Calendar"),
|
||||
summary.peakDay && /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 400, color: "var(--dsw-alias-label-secondary)" } }, "Peak day: ", /* @__PURE__ */ React.createElement("strong", { style: { color: "var(--dsw-alias-label-primary)" } }, summary.peakDay.date), " (", formatNumber(summary.peakDay.tokens), " tokens)")
|
||||
/* @__PURE__ */ import_react.default.createElement("span", null, "Contribution Calendar"),
|
||||
summary.peakDay && /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: 12, fontWeight: 400, color: "var(--dsw-alias-label-secondary)" } }, "Peak day: ", /* @__PURE__ */ import_react.default.createElement("strong", { style: { color: "var(--dsw-alias-label-primary)" } }, summary.peakDay.date), " (", formatNumber(summary.peakDay.tokens), " tokens)")
|
||||
),
|
||||
calendarGrid && /* @__PURE__ */ React.createElement("div", { style: { display: "inline-block", minWidth: 780 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", marginLeft: 32, marginBottom: 4, height: 16 } }, monthHeaders.map((m, i) => /* @__PURE__ */ React.createElement(
|
||||
calendarGrid && /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "inline-block", minWidth: 780 } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", marginLeft: 32, marginBottom: 4, height: 16 } }, monthHeaders.map((m, i) => /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
key: i,
|
||||
|
|
@ -401,7 +437,7 @@ function HeatmapView() {
|
|||
}
|
||||
},
|
||||
m.label
|
||||
))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 6 } }, /* @__PURE__ */ React.createElement(
|
||||
))), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: 6 } }, /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -415,14 +451,14 @@ function HeatmapView() {
|
|||
paddingTop: 1
|
||||
}
|
||||
},
|
||||
DAY_LABELS.map((lbl, idx) => /* @__PURE__ */ React.createElement("div", { key: idx, style: { height: 11, lineHeight: "11px" } }, lbl))
|
||||
), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 3 } }, calendarGrid.map((week, colIdx) => /* @__PURE__ */ React.createElement("div", { key: colIdx, style: { display: "flex", flexDirection: "column", gap: 3 } }, week.map((day, rowIdx) => {
|
||||
DAY_LABELS.map((lbl, idx) => /* @__PURE__ */ import_react.default.createElement("div", { key: idx, style: { height: 11, lineHeight: "11px" } }, lbl))
|
||||
), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: 3 } }, calendarGrid.map((week, colIdx) => /* @__PURE__ */ import_react.default.createElement("div", { key: colIdx, style: { display: "flex", flexDirection: "column", gap: 3 } }, week.map((day, rowIdx) => {
|
||||
if (!day) {
|
||||
return /* @__PURE__ */ React.createElement("div", { key: rowIdx, style: { width: 11, height: 11 } });
|
||||
return /* @__PURE__ */ import_react.default.createElement("div", { key: rowIdx, style: { width: 11, height: 11 } });
|
||||
}
|
||||
const lvl = day.stats.level || 0;
|
||||
const bg = DEEPSEEK_LEVELS[lvl];
|
||||
return /* @__PURE__ */ React.createElement(
|
||||
return /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
key: rowIdx,
|
||||
|
|
@ -446,7 +482,7 @@ function HeatmapView() {
|
|||
}
|
||||
}
|
||||
);
|
||||
}))))), /* @__PURE__ */ React.createElement(
|
||||
}))))), /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -459,8 +495,8 @@ function HeatmapView() {
|
|||
color: "var(--dsw-alias-label-tertiary, #a0a0a0)"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("span", null, "Less"),
|
||||
DEEPSEEK_LEVELS.map((c, i) => /* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement("span", null, "Less"),
|
||||
DEEPSEEK_LEVELS.map((c, i) => /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
key: i,
|
||||
|
|
@ -473,10 +509,10 @@ function HeatmapView() {
|
|||
}
|
||||
}
|
||||
)),
|
||||
/* @__PURE__ */ React.createElement("span", null, "More")
|
||||
/* @__PURE__ */ import_react.default.createElement("span", null, "More")
|
||||
))
|
||||
),
|
||||
hoveredDay && tooltipPos && /* @__PURE__ */ React.createElement(
|
||||
hoveredDay && tooltipPos && /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -496,22 +532,22 @@ function HeatmapView() {
|
|||
whiteSpace: "nowrap"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontWeight: 650, color: "var(--dsw-alias-label-primary, #ffffff)", marginBottom: 4 } }, (/* @__PURE__ */ new Date(hoveredDay.date + "T00:00:00")).toLocaleDateString(void 0, {
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontWeight: 650, color: "var(--dsw-alias-label-primary, #ffffff)", marginBottom: 4 } }, (/* @__PURE__ */ new Date(hoveredDay.date + "T00:00:00")).toLocaleDateString(void 0, {
|
||||
weekday: "short",
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric"
|
||||
})),
|
||||
hoveredDay.stats.totalTokens === 0 ? /* @__PURE__ */ React.createElement("div", { style: { color: "var(--dsw-alias-label-tertiary)" } }, "No activity recorded") : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { color: "var(--dsw-alias-brand-primary, #818cf8)", fontWeight: 600 } }, formatExact(hoveredDay.stats.totalTokens), " tokens"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary)", marginTop: 2 } }, hoveredDay.stats.turns, " requests / steps"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 10, color: "var(--dsw-alias-label-tertiary)", marginTop: 4 } }, "Billed: ", formatNumber(hoveredDay.stats.inputTokens + hoveredDay.stats.outputTokens), " \xB7 Cache: ", formatNumber(hoveredDay.stats.cacheReadTokens)))
|
||||
hoveredDay.stats.totalTokens === 0 ? /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "var(--dsw-alias-label-tertiary)" } }, "No activity recorded") : /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "var(--dsw-alias-brand-primary, #818cf8)", fontWeight: 600 } }, formatExact(hoveredDay.stats.totalTokens), " tokens"), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary)", marginTop: 2 } }, hoveredDay.stats.turns, " requests / steps"), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 10, color: "var(--dsw-alias-label-tertiary)", marginTop: 4 } }, "Billed: ", formatNumber(hoveredDay.stats.inputTokens + hoveredDay.stats.outputTokens), " \xB7 Cache: ", formatNumber(hoveredDay.stats.cacheReadTokens)))
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// src/client/HeatmapModal.tsx
|
||||
import React2 from "react";
|
||||
var import_react2 = __toESM(require("react"), 1);
|
||||
function HeatmapModal({ open, onClose }) {
|
||||
if (!open) return null;
|
||||
return /* @__PURE__ */ React2.createElement(
|
||||
return /* @__PURE__ */ import_react2.default.createElement(
|
||||
"div",
|
||||
{
|
||||
role: "dialog",
|
||||
|
|
@ -531,7 +567,7 @@ function HeatmapModal({ open, onClose }) {
|
|||
overflowY: "auto"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React2.createElement(
|
||||
/* @__PURE__ */ import_react2.default.createElement(
|
||||
"div",
|
||||
{
|
||||
onClick: (e) => e.stopPropagation(),
|
||||
|
|
@ -548,7 +584,7 @@ function HeatmapModal({ open, onClose }) {
|
|||
padding: "24px 28px"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React2.createElement(
|
||||
/* @__PURE__ */ import_react2.default.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick: onClose,
|
||||
|
|
@ -572,7 +608,7 @@ function HeatmapModal({ open, onClose }) {
|
|||
},
|
||||
"\u2715"
|
||||
),
|
||||
/* @__PURE__ */ React2.createElement(HeatmapView, null)
|
||||
/* @__PURE__ */ import_react2.default.createElement(HeatmapView, null)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -597,8 +633,8 @@ function apply(ctx) {
|
|||
}
|
||||
if (typeof document !== "undefined") {
|
||||
let ModalController = function() {
|
||||
const [isOpen, setIsOpen] = useState2(false);
|
||||
useEffect2(() => {
|
||||
const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
|
||||
(0, import_react3.useEffect)(() => {
|
||||
const handleOpen = () => setIsOpen(true);
|
||||
const handleClose = () => setIsOpen(false);
|
||||
window.addEventListener("dsh:open-token-heatmap", handleOpen);
|
||||
|
|
@ -609,13 +645,13 @@ function apply(ctx) {
|
|||
window.removeEventListener("dsh:open-token-heatmap", handleOpen);
|
||||
};
|
||||
}, []);
|
||||
return /* @__PURE__ */ React3.createElement(HeatmapModal, { open: isOpen, onClose: () => setIsOpen(false) });
|
||||
return /* @__PURE__ */ import_react3.default.createElement(HeatmapModal, { open: isOpen, onClose: () => setIsOpen(false) });
|
||||
};
|
||||
const modalContainer = document.createElement("div");
|
||||
modalContainer.id = "dsh-token-heatmap-modal-root";
|
||||
document.body.appendChild(modalContainer);
|
||||
const root = createRoot(modalContainer);
|
||||
root.render(/* @__PURE__ */ React3.createElement(ModalController, null));
|
||||
const root = (0, import_client.createRoot)(modalContainer);
|
||||
root.render(/* @__PURE__ */ import_react3.default.createElement(ModalController, null));
|
||||
const observer = new MutationObserver(() => {
|
||||
const usageList = document.querySelector("[data-session-stats-usage]");
|
||||
if (!usageList) return;
|
||||
|
|
@ -679,8 +715,5 @@ function apply(ctx) {
|
|||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
}
|
||||
export {
|
||||
apply,
|
||||
inject,
|
||||
name
|
||||
};
|
||||
return module.exports; } });
|
||||
//# sourceMappingURL=client.js.map
|
||||
|
|
|
|||
7
lib/client.js.map
Normal file
7
lib/client.js.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -42,3 +42,4 @@ export {
|
|||
inject,
|
||||
name
|
||||
};
|
||||
//# sourceMappingURL=index.js.map
|
||||
|
|
|
|||
7
lib/index.js.map
Normal file
7
lib/index.js.map
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"sources": ["../src/server/index.ts"],
|
||||
"sourcesContent": ["export const name = \"dsh-plugin-token-heatmap\";\nexport const inject = [\"webServer\"];\n\nexport function apply(ctx: any) {\n ctx.effect(() =>\n ctx.webServer.register({\n kind: \"prefix\",\n path: \"/api/dsh-token-heatmap\",\n handler: async (req: any, res: any) => {\n const url = new URL(req.url, \"http://localhost\");\n const pathname = url.pathname.replace(/\\/+$/, \"\");\n\n res.setHeader(\"Access-Control-Allow-Origin\", \"*\");\n res.setHeader(\"Access-Control-Allow-Methods\", \"GET, OPTIONS\");\n res.setHeader(\"Access-Control-Allow-Headers\", \"Content-Type\");\n\n if (req.method === \"OPTIONS\") {\n res.writeHead(204);\n res.end();\n return;\n }\n\n if (req.method === \"GET\" && (pathname === \"/api/dsh-token-heatmap\" || pathname === \"/api/dsh-token-heatmap/stats\")) {\n try {\n const { aggregateTokens } = await import(`./aggregator.js?t=${Date.now()}`);\n const data = await aggregateTokens();\n res.writeHead(200, {\n \"Content-Type\": \"application/json; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n });\n res.end(JSON.stringify(data));\n } catch (err: any) {\n res.writeHead(500, { \"Content-Type\": \"application/json\" });\n res.end(JSON.stringify({ error: err?.message || \"Failed to aggregate token stats\" }));\n }\n return;\n }\n\n res.writeHead(404, { \"Content-Type\": \"application/json\" });\n res.end(JSON.stringify({ error: \"Not found\" }));\n },\n })\n );\n}\n"],
|
||||
"mappings": "AAAO,MAAM,OAAO;AACb,MAAM,SAAS,CAAC,WAAW;AAE3B,SAAS,MAAM,KAAU;AAC9B,MAAI;AAAA,IAAO,MACT,IAAI,UAAU,SAAS;AAAA,MACrB,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS,OAAO,KAAU,QAAa;AACrC,cAAM,MAAM,IAAI,IAAI,IAAI,KAAK,kBAAkB;AAC/C,cAAM,WAAW,IAAI,SAAS,QAAQ,QAAQ,EAAE;AAEhD,YAAI,UAAU,+BAA+B,GAAG;AAChD,YAAI,UAAU,gCAAgC,cAAc;AAC5D,YAAI,UAAU,gCAAgC,cAAc;AAE5D,YAAI,IAAI,WAAW,WAAW;AAC5B,cAAI,UAAU,GAAG;AACjB,cAAI,IAAI;AACR;AAAA,QACF;AAEA,YAAI,IAAI,WAAW,UAAU,aAAa,4BAA4B,aAAa,iCAAiC;AAClH,cAAI;AACF,kBAAM,EAAE,gBAAgB,IAAI,MAAM,OAAO,qBAAqB,KAAK,IAAI,CAAC;AACxE,kBAAM,OAAO,MAAM,gBAAgB;AACnC,gBAAI,UAAU,KAAK;AAAA,cACjB,gBAAgB;AAAA,cAChB,iBAAiB;AAAA,YACnB,CAAC;AACD,gBAAI,IAAI,KAAK,UAAU,IAAI,CAAC;AAAA,UAC9B,SAAS,KAAU;AACjB,gBAAI,UAAU,KAAK,EAAE,gBAAgB,mBAAmB,CAAC;AACzD,gBAAI,IAAI,KAAK,UAAU,EAAE,OAAO,KAAK,WAAW,kCAAkC,CAAC,CAAC;AAAA,UACtF;AACA;AAAA,QACF;AAEA,YAAI,UAAU,KAAK,EAAE,gBAAgB,mBAAmB,CAAC;AACzD,YAAI,IAAI,KAAK,UAAU,EAAE,OAAO,YAAY,CAAC,CAAC;AAAA,MAChD;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
|
||||
"names": []
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue