# Setup Consolidation

How Builder and Crew setup views were consolidated into shared Identity,
Integrations, and Playbooks surfaces. Companion to `ui-design-guidelines.md`.

## Builder Setup

`WorkflowCapabilitiesPanel` serves three sections, in toolbar order
Identity → Integrations → Playbooks:

| View | Tabs | Contents |
|---|---|---|
| Identity | General, Secrets, File access, Models | `WorkflowIdentityPanel` (name, icon, soul, GitHub-style delete), `SecretSelectionSection`, `WorkflowFolderAccessView`, `WorkflowLLMConfigurationPanel` |
| Integrations | MCPs, Skills, Slack, WhatsApp, Gmail | Tool selection + `ConnectorsBrowser`, `SkillsManagerPanel`, `WorkflowBotsPanel` pinned per channel via `fixedChannel`, `WorkflowEmailPanel` |
| Playbooks | — | `PlaybooksPanel` |

The standalone Bots / Gmail / Secrets / Folders / LLM views were retired;
the UI-control contract was regenerated (18 views). The Setup toolbar is an
open/close `WorkspaceToolbarGroup`, matching Crew.

Each Integrations tab splits workflow picks from the shared shelf: a "This
workflow" group on top, "Platform connected" below (MCPs render two
`ToolSelectionSection` lists; skills use `splitSelectionGroups`). Ticking
moves a row between groups; empty groups hide. Search is per tab (below the
platform list on MCPs, above the list on Skills) and refresh lives only in
the header; the skills toolbar keeps Import plus an Ask AI install button.

## Crew parity

Crew mirrors Builder with project nouns (`frontend/src/products/work/`):

- `WorkIdentityPanel`: General (name, icon, role, instructions, delete
  request), Secrets, File access, Models (embedded `WorkModelsPanel` with
  `hideHeader`).
- `WorkIntegrationsPanel`: MCPs (server picker + `ConnectorsBrowser`),
  Skills, Slack, WhatsApp (`WorkflowBotsPanel` with `fixedChannel` and a
  Crew target), Gmail. Every inner panel joins the single tab scroll via
  `manageOwnScroll={false}`.
- `WorkWorkspaceView` is `dashboard | database | files | browser | costs |
  schedules | identity | mcp`. Legacy saved views and agent presentation
  ids (`bots`, `skills`, `secrets`, `models`, `email`, `folders`, `llm`)
  map onto the consolidated views in `WORK_UI_PRESENTATION_VIEWS`, so old
  preferences and agent commands keep working.

No server changes were needed for gating: `workViewGating.ts` reuses the
legacy feature panel ids (`mcp`, `skills`, `bots`, `secrets`, `folders`,
`models`). Identity is always reachable (General is the project's own
name and deletion); Integrations needs any of `mcp`/`skills`/`bots`;
inner tabs follow their own panel id. This also fixed Crew Gmail, which
had no server panel id and was previously gated off as a standalone view.

Crew identity edits persist through `updateProductProjectIdentity`
(`platform/chat/productProjects.ts`, mirrored by the `set_work_identity`
agent tool): omitted fields preserved, empty fields removed, stored in
`product.json`. Crew deletion reuses the surface confirm dialog, upgraded
to GitHub-style type-the-name confirmation.

## Custom icons

Both General tabs edit icons through the shared `IconUploadField`: an
emoji field plus an image upload that downscales to a ~128px thumbnail
(`utils/downscaleImage.ts`) stored inline as a data URL in the existing
icon field. All 16 render sites pick it up with no prop threading because
they funnel through `EntityIdentityIcon`. Server validation
(`agent_go/pkg/workflowtypes/icons.go`, used by workflow-manifest and Crew
identity validation) accepts emoji (≤8 chars) or image data URLs (≤100k
chars); prompt/tool rendering redacts image bytes. Creation dialogs stay
emoji-only; uploads live in Identity.

## Secrets UI

`SecretSelectionSection`, `SecretsManagerPanel`, and
`SecretSelectionDropdown` were migrated to the kit: theme tokens instead
of hardcoded palettes, kit `Badge` pills, `SettingsCard` blocks, the empty
list box hidden when there is nothing to show, and the dropdown's text `✕`
replaced with the X icon. Behavior is unchanged, including the native
`confirm()` dialogs pinned by contract tests. The amber bot-enabled toggle
is the one intentional semantic color, documented in its own copy.

## Card standard

Tab content follows the shared-knowledge-bases card, extracted into the
shared `SettingsCard` (`components/ui/SettingsCard.tsx`): primary icon +
semibold title + `SettingsCount` pill, optional right action, muted
explainer, content, `SettingsEmpty` dashed empty state. Adopted by both
General tabs, the secrets surfaces, and both folder views
(`KnowledgebaseSources` itself already matches and was left untouched).

## Verification

- `npx vitest run` (frontend; only pre-existing peer-owned provider /
  session-restore failures remain)
- `npx tsc -b`, `npx eslint` on touched files
- `go build ./agent_go/...`, `go test` on `pkg/workflowtypes`,
  `internal/workproduct`, manifest validation
- Kit adoption is pinned by `formsKitAdoption.test.ts`; Crew consolidation
  by `WorkWorkspacePane.test.ts` / `WorkWorkspaceToolbar.test.ts` /
  `workViewGating.test.ts`.