usage-panel-opencode 0.1.0 → 0.1.1

package/README.md

@@ -22,7 +22,7 @@ Instala las dependencias (`bun install`). Para una instalación publicada, añad
 }
 ```
 
-Para desarrollo en este repositorio, usa `"plugins": ["./"]`. El paquete incluye piezas separadas de servidor y TUI.
+Para desarrollo en este repositorio, ejecuta `bun run build` y usa `"plugins": ["./"]`; vuelve a ejecutar el build tras cambiar el TUI. El paquete incluye piezas separadas de servidor y TUI. `prepack` compila el TUI con el transform de Solid antes de publicar, sin depender del `bunfig.toml` de la aplicación consumidora.
 
 ## Preferencias
 

package/dist/tui.js

@@ -0,0 +1,960 @@
+// @bun
+// src/tui.tsx
+import { createComponent as _$createComponent3 } from "@opentui/solid";
+import { Plugin } from "@opencode/plugin/tui";
+import { createSignal } from "solid-js";
+
+// src/config.ts
+var DEFAULT_PREFERENCES = Object.freeze({
+  enabled: true,
+  intervalSeconds: 60,
+  visible: true
+});
+
+// src/rpc.ts
+import { Rpc } from "@opencode/plugin/rpc";
+var emptyObjectSchema = {
+  type: "object",
+  properties: {},
+  additionalProperties: false
+};
+var instanceInputSchema = {
+  type: "object",
+  properties: { instanceId: { type: "string", minLength: 1, maxLength: 128 } },
+  required: ["instanceId"],
+  additionalProperties: false
+};
+var nullableStringSchema = {
+  anyOf: [{ type: "string" }, { type: "null" }]
+};
+var nullableNumberSchema = {
+  anyOf: [{ type: "number" }, { type: "null" }]
+};
+var panelSnapshotSchema = {
+  type: "object",
+  properties: {
+    state: {
+      type: "string",
+      enum: ["loading", "ready", "stale", "no_subscription", "needs_auth", "error"]
+    },
+    snapshot: {
+      anyOf: [
+        {
+          type: "object",
+          properties: {
+            account: {
+              type: "object",
+              properties: {
+                credentialKind: { type: "string", enum: ["oauth", "key", "none"] },
+                label: nullableStringSchema,
+                accountId: {
+                  anyOf: [{ type: "string" }, { type: "null" }]
+                },
+                planHint: nullableStringSchema,
+                organization: {
+                  anyOf: [{ type: "boolean" }, { type: "null" }]
+                },
+                expiresAt: nullableNumberSchema
+              },
+              required: ["credentialKind"],
+              additionalProperties: false
+            },
+            plan: {
+              anyOf: [
+                {
+                  type: "object",
+                  properties: {
+                    type: { type: "string" },
+                    label: { type: "string" }
+                  },
+                  required: ["type", "label"],
+                  additionalProperties: false
+                },
+                { type: "null" }
+              ]
+            },
+            windows: {
+              type: "array",
+              minItems: 0,
+              maxItems: 8,
+              items: {
+                type: "object",
+                properties: {
+                  kind: { type: "string", enum: ["five_hour", "weekly", "other"] },
+                  label: { type: "string", minLength: 1 },
+                  applicable: { type: "boolean" },
+                  availability: {
+                    type: "string",
+                    enum: ["applicable", "not_applicable", "unknown"]
+                  },
+                  usedPercent: {
+                    anyOf: [{ type: "number", minimum: 0, maximum: 100 }, { type: "null" }]
+                  },
+                  remainingPercent: {
+                    anyOf: [{ type: "number", minimum: 0, maximum: 100 }, { type: "null" }]
+                  },
+                  resetsAt: nullableNumberSchema,
+                  source: { type: "string", enum: ["service", "headers"] }
+                },
+                required: [
+                  "kind",
+                  "label",
+                  "applicable",
+                  "usedPercent",
+                  "remainingPercent",
+                  "resetsAt",
+                  "source"
+                ],
+                additionalProperties: false
+              }
+            },
+            origin: {
+              type: "object",
+              properties: {
+                kind: { type: "string", enum: ["service", "headers", "mixed", "none"] },
+                fetchedAt: nullableNumberSchema,
+                detail: nullableStringSchema
+              },
+              required: ["kind", "fetchedAt", "detail"],
+              additionalProperties: false
+            }
+          },
+          required: ["account", "plan", "windows", "origin"],
+          additionalProperties: false
+        },
+        { type: "null" }
+      ]
+    },
+    error: {
+      anyOf: [
+        {
+          type: "object",
+          properties: {
+            kind: {
+              type: "string",
+              enum: [
+                "network",
+                "rate_limited",
+                "unauthorized",
+                "forbidden",
+                "malformed",
+                "unknown"
+              ]
+            },
+            message: { type: "string" },
+            action: nullableStringSchema
+          },
+          required: ["kind", "message"],
+          additionalProperties: false
+        },
+        { type: "null" }
+      ]
+    },
+    refreshNotice: {
+      anyOf: [
+        {
+          type: "object",
+          properties: {
+            kind: { type: "string", enum: ["limited", "in_progress"] },
+            retryAt: { type: "number", minimum: 0 },
+            message: { type: "string" }
+          },
+          required: ["kind", "retryAt", "message"],
+          additionalProperties: false
+        },
+        { type: "null" }
+      ]
+    },
+    preferences: {
+      type: "object",
+      properties: {
+        enabled: { type: "boolean" },
+        intervalSeconds: { type: "integer", minimum: 60 },
+        visible: { type: "boolean" }
+      },
+      required: ["enabled", "intervalSeconds", "visible"],
+      additionalProperties: false
+    },
+    ageMs: { type: "number", minimum: 0 },
+    retryAt: { type: "number", minimum: 0 }
+  },
+  required: ["state", "snapshot", "preferences"],
+  additionalProperties: false
+};
+var preferenceUpdateSchema = {
+  type: "object",
+  properties: {
+    enabled: { type: "boolean" },
+    intervalSeconds: { type: "integer" },
+    visible: { type: "boolean" }
+  },
+  additionalProperties: false
+};
+var usageRpcDefinition = {
+  id: "openai-usage",
+  methods: {
+    snapshot: {
+      input: instanceInputSchema,
+      output: panelSnapshotSchema
+    },
+    refresh: {
+      input: instanceInputSchema,
+      output: panelSnapshotSchema
+    },
+    setPreferences: {
+      input: preferenceUpdateSchema,
+      output: panelSnapshotSchema
+    },
+    start: {
+      input: instanceInputSchema,
+      output: emptyObjectSchema
+    },
+    stop: {
+      input: instanceInputSchema,
+      output: emptyObjectSchema
+    }
+  },
+  events: {
+    updated: {
+      schema: {
+        type: "object",
+        properties: {
+          instanceId: { type: "string", minLength: 1, maxLength: 128 },
+          data: panelSnapshotSchema
+        },
+        required: ["instanceId", "data"],
+        additionalProperties: false
+      }
+    }
+  }
+};
+var Usage = Rpc.define(usageRpcDefinition);
+
+// src/ui/detail.tsx
+import { effect as _$effect } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { TextAttributes } from "@opentui/core";
+import { For, Show } from "solid-js";
+
+// src/core/redact.ts
+var DEFAULT_MAX_LENGTH = 240;
+var TOKEN_ASSIGNMENT = /\b((?:access|refresh|id)[_-]?token|api[_-]?key|token)\s*[:=]\s*(?:"[^"]*"|'[^']*'|[^\s,;}\]]+)/gi;
+var AUTHORIZATION_HEADER = /\b(authorization\s*[:=]\s*)(?:bearer\s+)?(?:"[^"]*"|'[^']*'|[^\s,;}\]]+)/gi;
+var ACCOUNT_ID_FIELD = /(\b(?:chatgpt[-_]?account[-_]?id|account[-_]?id)\s*[:=]\s*["']?)([A-Za-z0-9_-]{4,64})/gi;
+function safeString(value) {
+  return typeof value === "string" ? value : "";
+}
+function validLimit(value) {
+  return typeof value === "number" && Number.isInteger(value) && value > 0 ? value : DEFAULT_MAX_LENGTH;
+}
+function stripTerminalSequences(text) {
+  let result = "";
+  for (let index = 0;index < text.length; index += 1) {
+    if (text.charCodeAt(index) !== 27) {
+      result += text[index];
+      continue;
+    }
+    const next = text.charCodeAt(index + 1);
+    if (next === 91) {
+      index += 2;
+      while (index < text.length && !(text.charCodeAt(index) >= 64 && text.charCodeAt(index) <= 126)) {
+        index += 1;
+      }
+    } else if (next === 93) {
+      index += 2;
+      while (index < text.length) {
+        const code = text.charCodeAt(index);
+        if (code === 7)
+          break;
+        if (code === 27 && text.charCodeAt(index + 1) === 92) {
+          index += 1;
+          break;
+        }
+        index += 1;
+      }
+    } else {
+      index += 1;
+    }
+  }
+  return result;
+}
+function stripUnsafeCharacters(text) {
+  return Array.from(text, (character) => {
+    const codePoint = character.codePointAt(0) ?? 0;
+    if (codePoint === 9)
+      return " ";
+    if (codePoint <= 31 || codePoint >= 127 && codePoint <= 159 || codePoint >= 8234 && codePoint <= 8238 || codePoint >= 8294 && codePoint <= 8297) {
+      return "";
+    }
+    return character;
+  }).join("");
+}
+function replaceExactValues(text, values) {
+  let result = text;
+  for (const value of values ?? []) {
+    if (typeof value === "string" && value.length > 0)
+      result = result.split(value).join("[redacted]");
+  }
+  return result;
+}
+function maskIdentifier(value) {
+  return maskAccountId(value) ?? "[redacted]";
+}
+function maskAccountId(value) {
+  if (typeof value !== "string" || !/^[A-Za-z0-9_-]{4,64}$/.test(value) || value.length <= 4) {
+    return null;
+  }
+  return `\u2026${value.slice(-4)}`;
+}
+function sanitizeText(value, maxLength = DEFAULT_MAX_LENGTH) {
+  const limit = validLimit(maxLength);
+  const text = stripUnsafeCharacters(stripTerminalSequences(safeString(value)).replace(/\r\n?|\n/g, " ")).replace(/\s{2,}/g, " ").trim();
+  if (text.length <= limit)
+    return text;
+  return `${text.slice(0, limit - 1)}\u2026`;
+}
+function redactText(value, options = {}) {
+  let text = safeString(value);
+  text = replaceExactValues(text, options.secrets);
+  for (const accountId of options.accountIds ?? []) {
+    if (typeof accountId === "string" && accountId.length > 0) {
+      text = text.split(accountId).join(maskIdentifier(accountId));
+    }
+  }
+  text = text.replace(AUTHORIZATION_HEADER, "$1[redacted]").replace(/\bbearer\s+[^\s,;}\]]+/gi, "Bearer [redacted]").replace(TOKEN_ASSIGNMENT, "$1=[redacted]").replace(/\bsk-[A-Za-z0-9_-]{8,}/gi, "[redacted]").replace(/\beyJ[A-Za-z0-9_-]{10,}(?:\.[A-Za-z0-9_-]+){1,2}\b/g, "[redacted]").replace(ACCOUNT_ID_FIELD, (_match, prefix, accountId) => {
+    return `${prefix}${maskIdentifier(accountId)}`;
+  });
+  return sanitizeText(text, options.maxLength);
+}
+
+// src/ui/format.ts
+function formatPercent(value) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0 || value > 100)
+    return "\u2014";
+  return `${Math.round(value)}%`;
+}
+function formatResetTime(timestamp) {
+  if (typeof timestamp !== "number" || !Number.isFinite(timestamp) || timestamp <= 0) {
+    return "no disponible";
+  }
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime()))
+    return "no disponible";
+  return new Intl.DateTimeFormat("es", { dateStyle: "medium", timeStyle: "short" }).format(date);
+}
+
+// src/ui/detail.tsx
+function safeText(value, fallback = "no disponible") {
+  if (typeof value !== "string")
+    return fallback;
+  return sanitizeText(redactText(value), 120) || fallback;
+}
+function maskedAccount(panel) {
+  const account = panel.snapshot?.account;
+  if (!account)
+    return "Cuenta no disponible";
+  if (typeof account.accountId === "string" && /^\u2026[A-Za-z0-9_-]{4}$/.test(account.accountId)) {
+    return `Cuenta ${account.accountId}`;
+  }
+  const label = typeof account.label === "string" ? safeText(account.label, "") : "";
+  const firstCharacter = Array.from(label)[0];
+  if (firstCharacter)
+    return `Cuenta ${firstCharacter}\u2026`;
+  return account.credentialKind === "none" ? "Sin cuenta conectada" : "Cuenta conectada";
+}
+function originLabel(kind) {
+  switch (kind) {
+    case "service":
+      return "servicio de ChatGPT";
+    case "headers":
+      return "cabeceras de OpenAI";
+    case "mixed":
+      return "servicio y cabeceras de OpenAI";
+    default:
+      return "no disponible";
+  }
+}
+function safeErrorMessage(kind) {
+  switch (kind) {
+    case "network":
+      return "No se pudo consultar el consumo por un problema de conexi\xF3n.";
+    case "rate_limited":
+      return "OpenAI limit\xF3 temporalmente las consultas de consumo.";
+    case "unauthorized":
+      return "La conexi\xF3n de OpenAI necesita volver a autenticarse.";
+    case "forbidden":
+      return "OpenAI no permiti\xF3 consultar el consumo de esta cuenta.";
+    case "malformed":
+      return "La respuesta de consumo no tiene un formato reconocido.";
+    default:
+      return "No se pudo obtener el consumo de OpenAI.";
+  }
+}
+function safeErrorAction(kind) {
+  switch (kind) {
+    case "unauthorized":
+      return "/connect \u2192 OpenAI";
+    case "forbidden":
+      return "Comprueba que la cuenta tenga acceso a la suscripci\xF3n.";
+    case "malformed":
+      return "Actualiza el plugin y vuelve a intentarlo.";
+    default:
+      return "Comprueba la conexi\xF3n y vuelve a intentarlo.";
+  }
+}
+function activateDetailRefresh(button, onRefresh) {
+  if (button === 0)
+    onRefresh();
+}
+function detailWindow(window) {
+  const availability = window.availability ?? (window.applicable ? "applicable" : "not_applicable");
+  if (availability === "not_applicable") {
+    return {
+      label: safeText(window.label),
+      applicable: false,
+      availability,
+      remaining: "no aplica",
+      used: "no aplica",
+      reset: "no disponible"
+    };
+  }
+  if (availability === "unknown") {
+    return {
+      label: safeText(window.label),
+      applicable: false,
+      availability,
+      remaining: "sin datos",
+      used: "sin datos",
+      reset: "no disponible"
+    };
+  }
+  const percent = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 100 ? formatPercent(value) : "no disponible";
+  return {
+    label: safeText(window.label),
+    applicable: true,
+    availability,
+    remaining: percent(window.remainingPercent),
+    used: percent(window.usedPercent),
+    reset: formatResetTime(window.resetsAt)
+  };
+}
+function retryCountdown(retryAt, now) {
+  const remaining = Math.max(0, retryAt - now);
+  if (remaining < 1000)
+    return "menos de 1 s";
+  const seconds = Math.ceil(remaining / 1000);
+  if (seconds < 60)
+    return `${seconds} s`;
+  return `${Math.ceil(seconds / 60)} min`;
+}
+function buildDetailViewModel(panel, now = Date.now(), refreshing = false) {
+  const snapshot = panel.snapshot;
+  const safeError = panel.error ? safeErrorMessage(panel.error.kind) : null;
+  const rawMessage = panel.state === "stale" ? `Se muestra la \xFAltima lectura disponible.${safeError ? ` ${safeError}` : ""}` : safeError ?? (panel.state === "loading" ? "Cargando consumo\u2026" : panel.state === "no_subscription" ? "Esta conexi\xF3n no tiene cuotas de suscripci\xF3n que mostrar." : panel.state === "needs_auth" ? "Vuelve a conectar OpenAI para consultar el consumo." : panel.state === "error" ? "No se pudo obtener el consumo." : null);
+  const message = rawMessage ? safeText(rawMessage) : null;
+  const action = (panel.error ? safeErrorAction(panel.error.kind) : null) ?? (panel.state === "needs_auth" ? "/connect \u2192 OpenAI" : panel.state === "error" ? "Vuelve a intentarlo." : null);
+  const refreshNotice = panel.refreshNotice;
+  return {
+    title: "Detalle del consumo de OpenAI",
+    plan: safeText(snapshot?.plan?.label ?? snapshot?.account.planHint),
+    account: maskedAccount(panel),
+    scope: "Alcance de cuota: desconocido (no verificado para esta fuente y cuenta).",
+    origin: originLabel(snapshot?.origin.kind),
+    windows: snapshot?.windows.map(detailWindow) ?? [],
+    message,
+    action: action ? safeText(action) : null,
+    refreshMessage: refreshNotice ? refreshNotice.kind === "limited" ? `Se conserva el dato actual. Podr\xE1s reintentar en ${retryCountdown(refreshNotice.retryAt, now)}.` : `Ya hay una consulta en curso. Podr\xE1s reintentar en ${retryCountdown(refreshNotice.retryAt, now)}.` : null,
+    refreshing
+  };
+}
+function Detail(props) {
+  const base = props.theme.text?.base ?? "white";
+  const muted = props.theme.text?.muted ?? base;
+  const view = () => buildDetailViewModel(props.panel, Date.now(), props.refreshing);
+  return (() => {
+    var _el$ = _$createElement("box"), _el$2 = _$createElement("text"), _el$6 = _$createElement("text"), _el$7 = _$createTextNode(`Plan: `), _el$8 = _$createElement("text"), _el$9 = _$createElement("text"), _el$0 = _$createElement("text"), _el$1 = _$createTextNode(`Origen: `), _el$13 = _$createElement("text"), _el$14 = _$createElement("text");
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$6);
+    _$insertNode(_el$, _el$8);
+    _$insertNode(_el$, _el$9);
+    _$insertNode(_el$, _el$0);
+    _$insertNode(_el$, _el$13);
+    _$insertNode(_el$, _el$14);
+    _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "padding", 1);
+    _$setProp(_el$2, "fg", base);
+    _$insert(_el$2, () => view().title);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return view().message;
+      },
+      get children() {
+        var _el$3 = _$createElement("text");
+        _$setProp(_el$3, "fg", muted);
+        _$insert(_el$3, () => view().message);
+        return _el$3;
+      }
+    }), _el$6);
+    _$insert(_el$, _$createComponent(For, {
+      get each() {
+        return view().windows;
+      },
+      children: (window) => (() => {
+        var _el$16 = _$createElement("box"), _el$17 = _$createElement("text"), _el$18 = _$createElement("text"), _el$19 = _$createTextNode(`Restante: `), _el$20 = _$createTextNode(` \xB7 Consumido: `), _el$21 = _$createElement("text"), _el$22 = _$createTextNode(`Reinicio: `);
+        _$insertNode(_el$16, _el$17);
+        _$insertNode(_el$16, _el$18);
+        _$insertNode(_el$16, _el$21);
+        _$setProp(_el$16, "flexDirection", "column");
+        _$setProp(_el$16, "paddingTop", 1);
+        _$setProp(_el$17, "fg", base);
+        _$insert(_el$17, () => window.label, null);
+        _$insert(_el$17, () => window.availability === "not_applicable" ? " \xB7 no aplica" : "", null);
+        _$insertNode(_el$18, _el$19);
+        _$insertNode(_el$18, _el$20);
+        _$setProp(_el$18, "fg", muted);
+        _$insert(_el$18, () => window.remaining, _el$20);
+        _$insert(_el$18, () => window.used, null);
+        _$insertNode(_el$21, _el$22);
+        _$setProp(_el$21, "fg", muted);
+        _$insert(_el$21, () => window.reset, null);
+        _$effect((_$p) => _$setProp(_el$17, "attributes", TextAttributes.BOLD, _$p));
+        return _el$16;
+      })()
+    }), _el$6);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!props.panel.snapshot)() && props.panel.snapshot.windows.length === 0;
+      },
+      get children() {
+        var _el$4 = _$createElement("text");
+        _$insertNode(_el$4, _$createTextNode(`Sin ventanas de cuota aplicables.`));
+        _$setProp(_el$4, "fg", muted);
+        return _el$4;
+      }
+    }), _el$6);
+    _$insertNode(_el$6, _el$7);
+    _$setProp(_el$6, "fg", muted);
+    _$insert(_el$6, () => view().plan, null);
+    _$setProp(_el$8, "fg", muted);
+    _$insert(_el$8, () => view().account);
+    _$setProp(_el$9, "fg", muted);
+    _$insert(_el$9, () => view().scope);
+    _$insertNode(_el$0, _el$1);
+    _$setProp(_el$0, "fg", muted);
+    _$insert(_el$0, () => view().origin, null);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return view().action;
+      },
+      get children() {
+        var _el$10 = _$createElement("text"), _el$11 = _$createTextNode(`Acci\xF3n: `);
+        _$insertNode(_el$10, _el$11);
+        _$setProp(_el$10, "fg", muted);
+        _$insert(_el$10, () => view().action, null);
+        return _el$10;
+      }
+    }), _el$13);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return view().refreshMessage;
+      },
+      get children() {
+        var _el$12 = _$createElement("text");
+        _$setProp(_el$12, "fg", muted);
+        _$insert(_el$12, () => view().refreshMessage);
+        return _el$12;
+      }
+    }), _el$13);
+    _$setProp(_el$13, "fg", base);
+    _$setProp(_el$13, "onMouseUp", (event) => activateDetailRefresh(event.button, props.onRefresh));
+    _$insert(_el$13, () => view().refreshing ? "Actualizando\u2026" : "Actualizar consumo");
+    _$insertNode(_el$14, _$createTextNode(`Volver`));
+    _$setProp(_el$14, "fg", muted);
+    _$setProp(_el$14, "onMouseUp", (event) => activateDetailRefresh(event.button, props.onBack));
+    _$effect((_$p) => _$setProp(_el$2, "attributes", TextAttributes.BOLD, _$p));
+    return _el$;
+  })();
+}
+
+// src/ui/sidebar.tsx
+import { insert as _$insert2 } from "@opentui/solid";
+import { createComponent as _$createComponent2 } from "@opentui/solid";
+import { effect as _$effect2 } from "@opentui/solid";
+import { createTextNode as _$createTextNode2 } from "@opentui/solid";
+import { insertNode as _$insertNode2 } from "@opentui/solid";
+import { memo as _$memo2 } from "@opentui/solid";
+import { setProp as _$setProp2 } from "@opentui/solid";
+import { createElement as _$createElement2 } from "@opentui/solid";
+import { TextAttributes as TextAttributes2 } from "@opentui/core";
+import { For as For2, Show as Show2 } from "solid-js";
+
+// src/ui/theme.ts
+function usageTheme(theme) {
+  return {
+    text: {
+      base: theme.text?.base ?? "white",
+      muted: theme.text?.muted ?? theme.text?.base ?? "white"
+    }
+  };
+}
+
+// src/ui/sidebar.tsx
+var SIDEBAR_WIDTH_CAP = 28;
+var RESERVED_MAIN_CONTENT_WIDTH = 64;
+var MINIMUM_USEFUL_WIDTH = 14;
+var RESERVED_HOST_CONTENT_HEIGHT = 7;
+function sidebarWidthForTerminal(terminalWidth, terminalHeight = Number.POSITIVE_INFINITY, requiredRows = 5) {
+  if (!Number.isFinite(terminalWidth) || !Number.isFinite(requiredRows) || requiredRows < 0 || Number.isFinite(terminalHeight) && Math.floor(terminalHeight) - RESERVED_HOST_CONTENT_HEIGHT < requiredRows) {
+    return null;
+  }
+  const available = Math.min(SIDEBAR_WIDTH_CAP, Math.floor(terminalWidth) - RESERVED_MAIN_CONTENT_WIDTH);
+  return available >= MINIMUM_USEFUL_WIDTH ? available : null;
+}
+function compactLabel(window) {
+  if (window.kind === "five_hour")
+    return "5h";
+  if (window.kind === "weekly")
+    return "Sem";
+  return window.label;
+}
+function retrySuffix(panel, now) {
+  const retryAt = panel.retryAt ?? panel.refreshNotice?.retryAt;
+  if (typeof retryAt !== "number" || !Number.isFinite(retryAt))
+    return "";
+  const seconds = Math.max(0, Math.ceil((retryAt - now) / 1000));
+  return ` \xB7 reintento en ${seconds}s`;
+}
+function initialFailureLines(panel, width, now, requiresAuth) {
+  const retryAt = panel.retryAt ?? panel.refreshNotice?.retryAt;
+  const retrySeconds = typeof retryAt === "number" && Number.isFinite(retryAt) ? Math.max(0, Math.ceil((retryAt - now) / 1000)) : null;
+  if (width < MINIMUM_USEFUL_WIDTH) {
+    const action = requiresAuth ? "/connect" : "/usage-detail";
+    return [`Consumo \xB7 ${action}${retrySuffix(panel, now)}`.slice(0, width)];
+  }
+  if (width < 27) {
+    return ["5h \xB7 \u2014", "Sem \xB7 \u2014", "Sin lectura", ...requiresAuth ? ["Reconecta OpenAI", "/connect"] : ["/usage-detail"], ...!requiresAuth && retrySeconds !== null ? [`reintento en ${retrySeconds}s`] : []].map((line) => line.slice(0, width));
+  }
+  return ["5 h \xB7 \u2014", "Semanal \xB7 \u2014", requiresAuth ? "Sin lectura \xB7 Requiere acceso" : "Sin lectura \xB7 Fallo inicial", requiresAuth ? "Reconecta OpenAI \xB7 /connect" : "Acci\xF3n: /usage-detail", ...!requiresAuth && retrySeconds !== null ? [`reintento en ${retrySeconds}s`] : []].map((line) => line.slice(0, width));
+}
+function progressBar(remaining, size) {
+  const filled = Math.max(0, Math.min(size, Math.round(remaining / 100 * size)));
+  return `[${"\u2501".repeat(filled)}${"\u2500".repeat(size - filled)}]`;
+}
+function activateSidebarDetail(button, onOpenDetail) {
+  if (button === 0)
+    onOpenDetail?.();
+}
+function buildWindowLine(window, width, labelWidth) {
+  const compact = width < 27;
+  const label = (compact ? compactLabel(window) : window.label).slice(0, labelWidth);
+  const alignedLabel = label.padEnd(labelWidth);
+  const availability = window.availability ?? (window.applicable ? "applicable" : "not_applicable");
+  if (availability === "unknown") {
+    const line = compact ? `${alignedLabel} sin datos`.trim() : `${alignedLabel}  sin datos`;
+    return line.slice(0, width);
+  }
+  if (availability === "not_applicable") {
+    const line = compact ? `${alignedLabel} n/a`.trim() : `${alignedLabel}  no aplica`;
+    return line.slice(0, width);
+  }
+  if (window.remainingPercent === null) {
+    const line = compact ? `${alignedLabel} sin datos`.trim() : `${alignedLabel}  sin datos`;
+    return line.slice(0, width);
+  }
+  if (compact) {
+    const percent = formatPercent(window.remainingPercent);
+    const smallBar = width >= 14 ? progressBar(window.remainingPercent, 1) : "";
+    const line = `${alignedLabel}${smallBar ? ` ${smallBar}` : ""} ${percent}`;
+    return line.slice(0, width);
+  }
+  const percent = formatPercent(window.remainingPercent);
+  const fixedLength = labelWidth + 2 + 2 + 2 + 4;
+  const barSize = Math.max(2, Math.min(12, width - fixedLength));
+  const line = `${alignedLabel}  ${progressBar(window.remainingPercent, barSize)}  ${percent.padStart(4)}`;
+  return line.length <= width ? line : line.slice(0, width);
+}
+function buildSidebarLines(panel, options = {}) {
+  if (!panel.preferences.enabled || !panel.preferences.visible)
+    return [];
+  const width = Math.max(1, Math.floor(options.width ?? 80));
+  const now = options.now ?? Date.now();
+  if (panel.state === "loading")
+    return ["5 h \xB7 cargando\u2026".slice(0, width), "Semanal \xB7 cargando\u2026".slice(0, width)];
+  if (panel.state === "no_subscription")
+    return ["Sin cuota de suscripci\xF3n".slice(0, width)];
+  if (panel.state === "needs_auth" || panel.state === "error" && !panel.snapshot && panel.error?.kind === "unauthorized") {
+    return initialFailureLines(panel, width, now, true);
+  }
+  if (panel.state === "error" && !panel.snapshot) {
+    return initialFailureLines(panel, width, now, false);
+  }
+  if (!panel.snapshot)
+    return ["Consumo no disponible".slice(0, width)];
+  const windows = panel.snapshot.windows;
+  if (windows.length === 0)
+    return ["Sin ventanas de cuota".slice(0, width)];
+  const compactWindows = windows.filter((window) => window.kind === "five_hour" || window.kind === "weekly");
+  if (compactWindows.length === 0) {
+    return ["5 h \xB7 sin datos", "Semanal \xB7 sin datos"].map((line) => line.slice(0, width));
+  }
+  const compact = width < 27;
+  const labelWidth = Math.min(compact ? 3 : 10, Math.max(...compactWindows.map((window) => (compact ? compactLabel(window) : window.label).length)));
+  return compactWindows.map((window) => buildWindowLine(window, width, labelWidth));
+}
+function sidebarRequiredRows(panel, refreshing = false, width = 80) {
+  if (!panel.preferences.enabled || !panel.preferences.visible)
+    return 0;
+  const lines = buildSidebarLines(panel, {
+    width
+  });
+  if (lines.length === 0)
+    return 0;
+  const contentRows = 1 + lines.length * 2;
+  return contentRows + (refreshing ? 2 : 0);
+}
+function Sidebar(props) {
+  const width = props.width;
+  if (typeof width !== "number" || !Number.isFinite(width) || width < MINIMUM_USEFUL_WIDTH) {
+    return null;
+  }
+  const tokens = usageTheme(props.theme);
+  const lines = () => buildSidebarLines(props.panel, {
+    width
+  });
+  return (() => {
+    var _el$ = _$createElement2("box");
+    _$setProp2(_el$, "width", width);
+    _$setProp2(_el$, "flexDirection", "column");
+    _$setProp2(_el$, "onMouseUp", (event) => activateSidebarDetail(event.button, props.onOpenDetail));
+    _$insert2(_el$, _$createComponent2(Show2, {
+      get when() {
+        return _$memo2(() => !!props.panel.preferences.enabled)() && props.panel.preferences.visible;
+      },
+      get children() {
+        var _el$2 = _$createElement2("text");
+        _$insertNode2(_el$2, _$createTextNode2(`Uso OpenAI`));
+        _$setProp2(_el$2, "marginBottom", 1);
+        _$effect2((_p$) => {
+          var _v$ = tokens.text.base, _v$2 = TextAttributes2.BOLD;
+          _v$ !== _p$.e && (_p$.e = _$setProp2(_el$2, "fg", _v$, _p$.e));
+          _v$2 !== _p$.t && (_p$.t = _$setProp2(_el$2, "attributes", _v$2, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$2;
+      }
+    }), null);
+    _$insert2(_el$, _$createComponent2(For2, {
+      get each() {
+        return lines();
+      },
+      children: (line, index) => (() => {
+        var _el$6 = _$createElement2("text");
+        _$insert2(_el$6, line);
+        _$effect2((_p$) => {
+          var _v$3 = tokens.text.base, _v$4 = index() < lines().length - 1 ? 1 : 0;
+          _v$3 !== _p$.e && (_p$.e = _$setProp2(_el$6, "fg", _v$3, _p$.e));
+          _v$4 !== _p$.t && (_p$.t = _$setProp2(_el$6, "marginBottom", _v$4, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$6;
+      })()
+    }), null);
+    _$insert2(_el$, _$createComponent2(Show2, {
+      get when() {
+        return _$memo2(() => !!(props.panel.preferences.enabled && props.panel.preferences.visible))() && props.refreshing;
+      },
+      get children() {
+        var _el$4 = _$createElement2("text");
+        _$insertNode2(_el$4, _$createTextNode2(`Actualizando consumo\u2026`));
+        _$setProp2(_el$4, "marginTop", 1);
+        _$effect2((_$p) => _$setProp2(_el$4, "fg", tokens.text.muted, _$p));
+        return _el$4;
+      }
+    }), null);
+    return _el$;
+  })();
+}
+
+// src/tui.tsx
+var DETAIL_ROUTE_NAME = "openai-usage-detail";
+var initialPanel = {
+  state: "loading",
+  snapshot: null,
+  preferences: {
+    ...DEFAULT_PREFERENCES
+  }
+};
+function describeRefreshError(_error) {
+  return {
+    kind: "unknown",
+    message: "No se pudo actualizar el consumo de OpenAI.",
+    action: "Comprueba la conexi\xF3n y vuelve a intentarlo."
+  };
+}
+function locationKey(directory) {
+  const normalized = directory.replaceAll("\\", "/").replace(/\/+$/, "") || "/";
+  return /^[A-Za-z]:\//.test(normalized) ? normalized.toLowerCase() : normalized;
+}
+var tui_default = Plugin.define({
+  id: "openai-usage.tui",
+  setup(context) {
+    const instanceId = globalThis.crypto.randomUUID();
+    const [panel, setPanel] = createSignal(initialPanel);
+    const [refreshing, setRefreshing] = createSignal(false);
+    const usage = context.client.rpc(Usage);
+    const location = context.location ?? context.data.location.default();
+    const rpcOptions = {
+      location
+    };
+    const unsubscribe = usage.events.on("updated", (event) => {
+      if (locationKey(event.location.directory) !== locationKey(location.directory))
+        return;
+      const update = event.data;
+      if (update.instanceId !== instanceId || !update.data)
+        return;
+      setPanel(update.data);
+    });
+    const openDetail = () => {
+      context.ui.router.navigate({
+        type: "plugin",
+        name: DETAIL_ROUTE_NAME
+      });
+    };
+    const sidebarWidth = () => {
+      const terminalWidth = context.renderer.terminalWidth;
+      const terminalHeight = context.renderer.terminalHeight;
+      const availableWidth = sidebarWidthForTerminal(terminalWidth, terminalHeight, 0);
+      if (availableWidth === null)
+        return null;
+      return sidebarWidthForTerminal(terminalWidth, terminalHeight, sidebarRequiredRows(panel(), refreshing(), availableWidth));
+    };
+    const refreshNow = async () => {
+      if (refreshing())
+        return;
+      setRefreshing(true);
+      try {
+        const snapshot = await usage.refresh({
+          instanceId
+        }, rpcOptions);
+        setPanel(snapshot);
+      } catch (error) {
+        setPanel((current) => ({
+          ...current,
+          state: current.snapshot ? "stale" : "error",
+          error: describeRefreshError(error)
+        }));
+      } finally {
+        setRefreshing(false);
+      }
+    };
+    const unregisterRoute = context.ui.router.register({
+      name: DETAIL_ROUTE_NAME,
+      render: () => _$createComponent3(Detail, {
+        get panel() {
+          return panel();
+        },
+        get refreshing() {
+          return refreshing();
+        },
+        onRefresh: () => void refreshNow(),
+        onBack: () => context.ui.router.navigate({
+          type: "home"
+        }),
+        get theme() {
+          return context.theme;
+        }
+      })
+    });
+    context.keymap.layer(() => ({
+      mode: "global",
+      commands: [{
+        id: "openai-usage.detail",
+        title: "Abrir detalle del consumo de OpenAI",
+        description: "Muestra el desglose y el origen de las cuotas.",
+        group: "Consumo de OpenAI",
+        bind: false,
+        palette: true,
+        slash: {
+          name: "usage-detail",
+          aliases: ["openai-usage-detail"]
+        },
+        enabled: () => panel().preferences.enabled,
+        run: openDetail
+      }, {
+        id: "openai-usage.refresh",
+        title: "Actualizar consumo de OpenAI",
+        description: "Consulta ahora el consumo respetando el intervalo m\xEDnimo.",
+        group: "Consumo de OpenAI",
+        bind: false,
+        palette: true,
+        slash: {
+          name: "usage-refresh",
+          aliases: ["openai-usage-refresh"]
+        },
+        enabled: () => panel().preferences.enabled,
+        run: refreshNow
+      }]
+    }));
+    const unregisterSlot = context.ui.slot({
+      append: "sidebar.content",
+      render: () => _$createComponent3(Sidebar, {
+        get panel() {
+          return panel();
+        },
+        get refreshing() {
+          return refreshing();
+        },
+        get theme() {
+          return context.theme;
+        },
+        get width() {
+          return sidebarWidth();
+        },
+        onOpenDetail: openDetail
+      })
+    });
+    usage.start({
+      instanceId
+    }, rpcOptions).then(() => usage.snapshot({
+      instanceId
+    }, rpcOptions)).then((snapshot) => {
+      setPanel(snapshot);
+    }).catch(() => {
+      setPanel((current) => ({
+        ...current,
+        state: current.snapshot ? "stale" : "error",
+        error: {
+          kind: "unknown",
+          message: "No se pudo iniciar el panel de consumo.",
+          action: "Comprueba que el plugin de servidor est\xE9 cargado."
+        }
+      }));
+    });
+    return () => {
+      unsubscribe();
+      unregisterRoute();
+      unregisterSlot();
+      usage.stop({
+        instanceId
+      }, rpcOptions).catch(() => {
+        return;
+      });
+    };
+  }
+});
+export {
+  tui_default as default,
+  describeRefreshError
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "usage-panel-opencode",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "OpenCode v2 plugin for viewing ChatGPT subscription usage.",
   "type": "module",
   "main": "./src/index.ts",
@@ -8,7 +8,8 @@
     "bun": ">=1.2.0"
   },
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
   "exports": {
     ".": {
@@ -21,7 +22,7 @@
     },
     "./tui": {
       "types": "./src/tui.tsx",
-      "import": "./src/tui.tsx"
+      "import": "./dist/tui.js"
     },
     "./rpc": {
       "types": "./src/rpc.ts",
@@ -29,6 +30,8 @@
     }
   },
   "scripts": {
+    "build": "bun run scripts/build.ts",
+    "prepack": "bun run build",
     "test": "bun test",
     "typecheck": "tsc --noEmit",
     "lint": "biome check ."

package/src/core/usage-client.ts

@@ -37,7 +37,7 @@ export interface FetchUsageOptions {
 
 const USAGE_ENDPOINT = 'https://chatgpt.com/backend-api/wham/usage';
 const ACCOUNT_ID_PATTERN = /^[A-Za-z0-9_-]{4,64}$/;
-const USER_AGENT = 'usage-panel-opencode/0.1.0';
+const USER_AGENT = 'usage-panel-opencode/0.1.1';
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);