72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
 
|
import { STATUS_COLORS, STATUS_LABELS } from "@/lib/constants";
|
|||
|
|
import { useOfficeStore } from "@/store/office-store";
|
|||
|
|
import { getDirector, setMode } from "@/sim/runtime";
|
|||
|
|
import type { AgentStatus } from "@/lib/types";
|
|||
|
|
|
|||
|
|
const LEGEND: AgentStatus[] = ["idle", "thinking", "tool_calling", "speaking", "spawning", "error"];
|
|||
|
|
|
|||
|
|
export function HeaderBar() {
|
|||
|
|
const paused = useOfficeStore((s) => s.paused);
|
|||
|
|
const setPaused = useOfficeStore((s) => s.setPaused);
|
|||
|
|
const speed = useOfficeStore((s) => s.speed);
|
|||
|
|
const setSpeed = useOfficeStore((s) => s.setSpeed);
|
|||
|
|
const theme = useOfficeStore((s) => s.theme);
|
|||
|
|
const setTheme = useOfficeStore((s) => s.setTheme);
|
|||
|
|
const mode = useOfficeStore((s) => s.mode);
|
|||
|
|
const agentCount = useOfficeStore((s) => s.agents.size);
|
|||
|
|
|
|||
|
|
const isLive = mode === "live";
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<header className="header">
|
|||
|
|
<div className="header-brand">
|
|||
|
|
<span className="header-mark">✳</span>
|
|||
|
|
<div>
|
|||
|
|
<h1>Claude Office</h1>
|
|||
|
|
<p>multi-agent 虛擬辦公室 · {isLive ? "實況模式" : "模擬模式"}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="header-legend">
|
|||
|
|
{LEGEND.map((s) => (
|
|||
|
|
<span key={s} className="legend-chip">
|
|||
|
|
<span className="legend-dot" style={{ backgroundColor: STATUS_COLORS[s] }} />
|
|||
|
|
{STATUS_LABELS[s]}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="header-controls">
|
|||
|
|
<span className="agent-count">{agentCount} agents</span>
|
|||
|
|
<button
|
|||
|
|
className={`btn mode-btn ${isLive ? "live-on" : ""}`}
|
|||
|
|
onClick={() => setMode(isLive ? "sim" : "live")}
|
|||
|
|
title={isLive ? "切回劇本模擬" : "連上真實 Claude Code 活動 (需 npm run watch)"}
|
|||
|
|
>
|
|||
|
|
{isLive ? "● LIVE" : "▶ 模擬"}
|
|||
|
|
</button>
|
|||
|
|
{!isLive && (
|
|||
|
|
<>
|
|||
|
|
<button className="btn" onClick={() => getDirector().hireAgent()} title="招募一位 agent">
|
|||
|
|
+ Agent
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="btn"
|
|||
|
|
onClick={() => setSpeed(speed >= 4 ? 1 : speed * 2)}
|
|||
|
|
title="模擬速度"
|
|||
|
|
>
|
|||
|
|
{speed}×
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<button className="btn" onClick={() => setPaused(!paused)} title={paused ? "繼續" : "暫停"}>
|
|||
|
|
{paused ? "▶" : "⏸"}
|
|||
|
|
</button>
|
|||
|
|
<button className="btn" onClick={() => setTheme(theme === "light" ? "dark" : "light")} title="切換主題">
|
|||
|
|
{theme === "light" ? "🌙" : "☀️"}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
);
|
|||
|
|
}
|