@zaip-ai/cli 1.0.4 → 1.0.7

package/templates/.agents/dashboard/apps/frontend/src/PricingSettingsDialog.tsx

@@ -0,0 +1,295 @@
+import { useState } from "react";
+import type { FxRate, PricingCatalog, PricingModel } from "./dashboard-api.js";
+import { type DashboardLocale, pricingCopy } from "./dashboard-localization.js";
+
+export function PricingSettingsPage({
+  catalog,
+  fxRate,
+  locale,
+  onClose,
+  onSave,
+  onSaveFxRate,
+}: {
+  catalog: PricingCatalog;
+  fxRate: FxRate | null;
+  locale: DashboardLocale;
+  onClose: () => void;
+  onSave: (catalog: PricingCatalog) => Promise<void>;
+  onSaveFxRate: (rate: number) => Promise<void>;
+}) {
+  const copy = pricingCopy[locale];
+  const [draft, setDraft] = useState(catalog);
+  const [draftFxRate, setDraftFxRate] = useState(fxRate?.rate ?? 0);
+  const [saving, setSaving] = useState(false);
+  const update = (index: number, patch: Partial<PricingModel>) =>
+    setDraft((value) => ({
+      ...value,
+      models: value.models.map((model, i) => (i === index ? { ...model, ...patch } : model)),
+    }));
+  const number = (value: string) => Math.max(0, Number(value) || 0);
+  return (
+    <main className="pricing-backdrop">
+      <section aria-labelledby="pricing-page-title" className="pricing-dialog">
+        <header>
+          <div>
+            <small>{copy.eyebrow}</small>
+            <h1 id="pricing-page-title">{copy.title}</h1>
+            <p>{copy.description}</p>
+          </div>
+          <button className="pricing-back-button" onClick={onClose} type="button">
+            <span aria-hidden="true">←</span> {copy.back}
+          </button>
+        </header>
+        <div className="pricing-fx-settings">
+          <div className="pricing-fx-copy">
+            <strong>{copy.fxTitle}</strong>
+            <p>{copy.fxDescription}</p>
+          </div>
+          <label>
+            <span>{copy.fxLabel}</span>
+            <div className="pricing-fx-input">
+              <span>R$</span>
+              <input
+                aria-label={copy.fxAriaLabel}
+                min="0.0001"
+                onChange={(event) =>
+                  setDraftFxRate(Math.max(0.0001, Number(event.target.value) || 0))
+                }
+                step="0.0001"
+                type="number"
+                value={draftFxRate}
+              />
+            </div>
+          </label>
+        </div>
+        <div className="pricing-table-heading">
+          <div>
+            <strong>{copy.catalog}</strong>
+            <p>{copy.pricesPerMillion}</p>
+          </div>
+          <span>
+            {draft.models.length} {copy.models}
+          </span>
+        </div>
+        <div className="pricing-table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>{copy.model}</th>
+                <th>{copy.provider}</th>
+                <th>{copy.input}</th>
+                <th>{copy.cache}</th>
+                <th>{copy.output}</th>
+                <th>{copy.reasoning}</th>
+                <th>{copy.priorityInput}</th>
+                <th>{copy.priorityCache}</th>
+                <th>{copy.priorityOutput}</th>
+                <th>{copy.priorityReasoning}</th>
+                <th>{copy.contextLimit}</th>
+                <th>{copy.inputMultiplier}</th>
+                <th>{copy.outputMultiplier}</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {draft.models.map((model, index) => (
+                <tr key={model.id}>
+                  <td>
+                    <input
+                      aria-label={copy.model}
+                      onChange={(e) => update(index, { id: e.target.value })}
+                      value={model.id}
+                    />
+                    <small>{model.aliases.join(", ") || copy.noAliases}</small>
+                  </td>
+                  <td>
+                    <select
+                      onChange={(e) =>
+                        update(index, { provider: e.target.value as PricingModel["provider"] })
+                      }
+                      value={model.provider}
+                    >
+                      <option value="openai">OpenAI</option>
+                      <option value="anthropic">Anthropic</option>
+                    </select>
+                  </td>
+                  <td>
+                    <input
+                      min="0"
+                      onChange={(e) =>
+                        update(index, { input_per_million_usd: number(e.target.value) })
+                      }
+                      step="0.001"
+                      type="number"
+                      value={model.input_per_million_usd}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      min="0"
+                      onChange={(e) =>
+                        update(index, { cached_input_per_million_usd: number(e.target.value) })
+                      }
+                      step="0.001"
+                      type="number"
+                      value={model.cached_input_per_million_usd ?? 0}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      min="0"
+                      onChange={(e) =>
+                        update(index, { output_per_million_usd: number(e.target.value) })
+                      }
+                      step="0.001"
+                      type="number"
+                      value={model.output_per_million_usd}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      min="0"
+                      onChange={(e) =>
+                        update(index, { reasoning_per_million_usd: number(e.target.value) })
+                      }
+                      step="0.001"
+                      type="number"
+                      value={model.reasoning_per_million_usd ?? 0}
+                    />
+                  </td>
+                  {(
+                    [
+                      "priority_input_per_million_usd",
+                      "priority_cached_input_per_million_usd",
+                      "priority_output_per_million_usd",
+                      "priority_reasoning_per_million_usd",
+                    ] as const
+                  ).map((field) => (
+                    <td key={field}>
+                      <input
+                        min="0"
+                        onChange={(e) => update(index, { [field]: number(e.target.value) })}
+                        step="0.001"
+                        type="number"
+                        value={model[field] ?? 0}
+                      />
+                    </td>
+                  ))}
+                  <td>
+                    <input
+                      min="0"
+                      onChange={(e) =>
+                        update(index, {
+                          long_context_threshold_tokens: number(e.target.value) || null,
+                        })
+                      }
+                      step="1"
+                      type="number"
+                      value={model.long_context_threshold_tokens ?? 0}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      min="0.001"
+                      onChange={(e) =>
+                        update(index, {
+                          long_context_input_multiplier: Math.max(
+                            0.001,
+                            Number(e.target.value) || 1,
+                          ),
+                        })
+                      }
+                      step="0.1"
+                      type="number"
+                      value={model.long_context_input_multiplier}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      min="0.001"
+                      onChange={(e) =>
+                        update(index, {
+                          long_context_output_multiplier: Math.max(
+                            0.001,
+                            Number(e.target.value) || 1,
+                          ),
+                        })
+                      }
+                      step="0.1"
+                      type="number"
+                      value={model.long_context_output_multiplier}
+                    />
+                  </td>
+                  <td>
+                    <button
+                      aria-label={copy.removeModel}
+                      onClick={() =>
+                        setDraft((v) => ({ ...v, models: v.models.filter((_, i) => i !== index) }))
+                      }
+                      type="button"
+                    >
+                      ×
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <footer>
+          <button
+            onClick={() => setDraft((v) => ({ ...v, models: [...v.models, blankModel(locale)] }))}
+            type="button"
+          >
+            + {copy.addModel}
+          </button>
+          <div>
+            <button onClick={onClose} type="button">
+              {copy.cancel}
+            </button>
+            <button
+              disabled={saving}
+              onClick={async () => {
+                setSaving(true);
+                try {
+                  await onSave(draft);
+                  await onSaveFxRate(draftFxRate);
+                  onClose();
+                } finally {
+                  setSaving(false);
+                }
+              }}
+              type="button"
+            >
+              {saving ? copy.saving : copy.save}
+            </button>
+          </div>
+        </footer>
+      </section>
+    </main>
+  );
+}
+
+function blankModel(locale: DashboardLocale = "pt-BR"): PricingModel {
+  const copy = pricingCopy[locale];
+  return {
+    id: copy.newModel,
+    provider: "openai",
+    aliases: [],
+    input_per_million_usd: 0,
+    cached_input_per_million_usd: 0,
+    output_per_million_usd: 0,
+    reasoning_per_million_usd: 0,
+    priority_input_per_million_usd: null,
+    priority_cached_input_per_million_usd: null,
+    priority_output_per_million_usd: null,
+    priority_reasoning_per_million_usd: null,
+    reasoning_billed_separately: false,
+    long_context_threshold_tokens: null,
+    long_context_input_multiplier: 1,
+    long_context_output_multiplier: 1,
+    source_label: copy.manualOverride,
+    source_url: "https://developers.openai.com/api/docs/pricing",
+    notes: [copy.editedNote],
+  };
+}