apteva 0.4.53 → 0.4.56

package/src/web/components/meta-agent/MetaAgent.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback, createContext, useContext, type ReactNode } from "react";
 import { Chat } from "@apteva/apteva-kit";
-import { useAuth, useProjects, useTriggerRefresh, useTheme } from "../../context";
+import { useAuth, useProjects, useTriggerRefresh, useTheme, useUIMode } from "../../context";
 
 interface MetaAgentStatus {
   enabled: boolean;
@@ -129,6 +129,7 @@ export function MetaAgentButton() {
 // Chat panel component - renders as a right-side drawer
 export function MetaAgentPanel() {
   const { theme } = useTheme();
+  const { t } = useUIMode();
   const ctx = useMetaAgent();
   const { currentProjectId, currentProject } = useProjects();
   const triggerRefresh = useTriggerRefresh();
@@ -191,7 +192,10 @@ export function MetaAgentPanel() {
               <AssistantIcon className="w-12 h-12 text-[var(--color-border-light)] mb-4" />
               <h3 className="font-medium mb-2">Apteva Assistant</h3>
               <p className="text-sm text-[var(--color-text-muted)] mb-6">
-                I can help you navigate Apteva, create agents, set up MCP servers, and more.
+                {t(
+                  "I can help you navigate Apteva, create agents, set up MCP servers, and more.",
+                  "I can help you hire employees, assign them work, and manage your team."
+                )}
               </p>
               {error && (
                 <p className="text-sm text-red-400 mb-4">{error}</p>

package/src/web/components/settings/SettingsPage.tsx

@@ -2,16 +2,20 @@ import React, { useState, useEffect } from "react";
 import { CheckIcon, CloseIcon, PlusIcon } from "../common/Icons";
 import { Modal, useConfirm } from "../common/Modal";
 import { Select } from "../common/Select";
-import { useProjects, useAuth, useTheme, type Project } from "../../context";
+import { useProjects, useAuth, useTheme, useUIMode, type Project } from "../../context";
 import type { ThemeMode, ThemeStyle } from "../../themes";
 import type { Provider } from "../../types";
+import type { UIMode } from "../../context";
 
 type SettingsTab = "general" | "providers" | "projects" | "channels" | "api-keys" | "account" | "updates" | "data" | "assistant";
 
 export function SettingsPage() {
   const { projectsEnabled, metaAgentEnabled } = useProjects();
+  const { isBusiness } = useUIMode();
   const [activeTab, setActiveTab] = useState<SettingsTab>("general");
 
+  const hiddenInBusiness: SettingsTab[] = ["providers", "api-keys", "data"];
+
   const tabs: { key: SettingsTab; label: string }[] = [
     { key: "general", label: "General" },
     { key: "providers", label: "Providers" },
@@ -22,7 +26,7 @@ export function SettingsPage() {
     { key: "account", label: "Account" },
     { key: "updates", label: "Updates" },
     { key: "data", label: "Data" },
-  ];
+  ].filter(tab => !isBusiness || !hiddenInBusiness.includes(tab.key));
 
   return (
     <div className="flex-1 flex flex-col md:flex-row overflow-hidden">
@@ -102,6 +106,7 @@ function SettingsNavItem({
 function GeneralSettings() {
   const { authFetch } = useAuth();
   const { mode, style, setMode, setStyle } = useTheme();
+  const { mode: uiMode, setMode: setUIMode } = useUIMode();
   const [instanceUrl, setInstanceUrl] = useState("");
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -220,6 +225,39 @@ function GeneralSettings() {
         </div>
       </div>
 
+      {/* UI Mode */}
+      <div className="bg-[var(--color-surface)] card p-4 mb-4">
+        <h3 className="font-medium mb-2">UI Mode</h3>
+        <p className="text-sm text-[var(--color-text-muted)] mb-4">Switch between developer and business views.</p>
+        <div className="flex gap-3">
+          {([
+            { value: "developer" as UIMode, label: "Developer", description: "Full control over agents, providers, MCP, and configuration" },
+            { value: "business" as UIMode, label: "Business", description: "Simplified view focused on employees and conversations" },
+          ]).map(opt => (
+            <button
+              key={opt.value}
+              onClick={() => setUIMode(opt.value)}
+              className={`flex-1 max-w-[240px] px-4 py-3 border text-left transition ${
+                uiMode === opt.value
+                  ? "border-[var(--color-accent)] bg-[var(--color-accent-10)]"
+                  : "border-[var(--color-border-light)] bg-[var(--color-bg)] hover:border-[var(--color-scrollbar)]"
+              }`}
+              style={{ borderRadius: "var(--radius-card)" }}
+            >
+              <div className="flex items-center gap-2 mb-1">
+                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
+                  uiMode === opt.value ? "border-[var(--color-accent)]" : "border-[var(--color-scrollbar)]"
+                }`}>
+                  {uiMode === opt.value && <div className="w-2 h-2 rounded-full bg-[var(--color-accent)]" />}
+                </div>
+                <span className="text-sm font-medium">{opt.label}</span>
+              </div>
+              <p className="text-xs text-[var(--color-text-muted)] ml-6">{opt.description}</p>
+            </button>
+          ))}
+        </div>
+      </div>
+
       <div className="bg-[var(--color-surface)] card p-4">
         <h3 className="font-medium mb-2">Instance URL</h3>
         <p className="text-sm text-[var(--color-text-muted)] mb-4">
@@ -354,9 +392,13 @@ function ProvidersSettings() {
   };
 
   const llmProviders = providers.filter(p => p.type === "llm");
+  const cloudVoiceProviders = providers.filter(p => p.type === "voice" && !p.isLocal);
+  const localVoiceProviders = providers.filter(p => p.type === "voice" && p.isLocal);
+  const voiceProviders = providers.filter(p => p.type === "voice");
   const integrations = providers.filter(p => p.type === "integration");
   const browserProviders = providers.filter(p => p.type === "browser");
   const llmConfiguredCount = llmProviders.filter(p => p.hasKey).length;
+  const voiceConfiguredCount = voiceProviders.filter(p => p.hasKey).length;
   const intConfiguredCount = integrations.filter(p => p.hasKey).length;
   const browserConfiguredCount = browserProviders.filter(p => p.hasKey).length;
 
@@ -426,6 +468,79 @@ function ProvidersSettings() {
         </div>
       </div>
 
+      {/* Voice Providers Section */}
+      <div>
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold mb-1">Voice Providers</h2>
+          <p className="text-[var(--color-text-muted)]">
+            Configure voice providers for real-time voice conversations. {voiceConfiguredCount} of {voiceProviders.length} configured.
+          </p>
+        </div>
+
+        {/* Cloud Voice Providers */}
+        <h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 uppercase tracking-wider">Cloud</h3>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 mb-6">
+          {cloudVoiceProviders.map(provider => (
+            <IntegrationKeyCard
+              key={provider.id}
+              provider={provider}
+              isEditing={selectedProvider === provider.id}
+              apiKey={apiKey}
+              saving={saving}
+              testing={testing}
+              error={selectedProvider === provider.id ? error : null}
+              success={selectedProvider === provider.id ? success : null}
+              onStartEdit={() => {
+                setSelectedProvider(provider.id);
+                setError(null);
+                setSuccess(null);
+              }}
+              onCancelEdit={() => {
+                setSelectedProvider(null);
+                setApiKey("");
+                setError(null);
+              }}
+              onApiKeyChange={setApiKey}
+              onSave={saveKey}
+              onDelete={() => deleteKey(provider.id)}
+              projectsEnabled={projectsEnabled}
+              projects={projects}
+              onRefresh={fetchProviders}
+            />
+          ))}
+        </div>
+
+        {/* Local Voice Providers */}
+        <h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 uppercase tracking-wider">Local</h3>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {localVoiceProviders.map(provider => (
+            <ProviderKeyCard
+              key={provider.id}
+              provider={provider}
+              isEditing={selectedProvider === provider.id}
+              apiKey={apiKey}
+              saving={saving}
+              testing={testing}
+              error={selectedProvider === provider.id ? error : null}
+              success={selectedProvider === provider.id ? success : null}
+              onStartEdit={() => {
+                setSelectedProvider(provider.id);
+                setError(null);
+                setSuccess(null);
+              }}
+              onCancelEdit={() => {
+                setSelectedProvider(null);
+                setApiKey("");
+                setError(null);
+              }}
+              onApiKeyChange={setApiKey}
+              onSave={saveKey}
+              onDelete={() => deleteKey(provider.id)}
+            />
+          ))}
+        </div>
+      </div>
+
       {/* MCP Integrations Section */}
       <div>
         <div className="mb-6">
@@ -1030,26 +1145,28 @@ function ProviderKeyCard({
   const { authFetch: providerAuthFetch } = useAuth();
   const isOllama = provider.id === "ollama";
   const isCDP = provider.id === "cdp";
-  const isUrlBased = isOllama || isCDP;
+  const isLocal = provider.isLocal || false;
+  const isUrlBased = isLocal || isCDP;
   const isBrowser = provider.type === "browser";
   const isMultiField = provider.id === "browserbase";
-  const [ollamaStatus, setOllamaStatus] = React.useState<{ connected: boolean; modelCount?: number; isDocker?: boolean } | null>(null);
+  const voiceSubtype = (provider as any).voiceSubtype as string | undefined;
+  const [localStatus, setLocalStatus] = React.useState<{ connected: boolean; modelCount?: number; isDocker?: boolean } | null>(null);
   const [installing, setInstalling] = React.useState(false);
   const [installResult, setInstallResult] = React.useState<{ success: boolean; message: string } | null>(null);
 
-  // Check Ollama status when configured or after install
-  const checkOllamaStatus = React.useCallback(() => {
-    providerAuthFetch("/api/providers/ollama/status")
+  // Check status for local providers (Ollama + local voice providers)
+  const checkLocalStatus = React.useCallback(() => {
+    providerAuthFetch(`/api/providers/${provider.id}/status`)
       .then(res => res.json())
-      .then(data => setOllamaStatus({ connected: data.connected, modelCount: data.modelCount, isDocker: data.isDocker }))
-      .catch(() => setOllamaStatus({ connected: false }));
-  }, [providerAuthFetch]);
+      .then(data => setLocalStatus({ connected: data.connected, modelCount: data.modelCount, isDocker: data.isDocker }))
+      .catch(() => setLocalStatus({ connected: false }));
+  }, [providerAuthFetch, provider.id]);
 
   React.useEffect(() => {
-    if (isOllama) {
-      checkOllamaStatus();
+    if (isLocal) {
+      checkLocalStatus();
     }
-  }, [isOllama, provider.hasKey, checkOllamaStatus]);
+  }, [isLocal, provider.hasKey, checkLocalStatus]);
 
   const handleInstallOllama = async () => {
     setInstalling(true);
@@ -1059,8 +1176,7 @@ function ProviderKeyCard({
       const data = await res.json();
       if (data.success) {
         setInstallResult({ success: true, message: data.message });
-        // Auto-save the default URL and refresh status
-        checkOllamaStatus();
+        checkLocalStatus();
       } else {
         setInstallResult({ success: false, message: data.error || "Installation failed" });
       }
@@ -1079,26 +1195,33 @@ function ProviderKeyCard({
         <div className="min-w-0">
           <h3 className="font-medium">{provider.name}</h3>
           <p className="text-sm text-[var(--color-text-muted)] truncate">
-            {isBrowser
-              ? (provider.description || "Browser automation")
-              : provider.type === "integration"
-                ? (provider.description || "MCP integration")
-                : isOllama
-                  ? "Run models locally"
-                  : `${provider.models.length} models`}
+            {provider.description
+              ? provider.description
+              : isBrowser
+                ? "Browser automation"
+                : provider.type === "integration"
+                  ? "MCP integration"
+                  : isLocal
+                    ? "Run locally"
+                    : `${provider.models.length} models`}
           </p>
+          {voiceSubtype && (
+            <span className="text-[10px] uppercase tracking-wider text-[var(--color-text-muted)] bg-[var(--color-surface-raised)] px-1.5 py-0.5 rounded mt-1 inline-block">
+              {voiceSubtype === "both" ? "STT + TTS" : voiceSubtype === "stt" ? "STT" : "TTS"}
+            </span>
+          )}
         </div>
         {provider.hasKey ? (
           <span className={`text-xs flex items-center gap-1 px-2 py-1 rounded whitespace-nowrap flex-shrink-0 ${
-            isOllama && ollamaStatus
-              ? ollamaStatus.connected
+            isLocal && localStatus
+              ? localStatus.connected
                 ? "text-green-400 bg-green-500/10"
                 : "text-yellow-400 bg-yellow-500/10"
               : "text-green-400 bg-green-500/10"
           }`}>
-            {isOllama && ollamaStatus ? (
-              ollamaStatus.connected ? (
-                <><CheckIcon className="w-3 h-3" />{ollamaStatus.modelCount} models</>
+            {isLocal && localStatus ? (
+              localStatus.connected ? (
+                <><CheckIcon className="w-3 h-3" />{localStatus.modelCount ? `${localStatus.modelCount} models` : "Connected"}</>
               ) : (
                 <>Not running</>
               )
@@ -1147,8 +1270,8 @@ function ProviderKeyCard({
                 type={isUrlBased ? "text" : "password"}
                 value={apiKey}
                 onChange={e => onApiKeyChange(e.target.value)}
-                placeholder={isOllama
-                  ? "http://localhost:11434"
+                placeholder={isLocal
+                  ? (provider.defaultBaseUrl || "http://localhost:8080")
                   : isCDP ? "ws://localhost:9222"
                   : provider.hasKey ? "Enter new API key..." : "Enter API key..."}
                 autoFocus
@@ -1159,7 +1282,7 @@ function ProviderKeyCard({
               <p className="text-xs text-[var(--color-text-muted)]">
                 {isCDP
                   ? "Enter the CDP URL of your browser (e.g., ws://localhost:9222)"
-                  : "Enter your Ollama server URL. Default is http://localhost:11434"}
+                  : `Enter the server URL. Default is ${provider.defaultBaseUrl || "http://localhost:8080"}`}
               </p>
             )}
             {error && <p className="text-red-400 text-sm">{error}</p>}
@@ -1182,15 +1305,21 @@ function ProviderKeyCard({
           </div>
         ) : provider.hasKey ? (
           <div>
-            {isOllama && ollamaStatus && !ollamaStatus.connected && !ollamaStatus.isDocker && (
+            {isLocal && localStatus && !localStatus.connected && (
               <div className="mb-3">
-                <button
-                  onClick={handleInstallOllama}
-                  disabled={installing}
-                  className="w-full px-3 py-1.5 bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30 rounded text-sm font-medium transition disabled:opacity-50 disabled:cursor-wait"
-                >
-                  {installing ? "Starting Ollama..." : "Start Ollama"}
-                </button>
+                {isOllama && !localStatus.isDocker ? (
+                  <button
+                    onClick={handleInstallOllama}
+                    disabled={installing}
+                    className="w-full px-3 py-1.5 bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30 rounded text-sm font-medium transition disabled:opacity-50 disabled:cursor-wait"
+                  >
+                    {installing ? "Starting Ollama..." : "Start Ollama"}
+                  </button>
+                ) : (
+                  <p className="text-xs text-yellow-400/80">
+                    Service not reachable. Make sure it&apos;s running at the configured URL.
+                  </p>
+                )}
                 {installResult && (
                   <p className={`text-xs mt-1.5 ${installResult.success ? "text-green-400" : "text-red-400"}`}>
                     {installResult.message}
@@ -1206,7 +1335,7 @@ function ProviderKeyCard({
                 rel="noopener noreferrer"
                 className="text-sm text-[#3b82f6] hover:underline"
               >
-                {isOllama ? "Ollama docs" : "View docs"}
+                {isLocal ? "Setup guide" : "View docs"}
               </a>
             ) : (
               <span />
@@ -1229,14 +1358,14 @@ function ProviderKeyCard({
           </div>
         ) : (
           <div>
-            {isOllama && !ollamaStatus?.isDocker && (
+            {isOllama && !localStatus?.isDocker && (
               <div className="mb-3">
                 <button
                   onClick={handleInstallOllama}
                   disabled={installing}
                   className="w-full px-3 py-2 bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30 rounded text-sm font-medium transition disabled:opacity-50 disabled:cursor-wait"
                 >
-                  {installing ? "Installing Ollama..." : ollamaStatus?.connected ? "Ollama Running" : "Install Ollama"}
+                  {installing ? "Installing Ollama..." : localStatus?.connected ? "Ollama Running" : "Install Ollama"}
                 </button>
                 {installResult && (
                   <p className={`text-xs mt-1.5 ${installResult.success ? "text-green-400" : "text-red-400"}`}>
@@ -1253,7 +1382,7 @@ function ProviderKeyCard({
                   rel="noopener noreferrer"
                   className="text-sm text-[#3b82f6] hover:underline"
                 >
-                  {isOllama ? "Manual install" : isBrowser ? "View docs" : "Get API key"}
+                  {isLocal ? "Setup guide" : isBrowser ? "View docs" : "Get API key"}
                 </a>
               ) : (
                 <span />
@@ -1506,7 +1635,7 @@ function IntegrationKeyCard({
   const isUrlBased = provider.isLocal;
   const inputType = isUrlBased ? "text" : "password";
   const inputPlaceholder = isUrlBased
-    ? (provider.id === "cdp" ? "ws://localhost:9222" : "http://localhost:11434")
+    ? (provider.defaultBaseUrl || "http://localhost:8080")
     : "Enter API key...";
 
   // Enhanced view with project support

package/src/web/components/telemetry/TelemetryPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import { Select } from "../common/Select";
-import { useTelemetryContext, useProjects, useAuth, type TelemetryEvent } from "../../context";
+import { useTelemetryContext, useProjects, useAuth, useUIMode, type TelemetryEvent } from "../../context";
 import {
   AreaChart, Area, BarChart, Bar,
   XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
@@ -97,6 +97,7 @@ export function TelemetryPage() {
   const { events: realtimeEvents, statusChangeCounter } = useTelemetryContext();
   const { currentProjectId, currentProject, costTrackingEnabled, projectsEnabled, projects } = useProjects();
   const { authFetch } = useAuth();
+  const { isDev, isBusiness, t } = useUIMode();
   const [fetchedStats, setFetchedStats] = useState<TelemetryStats | null>(null);
   const [historicalEvents, setHistoricalEvents] = useState<TelemetryEvent[]>([]);
   const [fetchedUsage, setFetchedUsage] = useState<UsageByAgent[]>([]);
@@ -143,8 +144,8 @@ export function TelemetryPage() {
     }
   };
 
-  // Track IDs that were in the fetched stats to avoid double-counting
-  const countedEventIdsRef = useRef<Set<string>>(new Set());
+  // Track the timestamp of the last fetch — only count realtime events arriving after this
+  const fetchTimestampRef = useRef<number>(0);
 
   // Track which events are "new" (for animation) - stores event IDs with their arrival time
   const [newEventIds, setNewEventIds] = useState<Set<string>>(new Set());
@@ -220,8 +221,8 @@ export function TelemetryPage() {
       const events = eventsData.events || [];
       setHistoricalEvents(events);
 
-      // Mark all fetched event IDs as counted (stats already include them)
-      countedEventIdsRef.current = new Set(events.map((e: TelemetryEvent) => e.id));
+      // Record fetch time — realtime events before this are already in DB aggregations
+      fetchTimestampRef.current = Date.now();
 
       // Fetch usage by agent
       const usageParams = new URLSearchParams();
@@ -283,7 +284,8 @@ export function TelemetryPage() {
     let deltaCost = 0;
 
     for (const event of realtimeEvents) {
-      if (!countedEventIdsRef.current.has(event.id)) {
+      // Only count events received via SSE AFTER the last fetch (DB already has everything before)
+      if (event._receivedAt && event._receivedAt > fetchTimestampRef.current) {
         deltaEvents++;
         const eventStats = extractEventStats(event);
         deltaLlmCalls += eventStats.llm_calls;
@@ -320,9 +322,9 @@ export function TelemetryPage() {
       usageMap.set(u.agent_id, { ...u });
     }
 
-    // Add deltas from real-time events
+    // Add deltas from real-time events received after the last fetch
     for (const event of realtimeEvents) {
-      if (!countedEventIdsRef.current.has(event.id)) {
+      if (event._receivedAt && event._receivedAt > fetchTimestampRef.current) {
         const eventStats = extractEventStats(event);
         const existing = usageMap.get(event.agent_id);
         if (existing) {
@@ -397,9 +399,9 @@ export function TelemetryPage() {
       buckets.set(d.date, { ...d });
     }
 
-    // Add deltas from real-time events not already counted
+    // Add deltas from real-time events received after the last fetch
     for (const event of realtimeEvents) {
-      if (!countedEventIdsRef.current.has(event.id)) {
+      if (event._receivedAt && event._receivedAt > fetchTimestampRef.current) {
         const ts = new Date(event.timestamp);
         const key = useDaily
           ? `${ts.getFullYear()}-${String(ts.getMonth() + 1).padStart(2, "0")}-${String(ts.getDate()).padStart(2, "0")}`
@@ -617,19 +619,23 @@ export function TelemetryPage() {
           <div className="flex flex-wrap gap-4 mb-6">
             <StatCard label="Events" value={formatNumber(stats.total_events)} />
             <StatCard label="LLM Calls" value={formatNumber(stats.total_llm_calls)} />
-            <StatCard label="Tool Calls" value={formatNumber(stats.total_tool_calls)} />
+            {isDev && <StatCard label="Tool Calls" value={formatNumber(stats.total_tool_calls)} />}
             <StatCard label="Errors" value={formatNumber(stats.total_errors)} color="red" />
-            <StatCard label="Input Tokens" value={formatNumber(stats.total_input_tokens)} />
-            <StatCard label="Output Tokens" value={formatNumber(stats.total_output_tokens)} />
-            {(stats.total_cache_creation_tokens > 0 || stats.total_cache_read_tokens > 0) && (
+            {isDev && (
               <>
-                <StatCard label="Cache Write" value={formatNumber(stats.total_cache_creation_tokens)} />
-                <StatCard label="Cache Read" value={formatNumber(stats.total_cache_read_tokens)} />
+                <StatCard label="Input Tokens" value={formatNumber(stats.total_input_tokens)} />
+                <StatCard label="Output Tokens" value={formatNumber(stats.total_output_tokens)} />
+                {(stats.total_cache_creation_tokens > 0 || stats.total_cache_read_tokens > 0) && (
+                  <>
+                    <StatCard label="Cache Write" value={formatNumber(stats.total_cache_creation_tokens)} />
+                    <StatCard label="Cache Read" value={formatNumber(stats.total_cache_read_tokens)} />
+                  </>
+                )}
+                {stats.total_reasoning_tokens > 0 && (
+                  <StatCard label="Reasoning" value={formatNumber(stats.total_reasoning_tokens)} />
+                )}
               </>
             )}
-            {stats.total_reasoning_tokens > 0 && (
-              <StatCard label="Reasoning" value={formatNumber(stats.total_reasoning_tokens)} />
-            )}
             {costTrackingEnabled && (
               <StatCard label="Total Cost" value={`$${stats.total_cost.toFixed(4)}`} color="orange" />
             )}
@@ -720,7 +726,9 @@ export function TelemetryPage() {
               const stackedData = chartData.map(d => {
                 const cacheRead = d.cache_read_tokens || 0;
                 const cacheWrite = d.cache_creation_tokens || 0;
-                const regularInput = Math.max(0, d.input_tokens - cacheRead - cacheWrite);
+                // Anthropic: input_tokens includes cache_read but NOT cache_creation
+                // So regular = input_tokens - cache_read (don't subtract cache_write)
+                const regularInput = Math.max(0, d.input_tokens - cacheRead);
                 const reasoning = d.reasoning_tokens || 0;
                 const regularOutput = Math.max(0, d.output_tokens - reasoning);
                 return {
@@ -827,19 +835,19 @@ export function TelemetryPage() {
 
           return (
           <div className="mb-6">
-            <h2 className="text-lg font-medium mb-3">Usage by Agent</h2>
+            <h2 className="text-lg font-medium mb-3">{t("Usage by Agent", "Usage by Employee")}</h2>
             <div className="bg-[var(--color-surface)] card overflow-hidden">
               <table className="w-full text-sm">
                 <thead>
                   <tr className="border-b border-[var(--color-border)] text-[var(--color-text-muted)]">
-                    <SortHeader label="Agent" field="agent" align="left" />
+                    <SortHeader label={t("Agent", "Employee")} field="agent" align="left" />
                     <SortHeader label="LLM Calls" field="llm_calls" />
-                    <SortHeader label="Tool Calls" field="tool_calls" />
-                    <SortHeader label="Input Tokens" field="input_tokens" />
-                    <SortHeader label="Output Tokens" field="output_tokens" />
-                    {hasCacheTokens && <SortHeader label="Cache Write" field="cache_creation_tokens" />}
-                    {hasCacheTokens && <SortHeader label="Cache Read" field="cache_read_tokens" />}
-                    {hasReasoningTokens && <SortHeader label="Reasoning" field="reasoning_tokens" />}
+                    {isDev && <SortHeader label="Tool Calls" field="tool_calls" />}
+                    {isDev && <SortHeader label="Input Tokens" field="input_tokens" />}
+                    {isDev && <SortHeader label="Output Tokens" field="output_tokens" />}
+                    {isDev && hasCacheTokens && <SortHeader label="Cache Write" field="cache_creation_tokens" />}
+                    {isDev && hasCacheTokens && <SortHeader label="Cache Read" field="cache_read_tokens" />}
+                    {isDev && hasReasoningTokens && <SortHeader label="Reasoning" field="reasoning_tokens" />}
                     <SortHeader label="Errors" field="errors" />
                     {costTrackingEnabled && <SortHeader label="Est. Cost" field="cost" />}
                   </tr>
@@ -849,16 +857,16 @@ export function TelemetryPage() {
                     <tr key={u.agent_id} className="border-b border-[var(--color-border)] last:border-0 hover:bg-[var(--color-bg)]">
                       <td className="p-3 font-medium">{getAgentName(u.agent_id)}</td>
                       <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.llm_calls)}</td>
-                      <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.tool_calls)}</td>
-                      <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.input_tokens)}</td>
-                      <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.output_tokens)}</td>
-                      {hasCacheTokens && (
+                      {isDev && <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.tool_calls)}</td>}
+                      {isDev && <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.input_tokens)}</td>}
+                      {isDev && <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.output_tokens)}</td>}
+                      {isDev && hasCacheTokens && (
                         <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.cache_creation_tokens || 0)}</td>
                       )}
-                      {hasCacheTokens && (
+                      {isDev && hasCacheTokens && (
                         <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.cache_read_tokens || 0)}</td>
                       )}
-                      {hasReasoningTokens && (
+                      {isDev && hasReasoningTokens && (
                         <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.reasoning_tokens || 0)}</td>
                       )}
                       <td className="p-3 text-right">
@@ -921,12 +929,12 @@ export function TelemetryPage() {
                   <tr className="border-b border-[var(--color-border)] text-[var(--color-text-muted)]">
                     <PSortHeader label="Project" field="project" align="left" />
                     <PSortHeader label="LLM Calls" field="llm_calls" />
-                    <PSortHeader label="Tool Calls" field="tool_calls" />
-                    <PSortHeader label="Input Tokens" field="input_tokens" />
-                    <PSortHeader label="Output Tokens" field="output_tokens" />
-                    {hasProjCacheTokens && <PSortHeader label="Cache Write" field="cache_creation_tokens" />}
-                    {hasProjCacheTokens && <PSortHeader label="Cache Read" field="cache_read_tokens" />}
-                    {hasProjReasoningTokens && <PSortHeader label="Reasoning" field="reasoning_tokens" />}
+                    {isDev && <PSortHeader label="Tool Calls" field="tool_calls" />}
+                    {isDev && <PSortHeader label="Input Tokens" field="input_tokens" />}
+                    {isDev && <PSortHeader label="Output Tokens" field="output_tokens" />}
+                    {isDev && hasProjCacheTokens && <PSortHeader label="Cache Write" field="cache_creation_tokens" />}
+                    {isDev && hasProjCacheTokens && <PSortHeader label="Cache Read" field="cache_read_tokens" />}
+                    {isDev && hasProjReasoningTokens && <PSortHeader label="Reasoning" field="reasoning_tokens" />}
                     <PSortHeader label="Errors" field="errors" />
                     {costTrackingEnabled && <PSortHeader label="Est. Cost" field="cost" />}
                   </tr>
@@ -943,16 +951,16 @@ export function TelemetryPage() {
                         </span>
                       </td>
                       <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.llm_calls)}</td>
-                      <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.tool_calls)}</td>
-                      <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.input_tokens)}</td>
-                      <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.output_tokens)}</td>
-                      {hasProjCacheTokens && (
+                      {isDev && <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.tool_calls)}</td>}
+                      {isDev && <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.input_tokens)}</td>}
+                      {isDev && <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.output_tokens)}</td>}
+                      {isDev && hasProjCacheTokens && (
                         <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.cache_creation_tokens || 0)}</td>
                       )}
-                      {hasProjCacheTokens && (
+                      {isDev && hasProjCacheTokens && (
                         <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.cache_read_tokens || 0)}</td>
                       )}
-                      {hasProjReasoningTokens && (
+                      {isDev && hasProjReasoningTokens && (
                         <td className="p-3 text-right text-[var(--color-text-secondary)]">{formatNumber(u.reasoning_tokens || 0)}</td>
                       )}
                       <td className="p-3 text-right">