feat(protocol-builder): add Protocol Builder screen for session-type protocols

[chrisbartoloburlo]

Summary

Adds a Protocol Builder screen to the v2 web Inspector that lets users design session-type interaction protocols against the connected MCP server's tools, then exports the result as a runtime-checkable DSL string and a Python integration snippet.

This is the v2 port of the v1 Protocol Builder PR #1224, rewritten in Mantine following the v2 dumb-component architecture and per-file 90/85/80/50 coverage gate.

Closes #1280.

What you get

A new Protocol Builder tab in InspectorView's tab list (visible once a server is connected), with three columns:

1. Tool palette (left) — clicking an MCP tool appends a paired !Tool.?ToolResult to the sequence. Protocol-construct buttons add !? pairs, internal/external choices, recursion scopes, and loop-back references. An "insert target" button on each branch lets palette clicks add into a specific branch.
2. Sequence editor (middle) — paired-action cards with editable labels (Mantine Select when options exist, TextInput when free-form), choice cards with collapsible branches, recursion scopes, rec-ref cards, and a one-click "convert pair → choice" shortcut.
3. Output panel (right) — syntax-highlighted DSL string, FSM state-machine preview (parsed from the DSL), Python integration snippet for the llmsessioncontract runtime monitor, and a download button for a protocol.py file.

Architecture

• Pure logic lives in clients/web/src/components/screens/ProtocolBuilderScreen/protocol.ts — DSL serialization, FSM derivation, tree-update helpers, types — and is unit-tested independently from the UI.
• Screen owns ephemeral UI state (steps, insertTarget, copied) and orchestrates the three groups.
• Groups: ProtocolPaletteSidebar, ProtocolStepList (recursive), ProtocolOutputPanel. Each is a dumb component (props + callbacks).

V2 conformance

• Mantine components only (Box/Group/Stack/Flex for layout, no raw div)
• No inline styles, no raw hex/rgba — uses --inspector-* CSS custom properties
  • Adds nine --inspector-protocol-* tokens to App.css :root (light + dark) for send/receive/recursion text/bg/border surfaces
  • Extends the Paper code variant with whiteSpace: pre-wrap so the DSL output panel wraps long lines without an inline style
• Strict types, no any
• Tests via renderWithMantine + @testing-library/user-event, every new file passes the per-file gate
• Storybook stories with fixtures for screen + each group

Test plan

• npm run validate passes (format, lint, build, test:coverage with the per-file 90/85/80/50 gate)
• npm run test — 707 tests pass across 72 files
• Per-file coverage on every new file:
  • protocol.ts — 97.2% statements / 100% functions / 97.9% lines
  • ProtocolBuilderScreen.tsx — 100% across the board
  • ProtocolPaletteSidebar.tsx — 100% across the board
  • ProtocolStepList.tsx — 92% statements / 83.7% functions / 95.5% lines
  • ProtocolOutputPanel.tsx — 98.7% statements / 100% functions / 98.5% lines
• Stories cover empty / populated / with-choice / with-recursion / list-changed / insert-target states
• Visual review in the running Inspector once wired into the connected-server flow

Background

Session types are a formal model for describing interaction protocols between two parties — exactly the shape of an LLM ↔ MCP-server conversation. The llmsessioncontract runtime monitor catches protocol violations the moment they happen.

Bartolo Burlò, Francalanza, Scalas. On the Monitorability of Session Types, in Theory and in Practice. ECOOP 2021.

The Python runtime: llmsessioncontract on PyPI · llmcontract.dev · GitHub.

[chrisbartoloburlo]

Could a maintainer add the v2 label? Per AGENTS.md it should be set at create time, but as a non-collaborator I couldn't add it via gh. Issue link: #1280.