apteva 0.4.53 → 0.4.56

package/src/web/components/agents/AgentPanel.tsx

@@ -4,10 +4,10 @@ import { CloseIcon, MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, Re
 import { formatCron, formatRelativeTime, TrajectoryView } from "../tasks/TasksPage";
 import { Select } from "../common/Select";
 import { useConfirm } from "../common/Modal";
-import { useTelemetry, useTheme } from "../../context";
+import { useTelemetry, useTheme, useUIMode } from "../../context";
 import { useAuth } from "../../context";
-import type { Agent, Provider, AgentFeatures, McpServer, SkillSummary, MultiAgentConfig, OperatorConfig, Task } from "../../types";
-import { getMultiAgentConfig, getOperatorConfig } from "../../types";
+import type { Agent, Provider, AgentFeatures, McpServer, SkillSummary, MultiAgentConfig, OperatorConfig, RealtimeConfig, Task } from "../../types";
+import { getMultiAgentConfig, getOperatorConfig, getRealtimeConfig, isRealtimeEnabled, REALTIME_PROVIDERS } from "../../types";
 
 type Tab = "chat" | "threads" | "tasks" | "memory" | "files" | "settings";
 
@@ -33,6 +33,7 @@ const FEATURE_CONFIG = [
 
 export function AgentPanel({ agent, providers, onClose, onStartAgent, onUpdateAgent, onDeleteAgent }: AgentPanelProps) {
   const [activeTab, setActiveTab] = useState<Tab>("chat");
+  const { isDev } = useUIMode();
 
   return (
     <div className="w-full h-full flex flex-col overflow-hidden bg-[var(--color-bg)] border-l border-[var(--color-border)]">
@@ -56,9 +57,11 @@ export function AgentPanel({ agent, providers, onClose, onStartAgent, onUpdateAg
             <TabButton active={activeTab === "files"} onClick={() => setActiveTab("files")}>
               Files
             </TabButton>
-            <TabButton active={activeTab === "settings"} onClick={() => setActiveTab("settings")}>
-              Settings
-            </TabButton>
+            {isDev && (
+              <TabButton active={activeTab === "settings"} onClick={() => setActiveTab("settings")}>
+                Settings
+              </TabButton>
+            )}
           </div>
         </div>
 
@@ -113,17 +116,20 @@ function TabButton({ active, onClick, children }: { active: boolean; onClick: ()
 
 function ChatTab({ agent, onStartAgent }: { agent: Agent; onStartAgent: (e?: React.MouseEvent) => void }) {
   const { theme } = useTheme();
+  const { accessToken } = useAuth();
   if (agent.status === "running" && agent.port) {
     return (
       <Chat
         agentId="default"
         apiUrl={`/api/agents/${agent.id}`}
+        apiKey={accessToken || undefined}
         placeholder="Message this agent..."
         context={agent.systemPrompt}
         variant="terminal"
         theme={theme.id as "light" | "dark"}
         headerTitle={agent.name}
-        enableVoice={!!agent.features.realtime}
+        enableVoice={isRealtimeEnabled(agent.features)}
+        voiceProvider={getRealtimeConfig(agent.features).ttsProvider}
       />
     );
   }
@@ -1626,6 +1632,21 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
           };
         }
       });
+    } else if (key === "realtime") {
+      // Special handling for realtime feature - convert to RealtimeConfig
+      setForm(prev => {
+        if (isRealtimeEnabled(prev.features)) {
+          return { ...prev, features: { ...prev.features, realtime: false } };
+        } else {
+          return {
+            ...prev,
+            features: {
+              ...prev.features,
+              realtime: { enabled: true },
+            },
+          };
+        }
+      });
     } else {
       setForm(prev => ({
         ...prev,
@@ -1758,6 +1779,7 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
               // For agents/operator features, check the enabled property of the config
               const isEnabled = key === "agents" ? isAgentsEnabled()
                 : key === "operator" ? isOperatorEnabled()
+                : key === "realtime" ? isRealtimeEnabled(form.features)
                 : !!form.features[key];
               return (
                 <button
@@ -1806,6 +1828,103 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
           </FormField>
         )}
 
+        {/* Voice Configuration - shown when Realtime is enabled */}
+        {isRealtimeEnabled(form.features) && (() => {
+          const rtConfig = getRealtimeConfig(form.features);
+          const hasOpenAI = providers.some(p => p.id === "openai" && p.hasKey);
+          const hasGemini = providers.some(p => p.id === "gemini" && p.hasKey);
+          const voiceProviders = providers.filter(p => p.type === "voice" && p.hasKey);
+          const hasStandard = voiceProviders.length > 0;
+          const currentMode = rtConfig.provider || "standard";
+
+          const updateRt = (updates: Partial<RealtimeConfig>) => {
+            setForm(prev => ({
+              ...prev,
+              features: {
+                ...prev.features,
+                realtime: { ...getRealtimeConfig(prev.features), ...updates },
+              },
+            }));
+          };
+
+          const sttOptions = voiceProviders
+            .filter(p => !(p as any).voiceSubtype || (p as any).voiceSubtype === "stt" || (p as any).voiceSubtype === "both")
+            .map(p => ({ value: p.id, label: p.name }));
+          const ttsOptions = voiceProviders
+            .filter(p => !(p as any).voiceSubtype || (p as any).voiceSubtype === "tts" || (p as any).voiceSubtype === "both")
+            .map(p => ({ value: p.id, label: p.name }));
+
+          return (
+            <div className="p-3 bg-[var(--color-surface)] rounded border border-[var(--color-border-light)] space-y-3">
+              <p className="text-xs text-[var(--color-text-muted)] font-medium uppercase tracking-wider">Voice Configuration</p>
+              <FormField label="Voice Mode">
+                <div className="flex gap-2 flex-wrap">
+                  {hasOpenAI && (
+                    <button type="button" onClick={() => updateRt({ provider: "openai", model: "gpt-realtime", voice: "alloy" })}
+                      className={`px-3 py-1.5 text-sm rounded border transition ${currentMode === "openai" ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]" : "border-[var(--color-border-light)]"}`}>
+                      OpenAI Realtime
+                    </button>
+                  )}
+                  {hasGemini && (
+                    <button type="button" onClick={() => updateRt({ provider: "gemini", geminiVoice: "Kore" })}
+                      className={`px-3 py-1.5 text-sm rounded border transition ${currentMode === "gemini" ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]" : "border-[var(--color-border-light)]"}`}>
+                      Gemini Live
+                    </button>
+                  )}
+                  {hasStandard && (
+                    <button type="button" onClick={() => updateRt({ provider: "standard" })}
+                      className={`px-3 py-1.5 text-sm rounded border transition ${currentMode === "standard" ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]" : "border-[var(--color-border-light)]"}`}>
+                      Standard (STT+LLM+TTS)
+                    </button>
+                  )}
+                </div>
+              </FormField>
+              {currentMode === "openai" && (
+                <>
+                  <FormField label="Realtime Model">
+                    <Select value={rtConfig.model || "gpt-realtime"} options={REALTIME_PROVIDERS.openai.models.map(m => ({ value: m.value, label: m.label, recommended: m.recommended }))} onChange={(value) => updateRt({ model: value })} placeholder="Select model..." />
+                  </FormField>
+                  <FormField label="Voice">
+                    <Select value={rtConfig.voice || "alloy"} options={REALTIME_PROVIDERS.openai.voices.map(v => ({ value: v.value, label: v.label, recommended: v.recommended }))} onChange={(value) => updateRt({ voice: value })} placeholder="Select voice..." />
+                  </FormField>
+                </>
+              )}
+              {currentMode === "gemini" && (
+                <>
+                  <FormField label="Realtime Model">
+                    <Select value={rtConfig.geminiModel || REALTIME_PROVIDERS.gemini.models[0].value} options={REALTIME_PROVIDERS.gemini.models.map(m => ({ value: m.value, label: m.label, recommended: m.recommended }))} onChange={(value) => updateRt({ geminiModel: value })} placeholder="Select model..." />
+                  </FormField>
+                  <FormField label="Voice">
+                    <Select value={rtConfig.geminiVoice || "Kore"} options={REALTIME_PROVIDERS.gemini.voices.map(v => ({ value: v.value, label: v.label, recommended: v.recommended }))} onChange={(value) => updateRt({ geminiVoice: value })} placeholder="Select voice..." />
+                  </FormField>
+                  <div className="flex items-center gap-2">
+                    <button type="button" onClick={() => updateRt({ googleSearch: !rtConfig.googleSearch })}
+                      className={`flex items-center gap-2 px-3 py-1.5 text-sm rounded border transition ${rtConfig.googleSearch ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]" : "border-[var(--color-border-light)]"}`}>
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+                      Google Search
+                    </button>
+                    <span className="text-xs text-[var(--color-text-faint)]">Enable search grounding</span>
+                  </div>
+                </>
+              )}
+              {currentMode === "standard" && (
+                <>
+                  {sttOptions.length > 0 && (
+                    <FormField label="STT Provider">
+                      <Select value={rtConfig.sttProvider || (sttOptions[0]?.value ?? "")} options={sttOptions} onChange={(value) => updateRt({ sttProvider: value })} placeholder="Select STT provider..." />
+                    </FormField>
+                  )}
+                  {ttsOptions.length > 0 && (
+                    <FormField label="TTS Provider">
+                      <Select value={rtConfig.ttsProvider || (ttsOptions[0]?.value ?? "")} options={ttsOptions} onChange={(value) => updateRt({ ttsProvider: value })} placeholder="Select TTS provider..." />
+                    </FormField>
+                  )}
+                </>
+              )}
+            </div>
+          );
+        })()}
+
         {/* Agent Built-in Tools - Anthropic only */}
         {form.provider === "anthropic" && (
         <FormField label="Agent Built-in Tools">

package/src/web/components/agents/AgentsView.tsx

@@ -2,7 +2,8 @@ import React, { useMemo } from "react";
 import { AgentCard } from "./AgentCard";
 import { AgentPanel } from "./AgentPanel";
 import { LoadingSpinner } from "../common/LoadingSpinner";
-import { useProjects } from "../../context";
+import { useProjects, useUIMode } from "../../context";
+import { useMetaAgent } from "../meta-agent/MetaAgent";
 import type { Agent, Provider } from "../../types";
 
 interface AgentsViewProps {
@@ -33,6 +34,7 @@ export function AgentsView({
   canCreateAgent = true,
 }: AgentsViewProps) {
   const { currentProjectId, currentProject } = useProjects();
+  const { isBusiness, t } = useUIMode();
 
   // Filter agents by current project
   const filteredAgents = useMemo(() => {
@@ -49,10 +51,10 @@ export function AgentsView({
   }, [agents, currentProjectId]);
 
   const headerTitle = currentProjectId === null
-    ? "Agents"
+    ? t("Agents", "Employees")
     : currentProjectId === "unassigned"
-    ? "Unassigned Agents"
-    : currentProject?.name || "Agents";
+    ? t("Unassigned Agents", "Unassigned Employees")
+    : currentProject?.name || t("Agents", "Employees");
 
   return (
     <div className="flex-1 flex overflow-hidden relative">
@@ -70,11 +72,11 @@ export function AgentsView({
             <h1 className="text-xl font-semibold">{headerTitle}</h1>
             {currentProjectId !== null && (
               <span className="text-sm text-[var(--color-text-muted)]">
-                ({filteredAgents.length} agent{filteredAgents.length !== 1 ? "s" : ""})
+                ({filteredAgents.length} {t("agent", "employee")}{filteredAgents.length !== 1 ? "s" : ""})
               </span>
             )}
           </div>
-          {onNewAgent && (
+          {!isBusiness && onNewAgent && (
             <button
               onClick={onNewAgent}
               disabled={!canCreateAgent}
@@ -86,9 +88,13 @@ export function AgentsView({
         </div>
 
         {loading ? (
-          <LoadingSpinner message="Loading agents..." />
+          <LoadingSpinner message={t("Loading agents...", "Loading employees...")} />
         ) : filteredAgents.length === 0 ? (
-          <EmptyState onNewAgent={onNewAgent} canCreateAgent={canCreateAgent} hasProjectFilter={currentProjectId !== null} />
+          isBusiness ? (
+            <BusinessEmptyState />
+          ) : (
+            <EmptyState onNewAgent={onNewAgent} canCreateAgent={canCreateAgent} hasProjectFilter={currentProjectId !== null} />
+          )
         ) : (
           <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3 auto-rows-fr">
             {filteredAgents.map((agent) => (
@@ -156,3 +162,19 @@ function EmptyState({ onNewAgent, canCreateAgent, hasProjectFilter }: { onNewAge
     </div>
   );
 }
+
+function BusinessEmptyState() {
+  const { toggle } = useMetaAgent();
+  return (
+    <div className="text-center py-20 text-[var(--color-text-muted)]">
+      <p className="text-lg">No employees yet</p>
+      <p className="text-sm mt-1">Ask the Assistant to create one for you</p>
+      <button
+        onClick={toggle}
+        className="mt-4 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-black px-4 py-2 rounded font-medium transition"
+      >
+        Open Assistant
+      </button>
+    </div>
+  );
+}

package/src/web/components/agents/CreateAgentModal.tsx

@@ -3,8 +3,8 @@ import { Modal } from "../common/Modal";
 import { Select } from "../common/Select";
 import { MemoryIcon, TasksIcon, FilesIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, MultiAgentIcon } from "../common/Icons";
 import { useProjects, useAuth } from "../../context";
-import type { Provider, NewAgentForm, AgentFeatures, MultiAgentConfig } from "../../types";
-import { getMultiAgentConfig } from "../../types";
+import type { Provider, NewAgentForm, AgentFeatures, MultiAgentConfig, RealtimeConfig } from "../../types";
+import { getMultiAgentConfig, getRealtimeConfig, isRealtimeEnabled, REALTIME_PROVIDERS } from "../../types";
 
 interface CreateAgentModalProps {
   form: NewAgentForm;
@@ -99,10 +99,8 @@ export function CreateAgentModal({
         ? form.features.agents
         : (form.features.agents as MultiAgentConfig)?.enabled ?? false;
       if (isEnabled) {
-        // Turning off
         onFormChange({ ...form, features: { ...form.features, agents: false } });
       } else {
-        // Turning on with defaults - use project as group
         onFormChange({
           ...form,
           features: {
@@ -111,6 +109,19 @@ export function CreateAgentModal({
           },
         });
       }
+    } else if (key === "realtime") {
+      // Special handling for realtime feature
+      if (isRealtimeEnabled(form.features)) {
+        onFormChange({ ...form, features: { ...form.features, realtime: false } });
+      } else {
+        onFormChange({
+          ...form,
+          features: {
+            ...form.features,
+            realtime: { enabled: true },
+          },
+        });
+      }
     } else {
       onFormChange({
         ...form,
@@ -197,7 +208,9 @@ export function CreateAgentModal({
             <FormField label="Features">
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                 {FEATURE_CONFIG.map(({ key, label, description, icon: Icon }) => {
-                  const isEnabled = key === "agents" ? isAgentsEnabled() : !!form.features[key];
+                  const isEnabled = key === "agents" ? isAgentsEnabled()
+                    : key === "realtime" ? isRealtimeEnabled(form.features)
+                    : !!form.features[key];
                   return (
                     <button
                       key={key}
@@ -222,6 +235,143 @@ export function CreateAgentModal({
               </div>
             </FormField>
 
+            {/* Voice Configuration - shown when Realtime is enabled */}
+            {isRealtimeEnabled(form.features) && (() => {
+              const rtConfig = getRealtimeConfig(form.features);
+              const hasOpenAI = providers.some(p => p.id === "openai" && p.hasKey);
+              const hasGemini = providers.some(p => p.id === "gemini" && p.hasKey);
+              const voiceProviders = providers.filter(p => p.type === "voice" && p.hasKey);
+              const hasStandard = voiceProviders.length > 0;
+              const currentMode = rtConfig.provider || "standard";
+
+              const updateRt = (updates: Partial<RealtimeConfig>) => {
+                onFormChange({
+                  ...form,
+                  features: {
+                    ...form.features,
+                    realtime: { ...rtConfig, ...updates },
+                  },
+                });
+              };
+
+              // STT/TTS options for standard mode
+              const sttOptions = voiceProviders
+                .filter(p => !(p as any).voiceSubtype || (p as any).voiceSubtype === "stt" || (p as any).voiceSubtype === "both")
+                .map(p => ({ value: p.id, label: p.name }));
+              const ttsOptions = voiceProviders
+                .filter(p => !(p as any).voiceSubtype || (p as any).voiceSubtype === "tts" || (p as any).voiceSubtype === "both")
+                .map(p => ({ value: p.id, label: p.name }));
+
+              return (
+                <div className="p-3 bg-[var(--color-surface)] rounded border border-[var(--color-border-light)] space-y-3">
+                  <p className="text-xs text-[var(--color-text-muted)] font-medium uppercase tracking-wider">Voice Configuration</p>
+
+                  {/* Voice Mode Selection */}
+                  <FormField label="Voice Mode">
+                    <div className="flex gap-2 flex-wrap">
+                      {hasOpenAI && (
+                        <button type="button" onClick={() => updateRt({ provider: "openai", model: "gpt-realtime", voice: "alloy" })}
+                          className={`px-3 py-1.5 text-sm btn border transition ${currentMode === "openai" ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]" : "border-[var(--color-border-light)]"}`}>
+                          OpenAI Realtime
+                        </button>
+                      )}
+                      {hasGemini && (
+                        <button type="button" onClick={() => updateRt({ provider: "gemini", geminiVoice: "Kore" })}
+                          className={`px-3 py-1.5 text-sm btn border transition ${currentMode === "gemini" ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]" : "border-[var(--color-border-light)]"}`}>
+                          Gemini Live
+                        </button>
+                      )}
+                      {hasStandard && (
+                        <button type="button" onClick={() => updateRt({ provider: "standard" })}
+                          className={`px-3 py-1.5 text-sm btn border transition ${currentMode === "standard" ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]" : "border-[var(--color-border-light)]"}`}>
+                          Standard (STT+LLM+TTS)
+                        </button>
+                      )}
+                    </div>
+                  </FormField>
+
+                  {/* OpenAI Realtime options */}
+                  {currentMode === "openai" && (
+                    <>
+                      <FormField label="Realtime Model">
+                        <Select
+                          value={rtConfig.model || "gpt-realtime"}
+                          options={REALTIME_PROVIDERS.openai.models.map(m => ({ value: m.value, label: m.label, recommended: m.recommended }))}
+                          onChange={(value) => updateRt({ model: value })}
+                          placeholder="Select model..."
+                        />
+                      </FormField>
+                      <FormField label="Voice">
+                        <Select
+                          value={rtConfig.voice || "alloy"}
+                          options={REALTIME_PROVIDERS.openai.voices.map(v => ({ value: v.value, label: v.label, recommended: v.recommended }))}
+                          onChange={(value) => updateRt({ voice: value })}
+                          placeholder="Select voice..."
+                        />
+                      </FormField>
+                    </>
+                  )}
+
+                  {/* Gemini Live options */}
+                  {currentMode === "gemini" && (
+                    <>
+                      <FormField label="Realtime Model">
+                        <Select
+                          value={rtConfig.geminiModel || REALTIME_PROVIDERS.gemini.models[0].value}
+                          options={REALTIME_PROVIDERS.gemini.models.map(m => ({ value: m.value, label: m.label, recommended: m.recommended }))}
+                          onChange={(value) => updateRt({ geminiModel: value })}
+                          placeholder="Select model..."
+                        />
+                      </FormField>
+                      <FormField label="Voice">
+                        <Select
+                          value={rtConfig.geminiVoice || "Kore"}
+                          options={REALTIME_PROVIDERS.gemini.voices.map(v => ({ value: v.value, label: v.label, recommended: v.recommended }))}
+                          onChange={(value) => updateRt({ geminiVoice: value })}
+                          placeholder="Select voice..."
+                        />
+                      </FormField>
+                      <div className="flex items-center gap-2">
+                        <button type="button"
+                          onClick={() => updateRt({ googleSearch: !rtConfig.googleSearch })}
+                          className={`flex items-center gap-2 px-3 py-1.5 text-sm btn border transition ${rtConfig.googleSearch ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]" : "border-[var(--color-border-light)]"}`}>
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+                          Google Search
+                        </button>
+                        <span className="text-xs text-[var(--color-text-faint)]">Enable search grounding</span>
+                      </div>
+                    </>
+                  )}
+
+                  {/* Standard mode: STT + TTS provider selection */}
+                  {currentMode === "standard" && (
+                    <>
+                      {sttOptions.length > 0 && (
+                        <FormField label="STT Provider">
+                          <Select
+                            value={rtConfig.sttProvider || (sttOptions[0]?.value ?? "")}
+                            options={sttOptions}
+                            onChange={(value) => updateRt({ sttProvider: value })}
+                            placeholder="Select STT provider..."
+                          />
+                        </FormField>
+                      )}
+                      {ttsOptions.length > 0 && (
+                        <FormField label="TTS Provider">
+                          <Select
+                            value={rtConfig.ttsProvider || (ttsOptions[0]?.value ?? "")}
+                            options={ttsOptions}
+                            onChange={(value) => updateRt({ ttsProvider: value })}
+                            placeholder="Select TTS provider..."
+                          />
+                        </FormField>
+                      )}
+                    </>
+                  )}
+                </div>
+              );
+            })()}
+
             {/* Agent Built-in Tools - Anthropic only */}
             {form.provider === "anthropic" && (
             <FormField label="Agent Built-in Tools">

package/src/web/components/dashboard/Dashboard.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { useAgentActivity, useAuth, useProjects, useTelemetryContext } from "../../context";
+import { useAgentActivity, useAuth, useProjects, useTelemetryContext, useUIMode } from "../../context";
 import { useTelemetry } from "../../context/TelemetryContext";
 import type { TelemetryEvent } from "../../context";
 import type { Agent, Provider, Route, DashboardStats, Task } from "../../types";
@@ -24,6 +24,7 @@ export function Dashboard({
 }: DashboardProps) {
   const { authFetch } = useAuth();
   const { currentProjectId } = useProjects();
+  const { isDev, t } = useUIMode();
   const { events: realtimeEvents, statusChangeCounter } = useTelemetryContext();
   const { events: taskTelemetryEvents } = useTelemetry({ category: "TASK" });
   const lastProcessedTaskEventRef = useRef<string | null>(null);
@@ -145,24 +146,24 @@ export function Dashboard({
   return (
     <div className="flex-1 overflow-auto p-6">
       {/* Stats Cards */}
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
-        <StatCard label="Agents" value={filteredAgents.length} subValue={`${filteredRunningCount} running`} />
+      <div className={`grid grid-cols-2 ${isDev ? 'sm:grid-cols-4' : 'sm:grid-cols-3'} gap-4 mb-6`}>
+        <StatCard label={t("Agents", "Employees")} value={filteredAgents.length} subValue={`${filteredRunningCount} running`} />
         <StatCard label="Tasks" value={taskStats.total} subValue={`${taskStats.pending} pending`} />
         <StatCard label="Completed" value={taskStats.completed} color="text-green-400" />
-        <StatCard label="Providers" value={configuredProviders.length} color="text-[var(--color-accent)]" />
+        {isDev && <StatCard label="Providers" value={configuredProviders.length} color="text-[var(--color-accent)]" />}
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {/* Agents List */}
         <DashboardCard
-          title="Agents"
+          title={t("Agents", "Employees")}
           actionLabel="View All"
           onAction={() => onNavigate("agents")}
         >
           {loading ? (
             <div className="p-4 text-center text-[var(--color-text-muted)]">Loading...</div>
           ) : filteredAgents.length === 0 ? (
-            <div className="p-4 text-center text-[var(--color-text-muted)]">No agents yet</div>
+            <div className="p-4 text-center text-[var(--color-text-muted)]">{t("No agents yet", "No employees yet")}</div>
           ) : (
             <div className="divide-y divide-[var(--color-border)]">
               {filteredAgents.slice(0, 5).map((agent) => (
@@ -299,6 +300,7 @@ function DashboardCard({ title, actionLabel, onAction, children }: DashboardCard
 function AgentListItem({ agent, onSelect, onMessage, showProject }: { agent: Agent; onSelect: () => void; onMessage?: () => void; showProject?: boolean }) {
   const { isActive, label } = useAgentActivity(agent.id);
   const { projects } = useProjects();
+  const { isDev } = useUIMode();
   const project = agent.projectId ? projects.find(p => p.id === agent.projectId) : null;
 
   return (
@@ -322,7 +324,7 @@ function AgentListItem({ agent, onSelect, onMessage, showProject }: { agent: Age
             {isActive && label ? (
               <span className="text-green-400 truncate">{label}</span>
             ) : (
-              <span>{agent.provider} · {agent.status === "running" ? "idle" : "stopped"}</span>
+              <span>{isDev ? `${agent.provider} · ` : ""}{agent.status === "running" ? "idle" : "stopped"}</span>
             )}
             {showProject && project && (
               <>

package/src/web/components/layout/Sidebar.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { DashboardIcon, ThreadsIcon, AgentsIcon, ActivityIcon, TasksIcon, ConnectionsIcon, McpIcon, SkillsIcon, TestsIcon, TelemetryIcon, ApiIcon, SettingsIcon, CloseIcon } from "../common/Icons";
-import { useAuth } from "../../context";
+import { useAuth, useUIMode } from "../../context";
 import type { Route } from "../../types";
 
 interface SidebarProps {
@@ -14,6 +14,7 @@ interface SidebarProps {
 
 export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onClose }: SidebarProps) {
   const { user, logout } = useAuth();
+  const { isDev, t } = useUIMode();
   const [showUserMenu, setShowUserMenu] = useState(false);
 
   const handleNavigate = (newRoute: Route) => {
@@ -69,7 +70,7 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
           />
           <NavButton
             icon={<AgentsIcon />}
-            label="Agents"
+            label={t("Agents", "Employees")}
             active={route === "agents"}
             onClick={() => handleNavigate("agents")}
             badge={agentCount > 0 ? String(agentCount) : undefined}
@@ -93,42 +94,52 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
             onClick={() => handleNavigate("tasks")}
             badge={taskCount && taskCount > 0 ? String(taskCount) : undefined}
           />
-          <NavButton
-            icon={<McpIcon />}
-            label="MCP"
-            active={route === "mcp"}
-            onClick={() => handleNavigate("mcp")}
-          />
-          <NavButton
-            icon={<SkillsIcon />}
-            label="Skills"
-            active={route === "skills"}
-            onClick={() => handleNavigate("skills")}
-          />
-          <NavButton
-            icon={<ConnectionsIcon />}
-            label="Connections"
-            active={route === "connections"}
-            onClick={() => handleNavigate("connections")}
-          />
-          <NavButton
-            icon={<TestsIcon />}
-            label="Tests"
-            active={route === "tests"}
-            onClick={() => handleNavigate("tests")}
-          />
+          {isDev && (
+            <NavButton
+              icon={<McpIcon />}
+              label="MCP"
+              active={route === "mcp"}
+              onClick={() => handleNavigate("mcp")}
+            />
+          )}
+          {isDev && (
+            <NavButton
+              icon={<SkillsIcon />}
+              label="Skills"
+              active={route === "skills"}
+              onClick={() => handleNavigate("skills")}
+            />
+          )}
+          {isDev && (
+            <NavButton
+              icon={<ConnectionsIcon />}
+              label="Connections"
+              active={route === "connections"}
+              onClick={() => handleNavigate("connections")}
+            />
+          )}
+          {isDev && (
+            <NavButton
+              icon={<TestsIcon />}
+              label="Tests"
+              active={route === "tests"}
+              onClick={() => handleNavigate("tests")}
+            />
+          )}
           <NavButton
             icon={<TelemetryIcon />}
             label="Analytics"
             active={route === "analytics"}
             onClick={() => handleNavigate("analytics")}
           />
-          <NavButton
-            icon={<ApiIcon />}
-            label="API"
-            active={route === "api"}
-            onClick={() => handleNavigate("api")}
-          />
+          {isDev && (
+            <NavButton
+              icon={<ApiIcon />}
+              label="API"
+              active={route === "api"}
+              onClick={() => handleNavigate("api")}
+            />
+          )}
           <NavButton
             icon={<SettingsIcon />}
             label="Settings"