Slop Docs Home
Slop · UI

Component Inventory

React 19 components built on Next.js 16 App Router. Server Components load data; Client Components subscribe to SSE for live state.

React 19 Next.js App Router Tailwind CSS 4 SSE live updates
Routes

Pages

Each Next.js App Router page is a Server Component that loads data then hands off to Client Components for interactivity.

/
src/app/page.tsx
Board

Renders <RepoView> kanban board for the selected repo.

  • listRepoOptions
  • resolveSelectedRepoId
  • loadBoardData
  • listOpenBatches
  • 8 getConfig calls
/about
src/app/about/page.tsx
About

Fully static. No data loaded. Pipeline stages table, label reference, and skills table.

/config
src/app/config/page.tsx
Config

Renders RepoListForm, GitHubTokenForm, ConfigForm, WipeDatabase.

  • listRepos
  • 19 getConfig calls
  • resolveSelectedRepoId
/docs
src/app/docs/page.tsx
Docs

Renders DocsPageView (client, markdown editor).

  • resolveSelectedRepoId
/issues
src/app/issues/page.tsx
Issues

Renders IssuesView (client, full-featured issue management).

  • resolveSelectedRepoId
  • listInternalIssues
  • listBatchesWithIssues
  • loadBoardData
/workers
src/app/workers/page.tsx
Workers

Renders WorkersLive in CostSettingsProvider.

  • listRepoOptions
  • listWorkers
  • 9 getConfig calls
  • getLatestResourceSample
/workers/[id]
src/app/workers/[id]/page.tsx
Worker Report

Renders WorkerReport in CostSettingsProvider.

  • loadWorkerReport
  • 5 getConfig calls
/agents
src/app/agents/page.tsx
Agents

Renders AgentsLive.

  • loadAgentRows
  • discoverSkills
  • listRepos
  • resolveSelectedRepoId
/agents/[id]
src/app/agents/[id]/page.tsx
Agent Detail

Metadata card, optional report pre, AgentLog, optional RunKillButton.

  • getRun
Foundation

UI Primitives

Reusable atoms in src/app/_components/ui/. Build all feature UI from these to stay consistent with the design system.

Component File Key Props Description
Badge badge.tsx tone: BadgeTone, color?: string Tinted pill. Uses color-mix for tinted background/text.
Button button.tsx variant, size, busy?, busyLabel?, leftIcon?, rightIcon?, iconOnly? Shows spinner when busy. Exports buttonClasses() for anchor styling.
Card card.tsx children Simple surface wrapper with padding/border.
ConfirmationDialog confirmation-dialog.tsx title, description, onConfirm, onCancel, open Modal for destructive confirmations.
EmptyState empty-state.tsx title, description?, action? Centered empty with optional action slot.
ErrorState error-state.tsx message? Error display for failed data loads.
InlineError inline-error.tsx error, title?, truncate? Inline error with tooltip on truncation.
INPUT_CLASS input-class.ts (exported CSS string) Apply to inputs to match design system.
LINK_CLASS link-class.ts (exported CSS string) For anchor styling.
Markdown markdown.tsx children: string Renders markdown to HTML.
Menu / MenuItem menu.tsx Menu: label, children; MenuItem: onClick, separated? Dropdown. separated adds visual divider.
PageHeader page-header.tsx title, subtitle?, actions? Page-level title/subtitle/actions header.
PageSectionHeading page-section-heading.tsx title, count? Section heading with numeric count badge.
SectionHeading section-heading.tsx title Simpler section heading.
Skeleton skeleton.tsx className? Animated loading placeholder.
Spinner spinner.tsx size?: sm/md/lg Inline loading spinner.
Tooltip tooltip.tsx content, children Hover tooltip wrapper.
Live Execution

Workers

Components in src/app/_components/worker/ that drive the worker list page and individual row controls.

src/app/_components/worker/workers-live.tsx
WorkersLive

Top-level Workers page. Uses useWorkerEvents for live SSE. Shows resource/token/cost cards, search, "Clear finished" with ConfirmationDialog. Splits into "In progress" / "Done" FoldableSections.

src/app/_components/worker/worker-table.tsx
WorkerTable

Renders worker rows. Terminal rows: elapsed, error, Report link, Show logs. Active rows: LiveDuration, 3 ToggleModePill controls, WorkerToggleButton, RestartButton, WorkerMergeButton, CancelButton, WorkerOverridesPopover, OverrideToMergedButton. LogPanel on expand.

src/app/_components/worker/overrides-popover.tsx
OverrideControls / OverridesPopover

Gear popover with nullable override selects: Model (grouped by harness), Effort, Implement mode, Auto-merge/review/address, Accepted review level.

