This commit is contained in:
ZacharyZhang-NY committed 2026-04-04 12:03:50 -04:00
1 parent 66158e222e
commit 67c757f481
314 files changed
+37945 -22962

No files matched your search

@@ -0,0 +1,362 @@
import { useState } from "react";
import type {
AgentRecord,
ApprovalRecord,
CompanyRecord,
CostRecord,
DocumentRecord,
GoalRecord,
ProjectRecord,
RunRecord,
SectionId,
TaskRecord,
WorkspaceRecord,
ProfileSnapshot,
} from "@shared/types";
import {
Kanban,
ListChecks,
Target,
} from "@phosphor-icons/react";
import { ConnectorEditor } from "../../components/connectors";
import { KanbanBoard } from "../../components/dashboard";
import { EntityWorkspace } from "../../components/EntityWorkspace";
import { RunCenter } from "../../components/runs";
import {
ActivityList,
ApprovalInspector,
ApprovalList,
BudgetSummary,
CostList,
PendingReviewList,
TaskCreator,
TaskInspector,
TaskQueue,
} from "../../components/execution";
import { PolicyList } from "../../components/execution/PolicyList";
import { IncidentList } from "../../components/execution/IncidentList";
import {
GoalCreator,
GoalEditor,
GoalList,
} from "../../components/organization";
import { ActionButton, ListFrame, ListRow, Modal, Panel, StatusPill } from "../../components/ui";
import { unwrap } from "../../lib/desktop";
interface ExecutionSectionsProps {
section: SectionId;
snapshot: ProfileSnapshot;
currentCompany: CompanyRecord | null;
tasks: TaskRecord[];
runs: RunRecord[];
approvals: ApprovalRecord[];
pendingApprovals: ApprovalRecord[];
companyAgents: AgentRecord[];
companyGoals: GoalRecord[];
companyProjects: ProjectRecord[];
companyWorkspaces: WorkspaceRecord[];
companyCosts: CostRecord[];
companyDocuments: DocumentRecord[];
filteredActivity: ReturnType<ProfileSnapshot["activity"]["filter"]>;
selectedRunId: string | null;
selectedTask: TaskRecord | null;
selectedTaskId: string | null;
setSelectedTaskId: (id: string | null) => void;
selectedConnector: ProfileSnapshot["connectors"][number] | null;
setSelectedConnectorId: (id: string | null) => void;
selectedApproval: ApprovalRecord | null;
selectedApprovalId: string | null;
setSelectedApprovalId: (id: string | null) => void;
selectedGoalId: string | null;
setSelectedGoalId: (id: string | null) => void;
taskViewMode: "list" | "kanban";
setTaskViewMode: (mode: "list" | "kanban") => void;
setSection: (section: SectionId) => void;
setConsoleOpen: (value: boolean) => void;
setSelectedRunId: (id: string | null) => void;
setSelectedCommunicationEntityId: (id: string | null) => void;
refresh: () => Promise<void>;
startRun: (taskId: string) => Promise<void>;
cancelRun: (runId: string) => Promise<void>;
openPathWithFeedback: (path: string) => Promise<void>;
setError: (error: string | null) => void;
}
export function ExecutionSections({
section,
snapshot,
currentCompany,
tasks,
runs,
approvals: _approvals,
pendingApprovals,
companyAgents,
companyGoals,
companyProjects,
companyWorkspaces,
companyCosts,
companyDocuments,
filteredActivity,
selectedRunId,
selectedTask,
selectedTaskId,
setSelectedTaskId,
selectedConnector,
setSelectedConnectorId,
selectedApproval,
selectedApprovalId: _selectedApprovalId,
setSelectedApprovalId,
selectedGoalId,
setSelectedGoalId,
taskViewMode,
setTaskViewMode,
setSection,
setConsoleOpen,
setSelectedRunId,
setSelectedCommunicationEntityId,
refresh,
startRun,
cancelRun,
openPathWithFeedback,
setError: _setError,
}: ExecutionSectionsProps) {
const [costsTab, setCostsTab] = useState<"costs" | "policies" | "incidents">("costs");
const selectedGoal = companyGoals.find((g) => g.id === selectedGoalId) ?? null;
return (
<>
{section === "runs" ? (
<RunCenter
runs={runs}
tasks={tasks}
agents={companyAgents}
workspaces={companyWorkspaces}
selectedRunId={selectedRunId}
onSelectRun={(runId: string) => {
setSelectedRunId(runId);
}}
onOpenLogPath={async (path: string) => {
await openPathWithFeedback(path);
}}
onCancelRun={cancelRun}
onOpenConsole={(runId: string) => {
setSelectedRunId(runId);
setConsoleOpen(true);
}}
/>
) : null}
{section === "connectors" && selectedConnector ? (
<div className="space-y-10">
<Panel title="Connector registry">
<ListFrame>
{snapshot.connectors.map((connector) => (
<ListRow
key={connector.id}
onClick={() => setSelectedConnectorId(connector.id)}
className={`cursor-pointer transition-colors duration-100 ${
selectedConnector.id === connector.id
? "bg-accent"
: "hover:bg-muted"
}`}
>
<div className="flex items-center justify-between">
<div className="min-w-0">
<div className="text-[14px] font-medium text-foreground">{connector.label}</div>
<div className="mt-1 truncate text-[11px] uppercase tracking-[0.12em] text-muted-foreground">{connector.command}</div>
</div>
<StatusPill status={connector.status} />
</div>
</ListRow>
))}
</ListFrame>
</Panel>
<Panel title={selectedConnector.label}>
<ConnectorEditor connector={selectedConnector} onSaved={refresh} />
</Panel>
</div>
) : null}
{section === "tasks" ? (
<>
<Panel title="Goals" action={<ActionButton label="New goal" icon={Target} tone="accent" onClick={() => setSelectedGoalId("__new__")} />}>
<GoalList goals={companyGoals} agents={companyAgents} selectedGoalId={selectedGoalId} onSelect={setSelectedGoalId} />
</Panel>
<Modal open={selectedGoalId === "__new__" && section === "tasks"} title="New goal" onClose={() => setSelectedGoalId(null)}>
<GoalCreator companyId={currentCompany!.id} agents={companyAgents} goals={companyGoals} onSaved={async () => { setSelectedGoalId(null); await refresh(); }} />
</Modal>
<Modal open={!!selectedGoal && section === "tasks"} title={selectedGoal ? `Edit: ${selectedGoal.title}` : ""} onClose={() => setSelectedGoalId(null)}>
{selectedGoal ? (
<GoalEditor
key={selectedGoalId}
goal={selectedGoal}
goals={companyGoals}
agents={companyAgents}
companyId={currentCompany!.id}
onSaved={async () => { setSelectedGoalId(null); await refresh(); }}
onDeleted={async () => { setSelectedGoalId(null); await refresh(); }}
/>
) : null}
</Modal>
<Panel
title="Task queue"
action={
<div className="flex items-center gap-2">
<div className="flex rounded-lg border border-border bg-card">
<button
type="button"
onClick={() => setTaskViewMode("list")}
className={`px-2.5 py-1.5 text-[11px] font-medium transition ${taskViewMode === "list" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
>
<ListChecks size={14} />
</button>
<button
type="button"
onClick={() => setTaskViewMode("kanban")}
className={`px-2.5 py-1.5 text-[11px] font-medium transition ${taskViewMode === "kanban" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
>
<Kanban size={14} />
</button>
</div>
<ActionButton label="New task" icon={ListChecks} tone="accent" onClick={() => setSelectedTaskId("__new__")} />
</div>
}
>
{taskViewMode === "kanban" ? (
<KanbanBoard tasks={tasks} agents={companyAgents} runs={runs} onSelectTask={setSelectedTaskId} />
) : (
<TaskQueue tasks={tasks} runs={runs} onSelect={setSelectedTaskId} selectedTaskId={selectedTask?.id ?? null} />
)}
</Panel>
<Modal open={selectedTaskId === "__new__"} title="New task" onClose={() => setSelectedTaskId(null)}>
<TaskCreator companyId={currentCompany!.id} goals={companyGoals} projects={companyProjects} agents={companyAgents} workspaces={companyWorkspaces} onSaved={async () => { setSelectedTaskId(null); await refresh(); }} />
</Modal>
<Modal open={!!selectedTask} title={selectedTask?.title ?? ""} onClose={() => setSelectedTaskId(null)} width="720px">
{selectedTask ? (
<TaskInspector
task={selectedTask}
tasks={tasks}
runs={runs.filter((run) => run.taskId === selectedTask.id)}
agents={companyAgents}
goals={companyGoals}
projects={companyProjects}
workspaces={companyWorkspaces}
companyId={currentCompany!.id}
comments={(snapshot.comments ?? []).filter((comment) => comment.taskId === selectedTask.id)}
onRefresh={refresh}
onRun={startRun}
onCancelRun={cancelRun}
onCreateApproval={async () => {
const isBlocked = selectedTask.status === "blocked";
const approvalId = unwrap(await window.agentCompany.requestApproval({
companyId: currentCompany!.id,
relatedTaskId: selectedTask.id,
requestedByAgentId: selectedTask.assigneeAgentId,
type: isBlocked ? "secret_access" : "approve_ceo_strategy",
payloadSummary: isBlocked
? `Blocker: ${selectedTask.title} — needs operator assistance`
: `Review needed: ${selectedTask.title}`,
impactSummary: isBlocked
? "Agent is blocked and needs operator input (credentials, access, or decision)."
: "No automated reviewer available. Operator review required.",
}));
setSelectedApprovalId(approvalId);
await refresh();
}}
onOpenDiscussion={(taskId) => {
setSelectedTaskId(null);
setSection("communication");
setSelectedCommunicationEntityId(taskId);
}}
onDeleted={async () => { setSelectedTaskId(null); await refresh(); }}
/>
) : null}
</Modal>
</>
) : null}
{section === "approvals" ? (
<>
<Panel title="Agent reviews in progress">
<PendingReviewList tasks={tasks} agents={companyAgents} />
</Panel>
<Panel title="Pending approvals">
<ApprovalList approvals={pendingApprovals} selectedApprovalId={selectedApproval?.id ?? null} onSelect={setSelectedApprovalId} />
</Panel>
<Modal open={!!selectedApproval} title={selectedApproval?.payloadSummary ?? "Approval detail"} onClose={() => setSelectedApprovalId(null)}>
{selectedApproval ? (
<ApprovalInspector
approval={selectedApproval}
agents={companyAgents}
tasks={tasks}
documents={companyDocuments}
companyId={currentCompany!.id}
onDecide={async (state, note) => {
unwrap(await window.agentCompany.decideApproval({ companyId: currentCompany!.id, approvalId: selectedApproval.id, state, decisionNote: note ?? `${state} from desktop control surface.` }));
await refresh();
}}
onDeleted={async () => { setSelectedApprovalId(null); await refresh(); }}
/>
) : null}
</Modal>
</>
) : null}
{section === "costs" ? (
<div className="flex h-full flex-col">
<div className="flex items-center gap-1 border-b border-border px-4 pt-2">
{(["costs", "policies", "incidents"] as const).map((tab) => (
<button
key={tab}
type="button"
onClick={() => setCostsTab(tab)}
className={`rounded-t px-3 py-1.5 text-[13px] font-medium transition-colors ${
costsTab === tab
? "border-b-2 border-[color:var(--primary)] text-foreground"
: "text-muted-foreground hover:text-foreground"
}`}
>
{tab === "costs" ? "Cost Entries" : tab === "policies" ? "Policies" : "Incidents"}
</button>
))}
</div>
{costsTab === "costs" ? (
<EntityWorkspace
title="Costs"
eyebrow={undefined}
primary={
<Panel title="Recent cost entries">
<CostList costs={companyCosts} agents={companyAgents} runs={runs} />
</Panel>
}
secondary={
<Panel title="Budget posture">
<BudgetSummary agents={companyAgents} costs={companyCosts} companyId={currentCompany?.id} />
</Panel>
}
/>
) : costsTab === "policies" ? (
<PolicyList
companyId={currentCompany!.id}
agents={companyAgents.map((a) => ({ id: a.id, name: a.name }))}
projects={companyProjects.map((p) => ({ id: p.id, name: p.name }))}
/>
) : (
<IncidentList
companyId={currentCompany!.id}
agents={companyAgents.map((a) => ({ id: a.id, name: a.name }))}
projects={companyProjects.map((p) => ({ id: p.id, name: p.name }))}
/>
)}
</div>
) : null}
{section === "activity" ? (
<Panel title="Activity timeline">
<ActivityList activity={filteredActivity} />
</Panel>
) : null}
</>
);
}
@@ -0,0 +1,326 @@
import type {
AgentRecord,
BrowserActionRecord,
CompanyRecord,
DocumentRecord,
InboxItem,
CompanyMetrics,
KnowledgeEntryRecord,
MeetingRecord,
ProjectRecord,
RunRecord,
SectionId,
SocialAccountRecord,
SprintRecord,
StandupReport,
TaskRecord,
WorkspaceRecord,
ProfileSnapshot,
} from "@shared/types";
import type { AppLocale } from "@shared/locale";
import { Inbox, StandupView, PerformanceView } from "../../components/inbox";
import { Dashboard } from "../../components/dashboard";
import { EntityWorkspace } from "../../components/EntityWorkspace";
import {
SettingsPane,
ModelManagement,
WorkspaceCreator,
WorkspaceInspector,
WorkspaceList,
} from "../../components/execution";
import { SocialAccountsPanel } from "../../components/social";
import { AutomationPanel } from "../../components/automation";
import { CommunicationHub } from "../../components/communication";
import { SkillsSection } from "../../components/skills";
import { DocumentCenter, KnowledgeBaseManager, MeetingsManager, SprintManager } from "../../components/company-operations";
import { Panel } from "../../components/ui";
import { unwrap } from "../../lib/desktop";
interface OperationsSectionsProps {
section: SectionId;
snapshot: ProfileSnapshot;
currentCompany: CompanyRecord | null;
locale: AppLocale;
tasks: TaskRecord[];
runs: RunRecord[];
companyAgents: AgentRecord[];
companyProjects: ProjectRecord[];
companyWorkspaces: WorkspaceRecord[];
companyDocuments: DocumentRecord[];
companyKnowledge: KnowledgeEntryRecord[];
companyMeetings: MeetingRecord[];
companySprints: SprintRecord[];
socialAccounts: SocialAccountRecord[];
browserActions: BrowserActionRecord[];
inboxItems: InboxItem[];
companyMetrics: CompanyMetrics | null;
standupReport: StandupReport | null;
companySecrets: ProfileSnapshot["secrets"];
selectedWorkspace: WorkspaceRecord | null;
setSelectedWorkspaceId: (id: string | null) => void;
selectedCommunicationEntityId: string | null;
setSelectedCommunicationEntityId: (id: string | null) => void;
setSelectedTaskId: (id: string | null) => void;
setSelectedApprovalId: (id: string | null) => void;
setSection: (section: SectionId) => void;
navigateTo: (section: SectionId, entityId?: string) => void;
refresh: () => Promise<void>;
openPathWithFeedback: (path: string) => Promise<void>;
setError: (error: string | null) => void;
filteredActivity: ReturnType<ProfileSnapshot["activity"]["filter"]>;
companyCosts: ReturnType<ProfileSnapshot["costs"]["filter"]>;
companyGoals: ReturnType<NonNullable<ProfileSnapshot["goals"]>["filter"]>;
}
export function OperationsSections({
section,
snapshot,
currentCompany,
locale,
tasks,
runs,
companyAgents,
companyProjects,
companyWorkspaces,
companyDocuments,
companyKnowledge,
companyMeetings,
companySprints,
socialAccounts,
browserActions,
inboxItems,
companyMetrics,
standupReport,
companySecrets,
selectedWorkspace,
setSelectedWorkspaceId,
selectedCommunicationEntityId,
setSelectedCommunicationEntityId,
setSelectedTaskId,
setSelectedApprovalId,
setSection,
navigateTo,
refresh,
openPathWithFeedback,
setError,
filteredActivity,
companyCosts,
companyGoals,
}: OperationsSectionsProps) {
return (
<>
{section === "overview" ? (
<Dashboard
companyName={currentCompany?.name}
companyId={currentCompany?.id}
agents={companyAgents}
tasks={tasks}
runs={runs}
approvals={snapshot.approvals?.filter((a) => !currentCompany || a.companyId === currentCompany.id) ?? []}
goals={companyGoals}
projects={companyProjects}
activity={filteredActivity}
costs={companyCosts}
messages={snapshot.agentMessages?.filter((message) => !currentCompany || message.companyId === currentCompany.id) ?? []}
onNavigate={navigateTo}
/>
) : null}
{section === "inbox" ? (
<Inbox
items={inboxItems}
onNavigate={navigateTo}
/>
) : null}
{section === "standup" ? (
<StandupView
report={standupReport}
onNavigate={navigateTo}
/>
) : null}
{section === "performance" ? (
<PerformanceView
metrics={companyMetrics}
onNavigate={navigateTo}
/>
) : null}
{section === "social" && snapshot?.currentCompanyId && (
<SocialAccountsPanel
accounts={socialAccounts}
actions={browserActions}
agents={companyAgents.map(a => ({ id: a.id, name: a.name }))}
companyId={snapshot.currentCompanyId}
onSave={async (input) => {
try {
unwrap(await window.agentCompany.saveSocialAccount({
companyId: input.companyId,
platform: input.platform,
accountName: input.accountName,
displayName: input.displayName,
requireApproval: input.requireApproval,
profileUrl: "",
status: "login_required",
metadataJson: "{}",
}));
await refresh();
setError(null);
} catch (error) {
setError(error instanceof Error ? error.message : String(error));
}
}}
onDelete={async (id) => {
if (!snapshot?.currentCompanyId) return;
try {
unwrap(await window.agentCompany.deleteSocialAccount({ id, companyId: snapshot.currentCompanyId }));
await refresh();
setError(null);
} catch (error) {
setError(error instanceof Error ? error.message : String(error));
}
}}
onLogin={async (accountId) => {
if (!snapshot?.currentCompanyId) return;
try {
unwrap(await window.agentCompany.triggerBrowserLogin({ companyId: snapshot.currentCompanyId, socialAccountId: accountId }));
await refresh();
setError(null);
} catch (error) {
setError(error instanceof Error ? error.message : String(error));
}
}}
onOpenPath={async (path) => {
try {
unwrap(await window.agentCompany.openPath(path));
setError(null);
} catch (error) {
setError(error instanceof Error ? error.message : String(error));
}
}}
onCancelAction={async (actionId) => {
if (!snapshot?.currentCompanyId) return;
try {
unwrap(await window.agentCompany.cancelBrowserAction({ actionId, companyId: snapshot.currentCompanyId }));
await refresh();
setError(null);
} catch (error) {
setError(error instanceof Error ? error.message : String(error));
}
}}
onNavigate={(sectionName, entityId) => {
setSection(sectionName);
if (sectionName === "tasks") setSelectedTaskId(entityId);
if (sectionName === "approvals") setSelectedApprovalId(entityId);
}}
/>
)}
{section === "skills" && currentCompany ? (
<SkillsSection companyId={currentCompany.id} agents={companyAgents} onRefresh={refresh} />
) : null}
{section === "automation" && currentCompany ? (
<AutomationPanel
key={currentCompany.id}
rules={snapshot.automationRules?.filter(r => r.companyId === currentCompany.id) ?? []}
workflows={snapshot.workflows?.filter(w => w.companyId === currentCompany.id) ?? []}
companyId={currentCompany.id}
onRefresh={refresh}
/>
) : null}
{section === "communication" && currentCompany ? (
<CommunicationHub
messages={snapshot.agentMessages?.filter(m => m.companyId === currentCompany.id) ?? []}
comments={snapshot.comments?.filter((comment) => comment.companyId === currentCompany.id) ?? []}
tasks={tasks}
agents={companyAgents}
projects={companyProjects}
documents={companyDocuments}
companyId={currentCompany.id}
selectedEntityId={selectedCommunicationEntityId}
onEntityConsumed={() => setSelectedCommunicationEntityId(null)}
onNavigateToTask={(taskId) => {
setSection("tasks");
setSelectedTaskId(taskId);
}}
onRefresh={refresh}
/>
) : null}
{section === "documents" && currentCompany ? (
<DocumentCenter
companyId={currentCompany.id}
documents={companyDocuments}
agents={companyAgents}
projects={companyProjects}
goals={companyGoals}
onRefresh={refresh}
/>
) : null}
{section === "knowledge" && currentCompany ? (
<KnowledgeBaseManager companyId={currentCompany.id} entries={companyKnowledge} onRefresh={refresh} />
) : null}
{section === "meetings" && currentCompany ? (
<MeetingsManager companyId={currentCompany.id} meetings={companyMeetings} agents={companyAgents} onRefresh={refresh} />
) : null}
{section === "sprints" && currentCompany ? (
<SprintManager companyId={currentCompany.id} sprints={companySprints} onRefresh={refresh} />
) : null}
{section === "workspaces" && currentCompany ? (
<EntityWorkspace
title="Workspaces"
eyebrow={undefined}
primary={
<Panel title="Workspace registry">
<WorkspaceList
workspaces={companyWorkspaces}
projects={companyProjects}
companyId={currentCompany!.id}
selectedWorkspaceId={selectedWorkspace?.id ?? null}
onSelect={setSelectedWorkspaceId}
onOpen={openPathWithFeedback}
onDeleted={refresh}
/>
</Panel>
}
secondary={
<div className="space-y-6">
<Panel title="Workspace control center">
<WorkspaceInspector
workspace={selectedWorkspace}
agents={companyAgents}
tasks={tasks}
runs={runs}
documents={companyDocuments}
project={selectedWorkspace ? (companyProjects.find((project) => project.id === selectedWorkspace.projectId) ?? null) : null}
onOpen={openPathWithFeedback}
/>
</Panel>
<Panel title="Add workspace">
<WorkspaceCreator companyId={currentCompany!.id} projects={companyProjects} onSaved={refresh} />
</Panel>
</div>
}
/>
) : null}
{section === "settings" && currentCompany ? (
<div className="space-y-10">
<Panel title={locale === "zh" ? "配置" : "Profile and release"}>
<SettingsPane snapshot={snapshot} secrets={companySecrets} companyId={currentCompany!.id} onSaved={refresh} />
</Panel>
<Panel title={locale === "zh" ? "模型管理" : "Model Management"}>
<ModelManagement connectors={snapshot.connectors} locale={locale} onSaved={refresh} />
</Panel>
</div>
) : null}
</>
);
}
@@ -0,0 +1,175 @@
import type {
AgentRecord,
CompanyRecord,
GoalRecord,
ProjectRecord,
WorkspaceRecord,
ProfileSnapshot,
SectionId,
} from "@shared/types";
import {
Target,
UserPlus,
Kanban,
} from "@phosphor-icons/react";
import {
AgentCreator,
AgentEditor,
AgentRoster,
GoalCreator,
GoalEditor,
GoalList,
OrgChart,
ProjectCreator,
ProjectEditor,
ProjectList,
} from "../../components/organization";
import { HiringPipeline } from "../../components/hiring";
import { ActionButton, Modal, Panel } from "../../components/ui";
interface OrganizationSectionsProps {
section: SectionId;
snapshot: ProfileSnapshot;
currentCompany: CompanyRecord | null;
companyAgents: AgentRecord[];
companyGoals: GoalRecord[];
companyProjects: ProjectRecord[];
companyWorkspaces: WorkspaceRecord[];
selectedAgentId: string | null;
setSelectedAgentId: (id: string | null) => void;
selectedGoalId: string | null;
setSelectedGoalId: (id: string | null) => void;
selectedProjectId: string | null;
setSelectedProjectId: (id: string | null) => void;
setSection: (section: SectionId) => void;
refresh: () => Promise<void>;
}
export function OrganizationSections({
section,
snapshot,
currentCompany,
companyAgents,
companyGoals,
companyProjects,
companyWorkspaces,
selectedAgentId,
setSelectedAgentId,
selectedGoalId,
setSelectedGoalId,
selectedProjectId,
setSelectedProjectId,
setSection,
refresh,
}: OrganizationSectionsProps) {
const selectedAgent = companyAgents.find((a) => a.id === selectedAgentId) ?? null;
const selectedGoal = companyGoals.find((g) => g.id === selectedGoalId) ?? null;
const selectedProject = companyProjects.find((p) => p.id === selectedProjectId) ?? null;
return (
<>
{section === "agents" ? (
<>
<OrgChart agents={companyAgents} connectors={snapshot.connectors} onSelectAgent={(id) => setSelectedAgentId(id)} />
<Panel title="Agent roster" action={<ActionButton label="New hire request" icon={UserPlus} tone="accent" onClick={() => setSelectedAgentId("__new__")} />}>
<AgentRoster
agents={companyAgents}
connectors={snapshot.connectors}
workspaces={companyWorkspaces}
selectedAgentId={selectedAgentId}
onSelect={setSelectedAgentId}
/>
</Panel>
<Modal open={selectedAgentId === "__new__"} title="Request new hire" onClose={() => setSelectedAgentId(null)}>
<AgentCreator
companyId={currentCompany!.id}
connectors={snapshot.connectors}
workspaces={companyWorkspaces}
agents={companyAgents}
onSaved={async () => {
setSelectedAgentId(null);
setSection("hiring");
await refresh();
}}
/>
</Modal>
<Modal open={!!selectedAgent} title={selectedAgent ? `Edit: ${selectedAgent.name}` : ""} onClose={() => setSelectedAgentId(null)}>
{selectedAgent ? (
<AgentEditor
key={selectedAgentId}
agent={selectedAgent}
connectors={snapshot.connectors}
workspaces={companyWorkspaces}
agents={companyAgents}
companyId={currentCompany!.id}
onSaved={refresh}
onDeleted={async () => { setSelectedAgentId(null); await refresh(); }}
/>
) : null}
</Modal>
</>
) : null}
{section === "orgchart" ? (
<OrgChart agents={companyAgents} connectors={snapshot.connectors} onSelectAgent={(id) => { setSelectedAgentId(id); setSection("agents"); }} />
) : null}
{section === "hiring" && currentCompany ? (
<HiringPipeline
agents={companyAgents}
approvals={(snapshot?.approvals ?? []).filter(a => a.companyId === currentCompany!.id)}
onRefresh={refresh}
onNavigateToAgent={(id) => { setSelectedAgentId(id); setSection("agents"); }}
/>
) : null}
{section === "goals" ? (
<>
<Panel title="Goal stack" action={<ActionButton label="New goal" icon={Target} tone="accent" onClick={() => setSelectedGoalId("__new__")} />}>
<GoalList goals={companyGoals} agents={companyAgents} selectedGoalId={selectedGoalId} onSelect={setSelectedGoalId} />
</Panel>
<Modal open={selectedGoalId === "__new__"} title="New goal" onClose={() => setSelectedGoalId(null)}>
<GoalCreator companyId={currentCompany!.id} agents={companyAgents} goals={companyGoals} onSaved={async () => { setSelectedGoalId(null); await refresh(); }} />
</Modal>
<Modal open={!!selectedGoal} title={selectedGoal ? `Edit: ${selectedGoal.title}` : ""} onClose={() => setSelectedGoalId(null)}>
{selectedGoal ? (
<GoalEditor
key={selectedGoalId}
goal={selectedGoal}
goals={companyGoals}
agents={companyAgents}
companyId={currentCompany!.id}
onSaved={async () => { setSelectedGoalId(null); await refresh(); }}
onDeleted={async () => { setSelectedGoalId(null); await refresh(); }}
/>
) : null}
</Modal>
</>
) : null}
{section === "projects" ? (
<>
<Panel title="Projects" action={<ActionButton label="New project" icon={Kanban} tone="accent" onClick={() => setSelectedProjectId("__new__")} />}>
<ProjectList projects={companyProjects} goals={companyGoals} agents={companyAgents} workspaces={companyWorkspaces} selectedProjectId={selectedProjectId} onSelect={setSelectedProjectId} />
</Panel>
<Modal open={selectedProjectId === "__new__"} title="New project" onClose={() => setSelectedProjectId(null)}>
<ProjectCreator companyId={currentCompany!.id} goals={companyGoals} agents={companyAgents} onSaved={async () => { setSelectedProjectId(null); await refresh(); }} />
</Modal>
<Modal open={!!selectedProject} title={selectedProject ? `Edit: ${selectedProject.name}` : ""} onClose={() => setSelectedProjectId(null)}>
{selectedProject ? (
<ProjectEditor
key={selectedProjectId}
project={selectedProject}
goals={companyGoals}
agents={companyAgents}
companyId={currentCompany!.id}
onSaved={async () => { setSelectedProjectId(null); await refresh(); }}
onDeleted={async () => { setSelectedProjectId(null); await refresh(); }}
/>
) : null}
</Modal>
</>
) : null}
</>
);
}