ideaco 1.1.5

package/src/components/SetupWizard.jsx

@@ -0,0 +1,388 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useStore } from '@/lib/client-store';
+import { getAvatarChoices } from '@/lib/avatar';
+import { useI18n, LanguageSelector } from '@/lib/i18n';
+import AvatarGrid from './AvatarGrid';
+
+const AVATAR_CHOICES_COUNT = 16;
+
+export default function SetupWizard() {
+  const { createCompany, loading } = useStore();
+  const { t, lang } = useI18n();
+  const [step, setStep] = useState(1);
+  const [companyName, setCompanyName] = useState(t('setup.defaultCompany'));
+  const [bossName, setBossName] = useState('');
+
+  // Boss avatar state
+  const [bossGender, setBossGender] = useState('male');
+  const [bossAge, setBossAge] = useState(35);
+  const [bossSelectedAvatar, setBossSelectedAvatar] = useState(null);
+  const [bossAvatarChoices, setBossAvatarChoices] = useState([]);
+
+  const [secretaryName, setSecretaryName] = useState(t('setup.defaultSecretary'));
+
+  // Track previous language to auto-update defaults on language switch
+  const prevLangRef = useRef(lang);
+  const prevDefaultCompanyRef = useRef(t('setup.defaultCompany'));
+  const prevDefaultSecretaryRef = useRef(t('setup.defaultSecretary'));
+  useEffect(() => {
+    if (prevLangRef.current !== lang) {
+      if (companyName === prevDefaultCompanyRef.current) {
+        setCompanyName(t('setup.defaultCompany'));
+      }
+      if (secretaryName === prevDefaultSecretaryRef.current) {
+        setSecretaryName(t('setup.defaultSecretary'));
+      }
+      prevLangRef.current = lang;
+      prevDefaultCompanyRef.current = t('setup.defaultCompany');
+      prevDefaultSecretaryRef.current = t('setup.defaultSecretary');
+    }
+  }, [lang, t, companyName, secretaryName]);
+
+  const [secretaryGender, setSecretaryGender] = useState('female');
+  const [secretaryAge, setSecretaryAge] = useState(18);
+  const [selectedAvatar, setSelectedAvatar] = useState(null);
+  const [avatarChoices, setAvatarChoices] = useState([]);
+
+  // Boss avatar debounced refresh
+  const bossDebounceTimer = useRef(null);
+  const refreshBossAvatarChoices = useCallback((g, a) => {
+    if (bossDebounceTimer.current) clearTimeout(bossDebounceTimer.current);
+    bossDebounceTimer.current = setTimeout(() => {
+      const choices = getAvatarChoices(AVATAR_CHOICES_COUNT, g, a);
+      setBossAvatarChoices(choices);
+      if (choices.length > 0) setBossSelectedAvatar(choices[0]);
+    }, 300);
+  }, []);
+
+  useEffect(() => {
+    refreshBossAvatarChoices(bossGender, bossAge);
+    return () => { if (bossDebounceTimer.current) clearTimeout(bossDebounceTimer.current); };
+  }, [bossGender, bossAge, refreshBossAvatarChoices]);
+
+  const bossAvatar = bossSelectedAvatar?.url || '';
+
+  const refreshBossChoices = () => {
+    const choices = getAvatarChoices(AVATAR_CHOICES_COUNT, bossGender, bossAge);
+    setBossAvatarChoices(choices);
+  };
+
+  // Secretary avatar debounced refresh
+  const debounceTimer = useRef(null);
+  const refreshAvatarChoices = useCallback((g, a) => {
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    debounceTimer.current = setTimeout(() => {
+      const choices = getAvatarChoices(AVATAR_CHOICES_COUNT, g, a);
+      setAvatarChoices(choices);
+      if (choices.length > 0) {
+        setSelectedAvatar(choices[0]);
+      }
+    }, 300);
+  }, []);
+
+  useEffect(() => {
+    refreshAvatarChoices(secretaryGender, secretaryAge);
+    return () => { if (debounceTimer.current) clearTimeout(debounceTimer.current); };
+  }, [secretaryGender, secretaryAge, refreshAvatarChoices]);
+
+  const secretaryAvatar = selectedAvatar?.url || '';
+
+  const refreshChoices = () => {
+    const choices = getAvatarChoices(AVATAR_CHOICES_COUNT, secretaryGender, secretaryAge);
+    setAvatarChoices(choices);
+  };
+
+  const handleCreate = async () => {
+    try {
+      await createCompany(companyName, bossName, {
+        secretaryName: secretaryName || t('setup.defaultSecretary'),
+        secretaryAvatar: secretaryAvatar,
+        secretaryGender,
+        secretaryAge,
+        bossAvatar: bossAvatar,
+      });
+    } catch (e) {
+      // error handled by store
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="max-w-lg w-full">
+        {/* Logo & Title */}
+        <div className="text-center mb-8 animate-fade-in">
+          <div className="flex justify-end mb-2">
+            <LanguageSelector direction="down" />
+          </div>
+          <div className="text-6xl mb-4">🏢</div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-red-400 to-purple-500 bg-clip-text text-transparent">
+            {t('setup.title')}
+          </h1>
+          <p className="text-[var(--muted)] mt-2">{t('setup.subtitle')}</p>
+        </div>
+
+        {/* Step 1 */}
+        {step === 1 && (
+          <div className="card animate-fade-in space-y-4">
+            <h2 className="text-xl font-semibold">{t('setup.step1Title')}</h2>
+            <p className="text-sm text-[var(--muted)]">{t('setup.step1Desc')}</p>
+
+            <div>
+              <label className="block text-sm mb-1 text-[var(--muted)]">{t('setup.companyName')}</label>
+              <input
+                className="input w-full"
+                placeholder={t('setup.companyPlaceholder')}
+                value={companyName}
+                onChange={(e) => setCompanyName(e.target.value)}
+              />
+            </div>
+
+            <div className="flex items-center gap-4">
+              <div className="shrink-0">
+                {bossAvatar ? (
+                  <img
+                    src={bossAvatar}
+                    alt="boss"
+                    className="w-16 h-16 rounded-full bg-[var(--border)] border-2 border-[var(--accent)]/30"
+                  />
+                ) : (
+                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-2xl font-bold">
+                    👑
+                  </div>
+                )}
+              </div>
+              <div className="flex-1">
+                <label className="block text-sm mb-1 text-[var(--muted)]">{t('setup.bossTitle')}</label>
+                <input
+                  className="input w-full"
+                  placeholder={t('setup.bossPlaceholder')}
+                  value={bossName}
+                  onChange={(e) => setBossName(e.target.value)}
+                />
+              </div>
+            </div>
+
+            {/* Boss avatar selection */}
+            <div className="space-y-3 pt-1">
+              <div className="flex items-center justify-between">
+                <label className="text-sm text-[var(--muted)]">{t('setup.bossAvatarTitle')}</label>
+                <span className="text-xs text-[var(--muted)]">{t('setup.bossAvatarDesc')}</span>
+              </div>
+
+              {/* Gender & Age */}
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs mb-1 text-[var(--muted)]">{t('setup.gender')}</label>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => { setBossGender('male'); setBossSelectedAvatar(null); }}
+                      className={`flex-1 py-1.5 px-2 rounded-lg border text-xs transition-all ${
+                        bossGender === 'male'
+                          ? 'border-blue-400 bg-blue-400/10 text-blue-300'
+                          : 'border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)]/40'
+                      }`}
+                    >{t('setup.male')}</button>
+                    <button
+                      onClick={() => { setBossGender('female'); setBossSelectedAvatar(null); }}
+                      className={`flex-1 py-1.5 px-2 rounded-lg border text-xs transition-all ${
+                        bossGender === 'female'
+                          ? 'border-pink-400 bg-pink-400/10 text-pink-300'
+                          : 'border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)]/40'
+                      }`}
+                    >{t('setup.female')}</button>
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-xs mb-1 text-[var(--muted)]">{t('setup.age', { n: bossAge })}</label>
+                  <div className="relative flex items-center gap-2">
+                    <button
+                      onClick={() => setBossAge(a => Math.max(18, a - 1))}
+                      className="w-6 h-6 rounded-full border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-all flex items-center justify-center text-xs font-bold shrink-0"
+                    >−</button>
+                    <div className="flex-1 relative h-4 flex items-center">
+                      <div className="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-1 rounded-full bg-[var(--border)] pointer-events-none" />
+                      <div
+                        className="absolute left-0 top-1/2 -translate-y-1/2 h-1 rounded-full bg-gradient-to-r from-[var(--accent)] to-purple-400 pointer-events-none"
+                        style={{ width: `${((bossAge - 18) / 42) * 100}%` }}
+                      />
+                      <input
+                        type="range"
+                        min="18"
+                        max="60"
+                        value={bossAge}
+                        onChange={e => { setBossAge(Number(e.target.value)); setBossSelectedAvatar(null); }}
+                        className="absolute inset-0 z-10 w-full appearance-none cursor-pointer bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--accent)] [&::-webkit-slider-thumb]:shadow-[0_0_6px_rgba(99,102,241,0.5)] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:hover:scale-125 [&::-webkit-slider-thumb]:-mt-[5px]"
+                      />
+                    </div>
+                    <button
+                      onClick={() => setBossAge(a => Math.min(60, a + 1))}
+                      className="w-6 h-6 rounded-full border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-all flex items-center justify-center text-xs font-bold shrink-0"
+                    >+</button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Avatar grid */}
+              <div>
+                <div className="flex items-center justify-between mb-1.5">
+                  <label className="text-xs text-[var(--muted)]">{t('setup.avatarStyle')}</label>
+                  <button
+                    className="text-xs text-[var(--accent)] hover:underline"
+                    onClick={refreshBossChoices}
+                  >{t('setup.refreshBatch')}</button>
+                </div>
+                <AvatarGrid
+                  choices={bossAvatarChoices}
+                  selectedId={bossSelectedAvatar?.id}
+                  onSelect={setBossSelectedAvatar}
+                />
+              </div>
+            </div>
+
+            <button
+              className="btn-primary w-full"
+              disabled={!companyName}
+              onClick={() => setStep(2)}
+            >
+              {t('common.next')}
+            </button>
+          </div>
+        )}
+
+        {/* Step 2: Secretary + Create */}
+        {step === 2 && (
+          <div className="card animate-fade-in space-y-4">
+            <h2 className="text-xl font-semibold">{t('setup.step2Title')}</h2>
+            <p className="text-sm text-[var(--muted)]">{t('setup.step2Desc')}</p>
+
+            <div className="flex items-center gap-4">
+              <div className="shrink-0">
+                <img
+                  src={secretaryAvatar}
+                  alt={t('chat.secretary')}
+                  className="w-20 h-20 rounded-full bg-[var(--border)] border-2 border-[var(--accent)]/30"
+                />
+              </div>
+              <div className="flex-1 space-y-2">
+                <div>
+                  <label className="block text-sm mb-1 text-[var(--muted)]">{t('setup.secretaryName')}</label>
+                  <input
+                    className="input w-full"
+                    placeholder={t('setup.secretaryPlaceholder')}
+                    value={secretaryName}
+                    onChange={(e) => {
+                      setSecretaryName(e.target.value);
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Gender & Age */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm mb-1.5 text-[var(--muted)]">{t('setup.gender')}</label>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => { setSecretaryGender('female'); setSelectedAvatar(null); }}
+                    className={`flex-1 py-2 px-3 rounded-lg border text-sm transition-all ${
+                      secretaryGender === 'female'
+                        ? 'border-pink-400 bg-pink-400/10 text-pink-300'
+                        : 'border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)]/40'
+                    }`}
+                  >{t('setup.female')}</button>
+                  <button
+                    onClick={() => { setSecretaryGender('male'); setSelectedAvatar(null); }}
+                    className={`flex-1 py-2 px-3 rounded-lg border text-sm transition-all ${
+                      secretaryGender === 'male'
+                        ? 'border-blue-400 bg-blue-400/10 text-blue-300'
+                        : 'border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)]/40'
+                    }`}
+                  >{t('setup.male')}</button>
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm mb-1.5 text-[var(--muted)]">{t('setup.age', { n: secretaryAge })}</label>
+                <div className="relative flex items-center gap-3">
+                  <button
+                    onClick={() => setSecretaryAge(a => Math.max(18, a - 1))}
+                    className="w-7 h-7 rounded-full border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-all flex items-center justify-center text-sm font-bold shrink-0"
+                  >−</button>
+                  <div className="flex-1 relative h-5 flex items-center">
+                    <div className="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-1.5 rounded-full bg-[var(--border)] pointer-events-none" />
+                    <div
+                      className="absolute left-0 top-1/2 -translate-y-1/2 h-1.5 rounded-full bg-gradient-to-r from-[var(--accent)] to-purple-400 pointer-events-none"
+                      style={{ width: `${((secretaryAge - 18) / 42) * 100}%` }}
+                    />
+                    <input
+                      type="range"
+                      min="18"
+                      max="60"
+                      value={secretaryAge}
+                      onChange={e => { setSecretaryAge(Number(e.target.value)); setSelectedAvatar(null); }}
+                      className="absolute inset-0 z-10 w-full appearance-none cursor-pointer bg-transparent [&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--accent)] [&::-webkit-slider-thumb]:shadow-[0_0_6px_rgba(99,102,241,0.5)] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:hover:scale-125 [&::-webkit-slider-thumb]:-mt-[5px]"
+                    />
+                  </div>
+                  <button
+                    onClick={() => setSecretaryAge(a => Math.min(60, a + 1))}
+                    className="w-7 h-7 rounded-full border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-all flex items-center justify-center text-sm font-bold shrink-0"
+                  >+</button>
+                </div>
+                <div className="flex justify-between text-[10px] text-[var(--muted)] mt-1 px-10">
+                  <span>18</span><span>30</span><span>45</span><span>60</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Avatar */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label className="text-sm text-[var(--muted)]">{t('setup.avatarStyle')}</label>
+                <button
+                  className="text-xs text-[var(--accent)] hover:underline"
+                  onClick={refreshChoices}
+                >{t('setup.refreshBatch')}</button>
+              </div>
+              <AvatarGrid
+                choices={avatarChoices}
+                selectedId={selectedAvatar?.id}
+                onSelect={setSelectedAvatar}
+              />
+            </div>
+
+            <div className="flex gap-2">
+              <button className="btn-secondary flex-1" onClick={() => setStep(1)}>
+                {t('common.prev')}
+              </button>
+              <button
+                className="btn-primary flex-1"
+                disabled={loading}
+                onClick={handleCreate}
+              >
+                {loading ? t('setup.creating') : t('setup.createBtn')}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Step indicator */}
+        <div className="flex justify-center mt-6 gap-2">
+          {[1, 2].map((s) => (
+            <div
+              key={s}
+              className={`w-2 h-2 rounded-full transition-all ${
+                step === s ? 'bg-[var(--accent)] w-6' : 'bg-[var(--border)]'
+              }`}
+            />
+          ))}
+        </div>
+
+        <div className="text-center mt-4 text-xs text-[var(--muted)]">
+          {t('setup.footer')}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Sidebar.jsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState } from 'react';
+import { useStore } from '@/lib/client-store';
+import { getAvatarUrl } from '@/lib/avatar';
+import { useI18n, LanguageSelector } from '@/lib/i18n';
+import SecretarySettings from './SecretarySettings';
+import BossProfileModal from './BossProfileModal';
+import CachedAvatar from './CachedAvatar';
+
+export default function Sidebar() {
+  const { company, activeTab, setActiveTab, setChatOpen, chatOpen, chatMinimized, setChatMinimized } = useStore();
+  const { t } = useI18n();
+  const [showSettings, setShowSettings] = useState(false);
+  const [showBossProfile, setShowBossProfile] = useState(false);
+
+  if (!company) return null;
+
+  const NAV_ITEMS = [
+    { id: 'overview', label: t('sidebar.nav.overview'), icon: '📊' },
+    { id: 'office', label: t('sidebar.nav.office'), icon: '🎮' },
+    { id: 'mailbox', label: t('sidebar.nav.mailbox'), icon: '💬' },
+    { id: 'requirements', label: t('sidebar.nav.requirements'), icon: '📋' },
+    { id: 'departments', label: t('sidebar.nav.departments'), icon: '🏢' },
+  ];
+
+  const deptCount = company.departments?.length || 0;
+  const agentCount = company.departments?.reduce((s, d) => s + d.members.length, 0) || 0;
+  const reqCount = company.requirements?.length || 0;
+  const budget = company.budget || {};
+  const chatSessionCount = company.agentChatSessions?.length || 0;
+
+  return (
+    <aside className="w-64 bg-[#0d0d0d] border-r border-[var(--border)] flex flex-col h-screen">
+      {/* Company name - top left */}
+      <div className="p-4 border-b border-[var(--border)]" style={{ paddingTop: 'calc(1rem + var(--titlebar-height))' }}>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setShowBossProfile(true)}
+            className="w-10 h-10 rounded-lg flex items-center justify-center text-lg font-bold shrink-0 transition-all hover:scale-105 hover:ring-2 hover:ring-[var(--accent)]/40 overflow-hidden"
+            title={t('bossProfile.editAvatar')}
+          >
+            {company.bossAvatar ? (
+              <CachedAvatar src={company.bossAvatar} alt="boss" className="w-10 h-10 rounded-lg" />
+            ) : (
+              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-lg font-bold">
+                {company.name.charAt(0)}
+              </div>
+            )}
+          </button>
+          <div>
+            <div className="font-semibold text-sm truncate">{company.name}</div>
+            <div className="text-xs text-[var(--muted)]">👤 {company.boss}</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Secretary info - clickable to open chat */}
+      <div className="mx-3 mt-3 rounded-lg bg-gradient-to-r from-blue-900/20 to-purple-900/20 border border-blue-500/20">
+        <button
+          onClick={() => {
+            if (!chatOpen) {
+              setChatOpen(true);
+            } else if (chatMinimized) {
+              setChatMinimized(false);
+            }
+          }}
+          className="w-full p-3 hover:bg-white/5 transition-all text-left rounded-t-lg"
+        >
+          <div className="flex items-center gap-2">
+            <img
+              src={company.secretary?.avatar || getAvatarUrl('secretary')}
+              alt={t('chat.secretary')}
+              className="w-8 h-8 rounded-full bg-[var(--card)]"
+            />
+            <div className="flex-1 min-w-0">
+              <div className="text-xs font-medium flex items-center gap-1">
+                {company.secretary?.name || t('setup.defaultSecretary')}
+                <span className="w-1.5 h-1.5 bg-green-500 rounded-full inline-block" />
+              </div>
+              <div className="text-[10px] text-[var(--muted)] truncate">
+                {t('sidebar.clickToChat', { provider: company.secretary?.provider })}
+              </div>
+            </div>
+            <span className="text-sm">💬</span>
+          </div>
+        </button>
+        <button
+          onClick={() => setShowSettings(true)}
+          className="w-full text-[10px] text-[var(--muted)] hover:text-[var(--accent)] py-1.5 border-t border-white/[0.06] transition-all hover:bg-white/5 rounded-b-lg"
+        >
+          {t('sidebar.secretarySettings')}
+        </button>
+      </div>
+
+      {/* Budget overview */}
+      <div className="px-3 mt-3">
+        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-2.5">
+          <div className="text-[10px] text-[var(--muted)] mb-1.5">{t('sidebar.budgetUsage')}</div>
+          <div className="flex items-baseline gap-1">
+            <span className="text-lg font-bold text-green-400">${budget.totalCost?.toFixed(4) || '0.00'}</span>
+          </div>
+          <div className="text-[10px] text-[var(--muted)] mt-1">
+            {t('sidebar.tokenLabel')}: {(budget.totalTokens || 0).toLocaleString()}
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation menu */}
+      <nav className="flex-1 p-3 space-y-1">
+        {NAV_ITEMS.map((item) => {
+          const isActive = activeTab === item.id;
+          let badge = null;
+          if (item.id === 'departments') badge = deptCount;
+          if (item.id === 'requirements') badge = company.requirements?.length || 0;
+      if (item.id === 'mailbox') badge = chatSessionCount;
+
+          return (
+            <button
+              key={item.id}
+              onClick={() => setActiveTab(item.id)}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-all ${
+                isActive || (item.id === 'requirements' && activeTab === 'requirement-detail') || (item.id === 'departments' && activeTab === 'department-detail')
+                  ? 'bg-[var(--accent)]/10 text-[var(--accent)] font-medium'
+                  : 'text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-white/5'
+              }`}
+            >
+              <span>{item.icon}</span>
+              <span className="flex-1 text-left">{item.label}</span>
+              {badge > 0 && (
+                <span className={`text-xs px-1.5 py-0.5 rounded-full ${
+                  isActive ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'bg-white/10 text-[var(--muted)]'
+                }`}>
+                  {badge}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </nav>
+
+      {/* Bottom statistics */}
+      <div className="p-4 border-t border-[var(--border)]">
+        <div className="grid grid-cols-3 gap-2 text-center">
+          <div>
+            <div className="text-lg font-bold text-[var(--accent)]">{deptCount}</div>
+            <div className="text-[10px] text-[var(--muted)]">{t('sidebar.stats.departments')}</div>
+          </div>
+          <div>
+            <div className="text-lg font-bold text-green-400">{agentCount}</div>
+            <div className="text-[10px] text-[var(--muted)]">{t('sidebar.stats.workers')}</div>
+          </div>
+          <div>
+            <div className="text-lg font-bold text-amber-400">{reqCount}</div>
+            <div className="text-[10px] text-[var(--muted)]">{t('sidebar.stats.requirements')}</div>
+          </div>
+        </div>
+        {/* Language switch */}
+        <div className="mt-3 flex justify-center">
+          <LanguageSelector />
+        </div>
+      </div>
+
+      {/* Secretary settings modal */}
+      {showSettings && <SecretarySettings onClose={() => setShowSettings(false)} />}
+      {showBossProfile && <BossProfileModal onClose={() => setShowBossProfile(false)} />}
+    </aside>
+  );
+}