src/app/_components/worker/worker-overrides-popover.tsx
WorkerOverridesPopover

Wraps OverridesPopover with the setWorkerOverrides Server Action.

src/app/_components/worker/override-to-merged-button.tsx
OverrideToMergedButton

Forces a worker to merged, bypassing normal flow.

src/app/_components/worker/live-duration.tsx
LiveDuration

Ticking elapsed time via setInterval. Exports formatElapsedSeconds().

src/app/_components/worker/cancel-button.tsx
CancelButton

Calls cancelWorker action to cancel an in-progress worker.

src/app/_components/worker/restart-button.tsx
RestartButton

Calls restartWorker action to restart a worker from a failed or stalled state.

src/app/_components/worker/retry-button.tsx
RetryButton

Retries failed workers on kanban cards.

src/app/_components/worker/worker-merge-button.tsx
WorkerMergeButton

Manual merge. Disabled/warns when baseCiRed. Uses useActionState.

src/app/_components/worker/worker-toggle-button.tsx
WorkerToggleButton

Pause/resume based on current worker status.

src/app/_components/worker/skill-launcher.tsx
SkillLauncher

Launches a skill run in the worker's repo context.

src/app/_components/worker/worker-list-skeleton.tsx
WorkerListSkeleton

Loading skeleton for the worker list while data is being fetched.

Board

Repo / Kanban

Components in src/app/_components/repo/ (and a few in src/app/) that compose the issue board and PR section.

src/app/_components/repo/repo-view.tsx
RepoView

Top-level board. Uses useRepoSnapshot + useRepoSnapshotOverrides. Renders: filter bar (search, stage filter, points filter, harness filter, BatchSelector, CI badge, SyncBranchButton, PausePollingButton), AutomationChip popover, BaseCiStatus, IssuesBoard, PullRequestsSection, WorktreesSection.

src/app/_components/repo/repo-kanban.tsx
IssuesBoard (RepoKanban)

Provides OverridesContext and StartedIssuesContext. Monitors SSE connection health (reconnection indicator). Renders KanbanColumnView for Backlog/Ready, InProgressColumn, MergedColumn.

src/app/_components/repo/kanban-column-view.tsx
KanbanColumnView

Column shell with sticky header and drop target. Contains ColumnBody which renders a list or empty state.

src/app/_components/repo/issue-card.tsx
IssueCard

Draggable card. Contains DecisionBadge, StateBadge labels, CloseIssueButton, IssueConfigPopover, Refine/Review buttons, WorkIssueButton, StoryPointsInput.

src/app/_components/repo/story-points-input.tsx
StoryPointsInput

Valid values: 1/2/3/5/8/13/21. Suggest button opens HarnessPicker, calls suggestIssuePoints. Deduplicates in-flight with module-level pendingSuggestions Map.

src/app/_components/repo/issue-config-popover.tsx
IssueConfigPopover

Pre-claim gear popover. Wraps OverridesPopover with setIssueConfig action. Back-syncs story points on model/effort change. Exports syncedStoryPoints().

src/app/_components/repo/use-repo-snapshot.ts
useRepoSnapshot

Polls /api/repo-state, subscribes to repo.updated SSE events to keep the board fresh.

src/app/_components/repo/use-repo-snapshot-overrides.ts
useRepoSnapshotOverrides

Wraps useRepoSnapshot with optimistic drag-and-drop state for instant UI feedback.

src/app/in-progress-column.tsx
InProgressColumn

5th kanban column. Uses useWorkerEvents and filters to workers in in_progress. Shows PauseResumeButton, StopButton, ticking elapsed time.

src/app/merged-column.tsx
MergedColumn

6th column, static (no SSE). Displays merged worker cards from initial server data.

Action Button Components

Small focused action buttons used throughout the board. Each calls a single Server Action.

Component Key Props Action
AddressPrButton workerId, repoId Triggers AI address-review pass on open PR.
BaseCiFixButton repoId Kicks off a base-branch CI fix worker.
CloseIssueButton issueNumber, repoId Closes the GitHub issue via Server Action.
ClosePrButton prNumber, repoId Closes the open pull request.
MergePrButton prNumber, repoId Merges the pull request (admin bypass).
PausePollingButton repoId, paused Toggles worker poll loop for the repo.
ReviewPrButton workerId, repoId Triggers AI review pass on open PR.
RepoSwitcher repos, selectedId Select that pushes ?repo=<id> to the URL.
SyncBranchButton repoId Syncs default branch from remote.
WorkIssueButton issueNumber, repoId Claims issue and starts a worker.
Analytics

Report

Components in src/app/_components/report/ for run reports, cost/token stats, and resource usage.

