refactor(01-02): decompose execution.tsx and automation.tsx into focused sub-components

- execution.tsx (1749 lines) -> 16 focused files under 300 lines each:
  TaskQueue, TaskInspector, TaskCreator, TaskComments, ApprovalList,
  ApprovalInspector, ActivityList, CostList, BudgetSummary, WorkspaceList,
  WorkspaceInspector, WorkspaceCreator, SecretCreator, SettingsPane,
  PendingReviewList, execution-utils
- automation.tsx (1697 lines) -> 6 focused files under 300 lines each:
  AutomationPanel, RuleCard, RuleEditor, WorkflowList, WorkflowEditor,
  automation-config
- Both original files replaced with backward-compatible re-exports
- All sub-components under 300 lines, TypeScript compilation passes
This commit is contained in:
ZacharyZhang-NY committed 2026-03-22 02:01:33 -04:00
1 parent 586593f0e4
commit 7ff8dc70a2
24 files changed
+1075 -3446

No files matched your search

@@ -0,0 +1,27 @@
import { Robot } from "@phosphor-icons/react"
import type { AgentRecord, TaskRecord } from "@shared/types"
import { useT } from "../../i18n"
import { EmptyState, ListFrame } from "../ui"
export function PendingReviewList({ tasks, agents }: { tasks: TaskRecord[]; agents: AgentRecord[] }) {
const t = useT()
const reviewTasks = tasks.filter((tk) => tk.status === "in_review")
if (reviewTasks.length === 0) return <EmptyState title={t("exec.noReviewsInProgress")} />
return (
<ListFrame>
{reviewTasks.map((task) => {
const assignee = agents.find((a) => a.id === task.assigneeAgentId) ?? null
const reviewer = assignee?.reportsTo ? (agents.find((a) => a.id === assignee.reportsTo) ?? null) : null
return (
<div key={task.id} className="flex items-start gap-3 border-b border-[color:var(--line)] px-5 py-4 last:border-b-0">
<Robot size={16} weight="fill" className="mt-0.5 shrink-0 text-blue-500" />
<div className="min-w-0 flex-1">
<div className="text-[13px] font-medium text-[color:var(--text)] truncate">{task.title}</div>
<div className="mt-0.5 text-[12px] text-[color:var(--muted)]">{assignee ? assignee.name : "Unassigned"}{reviewer ? <> &rarr; reviewed by <span className="text-[color:var(--muted-strong)]">{reviewer.name}{reviewer.title ? ` (${reviewer.title})` : ""}</span></> : " · awaiting review"}</div>
</div>
</div>
)
})}
</ListFrame>
)
}