ideaco 1.1.5

package/src/components/RequirementsBoard.jsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useStore } from '@/lib/client-store';
+import { useI18n } from '@/lib/i18n';
+
+/**
+ * Requirements board page
+ * Manage all requirements, displayed by status category
+ */
+export default function RequirementsBoard() {
+  const { t } = useI18n();
+  const { company, fetchRequirements, navigateToRequirement } = useStore();
+  const [requirements, setRequirements] = useState([]);
+  const [filter, setFilter] = useState('all'); // all | in_progress | completed | failed
+
+  useEffect(() => {
+    fetchRequirements().then(setRequirements);
+  }, [company]);
+
+  // Auto refresh executing requirements
+  useEffect(() => {
+    const hasRunning = requirements.some(r => r.status === 'in_progress' || r.status === 'planning');
+    if (!hasRunning) return;
+    const timer = setInterval(() => {
+      fetchRequirements().then(setRequirements);
+    }, 5000);
+    return () => clearInterval(timer);
+  }, [requirements]);
+
+  const filtered = filter === 'all' ? requirements : requirements.filter(r => r.status === filter);
+
+  const statusCounts = {
+    all: requirements.length,
+    in_progress: requirements.filter(r => r.status === 'in_progress' || r.status === 'planning' || r.status === 'pending_approval').length,
+    completed: requirements.filter(r => r.status === 'completed').length,
+    failed: requirements.filter(r => r.status === 'failed').length,
+  };
+
+  const statusConfig = {
+    pending: { label: t('requirements.status.pending'), color: 'text-gray-400', bg: 'bg-gray-900/30', icon: '⏳' },
+    planning: { label: t('requirements.status.planning'), color: 'text-blue-400', bg: 'bg-blue-900/30', icon: '📝' },
+    in_progress: { label: t('requirements.status.in_progress'), color: 'text-yellow-400', bg: 'bg-yellow-900/30', icon: '⚙️' },
+    pending_approval: { label: t('requirements.status.pending_approval'), color: 'text-orange-400', bg: 'bg-orange-900/30', icon: '🔍' },
+    completed: { label: t('requirements.stats.completed'), color: 'text-green-400', bg: 'bg-green-900/30', icon: '✅' },
+    failed: { label: t('requirements.status.failed'), color: 'text-red-400', bg: 'bg-red-900/30', icon: '❌' },
+  };
+
+  return (
+    <div className="p-6 space-y-6 animate-fade-in">
+      <div>
+        <h1 className="text-2xl font-bold">{t('requirements.title')}</h1>
+        <p className="text-sm text-[var(--muted)] mt-1">{t('requirements.subtitle')}</p>
+      </div>
+
+      {/* Stats cards */}
+      <div className="grid grid-cols-4 gap-4">
+        {[
+          { key: 'all', label: t('requirements.stats.all'), icon: '📋', color: 'blue' },
+          { key: 'in_progress', label: t('requirements.stats.inProgress'), icon: '⚙️', color: 'yellow' },
+          { key: 'completed', label: t('requirements.stats.completed'), icon: '✅', color: 'green' },
+          { key: 'failed', label: t('requirements.stats.failed'), icon: '❌', color: 'red' },
+        ].map(stat => (
+          <div
+            key={stat.key}
+            onClick={() => setFilter(stat.key)}
+            className={`card cursor-pointer transition-all ${
+              filter === stat.key ? 'ring-1 ring-[var(--accent)]' : ''
+            }`}
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-2xl">{stat.icon}</span>
+              <span className={`text-3xl font-bold text-${stat.color}-400`}>{statusCounts[stat.key]}</span>
+            </div>
+            <div className="text-sm text-[var(--muted)] mt-2">{stat.label}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* Requirements list */}
+      {filtered.length === 0 ? (
+        <div className="card text-center py-12 text-[var(--muted)] col-span-3">
+          <div className="text-5xl mb-4">📋</div>
+          <p className="text-lg">{t('requirements.empty')}</p>
+          <p className="text-sm mt-1">{t('requirements.emptyHint')}</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filtered.map(req => {
+            const st = statusConfig[req.status] || statusConfig.pending;
+            const progress = req.workflow && req.workflow.nodeCount > 0
+              ? Math.round((req.workflow.completedCount / req.workflow.nodeCount) * 100)
+              : (req.status === 'completed' || req.status === 'pending_approval' ? 100 : 0);
+            // SVG ring progress parameters
+            const radius = 18;
+            const stroke = 3;
+            const circumference = 2 * Math.PI * radius;
+            const dashOffset = circumference - (progress / 100) * circumference;
+            const progressColor =
+              req.status === 'completed' ? '#22c55e' :
+              req.status === 'pending_approval' ? '#f97316' :
+              req.status === 'failed' ? '#ef4444' :
+              'var(--accent)';
+
+            return (
+              <div
+                key={req.id}
+                className="card cursor-pointer hover:border-[var(--accent)]/30 transition-all flex flex-col"
+                onClick={() => navigateToRequirement(req.id)}
+              >
+                {/* Top: progress ring + title + status */}
+                <div className="flex items-center gap-3">
+                  <div className="shrink-0 relative flex items-center justify-center" style={{ width: 40, height: 40 }}>
+                    {progress === 100 ? (
+                      <span className="text-xl">🎉</span>
+                    ) : (
+                      <>
+                        <svg width="40" height="40" className="transform -rotate-90">
+                          <circle
+                            cx="20" cy="20" r={radius}
+                            fill="none"
+                            stroke="rgba(255,255,255,0.06)"
+                            strokeWidth={stroke}
+                          />
+                          <circle
+                            cx="20" cy="20" r={radius}
+                            fill="none"
+                            stroke={progressColor}
+                            strokeWidth={stroke}
+                            strokeLinecap="round"
+                            strokeDasharray={circumference}
+                            strokeDashoffset={dashOffset}
+                            className="transition-all duration-500"
+                          />
+                        </svg>
+                        <span className="absolute text-[10px] font-bold" style={{ color: progressColor }}>
+                          {`${progress}%`}
+                        </span>
+                      </>
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-sm truncate">{req.title}</span>
+                      {req.status === 'in_progress' && (
+                        <span className="animate-pulse text-yellow-400 text-[10px]">⚙️</span>
+                      )}
+                    </div>
+                    <span className={`text-[10px] px-1.5 py-0.5 rounded ${st.bg} ${st.color} inline-block mt-0.5`}>{st.label}</span>
+                  </div>
+                </div>
+
+                {/* Description (multi-line support) */}
+                <p className="text-xs text-[var(--muted)] line-clamp-3 mt-2 leading-relaxed">{req.description}</p>
+
+                {/* Completion summary */}
+                {req.summary && (
+                  <div className="flex items-center gap-3 text-[10px] text-[var(--muted)] mt-2">
+                    <span>{t('requirements.summary.success', { n: req.summary.successTasks, total: req.summary.totalTasks })}</span>
+                    <span>{t('requirements.summary.duration', { n: Math.round((req.summary.totalDuration || 0) / 1000) })}</span>
+                  </div>
+                )}
+
+                {/* Bottom info */}
+                <div className="flex items-center justify-between mt-auto pt-3 border-t border-[var(--border)] text-[10px] text-[var(--muted)]">
+                  <div className="flex items-center gap-2">
+                    <span>🏢 {req.departmentName}</span>
+                    {req.workflow && (
+                      <span>📊 {req.workflow.completedCount || 0}/{req.workflow.nodeCount || 0}</span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {req.chatCount > 0 && <span>💬 {req.chatCount}</span>}
+                    {req.outputCount > 0 && <span>📦 {req.outputCount}</span>}
+                    <span>{new Date(req.createdAt).toLocaleDateString()}</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Requirement detail is now a standalone page */}
+    </div>
+  );
+}

package/src/components/SecretarySettings.jsx

@@ -0,0 +1,295 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useStore } from '@/lib/client-store';
+import { getAvatarChoices } from '@/lib/avatar';
+import { useI18n } from '@/lib/i18n';
+import CachedAvatar from './CachedAvatar';
+import AvatarGrid from './AvatarGrid';
+
+export default function SecretarySettings({ onClose }) {
+  const { t } = useI18n();
+  const { company, updateSecretarySettings } = useStore();
+  const [name, setName] = useState('');
+  const [prompt, setPrompt] = useState('');
+  const [signature, setSignature] = useState('');
+  const [providerId, setProviderId] = useState('');
+  const [gender, setGender] = useState('female');
+  const [age, setAge] = useState(18);
+  const [selectedAvatar, setSelectedAvatar] = useState(null); // { url, params }
+  const [avatarChoices, setAvatarChoices] = useState([]);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [activeTab, setActiveTab] = useState('profile');
+
+  const secretary = company?.secretary;
+
+  // Initialize data
+  useEffect(() => {
+    if (secretary) {
+      setName(secretary.name || '');
+      setPrompt(secretary.prompt || '');
+      setSignature(secretary.signature || '');
+      setProviderId(secretary.providerId || '');
+      setGender(secretary.gender || 'female');
+      setAge(secretary.age || 18);
+    }
+  }, [secretary]);
+
+  // Regenerate avatar choices when gender/age changes (debounced)
+  const debounceTimer = useRef(null);
+  const refreshAvatarDebounced = useCallback((g, a) => {
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    debounceTimer.current = setTimeout(() => {
+      const choices = getAvatarChoices(24, g, a);
+      setAvatarChoices(choices);
+    }, 300);
+  }, []);
+
+  useEffect(() => {
+    refreshAvatarDebounced(gender, age);
+    return () => { if (debounceTimer.current) clearTimeout(debounceTimer.current); };
+  }, [gender, age, refreshAvatarDebounced]);
+
+  if (!secretary) return null;
+
+  const previewAvatar = selectedAvatar?.url || secretary.avatar;
+
+  // Shuffle avatar choices
+  const refreshChoices = () => {
+    const choices = getAvatarChoices(24, gender, age);
+    setAvatarChoices(choices);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setSaved(false);
+    try {
+      const settings = {};
+      if (name && name !== secretary.name) settings.name = name;
+      if (gender !== secretary.gender) settings.gender = gender;
+      if (age !== secretary.age) settings.age = age;
+      if (selectedAvatar) {
+        settings.avatar = selectedAvatar.url;
+        settings.avatarParams = selectedAvatar.params;
+      }
+      if (prompt !== secretary.prompt) settings.prompt = prompt;
+      if (signature && signature !== secretary.signature) settings.signature = signature;
+      if (providerId && providerId !== secretary.providerId) settings.providerId = providerId;
+
+      if (Object.keys(settings).length > 0) {
+        await updateSecretarySettings(settings);
+        setSaved(true);
+        setTimeout(() => setSaved(false), 2000);
+      }
+    } catch (e) { /* handled */ }
+    setSaving(false);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 !m-0" onClick={onClose}>
+      <div className="card max-w-2xl w-full mx-4 max-h-[92vh] overflow-hidden flex flex-col" onClick={e => e.stopPropagation()}>
+        {/* Header */}
+        <div className="flex items-center justify-between pb-4 border-b border-[var(--border)]">
+          <div className="flex items-center gap-3">
+            <CachedAvatar src={previewAvatar} alt="secretary" className="w-14 h-14 rounded-full bg-[var(--border)]" />
+            <div>
+              <h2 className="text-lg font-bold">{t('secretarySettings.title')}</h2>
+              <p className="text-xs text-[var(--muted)]">{t('secretarySettings.subtitle')}</p>
+            </div>
+          </div>
+          <button onClick={onClose} className="text-[var(--muted)] hover:text-white text-xl">✕</button>
+        </div>
+
+        {/* Content area */}
+        <div className="flex-1 overflow-auto py-4 space-y-5">
+          {/* Tab switcher */}
+          <div className="flex gap-1 p-1 rounded-lg bg-[var(--card-bg)] border border-[var(--border)]">
+            <button
+              onClick={() => setActiveTab('profile')}
+              className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-all ${
+                activeTab === 'profile'
+                  ? 'bg-[var(--accent)] text-white shadow-sm'
+                  : 'text-[var(--muted)] hover:text-white hover:bg-white/5'
+              }`}
+            >{t('secretarySettings.tabProfile')}</button>
+            <button
+              onClick={() => setActiveTab('soul')}
+              className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-all ${
+                activeTab === 'soul'
+                  ? 'bg-[var(--accent)] text-white shadow-sm'
+                  : 'text-[var(--muted)] hover:text-white hover:bg-white/5'
+              }`}
+            >{t('secretarySettings.tabSoul')}</button>
+          </div>
+
+          {activeTab === 'profile' && (<>
+{/* Name */}
+          <div>
+            <label className="block text-sm font-medium mb-1.5 text-[var(--muted)]">{t('secretarySettings.nameLabel')}</label>
+            <input
+              className="input w-full"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder={t('secretarySettings.namePlaceholder')}
+            />
+          </div>
+
+{/* Gender & Age */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium mb-1.5 text-[var(--muted)]">{t('setup.gender')}</label>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => { setGender('female'); setSelectedAvatar(null); }}
+                  className={`flex-1 py-2 px-3 rounded-lg border text-sm transition-all ${
+                    gender === '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={() => { setGender('male'); setSelectedAvatar(null); }}
+                  className={`flex-1 py-2 px-3 rounded-lg border text-sm transition-all ${
+                    gender === '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 font-medium mb-1.5 text-[var(--muted)]">{t('setup.age', { n: age })}</label>
+              <div className="relative flex items-center gap-3">
+                <button
+                  onClick={() => setAge(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">
+{/* Track background */}
+                  <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" />
+{/* Gradient progress bar */}
+                  <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: `${((age - 18) / 42) * 100}%` }}
+                  />
+{/* Range slider input (transparent track, thumb only) */}
+                  <input
+                    type="range"
+                    min="18"
+                    max="60"
+                    value={age}
+                    onChange={e => { setAge(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={() => setAge(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 selection */}
+          <div>
+            <div className="flex items-center justify-between mb-1.5">
+              <label className="text-sm font-medium text-[var(--muted)]">{t('secretarySettings.avatarStyle')}</label>
+              <button
+                className="text-xs text-[var(--accent)] hover:underline flex items-center gap-1"
+                onClick={refreshChoices}
+              >{t('secretarySettings.refreshAvatar')}</button>
+            </div>
+{/* Avatar grid */}
+            <AvatarGrid
+              choices={avatarChoices}
+              selectedId={selectedAvatar?.id}
+              onSelect={setSelectedAvatar}
+            />
+          </div>
+
+{/* Signature */}
+          <div>
+            <label className="block text-sm font-medium mb-1.5 text-[var(--muted)]">{t('secretarySettings.signatureLabel')}</label>
+            <input
+              className="input w-full"
+              value={signature}
+              onChange={e => setSignature(e.target.value)}
+              placeholder={t('secretarySettings.signaturePlaceholder')}
+            />
+          </div>
+          </>)}
+
+          {activeTab === 'soul' && (<>
+{/* Service provider */}
+          <div>
+            <label className="block text-sm font-medium mb-1.5 text-[var(--muted)]">{t('secretarySettings.providerLabel')}</label>
+            <p className="text-[10px] text-[var(--muted)] mb-2">
+              {t('secretarySettings.providerDesc')}
+            </p>
+            {secretary.availableProviders && secretary.availableProviders.length > 0 ? (
+              <select
+                className="input w-full"
+                value={providerId}
+                onChange={e => setProviderId(e.target.value)}
+              >
+                {secretary.availableProviders.map(p => (
+                  <option key={p.id} value={p.id}>{p.name}</option>
+                ))}
+              </select>
+            ) : (
+              <div className="text-xs text-yellow-400 p-2 rounded bg-yellow-400/10 border border-yellow-400/20">
+                {t('secretarySettings.noProviders')}
+              </div>
+            )}
+          </div>
+
+{/* Prompt */}
+          <div>
+            <label className="block text-sm font-medium mb-1.5 text-[var(--muted)]">
+              {t('secretarySettings.promptLabel')}
+            </label>
+            <p className="text-[10px] text-[var(--muted)] mb-2">
+              {t('secretarySettings.promptDesc')}
+            </p>
+            <textarea
+              className="input w-full h-48 resize-y text-sm font-mono"
+              value={prompt}
+              onChange={e => setPrompt(e.target.value)}
+              placeholder={t('secretarySettings.promptLabel')}
+            />
+            <div className="flex items-center justify-between mt-1">
+              <span className="text-[10px] text-[var(--muted)]">
+                {t('secretarySettings.charCount', { n: prompt.length })}
+              </span>
+              <button
+                className="text-[10px] text-[var(--accent)] hover:underline"
+                onClick={() => {
+                  setPrompt(t('setup.defaultPrompt'));
+                }}
+              >{t('secretarySettings.restoreDefault')}</button>
+            </div>
+          </div>
+          </>)}
+        </div>
+
+{/* Footer actions */}
+        <div className="pt-4 border-t border-[var(--border)] flex items-center justify-between">
+          <div className="text-xs text-[var(--muted)]">
+            {t('secretarySettings.modelInfo', { provider: secretary.provider, info: ''})} {secretary.hrAssistant ? t('secretarySettings.withHR') : ''}
+          </div>
+          <div className="flex items-center gap-2">
+            {saved && <span className="text-xs text-green-400 animate-fade-in">{t('secretarySettings.saved')}</span>}
+            <button className="btn-secondary" onClick={onClose}>{t('common.cancel')}</button>
+            <button className="btn-primary" disabled={saving} onClick={handleSave}>
+              {saving ? t('secretarySettings.saving') : t('secretarySettings.saveBtn')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}