ompchamber 2.0.2 → 3.0.0

package/src/client/components/settings/categories/usage-settings/ProviderCard.tsx

@@ -1,47 +1,40 @@
 import type { ReactNode } from 'preact/compat';
-import { AlertCircle, KeyRound } from 'lucide-preact';
+import { AlertCircle } from 'lucide-preact';
 
 interface ProviderCardProps {
   providerName: string;
-  configured: boolean;
+  /** Where the credential was found, e.g. "models.yml · agent.db". */
+  credentialSources: string[];
+  /** Provider-side failure, already human-readable. */
   error?: string;
   note?: string;
   children: ReactNode;
 }
 
-/** Provider shell: header, configured empty state, error line, and content slot.
- * Content is rendered whenever the provider is configured, so partial data
- * (e.g. quota fails but balance works) still shows the sections that succeeded. */
-export function ProviderCard({ providerName, configured, error, note, children }: ProviderCardProps) {
+/** Provider shell: header, credential provenance, error line, and content slot.
+ * Every listed provider has a resolved credential — a keyless provider is never
+ * rendered at all — so there is no "not configured" state here. */
+export function ProviderCard({ providerName, credentialSources, error, note, children }: ProviderCardProps) {
   return (
     <section className="bg-paper border border-ink/15 rounded-lg shadow-xs">
       <header className="flex items-center justify-between gap-2 px-3.5 py-2.5 border-b border-ink/10">
         <span className="text-xs font-semibold text-ink">{providerName}</span>
-        <span className="text-[10px] font-mono uppercase tracking-wider text-ink/50">
-          {configured ? 'Connected' : 'Not configured'}
+        <span
+          className="text-[10px] font-mono uppercase tracking-wider text-ink/50 truncate"
+          title={`Credentials from ${credentialSources.join(', ')}`}
+        >
+          {credentialSources.join(' · ')}
         </span>
       </header>
 
       <div className="p-3.5 space-y-4">
-        {!configured ? (
-          <div className="flex items-start gap-2 text-ink/60 text-xs leading-relaxed">
-            <KeyRound size={14} className="shrink-0 mt-0.5 text-ink/40" />
-            <p>
-              Add the <span className="font-semibold text-ink">{providerName}</span> API key in Settings →
-              Providers to see its balance, quota, and usage here.
-            </p>
-          </div>
-        ) : (
-          <>
-            {error && (
-              <p className="flex items-start gap-2 text-error text-xs leading-relaxed">
-                <AlertCircle size={14} className="shrink-0 mt-0.5" />
-                <span className="break-words">{error}</span>
-              </p>
-            )}
-            {children}
-          </>
+        {error && (
+          <p className="flex items-start gap-2 text-error text-xs leading-relaxed">
+            <AlertCircle size={14} className="shrink-0 mt-0.5" />
+            <span className="break-words">{error}</span>
+          </p>
         )}
+        {children}
 
         {note && (
           <p className="text-[10px] text-ink/50 leading-relaxed border-t border-ink/10 pt-2.5">{note}</p>

package/src/client/components/settings/categories/usage-settings/ProviderDetail.tsx

@@ -1,39 +1,46 @@
-import type { UsageReport } from '@/shared/types';
+import type { UsageProviderSummary } from '@/shared/types';
 import { ProviderCard } from '@/client/components/settings/categories/usage-settings/ProviderCard';
 import { KenariCard } from '@/client/components/settings/categories/usage-settings/KenariCard';
 import { DeepSeekCard } from '@/client/components/settings/categories/usage-settings/DeepSeekCard';
-import type { UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { LimitsSection } from '@/client/components/settings/categories/usage-settings/LimitsSection';
 
 const DEEPSEEK_NOTE =
   'DeepSeek exposes no usage or quota API — only the prepaid balance (and the web console at platform.deepseek.com) is available.';
 
 interface ProviderDetailProps {
-  providerId: UsageProviderId;
-  report: UsageReport;
+  summary: UsageProviderSummary;
 }
 
-/** Renders one provider's card (Kenari.id or DeepSeek) from a usage report. */
-export function ProviderDetail({ providerId, report }: ProviderDetailProps) {
-  if (providerId === 'kenari') {
-    return (
-      <ProviderCard
-        providerName="Kenari.id"
-        configured={report.kenari.configured}
-        error={report.kenari.error}
-      >
-        <KenariCard report={report.kenari} />
-      </ProviderCard>
-    );
-  }
+/**
+ * Renders one provider's card. kenari and DeepSeek carry richer reports (wallet
+ * and Rupiah quota / prepaid balance); every other provider renders the generic
+ * quota windows, which for a pay-as-you-go vendor is its credit balance.
+ */
+export function ProviderDetail({ summary }: ProviderDetailProps) {
+  const hasRichReport = Boolean(summary.kenari || summary.deepseek);
 
   return (
     <ProviderCard
-      providerName="DeepSeek"
-      configured={report.deepseek.configured}
-      error={report.deepseek.error}
-      note={DEEPSEEK_NOTE}
+      providerName={summary.name}
+      credentialSources={summary.credentialSources}
+      error={summary.error}
+      note={summary.deepseek ? DEEPSEEK_NOTE : undefined}
     >
-      <DeepSeekCard report={report.deepseek} />
+      {summary.kenari && <KenariCard report={summary.kenari} />}
+      {summary.deepseek && <DeepSeekCard report={summary.deepseek} />}
+
+      {/* The rich reports already render their own quota and usage tables, so
+          the generic windows would only duplicate them. When the provider
+          failed outright and reported no windows, the error line above already
+          says so — a second "no quota source" note would contradict it. */}
+      {!hasRichReport && (summary.limits.length > 0 || !summary.error) && (
+        <LimitsSection
+          limits={summary.limits}
+          tracked={summary.tracked}
+          unavailable={summary.limitsUnavailable}
+          notes={summary.notes}
+        />
+      )}
     </ProviderCard>
   );
 }

package/src/client/components/settings/categories/usage-settings/SidebarList.tsx

@@ -1,6 +1,6 @@
-import { Bot, Coins } from 'lucide-preact';
 import type { UsageReport } from '@/shared/types';
-import { buildProviders, statusLabel, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { buildProviders, statusLabel, type ProviderEntry, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 
 interface UsageSidebarListProps {
   report: UsageReport;
@@ -8,6 +8,14 @@ interface UsageSidebarListProps {
   onSelectProvider: (providerId: UsageProviderId) => void;
 }
 
+function ProviderBadge({ provider, selected }: { provider: ProviderEntry; selected: boolean }) {
+  return (
+    <span className={selected ? 'text-ink/80' : 'text-ink/60'}>
+      <ProviderIcon slug={provider.id} name={provider.name} size={14} />
+    </span>
+  );
+}
+
 export function UsageSidebarList({
   report,
   selectedProviderId,
@@ -18,59 +26,63 @@ export function UsageSidebarList({
   return (
     <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
       <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between">
-        <span className="text-xs font-semibold text-ink">Total {providers.length} providers</span>
+        <span className="text-xs font-semibold text-ink">
+          {providers.length} provider{providers.length === 1 ? '' : 's'} with keys
+        </span>
       </div>
 
       <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-1.5 space-y-3 text-xs">
-        <div>
-          <div className="px-2.5 pt-1.5 pb-1 text-[10px] font-bold text-ink/50 uppercase tracking-wider">
-            Providers
-          </div>
-          <div className="space-y-0.5">
-            {providers.map((provider) => {
-              const isSelected = provider.id === selectedProviderId;
-              const isConnected = provider.configured && !provider.error;
-              const Icon = provider.id === 'kenari' ? Coins : Bot;
+        {providers.length === 0 ? (
+          <p className="px-2.5 py-3 text-[11px] text-ink/50 leading-relaxed">
+            No provider credentials detected. Add an API key in Settings → Providers.
+          </p>
+        ) : (
+          <div>
+            <div className="px-2.5 pt-1.5 pb-1 text-[10px] font-bold text-ink/50 uppercase tracking-wider">
+              Providers
+            </div>
+            <div className="space-y-0.5">
+              {providers.map((provider) => {
+                const isSelected = provider.id === selectedProviderId;
 
-              return (
-                <button
-                  key={provider.id}
-                  type="button"
-                  onClick={() => onSelectProvider(provider.id)}
-                  className={`w-full text-left px-2.5 py-2 rounded-lg transition-colors cursor-pointer flex flex-col gap-0.5 group ${
-                    isSelected
-                      ? 'bg-ink/10 text-ink font-medium shadow-2xs'
-                      : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
-                  }`}
-                >
-                  <div className="flex items-center justify-between gap-1.5">
-                    <div className="flex items-center gap-1.5 min-w-0">
-                      <div className="relative">
-                        <Icon
-                          className={`w-3.5 h-3.5 flex-shrink-0 ${isSelected ? 'text-ink/80' : 'text-ink/60'}`}
-                        />
-                        <span
-                          className={`absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full ${
-                            isConnected ? 'bg-ink' : 'bg-ink/20'
-                          }`}
-                        />
+                return (
+                  <button
+                    key={provider.id}
+                    type="button"
+                    onClick={() => onSelectProvider(provider.id)}
+                    className={`w-full text-left px-2.5 py-2 rounded-lg transition-colors cursor-pointer flex flex-col gap-0.5 group ${
+                      isSelected
+                        ? 'bg-ink/10 text-ink font-medium shadow-2xs'
+                        : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between gap-1.5">
+                      <div className="flex items-center gap-1.5 min-w-0">
+                        <div className="relative">
+                          <ProviderBadge provider={provider} selected={isSelected} />
+                          <span
+                            className={`absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full ${
+                              provider.error ? 'bg-error/60' : 'bg-ink'
+                            }`}
+                          />
+                        </div>
+                        <span className="font-semibold text-xs text-ink truncate">{provider.name}</span>
                       </div>
-                      <span className="font-semibold text-xs text-ink truncate">{provider.name}</span>
+                      <span
+                        className={`text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 font-medium ${
+                          provider.error ? 'text-error' : 'text-ink/70'
+                        }`}
+                      >
+                        {statusLabel(provider)}
+                      </span>
                     </div>
-                    <span
-                      className={`text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 font-medium ${
-                        provider.error ? 'text-error' : 'text-ink/70'
-                      }`}
-                    >
-                      {statusLabel(provider)}
-                    </span>
-                  </div>
-                  <p className="text-[11px] text-ink/60 line-clamp-1 leading-snug pl-5">{provider.hint}</p>
-                </button>
-              );
-            })}
+                    <p className="text-[11px] text-ink/60 line-clamp-1 leading-snug pl-5">{provider.hint}</p>
+                  </button>
+                );
+              })}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

package/src/client/components/settings/categories/usage-settings/format.ts

@@ -61,3 +61,39 @@ export function formatAmount(value: string): string {
   if (value.trim() === '' || !Number.isFinite(parsed)) return value;
   return formatNumber(parsed);
 }
+
+const usdFormatter = new Intl.NumberFormat('id-ID', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+/** USD amounts from provider reports and local cost records. */
+export function formatUsd(value: number): string {
+  if (!Number.isFinite(value)) return '$0,00';
+  return `$${usdFormatter.format(value)}`;
+}
+
+/**
+ * Render one quota amount in its own unit. `percent` amounts arrive as 0..100
+ * (omp's `used`/`limit` for percent units), everything else as a raw count.
+ */
+export function formatUsageAmount(value: number, unit: string): string {
+  if (!Number.isFinite(value)) return '—';
+  switch (unit) {
+    case 'percent':
+      return `${new Intl.NumberFormat('id-ID', { maximumFractionDigits: 1 }).format(value)}%`;
+    case 'usd':
+      return formatUsd(value);
+    case 'tokens':
+    case 'bytes':
+      return formatCompactTokens(value);
+    default:
+      return formatNumber(value);
+  }
+}
+
+/** Fraction (0..1) rendered as a whole-percent string. */
+export function formatFractionPercent(fraction: number): string {
+  if (!Number.isFinite(fraction)) return '0%';
+  return `${new Intl.NumberFormat('id-ID', { maximumFractionDigits: 1 }).format(fraction * 100)}%`;
+}

package/src/client/components/settings/categories/usage-settings/providers.ts

@@ -1,45 +1,69 @@
-import type { UsageReport } from '@/shared/types';
-import { formatAmount } from '@/client/components/settings/categories/usage-settings/format';
+import type { UsageLimitWindow, UsageProviderSummary, UsageReport } from '@/shared/types';
+import { formatAmount, formatUsd } from '@/client/components/settings/categories/usage-settings/format';
 
-/** Providers surfaced in the Settings → Usage sidebar and the Usage right panel. */
-export type UsageProviderId = 'kenari' | 'deepseek';
+/**
+ * Providers surfaced in the Settings → Usage sidebar and the Usage right panel.
+ * The id is the provider slug, so the set is open-ended: any provider omp can
+ * authenticate shows up here without a code change.
+ */
+export type UsageProviderId = string;
 
 export interface ProviderEntry {
   id: UsageProviderId;
   name: string;
-  configured: boolean;
+  /** Provider-side failure, already human-readable. */
   error?: string;
+  /** Short status line under the name. */
   hint: string;
+  /** Provider-reported quota windows; empty when it exposes no usage endpoint. */
+  limits: UsageLimitWindow[];
+  /** Whether omp ships a usage adapter for this provider. */
+  tracked: boolean;
+  /** omp tracks this provider but its endpoint produced nothing. */
+  limitsUnavailable?: boolean;
+  summary: UsageProviderSummary;
+}
+
+/** Compact one-line summary of the most-used quota window. */
+function limitHint(limits: UsageLimitWindow[]): string | undefined {
+  const used = limits.filter((limit) => limit.usedFraction !== undefined);
+  if (used.length === 0) {
+    // A credit balance has no limit to take a fraction of; the remaining
+    // amount IS the whole story.
+    const credit = limits.find((limit) => limit.unit === 'usd' && limit.remaining !== undefined);
+    if (credit) return `${formatUsd(credit.remaining ?? 0)} left`;
+    return limits[0]?.label;
+  }
+  const binding = used.reduce((worst, limit) =>
+    (limit.usedFraction ?? 0) > (worst.usedFraction ?? 0) ? limit : worst,
+  );
+  const percent = Math.round((binding.usedFraction ?? 0) * 100);
+  return binding.windowLabel ? `${percent}% · ${binding.windowLabel}` : `${percent}% used`;
 }
 
 /** Derives the provider list (status + hint) from a usage report. */
 export function buildProviders(report: UsageReport): ProviderEntry[] {
-  const kenariBalance = report.kenari.quota?.planName;
-  const deepseekEntry = report.deepseek.balance?.entries[0];
+  return report.providers.map((summary) => ({
+    id: summary.id,
+    name: summary.name,
+    error: summary.error,
+    hint: providerHint(summary),
+    limits: summary.limits,
+    tracked: summary.tracked,
+    limitsUnavailable: summary.limitsUnavailable,
+    summary,
+  }));
+}
 
-  return [
-    {
-      id: 'kenari',
-      name: 'Kenari.id',
-      configured: report.kenari.configured,
-      error: report.kenari.error,
-      hint: kenariBalance ?? 'Wallet & quota',
-    },
-    {
-      id: 'deepseek',
-      name: 'DeepSeek',
-      configured: report.deepseek.configured,
-      error: report.deepseek.error,
-      hint: deepseekEntry
-        ? `${deepseekEntry.currency} ${formatAmount(deepseekEntry.totalBalance)}`
-        : 'Prepaid balance',
-    },
-  ];
+function providerHint(summary: UsageProviderSummary): string {
+  const plan = summary.kenari?.quota?.planName;
+  if (plan) return plan;
+  const balance = summary.deepseek?.balance?.entries[0];
+  if (balance) return `${balance.currency} ${formatAmount(balance.totalBalance)}`;
+  return limitHint(summary.limits) ?? 'No quota reported';
 }
 
 /** Human-readable connection state for a provider entry. */
 export function statusLabel(provider: ProviderEntry): string {
-  if (!provider.configured) return 'Not configured';
-  if (provider.error) return 'Error';
-  return 'Connected';
+  return provider.error ? 'Error' : 'Connected';
 }

package/src/client/components/workspace/chat-timeline/AiMessageFooter.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'preact/compat';
 import { Bot, Brain, Clock3, Coins, Hourglass, MessageSquarePlus, MoreHorizontal, RotateCcw, X } from 'lucide-preact';
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { formatDuration } from '@/shared/lib/chat/duration';
-import { providerLabel } from '@/shared/lib/models/provider-label';
+import { providerLabel } from '@/shared/lib/models/provider/label';
 import { formatCompactTokens } from '@/shared/lib/format/number';
 
 interface AiMessageFooterProps {

package/src/client/components/workspace/chat-timeline/GeneratingIndicator.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 import { Bot } from 'lucide-preact';
-import { providerLabel } from '@/shared/lib/models/provider-label';
+import { providerLabel } from '@/shared/lib/models/provider/label';
 
 interface GeneratingIndicatorProps {
   modelName?: string;