@smooai/chat-widget 0.11.0 → 0.13.0

package/src/element.ts

@@ -17,7 +17,16 @@
 import { AsYouType, isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js/min';
 import type { ChatWidgetConfig, ChatWidgetMode, ChatWidgetTheme } from './config.js';
 import { needsUserInfo, resolveConfig } from './config.js';
-import { type ChatMessage, type Citation, type ConnectionStatus, ConversationController, type IdentityRestore, type Interrupt } from './conversation.js';
+import {
+    type ChatMessage,
+    type Citation,
+    type ConnectionStatus,
+    ConversationController,
+    type IdentityRestore,
+    type Interrupt,
+    SUPPORTED_INTERACTION_CAPABILITIES,
+    type ToolCall,
+} from './conversation.js';
 import { SMOOTH_ICON_SVG } from './logo.js';
 import { cleanCitationSnippet, escapeHtml, renderMarkdown, safeHttpUrl } from './markdown.js';
 import { buildStyles } from './styles.js';
@@ -52,7 +61,7 @@ function phoneToE164(value: string): string | null {
 /** Public smooth-operator repo — the "powered by" header tag + footer link here. */
 const SMOOTH_OPERATOR_URL = 'https://github.com/SmooAI/smooth-operator';
 
-const OBSERVED = ['endpoint', 'agent-id', 'agent-name', 'logo-url', 'placeholder', 'greeting', 'start-open', 'mode', 'hide-branding'] as const;
+const OBSERVED = ['endpoint', 'agent-id', 'agent-name', 'logo-url', 'placeholder', 'greeting', 'start-open', 'mode', 'hide-branding', 'show-tool-activity'] as const;
 
 /**
  * Inline SVG icons (static, trusted strings — never interpolated with user data).
@@ -71,10 +80,168 @@ const ICON = {
     chev: `<svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
     /** OTP interrupt — a padlock. */
     lock: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="10.5" width="14" height="9.5" rx="2.2" stroke="currentColor" stroke-width="1.7"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" stroke="currentColor" stroke-width="1.7"/></svg>`,
+    /** Identity-intake interrupt — a person. */
+    user: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="8.2" r="3.4" stroke="currentColor" stroke-width="1.7"/><path d="M5.5 19.5c.8-3.1 3.4-4.8 6.5-4.8s5.7 1.7 6.5 4.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`,
     /** Tool-confirmation interrupt — a shield. */
     shield: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3 5 6v5c0 4.4 3 7.2 7 8.5 4-1.3 7-4.1 7-8.5V6l-7-3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m9 11.5 2 2 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+    /** Tool-activity chip — a wrench. */
+    tool: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7 6.3a3.5 3.5 0 0 0-4.6 4.3l-5 5a1.6 1.6 0 0 0 2.3 2.3l5-5a3.5 3.5 0 0 0 4.3-4.6l-2 2-1.7-.3-.3-1.7 2-2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
 } as const;
 
+/**
+ * The Rich Interactions **card registry**: interaction kind → overlay card.
+ * `interaction_required { kind }` looks its card up here; registering a card IS
+ * declaring the widget's render capability for that kind (see
+ * `SUPPORTED_INTERACTION_CAPABILITIES` in conversation.ts — a test keeps the
+ * two aligned). Adding a kind = one card builder + one entry.
+ *
+ * The existing OTP and tool-approval overlays are prior instances of this same
+ * shape and should retrofit onto this registry later (their wire events predate
+ * the pattern).
+ */
+export interface InteractionCardContext {
+    /** Submit kind-shaped values (resumes the parked turn; server validates). */
+    submit: (values: Record<string, unknown>) => void;
+    /** Decline the interaction (the agent continues without it). */
+    decline: () => void;
+    /** Persisted visitor identity, for pre-filling known fields. */
+    prefill: { name?: string; email?: string; phone?: string };
+    /** Wire live phone formatting + validity hint onto a form's phone input. */
+    wirePhoneField: (form: HTMLFormElement) => void;
+}
+
+export interface InteractionCard {
+    /** The render capability this card provides (goes into `supports`). */
+    capability: string;
+    /** Card header title. */
+    title: string;
+    /** Static, trusted header icon SVG. */
+    icon: string;
+    /** Build the card body for an `interaction` interrupt. */
+    build: (it: Extract<Interrupt, { kind: 'interaction' }>, ctx: InteractionCardContext) => HTMLElement;
+}
+
+/**
+ * The identity_intake card: the fields the agent requested (pre-chat form field
+ * pattern — same classes, same phone formatting), per-field server errors, a
+ * submit and a decline affordance. Server-supplied text (reason, labels, error
+ * messages) is set via `textContent` — never innerHTML.
+ */
+function buildIdentityIntakeCard(it: Extract<Interrupt, { kind: 'interaction' }>, ctx: InteractionCardContext): HTMLElement {
+    const form = document.createElement('form');
+    form.className = 'int-form';
+    form.noValidate = true;
+
+    if (it.reason) {
+        const desc = document.createElement('div');
+        desc.className = 'int-desc';
+        desc.textContent = it.reason;
+        form.appendChild(desc);
+    }
+
+    const DEFAULTS: Record<string, { label: string; type: string; autocomplete: string }> = {
+        name: { label: 'Name', type: 'text', autocomplete: 'name' },
+        email: { label: 'Email', type: 'email', autocomplete: 'email' },
+        phone: { label: 'Phone', type: 'tel', autocomplete: 'tel' },
+    };
+
+    // Parse the kind's spec defensively: `{ fields: [{ key, required, label? }] }`.
+    const rawFields = Array.isArray(it.spec.fields) ? it.spec.fields : [];
+    const fields: { key: 'name' | 'email' | 'phone'; required: boolean; label?: string }[] = [];
+    for (const f of rawFields) {
+        if (!f || typeof f !== 'object') continue;
+        const o = f as Record<string, unknown>;
+        const key = typeof o.key === 'string' ? o.key : '';
+        if (key !== 'name' && key !== 'email' && key !== 'phone') continue;
+        fields.push({ key, required: o.required === true, label: typeof o.label === 'string' ? o.label : undefined });
+    }
+    if (fields.length === 0) fields.push({ key: 'email', required: true });
+
+    for (const f of fields) {
+        const d = DEFAULTS[f.key]!;
+        const label = document.createElement('label');
+        label.className = 'pc-field';
+        const caption = document.createElement('span');
+        caption.textContent = f.label ?? d.label;
+        const input = document.createElement('input');
+        input.name = f.key;
+        input.type = d.type;
+        input.setAttribute('autocomplete', d.autocomplete);
+        input.required = f.required;
+        const prefill = ctx.prefill[f.key];
+        if (prefill) input.value = prefill;
+        label.append(caption, input);
+        if (f.key === 'phone') {
+            const hint = document.createElement('span');
+            hint.className = 'pc-hint';
+            hint.setAttribute('aria-live', 'polite');
+            label.appendChild(hint);
+        }
+        // Per-field server-side validation error (interaction_invalid).
+        const serverError = it.errors?.find((e) => e.field === f.key);
+        if (serverError) {
+            label.classList.add('invalid');
+            const err = document.createElement('span');
+            err.className = 'int-error';
+            err.textContent = serverError.message;
+            label.appendChild(err);
+        }
+        form.appendChild(label);
+    }
+
+    const row = document.createElement('div');
+    row.className = 'int-row';
+    const decline = document.createElement('button');
+    decline.className = 'int-btn';
+    decline.type = 'button';
+    decline.textContent = 'No thanks';
+    decline.addEventListener('click', () => ctx.decline());
+    const share = document.createElement('button');
+    share.className = 'int-btn primary';
+    share.type = 'submit';
+    share.textContent = 'Share details';
+    row.append(decline, share);
+    form.appendChild(row);
+
+    form.addEventListener('submit', (ev) => {
+        ev.preventDefault();
+        if (!form.reportValidity()) return;
+        const data = new FormData(form);
+        const val = (k: string) => ((data.get(k) as string | null)?.trim() || undefined);
+
+        // Phone: mirror the pre-chat rules — block a required-but-invalid number,
+        // prefer canonical E.164 when it parses (the server re-validates anyway).
+        const rawPhone = val('phone');
+        const phoneInput = form.querySelector('input[name="phone"]') as HTMLInputElement | null;
+        if (rawPhone && phoneInput && !isValidPhoneNumber(rawPhone, PHONE_DEFAULT_REGION)) {
+            const field = phoneInput.closest('.pc-field');
+            field?.classList.add('invalid');
+            const hint = field?.querySelector('.pc-hint');
+            if (hint) hint.textContent = 'Enter a valid phone number';
+            if (phoneInput.hasAttribute('required')) {
+                phoneInput.focus();
+                return;
+            }
+        }
+        const phone = rawPhone ? (phoneToE164(rawPhone) ?? rawPhone) : undefined;
+        ctx.submit({ name: val('name'), email: val('email'), phone });
+    });
+    // Same live phone formatting + validity hint as the pre-chat form.
+    ctx.wirePhoneField(form);
+    queueMicrotask(() => (form.querySelector('input') as HTMLInputElement | null)?.focus());
+    return form;
+}
+
+/** Kind → card. See the registry doc above. */
+export const INTERACTION_CARDS: Record<string, InteractionCard> = {
+    identity_intake: {
+        capability: 'identity_form',
+        title: 'Share your details',
+        icon: ICON.user,
+        build: buildIdentityIntakeCard,
+    },
+};
+
 // `safeHttpUrl` / `escapeHtml` live in `./markdown.js` (the markdown renderer
 // needs them too); re-exported here for back-compat with existing importers.
 export { escapeHtml, safeHttpUrl } from './markdown.js';
@@ -136,6 +303,10 @@ export class SmoothAgentChatElement extends HTMLElement {
     /** How many chars of {@link streamTarget} are currently shown. */
     private displayedLength = 0;
     private rafId = 0;
+    /** Block structure signature of the last-rendered streaming message (tool chips
+     *  only — text growth doesn't change it), so a chip add/resolve forces a rebuild
+     *  while plain trailing-text growth stays on the fast reveal path. */
+    private prevBlockSig = '';
 
     constructor() {
         super();
@@ -220,6 +391,7 @@ export class SmoothAgentChatElement extends HTMLElement {
             collectConsent: this.overrides.collectConsent,
             allowChatRestore: this.overrides.allowChatRestore,
             allowAnonymous: this.overrides.allowAnonymous,
+            showToolActivity: this.overrides.showToolActivity ?? this.hasAttribute('show-tool-activity'),
             theme,
         };
     }
@@ -480,21 +652,38 @@ export class SmoothAgentChatElement extends HTMLElement {
         head.className = 'int-head';
         const ico = document.createElement('span');
         ico.className = 'int-ico';
-        ico.innerHTML = it.kind === 'otp' ? ICON.lock : ICON.shield; // static, trusted
+        const card_meta = it.kind === 'interaction' ? INTERACTION_CARDS[it.interactionKind] : undefined;
+        if (it.kind === 'interaction' && !card_meta) {
+            // A kind we have no card for (shouldn't happen — we only declare
+            // capabilities for registered cards). Decline so the turn never hangs.
+            this.controller?.declineInteraction();
+            el.classList.add('hidden');
+            return;
+        }
+        ico.innerHTML = it.kind === 'otp' ? ICON.lock : it.kind === 'interaction' ? (card_meta?.icon ?? ICON.user) : ICON.shield; // static, trusted
         const title = document.createElement('span');
         title.className = 'int-title';
-        title.textContent = it.kind === 'otp' ? 'Verification required' : 'Confirm this action';
+        title.textContent = it.kind === 'otp' ? 'Verification required' : it.kind === 'interaction' ? (card_meta?.title ?? 'One more thing') : 'Confirm this action';
         head.append(ico, title);
         card.appendChild(head);
 
-        if (it.actionDescription) {
+        if (it.kind !== 'interaction' && it.actionDescription) {
             const desc = document.createElement('div');
             desc.className = 'int-desc';
             desc.textContent = it.actionDescription;
             card.appendChild(desc);
         }
 
-        if (it.kind === 'otp') {
+        if (it.kind === 'interaction') {
+            card.appendChild(
+                card_meta!.build(it, {
+                    submit: (values) => this.controller?.submitInteraction(values),
+                    decline: () => this.controller?.declineInteraction(),
+                    prefill: this.controller?.getStore().getState().identity ?? {},
+                    wirePhoneField: (form) => this.wirePhoneField(form),
+                }),
+            );
+        } else if (it.kind === 'otp') {
             if (it.sent?.maskedDestination) {
                 const sent = document.createElement('div');
                 sent.className = 'int-sent';
@@ -873,14 +1062,19 @@ export class SmoothAgentChatElement extends HTMLElement {
             // finalize transition (streaming → done) needs the markdown render + sources
             last.streaming !== prevLast.streaming ||
             // first token after the typing indicator needs the bubble swapped in
-            (!!last.streaming && !prevLast.text && !!last.text);
+            (!!last.streaming && !prevLast.text && !!last.text) ||
+            // a tool chip was added or resolved (text growth alone doesn't change this)
+            this.blockSig(last) !== this.prevBlockSig;
 
         this.messages = messages;
-
-        if (!structural && last && last.streaming && last.id === this.streamMsgId) {
-            // Fast path: the streaming tail just grew. Bump the reveal target and
-            // let the rAF loop catch up — no DOM rebuild, no per-token reflow.
-            this.streamTarget = last.text;
+        this.prevBlockSig = this.blockSig(last);
+
+        if (!structural && last && last.streaming && this.tailKey(last) === this.streamMsgId) {
+            // Fast path: the streaming (trailing) text just grew. Bump the reveal
+            // target and let the rAF loop catch up — no DOM rebuild, no per-token
+            // reflow. `tailText` is the live trailing text block for a tool turn, or
+            // the whole message for a plain-prose turn.
+            this.streamTarget = this.tailText(last);
             this.ensureRevealLoop();
             return;
         }
@@ -888,6 +1082,32 @@ export class SmoothAgentChatElement extends HTMLElement {
         this.renderMessages();
     }
 
+    /** True when an assistant message's turn invoked at least one tool. */
+    private hasToolBlocks(m?: ChatMessage): boolean {
+        return !!m?.blocks?.some((b) => b.kind === 'tool');
+    }
+
+    /** Signature that changes only when a tool chip is added or resolved (text growth is 'x'). */
+    private blockSig(m?: ChatMessage): string {
+        if (!m?.blocks) return '';
+        return m.blocks.map((b) => (b.kind === 'tool' ? `t:${b.tool.id}:${b.tool.done ? 1 : 0}` : 'x')).join('|');
+    }
+
+    /** The live (last) text block for a tool turn, else the whole message text. */
+    private tailText(m: ChatMessage): string {
+        if (this.hasToolBlocks(m) && m.blocks) {
+            const last = m.blocks[m.blocks.length - 1];
+            return last?.kind === 'text' ? last.text : '';
+        }
+        return m.text;
+    }
+
+    /** Reveal-binding key — composite for a tool-turn tail (so a new trailing block rebinds), else msg id. */
+    private tailKey(m: ChatMessage): string {
+        if (this.hasToolBlocks(m) && m.blocks) return `${m.id}#${m.blocks.length - 1}`;
+        return m.id;
+    }
+
     private renderMessages(): void {
         if (!this.messagesEl) return;
         this.resetReveal();
@@ -914,6 +1134,16 @@ export class SmoothAgentChatElement extends HTMLElement {
         }
 
         for (const msg of this.messages) {
+            // Tool-activity turns (gated by `showToolActivity`) render as an ordered
+            // strip of prose bubbles + inline tool chips instead of one bubble.
+            if (msg.role === 'assistant' && this.hasToolBlocks(msg)) {
+                this.messagesEl.appendChild(this.buildRow('assistant', this.renderAssistantBlocks(msg)));
+                if (!msg.streaming && msg.citations && msg.citations.length > 0) {
+                    this.messagesEl.appendChild(this.renderSources(msg.citations));
+                }
+                continue;
+            }
+
             const bubble = document.createElement('div');
             bubble.className = `bubble ${msg.role}`;
             if (msg.role === 'assistant' && msg.streaming && !msg.text) {
@@ -995,22 +1225,89 @@ export class SmoothAgentChatElement extends HTMLElement {
      * doesn't restart the reveal from zero), then resumes the loop.
      */
     private bindReveal(msg: ChatMessage, bubble: HTMLElement): void {
-        const carryOver = msg.id === this.streamMsgId ? Math.min(this.displayedLength, msg.text.length) : 0;
+        // `tailKey`/`tailText` collapse to the message id + full text for a plain
+        // prose turn, and to the live trailing text block for a tool turn — so both
+        // the single streaming bubble and a tool turn's trailing prose share this path.
+        const key = this.tailKey(msg);
+        const target = this.tailText(msg);
+        const carryOver = key === this.streamMsgId ? Math.min(this.displayedLength, target.length) : 0;
         this.streamBubbleEl = bubble;
-        this.streamMsgId = msg.id;
-        this.streamTarget = msg.text;
+        this.streamMsgId = key;
+        this.streamTarget = target;
         this.displayedLength = carryOver;
 
         if (this.prefersReducedMotion()) {
             // No animation: show everything immediately.
-            this.displayedLength = msg.text.length;
-            bubble.textContent = msg.text;
+            this.displayedLength = target.length;
+            bubble.textContent = target;
             return;
         }
-        bubble.textContent = msg.text.slice(0, this.displayedLength);
+        bubble.textContent = target.slice(0, this.displayedLength);
         this.ensureRevealLoop();
     }
 
+    /**
+     * Render a tool-activity assistant turn as an ordered strip: prose bubbles and
+     * inline tool chips in the order the model produced them (mirrors the daemon
+     * SPA's `blocks`). The live trailing text block (while streaming) binds to the
+     * rAF reveal; earlier/finalized text blocks render as sanitized markdown.
+     */
+    private renderAssistantBlocks(msg: ChatMessage): HTMLElement {
+        const wrap = document.createElement('div');
+        wrap.className = 'blocks';
+        const blocks = msg.blocks ?? [];
+        const lastIdx = blocks.length - 1;
+        blocks.forEach((block, i) => {
+            if (block.kind === 'tool') {
+                wrap.appendChild(this.buildToolChip(block.tool));
+                return;
+            }
+            const bubble = document.createElement('div');
+            bubble.className = 'bubble assistant';
+            if (msg.streaming && i === lastIdx) {
+                // Live trailing prose → plain text + cursor, driven by the reveal loop.
+                bubble.classList.add('cursor');
+                this.bindReveal(msg, bubble);
+            } else {
+                // Settled prose → sanitized markdown (same allowlisted renderer as bubbles).
+                bubble.classList.add('md');
+                bubble.innerHTML = renderMarkdown(block.text);
+            }
+            wrap.appendChild(bubble);
+        });
+        return wrap;
+    }
+
+    /**
+     * A single tool-activity chip: icon + tool name + status (running… / done / error),
+     * with a truncated args preview. Tool name/args are set via `textContent` so a
+     * tool payload can never inject markup.
+     */
+    private buildToolChip(tool: ToolCall): HTMLElement {
+        const chip = document.createElement('div');
+        chip.className = `toolchip ${tool.done ? (tool.isError ? 'error' : 'done') : 'running'}`;
+        chip.setAttribute('part', 'tool-chip');
+
+        const icon = document.createElement('span');
+        icon.className = 'ti';
+        icon.innerHTML = ICON.tool; // static, trusted
+        const name = document.createElement('span');
+        name.className = 'tn';
+        name.textContent = tool.name || 'tool';
+        const status = document.createElement('span');
+        status.className = 'ts';
+        status.textContent = tool.done ? (tool.isError ? 'error' : 'done') : 'running…';
+        chip.append(icon, name, status);
+
+        if (tool.args && tool.args !== '{}' && tool.args !== '""') {
+            const args = document.createElement('span');
+            args.className = 'ta';
+            args.textContent = tool.args.length > 80 ? `${tool.args.slice(0, 80)}…` : tool.args;
+            chip.appendChild(args);
+        }
+        return chip;
+    }
+
     /** Start the rAF loop if it isn't already running. */
     private ensureRevealLoop(): void {
         if (this.prefersReducedMotion() || typeof requestAnimationFrame !== 'function') {

package/src/index.ts

@@ -39,8 +39,10 @@ export {
     type ConnectionStatus,
     type ConversationEvents,
     type IdentityRestore,
+    type MessageBlock,
     type RestorableConversation,
     type Role,
+    type ToolCall,
     type UserInfo,
 } from './conversation.js';
 export {

package/src/styles.ts

@@ -29,6 +29,7 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
     --sac-bg: ${theme.background};
     --sac-primary: ${theme.primary};
     --sac-primary-text: ${theme.primaryText};
+    --sac-secondary: ${theme.secondary};
     --sac-assistant-bubble: ${theme.assistantBubble};
     --sac-assistant-bubble-text: ${theme.assistantBubbleText};
     --sac-user-bubble: ${theme.userBubble};
@@ -349,6 +350,47 @@ ${
 }
 @keyframes sac-blink { to { opacity: 0 } }
 
+/* Interleaved tool-activity strip (gated by showToolActivity): prose bubbles
+   and inline tool chips stacked in the order the model produced them. */
+.blocks { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
+.blocks .bubble { align-self: flex-start; }
+.toolchip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 5px 10px;
+    border-radius: 99px;
+    font-size: 12px;
+    line-height: 1.3;
+    color: color-mix(in srgb, var(--sac-text) 78%, transparent);
+    background: color-mix(in srgb, var(--sac-text) 6%, transparent);
+    border: 1px solid color-mix(in srgb, var(--sac-text) 12%, transparent);
+    animation: sac-msg-in .3s var(--sac-ease) both;
+}
+.toolchip .ti { display: inline-flex; flex: none; opacity: .8; }
+.toolchip .ti svg { width: 13px; height: 13px; }
+.toolchip .tn { font-weight: 600; letter-spacing: .01em; }
+.toolchip .ts { opacity: .7; }
+.toolchip .ta {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    opacity: .6;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+.toolchip.running { border-color: color-mix(in srgb, var(--sac-primary) 45%, transparent); }
+.toolchip.running .ts { color: var(--sac-primary); opacity: 1; animation: sac-typing 1.3s ease-in-out infinite; }
+.toolchip.done .ts::before { content: '✓ '; }
+.toolchip.error {
+    color: var(--sac-secondary);
+    border-color: color-mix(in srgb, var(--sac-secondary) 50%, transparent);
+    background: color-mix(in srgb, var(--sac-secondary) 10%, transparent);
+}
+.toolchip.error .ts::before { content: '! '; }
+
 /* ─────────────── Rendered markdown (assistant bubbles / snippets) ─────────── */
 /* The renderer (markdown.ts) emits a small allowlisted set of tags; these rules
    keep them legible inside the tight Aurora-Glass bubble + citation card. */
@@ -643,6 +685,9 @@ ${
     border-color: color-mix(in srgb, var(--sac-primary) 60%, transparent);
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--sac-primary) 14%, transparent);
 }
+.int-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.int-form .pc-field input { width: 100%; box-sizing: border-box; }
+.int-form .int-error { margin-top: 2px; }
 .int-btn {
     border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
     background: var(--sac-surface-2);
@@ -662,8 +707,14 @@ ${
     color: var(--sac-primary-text);
     box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--sac-primary) 65%, transparent);
 }
-.int-row .int-btn { flex: 1; }
-.int-row .int-input + .int-btn { flex: 0 0 auto; }
+.int-row .int-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.int-form .pc-field input { width: 100%; box-sizing: border-box; }
+.int-form .int-error { margin-top: 2px; }
+.int-btn { flex: 1; }
+.int-row .int-input + .int-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.int-form .pc-field input { width: 100%; box-sizing: border-box; }
+.int-form .int-error { margin-top: 2px; }
+.int-btn { flex: 0 0 auto; }
 .int-error { margin-top: 8px; font-size: 12px; color: #f87171; }
 .int-card { position: relative; }
 .int-close {