build: compile client bundle with __ModuleLoader__.load wrapper
This commit is contained in:
parent
d152526119
commit
a53865caf6
1 changed files with 105 additions and 72 deletions
177
lib/client.js
177
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";
|
||||
|
|
@ -38,12 +74,12 @@ var COLOR_THEMES = {
|
|||
}
|
||||
};
|
||||
function HeatmapView() {
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [themeKey, setThemeKey] = useState("green");
|
||||
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 [themeKey, setThemeKey] = (0, import_react.useState)("green");
|
||||
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) => {
|
||||
|
|
@ -57,10 +93,10 @@ function HeatmapView() {
|
|||
setLoading(false);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
(0, import_react.useEffect)(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
const calendarGrid = useMemo(() => {
|
||||
const calendarGrid = (0, import_react.useMemo)(() => {
|
||||
if (!data) return null;
|
||||
const weeks = [];
|
||||
const now = /* @__PURE__ */ new Date();
|
||||
|
|
@ -95,7 +131,7 @@ function HeatmapView() {
|
|||
}
|
||||
return weeks;
|
||||
}, [data]);
|
||||
const monthHeaders = useMemo(() => {
|
||||
const monthHeaders = (0, import_react.useMemo)(() => {
|
||||
if (!calendarGrid) return [];
|
||||
const headers = [];
|
||||
let lastMonth = -1;
|
||||
|
|
@ -114,10 +150,10 @@ function HeatmapView() {
|
|||
}, [calendarGrid]);
|
||||
const activeTheme = COLOR_THEMES[themeKey];
|
||||
if (loading && !data) {
|
||||
return /* @__PURE__ */ React.createElement("div", { style: { padding: "40px 20px", textAlign: "center", color: "var(--dsw-alias-label-secondary)" } }, "Loading token usage heatmap...");
|
||||
return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "40px 20px", textAlign: "center", color: "var(--dsw-alias-label-secondary)" } }, "Loading token usage heatmap...");
|
||||
}
|
||||
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,
|
||||
|
|
@ -137,7 +173,7 @@ function HeatmapView() {
|
|||
if (!data) return null;
|
||||
const { summary } = data;
|
||||
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: {
|
||||
|
|
@ -150,7 +186,7 @@ function HeatmapView() {
|
|||
color: "var(--dsw-alias-label-primary, #eeeeee)"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -162,7 +198,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: {
|
||||
|
|
@ -176,7 +212,7 @@ function HeatmapView() {
|
|||
}
|
||||
},
|
||||
"Token Usage Activity",
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -190,7 +226,7 @@ function HeatmapView() {
|
|||
},
|
||||
"Last 12 Months"
|
||||
)
|
||||
), /* @__PURE__ */ React.createElement(
|
||||
), /* @__PURE__ */ import_react.default.createElement(
|
||||
"p",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -201,7 +237,7 @@ function HeatmapView() {
|
|||
},
|
||||
"Daily token volume and request step intensity across all sessions"
|
||||
)),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -212,7 +248,7 @@ function HeatmapView() {
|
|||
padding: 2
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick: () => setThemeKey("green"),
|
||||
|
|
@ -229,7 +265,7 @@ function HeatmapView() {
|
|||
},
|
||||
"Emerald"
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick: () => setThemeKey("deepseek"),
|
||||
|
|
@ -246,7 +282,7 @@ function HeatmapView() {
|
|||
},
|
||||
"Indigo"
|
||||
)
|
||||
), /* @__PURE__ */ React.createElement(
|
||||
), /* @__PURE__ */ import_react.default.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick: fetchStats,
|
||||
|
|
@ -268,7 +304,7 @@ function HeatmapView() {
|
|||
"\u21BB Refresh"
|
||||
))
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -278,7 +314,7 @@ function HeatmapView() {
|
|||
marginBottom: 20
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -288,11 +324,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-label-primary, #ffffff)" } }, formatNumber(summary.totalTokens)),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatExact(summary.totalTokens), " total")
|
||||
/* @__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-label-primary, #ffffff)" } }, formatNumber(summary.totalTokens)),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatExact(summary.totalTokens), " total")
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -302,11 +338,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: "#10b981" } }, 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: "#10b981" } }, 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: {
|
||||
|
|
@ -316,11 +352,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 } }, "Daily Average"),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, formatNumber(summary.dailyAverage)),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, "Across ", summary.activeDays, " active days")
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Daily Average"),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, formatNumber(summary.dailyAverage)),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, "Across ", summary.activeDays, " active days")
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -330,12 +366,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 } }, "Active Streak"),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, summary.currentStreak, " ", summary.currentStreak === 1 ? "day" : "days"),
|
||||
/* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, "Longest streak: ", summary.longestStreak, " days")
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Active Streak"),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, summary.currentStreak, " ", summary.currentStreak === 1 ? "day" : "days"),
|
||||
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, "Longest streak: ", summary.longestStreak, " days")
|
||||
)
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -347,7 +383,7 @@ function HeatmapView() {
|
|||
overflowX: "auto"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -359,10 +395,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,
|
||||
|
|
@ -376,7 +412,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: {
|
||||
|
|
@ -390,14 +426,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 = activeTheme.levels[lvl];
|
||||
return /* @__PURE__ */ React.createElement(
|
||||
return /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
key: rowIdx,
|
||||
|
|
@ -421,7 +457,7 @@ function HeatmapView() {
|
|||
}
|
||||
}
|
||||
);
|
||||
}))))), /* @__PURE__ */ React.createElement(
|
||||
}))))), /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
|
|
@ -434,8 +470,8 @@ function HeatmapView() {
|
|||
color: "var(--dsw-alias-label-tertiary, #a0a0a0)"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("span", null, "Less"),
|
||||
activeTheme.levels.map((c, i) => /* @__PURE__ */ React.createElement(
|
||||
/* @__PURE__ */ import_react.default.createElement("span", null, "Less"),
|
||||
activeTheme.levels.map((c, i) => /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
key: i,
|
||||
|
|
@ -448,10 +484,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: {
|
||||
|
|
@ -471,22 +507,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: "#34d399", 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: "#34d399", 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",
|
||||
|
|
@ -506,7 +542,7 @@ function HeatmapModal({ open, onClose }) {
|
|||
overflowY: "auto"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React2.createElement(
|
||||
/* @__PURE__ */ import_react2.default.createElement(
|
||||
"div",
|
||||
{
|
||||
onClick: (e) => e.stopPropagation(),
|
||||
|
|
@ -523,7 +559,7 @@ function HeatmapModal({ open, onClose }) {
|
|||
padding: "24px 28px"
|
||||
}
|
||||
},
|
||||
/* @__PURE__ */ React2.createElement(
|
||||
/* @__PURE__ */ import_react2.default.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick: onClose,
|
||||
|
|
@ -547,7 +583,7 @@ function HeatmapModal({ open, onClose }) {
|
|||
},
|
||||
"\u2715"
|
||||
),
|
||||
/* @__PURE__ */ React2.createElement(HeatmapView, null)
|
||||
/* @__PURE__ */ import_react2.default.createElement(HeatmapView, null)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -572,8 +608,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);
|
||||
|
|
@ -584,13 +620,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 statDialogs = document.querySelectorAll(
|
||||
'div[role="dialog"][aria-label*="usage" i], div[role="dialog"][aria-label*="Token" i], [data-session-stats-usage]'
|
||||
|
|
@ -636,8 +672,5 @@ function apply(ctx) {
|
|||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
}
|
||||
export {
|
||||
apply,
|
||||
inject,
|
||||
name
|
||||
};
|
||||
return module.exports; } });
|
||||
//# sourceMappingURL=client.js.map
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue