usage-panel-opencode 0.0.0-stage → 0.1.1

package/src/ui/detail.tsx

@@ -0,0 +1,253 @@
+import { type ColorInput, TextAttributes } from '@opentui/core';
+import { For, Show } from 'solid-js';
+import { redactText, sanitizeText } from '../core/redact';
+import type {
+  OriginKind,
+  PanelErrorKind,
+  PanelSnapshot,
+  UsageWindow,
+  WindowAvailability,
+} from '../rpc';
+import { formatPercent, formatResetTime } from './format';
+
+export interface DetailWindowView {
+  label: string;
+  applicable: boolean;
+  availability: WindowAvailability;
+  remaining: string;
+  used: string;
+  reset: string;
+}
+
+export interface DetailViewModel {
+  title: string;
+  plan: string;
+  account: string;
+  scope: string;
+  origin: string;
+  windows: DetailWindowView[];
+  message: string | null;
+  action: string | null;
+  refreshMessage: string | null;
+  refreshing: boolean;
+}
+
+function safeText(value: unknown, fallback = 'no disponible'): string {
+  if (typeof value !== 'string') return fallback;
+  return sanitizeText(redactText(value), 120) || fallback;
+}
+
+function maskedAccount(panel: PanelSnapshot): string {
+  const account = panel.snapshot?.account;
+  if (!account) return 'Cuenta no disponible';
+  if (typeof account.accountId === 'string' && /^…[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}…`;
+  return account.credentialKind === 'none' ? 'Sin cuenta conectada' : 'Cuenta conectada';
+}
+
+function originLabel(kind: OriginKind | undefined): string {
+  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: PanelErrorKind | undefined): string {
+  switch (kind) {
+    case 'network':
+      return 'No se pudo consultar el consumo por un problema de conexión.';
+    case 'rate_limited':
+      return 'OpenAI limitó temporalmente las consultas de consumo.';
+    case 'unauthorized':
+      return 'La conexión de OpenAI necesita volver a autenticarse.';
+    case 'forbidden':
+      return 'OpenAI no permitió 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: PanelErrorKind | undefined): string {
+  switch (kind) {
+    case 'unauthorized':
+      return '/connect → OpenAI';
+    case 'forbidden':
+      return 'Comprueba que la cuenta tenga acceso a la suscripción.';
+    case 'malformed':
+      return 'Actualiza el plugin y vuelve a intentarlo.';
+    default:
+      return 'Comprueba la conexión y vuelve a intentarlo.';
+  }
+}
+
+export function activateDetailRefresh(button: number, onRefresh: () => void): void {
+  if (button === 0) onRefresh();
+}
+
+function detailWindow(window: UsageWindow): DetailWindowView {
+  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: number | null) =>
+    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: number, now: number): string {
+  const remaining = Math.max(0, retryAt - now);
+  if (remaining < 1_000) return 'menos de 1 s';
+  const seconds = Math.ceil(remaining / 1_000);
+  if (seconds < 60) return `${seconds} s`;
+  return `${Math.ceil(seconds / 60)} min`;
+}
+
+/** Builds a display-safe detail model independently from the OpenTUI render tree. */
+export function buildDetailViewModel(
+  panel: PanelSnapshot,
+  now = Date.now(),
+  refreshing = false,
+): DetailViewModel {
+  const snapshot = panel.snapshot;
+  const safeError = panel.error ? safeErrorMessage(panel.error.kind) : null;
+  const rawMessage =
+    panel.state === 'stale'
+      ? `Se muestra la última lectura disponible.${safeError ? ` ${safeError}` : ''}`
+      : (safeError ??
+        (panel.state === 'loading'
+          ? 'Cargando consumo…'
+          : panel.state === 'no_subscription'
+            ? 'Esta conexión no tiene cuotas de suscripción 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 → 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ás reintentar en ${retryCountdown(refreshNotice.retryAt, now)}.`
+        : `Ya hay una consulta en curso. Podrás reintentar en ${retryCountdown(refreshNotice.retryAt, now)}.`
+      : null,
+    refreshing,
+  };
+}
+
+export interface DetailProps {
+  panel: PanelSnapshot;
+  refreshing: boolean;
+  onRefresh: () => void;
+  onBack: () => void;
+  theme: { text?: { base?: ColorInput; muted?: ColorInput } };
+}
+
+export function Detail(props: DetailProps) {
+  const base = props.theme.text?.base ?? 'white';
+  const muted = props.theme.text?.muted ?? base;
+  const view = () => buildDetailViewModel(props.panel, Date.now(), props.refreshing);
+
+  return (
+    <box flexDirection="column" padding={1}>
+      <text fg={base} attributes={TextAttributes.BOLD}>
+        {view().title}
+      </text>
+      <Show when={view().message}>
+        <text fg={muted}>{view().message}</text>
+      </Show>
+      <For each={view().windows}>
+        {(window) => (
+          <box flexDirection="column" paddingTop={1}>
+            <text fg={base} attributes={TextAttributes.BOLD}>
+              {window.label}
+              {window.availability === 'not_applicable' ? ' · no aplica' : ''}
+            </text>
+            <text fg={muted}>
+              Restante: {window.remaining} · Consumido: {window.used}
+            </text>
+            <text fg={muted}>Reinicio: {window.reset}</text>
+          </box>
+        )}
+      </For>
+      <Show when={props.panel.snapshot && props.panel.snapshot.windows.length === 0}>
+        <text fg={muted}>Sin ventanas de cuota aplicables.</text>
+      </Show>
+      <text fg={muted}>Plan: {view().plan}</text>
+      <text fg={muted}>{view().account}</text>
+      <text fg={muted}>{view().scope}</text>
+      <text fg={muted}>Origen: {view().origin}</text>
+      <Show when={view().action}>
+        <text fg={muted}>Acción: {view().action}</text>
+      </Show>
+      <Show when={view().refreshMessage}>
+        <text fg={muted}>{view().refreshMessage}</text>
+      </Show>
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: OpenTUI terminal text uses mouse input for the refresh action. */}
+      <text fg={base} onMouseUp={(event) => activateDetailRefresh(event.button, props.onRefresh)}>
+        {view().refreshing ? 'Actualizando…' : 'Actualizar consumo'}
+      </text>
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: OpenTUI terminal text uses mouse input for navigation. */}
+      <text fg={muted} onMouseUp={(event) => activateDetailRefresh(event.button, props.onBack)}>
+        Volver
+      </text>
+    </box>
+  );
+}

