crewos 0.1.0

package/app/src/pages/Home/index.jsx

@@ -0,0 +1,2095 @@
+import { useState, useEffect, useRef } from 'preact/hooks';
+import { toast } from 'sonner';
+
+import {
+  getMembers,
+  updateMember,
+  removeMember,
+} from '../../services/member.service';
+import {
+  getTasks,
+  createTask,
+  updateTask,
+  removeTask,
+  startTask,
+  stopTask,
+  getProgress,
+  startAutoDo,
+  stopAutoDo,
+  getAutoStatus,
+} from '../../services/task.service';
+import { getRoles, pullRole } from '../../services/role.service';
+import {
+  getConfig,
+  updateConfig,
+  fetchModels,
+  startReanalysis,
+  getReanalysisProgress,
+} from '../../services/config.service';
+import ConfirmModal from '../../components/ConfirmModal';
+import { IconCheck, IconPlay } from '../../components/Icons';
+
+/* ---- sub-components ---- */
+
+const Avatar = ({ src, name, size = 36 }) => (
+  <img src={src} alt={name} width={size} height={size} class="flex-shrink-0" />
+);
+
+const IconPlus = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="3"
+    strokeLinecap="round"
+  >
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+
+const IconTrash = () => (
+  <svg
+    width="13"
+    height="13"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="3 6 5 6 21 6" />
+    <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" />
+    <path d="M10 11v6" />
+    <path d="M14 11v6" />
+    <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
+  </svg>
+);
+
+const IconEdit = () => (
+  <svg
+    width="13"
+    height="13"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+    <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
+  </svg>
+);
+
+const IconEye = ({ off }) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    {off ? (
+      <>
+        <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94" />
+        <path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19" />
+        <line x1="1" y1="1" x2="23" y2="23" />
+      </>
+    ) : (
+      <>
+        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+        <circle cx="12" cy="12" r="3" />
+      </>
+    )}
+  </svg>
+);
+
+const Spinner = () => (
+  <div class="min-h-screen flex items-center justify-center flex-col gap-4">
+    <div class="h-8 w-8 border-3 border-zinc-700 border-t-zinc-300 animate-spin" />
+    <span class="text-zinc-500 text-sm">Loading dashboard...</span>
+  </div>
+);
+
+const SectionCard = ({
+  label,
+  count,
+  headerColor = 'text-green-400',
+  height,
+  minHeight,
+  children,
+}) => (
+  <div class="border border-zinc-800 bg-zinc-900">
+    <div class="w-full flex items-center gap-3 px-5 py-4 border-b border-zinc-800">
+      <span
+        class={`uppercase tracking-[0.12em] text-xs font-bold opacity-90 ${headerColor}`}
+      >
+        &gt; {label}
+      </span>
+      {count !== '' && (
+        <span class="text-zinc-500 text-[0.7rem] opacity-60">[{count}]</span>
+      )}
+    </div>
+    <div
+      class="p-5 overflow-y-auto"
+      style={height ? { height } : minHeight ? { minHeight } : undefined}
+    >
+      {children}
+    </div>
+  </div>
+);
+
+const ActionButton = ({ children, variant = 'primary', onClick, disabled }) => (
+  <button
+    onClick={onClick}
+    disabled={disabled}
+    class={`inline-flex items-center gap-3 font-semibold text-sm uppercase tracking-[0.05em] px-4 py-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
+      variant === 'secondary'
+        ? 'border border-zinc-700 text-zinc-300 hover:border-zinc-500'
+        : 'bg-emerald-500 hover:bg-emerald-400 text-black'
+    }`}
+  >
+    {children}
+  </button>
+);
+
+/* ---- working-flow graph ---- */
+
+const WorkingFlow = ({ members, tasks }) => {
+  const containerRef = useRef(null);
+  const [curves, setCurves] = useState([]);
+  const containerSize = useRef({ w: 0, h: 0 });
+
+  const doingTasks = tasks.filter((t) => t.status === 'doing');
+
+  const priorityColors = {
+    low: '#4ade80',
+    medium: '#facc15',
+    high: '#f87171',
+  };
+
+  const computeCurves = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    containerSize.current = { w: rect.width, h: rect.height };
+
+    const next = [];
+    doingTasks.forEach((t) => {
+      if (!t.assignee) return;
+      const memberEl = el.querySelector(`[data-flow-member="${t.assignee}"]`);
+      const taskEl = el.querySelector(`[data-flow-task="${t.id}"]`);
+      if (!memberEl || !taskEl) return;
+
+      const mr = memberEl.getBoundingClientRect();
+      const tr = taskEl.getBoundingClientRect();
+
+      const x1 = mr.right - rect.left;
+      const y1 = mr.top + mr.height / 2 - rect.top;
+      const x2 = tr.left - rect.left;
+      const y2 = tr.top + tr.height / 2 - rect.top;
+      const midX = x1 + (x2 - x1) / 2;
+
+      next.push({
+        id: t.id,
+        d: `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`,
+      });
+    });
+    setCurves(next);
+  };
+
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => computeCurves());
+    const onResize = () => computeCurves();
+    window.addEventListener('resize', onResize);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('resize', onResize);
+    };
+  }, [members, doingTasks]);
+
+  if (members.length === 0) {
+    return (
+      <p class="text-zinc-500 text-xs opacity-50 text-center py-6">
+        // no members to show flow
+      </p>
+    );
+  }
+
+  return (
+    <div ref={containerRef} class="relative flex gap-6 min-h-[160px]">
+      <svg
+        class="absolute inset-0 pointer-events-none z-10 overflow-visible"
+        style={{
+          width: containerSize.current.w || '100%',
+          height: containerSize.current.h || '100%',
+        }}
+      >
+        <defs>
+          <filter id="flow-glow">
+            <feGaussianBlur stdDeviation="2" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+        {curves.map((c) => (
+          <path
+            key={c.id}
+            d={c.d}
+            fill="none"
+            stroke="#60a5fa"
+            strokeWidth="2"
+            strokeDasharray="6 6"
+            strokeLinecap="round"
+            opacity="0.6"
+            filter="url(#flow-glow)"
+            style={{ animation: 'dash-march 0.8s linear infinite' }}
+          />
+        ))}
+      </svg>
+
+      {/* Left: team members */}
+      <div class="flex-shrink-0 w-56 flex flex-col gap-2 z-20">
+        {members.map((m) => {
+          const hasDoing = doingTasks.some((t) => t.assignee === m.id);
+          return (
+            <div
+              key={m.id}
+              data-flow-member={m.id}
+              class={`flex items-center gap-3 px-3 py-2 transition-opacity ${
+                hasDoing ? 'opacity-100' : 'opacity-25'
+              }`}
+            >
+              <img
+                src={m.avatar}
+                alt={m.name}
+                width={36}
+                height={36}
+                class="flex-shrink-0"
+              />
+              <div class="min-w-0 flex-1">
+                <div class="font-semibold text-sm text-zinc-100 overflow-hidden text-ellipsis whitespace-nowrap">
+                  {m.name.split(' ')[0]}
+                </div>
+                {m.role && (
+                  <div class="text-zinc-500 text-[0.6rem] opacity-50 overflow-hidden text-ellipsis whitespace-nowrap">
+                    {m.role}
+                  </div>
+                )}
+              </div>
+              {hasDoing && (
+                <span class="w-2 h-2 flex-shrink-0 rounded-full bg-blue-400 animate-[flow-pulse_1.4s_ease-in-out_infinite]" />
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Right: doing tasks */}
+      <div class="flex-1 flex flex-col gap-2 z-20 min-w-0 overflow-hidden">
+        {doingTasks.length === 0 ? (
+          <div class="flex-1 flex items-center justify-center">
+            <p class="text-zinc-500 text-xs opacity-40 italic py-6">
+              // no tasks in progress
+            </p>
+          </div>
+        ) : (
+          doingTasks.map((t) => {
+            const color = priorityColors[t.priority] || priorityColors.medium;
+            return (
+              <div
+                key={t.id}
+                data-flow-task={t.id}
+                class="px-4 py-3 bg-zinc-800/60 border border-l-2 min-w-0 overflow-hidden"
+                style={{
+                  borderColor: `${color}50`,
+                  borderLeftColor: color,
+                }}
+              >
+                <div class="font-medium text-sm text-zinc-100 overflow-hidden text-ellipsis whitespace-nowrap">
+                  {t.description}
+                </div>
+                <div class="flex items-center gap-2 mt-1.5">
+                  <span
+                    class="text-[0.52rem] uppercase tracking-[0.05em] px-1 py-px font-bold"
+                    style={{
+                      color,
+                      background: `${color}18`,
+                      border: `0.5px solid ${color}40`,
+                    }}
+                  >
+                    {t.priority}
+                  </span>
+                  <span class="text-[0.52rem] uppercase tracking-[0.05em] text-blue-400 font-semibold">
+                    doing
+                  </span>
+                  <span class="w-1.5 h-1.5 flex-shrink-0 rounded-full bg-blue-400 animate-[flow-pulse_1.4s_ease-in-out_infinite]" />
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+/* ---- task modal ---- */
+
+const TaskModal = ({ open, task, members, saving, onSave, onClose }) => {
+  const isEdit = !!task;
+  const [description, setDescription] = useState('');
+  const [priority, setPriority] = useState('medium');
+  const [assignee, setAssignee] = useState('');
+  const [status, setStatus] = useState('todo');
+
+  useEffect(() => {
+    if (open) {
+      setDescription(task?.description || '');
+      setPriority(task?.priority || 'medium');
+      setAssignee(task?.assignee || '');
+      setStatus(task?.status || 'todo');
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!description.trim()) return;
+    onSave({
+      description: description.trim(),
+      priority,
+      assignee: assignee || null,
+      status,
+    });
+  };
+
+  const priorityOptions = [
+    {
+      value: 'low',
+      color: '#4ade80',
+      cls: 'text-green-400 border-green-400 bg-green-400/10',
+    },
+    {
+      value: 'medium',
+      color: '#facc15',
+      cls: 'text-yellow-300 border-yellow-300 bg-yellow-300/10',
+    },
+    {
+      value: 'high',
+      color: '#f87171',
+      cls: 'text-red-400 border-red-400 bg-red-400/10',
+    },
+  ];
+
+  const statusOptions = [
+    {
+      value: 'todo',
+      color: 'var(--color-muted)',
+      cls: 'text-zinc-400 border-zinc-600 bg-zinc-800/50',
+    },
+    {
+      value: 'doing',
+      color: 'var(--color-accent)',
+      cls: 'text-blue-400 border-blue-500 bg-blue-400/10',
+    },
+    {
+      value: 'review',
+      color: '#fbbf24',
+      cls: 'text-amber-400 border-amber-500 bg-amber-400/10',
+    },
+    {
+      value: 'done',
+      color: 'var(--color-primary)',
+      cls: 'text-emerald-400 border-emerald-500 bg-emerald-400/10',
+    },
+  ];
+
+  const inputCls =
+    'w-full px-3 py-2 bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm outline-none focus:border-zinc-500';
+
+  const pillCls =
+    'px-2 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.04em] whitespace-nowrap border transition-colors cursor-pointer';
+
+  const inactivePillCls = 'border-zinc-800 text-zinc-500 bg-transparent';
+
+  return (
+    <div class="fixed inset-0 z-50 flex items-start justify-center pt-[10vh] px-4">
+      <button
+        type="button"
+        class="absolute inset-0 bg-black/80 backdrop-blur-sm"
+        aria-label="Close"
+        onClick={onClose}
+      />
+      <div class="relative z-10 w-full max-w-lg p-6 bg-zinc-900 border border-zinc-800">
+        <div class="flex items-center justify-between mb-6">
+          <span class="text-emerald-400 text-xs font-bold uppercase tracking-[0.12em]">
+            &gt; {isEdit ? 'EDIT TASK' : 'NEW TASK'}
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            class="w-7 h-7 border border-zinc-700 bg-zinc-800 text-zinc-400 text-sm cursor-pointer flex items-center justify-center hover:border-zinc-600 hover:text-zinc-300 transition-colors"
+          >
+            ✕
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <label class="block text-zinc-500 text-[0.68rem] uppercase tracking-[0.08em] mb-1">
+            Description
+          </label>
+          <textarea
+            value={description}
+            onInput={(e) => setDescription(e.target.value)}
+            placeholder="What needs to be done?"
+            autoFocus
+            rows={3}
+            class={`${inputCls} mb-4 resize-y`}
+          />
+
+          <label class="block text-zinc-500 text-[0.68rem] uppercase tracking-[0.08em] mb-2">
+            Priority
+          </label>
+          <div class="flex gap-2 mb-4">
+            {priorityOptions.map(({ value, color, cls }) => (
+              <button
+                key={value}
+                type="button"
+                onClick={() => setPriority(value)}
+                class={`${pillCls} ${priority === value ? cls : inactivePillCls}`}
+              >
+                {value}
+              </button>
+            ))}
+          </div>
+
+          <label class="block text-zinc-500 text-[0.68rem] uppercase tracking-[0.08em] mb-2">
+            Status
+          </label>
+          <div class="flex gap-2 mb-4">
+            {statusOptions.map(({ value, cls }) => (
+              <button
+                key={value}
+                type="button"
+                onClick={() => setStatus(value)}
+                class={`${pillCls} ${status === value ? cls : inactivePillCls}`}
+              >
+                {value}
+              </button>
+            ))}
+          </div>
+
+          <label class="block text-zinc-500 text-[0.68rem] uppercase tracking-[0.08em] mb-2">
+            Assignee
+          </label>
+          <div class="flex gap-2 overflow-x-auto pb-2 mb-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            <button
+              type="button"
+              onClick={() => setAssignee('')}
+              title="Unassigned"
+              class={`flex-shrink-0 w-10 h-10 flex items-center justify-center text-sm font-bold transition-all cursor-pointer ${
+                assignee === ''
+                  ? 'border-2 border-emerald-400 bg-emerald-400/10 text-emerald-400'
+                  : 'border-2 border-zinc-800 bg-transparent text-zinc-500'
+              }`}
+            >
+              ∅
+            </button>
+            {members.map((m) => (
+              <button
+                key={m.id}
+                type="button"
+                onClick={() => setAssignee(assignee === m.id ? '' : m.id)}
+                title={`${m.name}\n${m.role}`}
+                class={`flex-shrink-0 p-0.5 border-2 bg-transparent cursor-pointer transition-all ${
+                  assignee === m.id
+                    ? 'border-emerald-400 opacity-100'
+                    : 'border-transparent opacity-45'
+                }`}
+              >
+                <Avatar src={m.avatar} name={m.name} size={36} />
+              </button>
+            ))}
+          </div>
+          <div class="flex gap-3 justify-end">
+            <ActionButton variant="secondary" onClick={onClose}>
+              Cancel
+            </ActionButton>
+            <ActionButton
+              variant="primary"
+              disabled={saving || !description.trim()}
+              onClick={handleSubmit}
+            >
+              {saving ? 'Saving...' : isEdit ? 'Update' : 'Create'}
+            </ActionButton>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+/* ---- auto-do modal ---- */
+
+const AutoDoModal = ({
+  open,
+  tasks,
+  members,
+  autoRunning,
+  processingId,
+  queue,
+  onStart,
+  onStop,
+  onClose,
+}) => {
+  const priorityLabels = { high: 0, medium: 1, low: 2 };
+
+  const defaultSorted = [...tasks].sort((a, b) => {
+    const pa = priorityLabels[a.priority] ?? 1;
+    const pb = priorityLabels[b.priority] ?? 1;
+    if (pa !== pb) return pa - pb;
+    return new Date(b.createdAt) - new Date(a.createdAt);
+  });
+
+  const [ordered, setOrdered] = useState(defaultSorted.map((t) => t.id));
+  const [starting, setStarting] = useState(false);
+
+  useEffect(() => {
+    if (open && !autoRunning) {
+      setOrdered(defaultSorted.map((t) => t.id));
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  const getTask = (id) => tasks.find((t) => t.id === id);
+  const getMember = (id) => members.find((m) => m.id === id);
+
+  const moveUp = (idx) => {
+    if (idx === 0) return;
+    setOrdered((prev) => {
+      const next = [...prev];
+      [next[idx - 1], next[idx]] = [next[idx], next[idx - 1]];
+      return next;
+    });
+  };
+
+  const moveDown = (idx) => {
+    if (idx === ordered.length - 1) return;
+    setOrdered((prev) => {
+      const next = [...prev];
+      [next[idx], next[idx + 1]] = [next[idx + 1], next[idx]];
+      return next;
+    });
+  };
+
+  const handleStart = async () => {
+    setStarting(true);
+    try {
+      await onStart(ordered);
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  const priorityColors = {
+    low: '#4ade80',
+    medium: '#facc15',
+    high: '#f87171',
+  };
+
+  return (
+    <div class="fixed inset-0 z-50 flex items-start justify-center pt-[10vh] px-4">
+      <button
+        type="button"
+        class="absolute inset-0 bg-black/80 backdrop-blur-sm"
+        aria-label="Close"
+        onClick={() => !autoRunning && onClose()}
+      />
+      <div class="relative z-10 w-full max-w-lg p-6 bg-zinc-900 border border-zinc-800">
+        <div class="flex items-center justify-between mb-6">
+          <span class="text-emerald-400 text-xs font-bold uppercase tracking-[0.12em]">
+            &gt; AUTO DO TASKS
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={autoRunning}
+            class={`w-7 h-7 border border-zinc-700 bg-zinc-800 text-zinc-400 text-sm cursor-pointer flex items-center justify-center transition-colors ${
+              autoRunning
+                ? 'opacity-30 cursor-not-allowed'
+                : 'hover:border-zinc-600 hover:text-zinc-300'
+            }`}
+          >
+            ✕
+          </button>
+        </div>
+
+        {autoRunning && (
+          <div class="mb-4 p-3 border border-blue-400/20 bg-blue-400/5 flex items-center justify-between">
+            <div>
+              <span class="text-blue-400 text-xs font-bold uppercase tracking-[0.08em]">
+                Processing...
+              </span>
+              {processingId && getTask(processingId) && (
+                <span class="text-zinc-400 text-xs ml-2">
+                  {getTask(processingId).description}
+                </span>
+              )}
+            </div>
+            <span class="text-zinc-500 text-[0.62rem]">
+              {queue.length > 0 ? `${queue.length} remaining` : 'last task'}
+            </span>
+          </div>
+        )}
+
+        {tasks.length === 0 ? (
+          <p class="text-zinc-500 text-xs opacity-50 text-center py-6">
+            // no assigned tasks to auto-process
+          </p>
+        ) : (
+          <div class="flex flex-col max-h-[360px] overflow-y-auto border border-zinc-800 mb-4">
+            {ordered.map((id, idx) => {
+              const t = getTask(id);
+              if (!t) return null;
+              const assignee = getMember(t.assignee);
+              return (
+                <div
+                  key={t.id}
+                  class={`px-3 py-2 flex items-center gap-3 border-b border-zinc-800 last:border-b-0 ${
+                    processingId === t.id ? 'bg-blue-400/5' : 'bg-zinc-900'
+                  }`}
+                >
+                  <div class="flex flex-col gap-0.5 flex-shrink-0">
+                    <button
+                      type="button"
+                      onClick={() => moveUp(idx)}
+                      disabled={autoRunning || idx === 0}
+                      class="w-4 h-4 flex items-center justify-center text-zinc-500 hover:text-zinc-300 disabled:opacity-25 disabled:cursor-not-allowed cursor-pointer bg-transparent border-0 p-0 leading-none text-[0.55rem]"
+                    >
+                      ▲
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => moveDown(idx)}
+                      disabled={autoRunning || idx === ordered.length - 1}
+                      class="w-4 h-4 flex items-center justify-center text-zinc-500 hover:text-zinc-300 disabled:opacity-25 disabled:cursor-not-allowed cursor-pointer bg-transparent border-0 p-0 leading-none text-[0.55rem]"
+                    >
+                      ▼
+                    </button>
+                  </div>
+                  <span class="text-zinc-500 text-[0.55rem] w-4 text-center flex-shrink-0">
+                    {idx + 1}
+                  </span>
+                  <div class="flex-1 min-w-0">
+                    <div class="font-medium text-sm text-zinc-100 overflow-hidden text-ellipsis whitespace-nowrap">
+                      {t.description}
+                    </div>
+                    <div class="text-zinc-500 text-[0.62rem] uppercase tracking-[0.04em] mt-0.5 flex items-center gap-2 opacity-65">
+                      <span
+                        class="px-1 py-px text-[0.54rem] font-semibold"
+                        style={{
+                          color: priorityColors[t.priority],
+                          background: `${priorityColors[t.priority]}18`,
+                          border: `0.5px solid ${priorityColors[t.priority]}40`,
+                        }}
+                      >
+                        {t.priority}
+                      </span>
+                      {assignee && (
+                        <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+                          @{assignee.name.toLowerCase().replace(/\s+/g, '_')}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  {assignee && (
+                    <img
+                      src={assignee.avatar}
+                      alt={assignee.name}
+                      width={24}
+                      height={24}
+                      class="flex-shrink-0"
+                    />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        <div class="flex gap-3 justify-end">
+          {autoRunning ? (
+            <button
+              type="button"
+              onClick={onStop}
+              class="inline-flex items-center gap-3 font-semibold text-sm uppercase tracking-[0.05em] px-4 py-2 transition-colors border border-red-400/30 bg-red-400/10 text-red-400 hover:border-red-400/60 hover:bg-red-400/20 cursor-pointer"
+            >
+              ■ Stop Auto
+            </button>
+          ) : (
+            <>
+              <ActionButton variant="secondary" onClick={onClose}>
+                Cancel
+              </ActionButton>
+              <ActionButton
+                variant="primary"
+                disabled={starting || ordered.length === 0}
+                onClick={handleStart}
+              >
+                {starting ? 'Starting...' : '▶ Start All'}
+              </ActionButton>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/* ---- member modal ---- */
+
+const MemberModal = ({ open, member, saving, onSave, onClose }) => {
+  const [skills, setSkills] = useState('');
+  const [rules, setRules] = useState('');
+  const [memory, setMemory] = useState('');
+
+  useEffect(() => {
+    if (open && member) {
+      setSkills(member.skills || '');
+      setRules(member.rules || '');
+      setMemory(member.memory || '');
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSave({
+      skills: skills.trim(),
+      rules: rules.trim(),
+      memory: memory.trim(),
+    });
+  };
+
+  const textareaCls =
+    'w-full px-3 py-2 bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm outline-none focus:border-zinc-500 resize-none font-mono text-xs leading-relaxed';
+
+  return (
+    <div class="fixed inset-0 z-50 flex items-start justify-center pt-[8vh] px-4">
+      <button
+        type="button"
+        class="absolute inset-0 bg-black/80 backdrop-blur-sm"
+        aria-label="Close"
+        onClick={onClose}
+      />
+      <div class="relative z-10 w-full max-w-lg p-6 bg-zinc-900 border border-zinc-800">
+        <div class="flex items-center justify-between mb-6">
+          <span class="text-emerald-400 text-xs font-bold uppercase tracking-[0.12em]">
+            &gt; EDIT MEMBER
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            class="w-7 h-7 border border-zinc-700 bg-zinc-800 text-zinc-400 text-sm cursor-pointer flex items-center justify-center hover:border-zinc-600 hover:text-zinc-300 transition-colors"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div class="flex items-center gap-3 mb-4 pb-4 border-b border-zinc-800">
+          <Avatar src={member.avatar} name={member.name} size={44} />
+          <div>
+            <div class="font-semibold text-zinc-100">{member.name}</div>
+            <div class="text-zinc-500 text-xs opacity-55">{member.role}</div>
+          </div>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <label class="block text-zinc-500 text-[0.68rem] uppercase tracking-[0.08em] mb-1">
+            Skills <span class="opacity-40">(comma-separated)</span>
+          </label>
+          <textarea
+            value={skills}
+            onInput={(e) => setSkills(e.target.value)}
+            rows={3}
+            placeholder="React, TypeScript, Node.js"
+            class={`${textareaCls} mb-4`}
+          />
+
+          <label class="block text-zinc-500 text-[0.68rem] uppercase tracking-[0.08em] mb-1">
+            Rules <span class="opacity-40">(one per line)</span>
+          </label>
+          <textarea
+            value={rules}
+            onInput={(e) => setRules(e.target.value)}
+            rows={4}
+            placeholder="Prefer minimal, accessible UI&#10;Mobile-first responsive design"
+            class={`${textareaCls} mb-4`}
+          />
+
+          <label class="block text-zinc-500 text-[0.68rem] uppercase tracking-[0.08em] mb-1">
+            Memory <span class="opacity-40">(one per line)</span>
+          </label>
+          <textarea
+            value={memory}
+            onInput={(e) => setMemory(e.target.value)}
+            rows={4}
+            placeholder="Project uses Preact + Tailwind&#10;API base is /api/v1"
+            class={`${textareaCls} mb-6`}
+          />
+
+          <div class="flex gap-3 justify-end">
+            <ActionButton variant="secondary" onClick={onClose}>
+              Cancel
+            </ActionButton>
+            <ActionButton
+              variant="primary"
+              disabled={saving}
+              onClick={handleSubmit}
+            >
+              {saving ? 'Saving...' : 'Update'}
+            </ActionButton>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+function formatTokens(n) {
+  if (n == null) return '0';
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k';
+  return String(n);
+}
+
+/* ---- main ---- */
+
+const Home = () => {
+  const [members, setMembers] = useState([]);
+  const [tasks, setTasks] = useState([]);
+  const [roles, setRoles] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [pulling, setPulling] = useState({});
+  const [removing, setRemoving] = useState({});
+  const [removeTarget, setRemoveTarget] = useState(null);
+  const [taskModal, setTaskModal] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [removingTask, setRemovingTask] = useState({});
+  const [removeTaskTarget, setRemoveTaskTarget] = useState(null);
+  const [taskFilter, setTaskFilter] = useState('todo');
+  const [autoDoModal, setAutoDoModal] = useState(false);
+  const [autoDoRunning, setAutoDoRunning] = useState(false);
+  const [autoDoQueue, setAutoDoQueue] = useState([]);
+  const [autoDoProcessingId, setAutoDoProcessingId] = useState(null);
+  const [config, setConfig] = useState(null);
+  const [savingConfig, setSavingConfig] = useState(false);
+  const [configForm, setConfigForm] = useState({});
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [models, setModels] = useState([]);
+  const [fetchingModels, setFetchingModels] = useState(false);
+  const [reanalyzing, setReanalyzing] = useState(false);
+  const [reanalysisProgress, setReanalysisProgress] = useState([]);
+  const [reanalysisDone, setReanalysisDone] = useState(false);
+  const reanalysisRef = useRef(null);
+  const reanalysisProgressRef = useRef(null);
+  const [memberModal, setMemberModal] = useState(null);
+  const [savingMember, setSavingMember] = useState(false);
+  const [startingTask, setStartingTask] = useState({});
+  const [stoppingTask, setStoppingTask] = useState(false);
+  const [progress, setProgress] = useState([]);
+  const [progressTokens, setProgressTokens] = useState(null);
+  const prevTaskStatuses = useRef({});
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [membersRes, tasksRes, rolesRes, configRes] = await Promise.all([
+          getMembers(),
+          getTasks(),
+          getRoles(),
+          getConfig(),
+        ]);
+        setMembers(membersRes.data);
+        setTasks(tasksRes.data);
+        prevTaskStatuses.current = Object.fromEntries(
+          tasksRes.data.map((t) => [t.id, t.status]),
+        );
+        setRoles(rolesRes.data);
+        setConfig(configRes.data);
+        setConfigForm(configRes.data);
+        if (configRes.data.models?.length) {
+          setModels(configRes.data.models);
+        }
+
+        try {
+          const autoStatusRes = await getAutoStatus();
+          if (autoStatusRes.data.running) {
+            setAutoDoRunning(true);
+            setAutoDoQueue(autoStatusRes.data.queue || []);
+            setAutoDoProcessingId(autoStatusRes.data.processing || null);
+          }
+        } catch {
+          // ignore auto-status fetch failures
+        }
+      } catch {
+        /* toast handled by api interceptor */
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    const hasRunning = tasks.some((t) => t.status === 'doing');
+    if (!hasRunning) {
+      setProgress([]);
+      setProgressTokens(null);
+      return;
+    }
+
+    const interval = setInterval(async () => {
+      try {
+        const [tasksRes, progressRes] = await Promise.all([
+          getTasks(),
+          getProgress(),
+        ]);
+        const newTasks = tasksRes.data;
+        for (const t of newTasks) {
+          const prev = prevTaskStatuses.current[t.id];
+          if (prev === 'doing' && t.status === 'done') {
+            const tokenInfo = ` (${formatTokens(t.inputTokens)} in / ${formatTokens(t.outputTokens)} out)`;
+            toast.success(
+              `Task "${t.description || 'Untitled'}" completed${tokenInfo}`,
+            );
+          }
+        }
+        prevTaskStatuses.current = Object.fromEntries(
+          newTasks.map((t) => [t.id, t.status]),
+        );
+        setTasks(newTasks);
+        setProgress(progressRes.data.lines || []);
+        setProgressTokens(progressRes.data.tokens || null);
+      } catch {
+        // ignore
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [tasks]);
+
+  useEffect(() => {
+    if (!autoDoRunning) return;
+
+    const interval = setInterval(async () => {
+      try {
+        const statusRes = await getAutoStatus();
+        const { running, queue, processing } = statusRes.data;
+
+        if (!running) {
+          const tasksRes = await getTasks();
+          setTasks(tasksRes.data);
+          setAutoDoRunning(false);
+          setAutoDoQueue([]);
+          setAutoDoProcessingId(null);
+          setProgress([]);
+          toast.success('Auto-do completed');
+          return;
+        }
+
+        setAutoDoQueue(queue || []);
+        setAutoDoProcessingId(processing || null);
+
+        try {
+          const tasksRes = await getTasks();
+          setTasks(tasksRes.data);
+        } catch {
+          // ignore
+        }
+      } catch {
+        // ignore
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [autoDoRunning]);
+
+  const handlePull = async (roleId) => {
+    setPulling((p) => ({ ...p, [roleId]: true }));
+    try {
+      const res = await pullRole(roleId);
+      setMembers((prev) => [...prev, res.data]);
+    } catch {
+      /* toast */
+    } finally {
+      setPulling((p) => ({ ...p, [roleId]: false }));
+    }
+  };
+
+  const handleRemove = async (memberId) => {
+    setRemoving((p) => ({ ...p, [memberId]: true }));
+    try {
+      await removeMember(memberId);
+      setMembers((prev) => prev.filter((m) => m.id !== memberId));
+      setTasks((prev) =>
+        prev.map((t) =>
+          t.assignee === memberId ? { ...t, assignee: null } : t,
+        ),
+      );
+      setRemoveTarget(null);
+    } catch {
+      /* toast */
+    } finally {
+      setRemoving((p) => ({ ...p, [memberId]: false }));
+    }
+  };
+
+  const handleSaveTask = async (data) => {
+    setSaving(true);
+    try {
+      if (taskModal?.task) {
+        const res = await updateTask(taskModal.task.id, data);
+        setTasks((prev) =>
+          prev.map((t) => (t.id === res.data.id ? res.data : t)),
+        );
+      } else {
+        const res = await createTask(data);
+        setTasks((prev) => [...prev, res.data]);
+      }
+      setTaskModal(null);
+    } catch {
+      // toast handled by api interceptor
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRemoveTask = async (taskId) => {
+    setRemovingTask((p) => ({ ...p, [taskId]: true }));
+    try {
+      await removeTask(taskId);
+      setTasks((prev) => prev.filter((t) => t.id !== taskId));
+      setRemoveTaskTarget(null);
+    } catch {
+      // toast
+    } finally {
+      setRemovingTask((p) => ({ ...p, [taskId]: false }));
+    }
+  };
+
+  const handleStartTask = async (taskId) => {
+    setStartingTask((p) => ({ ...p, [taskId]: true }));
+    try {
+      const res = await startTask(taskId);
+      setTasks((prev) =>
+        prev.map((t) => (t.id === res.data.id ? res.data : t)),
+      );
+      toast.success('Task started');
+    } catch (err) {
+      toast.error(err.message);
+    } finally {
+      setStartingTask((p) => ({ ...p, [taskId]: false }));
+    }
+  };
+
+  const handleStopTask = async () => {
+    setStoppingTask(true);
+    try {
+      await stopTask();
+      setTasks((prev) =>
+        prev.map((t) =>
+          t.status === 'doing'
+            ? { ...t, status: 'todo', updatedAt: new Date().toISOString() }
+            : t,
+        ),
+      );
+      setProgress([]);
+      toast.success('Task stopped');
+    } catch (err) {
+      toast.error(err.message);
+    } finally {
+      setStoppingTask(false);
+    }
+  };
+
+  const handleAutoStart = async (taskIds) => {
+    try {
+      const res = await startAutoDo(taskIds);
+      setAutoDoRunning(true);
+      setAutoDoQueue(res.data.queue || []);
+      setAutoDoModal(false);
+
+      const [tasksRes, statusRes] = await Promise.all([
+        getTasks(),
+        getAutoStatus(),
+      ]);
+      setTasks(tasksRes.data);
+      setAutoDoProcessingId(statusRes.data.processing || null);
+
+      toast.success('Auto-do started');
+    } catch (err) {
+      toast.error(err.message);
+      throw err;
+    }
+  };
+
+  const handleAutoStop = async () => {
+    try {
+      await stopAutoDo();
+      setTasks((prev) =>
+        prev.map((t) =>
+          t.status === 'doing'
+            ? { ...t, status: 'todo', updatedAt: new Date().toISOString() }
+            : t,
+        ),
+      );
+      setAutoDoRunning(false);
+      setAutoDoQueue([]);
+      setAutoDoProcessingId(null);
+      setProgress([]);
+      toast.success('Auto-do stopped');
+    } catch (err) {
+      toast.error(err.message);
+    }
+  };
+
+  const handleSaveMember = async (data) => {
+    setSavingMember(true);
+    try {
+      const res = await updateMember(memberModal.member.id, data);
+      setMembers((prev) =>
+        prev.map((m) => (m.id === res.data.id ? res.data : m)),
+      );
+      setMemberModal(null);
+    } catch {
+      // toast handled by api interceptor
+    } finally {
+      setSavingMember(false);
+    }
+  };
+
+  const handleSaveConfig = async () => {
+    setSavingConfig(true);
+    try {
+      const res = await updateConfig(configForm);
+      setConfig(res.data);
+      setConfigForm(res.data);
+      if (res.data.models?.length) {
+        setModels(res.data.models);
+      }
+      toast.success('Config updated');
+    } catch {
+      // toast
+    } finally {
+      setSavingConfig(false);
+    }
+  };
+
+  const handleReanalyze = async () => {
+    setReanalyzing(true);
+    setReanalysisDone(false);
+    setReanalysisProgress([]);
+
+    try {
+      await startReanalysis();
+      reanalysisRef.current = setInterval(async () => {
+        try {
+          const res = await getReanalysisProgress();
+          setReanalysisProgress(res.data.lines || []);
+          if (!res.data.isAnalyzing) {
+            clearInterval(reanalysisRef.current);
+            reanalysisRef.current = null;
+            setReanalyzing(false);
+            setReanalysisDone(true);
+
+            const configRes = await getConfig();
+            setConfig(configRes.data);
+            setConfigForm((prev) => ({
+              ...prev,
+              projectKnowledge: configRes.data.projectKnowledge,
+            }));
+            toast.success('Project reanalyzed');
+          }
+        } catch {
+          // ignore
+        }
+      }, 1000);
+    } catch (err) {
+      setReanalyzing(false);
+      toast.error(err.response?.data?.error || err.message);
+    }
+  };
+
+  useEffect(() => {
+    if (reanalysisProgressRef.current) {
+      reanalysisProgressRef.current.scrollTop =
+        reanalysisProgressRef.current.scrollHeight;
+    }
+  }, [reanalysisProgress]);
+
+  useEffect(() => {
+    return () => {
+      if (reanalysisRef.current) clearInterval(reanalysisRef.current);
+    };
+  }, []);
+
+  const modelsTimerRef = useRef(null);
+
+  const doFetchModels = async (baseURL, apiKey) => {
+    if (!baseURL || !apiKey) {
+      setModels([]);
+      return;
+    }
+    setFetchingModels(true);
+    try {
+      const res = await fetchModels(baseURL, apiKey);
+      setModels(res.data);
+    } catch {
+      setModels([]);
+    } finally {
+      setFetchingModels(false);
+    }
+  };
+
+  useEffect(() => {
+    if (modelsTimerRef.current) clearTimeout(modelsTimerRef.current);
+    if (!configForm.baseURL || !configForm.apiKey) {
+      setModels([]);
+      return;
+    }
+    modelsTimerRef.current = setTimeout(() => {
+      doFetchModels(configForm.baseURL, configForm.apiKey);
+    }, 400);
+    return () => clearTimeout(modelsTimerRef.current);
+  }, [configForm.baseURL, configForm.apiKey]);
+
+  const getMember = (id) => members.find((m) => m.id === id);
+
+  const filteredTasks = taskFilter
+    ? tasks.filter((t) => t.status === taskFilter)
+    : tasks;
+
+  if (loading) return <Spinner />;
+
+  return (
+    <div class="min-h-screen bg-zinc-950">
+      <div class="max-w-7xl mx-auto px-6 py-8">
+        {/* --- header --- */}
+        <div class="flex items-start justify-between mb-8 flex-wrap gap-4">
+          <div>
+            <h1 class="text-2xl font-bold uppercase tracking-[0.06em] text-emerald-400 m-0">
+              &gt; crewOS_
+            </h1>
+            <p class="text-zinc-500 text-sm mt-2 opacity-60">
+              dashboard v0.1.0
+            </p>
+          </div>
+          <ActionButton
+            onClick={() =>
+              window.open(`http://localhost:${config?.opencodePort}`)
+            }
+          >
+            Open Terminal
+          </ActionButton>
+        </div>
+
+        {/* --- grid --- */}
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* --- working flow --- */}
+          <div class="col-span-1 lg:col-span-2">
+            <SectionCard
+              label="PROGRESS"
+              count={
+                members.filter((m) =>
+                  tasks.some(
+                    (t) => t.assignee === m.id && t.status === 'doing',
+                  ),
+                ).length
+              }
+              headerColor="text-green-400"
+              minHeight="144px"
+            >
+              <div class="flex gap-4">
+                <div class="flex-1 min-w-0">
+                  <WorkingFlow
+                    members={members}
+                    tasks={tasks.filter((t) => t.status !== 'done')}
+                  />
+                </div>
+                {autoDoRunning &&
+                  (() => {
+                    const priorityColors = {
+                      low: '#4ade80',
+                      medium: '#facc15',
+                      high: '#f87171',
+                    };
+                    const processingTask = autoDoProcessingId
+                      ? tasks.find((t) => t.id === autoDoProcessingId)
+                      : null;
+                    const queueCount = processingTask
+                      ? autoDoQueue.length + 1
+                      : autoDoQueue.length;
+
+                    const TaskRow = ({ t, isProcessing }) => {
+                      if (!t) return null;
+                      return (
+                        <div
+                          class={`px-2.5 py-1.5 flex items-center gap-2 border-b border-zinc-800 last:border-b-0 ${
+                            isProcessing ? 'bg-emerald-400/5' : 'bg-transparent'
+                          }`}
+                        >
+                          <span
+                            class={`w-1.5 h-1.5 flex-shrink-0 rounded-full ${
+                              isProcessing
+                                ? 'bg-emerald-400 animate-[flow-pulse_1.4s_ease-in-out_infinite]'
+                                : 'bg-zinc-700'
+                            }`}
+                          />
+                          <div class="flex-1 min-w-0">
+                            <div class="font-medium text-[0.7rem] text-zinc-100 overflow-hidden text-ellipsis whitespace-nowrap">
+                              {t.description}
+                            </div>
+                            <div class="flex items-center gap-1.5 mt-0.5">
+                              <span
+                                class="px-1 py-px text-[0.48rem] font-semibold uppercase"
+                                style={{
+                                  color:
+                                    priorityColors[t.priority] ||
+                                    priorityColors.medium,
+                                  background: `${priorityColors[t.priority] || priorityColors.medium}18`,
+                                  border: `0.5px solid ${priorityColors[t.priority] || priorityColors.medium}40`,
+                                }}
+                              >
+                                {t.priority}
+                              </span>
+                              {t.assignee && getMember(t.assignee) && (
+                                <span class="text-[0.48rem] text-zinc-500 overflow-hidden text-ellipsis whitespace-nowrap">
+                                  @
+                                  {getMember(t.assignee)
+                                    .name.toLowerCase()
+                                    .replace(/\s+/g, '_')}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    };
+
+                    return (
+                      <div class="w-64 flex-shrink-0 border border-zinc-800 bg-zinc-900 overflow-hidden">
+                        <div class="px-3 py-2 border-b border-zinc-800">
+                          <span class="text-emerald-400 text-[0.6rem] font-bold uppercase tracking-[0.12em]">
+                            &gt; TASK QUEUE
+                          </span>
+                          <span class="text-zinc-500 text-[0.6rem] ml-2">
+                            [{queueCount}]
+                          </span>
+                        </div>
+                        <div class="max-h-[180px] overflow-y-auto">
+                          {processingTask === null &&
+                          autoDoQueue.length === 0 ? (
+                            <p class="text-zinc-500 text-[0.6rem] opacity-50 text-center py-3">
+                              // queue empty
+                            </p>
+                          ) : (
+                            <div class="flex flex-col">
+                              {processingTask && (
+                                <div class="px-2.5 py-1 border-b border-zinc-800 bg-emerald-400/5">
+                                  <span class="text-emerald-400 text-[0.5rem] font-bold uppercase tracking-[0.1em]">
+                                    &gt; doing
+                                  </span>
+                                </div>
+                              )}
+                              {processingTask && (
+                                <TaskRow
+                                  t={processingTask}
+                                  isProcessing={true}
+                                />
+                              )}
+                              {autoDoQueue.length > 0 && (
+                                <div class="px-2.5 py-1 border-b border-zinc-800 bg-blue-400/5">
+                                  <span class="text-blue-400 text-[0.5rem] font-bold uppercase tracking-[0.1em]">
+                                    &gt; queued
+                                  </span>
+                                </div>
+                              )}
+                              {autoDoQueue.map((qId) => {
+                                const qt = tasks.find((t) => t.id === qId);
+                                if (!qt) return null;
+                                return (
+                                  <TaskRow
+                                    key={qId}
+                                    t={qt}
+                                    isProcessing={false}
+                                  />
+                                );
+                              })}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })()}
+              </div>
+            </SectionCard>
+          </div>
+
+          {/* --- live output --- */}
+          <SectionCard
+            label="LIVE OUTPUT"
+            count={progress.length}
+            headerColor="text-blue-400"
+            height="420px"
+          >
+            <div class="bg-black h-full border border-zinc-700 rounded-0 p-3 overflow-y-auto font-mono text-xs leading-relaxed">
+              {tasks.some((t) => t.status === 'doing') ? (
+                <div class="mb-2 pb-2 border-b border-zinc-700 flex items-center justify-between">
+                  <div>
+                    <span class="text-blue-400 font-bold text-[0.7rem] uppercase tracking-[0.05em]">
+                      {tasks.find((t) => t.status === 'doing').description}
+                    </span>
+                    <span class="text-zinc-600 ml-2">
+                      [{tasks.find((t) => t.status === 'doing').priority}]
+                    </span>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    {progressTokens &&
+                      (progressTokens.inputTokens > 0 ||
+                        progressTokens.outputTokens > 0) && (
+                        <span class="text-zinc-500 text-[0.6rem] font-mono">
+                          <span class="text-emerald-400/70">
+                            {formatTokens(progressTokens.inputTokens)}
+                          </span>
+                          <span class="text-zinc-600"> in</span>
+                          <span class="text-zinc-400"> / </span>
+                          <span class="text-blue-400/70">
+                            {formatTokens(progressTokens.outputTokens)}
+                          </span>
+                          <span class="text-zinc-600"> out</span>
+                        </span>
+                      )}
+                    <button
+                      onClick={handleStopTask}
+                      disabled={stoppingTask}
+                      title="Stop task"
+                      class={`px-2 py-0.5 text-[0.6rem] uppercase tracking-[0.05em] font-bold border border-red-400/30 bg-red-400/10 text-red-400 cursor-pointer transition-colors hover:border-red-400/60 hover:bg-red-400/20 ${
+                        stoppingTask ? 'opacity-40 cursor-not-allowed' : ''
+                      }`}
+                    >
+                      {stoppingTask ? '...' : 'Stop'}
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <p class="text-zinc-600 mb-2 pb-2 border-b border-zinc-700/50 text-[0.65rem]">
+                  // idle — start a task to see output
+                </p>
+              )}
+              {progress.length === 0 ? (
+                <p class="text-zinc-600 animate-pulse">
+                  {tasks.some((t) => t.status === 'doing')
+                    ? 'Waiting for output...'
+                    : ''}
+                </p>
+              ) : (
+                progress.map((line, i) => (
+                  <div
+                    key={i}
+                    class="text-zinc-300 py-[1px] whitespace-pre-wrap break-all"
+                  >
+                    {line}
+                  </div>
+                ))
+              )}
+            </div>
+          </SectionCard>
+
+          {/* --- tasks --- */}
+          <div>
+            <SectionCard
+              label="TASKS"
+              count={filteredTasks.length}
+              headerColor="text-green-400"
+              height="420px"
+            >
+              <div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
+                <div class="flex gap-1">
+                  {['all', 'todo', 'doing', 'review', 'done'].map((f) => {
+                    const colorMap = {
+                      all: 'text-zinc-300 border-zinc-500 bg-zinc-800',
+                      todo: 'text-zinc-400 border-zinc-500 bg-zinc-800/50',
+                      doing: 'text-blue-400 border-blue-500 bg-blue-400/10',
+                      review: 'text-amber-400 border-amber-500 bg-amber-400/10',
+                      done: 'text-emerald-400 border-emerald-400/30 bg-emerald-400/10',
+                    };
+                    const active =
+                      (f === 'all' && !taskFilter) || taskFilter === f;
+                    return (
+                      <button
+                        key={f}
+                        type="button"
+                        onClick={() => setTaskFilter(f === 'all' ? null : f)}
+                        class={`px-2 py-1 text-[0.68rem] uppercase tracking-[0.05em] font-semibold transition-colors cursor-pointer border ${
+                          active
+                            ? colorMap[f]
+                            : 'text-zinc-500 border-transparent hover:text-zinc-300'
+                        }`}
+                      >
+                        {f}
+                      </button>
+                    );
+                  })}
+                </div>
+                <div class="flex gap-2">
+                  {autoDoRunning ? (
+                    <button
+                      type="button"
+                      onClick={handleAutoStop}
+                      class="inline-flex items-center gap-3 font-semibold text-sm uppercase tracking-[0.05em] px-4 py-2 transition-colors border border-red-400/30 bg-red-400/10 text-red-400 hover:border-red-400/60 hover:bg-red-400/20 cursor-pointer"
+                    >
+                      ■ Stop Auto
+                    </button>
+                  ) : (
+                    <ActionButton
+                      variant="secondary"
+                      onClick={() => setAutoDoModal(true)}
+                    >
+                      ⚡ Auto Do
+                    </ActionButton>
+                  )}
+                  <ActionButton
+                    variant="secondary"
+                    onClick={() => setTaskModal({ task: null })}
+                  >
+                    + Add Task
+                  </ActionButton>
+                </div>
+              </div>
+
+              {filteredTasks.length === 0 ? (
+                <div class="text-center py-6">
+                  <p class="text-zinc-500 text-xs opacity-50">
+                    // no {taskFilter || ''} tasks...
+                  </p>
+                </div>
+              ) : (
+                <div class="flex flex-col max-h-[400px] overflow-y-auto border border-zinc-800">
+                  {filteredTasks.map((t) => {
+                    const assignee = t.assignee ? getMember(t.assignee) : null;
+                    const statusColor =
+                      t.status === 'done'
+                        ? 'bg-emerald-400 shadow-[0_0_6px_var(--color-primary)]'
+                        : t.status === 'doing'
+                          ? 'bg-blue-400'
+                          : 'bg-zinc-600';
+                    const statusBadgeCls =
+                      t.status === 'done'
+                        ? 'bg-emerald-400/15 text-emerald-400'
+                        : t.status === 'doing'
+                          ? 'bg-blue-400/15 text-blue-400'
+                          : 'bg-zinc-800 text-zinc-400';
+                    return (
+                      <div
+                        key={t.id}
+                        class="px-4 py-3 flex items-center gap-4 bg-zinc-900 border-b border-zinc-800 last:border-b-0"
+                      >
+                        <span
+                          class={`inline-block w-2 h-2 flex-shrink-0 ${statusColor}`}
+                        />
+                        <div class="flex-1 min-w-0">
+                          <div class="font-medium text-sm text-zinc-100 overflow-hidden text-ellipsis whitespace-nowrap">
+                            {t.description}
+                          </div>
+                          <div class="text-zinc-500 text-[0.68rem] uppercase tracking-[0.05em] mt-1 flex items-center gap-2 flex-wrap opacity-70">
+                            <span
+                              class={`inline-block px-1 py-px text-[0.62rem] font-semibold ${statusBadgeCls}`}
+                            >
+                              {t.status}
+                            </span>
+                            <span class="opacity-40">|</span>
+                            <span>{t.priority}</span>
+                            {assignee && (
+                              <>
+                                <span class="opacity-40">|</span>
+                                <span>
+                                  @
+                                  {assignee.name
+                                    .toLowerCase()
+                                    .replace(/\s+/g, '_')}
+                                </span>
+                              </>
+                            )}
+                            <>
+                              <span class="opacity-40">|</span>
+                              <span class="text-zinc-500">
+                                {formatTokens(t.inputTokens)} in /{' '}
+                                {formatTokens(t.outputTokens)} out
+                              </span>
+                            </>
+                          </div>
+                        </div>
+                        {assignee && (
+                          <Avatar
+                            src={assignee.avatar}
+                            name={assignee.name}
+                            size={28}
+                          />
+                        )}
+                        <button
+                          onClick={() => setTaskModal({ task: t })}
+                          title="Edit task"
+                          class="w-[26px] h-[26px] border border-emerald-400/25 bg-emerald-400/5 text-emerald-400 flex items-center justify-center cursor-pointer flex-shrink-0 transition-colors hover:border-emerald-400/50 hover:bg-emerald-400/10"
+                        >
+                          <IconEdit />
+                        </button>
+                        {t.status === 'doing' && (
+                          <button
+                            onClick={handleStopTask}
+                            disabled={stoppingTask}
+                            title="Stop task"
+                            class={`w-[26px] h-[26px] border border-red-400/25 bg-red-400/5 text-red-400 flex items-center justify-center cursor-pointer flex-shrink-0 transition-colors hover:border-red-400/50 hover:bg-red-400/10 ${
+                              stoppingTask
+                                ? 'opacity-40 cursor-not-allowed'
+                                : ''
+                            }`}
+                          >
+                            <span class="text-[0.7rem] font-bold leading-none">
+                              ■
+                            </span>
+                          </button>
+                        )}
+                        {t.status === 'todo' && (
+                          <button
+                            onClick={() => handleStartTask(t.id)}
+                            disabled={startingTask[t.id]}
+                            title="Start task"
+                            class={`w-[26px] h-[26px] border border-blue-400/25 bg-blue-400/5 text-blue-400 flex items-center justify-center cursor-pointer flex-shrink-0 transition-colors hover:border-blue-400/50 hover:bg-blue-400/10 ${
+                              startingTask[t.id]
+                                ? 'opacity-40 cursor-not-allowed'
+                                : ''
+                            }`}
+                          >
+                            {startingTask[t.id] ? (
+                              <span class="text-[0.55rem] font-bold">...</span>
+                            ) : (
+                              <IconPlay />
+                            )}
+                          </button>
+                        )}
+                        <button
+                          onClick={() => setRemoveTaskTarget(t)}
+                          disabled={removingTask[t.id]}
+                          title="Remove task"
+                          class={`w-[26px] h-[26px] border border-red-500/20 bg-red-500/5 text-red-400 flex items-center justify-center cursor-pointer flex-shrink-0 transition-colors hover:border-red-500/40 hover:bg-red-500/10 ${
+                            removingTask[t.id]
+                              ? 'opacity-40 cursor-not-allowed'
+                              : ''
+                          }`}
+                        >
+                          {removingTask[t.id] ? (
+                            <span class="text-[0.55rem] font-bold">...</span>
+                          ) : (
+                            <IconTrash />
+                          )}
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </SectionCard>
+          </div>
+
+          {/* --- team --- */}
+          <SectionCard
+            label="TEAM MEMBERS"
+            count={`${members.length}`}
+            headerColor="text-green-400"
+            height="420px"
+          >
+            <div class="grid grid-cols-1 sm:grid-cols-2 divide-y sm:divide-y-0 sm:divide-x divide-zinc-800 -m-5">
+              {/* members */}
+              <div class="max-h-[500px] overflow-y-auto">
+                {members.length === 0 ? (
+                  <p class="text-zinc-500 text-xs opacity-50 text-center py-6">
+                    // no members loaded...
+                  </p>
+                ) : (
+                  <div class="flex flex-col">
+                    {members.map((m) => (
+                      <div
+                        key={m.id}
+                        class="px-3 py-2 flex items-center gap-3 border-b border-zinc-800 last:border-b-0 hover:bg-zinc-800/20 transition-colors"
+                      >
+                        <Avatar src={m.avatar} name={m.name} size={34} />
+                        <div class="min-w-0 flex-1">
+                          <div class="font-semibold text-sm text-zinc-100 overflow-hidden text-ellipsis whitespace-nowrap">
+                            {m.name}
+                          </div>
+                          <div class="text-zinc-500 text-[0.66rem] mt-px opacity-55 overflow-hidden text-ellipsis whitespace-nowrap">
+                            {m.role}
+                          </div>
+                        </div>
+                        <button
+                          onClick={() => setMemberModal({ member: m })}
+                          title="Edit member"
+                          class="w-7 h-7 border border-emerald-400/25 bg-emerald-400/5 text-emerald-400 flex items-center justify-center cursor-pointer flex-shrink-0 transition-colors hover:border-emerald-400/50 hover:bg-emerald-400/10"
+                        >
+                          <IconEdit />
+                        </button>
+                        <button
+                          onClick={() => setRemoveTarget(m)}
+                          disabled={removing[m.id]}
+                          title="Remove member"
+                          class={`w-7 h-7 border border-red-500/20 bg-red-500/5 text-red-400 flex items-center justify-center cursor-pointer flex-shrink-0 transition-colors hover:border-red-500/40 hover:bg-red-500/10 ${
+                            removing[m.id]
+                              ? 'opacity-40 cursor-not-allowed'
+                              : ''
+                          }`}
+                        >
+                          {removing[m.id] ? (
+                            <span class="text-[0.6rem] font-bold">...</span>
+                          ) : (
+                            <IconTrash />
+                          )}
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* roles */}
+              <div class="max-h-[500px] overflow-y-auto">
+                {roles.length === 0 ? (
+                  <p class="text-zinc-500 text-xs opacity-50 text-center py-6">
+                    // no roles available
+                  </p>
+                ) : (
+                  <div class="flex flex-col">
+                    {roles.map((r) => (
+                      <div
+                        key={r.id}
+                        class="px-3 py-2 flex items-center gap-3 border-b border-zinc-800 last:border-b-0 hover:bg-zinc-800/20 transition-colors"
+                      >
+                        <div class="min-w-0 flex-1">
+                          <div class="font-semibold text-sm text-zinc-100">
+                            <span class="mr-2">{r.icon}</span>
+                            {r.title}
+                          </div>
+                          <div class="text-zinc-500 text-[0.66rem] mt-px overflow-hidden text-ellipsis whitespace-nowrap opacity-55">
+                            {r.skills.slice(0, 3).join(' · ')}
+                          </div>
+                        </div>
+                        <button
+                          onClick={() => handlePull(r.id)}
+                          disabled={pulling[r.id]}
+                          title={`Pull ${r.title}`}
+                          class={`w-7 h-7 border border-emerald-400/30 bg-emerald-400/10 text-emerald-400 flex items-center justify-center cursor-pointer flex-shrink-0 transition-colors hover:border-emerald-400/60 hover:bg-emerald-400/20 ${
+                            pulling[r.id] ? 'opacity-40 cursor-not-allowed' : ''
+                          }`}
+                        >
+                          {pulling[r.id] ? (
+                            <span class="text-[0.6rem] font-bold">...</span>
+                          ) : (
+                            <IconPlus />
+                          )}
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </SectionCard>
+
+          {/* --- config --- */}
+          <SectionCard
+            label="CONFIGURATIONS"
+            count=""
+            headerColor="text-green-400"
+            height="420px"
+          >
+            {!config ? (
+              <p class="text-zinc-500 text-xs opacity-50 text-center py-4">
+                // loading config...
+              </p>
+            ) : (
+              <div class="flex flex-col gap-4">
+                <div>
+                  <label class="block text-zinc-500 text-[0.65rem] uppercase tracking-[0.08em] mb-1">
+                    Working Directory
+                  </label>
+                  <div class="px-3 py-2 bg-zinc-800 border border-zinc-700 text-zinc-500 text-xs font-mono overflow-hidden text-ellipsis whitespace-nowrap">
+                    {config.workingDir}
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div>
+                    <label class="block text-zinc-500 text-[0.65rem] uppercase tracking-[0.08em] mb-1">
+                      Base URL
+                    </label>
+                    <input
+                      type="text"
+                      value={configForm.baseURL || ''}
+                      onInput={(e) =>
+                        setConfigForm((p) => ({
+                          ...p,
+                          baseURL: e.target.value,
+                        }))
+                      }
+                      placeholder="https://..."
+                      class="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm outline-none focus:border-zinc-500"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-zinc-500 text-[0.65rem] uppercase tracking-[0.08em] mb-1">
+                      API Key
+                    </label>
+                    <div class="relative">
+                      <input
+                        type={showApiKey ? 'text' : 'password'}
+                        value={configForm.apiKey || ''}
+                        onInput={(e) =>
+                          setConfigForm((p) => ({
+                            ...p,
+                            apiKey: e.target.value,
+                          }))
+                        }
+                        placeholder="sk-..."
+                        class="w-full px-3 py-2 pr-9 bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm outline-none focus:border-zinc-500"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowApiKey(!showApiKey)}
+                        class="absolute right-1.5 top-1/2 -translate-y-1/2 w-[26px] h-[26px] bg-transparent text-zinc-500 flex items-center justify-center cursor-pointer hover:text-zinc-300 transition-colors"
+                      >
+                        <IconEye off={!showApiKey} />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <label class="block text-zinc-500 text-[0.65rem] uppercase tracking-[0.08em] mb-1">
+                    Model
+                  </label>
+                  {fetchingModels ? (
+                    <div class="px-3 py-2 bg-zinc-800 border border-zinc-700 text-zinc-500 text-xs italic">
+                      Loading models...
+                    </div>
+                  ) : models.length > 0 ? (
+                    <select
+                      value={configForm.model || 'auto'}
+                      onChange={(e) =>
+                        setConfigForm((p) => ({ ...p, model: e.target.value }))
+                      }
+                      class="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm outline-none focus:border-zinc-500 appearance-none"
+                    >
+                      <option value="auto" class="bg-zinc-800 text-zinc-100">
+                        auto
+                      </option>
+                      {models.map((m) => (
+                        <option
+                          key={m.id}
+                          value={m.id}
+                          class="bg-zinc-800 text-zinc-100"
+                        >
+                          {m.name}
+                        </option>
+                      ))}
+                    </select>
+                  ) : (
+                    <div class="px-3 py-2 bg-zinc-800 border border-zinc-700 text-zinc-600 text-xs italic">
+                      {configForm.model
+                        ? configForm.model
+                        : 'Enter Base URL & API Key above'}
+                    </div>
+                  )}
+                </div>
+
+                <div>
+                  <label class="block text-zinc-500 text-[0.65rem] uppercase tracking-[0.08em] mb-1">
+                    Password
+                  </label>
+                  <div class="relative">
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      value={configForm.password || ''}
+                      onInput={(e) =>
+                        setConfigForm((p) => ({
+                          ...p,
+                          password: e.target.value,
+                        }))
+                      }
+                      placeholder="App password"
+                      class="w-full px-3 py-2 pr-9 bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm outline-none focus:border-zinc-500"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      class="absolute right-1.5 top-1/2 -translate-y-1/2 w-[26px] h-[26px] bg-transparent text-zinc-500 flex items-center justify-center cursor-pointer hover:text-zinc-300 transition-colors"
+                    >
+                      <IconEye off={!showPassword} />
+                    </button>
+                  </div>
+                </div>
+
+                <div>
+                  <label class="block text-zinc-500 text-[0.65rem] uppercase tracking-[0.08em] mb-1">
+                    Project Analysis
+                  </label>
+                  <div class="flex items-center gap-2 flex-wrap">
+                    {config.projectKnowledge?.lastAnalyzed ? (
+                      <span class="text-zinc-400 text-xs">
+                        Last analyzed:{' '}
+                        {new Date(
+                          config.projectKnowledge.lastAnalyzed,
+                        ).toLocaleString()}
+                      </span>
+                    ) : (
+                      <span class="text-zinc-600 text-xs italic">
+                        Not yet analyzed
+                      </span>
+                    )}
+                  </div>
+
+                  {reanalyzing && (
+                    <div class="mt-3 space-y-2">
+                      <div class="flex items-center gap-2">
+                        <div class="h-3.5 w-3.5 border-2 border-zinc-600 border-t-emerald-400 animate-spin flex-shrink-0" />
+                        <span class="text-emerald-400 text-xs">
+                          Reanalyzing project...
+                        </span>
+                      </div>
+                      <div
+                        ref={reanalysisProgressRef}
+                        class="bg-black border border-zinc-700 p-2 max-h-32 overflow-y-auto font-mono text-[0.68rem] leading-relaxed text-zinc-400"
+                      >
+                        {reanalysisProgress.length === 0 ? (
+                          <span class="animate-pulse text-zinc-600">
+                            Waiting for output...
+                          </span>
+                        ) : (
+                          reanalysisProgress.map((line, i) => (
+                            <div key={i} class="whitespace-pre-wrap break-all">
+                              {line}
+                            </div>
+                          ))
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {reanalysisDone && (
+                    <p class="text-emerald-400 text-xs mt-2">
+                      Reanalysis complete.
+                    </p>
+                  )}
+
+                  <div class="mt-2">
+                    <ActionButton
+                      variant="secondary"
+                      onClick={handleReanalyze}
+                      disabled={reanalyzing}
+                    >
+                      <IconPlay class="w-3 h-3" />
+                      {reanalyzing ? 'Analyzing...' : 'Reanalyze Project'}
+                    </ActionButton>
+                  </div>
+                </div>
+
+                <div class="flex justify-end">
+                  <ActionButton
+                    variant="secondary"
+                    onClick={handleSaveConfig}
+                    disabled={savingConfig}
+                  >
+                    <IconCheck class="w-3.5 h-3.5" />
+                    {savingConfig ? 'Saving...' : 'Save Config'}
+                  </ActionButton>
+                </div>
+              </div>
+            )}
+          </SectionCard>
+        </div>
+
+        <ConfirmModal
+          open={!!removeTarget}
+          title="Remove Team Member"
+          description={`Are you sure you want to remove ${removeTarget?.name} (${removeTarget?.role}) from the team? This action cannot be undone.`}
+          confirmText="Remove"
+          cancelText="Cancel"
+          confirmVariant="danger"
+          loading={removeTarget ? removing[removeTarget.id] : false}
+          onConfirm={() => removeTarget && handleRemove(removeTarget.id)}
+          onCancel={() => setRemoveTarget(null)}
+        />
+
+        <ConfirmModal
+          open={!!removeTaskTarget}
+          title="Remove Task"
+          description={`Are you sure you want to remove this task? This action cannot be undone.`}
+          confirmText="Remove"
+          cancelText="Cancel"
+          confirmVariant="danger"
+          loading={removeTaskTarget ? removingTask[removeTaskTarget.id] : false}
+          onConfirm={() =>
+            removeTaskTarget && handleRemoveTask(removeTaskTarget.id)
+          }
+          onCancel={() => setRemoveTaskTarget(null)}
+        />
+
+        <TaskModal
+          key={taskModal?.task?.id || 'new'}
+          open={!!taskModal}
+          task={taskModal?.task}
+          members={members}
+          saving={saving}
+          onSave={handleSaveTask}
+          onClose={() => setTaskModal(null)}
+        />
+
+        <AutoDoModal
+          open={autoDoModal}
+          tasks={tasks.filter((t) => t.assignee && t.status !== 'done')}
+          members={members}
+          autoRunning={autoDoRunning}
+          processingId={autoDoProcessingId}
+          queue={autoDoQueue}
+          onStart={handleAutoStart}
+          onStop={handleAutoStop}
+          onClose={() => setAutoDoModal(false)}
+        />
+
+        <MemberModal
+          key={memberModal?.member?.id}
+          open={!!memberModal}
+          member={memberModal?.member}
+          saving={savingMember}
+          onSave={handleSaveMember}
+          onClose={() => setMemberModal(null)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Home;