npm - tokenrace - Versions diffs - 0.1.20 → 0.1.22 - Mend

tokenrace 0.1.20 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/assets/index-BD6TWWBL.css +1 -0
package/dist/assets/{index-C8zpckDk.js → index-Dt3hqx3Z.js} +58 -58
package/dist/index.html +2 -2
package/package.json +1 -1
package/src/api-routes.js +6 -1
package/src/server.js +1 -4
package/src/store.js +82 -47
package/dist/assets/index-BuT9l_n-.css +0 -1

package/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>tokenrace</title>
-    <script type="module" crossorigin src="/assets/index-C8zpckDk.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BuT9l_n-.css">
+    <script type="module" crossorigin src="/assets/index-Dt3hqx3Z.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BD6TWWBL.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "tokenrace",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Monitor en tiempo real para Claude Code",
   "bin": {
     "tokenrace": "bin/cli.js"

package/src/api-routes.js CHANGED Viewed

@@ -11,7 +11,7 @@
 import { Router } from 'express'
 import {
-  getStatus, getSummary, getTimeseries, getProjects,
+  getStatus, getSummary, getTimeseries, getTimeseriesByProject, getProjects,
   getSessions, getUnlabeledSessions, getSessionEvents,
   getEvents, getTools, getAgents, getModels,
   labelSession, ignoreSession, reset, resetProject
@@ -114,6 +114,11 @@ export function createRouter({ port = 1337 } = {}) {
     res.json(getTimeseries(req.query.metric, req.query.from, req.query.bucket))
   })
+  /** GET /api/timeseries/by-project — serie temporal desglosada por proyecto, acepta ?metric, ?from, ?bucket */
+  router.get('/api/timeseries/by-project', (req, res) => {
+    res.json(getTimeseriesByProject(req.query.metric, req.query.from, req.query.bucket))
+  })
   /** GET /api/projects — proyectos con métricas, acepta ?from */
   router.get('/api/projects', (req, res) => {
     res.json(getProjects(req.query.from))

package/src/server.js CHANGED Viewed

@@ -15,7 +15,7 @@ import express from 'express'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { parseMetrics, parseEvents, parseTraces } from './otlp-parser.js'
-import { processMetric, processEvent, processTrace, loadFromDisk, startAutoSave, saveSync, drainAutoDetectQueue, labelSession } from './store.js'
+import { processMetric, processEvent, loadFromDisk, startAutoSave, saveSync, drainAutoDetectQueue, labelSession } from './store.js'
 import { detectProjectBySessionId } from './git-detector.js'
 import { createRouter, broadcast } from './api-routes.js'
@@ -92,9 +92,6 @@ export async function startServer({ port = 1337 } = {}) {
    */
   app.post('/v1/traces', (req, res) => {
     const spans = parseTraces(req.body)
-    for (const span of spans) {
-      processTrace(span)
-    }
     broadcast('trace', { count: spans.length })
     res.json({ partialSuccess: {} })
   })

package/src/store.js CHANGED Viewed

@@ -65,7 +65,6 @@ const state = {
   eventIndex:       0,
   projects:         new Map(),  // projectName → ProjectAggregates
   tools:            new Map(),  // toolName    → ToolStats
-  agents:           new Map(),  // agentId     → AgentData
   models:           new Map(),  // modelName   → ModelStats
   cumulativeValues: new Map(),  // clave → último valor acumulativo (no persiste)
   lastSeen:         null,
@@ -97,7 +96,7 @@ function normalizeIncoming(name, value, labels) {
   switch (name) {
     case 'claude_code.token.usage': {
       const type = labels.type
-      const key  = `token:${sid}:${type}:${labels.model ?? ''}:${labels.query_source ?? ''}`
+      const key  = `token:${sid}:${type}:${labels.model ?? ''}:${labels.query_source ?? ''}:${labels['agent.name'] ?? ''}`
       const delta = cumulativeDelta(key, value)
       const nameMap = {
         'input':         'claude_code.tokens.input',
@@ -110,7 +109,7 @@ function normalizeIncoming(name, value, labels) {
     }
     case 'claude_code.cost.usage': {
-      const key   = `cost:${sid}:${labels.model ?? ''}:${labels.query_source ?? ''}:${labels.effort ?? ''}`
+      const key   = `cost:${sid}:${labels.model ?? ''}:${labels.query_source ?? ''}:${labels.effort ?? ''}:${labels['agent.name'] ?? ''}`
       const delta = cumulativeDelta(key, value)
       return { name: 'claude_code.cost', value: delta }
     }
@@ -409,15 +408,15 @@ export function processEvent({ eventName, timestamp, severity, attributes }) {
       session.apiRequests++
     }
-    // ── Tool stats ──
-    if (eventName === 'tool_use') {
+    // ── Tool stats de sesión ──
+    if (eventName === 'tool_result') {
       session.toolCalls++
     }
   }
-  // ── Tool stats globales ──
-  if (eventName === 'tool_use') {
-    const toolName = attributes['tool.name'] ?? attributes.tool ?? 'unknown'
+  // ── Tool stats globales — Claude Code envía tool_result (no tool_use) ──
+  if (eventName === 'tool_result') {
+    const toolName = attributes['tool_name'] ?? attributes['tool.name'] ?? 'unknown'
     if (!state.tools.has(toolName)) {
       state.tools.set(toolName, { count: 0, successes: 0, totalDurationMs: 0 })
@@ -425,12 +424,11 @@ export function processEvent({ eventName, timestamp, severity, attributes }) {
     const tool = state.tools.get(toolName)
     tool.count++
-    if (attributes.success === true || attributes['tool.success'] === true) {
+    if (attributes.success === true || attributes.success === 'true') {
       tool.successes++
     }
-    if (attributes['tool.duration_ms'] !== undefined) {
-      tool.totalDurationMs += Number(attributes['tool.duration_ms'])
-    }
+    const durMs = Number(attributes['duration_ms'] ?? attributes['tool.duration_ms'] ?? 0)
+    if (durMs > 0) tool.totalDurationMs += durMs
   }
   state.lastSeen   = timestamp
@@ -439,33 +437,6 @@ export function processEvent({ eventName, timestamp, severity, attributes }) {
   return eventObj
 }
-/**
- * Procesa un span normalizado.
- * Solo actúa si el span tiene agentId.
- * @param {Object} span
- */
-export function processTrace(span) {
-  const attrs   = span.attributes
-  const agentId = attrs['agent.id'] ?? attrs['gen_ai.agent.id'] ?? null
-  if (!agentId) return
-  if (!state.agents.has(agentId)) {
-    state.agents.set(agentId, {
-      agentId,
-      parentAgentId: attrs['agent.parent_id'] ?? null,
-      tokensInput:  0,
-      tokensOutput: 0,
-      cost:         0,
-      toolCalls:    0,
-      durationMs:   0
-    })
-  }
-  const agent    = state.agents.get(agentId)
-  const duration = span.endTime - span.startTime
-  if (duration > 0) agent.durationMs += duration
-}
 /**
  * Asigna un proyecto a una sesión, con aplicación retroactiva.
  * @param {string} sessionId
@@ -507,7 +478,6 @@ export function reset() {
   state.eventIndex    = 0
   state.projects.clear()
   state.tools.clear()
-  state.agents.clear()
   state.models.clear()
   state.cumulativeValues.clear()
   state.lastSeen    = null
@@ -694,6 +664,36 @@ export function getTimeseries(metric, from, bucket) {
  * Proyectos con sus métricas agregadas filtradas por rango temporal.
  * @param {string} from
  */
+/**
+ * Serie temporal de una métrica desglosada por proyecto.
+ * Devuelve [{ timestamp, projects: { [projectName]: value } }]
+ */
+export function getTimeseriesByProject(metric, from, bucket) {
+  const minTs    = parseTimeRange(from)
+  const bucketMs = parseBucket(bucket)
+  const points   = state.timeseries.get(metric) ?? []
+  // Map: bucketKey → Map<projectName, value>
+  const buckets = new Map()
+  for (const point of points) {
+    if (point.ts < minTs) continue
+    const sid = point.labels['session.id']
+    if (sid && state.ignoredSessions.has(sid)) continue
+    const proj = resolveProject(sid, point.labels.project) ?? '(sin proyecto)'
+    const key  = Math.floor(point.ts / bucketMs) * bucketMs
+    if (!buckets.has(key)) buckets.set(key, new Map())
+    const byProj = buckets.get(key)
+    byProj.set(proj, (byProj.get(proj) ?? 0) + point.value)
+  }
+  return Array.from(buckets.entries())
+    .map(([timestamp, byProj]) => ({
+      timestamp,
+      projects: Object.fromEntries(byProj),
+    }))
+    .sort((a, b) => a.timestamp - b.timestamp)
+}
 export function getProjects(from) {
   const minTs  = parseTimeRange(from)
   const result = []
@@ -856,24 +856,51 @@ export function getTools(from) {
     avgDurationMs:  stats.count > 0 ? stats.totalDurationMs / stats.count : 0
   })).sort((a, b) => b.count - a.count)
-  // Tasa de aprobación/rechazo desde eventos en el rango
+  // Tasa de aprobación/rechazo desde tool_result (Claude Code usa decision_type)
   let approved = 0
   let rejected = 0
   for (const event of state.events) {
     if (event.timestamp < minTs) continue
-    if (event.eventName !== 'tool_use' && !event.eventName.includes('tool')) continue
-    if (event.attributes.approved === true)  approved++
-    if (event.attributes.approved === false) rejected++
+    if (event.eventName !== 'tool_result') continue
+    if (event.attributes['decision_type'] === 'accept') approved++
+    else if (event.attributes['decision_type'] === 'reject') rejected++
   }
   return { usage, decisionRate: { approved, rejected } }
 }
 /**
- * Lista de agentes registrados.
+ * Estadísticas de subagentes (Task tool), derivadas de las métricas de tokens
+ * y coste cuyas labels traen query_source: "subagent" y agent.name.
+ * Claude Code no emite eventos/spans con identidad de agente individual, así
+ * que se agrega por nombre de agente (p. ej. "Explore", "general-purpose").
  */
 export function getAgents() {
-  return Array.from(state.agents.values())
+  const byAgent = new Map() // agentName → { tokensInput, tokensOutput, cost }
+  const metricField = {
+    'claude_code.tokens.input':  'tokensInput',
+    'claude_code.tokens.output': 'tokensOutput',
+    'claude_code.cost':          'cost'
+  }
+  for (const [metricName, field] of Object.entries(metricField)) {
+    for (const point of state.timeseries.get(metricName) ?? []) {
+      const labels = point.labels
+      if (labels.query_source !== 'subagent') continue
+      const name = labels['agent.name']
+      if (!name) continue
+      if (!byAgent.has(name)) {
+        byAgent.set(name, { tokensInput: 0, tokensOutput: 0, cost: 0 })
+      }
+      byAgent.get(name)[field] += point.value
+    }
+  }
+  return Array.from(byAgent.entries())
+    .map(([name, stats]) => ({ name, ...stats }))
+    .sort((a, b) => b.cost - a.cost)
 }
 /**
@@ -918,7 +945,8 @@ export function saveSync() {
       events:           state.events,
       eventIndex:       state.eventIndex,
       totalEvents:      state.totalEvents,
-      startTime:        state.startTime
+      startTime:        state.startTime,
+      tools:            Array.from(state.tools.entries())
     }
     fs.writeFileSync(dataFile, JSON.stringify(data), { mode: 0o600 })
@@ -989,6 +1017,13 @@ export function loadFromDisk() {
       state.startTime = data.startTime
     }
+    // Restaurar stats de herramientas
+    if (Array.isArray(data.tools)) {
+      for (const [toolName, stats] of data.tools) {
+        state.tools.set(toolName, stats)
+      }
+    }
     // Re-aplicar mappings a sesiones (timeseries no necesitan propagación:
     // resolveProject() consulta sessionMappings primero en todos los lectores)
     for (const [sessionId, project] of state.sessionMappings.entries()) {

package/dist/assets/index-BuT9l_n-.css DELETED Viewed

@@ -1 +0,0 @@

- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:JetBrains Mono,Fira Code,Menlo,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.right-2{right:.5rem}.top-0{top:0}.top-10{top:2.5rem}.top-2{top:.5rem}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-2{height:.5rem}.h-48{height:12rem}.h-\[600px\]{height:600px}.h-full{height:100%}.max-h-40{max-height:10rem}.min-h-\[60vh\]{min-height:60vh}.min-h-screen{min-height:100vh}.w-2{width:.5rem}.w-20{width:5rem}.w-24{width:6rem}.w-32{width:8rem}.w-44{width:11rem}.w-6{width:1.5rem}.w-full{width:100%}.min-w-0{min-width:0px}.min-w-\[640px\]{min-width:640px}.min-w-\[720px\]{min-width:720px}.max-w-screen-2xl{max-width:1536px}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-accent-green{--tw-border-opacity: 1;border-color:rgb(255 107 53 / var(--tw-border-opacity, 1))}.border-bg-border{--tw-border-opacity: 1;border-color:rgb(26 26 26 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.bg-accent-green{--tw-bg-opacity: 1;background-color:rgb(255 107 53 / var(--tw-bg-opacity, 1))}.bg-accent-purple{--tw-bg-opacity: 1;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))}.bg-accent-teal{--tw-bg-opacity: 1;background-color:rgb(0 212 170 / var(--tw-bg-opacity, 1))}.bg-accent-yellow{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-bg-base{--tw-bg-opacity: 1;background-color:rgb(20 25 31 / var(--tw-bg-opacity, 1))}.bg-bg-card,.bg-bg-subtle{--tw-bg-opacity: 1;background-color:rgb(33 38 43 / var(--tw-bg-opacity, 1))}.bg-text-muted{--tw-bg-opacity: 1;background-color:rgb(68 68 68 / var(--tw-bg-opacity, 1))}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:JetBrains Mono,Fira Code,Menlo,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-accent-blue{--tw-text-opacity: 1;color:rgb(77 166 255 / var(--tw-text-opacity, 1))}.text-accent-green,.text-accent-orange{--tw-text-opacity: 1;color:rgb(255 107 53 / var(--tw-text-opacity, 1))}.text-accent-purple{--tw-text-opacity: 1;color:rgb(168 85 247 / var(--tw-text-opacity, 1))}.text-accent-teal{--tw-text-opacity: 1;color:rgb(0 212 170 / var(--tw-text-opacity, 1))}.text-accent-yellow{--tw-text-opacity: 1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-text-muted{--tw-text-opacity: 1;color:rgb(68 68 68 / var(--tw-text-opacity, 1))}.text-text-primary{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-text-secondary{--tw-text-opacity: 1;color:rgb(136 136 136 / var(--tw-text-opacity, 1))}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--bg-base: #14191F;--bg-card: #21262B;--bg-card-hover: #272d33;--bg-border: #1a1a1a;--bg-subtle: #21262B;--text-primary: #ffffff;--text-secondary: #888888;--text-muted: #444444;--accent-green: #ff6b35;--accent-blue: #4da6ff;--accent-purple: #a855f7;--accent-orange: #ff6b35;--accent-teal: #00d4aa;--accent-yellow: #fbbf24}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0;background-color:#14191f;color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0d0d0d}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444}.hover\:border-accent-green:hover{--tw-border-opacity: 1;border-color:rgb(255 107 53 / var(--tw-border-opacity, 1))}.hover\:bg-bg-base:hover{--tw-bg-opacity: 1;background-color:rgb(20 25 31 / var(--tw-bg-opacity, 1))}.hover\:bg-bg-card:hover{--tw-bg-opacity: 1;background-color:rgb(33 38 43 / var(--tw-bg-opacity, 1))}.hover\:bg-bg-card-hover:hover{--tw-bg-opacity: 1;background-color:rgb(39 45 51 / var(--tw-bg-opacity, 1))}.hover\:text-accent-orange:hover{--tw-text-opacity: 1;color:rgb(255 107 53 / var(--tw-text-opacity, 1))}.hover\:text-text-primary:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:text-text-secondary:hover{--tw-text-opacity: 1;color:rgb(136 136 136 / var(--tw-text-opacity, 1))}.hover\:opacity-80:hover{opacity:.8}.focus\:border-accent-green:focus{--tw-border-opacity: 1;border-color:rgb(255 107 53 / var(--tw-border-opacity, 1))}.disabled\:opacity-40:disabled{opacity:.4}@media(min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}