Component Description
WorkerReport Full run report page. Summary, cost/token stats, log, and report body.
WorkerReportSkeleton Loading skeleton while the report data is fetching.
DetailLogPanel Scrollable log for completed runs. Level-based color coding.
LiveLogPanel Live-updating log. Subscribes to SSE for real-time output.
CostSettings Per-model cost rate config. USD/BRL rate and coefficients.
TotalCostCard Stat card for total USD cost. noConversion prop for BRL display.
TotalTokensCard Stat card for net token count across the run.
UsageCards (CpuCard, MemoryCard) Resource usage: CPU% and RSS bytes. scope prop toggles live vs. summary view.
ReportIssueButton File an internal issue from a run report page.
Automation

Agents

Components in src/app/_components/agents/ for browsing, launching, and monitoring standalone agent runs.

src/app/_components/agents/agents-live.tsx
AgentsLive

Agents page. Uses useWorkerEvents for SSE; refetches /api/agents on events. Shows metrics (running count, completed, total cost, avg duration), search, AgentTable in FoldableSections, "Run skill" opens RunSkillModal.

src/app/_components/agents/agent-table.tsx
AgentTable

Table with: Session link, Status badge, Repo (multi-repo), Model/Effort, Cost, Started, Duration, toggle logs/report, Kill button. Expandable log/report rows.

src/app/_components/agents/agent-log.tsx
AgentLog

Fetches initial log then subscribes to live SSE for the run, streaming output as it arrives.

src/app/_components/agents/run-kill-button.tsx
RunKillButton

Kills a standalone agent run (no workerId). Only shown for non-worker runs.

src/app/_components/agents/run-skill-modal.tsx
RunSkillModal

Filterable skill list. Calls startSkillRun on selection to dispatch the chosen skill.

Cross-cutting

Shared / Other

Utility components and client feature modules that do not belong to a single section of the app.

src/components/foldable-section.tsx
FoldableSection

details/summary collapsible. storageKey persists open/closed state to localStorage. CSS triangle indicator.

src/components/relative-time.tsx
RelativeTime

time element with "just now", "3 min ago", etc. Defers text until after mount to avoid SSR hydration mismatch.

src/app/_components/log-panel.tsx
LogPanel

Fetches initial log and appends live events via subscribe. Auto-scrolls. role="log" aria-live="polite". Color-codes output by log level.

src/app/_components/state-badge.tsx
StateBadge / StatusBadge

Maps WorkerStatus to { label, tone, icon } via STATE_META. reconcileStatus() resolves the display variant.

src/app/_components/booting-screen.tsx
BootingScreen

Polls /api/health every second; calls router.refresh() when ready: true is returned.

src/app/_components/guard-banner.tsx
GuardBanner

Warning banner shown when branch protection is not enabled on the repo.

src/app/batch-manager.tsx
BatchManager

Modal for batch create/archive/toggle. Calls createBatch, archiveBatch, addIssueToBatch, removeIssueFromBatch.

src/app/batch-selector.tsx
BatchSelector

Select dropdown that pushes ?batch=<id> to the URL to filter the board by batch.

src/app/issues/issues-view.tsx
IssuesView

Full-featured issues client component with 30+ tests. Loads from /api/internal-issues, seeds labels, search/filter, per-row Refine/Review, create form with LabelPicker (Cmd+Enter), BatchManager, ImportStories.

Architecture

SSE Integration Pattern

useWorkerEvents is the central SSE hook. It manages the EventSource lifecycle, reconnection, and state reconciliation for all live-updating surfaces.

How it works

Opens an EventSource to /api/events. On disconnect, uses exponential-backoff reconnect (1s to 30s). Fetches a fresh snapshot on reconnect to patch any events missed during downtime. All state mutations go through applyEvent() — a pure reducer — so state transitions are predictable and testable.

Event types handled

  • worker.claimedprepend new worker to list
  • worker.state_changedupdate status in place
  • worker.failedmark worker as failed
  • worker.completedmark worker as complete
  • worker.github_state_changedupdate PR/issue state
  • waiting_merge → mergingtrigger fresh snapshot re-fetch
  • cancel from waiting_mergetrigger fresh snapshot re-fetch
  • reporting → merged/failedtrigger fresh snapshot re-fetch

subscribe(fn) listener registration

subscribe(fn) registers a listener for WorkerEvent | RunEvent events. Used by WorkerTable, LogPanel, and AgentsLive to receive scoped events without managing their own EventSource connection.

Initial render strategy: Initial page load uses server-rendered initialWorkers for non-blank first paint. After mount, all mutations come exclusively from applyEvent() or fresh snapshots on reconnect. The client never re-fetches during normal operation.