import { useState, useEffect, useRef, useCallback } from "react"; /* ============================================================ Chelsea-Labs バーチャル市民開発ラボ SHEET 8 のエージェント編成(P1〜P5)+ 主役のメカ設計者(人間)が 「課題 → 3点セット → 壁打ち → プロトタイプ → 自走」を回す 市民開発の一日シミュレーター ============================================================ */ const AGENTS = [ { id: "member", name: "設計 学", role: "メカ設計者(市民開発者)", kind: "人間", color: "#E0563C", desk: { x: 20, y: 40, z: 0.9 } }, { id: "pm", name: "仕切 舞", role: "P1 進行管理・人格", kind: "AI", color: "#D94F1E", desk: { x: 50, y: 30, z: 0.8 } }, { id: "kabe", name: "壁打 直人", role: "P2 壁打ち・一次対応", kind: "AI", color: "#C9962B", desk: { x: 32, y: 62, z: 1.0 } }, { id: "yoken", name: "要件 定子", role: "P3 要件定義(3点セット)", kind: "AI", color: "#2B8A78", desk: { x: 58, y: 64, z: 1.0 } }, { id: "review", name: "目利 厳", role: "P4 品質レビュー", kind: "AI", color: "#6B4A9E", desk: { x: 78, y: 52, z: 0.93 } }, { id: "watch", name: "巡回 守", role: "P5 進捗ウォッチ", kind: "AI", color: "#3D6EA8", desk: { x: 85, y: 32, z: 0.82 } }, ]; const DOOR = { x: -8, y: 78 }; const IDLE_QUIPS = { member: ["この作業、絶対アプリにできる", "Gitって図面の版管理と同じか", "次は自分で直してみたい"], pm: ["ゴールは納品じゃなく自走", "定時とは、守るための概念", "今日の采配、冴えてる"], kabe: ["エラーは成長の入口", "比喩は治具。伝わるまで調整", "質問、歓迎です"], yoken: ["スコープは削るほど輝く", "『あれもこれも』は敵", "要確認事項が3つ…"], review: ["良い点から言うのが流儀", "指摘は3件まで。それが優しさ", "安全第一、学び第二"], watch: ["停滞は責めない。拾うだけ", "needs-human 見逃しません", "今週も巡回日和"], }; const buildScenario = (request) => [ { d: 600, phase: "commute", log: { who: "受付", icon: "🚪", text: "おはようございます。市民開発ラボ、開所します" } }, { d: 2800, log: { who: "設計者", icon: "💬", text: `設計さんが Issue を投稿:「${request}」` }, focus: "member", fly: { from: "member", to: "pm", icon: "💬" }, agent: { member: { status: "課題を投稿", bubble: "この困りごと、何とかしたい!", working: true } } }, { d: 2400, log: { who: "P1", icon: "🗂", text: "課題を受領。市民開発フローに沿ってタスク分解" }, focus: "pm", board: [ { label: "ヒアリング整理・要件定義", owner: "P3", state: "着手待ち" }, { label: "3点セットHTML作成", owner: "P3", state: "着手待ち" }, { label: "本人の壁打ち・修正", owner: "設計さん", state: "待機" }, { label: "品質レビュー", owner: "P4", state: "待機" }, { label: "プロトタイプ実装", owner: "伴走担当", state: "待機" }, ], fly: { from: "pm", to: "yoken", icon: "📋" }, agent: { pm: { status: "進行管理中", bubble: "定子さん、3点セットを!", working: false }, member: { status: "壁打ち準備中", bubble: null, working: false }, } }, { d: 2200, log: { who: "P3", icon: "✍️", text: "ヒアリングメモを構造化し、執筆開始" }, focus: "yoken", agent: { yoken: { status: "執筆中", bubble: "考え中…", working: true } }, boardState: { 0: "作業中" } }, { d: 2600, log: { who: "成果物", icon: "📦", text: "requirements.html / architecture.html / mockup.html 生成" }, deliver: "requirements.html", flyDoc: "yoken", boardState: { 0: "完了", 1: "完了", 2: "壁打ち中" }, agent: { yoken: { status: "壁打ち待ち", bubble: "3点セット、できました!", working: false } } }, { d: 1200, deliver: "architecture.html", flyDoc: "yoken" }, { d: 1200, deliver: "mockup.html", flyDoc: "yoken" }, { d: 2200, log: { who: "設計者", icon: "🗣", text: "設計さんが壁打ち開始:「この画面、現場の流れと違うかも」" }, focus: "member", fly: { from: "member", to: "kabe", icon: "❓" }, agent: { member: { status: "壁打ち中", bubble: "工程の順番、現場と違うかも", working: true }, kabe: { status: "一次対応中", bubble: "考え中…", working: true }, } }, { d: 2800, log: { who: "P2", icon: "💡", text: "意図を言語化して修正案を提示(治具の比喩で説明)" }, fly: { from: "kabe", to: "yoken", icon: "📝" }, agent: { kabe: { status: "修正案を提示", bubble: "検査工程は最後に回しましょう", working: true }, yoken: { status: "修正対応中", bubble: "考え中…", working: true }, } }, { d: 2400, log: { who: "設計者", icon: "✅", text: "設計さん「これなら現場で使える!」— 方向性決定" }, focus: "member", boardState: { 2: "完了", 3: "レビュー中" }, fly: { from: "yoken", to: "review", icon: "📄" }, agent: { member: { status: "方向性を承認", bubble: "これなら現場で使える!", working: false }, review: { status: "レビュー中", bubble: "考え中…", working: true }, } }, { d: 2600, log: { who: "P4", icon: "🔍", text: "安全・要件一致・学びの観点でレビュー → 承認" }, boardState: { 3: "完了", 4: "実装中" }, agent: { review: { status: "承認済み", bubble: "安全性クリア。良い要件です", working: false }, yoken: { status: "業務完了", bubble: "達成感…!", working: false }, } }, { d: 2600, log: { who: "伴走", icon: "🚀", text: "プロトタイプを社内ドメインへ自動デプロイ" }, deliver: "prototype v0.1(社内URL)", flyDoc: "pm", boardState: { 4: "完了" }, focus: "pm", agent: { pm: { status: "デプロイ確認中", bubble: "社内URL、公開しました", working: true } } }, { d: 2600, log: { who: "設計者", icon: "🎓", text: "設計さんが自分で軽微修正をPR → マージ成功(自走の一歩!)" }, focus: "member", agent: { member: { status: "自走スタート!", bubble: "自分で直せた…!", working: false }, kabe: { status: "見守り中", bubble: "その調子です!", working: false }, } }, { d: 2200, log: { who: "P5", icon: "📋", text: "週次レポート起票: 自走事例1件・needs-human 0件" }, focus: "watch", agent: { watch: { status: "レポート起票中", bubble: "考え中…", working: true } } }, { d: 2200, log: { who: "P1", icon: "🎉", text: "市民開発、1案件完走。全員定時で退勤!" }, confetti: true, focus: null, agent: { pm: { status: "完走!", bubble: "みんな、おつかれさま!", working: false }, member: { status: "本日の主役", bubble: "次の改善アイデアもある!", working: false }, watch: { status: "業務完了", bubble: "また来週", working: false }, } }, { d: 3200, phase: "leave", log: { who: "受付", icon: "🌙", text: "本日のラボは閉所しました" }, night: true }, ]; const initialAgents = () => AGENTS.reduce((acc, a) => { acc[a.id] = { status: "未出勤", bubble: null, working: false }; return acc; }, {}); let uid = 0; export default function VirtualCitizenDevLab() { const [agentState, setAgentState] = useState(initialAgents); const [phase, setPhase] = useState("off"); const [logs, setLogs] = useState([]); const [board, setBoard] = useState([]); const [deliverables, setDeliverables] = useState([]); const [running, setRunning] = useState(false); const [done, setDone] = useState(false); const [night, setNight] = useState(false); const [focus, setFocus] = useState(null); const [flights, setFlights] = useState([]); const [confetti, setConfetti] = useState([]); const [request, setRequest] = useState("検査記録の転記作業をアプリ化したい"); const [quipTick, setQuipTick] = useState(0); const timers = useRef([]); const clearTimers = () => { timers.current.forEach(clearTimeout); timers.current = []; }; useEffect(() => () => clearTimers(), []); useEffect(() => { const iv = setInterval(() => setQuipTick((t) => t + 1), 4200); return () => clearInterval(iv); }, []); const pushLog = (e) => setLogs((p) => [...p.slice(-6), { ...e, id: ++uid }]); const spawnFlight = (fromId, toMonitor, icon) => { const from = AGENTS.find((a) => a.id === fromId).desk; const to = toMonitor === true ? { x: 90, y: 22 } : AGENTS.find((a) => a.id === toMonitor).desk; const id = ++uid; setFlights((p) => [...p, { id, from, to, icon }]); const t = setTimeout(() => setFlights((p) => p.filter((f) => f.id !== id)), 1400); timers.current.push(t); }; const fireConfetti = () => { const pieces = Array.from({ length: 46 }, (_, i) => ({ id: ++uid, x: 20 + Math.random() * 60, delay: Math.random() * 0.8, dur: 2.2 + Math.random() * 1.4, color: ["#D94F1E", "#2B8A78", "#C9962B", "#6B4A9E", "#3D6EA8"][i % 5], rot: Math.random() * 360, drift: (Math.random() - 0.5) * 120, })); setConfetti(pieces); const t = setTimeout(() => setConfetti([]), 4600); timers.current.push(t); }; const start = useCallback(() => { clearTimers(); setAgentState(initialAgents()); setLogs([]); setBoard([]); setDeliverables([]); setDone(false); setNight(false); setFocus(null); setFlights([]); setConfetti([]); setRunning(true); setPhase("off"); const steps = buildScenario(request.trim() || "現場の困りごとをアプリ化したい"); let acc = 0; steps.forEach((step) => { acc += step.d; const t = setTimeout(() => { if (step.phase === "commute") { setPhase("commute"); AGENTS.forEach((a, i) => { const tt = setTimeout(() => { setAgentState((prev) => ({ ...prev, [a.id]: { ...prev[a.id], status: "着席", bubble: a.kind === "人間" ? "今日こそ形にするぞ" : "おはようございます" }, })); }, 400 + i * 300); timers.current.push(tt); }); const tw = setTimeout(() => setPhase("work"), 400 + AGENTS.length * 300 + 900); timers.current.push(tw); } if (step.phase === "leave") setPhase("leave"); if (step.night) setNight(true); if (step.log) pushLog(step.log); if (step.board) setBoard(step.board); if (step.boardState) setBoard((prev) => prev.map((b, i) => step.boardState[i] !== undefined ? { ...b, state: step.boardState[i] } : b)); if (step.deliver) { const tt = setTimeout(() => setDeliverables((p) => [...p, step.deliver]), 900); timers.current.push(tt); } if (step.flyDoc) spawnFlight(step.flyDoc, true, "📄"); if (step.fly) spawnFlight(step.fly.from, step.fly.to, step.fly.icon); if (step.focus !== undefined) setFocus(step.focus); if (step.confetti) fireConfetti(); if (step.agent) setAgentState((prev) => { const next = { ...prev }; Object.entries(step.agent).forEach(([id, patch]) => { next[id] = { ...next[id], ...patch }; }); return next; }); if (step.phase === "leave") { setDone(true); setRunning(false); } }, acc); timers.current.push(t); }); }, [request]); const reset = () => { clearTimers(); setAgentState(initialAgents()); setPhase("off"); setLogs([]); setBoard([]); setDeliverables([]); setRunning(false); setDone(false); setNight(false); setFocus(null); setFlights([]); setConfetti([]); }; const bubbleFor = (a) => { const st = agentState[a.id]; if (st.bubble) return st.bubble; const quips = IDLE_QUIPS[a.id]; return quips[(quipTick + AGENTS.findIndex((x) => x.id === a.id)) % quips.length]; }; const atDesk = phase === "work" || phase === "commute"; const leaving = phase === "leave"; const stateColor = (s) => s.includes("完了") || s.includes("完走") || s === "着席" || s.includes("自走") || s.includes("主役") || s.includes("承認") ? "#2E7D4F" : s === "未出勤" || s === "待機" || s === "着手待ち" || s.includes("見守り") ? "#8FA0AE" : "#D94F1E"; return (
{/* ===== ヘッダー ===== */}
🛠

Chelsea-Labs バーチャル市民開発ラボ

CITIZEN DEV × P1–P5 AGENTS — LIVE SIMULATION
{running ? "稼働中" : done ? "本日のラボ終了" : "待機中"}
{/* ===== オフィス ===== */}
市民開発ラボ — CHELSEA-LABS
現場が主役 AIは伴走
目指すは自走
🪴
🌿
{/* 業務ボード */}

CITIZEN DEV — 案件ボード

{board.length === 0 ? (
案件はまだありません。下の欄から現場の困りごとを投稿してください。
) : ( board.map((b, i) => (
▸ {b.label} {b.owner} {b.state}
)) )}
{/* メンバーとエージェント */} {AGENTS.map((a, idx) => { const st = agentState[a.id]; const seated = atDesk || done; const px = leaving ? DOOR.x : seated ? a.desk.x : DOOR.x; const py = leaving ? DOOR.y : seated ? a.desk.y : DOOR.y; const walking = phase === "commute" || leaving; const isThink = st.bubble === "考え中…"; const happy = (st.bubble || "").includes("自分で直せた") || (st.bubble || "").includes("おつかれ") || (st.bubble || "").includes("達成感"); return (
{(seated || leaving) && st.bubble !== null && (
{isThink ? 🤔 考え中… : st.bubble}
)} {seated && st.bubble === null && phase === "work" && (
{bubbleFor(a)}
)}
{a.kind === "人間" && }
{st.working && (<>)}
{seated && !leaving && (<>)}
{a.name} {a.kind}
{a.role}
); })} {/* 飛ぶ書類 */} {flights.map((f) => (
{f.icon}
))}
{/* メンバー・エージェント一覧 */} {/* 成果物モニター */} {/* 活動ログ */}
{logs.map((l) => (
{l.icon} {l.who} {l.text}
))}
{/* 紙吹雪 */} {confetti.map((c) => ( ))}
{/* ===== 操作パネル ===== */}
setRequest(e.target.value)} placeholder="現場の困りごとを入力(例: 点検記録の転記をなくしたい)" disabled={running} /> 課題 → 3点セット → 壁打ち → プロトタイプ → 自走 の一日を再生します
); }