@datalayer/agent-runtimes 1.3.106 → 1.3.109

package/lib/examples/pap/PapGuidedJourneyView.js

@@ -3,10 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Button, Heading, Label, Text } from '@primer/react';
-import { buildDirectSignInRequest, buildSessionAssertionClaims, parseDiscoveryDocument, } from '@datalayer/personal-agent-protocol';
+import { contribution, definePlugin } from '@datalayer/reactor';
+import { Button, Heading, IconButton, Label, Text } from '@primer/react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react';
+import { ConversationClient, DpopFetchClient, DpopProofProviders, SecretValue, buildPapReactor, buildDirectSignInRequest, buildSessionAssertionClaims, parseDiscoveryDocument, } from '@datalayer/personal-agent-protocol';
+import { ChatMessageList } from '../../chat/messages/ChatMessageList';
 import { PapExamplePage } from './PapExamplePage';
 const conversationStart = [
     {
@@ -125,18 +128,31 @@ Location: https://atlas.example/oauth/callback
 DPoP: [fresh proof]
 Content-Type: application/json
 
-{ "message_id": "msg_offer", "text": "The user has signed in." }`,
-        response: `200 OK
 {
-  "text": "Choose an even exchange or refund.",
-  "data": { "options": ["exchange", "refund"] },
-  "responder": { "type": "ai", "name": "Northstar" }
+  "message": {
+    "id": "msg_offer",
+    "sender": "agent",
+    "text": "The user has signed in. Continue the return request."
+  }
+}`,
+        response: `202 Accepted
+{
+  "conversation_id": "cnv_return",
+  "events": [{
+    "type": "message",
+    "message": {
+      "role": "company",
+      "text": "Choose an even exchange or refund."
+    }
+  }],
+  "status": "idle",
+  "responder": "agent"
 }`,
     },
     {
         title: 'The exchange is set',
         summary: "Atlas passes on the user's exact choice. Northstar confirms the exchange and the conversation closes with a durable result.",
-        channel: 'Operation + result',
+        channel: 'Conversation result',
         messages: [
             ...conversationStart,
             { speaker: 'company', text: 'Please sign in so I can find the order.' },
@@ -157,18 +173,30 @@ Content-Type: application/json
             { label: 'Conversation', value: 'Closed' },
         ],
         method: 'POST',
-        target: 'https://api.northstar.example/poppy/operations/op_exchange/confirm',
-        detailLabel: 'Exact user-authorized action',
+        target: 'https://api.northstar.example/poppy/conversations/cnv_return/messages',
+        detailLabel: 'Atlas ↔ company agent',
         request: `Authorization: DPoP [host-only Session Token]
 DPoP: [fresh proof]
-Idempotency-Key: msg_exchange_choice
+Content-Type: application/json
 
-{ "revision": 1, "choice": "exchange" }`,
-        response: `200 OK
 {
-  "status": "succeeded",
-  "result": { "return_code": "NRT-7K4Q" },
-  "conversation_status": "closed"
+  "message": {
+    "id": "msg_exchange_choice",
+    "sender": "agent",
+    "text": "The user chose the even exchange."
+  }
+}`,
+        response: `202 Accepted
+{
+  "conversation_id": "cnv_return",
+  "events": [{
+    "type": "message",
+    "message": {
+      "role": "company",
+      "text": "The exchange is arranged."
+    }
+  }],
+  "status": "closed"
 }`,
     },
 ];
@@ -177,7 +205,24 @@ const speakerName = {
     atlas: 'Atlas',
     company: 'Northstar',
 };
-const validateJourneyFixtures = async () => {
+const companyReply = (response) => {
+    if (!('events' in response)) {
+        throw new Error('Northstar returned a receipt without a message');
+    }
+    const reply = response.events.find(event => event.type === 'message' && event.message?.role === 'company')?.message?.text;
+    if (!reply) {
+        throw new Error('Northstar returned no company reply');
+    }
+    return reply;
+};
+/**
+ * Run the visible transcript through the actual PAP conversation client.
+ *
+ * The company side is deliberately an in-page deterministic simulator: this
+ * makes the example runnable without an account while ensuring that requests,
+ * proof-bound transport, response parsing, and messages all use the real SDK.
+ */
+const runJourney = async () => {
     parseDiscoveryDocument({
         protocol_version: '0.1',
         organization: { name: 'Northstar Outfitters', domain: 'northstar.example' },
@@ -207,42 +252,182 @@ const validateJourneyFixtures = async () => {
         redirectUri: 'https://atlas.example/oauth/callback',
         scopes: ['orders:read', 'orders:return'],
     });
+    const replies = [
+        'I can help with that. Please sign in so I can find the order.',
+        'Order NS-48213 can be exchanged for the warmer Summit jacket at no extra cost, or refunded in full.',
+        'The exchange is arranged. The Summit jacket ships tomorrow, and return code NRT-7K4Q is ready.',
+    ];
+    let requestIndex = 0;
+    const localCompanyFetch = async (_input, init) => {
+        const index = requestIndex++;
+        const reply = replies[index];
+        if (!reply) {
+            return new Response(JSON.stringify({ error: 'unexpected_request' }), {
+                status: 400,
+                headers: { 'content-type': 'application/json' },
+            });
+        }
+        const incoming = JSON.parse(String(init?.body ?? '{}'));
+        return new Response(JSON.stringify({
+            conversation_id: 'cnv_return',
+            events: [
+                {
+                    id: `evt_${index + 1}`,
+                    type: 'message',
+                    created_at: `2026-10-10T09:4${index}:00Z`,
+                    message: {
+                        id: `reply_${index + 1}`,
+                        sender: 'agent',
+                        role: 'company',
+                        text: reply,
+                        context: { in_reply_to: incoming.message?.id ?? 'unknown' },
+                    },
+                },
+            ],
+            cursor: `cursor_${index + 1}`,
+            has_more: false,
+            status: index === replies.length - 1 ? 'closed' : 'idle',
+            responder: 'agent',
+        }), {
+            status: index === 0 ? 201 : 202,
+            headers: { 'content-type': 'application/json' },
+        });
+    };
+    const securityPlugin = definePlugin({
+        name: '@datalayer/loop-example-pap-guided-security',
+        contributes: [
+            contribution(DpopProofProviders, {
+                async create() {
+                    return new SecretValue(`host-only-proof-${requestIndex + 1}`);
+                },
+            }, { id: 'guided-example-dpop' }),
+        ],
+    });
+    const reactor = buildPapReactor({ fetch: localCompanyFetch }, [
+        securityPlugin,
+    ]);
+    try {
+        const transport = new DpopFetchClient({
+            reactor,
+            fetch: localCompanyFetch,
+        });
+        const conversations = new ConversationClient({ reactor, transport });
+        const session = (signedIn) => ({
+            accessToken: new SecretValue(signedIn ? 'host-only-signed-in-token' : 'host-only-session-token'),
+            tokenType: 'DPoP',
+            expiresIn: 300,
+            scopes: signedIn ? ['orders:read', 'orders:return'] : ['poppy:read'],
+            sessionId: 'ses_guided_example',
+            signedIn,
+        });
+        const requestOptions = (token) => ({
+            token,
+            tenantId: 'guided-example',
+            pairwiseUserId: 'usr_host_only_journey',
+            issuer: 'https://auth.northstar.example',
+            wait: 0,
+        });
+        const endpoint = 'https://api.northstar.example/poppy/conversations';
+        const started = await conversations.start(endpoint, {
+            id: conversations.generateMessageId(),
+            sender: 'agent',
+            text: conversationStart[0]?.text,
+        }, requestOptions(session(false)));
+        const signInReply = companyReply(started);
+        const offer = companyReply(await conversations.send(endpoint, 'cnv_return', {
+            id: conversations.generateMessageId(),
+            sender: 'agent',
+            text: 'The user has signed in. Continue the return request.',
+        }, requestOptions(session(true))));
+        const confirmation = companyReply(await conversations.send(endpoint, 'cnv_return', {
+            id: conversations.generateMessageId(),
+            sender: 'agent',
+            text: 'The user chose the even exchange.',
+        }, requestOptions(session(true))));
+        const signedInMessages = [
+            ...conversationStart,
+            { speaker: 'company', text: signInReply },
+            { speaker: 'user', text: "I'm signed in." },
+            { speaker: 'atlas', text: "Thanks. I'll continue the same request." },
+            { speaker: 'company', text: offer },
+        ];
+        return [
+            conversationStart,
+            [...conversationStart, { speaker: 'company', text: signInReply }],
+            conversationStart,
+            signedInMessages,
+            [
+                ...signedInMessages,
+                { speaker: 'user', text: "Let's do the exchange." },
+                { speaker: 'company', text: confirmation },
+            ],
+        ];
+    }
+    finally {
+        reactor.stop();
+    }
+};
+const ChatPhone = ({ step, messages, onAuthorized }) => {
+    const messagesEndRef = useRef(null);
+    const displayItems = useMemo(() => messages.map((message, index) => ({
+        id: `guided-${step.channel}-${index}`,
+        role: message.speaker === 'user' ? 'user' : 'assistant',
+        content: message.text,
+        createdAt: new Date(`2026-10-10T09:4${index}:00Z`),
+        speaker: {
+            id: message.speaker,
+            name: speakerName[message.speaker],
+            role: message.speaker === 'atlas'
+                ? 'personal agent'
+                : message.speaker === 'company'
+                    ? 'company agent'
+                    : 'person',
+            tone: message.speaker === 'company' ? 'success' : 'accent',
+            initials: message.speaker === 'company'
+                ? 'N'
+                : message.speaker === 'atlas'
+                    ? 'A'
+                    : 'Y',
+        },
+    })), [messages, step.channel]);
+    return (_jsxs(Box, { width: "100%", maxWidth: 340, height: 560, mx: "auto", border: "7px solid", borderColor: "fg.default", borderRadius: 20, bg: "canvas.default", overflow: "hidden", boxShadow: "shadow.large", display: "flex", flexDirection: "column", children: [_jsxs(Box, { px: 3, py: 2, display: "flex", justifyContent: "space-between", borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 600 }, children: "9:41" }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 600 }, children: "5G \u00B7 92%" })] }), step.phoneMode === 'signin' ? (_jsxs(Box, { flex: 1, display: "flex", flexDirection: "column", children: [_jsx(Box, { bg: "success.emphasis", color: "fg.onEmphasis", p: 3, children: _jsx(Text, { sx: { fontWeight: 700 }, children: "N \u00B7 Northstar Outfitters" }) }), _jsxs(Box, { p: 3, display: "flex", flexDirection: "column", gap: 3, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "auth.northstar.example" }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Let Atlas access your order?" }), _jsx(Text, { children: "Atlas can read order NS-48213 and arrange the return you requested." }), _jsxs(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "Requested access" }), _jsx(Text, { as: "p", sx: { mt: 1, color: 'fg.muted' }, children: "Read this order \u00B7 Arrange one return" })] }), _jsx(Button, { variant: "primary", block: true, onClick: onAuthorized, children: "Authorize Atlas" }), _jsx(Text, { textAlign: "center", sx: { fontSize: 0, color: 'fg.muted' }, children: "Passwords and account credentials stay with Northstar." })] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { px: 3, py: 2, display: "flex", gap: 2, alignItems: "center", children: [_jsx(Box, { width: 30, height: 30, borderRadius: "50%", bg: "accent.emphasis", color: "fg.onEmphasis", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, children: "A" }), _jsxs(Box, { children: [_jsx(Text, { as: "div", sx: { fontWeight: 700 }, children: "Atlas" }), _jsx(Text, { as: "div", sx: { fontSize: 0, color: 'fg.muted' }, children: "Your personal agent" })] })] }), _jsx(Box, { flex: 1, overflow: "auto", bg: "canvas.subtle", children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: false, isStreaming: false, showLoadingIndicator: false, hideMessagesAfterToolUI: false, avatarConfig: {
+                                userAvatar: 'Y',
+                                assistantAvatar: 'A',
+                                showAvatars: true,
+                                avatarSize: 26,
+                                userAvatarBg: 'accent.muted',
+                                assistantAvatarBg: 'accent.emphasis',
+                            }, padding: 2, emptyContent: null, messagesEndRef: messagesEndRef, onRespond: async () => undefined, density: "comfortable" }) })] }))] }));
 };
-const ChatPhone = ({ step, onAuthorized }) => (_jsxs(Box, { width: "100%", maxWidth: 340, height: 560, mx: "auto", border: "10px solid", borderColor: "fg.default", borderRadius: 36, bg: "canvas.default", overflow: "hidden", boxShadow: "shadow.large", display: "flex", flexDirection: "column", children: [_jsxs(Box, { px: 3, py: 2, display: "flex", justifyContent: "space-between", borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 600 }, children: "9:41" }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 600 }, children: "5G \u00B7 92%" })] }), step.phoneMode === 'signin' ? (_jsxs(Box, { flex: 1, display: "flex", flexDirection: "column", children: [_jsx(Box, { bg: "success.emphasis", color: "fg.onEmphasis", p: 3, children: _jsx(Text, { sx: { fontWeight: 700 }, children: "N \u00B7 Northstar Outfitters" }) }), _jsxs(Box, { p: 3, display: "flex", flexDirection: "column", gap: 3, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "auth.northstar.example" }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Let Atlas access your order?" }), _jsx(Text, { children: "Atlas can read order NS-48213 and arrange the return you requested." }), _jsxs(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "Requested access" }), _jsx(Text, { as: "p", sx: { mt: 1, color: 'fg.muted' }, children: "Read this order \u00B7 Arrange one return" })] }), _jsx(Button, { variant: "primary", block: true, onClick: onAuthorized, children: "Authorize Atlas" }), _jsx(Text, { textAlign: "center", sx: { fontSize: 0, color: 'fg.muted' }, children: "Passwords and account credentials stay with Northstar." })] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { px: 3, py: 2, display: "flex", gap: 2, alignItems: "center", children: [_jsx(Box, { width: 30, height: 30, borderRadius: "50%", bg: "accent.emphasis", color: "fg.onEmphasis", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, children: "A" }), _jsxs(Box, { children: [_jsx(Text, { as: "div", sx: { fontWeight: 700 }, children: "Atlas" }), _jsx(Text, { as: "div", sx: { fontSize: 0, color: 'fg.muted' }, children: "Your personal agent" })] })] }), _jsx(Box, { flex: 1, overflow: "auto", bg: "canvas.subtle", p: 2, display: "flex", flexDirection: "column", gap: 2, children: step.messages.map((message, index) => {
-                        const fromUser = message.speaker === 'user';
-                        return (_jsxs(Box, { alignSelf: fromUser ? 'flex-end' : 'flex-start', maxWidth: "88%", px: 2, py: 2, borderRadius: 3, color: fromUser ? 'fg.onEmphasis' : 'fg.default', bg: fromUser ? 'accent.emphasis' : 'canvas.default', border: fromUser ? 'none' : '1px solid', borderColor: "border.default", children: [!fromUser ? (_jsx(Text, { as: "div", sx: {
-                                        mb: 1,
-                                        fontSize: 0,
-                                        fontWeight: 700,
-                                        color: message.speaker === 'company'
-                                            ? 'success.fg'
-                                            : 'accent.fg',
-                                    }, children: speakerName[message.speaker] })) : null, _jsx(Text, { sx: { fontSize: 1 }, children: message.text })] }, `${message.speaker}-${index}`));
-                    }) })] }))] }));
 /** A five-step user, company, and wire-level PAP walkthrough. */
 const PapGuidedJourneyView = () => {
     const [stepIndex, setStepIndex] = useState(0);
     const [detailsOpen, setDetailsOpen] = useState(true);
-    const [fixtureState, setFixtureState] = useState('checking');
+    const [interactionState, setInteractionState] = useState('checking');
+    const [liveMessages, setLiveMessages] = useState(null);
     const step = STEPS[stepIndex] ?? STEPS[0];
+    const messages = liveMessages?.[stepIndex] ?? step.messages;
     useEffect(() => {
-        void validateJourneyFixtures()
-            .then(() => setFixtureState('valid'))
-            .catch(() => setFixtureState('invalid'));
+        void runJourney()
+            .then(result => {
+            setLiveMessages(result);
+            setInteractionState('valid');
+        })
+            .catch(() => setInteractionState('invalid'));
     }, []);
     const go = (next) => {
         setStepIndex(Math.max(0, Math.min(STEPS.length - 1, next)));
     };
-    return (_jsxs(PapExamplePage, { eyebrow: "PAP \u00B7 Guided interaction", title: "A return, from first request to confirmed exchange", description: "Follow what the user experiences, what the company is allowed to see, and which PAP exchange moves the work forward. The story uses SDK-validated discovery, Session, and Direct Sign-In fixtures; protocol credentials are always represented as host-only placeholders.", maxWidth: 1180, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap", p: 3, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Box, { children: [_jsx(Label, { variant: "accent", children: "Company agent \u00B7 Direct Sign-In" }), _jsx(Heading, { as: "h2", sx: { mt: 1, fontSize: 2 }, children: "The jacket is not warm enough" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Atlas finds Northstar, keeps one Session, and asks before acting." })] }), _jsx(Label, { variant: fixtureState === 'valid' ? 'success' : 'secondary', children: fixtureState === 'valid'
-                            ? 'SDK fixtures validated'
-                            : fixtureState === 'invalid'
-                                ? 'Fixture validation failed'
-                                : 'Validating SDK fixtures…' })] }), _jsx(Box, { display: "flex", gap: 2, flexWrap: "wrap", "aria-label": "Journey steps", children: STEPS.map((candidate, index) => (_jsxs(Button, { variant: index === stepIndex ? 'primary' : 'default', onClick: () => go(index), children: [index + 1, ". ", candidate.channel] }, candidate.title))) }), _jsxs(Box, { display: "grid", sx: {
+    return (_jsxs(PapExamplePage, { eyebrow: "PAP \u00B7 Guided interaction", title: "A return, from first request to confirmed exchange", description: "Follow what the user experiences, what the company is allowed to see, and which PAP exchange moves the work forward. Northstar's replies are parsed from real PAP ConversationClient requests against a deterministic in-page simulator; discovery and sign-in values use the SDK too. No external retailer, account, or language model is implied.", maxWidth: 1180, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap", p: 3, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Box, { children: [_jsx(Label, { variant: "accent", children: "Company agent \u00B7 Direct Sign-In" }), _jsx(Heading, { as: "h2", sx: { mt: 1, fontSize: 2 }, children: "The jacket is not warm enough" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Atlas finds Northstar, keeps one Session, and asks before acting." })] }), _jsx(Label, { variant: interactionState === 'valid' ? 'success' : 'secondary', children: interactionState === 'valid'
+                            ? 'Live local PAP exchange complete'
+                            : interactionState === 'invalid'
+                                ? 'Local PAP exchange failed'
+                                : 'Running local PAP exchange…' })] }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", children: [_jsx(IconButton, { icon: ChevronLeftIcon, "aria-label": "Previous journey tab", disabled: stepIndex === 0, onClick: () => go(stepIndex - 1) }), _jsx(Box, { display: "flex", gap: 2, overflow: "auto", flex: 1, "aria-label": "Journey steps", children: STEPS.map((candidate, index) => (_jsxs(Button, { variant: index === stepIndex ? 'primary' : 'default', onClick: () => go(index), sx: { flexShrink: 0 }, children: [index + 1, ". ", candidate.channel] }, candidate.title))) }), _jsx(IconButton, { icon: ChevronRightIcon, "aria-label": "Next journey tab", disabled: stepIndex === STEPS.length - 1, onClick: () => go(stepIndex + 1) })] }), _jsxs(Box, { display: "grid", sx: {
                     gridTemplateColumns: [
                         '1fr',
                         'minmax(300px, 0.78fr) minmax(460px, 1.4fr)',
                     ],
-                }, gap: 4, alignItems: "start", children: [_jsx(ChatPhone, { step: step, onAuthorized: () => go(stepIndex + 1) }), _jsxs(Box, { minHeight: 560, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", display: "flex", flexDirection: "column", children: [_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Text, { as: "div", sx: { fontSize: 0, color: 'fg.muted' }, children: ["Step ", stepIndex + 1, " of ", STEPS.length, " \u00B7 ", step.channel] }), _jsx(Heading, { as: "h2", sx: { mt: 1, fontSize: 3 }, children: step.title }), _jsx(Text, { as: "p", sx: { mt: 2, color: 'fg.muted' }, children: step.summary })] }), _jsxs(Box, { p: 3, display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", children: [_jsx(Box, { width: 24, height: 24, borderRadius: 1, bg: "success.emphasis", color: "fg.onEmphasis", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, children: "N" }), _jsx(Text, { sx: { fontWeight: 700 }, children: "What Northstar sees" })] }), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.subtle", px: 3, children: step.facts.map(fact => (_jsxs(Box, { display: "flex", justifyContent: "space-between", gap: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", sx: { '&:last-child': { borderBottom: 0 } }, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: fact.label }), _jsx(Text, { textAlign: "right", sx: { fontWeight: 600 }, children: fact.value })] }, fact.label))) }), _jsxs(Button, { variant: "invisible", sx: { alignSelf: 'flex-start', px: 0 }, onClick: () => setDetailsOpen(open => !open), children: ['{ }', " ", detailsOpen ? 'Hide' : 'Show', " protocol details"] }), detailsOpen ? (_jsxs(Box, { bg: "#0d1117", color: "#c9d1d9", borderRadius: 2, overflow: "hidden", children: [_jsxs(Box, { px: 3, py: 2, display: "flex", justifyContent: "space-between", gap: 2, borderBottom: "1px solid", borderColor: "#30363d", children: [_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: step.detailLabel }), _jsx(Label, { variant: "secondary", children: step.channel })] }), _jsxs(Box, { p: 3, maxHeight: 270, overflow: "auto", children: [_jsxs(Text, { as: "div", sx: {
+                }, gap: 4, alignItems: "start", children: [_jsx(ChatPhone, { step: step, messages: messages, onAuthorized: () => go(stepIndex + 1) }), _jsxs(Box, { minHeight: 560, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", display: "flex", flexDirection: "column", children: [_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Text, { as: "div", sx: { fontSize: 0, color: 'fg.muted' }, children: ["Step ", stepIndex + 1, " of ", STEPS.length, " \u00B7 ", step.channel] }), _jsx(Heading, { as: "h2", sx: { mt: 1, fontSize: 3 }, children: step.title }), _jsx(Text, { as: "p", sx: { mt: 2, color: 'fg.muted' }, children: step.summary })] }), _jsxs(Box, { p: 3, display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", children: [_jsx(Box, { width: 24, height: 24, borderRadius: 1, bg: "success.emphasis", color: "fg.onEmphasis", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, children: "N" }), _jsx(Text, { sx: { fontWeight: 700 }, children: "What Northstar sees" })] }), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.subtle", px: 3, children: step.facts.map(fact => (_jsxs(Box, { display: "flex", justifyContent: "space-between", gap: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", sx: { '&:last-child': { borderBottom: 0 } }, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: fact.label }), _jsx(Text, { textAlign: "right", sx: { fontWeight: 600 }, children: fact.value })] }, fact.label))) }), _jsxs(Button, { variant: "invisible", sx: { alignSelf: 'flex-start', px: 0 }, onClick: () => setDetailsOpen(open => !open), children: ['{ }', " ", detailsOpen ? 'Hide' : 'Show', " protocol details"] }), detailsOpen ? (_jsxs(Box, { bg: "#0d1117", color: "#c9d1d9", borderRadius: 2, overflow: "hidden", children: [_jsxs(Box, { px: 3, py: 2, display: "flex", justifyContent: "space-between", gap: 2, borderBottom: "1px solid", borderColor: "#30363d", children: [_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: step.detailLabel }), _jsx(Label, { variant: "secondary", children: step.channel })] }), _jsxs(Box, { p: 3, maxHeight: 270, overflow: "auto", children: [_jsxs(Text, { as: "div", sx: {
                                                             fontFamily: 'mono',
                                                             fontWeight: 700,
                                                             color: '#ff7b72',

package/lib/specs/actions.js

@@ -42,6 +42,7 @@ export const SERVER_ACTIONS = {
         default: [],
         tools: {},
         conditions: {},
+        signs: {},
     },
     chart: {
         checked: '2026-10-02',
@@ -76,6 +77,7 @@ export const SERVER_ACTIONS = {
             generate_spreadsheet: ['read'],
         },
         conditions: {},
+        signs: {},
     },
     datalayer: {
         checked: '2026-10-05',
@@ -227,6 +229,7 @@ export const SERVER_ACTIONS = {
             mount_local_folder: ['read'],
         },
         conditions: {},
+        signs: {},
     },
     earthdata: {
         checked: '2026-10-07',
@@ -237,11 +240,13 @@ export const SERVER_ACTIONS = {
             download_earth_data_granules: ['write'],
         },
         conditions: {},
+        signs: {},
     },
     eurus: {
         default: [],
         tools: {},
         conditions: {},
+        signs: {},
     },
     filesystem: {
         checked: '2026-10-02',
@@ -263,11 +268,13 @@ export const SERVER_ACTIONS = {
             list_allowed_directories: ['read'],
         },
         conditions: {},
+        signs: {},
     },
     github: {
         default: [],
         tools: {},
         conditions: {},
+        signs: {},
     },
     'google-workspace': {
         checked: '2026-10-02',
@@ -536,21 +543,29 @@ export const SERVER_ACTIONS = {
                 },
             ],
         },
+        signs: {
+            send_gmail_message: 'body',
+            draft_gmail_message: 'body',
+            send_message: 'message_text',
+        },
     },
     huggingface: {
         default: [],
         tools: {},
         conditions: {},
+        signs: {},
     },
     kaggle: {
         default: [],
         tools: {},
         conditions: {},
+        signs: {},
     },
     odoo: {
         default: [],
         tools: {},
         conditions: {},
+        signs: {},
     },
     'odoo-accounting': {
         checked: '2026-10-05',
@@ -607,11 +622,13 @@ export const SERVER_ACTIONS = {
             odoo_accounting_set_tax_grids: ['write'],
         },
         conditions: {},
+        signs: {},
     },
     salesforce: {
         default: [],
         tools: {},
         conditions: {},
+        signs: {},
     },
     slack: {
         checked: '2026-10-02',
@@ -627,6 +644,10 @@ export const SERVER_ACTIONS = {
             slack_get_user_profile: ['read'],
         },
         conditions: {},
+        signs: {
+            slack_post_message: 'text',
+            slack_reply_to_thread: 'text',
+        },
     },
     tavily: {
         checked: '2026-10-02',
@@ -639,6 +660,7 @@ export const SERVER_ACTIONS = {
             tavily_research: ['read'],
         },
         conditions: {},
+        signs: {},
     },
 };
 /**