ideaco 1.1.5

package/src/components/MessagesView.jsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useStore } from '@/lib/client-store';
+import { useI18n } from '@/lib/i18n';
+
+const TYPE_COLORS = {
+  task: 'text-blue-400 bg-blue-900/20',
+  report: 'text-green-400 bg-green-900/20',
+  question: 'text-yellow-400 bg-yellow-900/20',
+  review: 'text-purple-400 bg-purple-900/20',
+  feedback: 'text-orange-400 bg-orange-900/20',
+  broadcast: 'text-cyan-400 bg-cyan-900/20',
+};
+
+export default function MessagesView() {
+  const { t } = useI18n();
+  const { company, fetchMessages } = useStore();
+  const [messages, setMessages] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadMessages = useCallback(async () => {
+    setLoading(true);
+    const msgs = await fetchMessages(50);
+    setMessages(msgs || []);
+    setLoading(false);
+  }, [fetchMessages]);
+
+  useEffect(() => {
+    loadMessages();
+  }, [loadMessages]);
+
+  // Build agentId -> name mapping
+  const agentNameMap = {};
+  if (company) {
+    for (const dept of company.departments) {
+      for (const m of dept.members) {
+        agentNameMap[m.id] = m.name;
+      }
+    }
+  }
+
+  return (
+    <div className="p-6 space-y-6 animate-fade-in">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">{t('messages.title')}</h1>
+          <p className="text-sm text-[var(--muted)] mt-1">{t('messages.subtitle')}</p>
+        </div>
+        <button onClick={loadMessages} className="btn-secondary text-sm" disabled={loading}>
+          {t('messages.refresh')}
+        </button>
+      </div>
+
+      {/* Statistics */}
+      {company?.messageBusStats && (
+        <div className="grid grid-cols-3 gap-3">
+          <div className="card text-center">
+            <div className="text-2xl font-bold text-[var(--accent)]">{company.messageBusStats.totalMessages}</div>
+            <div className="text-xs text-[var(--muted)]">{t('messages.totalMessages')}</div>
+          </div>
+          <div className="card text-center">
+            <div className="text-2xl font-bold text-green-400">{company.messageBusStats.activeAgents || 0}</div>
+            <div className="text-xs text-[var(--muted)]">{t('messages.activeAgents')}</div>
+          </div>
+          <div className="card text-center">
+            <div className="text-2xl font-bold text-purple-400">
+              {Object.keys(company.messageBusStats.byType || {}).length}
+            </div>
+            <div className="text-xs text-[var(--muted)]">{t('messages.messageTypes')}</div>
+          </div>
+        </div>
+      )}
+
+      {/* Message list */}
+      {loading ? (
+        <div className="text-center py-8 text-[var(--muted)]">{t('common.loading')}</div>
+      ) : messages.length === 0 ? (
+        <div className="card text-center py-12 text-[var(--muted)]">
+          <div className="text-5xl mb-4">💬</div>
+          <p>{t('messages.noRecords')}</p>
+          <p className="text-sm mt-1">{t('messages.noRecordsHint')}</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {messages.slice().reverse().map((msg) => (
+            <div key={msg.id} className="card py-3 flex items-start gap-3">
+              <div className={`text-xs px-2 py-0.5 rounded shrink-0 ${TYPE_COLORS[msg.type] || 'text-gray-400 bg-gray-900/20'}`}>
+                {msg.type}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm">
+                  <span className="font-medium text-[var(--accent)]">
+                    {agentNameMap[msg.from] || msg.from?.slice(0, 8) || '?'}
+                  </span>
+                  <span className="text-[var(--muted)]"> → </span>
+                  <span className="font-medium text-green-400">
+                    {agentNameMap[msg.to] || msg.to?.slice(0, 8) || t('messages.broadcast')}
+                  </span>
+                </div>
+                <div className="text-xs text-[var(--muted)] mt-1 break-all">{msg.content}</div>
+              </div>
+              <div className="text-[10px] text-[var(--muted)] shrink-0">
+                {msg.timestamp && new Date(msg.timestamp).toLocaleTimeString('zh', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/OnboardingGuide.jsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useStore } from '@/lib/client-store';
+import { useI18n } from '@/lib/i18n';
+import CachedAvatar from './CachedAvatar';
+import ProvidersBoard from './ProvidersBoard';
+
+/**
+ * OnboardingGuide — Game-style onboarding with secretary avatar and speech bubbles.
+ * 
+ * Flow:
+ *   Step 0: Secretary introduces herself, greets the boss
+ *   Step 1: Open providers board in a modal, let user configure providers
+ *   Step 2: Tell user they can create departments and assign tasks
+ *   Step 3: Done — dismiss guide
+ */
+export default function OnboardingGuide({ onComplete }) {
+  const { company, setActiveTab } = useStore();
+  const { t } = useI18n();
+  const [step, setStep] = useState(0);
+  const [showProviders, setShowProviders] = useState(false);
+  const [typedText, setTypedText] = useState('');
+  const [isTyping, setIsTyping] = useState(true);
+  const typeTimerRef = useRef(null);
+
+  const secretary = company?.secretary;
+  const secretaryName = secretary?.name || t('chat.secretary');
+  const secretaryAvatar = secretary?.avatar || '';
+
+  // Get current step's dialogue text
+  const getDialogue = useCallback((s) => {
+    const dialogues = t('onboarding.dialogues');
+    if (Array.isArray(dialogues) && dialogues[s]) {
+      return dialogues[s].replace('{bossName}', company?.bossName || 'Boss').replace('{secretaryName}', secretaryName);
+    }
+    return '';
+  }, [t, company?.bossName, secretaryName]);
+
+  // Typewriter effect
+  useEffect(() => {
+    const text = getDialogue(step);
+    if (!text) return;
+
+    setTypedText('');
+    setIsTyping(true);
+    let index = 0;
+
+    const type = () => {
+      if (index < text.length) {
+        setTypedText(text.slice(0, index + 1));
+        index++;
+        typeTimerRef.current = setTimeout(type, 30);
+      } else {
+        setIsTyping(false);
+      }
+    };
+
+    typeTimerRef.current = setTimeout(type, 500);
+    return () => { if (typeTimerRef.current) clearTimeout(typeTimerRef.current); };
+  }, [step, getDialogue]);
+
+  // Skip typewriter — show full text
+  const skipTyping = () => {
+    if (typeTimerRef.current) clearTimeout(typeTimerRef.current);
+    setTypedText(getDialogue(step));
+    setIsTyping(false);
+  };
+
+  const handleNext = () => {
+    if (isTyping) {
+      skipTyping();
+      return;
+    }
+    if (step === 1) {
+      // Open providers modal
+      setShowProviders(true);
+      return;
+    }
+    if (step === 2) {
+      // Final step — done
+      onComplete();
+      return;
+    }
+    setStep(s => s + 1);
+  };
+
+  const handleProvidersClose = () => {
+    setShowProviders(false);
+    setStep(2);
+  };
+
+  const getButtonText = () => {
+    if (isTyping) return t('onboarding.clickToContinue');
+    if (step === 0) return t('onboarding.nextBtn');
+    if (step === 1) return t('onboarding.configureBtn');
+    if (step === 2) return t('onboarding.startBtn');
+    return t('common.next');
+  };
+
+  return (
+    <>
+      {/* Overlay */}
+      <div className="fixed inset-0 bg-black/70 z-[100] flex flex-col items-center justify-end transition-all">
+        {/* Speech bubble area */}
+        <div className="w-full max-w-2xl px-6 mb-4 animate-fade-in">
+          {/* Bubble */}
+          <div
+            className="relative bg-[var(--card)] border border-[var(--border)] rounded-2xl rounded-bl-md p-5 shadow-2xl cursor-pointer select-none"
+            onClick={handleNext}
+          >
+            {/* Secretary name tag */}
+            <div className="absolute -top-3 left-4 px-3 py-0.5 bg-[var(--accent)] text-white text-xs rounded-full font-medium shadow-lg">
+              {secretaryName}
+            </div>
+            {/* Dialogue text */}
+            <p className="text-sm leading-relaxed whitespace-pre-line mt-1 min-h-[3rem]">
+              {typedText}
+              {isTyping && <span className="inline-block w-0.5 h-4 bg-[var(--accent)] ml-0.5 animate-pulse align-middle" />}
+            </p>
+            {/* Action button */}
+            <div className="flex justify-end mt-3">
+              <button
+                onClick={(e) => { e.stopPropagation(); handleNext(); }}
+                className="px-4 py-1.5 bg-[var(--accent)] text-white text-sm rounded-lg hover:opacity-90 transition-all shadow-lg"
+              >
+                {getButtonText()}
+              </button>
+            </div>
+            {/* Skip */}
+            {step < 2 && (
+              <button
+                onClick={(e) => { e.stopPropagation(); onComplete(); }}
+                className="absolute top-2 right-3 text-[10px] text-[var(--muted)] hover:text-white transition-all"
+              >
+                {t('onboarding.skip')}
+              </button>
+            )}
+          </div>
+          {/* Bubble tail */}
+          <div className="ml-10 w-0 h-0 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent border-t-[12px] border-t-[var(--card)]" />
+        </div>
+
+        {/* Secretary avatar at the bottom */}
+        <div className="flex items-end gap-3 pb-8 animate-bounce-in">
+          <div className="relative">
+            {/* Glow effect */}
+            <div className="absolute -inset-2 rounded-full bg-[var(--accent)]/20 blur-lg animate-pulse" />
+            <CachedAvatar
+              src={secretaryAvatar}
+              alt={secretaryName}
+              className="w-28 h-28 rounded-full border-3 border-[var(--accent)] shadow-2xl relative z-10 bg-[var(--card)]"
+            />
+            {/* Online indicator */}
+            <div className="absolute bottom-1 right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-[var(--card)] z-20" />
+          </div>
+        </div>
+
+        {/* Step dots */}
+        <div className="flex gap-2 pb-4">
+          {[0, 1, 2].map(i => (
+            <div
+              key={i}
+              className={`w-2 h-2 rounded-full transition-all ${
+                step === i ? 'bg-[var(--accent)] w-5' : step > i ? 'bg-[var(--accent)]/50' : 'bg-white/20'
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Providers Board Modal */}
+      {showProviders && (
+        <div className="fixed inset-0 bg-black/80 z-[110] flex items-center justify-center !m-0" onClick={handleProvidersClose}>
+          <div
+            className="bg-[var(--background)] rounded-2xl max-w-4xl w-full mx-4 max-h-[85vh] overflow-y-auto shadow-2xl border border-[var(--border)] animate-fade-in"
+            onClick={e => e.stopPropagation()}
+          >
+            {/* Header with close button */}
+            <div className="sticky top-0 bg-[var(--background)] border-b border-[var(--border)] px-6 py-3 flex items-center justify-between z-10 rounded-t-2xl">
+              <div>
+                <h2 className="text-lg font-bold">{t('onboarding.providersTitle')}</h2>
+                <p className="text-xs text-[var(--muted)]">{t('onboarding.providersDesc')}</p>
+              </div>
+              <button
+                onClick={handleProvidersClose}
+                className="px-4 py-1.5 bg-[var(--accent)] text-white text-sm rounded-lg hover:opacity-90 transition-all"
+              >
+                {t('onboarding.providersDone')}
+              </button>
+            </div>
+            <ProvidersBoard />
+          </div>
+        </div>
+      )}
+
+      <style jsx>{`
+        @keyframes bounce-in {
+          0% { transform: translateY(100px); opacity: 0; }
+          50% { transform: translateY(-10px); opacity: 1; }
+          100% { transform: translateY(0); opacity: 1; }
+        }
+        .animate-bounce-in {
+          animation: bounce-in 0.6s ease-out forwards;
+        }
+      `}</style>
+    </>
+  );
+}

package/src/components/OrgTree.jsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { useState } from 'react';
+import { useStore } from '@/lib/client-store';
+import AgentDetailModal from './AgentDetailModal';
+import { useI18n } from '@/lib/i18n';
+import CachedAvatar from './CachedAvatar';
+
+/**
+ * Tree node - recursive render (clickable for detail)
+ */
+function TreeNode({ node, allMembers, depth = 0, onClickAgent }) {
+  const subs = allMembers.filter(m => m.reportsTo === node.id);
+
+  return (
+    <div className="flex flex-col items-center">
+      {/* Node */}
+      <div
+        onClick={() => onClickAgent?.(node.id)}
+        className={`flex flex-col items-center p-3 rounded-xl border transition-all hover:scale-105 cursor-pointer ${
+          depth === 0
+            ? 'bg-gradient-to-br from-red-900/30 to-orange-900/20 border-red-500/30 shadow-lg shadow-red-500/10'
+            : depth === 1
+            ? 'bg-gradient-to-br from-blue-900/20 to-indigo-900/20 border-blue-500/20'
+            : 'bg-[var(--card)] border-[var(--border)]'
+        }`}
+      >
+        <CachedAvatar src={node.avatar} alt={node.name} className="w-12 h-12 rounded-full bg-[var(--border)] mb-1" />
+        <div className="text-sm font-medium text-center">{node.name}</div>
+        <div className="text-[10px] text-[var(--muted)]">
+          {node.gender === 'female' ? '👩' : '👨'}{node.age ? ` ${node.age}` : ''} · {node.role}
+        </div>
+        <div className="text-[10px] text-[var(--muted)] italic mt-0.5 max-w-[120px] truncate text-center" title={node.signature}>
+          "{node.signature}"
+        </div>
+        {node.tokenUsage?.totalCost > 0 && (
+          <div className="text-[10px] text-red-400 mt-0.5">🔥 ${node.tokenUsage.totalCost.toFixed(4)}</div>
+        )}
+      </div>
+
+      {/* Subordinate connections and child nodes */}
+      {subs.length > 0 && (
+        <>
+          <div className="w-px h-6 bg-[var(--border)]" />
+          <div className="flex gap-6 relative">
+            {/* Horizontal connector */}
+            {subs.length > 1 && (
+              <div className="absolute top-0 left-1/2 -translate-x-1/2 h-px bg-[var(--border)]"
+                style={{ width: `calc(100% - 60px)` }} />
+            )}
+            {subs.map(sub => (
+              <div key={sub.id} className="flex flex-col items-center">
+                <div className="w-px h-4 bg-[var(--border)]" />
+                <TreeNode node={sub} allMembers={allMembers} depth={depth + 1} onClickAgent={onClickAgent} />
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function OrgTree({ embedded = false }) {
+  const { t } = useI18n();
+  const { company } = useStore();
+  const [selectedAgent, setSelectedAgent] = useState(null);
+
+  if (!company) return null;
+
+  return (
+    <div className={`${embedded ? 'p-4' : 'p-6 space-y-6'} animate-fade-in`}>
+      {!embedded && (
+        <div>
+          <h1 className="text-2xl font-bold">{t('orgTree.title')}</h1>
+          <p className="text-sm text-[var(--muted)] mt-1">{t('orgTree.subtitle')}</p>
+        </div>
+      )}
+
+      {/* Company level */}
+      <div className="flex flex-col items-center">
+        {/* Boss */}
+        <div className="flex flex-col items-center p-4 rounded-xl bg-gradient-to-br from-yellow-900/30 to-red-900/20 border border-yellow-500/30 shadow-lg shadow-yellow-500/10 mb-2">
+          {company.bossAvatar ? (
+            <CachedAvatar src={company.bossAvatar} alt="boss" className="w-12 h-12 rounded-full bg-[var(--border)] mb-1" />
+          ) : (
+            <div className="text-3xl mb-1">👑</div>
+          )}
+          <div className="text-sm font-bold">{company.boss}</div>
+          <div className="text-[10px] text-yellow-400">{t('orgTree.boss')}</div>
+        </div>
+        <div className="w-px h-6 bg-[var(--border)]" />
+
+        {/* Secretary */}
+        <div className="flex flex-col items-center p-3 rounded-xl bg-gradient-to-br from-purple-900/20 to-pink-900/20 border border-purple-500/20 mb-2">
+          <CachedAvatar src={company.secretary?.avatar} alt="secretary" className="w-10 h-10 rounded-full bg-[var(--border)] mb-1" />
+          <div className="text-sm font-medium">{company.secretary?.name}</div>
+          <div className="text-[10px] text-purple-400">
+{company.secretary?.gender === 'female' ? '👩' : '👨'}{company.secretary?.age ? ` ${t('display.ageYears', { n: company.secretary.age })}` : ''} · {t('orgTree.secretary')}
+          </div>
+        </div>
+        <div className="w-px h-6 bg-[var(--border)]" />
+
+        {/* Departments */}
+        {company.departments?.length > 0 ? (
+          <div className="flex gap-12 flex-wrap justify-center">
+            {company.departments.map(dept => {
+              // Find department leader (top-level node)
+              const leader = dept.members.find(m => m.id === dept.leader);
+              const others = dept.members.filter(m => !m.reportsTo && m.id !== dept.leader);
+
+              return (
+                <div key={dept.id} className="flex flex-col items-center">
+                  <div className="text-xs text-[var(--muted)] mb-2 px-3 py-1 rounded-full bg-[var(--card)] border border-[var(--border)]">
+                    🏭 {dept.name}
+                  </div>
+                  <div className="w-px h-4 bg-[var(--border)]" />
+
+                  {leader ? (
+                    <TreeNode node={leader} allMembers={dept.members} depth={0} onClickAgent={setSelectedAgent} />
+                  ) : (
+                    <div className="text-sm text-[var(--muted)]">{t('orgTree.noLeader')}</div>
+                  )}
+
+                  {/* Non-leader members without a superior */}
+                  {others.length > 0 && (
+                    <div className="flex gap-4 mt-4">
+                      {others.map(m => (
+                        <TreeNode key={m.id} node={m} allMembers={dept.members} depth={1} onClickAgent={setSelectedAgent} />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="card text-center py-8 text-[var(--muted)]">
+            <div className="text-4xl mb-3">🕳️</div>
+            <p>{t('orgTree.empty')}</p>
+          </div>
+        )}
+      </div>
+
+      {/* Agent detail modal */}
+      {selectedAgent && (
+        <AgentDetailModal agentId={selectedAgent} onClose={() => setSelectedAgent(null)} />
+      )}
+    </div>
+  );
+}