Skip to content

feat: Frontend — input picker in NewAgentPanel + preview dialog enrichment#2127

Merged
mabry1985 merged 2 commits into
mainfrom
feat/bd-ehj
Jul 22, 2026
Merged

feat: Frontend — input picker in NewAgentPanel + preview dialog enrichment#2127
mabry1985 merged 2 commits into
mainfrom
feat/bd-ehj

Conversation

@mabry1985

@mabry1985 mabry1985 commented Jul 22, 2026

Copy link
Copy Markdown
Member

Summary

Ships the final UI slice of operator-supplied bundle setup (#2041): the archetype preview and the new-agent picker now surface and collect the MCP inputs + secrets a bundle archetype will ask for.

  • fillTemplate extracted from McpCatalogDialog.tsx into apps/web/src/lib/mcpTemplate.ts as a shared utility; the dialog now imports it.
  • ArchetypePreviewDialog reads the enriched mcp + secrets off the preview peek and renders them read-only below the members/skills section — MCP servers: GitHub (needs token), … and Secrets: GitHub token, …. Because the dialog is shared, the setup wizard gets the same display for free.
  • NewAgentPanel gains an inline, collapsible Configure step between archetype pick and name. When the picked bundle has MCP inputs or declared secrets, a form appears (non-secret → Input, secret → masked SecretInput, required marked *). Filled values are split into inputs (MCP ${…} map) and secrets ([{key,value}]) and passed to api.createAgent() alongside name/bundle/soul; blanks are dropped so the backend's env-only fallback still applies. Skipping (collapse) or a no-inputs archetype sends nothing — backward compatible. Creation is never hard-blocked; unfilled required fields show a soft hint.
  • Pure helpers (archetypeConfig.ts) carry the logic and the unit coverage; new mcpTemplate + archetypeConfig vitest suites and two Playwright specs (Configure form collects the GitHub token into the create payload; preview dialog lists the servers/secrets) exercise the behavior, with the mock server + fixtures extended to serve the enriched preview.

New/changed files: lib/mcpTemplate.ts, lib/archetypeConfig.ts (+ tests), lib/types.ts, lib/api.ts, settings/NewAgentPanel.tsx, setup/ArchetypePreviewDialog.tsx, app/McpCatalogDialog.tsx, app/theme.css, and e2e fixtures/mock/spec.

Refs #2041 (slice 3 of 3)

Summary by CodeRabbit

  • New Features

    • Added an optional Configure step when creating agents from bundles.
    • Added support for entering MCP credentials and declared secrets, with required-field validation.
    • Added read-only preview details for included MCP servers and secrets.
    • Added template substitution for configuring MCP server settings.
  • Bug Fixes

    • Blank secret values are no longer submitted during agent creation.
    • Configuration values are correctly separated between MCP inputs and secrets.

@coderabbitai

coderabbitai Bot commented Jul 22, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@mabry1985, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 48 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7515025b-d49c-476a-9485-bba1227d0d0d

📥 Commits

Reviewing files that changed from the base of the PR and between bbfd5ab and 9c62221.

📒 Files selected for processing (3)
  • apps/web/src/lib/archetypeConfig.test.ts
  • apps/web/src/lib/archetypeConfig.ts
  • apps/web/src/settings/NewAgentPanel.tsx

Walkthrough

The New Agent flow now fetches bundle previews, renders inline MCP and secret configuration fields, submits nonblank values during creation, and displays bundle details in preview dialogs. Shared template substitution, preview types, mock endpoints, unit tests, and Playwright coverage were added.

Changes

Bundle configuration flow

Layer / File(s) Summary
Configuration contracts and helpers
apps/web/src/lib/types.ts, apps/web/src/lib/archetypeConfig.ts, apps/web/src/lib/mcpTemplate.ts, apps/web/src/lib/api.ts, apps/web/src/lib/*test.ts
Preview types, field transformation, required-field validation, payload splitting, summary helpers, and recursive MCP template substitution are added with unit tests.
Inline New Agent configuration
apps/web/src/settings/NewAgentPanel.tsx, apps/web/src/app/theme.css
The panel fetches bundle previews, manages configuration state, renders inputs and secret fields, and conditionally sends configured values to agent creation.
Preview and mock integration
apps/web/e2e/fixtures.mjs, apps/web/e2e/mock-server.mjs, apps/web/src/setup/ArchetypePreviewDialog.tsx, apps/web/src/app/McpCatalogDialog.tsx
Preview fixtures and an archetype preview endpoint are added; bundle MCP and secret summaries are rendered, and shared template substitution is used by the MCP catalog dialog.
Fleet flow validation
apps/web/e2e/fleet.spec.ts
Playwright tests verify create payload inputs, omission of blank secrets, and displayed MCP and secret preview entries.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Operator
  participant NewAgentPanel
  participant ArchetypePreviewAPI
  participant FleetAPI
  Operator->>NewAgentPanel: select Product Manager archetype
  NewAgentPanel->>ArchetypePreviewAPI: request archetype preview
  ArchetypePreviewAPI-->>NewAgentPanel: return MCP inputs and secrets
  Operator->>NewAgentPanel: enter configuration values
  NewAgentPanel->>FleetAPI: create agent with inputs and secrets
  FleetAPI-->>NewAgentPanel: return creation result
Loading

Possibly related issues

  • Issue 2041 — The PR implements the create-time bundle input and secret configuration flow described by this issue.

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title matches the main change by calling out the NewAgentPanel input picker and preview dialog enrichment.
Description check ✅ Passed The PR body covers the main changes, issue reference, and test coverage, though it omits the template's explicit Closes and Test plan sections.
Docstring Coverage ✅ Passed Docstring coverage is 84.62% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/bd-ehj

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/e2e/fleet.spec.ts`:
- Around line 78-91: Update the test flow around the GitHub token and Brave API
key fields to fill the declared “Brave API key” secret with a non-empty value
before creating the agent. Change the posted payload assertion to verify that
secrets contains the expected Brave secret entry, while preserving the existing
github_token input assertion.

In `@apps/web/src/lib/archetypeConfig.ts`:
- Around line 85-90: Preserve raw submitted values in the field-routing loop of
archetypeConfig.ts: use value.trim() only to detect blank input, then pass the
untrimmed value to secrets or inputs. Update archetypeConfig.test.ts to expect
surrounding spaces to remain unchanged and add coverage confirming
whitespace-only values are omitted.

In `@apps/web/src/lib/mcpTemplate.ts`:
- Around line 9-10: Update the key lookup in the sub substitution function to
only use values defined as own properties of values, returning an empty string
for inherited or absent keys such as constructor. Add a regression test covering
prototype-inherited placeholders.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: beb8437a-ca03-4e68-b5db-42730ca7fd52

📥 Commits

Reviewing files that changed from the base of the PR and between 0bbb722 and bbfd5ab.

📒 Files selected for processing (13)
  • apps/web/e2e/fixtures.mjs
  • apps/web/e2e/fleet.spec.ts
  • apps/web/e2e/mock-server.mjs
  • apps/web/src/app/McpCatalogDialog.tsx
  • apps/web/src/app/theme.css
  • apps/web/src/lib/api.ts
  • apps/web/src/lib/archetypeConfig.test.ts
  • apps/web/src/lib/archetypeConfig.ts
  • apps/web/src/lib/mcpTemplate.test.ts
  • apps/web/src/lib/mcpTemplate.ts
  • apps/web/src/lib/types.ts
  • apps/web/src/settings/NewAgentPanel.tsx
  • apps/web/src/setup/ArchetypePreviewDialog.tsx

Comment thread apps/web/e2e/fleet.spec.ts
Comment thread apps/web/src/lib/archetypeConfig.ts
Comment thread apps/web/src/lib/mcpTemplate.ts

@protoreview protoreview Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

QA panel review — WARN

code-review-structural · head bbfd5abfe2a3 · formal

[review-synthesizer completed: workflow code-review-structural:report]

Prose Brief

Overall risk: Low. This PR introduces a single new file (archetypeConfig.ts, 109 lines) with two utility functions. The sole confirmed finding is a minor naming-convention inconsistency between adjacent boolean predicates — no correctness, security, or behavioral defects surfaced.

Fix-first item: Rename configMissingRequired to hasConfigMissingRequired (or isConfigMissingRequired) to match the hasConfigFields predicate three lines above it. A one-line, zero-risk change.

Panel disagreement: None. Only one finding came through the structural pass, and the verifier confirmed it cleanly.

What verification changed: The verifier adjusted the line numbers (≈66/72 vs. the claimed 68/73) but confirmed the naming inconsistency is real. The PROTO.md rule itself was not independently fetched, but the inconsistency is a plain fact in the diff.

Coverage gap: A 109-line new file touching production code produced only a single minor finding from the structural pass — no LLM finders appear to have contributed. The remaining ~100 lines (including archetypeConfigFields, collectConfigDefaults, and their internal logic) went effectively unreviewed for correctness, edge cases, or type safety. Treat the silence as a coverage gap, not a clean bill of health.


[
  {
    "file": "apps/web/src/lib/archetypeConfig.ts",
    "line": 73,
    "severity": "minor",
    "category": "conventions",
    "claim": "Boolean predicate `configMissingRequired` lacks an `is`/`has` prefix, inconsistent with the adjacent `hasConfigFields` (line 68) in the same module, violating the PROTO.md rule to match surrounding naming within a file.",
    "evidence": "Line 68: `export function hasConfigFields(...)` — uses `has` prefix. Line 73: `export function configMissingRequired(...)` — predicate with no prefix, three lines later. A reader scanning the exports cannot tell at a glance that both are boolean predicates.",
    "verdict": "confirmed",
    "note": "Verified in the diff: hasConfigFields (≈line 66) and configMissingRequired (≈line 72) are adjacent boolean predicates in the same new-file diff — the former uses `has`, the latter has no prefix. Exact line numbers differ by 1-2 from the claim but the naming inconsistency is real."
  }
]

…cate prefix parity with hasConfigFields

QA panel finding on #2127 (confirmed, adjudicated fix-before-merge): adjacent
boolean predicates in the new archetypeConfig module should share the is/has
prefix convention. Zero-reference rename (both symbols new in this PR).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Hh8gD6749kPXoBK9Wsd1FA
@mabry1985

Copy link
Copy Markdown
Member Author

WARN adjudication (protoEngineer's brain): fix-before-merge — zero-reference rename, cheaper now than as debt. Applied: configMissingRequiredisMissingRequiredConfig across the module, tests, and NewAgentPanel call sites (628/628 unit tests green). Awaiting re-review of the new head.

@protoreview protoreview Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

QA panel review — WARN

code-review-structural · head 9c622219dc44 · formal

[review-synthesizer completed: workflow code-review-structural:report]

Prose Brief

This PR introduces a new archetypeConfig.ts module for MCP config field handling — additive, single-file, low overall risk. The one confirmed finding (minor correctness) is that fieldId drops the server discriminator from its Pick type, so two MCP servers in a bundle with same-named input keys (e.g., both declare "token") collide in the form values map — the operator can't supply distinct values per server. Fix fieldId first by including server in both the Pick type parameter and the template string. No panel disagreements (single-finder report). Verification was clean and confirmed the defect against source. Gap noted by the verifier: even with fieldId fixed, splitConfigValues uses a flat inputs[f.key] map that would still overwrite same-key values from different servers — the true root cause may span both functions.

[
  {
    "file": "apps/web/src/lib/archetypeConfig.ts",
    "line": 30,
    "severity": "minor",
    "category": "correctness",
    "claim": "fieldId uses only origin+key for disambiguation but omits server, so two MCP servers in the same bundle that share an input key name (e.g., both have a 'token' input) collide in the values map, making it impossible for the operator to set different values for different servers.",
    "evidence": "Line 29-31: `export function fieldId(f: Pick<ConfigField, \"origin\" | \"key\">): string { return `${f.origin}:${f.key}`; }` — server is excluded from the Pick type and unused. But ConfigField.server is populated (line 47: `server: item.name`) and two servers in a bundle could reasonably have an input with the same key. The test suite covers input-vs-secret collisions (archetypeConfig.test.ts line 127) but not MCP-vs-MCP collisions.",
    "source": "correctness-finder",
    "verdict": "confirmed",
    "note": "Code matches: fieldId Pick type excludes server, ConfigField.server is defined & populated, test only covers input-vs-secret collision (origin prefix), no MCP-vs-MCP collision test exists. Also note: splitConfigValues uses flat inputs[f.key] map, so even with fieldId fixed, two servers with same key would still overwrite in the output — root cause is partly in the flat inputs design."
  }
]

@mabry1985

Copy link
Copy Markdown
Member Author

WARN adjudication, round 2 (protoEngineer's brain): merge-then-followup — the collision finding is real but zero real-world bundles trigger it, and the true fix is an end-to-end design change spanning the flat inputs contract slice 2 already shipped on main. Gating F3 on it would reverse-justify a merged contract. Filed as #2128 (per-server namespaced inputs, server:key with bare-key fallback). Merging per ruling.

@mabry1985
mabry1985 merged commit bfae50d into main Jul 22, 2026
10 checks passed
@mabry1985
mabry1985 deleted the feat/bd-ehj branch July 22, 2026 07:03
mabry1985 added a commit that referenced this pull request Jul 22, 2026
…rtifacts, fleet inputs/secrets (#2130)

Bump 0.106.0 → 0.107.0 and roll the changelog for the release. Highlights:
- Versioned file artifacts + save_file_artifact (ADR 0092 D2, #2126)
- Document-generation stack baked into the desktop bundle (ADR 0092 D1, #2123)
- Fleet agents accept operator inputs + secrets at create time (#2121/#2122/#2125/#2127)
- Deterministic persona-drift detection (#2116)
- Chat tab context menu Close Others/Left/Right (#2112)
- Fixes: archetype-catalog bundling (#2115), PyPI publishes on tag push (#2113)

Backfilled [Unreleased] entries for the feature PRs that lacked them, rolled to
[0.107.0], scaffolded + polished the marketing changelog. uv.lock: project version
line only (surgical — avoids uv 0.11.13-vs-pinned-0.11.29 marker drift).


Claude-Session: https://claude.ai/code/session_01EVmWoy2TdXdMshNn5WBR2Z

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant