vforclaude2 0.3.87

package/src/shared/components/PricingModal.js

@@ -0,0 +1,208 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getDefaultPricing, formatCost } from "@/shared/constants/pricing.js";
+
+export default function PricingModal({ isOpen, onClose, onSave }) {
+  const [pricingData, setPricingData] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      loadPricing();
+    }
+  }, [isOpen]);
+
+  const loadPricing = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch("/api/pricing");
+      if (response.ok) {
+        const data = await response.json();
+        setPricingData(data);
+      } else {
+        // Fallback to defaults
+        const defaults = getDefaultPricing();
+        setPricingData(defaults);
+      }
+    } catch (error) {
+      console.error("Failed to load pricing:", error);
+      const defaults = getDefaultPricing();
+      setPricingData(defaults);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePricingChange = (provider, model, field, value) => {
+    const numValue = parseFloat(value);
+    if (isNaN(numValue) || numValue < 0) return;
+
+    setPricingData(prev => {
+      const newData = { ...prev };
+      if (!newData[provider]) newData[provider] = {};
+      if (!newData[provider][model]) newData[provider][model] = {};
+      newData[provider][model][field] = numValue;
+      return newData;
+    });
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const response = await fetch("/api/pricing", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(pricingData)
+      });
+
+      if (response.ok) {
+        onSave?.();
+        onClose();
+      } else {
+        const error = await response.json();
+        alert(`Failed to save pricing: ${error.error}`);
+      }
+    } catch (error) {
+      console.error("Failed to save pricing:", error);
+      alert("Failed to save pricing");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleReset = async () => {
+    if (!confirm("Reset all pricing to defaults? This cannot be undone.")) return;
+
+    try {
+      const response = await fetch("/api/pricing", { method: "DELETE" });
+      if (response.ok) {
+        const defaults = getDefaultPricing();
+        setPricingData(defaults);
+      }
+    } catch (error) {
+      console.error("Failed to reset pricing:", error);
+      alert("Failed to reset pricing");
+    }
+  };
+
+  if (!isOpen) return null;
+
+  // Get all unique providers and models for display
+  const allProviders = Object.keys(pricingData).sort();
+  const pricingFields = ["input", "output", "cached", "reasoning", "cache_creation"];
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-bg-base border border-border rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="p-4 border-b border-border flex items-center justify-between">
+          <h2 className="text-xl font-semibold">Pricing Configuration</h2>
+          <button
+            onClick={onClose}
+            className="text-text-muted hover:text-text text-2xl leading-none"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-auto p-4">
+          {loading ? (
+            <div className="text-center py-8 text-text-muted">Loading pricing data...</div>
+          ) : (
+            <div className="space-y-6">
+              {/* Instructions */}
+              <div className="bg-bg-subtle border border-border rounded-lg p-3 text-sm">
+                <p className="font-medium mb-1">Pricing Rates Format</p>
+                <p className="text-text-muted">
+                  All rates are in <strong>dollars per million tokens</strong> ($/1M tokens).
+                  Example: Input rate of 2.50 means $2.50 per 1,000,000 input tokens.
+                </p>
+              </div>
+
+              {/* Pricing Tables */}
+              {allProviders.map(provider => {
+                const models = Object.keys(pricingData[provider]).sort();
+                return (
+                  <div key={provider} className="border border-border rounded-lg overflow-hidden">
+                    <div className="bg-bg-subtle px-4 py-2 font-semibold text-sm">
+                      {provider.toUpperCase()}
+                    </div>
+                    <div className="overflow-x-auto">
+                      <table className="w-full text-sm">
+                        <thead className="bg-bg-hover text-text-muted uppercase text-xs">
+                          <tr>
+                            <th className="px-3 py-2 text-left">Model</th>
+                            <th className="px-3 py-2 text-right">Input</th>
+                            <th className="px-3 py-2 text-right">Output</th>
+                            <th className="px-3 py-2 text-right">Cached</th>
+                            <th className="px-3 py-2 text-right">Reasoning</th>
+                            <th className="px-3 py-2 text-right">Cache Creation</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-border">
+                          {models.map(model => (
+                            <tr key={model} className="hover:bg-bg-subtle/50">
+                              <td className="px-3 py-2 font-medium">{model}</td>
+                              {pricingFields.map(field => (
+                                <td key={field} className="px-3 py-2">
+                                  <input
+                                    type="number"
+                                    step="0.01"
+                                    min="0"
+                                    value={pricingData[provider][model][field] || 0}
+                                    onChange={(e) => handlePricingChange(provider, model, field, e.target.value)}
+                                    className="w-20 px-2 py-1 text-right bg-bg-base border border-border rounded focus:outline-none focus:border-primary"
+                                  />
+                                </td>
+                              ))}
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                );
+              })}
+
+              {allProviders.length === 0 && (
+                <div className="text-center py-8 text-text-muted">
+                  No pricing data available
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border flex items-center justify-between gap-2">
+          <button
+            onClick={handleReset}
+            className="px-4 py-2 text-sm text-red-500 hover:bg-red-500/10 rounded border border-red-500/20 transition-colors"
+            disabled={saving}
+          >
+            Reset to Defaults
+          </button>
+          <div className="flex gap-2">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-sm text-text-muted hover:text-text border border-border rounded transition-colors"
+              disabled={saving}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              className="px-4 py-2 text-sm bg-primary text-white rounded hover:bg-primary/90 transition-colors disabled:opacity-50"
+              disabled={saving}
+            >
+              {saving ? "Saving..." : "Save Changes"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/shared/components/RequestLogger.js

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Card from "./Card";
+
+export default function RequestLogger() {
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+
+  useEffect(() => {
+    fetchLogs();
+  }, []);
+
+  useEffect(() => {
+    let interval;
+    if (autoRefresh) {
+      interval = setInterval(() => {
+        fetchLogs(false);
+      }, 3000);
+    }
+    return () => clearInterval(interval);
+  }, [autoRefresh]);
+
+  const fetchLogs = async (showLoading = true) => {
+    if (showLoading) setLoading(true);
+    try {
+      const res = await fetch("/api/usage/request-logs");
+      if (res.ok) {
+        const data = await res.json();
+        setLogs(data);
+      }
+    } catch (error) {
+      console.error("Failed to fetch logs:", error);
+    } finally {
+      if (showLoading) setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Request Logs</h2>
+        <div className="flex items-center gap-2">
+          <label className="text-sm font-medium text-text-muted flex items-center gap-2 cursor-pointer">
+            <span>Auto Refresh (3s)</span>
+            <div
+              onClick={() => setAutoRefresh(!autoRefresh)}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none ${autoRefresh ? "bg-primary" : "bg-bg-subtle border border-border"
+                }`}
+            >
+              <span
+                className={`inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${autoRefresh ? "translate-x-5" : "translate-x-1"
+                  }`}
+              />
+            </div>
+          </label>
+        </div>
+      </div>
+
+      <Card className="overflow-hidden bg-black/5 dark:bg-black/20">
+        <div className="p-0 overflow-x-auto max-h-[600px] overflow-y-auto font-mono text-xs">
+          {loading && logs.length === 0 ? (
+            <div className="p-8 text-center text-text-muted">Loading logs...</div>
+          ) : logs.length === 0 ? (
+            <div className="p-8 text-center text-text-muted">No logs recorded yet.</div>
+          ) : (
+            <table className="w-full text-left border-collapse whitespace-nowrap">
+              <thead className="sticky top-0 bg-bg-subtle border-b border-border z-10">
+                <tr>
+                  <th className="px-3 py-2 border-r border-border">DateTime</th>
+                  <th className="px-3 py-2 border-r border-border">Model</th>
+                  <th className="px-3 py-2 border-r border-border">Provider</th>
+                  <th className="px-3 py-2 border-r border-border">Account</th>
+                  <th className="px-3 py-2 border-r border-border">In</th>
+                  <th className="px-3 py-2 border-r border-border">Out</th>
+                  <th className="px-3 py-2">Status</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border/50">
+                {logs.map((log, i) => {
+                  const parts = log.split(" | ");
+                  if (parts.length < 7) return null;
+
+                  const status = parts[6];
+                  const isPending = status.includes("PENDING");
+                  const isFailed = status.includes("FAILED");
+                  const isSuccess = status.includes("OK");
+
+                  return (
+                    <tr key={i} className={`hover:bg-primary/5 transition-colors ${isPending ? 'bg-primary/5' : ''}`}>
+                      <td className="px-3 py-1.5 border-r border-border text-text-muted">{parts[0]}</td>
+                      <td className="px-3 py-1.5 border-r border-border font-medium">{parts[1]}</td>
+                      <td className="px-3 py-1.5 border-r border-border">
+                        <span className="px-1.5 py-0.5 rounded bg-bg-subtle border border-border text-[10px] uppercase font-bold">
+                          {parts[2]}
+                        </span>
+                      </td>
+                      <td className="px-3 py-1.5 border-r border-border truncate max-w-[150px]" title={parts[3]}>{parts[3]}</td>
+                      <td className="px-3 py-1.5 border-r border-border text-right text-primary">{parts[4]}</td>
+                      <td className="px-3 py-1.5 border-r border-border text-right text-success">{parts[5]}</td>
+                      <td className={`px-3 py-1.5 font-bold ${isSuccess ? 'text-success' :
+                          isFailed ? 'text-error' :
+                            'text-primary animate-pulse'
+                        }`}>
+                        {status}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </Card>
+      <div className="text-[10px] text-text-muted italic">
+        Logs are saved to log.txt in the application data directory.
+      </div>
+    </div>
+  );
+}

package/src/shared/components/SegmentedControl.js

@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@/shared/utils/cn";
+
+export default function SegmentedControl({
+  options = [],
+  value,
+  onChange,
+  size = "md",
+  className,
+}) {
+  const sizes = {
+    sm: "h-7 text-xs",
+    md: "h-9 text-sm",
+    lg: "h-11 text-base",
+  };
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center p-1 rounded-lg",
+        "bg-black/5 dark:bg-white/5",
+        className
+      )}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          className={cn(
+            "px-4 rounded-md font-medium transition-all",
+            sizes[size],
+            value === option.value
+              ? "bg-white dark:bg-white/10 text-text-main shadow-sm"
+              : "text-text-muted hover:text-text-main"
+          )}
+        >
+          {option.icon && (
+            <span className="material-symbols-outlined text-[16px] mr-1.5">
+              {option.icon}
+            </span>
+          )}
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/shared/components/Select.js

@@ -0,0 +1,70 @@
+"use client";
+
+import { cn } from "@/shared/utils/cn";
+
+export default function Select({
+  label,
+  options = [],
+  value,
+  onChange,
+  placeholder = "Select an option",
+  error,
+  hint,
+  disabled = false,
+  required = false,
+  className,
+  selectClassName,
+  ...props
+}) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      {label && (
+        <label className="text-sm font-medium text-text-main">
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <div className="relative">
+        <select
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          className={cn(
+            "w-full py-2 px-3 pr-10 text-sm text-text-main",
+            "bg-white dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-md appearance-none",
+            "focus:ring-1 focus:ring-primary/30 focus:border-primary/50 focus:outline-none",
+            "transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+            "text-[16px] sm:text-sm",
+            error
+              ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
+              : "",
+            selectClassName
+          )}
+          {...props}
+        >
+          <option value="" disabled>
+            {placeholder}
+          </option>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-text-muted">
+          <span className="material-symbols-outlined text-[20px]">expand_more</span>
+        </div>
+      </div>
+      {error && (
+        <p className="text-xs text-red-500 flex items-center gap-1">
+          <span className="material-symbols-outlined text-[14px]">error</span>
+          {error}
+        </p>
+      )}
+      {hint && !error && (
+        <p className="text-xs text-text-muted">{hint}</p>
+      )}
+    </div>
+  );
+}
+