package/src/ui/format.ts

@@ -0,0 +1,13 @@
+export function formatPercent(value: number | null | undefined): string {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value < 0 || value > 100) return '—';
+  return `${Math.round(value)}%`;
+}
+
+export function formatResetTime(timestamp: number | null | undefined): string {
+  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);
+}

package/src/ui/sidebar.tsx

@@ -0,0 +1,228 @@
+import { type ColorInput, TextAttributes } from '@opentui/core';
+import { For, Show } from 'solid-js';
+import type { PanelSnapshot, UsageWindow } from '../rpc';
+import { formatPercent } from './format';
+import { usageTheme } from './theme';
+
+export interface SidebarLayoutOptions {
+  width?: number;
+  now?: number;
+}
+
+const SIDEBAR_WIDTH_CAP = 28;
+const RESERVED_MAIN_CONTENT_WIDTH = 64;
+const MINIMUM_USEFUL_WIDTH = 14;
+const RESERVED_HOST_CONTENT_HEIGHT = 7;
+
+/** The public slot API omits its own dimensions; keep a conservative terminal-derived cap. */
+export function sidebarWidthForTerminal(
+  terminalWidth: number,
+  terminalHeight = Number.POSITIVE_INFINITY,
+  requiredRows = 5,
+): number | null {
+  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: UsageWindow): string {
+  if (window.kind === 'five_hour') return '5h';
+  if (window.kind === 'weekly') return 'Sem';
+  return window.label;
+}
+
+function retrySuffix(panel: PanelSnapshot, now: number): string {
+  const retryAt = panel.retryAt ?? panel.refreshNotice?.retryAt;
+  if (typeof retryAt !== 'number' || !Number.isFinite(retryAt)) return '';
+  const seconds = Math.max(0, Math.ceil((retryAt - now) / 1_000));
+  return ` · reintento en ${seconds}s`;
+}
+
+function initialFailureLines(
+  panel: PanelSnapshot,
+  width: number,
+  now: number,
+  requiresAuth: boolean,
+): string[] {
+  const retryAt = panel.retryAt ?? panel.refreshNotice?.retryAt;
+  const retrySeconds =
+    typeof retryAt === 'number' && Number.isFinite(retryAt)
+      ? Math.max(0, Math.ceil((retryAt - now) / 1_000))
+      : null;
+
+  if (width < MINIMUM_USEFUL_WIDTH) {
+    const action = requiresAuth ? '/connect' : '/usage-detail';
+    return [`Consumo · ${action}${retrySuffix(panel, now)}`.slice(0, width)];
+  }
+
+  if (width < 27) {
+    return [
+      '5h · —',
+      'Sem · —',
+      'Sin lectura',
+      ...(requiresAuth ? ['Reconecta OpenAI', '/connect'] : ['/usage-detail']),
+      ...(!requiresAuth && retrySeconds !== null ? [`reintento en ${retrySeconds}s`] : []),
+    ].map((line) => line.slice(0, width));
+  }
+
+  return [
+    '5 h · —',
+    'Semanal · —',
+    requiresAuth ? 'Sin lectura · Requiere acceso' : 'Sin lectura · Fallo inicial',
+    requiresAuth ? 'Reconecta OpenAI · /connect' : 'Acción: /usage-detail',
+    ...(!requiresAuth && retrySeconds !== null ? [`reintento en ${retrySeconds}s`] : []),
+  ].map((line) => line.slice(0, width));
+}
+
+function progressBar(remaining: number, size: number): string {
+  const filled = Math.max(0, Math.min(size, Math.round((remaining / 100) * size)));
+  return `[${'━'.repeat(filled)}${'─'.repeat(size - filled)}]`;
+}
+
+export function activateSidebarDetail(button: number, onOpenDetail?: () => void): void {
+  if (button === 0) onOpenDetail?.();
+}
+
+function buildWindowLine(window: UsageWindow, width: number, labelWidth: number): string {
+  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);
+}
+
+/** Returns ready-to-render compact rows, also used by tests to verify narrow terminal behavior. */
+export function buildSidebarLines(
+  panel: PanelSnapshot,
+  options: SidebarLayoutOptions = {},
+): string[] {
+  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 · cargando…'.slice(0, width), 'Semanal · cargando…'.slice(0, width)];
+  if (panel.state === 'no_subscription') return ['Sin cuota de suscripción'.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 · sin datos', 'Semanal · 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));
+}
+
+/** Conservative row budget keeps the whole slot block from displacing existing sidebar content. */
+export function sidebarRequiredRows(panel: PanelSnapshot, refreshing = false, width = 80): number {
+  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);
+}
+
+export interface SidebarProps {
+  panel: PanelSnapshot;
+  width?: number | null;
+  refreshing?: boolean;
+  theme: { text?: { base?: ColorInput; muted?: ColorInput } };
+  onOpenDetail?: () => void;
+}
+
+export function Sidebar(props: SidebarProps) {
+  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 (
+    // biome-ignore lint/a11y/noStaticElementInteractions: OpenTUI sidebar slot supports mouse input without DOM role semantics.
+    <box
+      width={width}
+      flexDirection="column"
+      onMouseUp={(event) => activateSidebarDetail(event.button, props.onOpenDetail)}
+    >
+      <Show when={props.panel.preferences.enabled && props.panel.preferences.visible}>
+        <text fg={tokens.text.base} attributes={TextAttributes.BOLD} marginBottom={1}>
+          Uso OpenAI
+        </text>
+      </Show>
+      <For each={lines()}>
+        {(line, index) => (
+          <text fg={tokens.text.base} marginBottom={index() < lines().length - 1 ? 1 : 0}>
+            {line}
+          </text>
+        )}
+      </For>
+      <Show
+        when={
+          props.panel.preferences.enabled && props.panel.preferences.visible && props.refreshing
+        }
+      >
+        <text fg={tokens.text.muted} marginTop={1}>
+          Actualizando consumo…
+        </text>
+      </Show>
+    </box>
+  );
+}

package/src/ui/theme.ts

@@ -0,0 +1,20 @@
+import type { ColorInput } from '@opentui/core';
+
+export interface UsageThemeTokens {
+  text: {
+    base: ColorInput;
+    muted: ColorInput;
+  };
+}
+
+/** Usage state is communicated with text and bars, never by color alone. */
+export function usageTheme(theme: {
+  text?: { base?: ColorInput; muted?: ColorInput };
+}): UsageThemeTokens {
+  return {
+    text: {
+      base: theme.text?.base ?? 'white',
+      muted: theme.text?.muted ?? theme.text?.base ?? 'white',
+    },
+  };
+}