Files
paperclip/ui/src/adapters/adapter-display-registry.ts
T
Aron Prins 897cc322c7 Improve external agent invite flow (#6183)
## Thinking Path

> - Paperclip orchestrates AI agents for zero-human companies.
> - Agent creation can happen through local runtimes, managed runtimes,
and external agents that onboard through invites.
> - The old OpenClaw-oriented invite UX lived under company
settings/invites and made a gateway-specific path look like a company
access setting.
> - That hid the broader bring-your-own-agent flow and forced operators
to leave the add-agent modal when adding an external agent.
> - This pull request moves external agent invite generation into the
add-agent modal and makes the copy agent-oriented instead of
OpenClaw-only.
> - The benefit is a clearer agent-first onboarding path while company
invites stay focused on human access.

## What Changed

- Added an external-agent invite branch to the add-agent modal,
including a dedicated prompt result view with Back navigation.
- Added a shared agent onboarding prompt builder and focused modal
coverage for prompt replacement/back navigation.
- Removed the agent invite prompt UI from Company Settings and Company
Invites, leaving Company Invites focused on human access links and
invite history.
- Updated the hidden OpenClaw Gateway runtime hint to direct operators
to the add-agent invite flow instead of presenting it as a blocked
runtime card.
- Updated invite/onboarding docs, storybook coverage, and server-side
onboarding copy toward generic agent language while preserving existing
gateway compatibility.

## Verification

- `pnpm -r typecheck`
- `pnpm build`
- `FAKE_BIN="$(mktemp -d)/bin"; mkdir -p "$FAKE_BIN"; printf
'#!/bin/sh\nexit 1\n' > "$FAKE_BIN/tailscale"; chmod +x
"$FAKE_BIN/tailscale"; PATH="$FAKE_BIN:$PATH" pnpm test:run`
- `pnpm test:run` without the fake `tailscale` shim was also attempted;
it failed only in two pre-existing CLI tailnet fallback tests because
this host has a real Tailscale address (`100.125.202.3`) where those
tests expect no Tailscale.
- Focused confirmation for that host-env issue: `FAKE_BIN=...
PATH="$FAKE_BIN:$PATH" pnpm exec vitest run --project paperclipai
cli/src/__tests__/network-bind.test.ts
cli/src/__tests__/onboard.test.ts`
- Manual UI verification: served UI locally in light mode, opened
add-agent modal, generated external agent prompt, verified the generated
prompt replaces the form and Back returns to the form.

### Screenshots

![Add agent
modal](https://raw.githubusercontent.com/aronprins/paperclip/pr-assets/6183-agent-invites/.github/pr-screenshots/6183/add-agent-modal-light.png)

![External agent invite
form](https://raw.githubusercontent.com/aronprins/paperclip/pr-assets/6183-agent-invites/.github/pr-screenshots/6183/external-agent-invite-form-light.png)

![Generated onboarding prompt replacement
view](https://raw.githubusercontent.com/aronprins/paperclip/pr-assets/6183-agent-invites/.github/pr-screenshots/6183/onboarding-prompt-result-light.png)

## Risks

- Existing OpenClaw gateway compatibility remains, but operators now
discover external agent onboarding from the add-agent modal instead of
company settings.
- Agent invites still appear in the invite history table, so that page
may show agent-scoped invite rows even though it no longer creates agent
onboarding prompts.
- Low migration risk: no schema changes.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- OpenAI Codex, GPT-5 coding agent in Codex desktop; tool-enabled
repository, shell, browser, and GitHub workflow. Context window size was
not exposed by the runtime.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge
2026-05-23 09:09:40 -05:00

178 lines
4.6 KiB
TypeScript

/**
* Single source of truth for adapter display metadata.
*
* Built-in adapters have entries in `adapterDisplayMap`. External (plugin)
* adapters get sensible defaults derived from their type string via
* `getAdapterDisplay()`.
*/
import type { ComponentType } from "react";
import {
Bot,
Code,
Gem,
MousePointer2,
Sparkles,
Terminal,
Cpu,
} from "lucide-react";
import { OpenCodeLogoIcon } from "@/components/OpenCodeLogoIcon";
import { HermesIcon } from "@/components/HermesIcon";
// ---------------------------------------------------------------------------
// Type suffix parsing
// ---------------------------------------------------------------------------
const TYPE_SUFFIXES: Record<string, string> = {
_local: "local",
_gateway: "gateway",
};
function getTypeSuffix(type: string): string | null {
for (const [suffix, mode] of Object.entries(TYPE_SUFFIXES)) {
if (type.endsWith(suffix)) return mode;
}
return null;
}
function withSuffix(label: string, suffix: string | null): string {
return suffix ? `${label} (${suffix})` : label;
}
// ---------------------------------------------------------------------------
// Display metadata per adapter type
// ---------------------------------------------------------------------------
export interface AdapterDisplayInfo {
label: string;
description: string;
icon: ComponentType<{ className?: string }>;
recommended?: boolean;
comingSoon?: boolean;
disabledLabel?: string;
experimental?: boolean;
hideFromVisualSelection?: boolean;
}
const adapterDisplayMap: Record<string, AdapterDisplayInfo> = {
acpx_local: {
label: "ACPX",
description: "Experimental local ACPX multi-agent adapter",
icon: Bot,
experimental: true,
hideFromVisualSelection: true,
},
claude_local: {
label: "Claude Code",
description: "Local Claude agent",
icon: Sparkles,
recommended: true,
},
codex_local: {
label: "Codex",
description: "Local Codex agent",
icon: Code,
recommended: true,
},
gemini_local: {
label: "Gemini CLI",
description: "Local Gemini agent",
icon: Gem,
},
grok_local: {
label: "Grok Build",
description: "Local Grok Build agent",
icon: Bot,
},
opencode_local: {
label: "OpenCode",
description: "Local multi-provider agent",
icon: OpenCodeLogoIcon,
},
hermes_local: {
label: "Hermes Agent",
description: "Local Hermes CLI agent",
icon: HermesIcon,
},
pi_local: {
label: "Pi",
description: "Local Pi agent",
icon: Terminal,
},
cursor: {
label: "Cursor",
description: "Local Cursor agent",
icon: MousePointer2,
},
cursor_cloud: {
label: "Cursor Cloud",
description: "Managed remote Cursor agent",
icon: MousePointer2,
},
openclaw_gateway: {
label: "OpenClaw Gateway",
description: "External gateway adapter",
icon: Bot,
comingSoon: true,
disabledLabel: "Invite external agents from the add-agent modal",
hideFromVisualSelection: true,
},
process: {
label: "Process",
description: "Internal process adapter",
icon: Cpu,
comingSoon: true,
},
http: {
label: "HTTP",
description: "Internal HTTP adapter",
icon: Cpu,
comingSoon: true,
},
};
// ---------------------------------------------------------------------------
// Public API
// ---------------------------------------------------------------------------
function humanizeType(type: string): string {
// Strip known type suffixes so "droid_local" → "Droid", not "Droid Local"
let base = type;
for (const suffix of Object.keys(TYPE_SUFFIXES)) {
if (base.endsWith(suffix)) {
base = base.slice(0, -suffix.length);
break;
}
}
return base.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
}
export function getAdapterLabel(type: string): string {
const base = adapterDisplayMap[type]?.label ?? humanizeType(type);
return withSuffix(base, getTypeSuffix(type));
}
export function getAdapterLabels(): Record<string, string> {
const suffixed: Record<string, string> = {};
for (const [type, info] of Object.entries(adapterDisplayMap)) {
suffixed[type] = withSuffix(info.label, getTypeSuffix(type));
}
return suffixed;
}
export function getAdapterDisplay(type: string): AdapterDisplayInfo {
const known = adapterDisplayMap[type];
if (known) return known;
const suffix = getTypeSuffix(type);
const label = withSuffix(humanizeType(type), suffix);
return {
label,
description: suffix ? `External ${suffix} adapter` : "External adapter",
icon: Cpu,
};
}
export function isKnownAdapterType(type: string): boolean {
return type in adapterDisplayMap;
}