ompchamber 0.3.0

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

@@ -0,0 +1,164 @@
+import { useState } from 'preact/hooks';
+import { ChevronDown, ChevronRight, Plus } from 'lucide-preact';
+import type { SkillItem } from '@/shared/types';
+import { ProjectSelectorDropdown } from '@/client/components/settings/ProjectSelectorDropdown';
+
+interface SkillSidebarListProps {
+  skills: SkillItem[];
+  selectedSkillId: string | null;
+  isCreatingNew: boolean;
+  onSelectSkill: (id: string) => void;
+  onAddNewSkill: () => void;
+  selectedProject: string;
+  onSelectProject: (project: string) => void;
+}
+
+export function SkillSidebarList({
+  skills,
+  selectedSkillId,
+  isCreatingNew,
+  onSelectSkill,
+  onAddNewSkill,
+  selectedProject,
+  onSelectProject,
+}: SkillSidebarListProps) {
+  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
+
+  const toggleGroup = (groupName: string) => {
+    setCollapsedGroups((prev) => ({
+      ...prev,
+      [groupName]: !prev[groupName],
+    }));
+  };
+
+  // Group skills by group property or standalone
+  const groupedSkills: Record<string, SkillItem[]> = {};
+  const standaloneSkills: SkillItem[] = [];
+
+  skills.forEach((skill) => {
+    if (skill.group) {
+      if (!groupedSkills[skill.group]) {
+        groupedSkills[skill.group] = [];
+      }
+      groupedSkills[skill.group].push(skill);
+    } else {
+      standaloneSkills.push(skill);
+    }
+  });
+
+  const totalCount = skills.length;
+
+  return (
+    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0">
+      {/* Project Selector Dropdown */}
+      <ProjectSelectorDropdown
+        variant="compact"
+        selectedProject={selectedProject}
+        onChangeProject={onSelectProject}
+        getTriggerLabel={(options, value) =>
+          options.find((option) => option.id === value)?.label || value
+        }
+      />
+
+      {/* Counter Header */}
+      <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 {totalCount}
+        </span>
+        <button
+          type="button"
+          onClick={onAddNewSkill}
+          title="Create New Skill"
+          className="p-1 rounded-md text-ink/60 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+        >
+          <Plus size={15} strokeWidth={2.2} />
+        </button>
+      </div>
+
+      {/* Skills List */}
+      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-1.5 space-y-2">
+        <div className="px-2 pt-1 pb-0.5 text-[10px] font-bold text-ink/50 uppercase tracking-wider">
+          USER SKILLS
+        </div>
+
+        {/* Temporary "New Skill" indicator item */}
+        {isCreatingNew && (
+          <div className="px-2.5 py-1.5 rounded-lg bg-ink/10 text-ink font-medium text-xs shadow-2xs">
+            <span className="truncate">new-skill</span>
+          </div>
+        )}
+
+        {/* Grouped Skills */}
+        {Object.entries(groupedSkills).map(([groupName, groupItems]) => {
+          const isCollapsed = !!collapsedGroups[groupName];
+          return (
+            <div key={groupName} className="space-y-0.5">
+              <button
+                type="button"
+                onClick={() => toggleGroup(groupName)}
+                className="w-full flex items-center justify-between px-2 py-1 rounded-md text-xs font-semibold text-ink/80 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+              >
+                <div className="flex items-center gap-1.5 truncate">
+                  {isCollapsed ? (
+                    <ChevronRight size={13} className="text-ink/60" />
+                  ) : (
+                    <ChevronDown size={13} className="text-ink/60" />
+                  )}
+                  <span className="truncate tracking-tight uppercase text-[11px] font-bold text-ink/90">
+                    {groupName}
+                  </span>
+                </div>
+                <span className="text-[10px] font-mono text-ink/50 px-1.5 py-0.2 rounded bg-ink/5">
+                  {groupItems.length}
+                </span>
+              </button>
+
+              {!isCollapsed && (
+                <div className="pl-3 space-y-0.5 border-l border-ink/10 ml-2.5">
+                  {groupItems.map((skill) => {
+                    const isSelected = !isCreatingNew && selectedSkillId === skill.id;
+                    return (
+                      <button
+                        key={skill.id}
+                        type="button"
+                        onClick={() => onSelectSkill(skill.id)}
+                        className={`w-full text-left px-2.5 py-1.5 rounded-lg text-xs transition-colors cursor-pointer truncate block ${
+                          isSelected
+                            ? 'bg-ink/10 text-ink font-medium shadow-2xs'
+                            : 'text-ink/70 hover:bg-ink/5 hover:text-ink'
+                        }`}
+                      >
+                        {skill.name}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+
+        {/* Standalone Skills */}
+        <div className="space-y-0.5 pt-1">
+          {standaloneSkills.map((skill) => {
+            const isSelected = !isCreatingNew && selectedSkillId === skill.id;
+            return (
+              <button
+                key={skill.id}
+                type="button"
+                onClick={() => onSelectSkill(skill.id)}
+                className={`w-full text-left px-2.5 py-1.5 rounded-lg text-xs transition-colors cursor-pointer truncate block ${
+                  isSelected
+                    ? 'bg-ink/10 text-ink font-medium shadow-2xs'
+                    : 'text-ink/70 hover:bg-ink/5 hover:text-ink'
+                }`}
+              >
+                {skill.name}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/token-usage-settings/Breakdown.tsx

@@ -0,0 +1,127 @@
+import type { BreakdownRow, BreakdownTab, CadenceType, TokenUsageMetricSet } from '@/shared/types';
+
+interface TokenUsageBreakdownProps {
+  breakdownTab: BreakdownTab;
+  setBreakdownTab: (tab: BreakdownTab) => void;
+  activeBreakdownRows: BreakdownRow[];
+  activeMetrics: TokenUsageMetricSet;
+  cadence: CadenceType;
+}
+
+const CADENCE_TAB_LABEL: Record<CadenceType, string> = {
+  daily: 'DAY',
+  weekly: 'WEEK',
+  monthly: 'MONTH',
+};
+
+export function TokenUsageBreakdown({
+  breakdownTab,
+  setBreakdownTab,
+  activeBreakdownRows,
+  activeMetrics,
+  cadence,
+}: TokenUsageBreakdownProps) {
+  return (
+    <div className="grid grid-cols-1 xl:grid-cols-3 gap-3">
+      {/* Breakdown Table with Active Tabs */}
+      <div className="bg-paper border border-ink/15 rounded-lg p-3.5 shadow-xs xl:col-span-2">
+        <div className="flex justify-between items-center mb-3">
+          <span className="font-semibold text-xs text-ink">Breakdown</span>
+          <div className="flex bg-ink/5 rounded p-0.5">
+            <button
+              onClick={() => setBreakdownTab('model')}
+              className={`px-2 py-0.5 rounded text-[9px] font-bold tracking-wider transition-colors ${
+                breakdownTab === 'model' ? 'bg-paper shadow-xs text-ink' : 'text-ink/50 hover:text-ink'
+              }`}
+            >
+              MODEL
+            </button>
+            <button
+              onClick={() => setBreakdownTab('day')}
+              className={`px-2 py-0.5 rounded text-[9px] font-bold tracking-wider transition-colors ${
+                breakdownTab === 'day' ? 'bg-paper shadow-xs text-ink' : 'text-ink/50 hover:text-ink'
+              }`}
+            >
+              {CADENCE_TAB_LABEL[cadence]}
+            </button>
+            <button
+              onClick={() => setBreakdownTab('project')}
+              className={`px-2 py-0.5 rounded text-[9px] font-bold tracking-wider transition-colors ${
+                breakdownTab === 'project' ? 'bg-paper shadow-xs text-ink' : 'text-ink/50 hover:text-ink'
+              }`}
+            >
+              PROJECT
+            </button>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full text-[11px]">
+            <thead>
+              <tr className="text-ink/40 border-b border-ink/10">
+                <th className="font-medium text-left pb-2 capitalize">
+                  {breakdownTab === 'day' ? CADENCE_TAB_LABEL[cadence].toLowerCase() : breakdownTab}
+                </th>
+                <th className="font-medium text-right pb-2">Cost</th>
+                <th className="font-medium text-right pb-2">Share</th>
+                <th className="font-medium text-right pb-2">Tokens</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-ink/5">
+              {activeBreakdownRows.map((row) => (
+                <tr key={row.name}>
+                  <td className="py-2.5 flex items-center gap-2">
+                    <div className={`w-1.5 h-1.5 rounded-full ${row.dotColorClass}`}></div>
+                    <span className="font-semibold text-ink whitespace-nowrap">{row.name}</span>
+                  </td>
+                  <td className="py-2.5 text-right font-bold text-ink">{row.cost}</td>
+                  <td className="py-2.5 text-right text-ink/60">{row.share}</td>
+                  <td className="py-2.5 text-right text-ink/60">{row.tokens}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Dynamic Stacked Share Bar */}
+        <div className="h-1.5 w-full bg-ink/5 rounded-full mt-3 overflow-hidden flex">
+          {activeBreakdownRows.map((row, idx) => (
+            <div
+              key={row.name}
+              className={`h-full ${
+                idx === 0 ? 'bg-ink/80' : idx === 1 ? 'bg-ink/45 border-l border-paper' : 'bg-ink/20 border-l border-paper'
+              }`}
+              style={{ width: `${row.sharePercent}%` }}
+            ></div>
+          ))}
+        </div>
+      </div>
+
+      {/* Cost quality */}
+      <div className="bg-paper border border-ink/15 rounded-lg p-3.5 shadow-xs xl:col-span-1">
+        <div className="font-semibold text-xs mb-3 text-ink">Cost quality</div>
+        <div className="space-y-2 text-[11px]">
+          <div className="flex justify-between items-center">
+            <span className="text-ink/60">Provider reported</span>
+            <span className="font-semibold text-ink">100.0%</span>
+          </div>
+          <div className="flex justify-between items-center">
+            <span className="text-ink/60">Model priced</span>
+            <span className="font-semibold text-ink">0.0%</span>
+          </div>
+          <div className="flex justify-between items-center">
+            <span className="text-ink/60">Unpriced</span>
+            <span className="font-semibold text-ink">0.0%</span>
+          </div>
+        </div>
+
+        <div className="border-t border-ink/10 mt-3 pt-2.5">
+          <div className="flex justify-between items-center text-[11px]">
+            <span className="text-ink/60">Cache savings</span>
+            <span className="font-semibold text-ink">{activeMetrics.cacheSavings}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/token-usage-settings/Chart.tsx

@@ -0,0 +1,74 @@
+import type { ChartMetric, ChartSeriesPoint } from '@/shared/types';
+import { formatCompactTokens, formatCost } from '@/shared/lib/format/number';
+
+interface UsageChartProps {
+  cadence: string;
+  metric: ChartMetric;
+  series: ChartSeriesPoint[];
+}
+
+function buildPath(series: ChartSeriesPoint[], values: number[], max: number): string {
+  if (series.length === 0) return '';
+  if (series.length === 1) return 'M0,98 L100,98';
+  const span = max > 0 ? max : 1;
+  return series
+    .map((_, index) => {
+      const x = (index / (series.length - 1)) * 100;
+      const y = 98 - (values[index] / span) * 94;
+      return `${index === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`;
+    })
+    .join(' ');
+}
+
+export function UsageChart({ cadence, metric, series }: UsageChartProps) {
+  const values = series.map((p) => (metric === 'cost' ? p.cost : p.tokens));
+  const max = values.length > 0 ? Math.max(...values) : 0;
+  const path = buildPath(series, values, max);
+  const axisMax = metric === 'cost' ? formatCost(max) || '$0.00' : formatCompactTokens(max) ?? '0';
+  const axisMid = metric === 'cost' ? formatCost(max / 2) || '$0.00' : formatCompactTokens(max / 2) ?? '0';
+  const first = series[0]?.label ?? '';
+  const mid = series.length > 2 ? series[Math.floor(series.length / 2)]?.label ?? '' : '';
+  const last = series.length > 1 ? series[series.length - 1]?.label ?? '' : '';
+
+  if (series.length === 0) {
+    return (
+      <div className="h-28 flex items-center justify-center text-[11px] text-ink/40">
+        No usage data in this period
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-28 relative">
+      <div className="absolute inset-0 flex flex-col justify-between pt-1 pb-4">
+        <div className="border-t border-ink/5 w-full border-dashed"></div>
+        <div className="border-t border-ink/5 w-full border-dashed"></div>
+        <div className="border-t border-ink/15 w-full"></div>
+      </div>
+      <div className="absolute left-0 top-0 bottom-4 flex flex-col justify-between text-[9px] font-mono text-ink/40 w-9">
+        <span>{axisMax}</span>
+        <span>{axisMid}</span>
+        <span>0</span>
+      </div>
+      <div className="absolute left-10 right-0 bottom-4 top-0 flex items-end">
+        <svg className="w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
+          <path
+            d={path}
+            fill="none"
+            stroke="currentColor"
+            className="text-ink/60 transition-all duration-300"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+      <div className="absolute left-10 right-0 bottom-0 h-4 flex justify-between text-[9px] text-ink/40 items-end">
+        <span>{first}</span>
+        {mid && <span>{mid}</span>}
+        <span>{last}</span>
+      </div>
+      <span className="sr-only">{`${cadence} ${metric} trend`}</span>
+    </div>
+  );
+}

package/src/client/components/settings/categories/token-usage-settings/MetricsGrid.tsx

@@ -0,0 +1,44 @@
+import type { TokenUsageMetricSet } from '@/shared/types';
+import { StatCard } from '@/client/components/common/StatCard';
+
+interface TokenUsageMetricsGridProps {
+  activeMetrics: TokenUsageMetricSet;
+}
+
+export function TokenUsageMetricsGrid({ activeMetrics }: TokenUsageMetricsGridProps) {
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2.5 items-stretch">
+      <StatCard
+        value={activeMetrics.processedTokens}
+        label="Processed tokens"
+        hint={activeMetrics.activeRate}
+      />
+
+      <StatCard
+        value={activeMetrics.cachedInput}
+        label="Cached input"
+        hint={activeMetrics.cachedPercent}
+      />
+
+      <StatCard
+        value={activeMetrics.uncachedInput}
+        label="Uncached input"
+        hint="0 cache writes"
+      />
+
+      <StatCard
+        value={activeMetrics.outputTokens}
+        label="Output"
+        hint={activeMetrics.reasoning}
+      />
+
+      <StatCard
+        value={activeMetrics.cacheSavings}
+        label="Cache savings"
+        hint="0.0x the raw token cost"
+        tone="muted"
+        className="col-span-2 sm:col-span-1"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import type { DeepSeekUsageReport } from '@/shared/types';
+import { StatCard } from '@/client/components/common/StatCard';
+import { formatAmount, formatNumber } from '@/client/components/settings/categories/usage-settings/format';
+
+interface DeepSeekCardProps {
+  report: DeepSeekUsageReport;
+}
+
+/** DeepSeek prepaid balance; the provider exposes no usage/quota API. */
+export function DeepSeekCard({ report }: DeepSeekCardProps) {
+  const balance = report.balance;
+
+  if (!balance) {
+    return <p className="text-[11px] text-ink/50">DeepSeek balance data is not available.</p>;
+  }
+
+  return (
+    <>
+      <div className="@container">
+        <div className="grid grid-cols-3 @[540px]:grid-cols-5 gap-2.5 items-stretch">
+          <StatCard
+            value={balance.isAvailable ? 'Available' : 'Unavailable'}
+            label="Prepaid balance"
+            hint={balance.isAvailable ? 'Account can spend' : 'Top up required'}
+            tone={balance.isAvailable ? 'default' : 'muted'}
+          />
+          <StatCard
+            value={formatNumber(balance.entries.length)}
+            label="Currency buckets"
+            hint={balance.entries.length > 0 ? 'From the balance endpoint' : 'No entries returned'}
+            tone="muted"
+          />
+        </div>
+      </div>
+
+      {balance.entries.length === 0 ? (
+        <p className="text-[11px] text-ink/50">The balance endpoint returned no currency entries.</p>
+      ) : (
+        <div className="grid grid-cols-1 gap-2.5">
+          {balance.entries.map((entry) => (
+            <div key={entry.currency} className="bg-paper border border-ink/15 rounded-lg p-3 shadow-xs">
+              <div className="flex items-center justify-between gap-2 mb-2">
+                <span className="text-[11px] font-semibold text-ink">{entry.currency}</span>
+                <span className="text-[10px] font-mono uppercase tracking-wider text-ink/40">Balance</span>
+              </div>
+              <dl className="grid grid-cols-3 gap-2 text-[10px]">
+                <div>
+                  <dt className="text-ink/50">Total</dt>
+                  <dd className="font-semibold text-ink tabular-nums break-words">{formatAmount(entry.totalBalance)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink/50">Granted</dt>
+                  <dd className="font-semibold text-ink tabular-nums break-words">{formatAmount(entry.grantedBalance)}</dd>
+                </div>
+                <div>
+                  <dt className="text-ink/50">Topped up</dt>
+                  <dd className="font-semibold text-ink tabular-nums break-words">{formatAmount(entry.toppedUpBalance)}</dd>
+                </div>
+              </dl>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,68 @@
+import type { KenariUsageReport } from '@/shared/types';
+import { StatCard } from '@/client/components/common/StatCard';
+import { QuotaSection } from '@/client/components/settings/categories/usage-settings/QuotaSection';
+import { UsageTable } from '@/client/components/settings/categories/usage-settings/UsageTable';
+import { formatCompactTokens, formatNumber, formatRp } from '@/client/components/settings/categories/usage-settings/format';
+
+interface KenariCardProps {
+  report: KenariUsageReport;
+}
+
+/** kenari.id wallet balance, plan quota, and 30-day usage. */
+export function KenariCard({ report }: KenariCardProps) {
+  const { balance, usage, quota } = report;
+
+  if (!balance && !usage && !quota) {
+    return <p className="text-[11px] text-ink/50">No kenari data was returned for this account.</p>;
+  }
+
+  const balanceValue = balance
+    ? balance.amountRp !== null
+      ? formatRp(balance.amountRp)
+      : balance.raw
+    : '—';
+  const balanceHint = balance
+    ? balance.amountRp !== null
+      ? balance.raw
+      : 'Amount could not be parsed'
+    : 'Balance unavailable';
+
+  const processedTokens = usage
+    ? usage.rows.reduce((sum, row) => sum + row.inputTokens + row.outputTokens, 0)
+    : 0;
+
+  return (
+    <>
+      <div className="@container">
+        <div className="grid grid-cols-3 @[540px]:grid-cols-5 gap-2.5 items-stretch">
+          <StatCard value={balanceValue} label="Wallet balance" hint={balanceHint} />
+          <StatCard
+            value={quota?.planName ?? '—'}
+            label="Active plan"
+            hint={quota ? 'kenari quota plan' : 'Quota unavailable'}
+          />
+          <StatCard
+            value={usage ? formatNumber(usage.totalRequests) : '—'}
+            label="Requests (30 days)"
+            hint={usage ? 'Across all models' : 'Usage report unavailable'}
+          />
+          <StatCard
+            value={usage ? formatRp(usage.totalCostRp) : '—'}
+            label="Cost (30 days)"
+            hint={usage ? 'Billed in Rupiah' : 'Usage report unavailable'}
+          />
+        <StatCard
+          value={usage ? formatCompactTokens(processedTokens) : '—'}
+          label="Tokens processed (30 days)"
+          hint={usage ? 'Input + output' : 'Usage report unavailable'}
+          tone="muted"
+          className="col-span-2 @[540px]:col-span-1"
+        />
+        </div>
+      </div>
+
+      <QuotaSection quota={quota} />
+      <UsageTable usage={usage} />
+    </>
+  );
+}

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

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'preact/compat';
+import { AlertCircle, KeyRound } from 'lucide-preact';
+
+interface ProviderCardProps {
+  providerName: string;
+  configured: boolean;
+  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) {
+  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>
+      </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}
+          </>
+        )}
+
+        {note && (
+          <p className="text-[10px] text-ink/50 leading-relaxed border-t border-ink/10 pt-2.5">{note}</p>
+        )}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,39 @@
+import type { UsageReport } 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';
+
+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;
+}
+
+/** 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>
+    );
+  }
+
+  return (
+    <ProviderCard
+      providerName="DeepSeek"
+      configured={report.deepseek.configured}
+      error={report.deepseek.error}
+      note={DEEPSEEK_NOTE}
+    >
+      <DeepSeekCard report={report.deepseek} />
+    </ProviderCard>
+  );
+}