Add CEO OpenClaw invite endpoint and update onboarding UX

2026-03-07 18:19:06 -06:00
parent 2223afa0e9
commit 0233525e99
13 changed files with 608 additions and 120 deletions
--- a/ui/src/api/access.ts
+++ b/ui/src/api/access.ts
@@ -64,6 +64,17 @@ type BoardClaimStatus = {
  claimedByUserId: string | null;
 };

+type CompanyInviteCreated = {
+  id: string;
+  token: string;
+  inviteUrl: string;
+  expiresAt: string;
+  allowedJoinTypes: "human" | "agent" | "both";
+  onboardingTextPath?: string;
+  onboardingTextUrl?: string;
+  inviteMessage?: string | null;
+};
+
 export const accessApi = {
  createCompanyInvite: (
    companyId: string,
@@ -73,16 +84,18 @@ export const accessApi = {
      agentMessage?: string | null;
    } = {},
  ) =>
-    api.post<{
-      id: string;
-      token: string;
-      inviteUrl: string;
-      expiresAt: string;
-      allowedJoinTypes: "human" | "agent" | "both";
-      onboardingTextPath?: string;
-      onboardingTextUrl?: string;
-      inviteMessage?: string | null;
-    }>(`/companies/${companyId}/invites`, input),
+    api.post<CompanyInviteCreated>(`/companies/${companyId}/invites`, input),
+
+  createOpenClawInvitePrompt: (
+    companyId: string,
+    input: {
+      agentMessage?: string | null;
+    } = {},
+  ) =>
+    api.post<CompanyInviteCreated>(
+      `/companies/${companyId}/openclaw/invite-prompt`,
+      input,
+    ),

  getInvite: (token: string) => api.get<InviteSummary>(`/invites/${token}`),
  getInviteOnboarding: (token: string) =>
--- a/ui/src/components/NewAgentDialog.tsx
+++ b/ui/src/components/NewAgentDialog.tsx
@@ -1,3 +1,4 @@
+import { useState, type ComponentType } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@/lib/router";
 import { useDialog } from "../context/DialogContext";
@@ -9,12 +10,77 @@ import {
  DialogContent,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Bot, Sparkles } from "lucide-react";
+import {
+  ArrowLeft,
+  Bot,
+  Code,
+  MousePointer2,
+  Sparkles,
+  Terminal,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { OpenCodeLogoIcon } from "./OpenCodeLogoIcon";
+
+type AdvancedAdapterType =
+  | "claude_local"
+  | "codex_local"
+  | "opencode_local"
+  | "pi_local"
+  | "cursor"
+  | "openclaw_gateway";
+
+const ADVANCED_ADAPTER_OPTIONS: Array<{
+  value: AdvancedAdapterType;
+  label: string;
+  desc: string;
+  icon: ComponentType<{ className?: string }>;
+  recommended?: boolean;
+}> = [
+  {
+    value: "claude_local",
+    label: "Claude Code",
+    icon: Sparkles,
+    desc: "Local Claude agent",
+    recommended: true,
+  },
+  {
+    value: "codex_local",
+    label: "Codex",
+    icon: Code,
+    desc: "Local Codex agent",
+    recommended: true,
+  },
+  {
+    value: "opencode_local",
+    label: "OpenCode",
+    icon: OpenCodeLogoIcon,
+    desc: "Local multi-provider agent",
+  },
+  {
+    value: "pi_local",
+    label: "Pi",
+    icon: Terminal,
+    desc: "Local Pi agent",
+  },
+  {
+    value: "cursor",
+    label: "Cursor",
+    icon: MousePointer2,
+    desc: "Local Cursor agent",
+  },
+  {
+    value: "openclaw_gateway",
+    label: "OpenClaw Gateway",
+    icon: Bot,
+    desc: "Invoke OpenClaw via gateway protocol",
+  },
+];

 export function NewAgentDialog() {
  const { newAgentOpen, closeNewAgent, openNewIssue } = useDialog();
  const { selectedCompanyId } = useCompany();
  const navigate = useNavigate();
+  const [showAdvancedCards, setShowAdvancedCards] = useState(false);

  const { data: agents } = useQuery({
    queryKey: queryKeys.agents.list(selectedCompanyId!),
@@ -34,15 +100,23 @@ export function NewAgentDialog() {
  }

  function handleAdvancedConfig() {
+    setShowAdvancedCards(true);
+  }
+
+  function handleAdvancedAdapterPick(adapterType: AdvancedAdapterType) {
    closeNewAgent();
-    navigate("/agents/new");
+    setShowAdvancedCards(false);
+    navigate(`/agents/new?adapterType=${encodeURIComponent(adapterType)}`);
  }

  return (
    <Dialog
      open={newAgentOpen}
      onOpenChange={(open) => {
-        if (!open) closeNewAgent();
+        if (!open) {
+          setShowAdvancedCards(false);
+          closeNewAgent();
+        }
      }}
    >
      <DialogContent
@@ -56,39 +130,84 @@ export function NewAgentDialog() {
            variant="ghost"
            size="icon-xs"
            className="text-muted-foreground"
-            onClick={closeNewAgent}
+            onClick={() => {
+              setShowAdvancedCards(false);
+              closeNewAgent();
+            }}
          >
            <span className="text-lg leading-none">&times;</span>
          </Button>
        </div>

        <div className="p-6 space-y-6">
-          {/* Recommendation */}
-          <div className="text-center space-y-3">
-            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-accent">
-              <Sparkles className="h-6 w-6 text-foreground" />
-            </div>
-            <p className="text-sm text-muted-foreground">
-              We recommend letting your CEO handle agent setup — they know the
-              org structure and can configure reporting, permissions, and
-              adapters.
-            </p>
-          </div>
+          {!showAdvancedCards ? (
+            <>
+              {/* Recommendation */}
+              <div className="text-center space-y-3">
+                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-accent">
+                  <Sparkles className="h-6 w-6 text-foreground" />
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  We recommend letting your CEO handle agent setup — they know the
+                  org structure and can configure reporting, permissions, and
+                  adapters.
+                </p>
+              </div>

-          <Button className="w-full" size="lg" onClick={handleAskCeo}>
-            <Bot className="h-4 w-4 mr-2" />
-            Ask the CEO to create a new agent
-          </Button>
+              <Button className="w-full" size="lg" onClick={handleAskCeo}>
+                <Bot className="h-4 w-4 mr-2" />
+                Ask the CEO to create a new agent
+              </Button>

-          {/* Advanced link */}
-          <div className="text-center">
-            <button
-              className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
-              onClick={handleAdvancedConfig}
-            >
-              I want advanced configuration myself
-            </button>
-          </div>
+              {/* Advanced link */}
+              <div className="text-center">
+                <button
+                  className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
+                  onClick={handleAdvancedConfig}
+                >
+                  I want advanced configuration myself
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="space-y-2">
+                <button
+                  className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  onClick={() => setShowAdvancedCards(false)}
+                >
+                  <ArrowLeft className="h-3.5 w-3.5" />
+                  Back
+                </button>
+                <p className="text-sm text-muted-foreground">
+                  Choose your adapter type for advanced setup.
+                </p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                {ADVANCED_ADAPTER_OPTIONS.map((opt) => (
+                  <button
+                    key={opt.value}
+                    className={cn(
+                      "flex flex-col items-center gap-1.5 rounded-md border border-border p-3 text-xs transition-colors hover:bg-accent/50 relative"
+                    )}
+                    onClick={() => handleAdvancedAdapterPick(opt.value)}
+                  >
+                    {opt.recommended && (
+                      <span className="absolute -top-1.5 right-1.5 bg-green-500 text-white text-[9px] font-semibold px-1.5 py-0.5 rounded-full leading-none">
+                        Recommended
+                      </span>
+                    )}
+                    <opt.icon className="h-4 w-4" />
+                    <span className="font-medium">{opt.label}</span>
+                    <span className="text-muted-foreground text-[10px]">
+                      {opt.desc}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
        </div>
      </DialogContent>
    </Dialog>
--- a/ui/src/components/OnboardingWizard.tsx
+++ b/ui/src/components/OnboardingWizard.tsx
@@ -38,7 +38,6 @@ import {
  ArrowLeft,
  ArrowRight,
  Terminal,
-  Globe,
  Sparkles,
  MousePointer2,
  Check,
@@ -673,38 +672,19 @@ export function OnboardingWizard() {
                          icon: Terminal,
                          desc: "Local Pi agent"
                        },
-                        {
-                          value: "openclaw" as const,
-                          label: "OpenClaw",
-                          icon: Bot,
-                          desc: "Notify OpenClaw webhook",
-                          comingSoon: true
-                        },
                        {
                          value: "openclaw_gateway" as const,
                          label: "OpenClaw Gateway",
                          icon: Bot,
-                          desc: "Invoke OpenClaw via gateway protocol"
+                          desc: "Invoke OpenClaw via gateway protocol",
+                          comingSoon: true,
+                          disabledLabel: "Configure OpenClaw within the App"
                        },
                        {
                          value: "cursor" as const,
                          label: "Cursor",
                          icon: MousePointer2,
                          desc: "Local Cursor agent"
-                        },
-                        {
-                          value: "process" as const,
-                          label: "Shell Command",
-                          icon: Terminal,
-                          desc: "Run a process",
-                          comingSoon: true
-                        },
-                        {
-                          value: "http" as const,
-                          label: "HTTP Webhook",
-                          icon: Globe,
-                          desc: "Call an endpoint",
-                          comingSoon: true
                        }
                      ].map((opt) => (
                        <button
@@ -744,7 +724,10 @@ export function OnboardingWizard() {
                          <opt.icon className="h-4 w-4" />
                          <span className="font-medium">{opt.label}</span>
                          <span className="text-muted-foreground text-[10px]">
-                            {opt.comingSoon ? "Coming soon" : opt.desc}
+                            {opt.comingSoon
+                              ? (opt as { disabledLabel?: string }).disabledLabel ??
+                                "Coming soon"
+                              : opt.desc}
                          </span>
                        </button>
                      ))}
--- a/ui/src/pages/CompanySettings.tsx
+++ b/ui/src/pages/CompanySettings.tsx
@@ -77,9 +77,7 @@ export function CompanySettings() {

  const inviteMutation = useMutation({
    mutationFn: () =>
-      accessApi.createCompanyInvite(selectedCompanyId!, {
-        allowedJoinTypes: "agent"
-      }),
+      accessApi.createOpenClawInvitePrompt(selectedCompanyId!),
    onSuccess: async (invite) => {
      setInviteError(null);
      const base = window.location.origin.replace(/\/+$/, "");
@@ -317,9 +315,9 @@ export function CompanySettings() {
        <div className="space-y-3 rounded-md border border-border px-4 py-4">
          <div className="flex items-center gap-1.5">
            <span className="text-xs text-muted-foreground">
-              Generate an agent snippet for join flows.
+              Generate an openclaw agent invite snippet.
            </span>
-            <HintIcon text="Creates an agent-only invite (10m) and renders a copy-ready snippet." />
+            <HintIcon text="Creates a short-lived OpenClaw agent invite and renders a copy-ready prompt." />
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <Button
@@ -329,7 +327,7 @@ export function CompanySettings() {
            >
              {inviteMutation.isPending
                ? "Generating..."
-                : "Generate agent snippet"}
+                : "Generate OpenClaw Invite Prompt"}
            </Button>
          </div>
          {inviteError && (
@@ -339,7 +337,7 @@ export function CompanySettings() {
            <div className="rounded-md border border-border bg-muted/30 p-2">
              <div className="flex items-center justify-between gap-2">
                <div className="text-xs text-muted-foreground">
-                  Agent Snippet
+                  OpenClaw Invite Prompt
                </div>
                {snippetCopied && (
                  <span
--- a/ui/src/pages/NewAgent.tsx
+++ b/ui/src/pages/NewAgent.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "@/lib/router";
+import { useNavigate, useSearchParams } from "@/lib/router";
 import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { agentsApi } from "../api/agents";
@@ -19,12 +19,45 @@ import { AgentConfigForm, type CreateConfigValues } from "../components/AgentCon
 import { defaultCreateValues } from "../components/agent-config-defaults";
 import { getUIAdapter } from "../adapters";
 import { AgentIcon } from "../components/AgentIconPicker";
+import {
+  DEFAULT_CODEX_LOCAL_BYPASS_APPROVALS_AND_SANDBOX,
+  DEFAULT_CODEX_LOCAL_MODEL,
+} from "@paperclipai/adapter-codex-local";
+import { DEFAULT_CURSOR_LOCAL_MODEL } from "@paperclipai/adapter-cursor-local";
+
+const SUPPORTED_ADVANCED_ADAPTER_TYPES = new Set<CreateConfigValues["adapterType"]>([
+  "claude_local",
+  "codex_local",
+  "opencode_local",
+  "pi_local",
+  "cursor",
+  "openclaw_gateway",
+]);
+
+function createValuesForAdapterType(
+  adapterType: CreateConfigValues["adapterType"],
+): CreateConfigValues {
+  const { adapterType: _discard, ...defaults } = defaultCreateValues;
+  const nextValues: CreateConfigValues = { ...defaults, adapterType };
+  if (adapterType === "codex_local") {
+    nextValues.model = DEFAULT_CODEX_LOCAL_MODEL;
+    nextValues.dangerouslyBypassSandbox =
+      DEFAULT_CODEX_LOCAL_BYPASS_APPROVALS_AND_SANDBOX;
+  } else if (adapterType === "cursor") {
+    nextValues.model = DEFAULT_CURSOR_LOCAL_MODEL;
+  } else if (adapterType === "opencode_local") {
+    nextValues.model = "";
+  }
+  return nextValues;
+}

 export function NewAgent() {
-  const { selectedCompanyId, selectedCompany } = useCompany();
+  const { selectedCompanyId } = useCompany();
  const { setBreadcrumbs } = useBreadcrumbs();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const presetAdapterType = searchParams.get("adapterType");

  const [name, setName] = useState("");
  const [title, setTitle] = useState("");
@@ -71,6 +104,18 @@ export function NewAgent() {
    }
  }, [isFirstAgent]); // eslint-disable-line react-hooks/exhaustive-deps

+  useEffect(() => {
+    const requested = presetAdapterType;
+    if (!requested) return;
+    if (!SUPPORTED_ADVANCED_ADAPTER_TYPES.has(requested as CreateConfigValues["adapterType"])) {
+      return;
+    }
+    setConfigValues((prev) => {
+      if (prev.adapterType === requested) return prev;
+      return createValuesForAdapterType(requested as CreateConfigValues["adapterType"]);
+    });
+  }, [presetAdapterType]);
+
  const createAgent = useMutation({
    mutationFn: (data: Record<string, unknown>) =>
      agentsApi.hire(selectedCompanyId!, data),