@pillar-ai/sdk 0.1.28 → 0.1.30

package/dist/api/ag-ui-bridge.d.ts

@@ -0,0 +1,49 @@
+/**
+ * AG-UI Bridge
+ *
+ * Temporary bridge that converts Phase 1's JSON-RPC wrapped AG-UI events
+ * to native AG-UI events. This allows the SDK to use AG-UI patterns while
+ * the backend still uses JSON-RPC transport.
+ *
+ * Will be removed after Phase 3 (pure AG-UI transport).
+ */
+import type { AGUIEvent } from '@ag-ui/core';
+/**
+ * Unwrap an AG-UI event from a JSON-RPC notification.
+ *
+ * Phase 1 backend wraps AG-UI events like this:
+ * {
+ *   "jsonrpc": "2.0",
+ *   "method": "notifications/progress",
+ *   "params": {
+ *     "ag_ui_event": { "type": "RUN_STARTED", ... }
+ *   }
+ * }
+ *
+ * @param jsonRpcEvent - The JSON-RPC notification from the backend
+ * @returns The unwrapped AG-UI event, or null if not an AG-UI event
+ */
+export declare function unwrapAGUIEvent(jsonRpcEvent: unknown): AGUIEvent | null;
+/**
+ * Check if a JSON-RPC event contains an AG-UI event.
+ */
+export declare function isAGUIWrappedEvent(jsonRpcEvent: unknown): boolean;
+/**
+ * Convert legacy MCP progress events to AG-UI events.
+ *
+ * This is for backwards compatibility during the transition.
+ * Converts old-style progress events to AG-UI events.
+ *
+ * @param legacyEvent - The legacy MCP progress event
+ * @returns An array of AG-UI events (may be multiple for some conversions)
+ */
+export declare function convertLegacyProgressToAGUI(legacyEvent: Record<string, unknown>): AGUIEvent[];
+/**
+ * Process a raw SSE event and extract AG-UI events.
+ *
+ * Handles both new AG-UI wrapped events and legacy progress events.
+ *
+ * @param rawEvent - The parsed JSON from an SSE data line
+ * @returns An array of AG-UI events
+ */
+export declare function processSSEEvent(rawEvent: unknown): AGUIEvent[];

package/dist/api/ag-ui-client.d.ts

@@ -0,0 +1,102 @@
+/**
+ * AG-UI Protocol Client for Pillar SDK
+ *
+ * Implements the AG-UI specification for streaming agent interactions.
+ * Uses the @ag-ui/client HttpAgent for transport.
+ *
+ * Copyright (C) 2025 Pillar Team
+ */
+import type { ResolvedConfig } from '../core/config';
+export interface AGUIStreamCallbacks {
+    /** Called when run starts */
+    onRunStarted?: (runId: string) => void;
+    /** Called when run completes successfully */
+    onRunFinished?: () => void;
+    /** Called on error */
+    onError?: (error: Error) => void;
+    /** Called when a step starts */
+    onStepStarted?: (stepName: string) => void;
+    /** Called when a step finishes */
+    onStepFinished?: (stepName: string) => void;
+    /** Called for text message streaming */
+    onTextContent?: (messageId: string, delta: string) => void;
+    /** Called when text message completes */
+    onTextComplete?: (messageId: string, fullContent: string) => void;
+    /** Called when tool call starts (for UI display) */
+    onToolCallStart?: (toolCallId: string, toolName: string) => void;
+    /** Called with tool call arguments */
+    onToolCallArgs?: (toolCallId: string, argsJson: string) => void;
+    /** Called when tool call completes */
+    onToolCallEnd?: (toolCallId: string) => void;
+    /** Called when tool result is available */
+    onToolCallResult?: (toolCallId: string, result: string) => void;
+    /** Called for state delta events (sources, actions, plan) */
+    onStateDelta?: (delta: unknown[]) => void;
+    /** Called for state snapshots */
+    onStateSnapshot?: (state: unknown) => void;
+}
+export interface ClientTool {
+    name: string;
+    description: string;
+    parameters: Record<string, unknown>;
+    /** Handler function - called when agent requests this tool */
+    handler?: (args: Record<string, unknown>) => Promise<unknown>;
+}
+export declare class AGUIClient {
+    private config;
+    private agent;
+    private currentRunId;
+    private currentThreadId;
+    private messageAccumulators;
+    private toolArgAccumulators;
+    private toolCallNames;
+    private registeredTools;
+    constructor(config: ResolvedConfig);
+    /**
+     * Get or create a persistent thread ID for this session.
+     */
+    private getOrCreateThreadId;
+    private getBrowserLanguage;
+    /**
+     * Register a client-side tool that can be called by the agent.
+     */
+    registerTool(tool: ClientTool): void;
+    /**
+     * Unregister a client-side tool.
+     */
+    unregisterTool(toolName: string): void;
+    /**
+     * Send a message and stream the agent's response.
+     */
+    chat(message: string, callbacks: AGUIStreamCallbacks, options?: {
+        history?: Array<{
+            role: 'user' | 'assistant';
+            content: string;
+        }>;
+        userContext?: Array<{
+            type: string;
+            [key: string]: unknown;
+        }>;
+        signal?: AbortSignal;
+    }): Promise<void>;
+    /**
+     * Execute a client-side tool if registered.
+     */
+    private maybeExecuteClientTool;
+    /**
+     * Send tool execution result back to the server.
+     */
+    sendToolResult(toolCallId: string, result: unknown, error?: string): Promise<void>;
+    /**
+     * Start a new conversation thread.
+     */
+    newThread(): string;
+    /**
+     * Get current thread ID.
+     */
+    get threadId(): string;
+    /**
+     * Get current run ID.
+     */
+    get runId(): string | null;
+}

package/dist/api/ag-ui-handler.d.ts

@@ -0,0 +1,89 @@
+/**
+ * AG-UI Event Handler
+ *
+ * Processes AG-UI protocol events and maintains UI state.
+ * Replaces the complex JSON-RPC parsing in mcp-client.ts.
+ */
+import type { AGUIEvent } from '@ag-ui/core';
+/** A streaming text message being accumulated */
+export interface StreamingMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    complete: boolean;
+    /** Which step this message belongs to (for thinking vs response) */
+    stepName?: string;
+}
+/** A tool call being tracked */
+export interface ToolCallState {
+    id: string;
+    name: string;
+    args: string;
+    result?: unknown;
+    complete: boolean;
+    /** True if this tool executes on the client (query action) */
+    isClientSide?: boolean;
+}
+/** State delta data (sources, actions, plan, etc.) */
+export interface StateDeltaData {
+    type: string;
+    data: unknown;
+    timestamp: number;
+}
+/** Complete AG-UI state */
+export interface AGUIState {
+    /** Current run ID */
+    runId: string | null;
+    /** Thread ID (replaces conversation_id) */
+    threadId: string | null;
+    /** Current step name (e.g., "reasoning", "tool_execution") */
+    currentStep: string | null;
+    /** Streaming messages keyed by message ID */
+    messages: Map<string, StreamingMessage>;
+    /** Tool calls keyed by tool call ID */
+    toolCalls: Map<string, ToolCallState>;
+    /** State deltas received (sources, actions, plans) */
+    stateDeltas: StateDeltaData[];
+    /** Whether the run is complete */
+    isComplete: boolean;
+    /** Error if run failed */
+    error: Error | null;
+}
+export interface AGUIHandlerCallbacks {
+    /** Called whenever state changes */
+    onStateChange: (state: AGUIState) => void;
+    /** Called when an error occurs */
+    onError: (error: Error) => void;
+    /** Called when run completes successfully */
+    onComplete: () => void;
+    /** Called when a client-side tool needs execution */
+    onClientToolCall?: (toolCall: ToolCallState) => Promise<unknown>;
+}
+/**
+ * Create an AG-UI event handler.
+ *
+ * Returns an object with a handleEvent method that processes
+ * AG-UI events and updates internal state.
+ */
+export declare function createAGUIHandler(callbacks: AGUIHandlerCallbacks): {
+    handleEvent: (event: AGUIEvent) => Promise<void>;
+    reset: () => void;
+    getState: () => AGUIState;
+};
+/**
+ * Register a tool as client-side.
+ * Called when the SDK registers an action with returns: true.
+ */
+export declare function registerClientSideTool(toolName: string): void;
+/**
+ * Unregister a client-side tool.
+ */
+export declare function unregisterClientSideTool(toolName: string): void;
+/**
+ * Check if a tool executes on the client side.
+ */
+export declare function isClientSideTool(toolName: string): boolean;
+/**
+ * Get all registered client-side tools.
+ */
+export declare function getClientSideTools(): string[];

package/dist/api/client.d.ts

@@ -25,6 +25,8 @@ export interface SuggestedQuestion {
     text: string;
     /** If true, this is an admin-configured suggestion that should rank first */
     manual?: boolean;
+    /** Path pattern for filtering (e.g., "/pricing", "/blog/*", "/docs/**") */
+    pathPattern?: string;
 }
 export interface ChatResponse {
     message: string;

package/dist/cli/sync.js

@@ -263,12 +263,21 @@ async function scanTools(scanDir) {
           const arg = node.arguments[0];
           const lineNumber = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
           const relativePath = path.relative(process.cwd(), filePath);
-          const processToolObject = (obj, line) => {
+          const hasAstProperty = (astNode, propName) => astNode.properties.some(
+            (p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === propName
+          );
+          const processToolObject = (obj, line, astNode) => {
             if (obj && typeof obj.name === "string" && typeof obj.description === "string") {
               let toolType = obj.type;
               if (toolType === "trigger_action") {
                 toolType = "trigger_tool";
               }
+              const hasExecute = astNode ? hasAstProperty(astNode, "execute") : false;
+              if (hasExecute && !obj.outputSchema) {
+                console.warn(
+                  `[pillar-sync] \u26A0 Tool "${obj.name}" has execute but no outputSchema (${relativePath}:${line})`
+                );
+              }
               tools.push({
                 name: obj.name,
                 description: obj.description,
@@ -279,6 +288,7 @@ async function scanTools(scanDir) {
                 examples: obj.examples,
                 autoRun: obj.autoRun,
                 autoComplete: obj.autoComplete,
+                requiredContext: obj.requiredContext,
                 sourceFile: relativePath,
                 line
               });
@@ -291,13 +301,13 @@ async function scanTools(scanDir) {
           };
           if (ts.isObjectLiteralExpression(arg)) {
             const obj = evaluateNode(arg, ts);
-            processToolObject(obj, lineNumber);
+            processToolObject(obj, lineNumber, arg);
           } else if (ts.isArrayLiteralExpression(arg)) {
             for (const element of arg.elements) {
               if (ts.isObjectLiteralExpression(element)) {
                 const elementLine = sourceFile.getLineAndCharacterOfPosition(element.getStart()).line + 1;
                 const obj = evaluateNode(element, ts);
-                processToolObject(obj, elementLine);
+                processToolObject(obj, elementLine, element);
               } else {
                 const elementLine = sourceFile.getLineAndCharacterOfPosition(element.getStart()).line + 1;
                 console.warn(
@@ -390,6 +400,8 @@ function buildManifestFromScan(tools, platform, version, gitSha, agentGuidance)
       entry.data_schema = tool.inputSchema;
     if (tool.outputSchema)
       entry.output_schema = tool.outputSchema;
+    if (tool.requiredContext)
+      entry.required_context = tool.requiredContext;
     entries.push(entry);
   }
   const manifest = {

package/dist/components/Button/EdgeTrigger.d.ts

@@ -58,6 +58,11 @@ export declare class EdgeTrigger {
      * Initialize the edge trigger
      */
     init(): void;
+    /**
+     * Resolve the push target element from config.
+     * Returns the configured element or falls back to document.documentElement.
+     */
+    private getPushTargetElement;
     /**
      * Apply padding to reserve space for trigger + panel (when open in push mode)
      * In hover mode, only reserve trigger width even when panel is open

package/dist/components/Button/FloatingButton.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Floating Help Button Component
+ * A floating action button that opens the help panel
+ */
+import type { ResolvedConfig, FloatingButtonPosition } from '../../core/config';
+/**
+ * FloatingButton class that manages the button lifecycle
+ * Uses Preact for rendering but maintains imperative control
+ */
+export declare class FloatingButton {
+    private config;
+    private onClick;
+    private container;
+    private stylesInjected;
+    private _isHidden;
+    constructor(config: ResolvedConfig, onClick: () => void);
+    /**
+     * Initialize the floating button
+     */
+    init(): void;
+    /**
+     * Set the open state (to update icon when panel opens)
+     */
+    setOpen(_isOpen: boolean): void;
+    /**
+     * Show the button
+     */
+    show(): void;
+    /**
+     * Hide the button
+     */
+    hide(): void;
+    /**
+     * Update button position
+     */
+    setPosition(position: FloatingButtonPosition): void;
+    /**
+     * Update button label
+     */
+    setLabel(label: string): void;
+    /**
+     * Destroy the button
+     */
+    destroy(): void;
+    private render;
+}

package/dist/components/PagePilot/styles.d.ts

@@ -3,4 +3,4 @@
  * Injected into the document head (outside Shadow DOM)
  * Uses the same CSS variables as the Pillar panel for consistent theming
  */
-export declare const PAGE_PILOT_STYLES = "\n/* Pillar Page Pilot Banner Styles */\n\n/* Define CSS variables at the container level (same as panel) */\n#pillar-page-pilot-container {\n  /* Core colors - Light mode (default) */\n  --pillar-primary: #2563eb;\n  --pillar-primary-hover: #1d4ed8;\n  --pillar-bg: #ffffff;\n  --pillar-bg-secondary: #f9fafb;\n  --pillar-text: #1a1a1a;\n  --pillar-text-secondary: #374151;\n  --pillar-border: #e5e7eb;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pillar-radius-lg: 8px;\n  --pillar-radius-md: 6px;\n  --pillar-transition-fast: 0.15s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n  #pillar-page-pilot-container:not([data-theme=\"light\"]) {\n    --pillar-primary: #3b82f6;\n    --pillar-primary-hover: #60a5fa;\n    --pillar-bg: #1a1a1a;\n    --pillar-bg-secondary: #262626;\n    --pillar-text: #f5f5f5;\n    --pillar-text-secondary: #e5e5e5;\n    --pillar-border: #404040;\n    --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Dark mode - Manual override via html class or data attribute */\nhtml.dark #pillar-page-pilot-container,\n[data-theme=\"dark\"] #pillar-page-pilot-container,\n#pillar-page-pilot-container[data-theme=\"dark\"] {\n  --pillar-primary: #3b82f6;\n  --pillar-primary-hover: #60a5fa;\n  --pillar-bg: #1a1a1a;\n  --pillar-bg-secondary: #262626;\n  --pillar-text: #f5f5f5;\n  --pillar-text-secondary: #e5e5e5;\n  --pillar-border: #404040;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n}\n\n@keyframes pillar-pulse {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.6;\n    transform: scale(1.1);\n  }\n}\n\n@keyframes pillar-banner-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n._pillar-page-pilot-banner {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 99999;\n  font-family: var(--pillar-font-family);\n  display: flex;\n  justify-content: center;\n  pointer-events: none;\n  animation: pillar-banner-fade-in 0.2s ease-out;\n}\n\n/* Viewport outline \u2014 3px border on left, right, bottom; top handled by tab shape */\n._pillar-page-pilot-banner::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  border: 3px solid var(--pillar-primary);\n  border-top: none;\n  pointer-events: none;\n  z-index: 99998;\n}\n\n/* Top border segments on either side of the tab */\n._pillar-page-pilot-banner::after {\n  content: '';\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--pillar-primary);\n  pointer-events: none;\n  z-index: 99997;\n}\n\n._pillar-page-pilot-banner__content {\n  position: relative;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 20px;\n  background: var(--pillar-primary);\n  color: #ffffff;\n  border-bottom-left-radius: var(--pillar-radius-lg);\n  border-bottom-right-radius: var(--pillar-radius-lg);\n  pointer-events: auto;\n}\n\n._pillar-page-pilot-banner__indicator {\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  border-radius: 50%;\n  animation: pillar-pulse 1.5s ease-in-out infinite;\n  flex-shrink: 0;\n}\n\n._pillar-page-pilot-banner__text {\n  font-size: 13px;\n  font-weight: 500;\n  color: #ffffff;\n  white-space: nowrap;\n}\n\n._pillar-page-pilot-banner__stop {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  margin-left: 4px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__stop:hover {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n._pillar-page-pilot-banner__stop:active {\n  transform: scale(0.97);\n}\n\n._pillar-page-pilot-banner__stop-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n}\n\n._pillar-page-pilot-banner__stop-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Confirmation variant \u2014 amber/warning theme */\n._pillar-page-pilot-banner--confirm ._pillar-page-pilot-banner__content {\n  background: #d97706;\n}\n\n._pillar-page-pilot-banner--confirm::before {\n  border-color: #d97706;\n}\n\n._pillar-page-pilot-banner--confirm::after {\n  background: #d97706;\n}\n\n._pillar-page-pilot-banner__warning-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n._pillar-page-pilot-banner__warning-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n._pillar-page-pilot-banner__deny {\n  display: flex;\n  align-items: center;\n  padding: 5px 12px;\n  margin-left: 4px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__deny:hover {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n._pillar-page-pilot-banner__deny:active {\n  transform: scale(0.97);\n}\n\n._pillar-page-pilot-banner__allow {\n  display: flex;\n  align-items: center;\n  padding: 5px 12px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  color: #d97706;\n  background: #ffffff;\n  border: 1px solid rgba(255, 255, 255, 0.8);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__allow:hover {\n  background: #fef3c7;\n}\n\n._pillar-page-pilot-banner__allow:active {\n  transform: scale(0.97);\n}\n";
+export declare const PAGE_PILOT_STYLES = "\n/* Pillar Page Pilot Banner Styles */\n\n/* Define CSS variables at the container level (same as panel) */\n#pillar-page-pilot-container {\n  /* Core colors - Light mode (default) */\n  --pillar-primary: #2563eb;\n  --pillar-primary-hover: #1d4ed8;\n  --pillar-bg: #ffffff;\n  --pillar-bg-secondary: #f9fafb;\n  --pillar-text: #1a1a1a;\n  --pillar-text-secondary: #374151;\n  --pillar-border: #e5e7eb;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pillar-radius-lg: 8px;\n  --pillar-radius-md: 6px;\n  --pillar-transition-fast: 0.15s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n  #pillar-page-pilot-container:not([data-theme=\"light\"]) {\n    --pillar-primary: #3b82f6;\n    --pillar-primary-hover: #60a5fa;\n    --pillar-bg: #1a1a1a;\n    --pillar-bg-secondary: #262626;\n    --pillar-text: #f5f5f5;\n    --pillar-text-secondary: #e5e5e5;\n    --pillar-border: #404040;\n    --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Dark mode - Manual override via html class or data attribute */\nhtml.dark #pillar-page-pilot-container,\n[data-theme=\"dark\"] #pillar-page-pilot-container,\n#pillar-page-pilot-container[data-theme=\"dark\"] {\n  --pillar-primary: #3b82f6;\n  --pillar-primary-hover: #60a5fa;\n  --pillar-bg: #1a1a1a;\n  --pillar-bg-secondary: #262626;\n  --pillar-text: #f5f5f5;\n  --pillar-text-secondary: #e5e5e5;\n  --pillar-border: #404040;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n}\n\n@keyframes pillar-pulse {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.6;\n    transform: scale(1.1);\n  }\n}\n\n@keyframes pillar-banner-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n._pillar-page-pilot-banner {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 99999;\n  font-family: var(--pillar-font-family);\n  display: flex;\n  justify-content: center;\n  pointer-events: none;\n  animation: pillar-banner-fade-in 0.2s ease-out;\n}\n\n/* Viewport outline \u2014 3px border on left, right, bottom; top handled by tab shape */\n._pillar-page-pilot-banner::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  border: 3px solid var(--pillar-primary);\n  border-top: none;\n  pointer-events: none;\n  z-index: 99998;\n}\n\n/* Top border segments on either side of the tab */\n._pillar-page-pilot-banner::after {\n  content: '';\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--pillar-primary);\n  pointer-events: none;\n  z-index: 99997;\n}\n\n._pillar-page-pilot-banner__content {\n  position: relative;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 20px;\n  background: var(--pillar-primary);\n  color: #ffffff;\n  border-bottom-left-radius: var(--pillar-radius-lg);\n  border-bottom-right-radius: var(--pillar-radius-lg);\n  pointer-events: auto;\n}\n\n._pillar-page-pilot-banner__indicator {\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  border-radius: 50%;\n  animation: pillar-pulse 1.5s ease-in-out infinite;\n  flex-shrink: 0;\n}\n\n._pillar-page-pilot-banner__text {\n  font-size: 13px;\n  font-weight: 500;\n  color: #ffffff;\n  white-space: nowrap;\n}\n\n._pillar-page-pilot-banner__stop {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  margin-left: 4px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__stop:hover {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n._pillar-page-pilot-banner__stop:active {\n  transform: scale(0.97);\n}\n\n._pillar-page-pilot-banner__stop-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n}\n\n._pillar-page-pilot-banner__stop-icon svg {\n  width: 100%;\n  height: 100%;\n}\n";

package/dist/components/Panel/Panel.d.ts

@@ -81,6 +81,11 @@ export declare class Panel {
      * inline styles too (class-based overrides lose to inline specificity).
      */
     private setBackdropVisible;
+    /**
+     * Resolve the push target element from config.
+     * Returns the configured element or falls back to document.documentElement.
+     */
+    private getPushTargetElement;
     private applyPushModeStyles;
     private removePushModeStyles;
     /**

package/dist/components/Panel/TabNavigation.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Tab Navigation Component
+ * Vertical tabs on the right edge of the panel for switching between Assistant and Support
+ */
+import { h } from 'preact';
+import type { ResolvedSupportConfig } from '../../core/config';
+interface TabNavigationProps {
+    supportConfig: ResolvedSupportConfig;
+}
+export declare function TabNavigation({ supportConfig }: TabNavigationProps): h.JSX.Element;
+/**
+ * CSS Styles for Tab Navigation
+ * Should be appended to PANEL_STYLES
+ */
+export declare const TAB_NAVIGATION_STYLES = "\n/* ============================================================================\n   Panel Wrapper (for tab layout)\n   Horizontal flex container with main content + tab nav\n   ============================================================================ */\n\n._pillar-panel-wrapper {\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  overflow: hidden;\n}\n\n._pillar-panel-wrapper > ._pillar-panel-ui {\n  flex: 1;\n  min-width: 0;\n}\n\n.pillar-panel-wrapper {}\n\n/* ============================================================================\n   Tab Navigation\n   Vertical tabs on the right edge of the panel\n   ============================================================================ */\n\n._pillar-tab-nav {\n  display: flex;\n  flex-direction: column;\n  width: 48px;\n  min-width: 48px;\n  background: var(--pillar-bg-secondary);\n  border-left: 1px solid var(--pillar-border);\n  padding: var(--pillar-spacing-sm) 0;\n  gap: var(--pillar-spacing-xs);\n}\n\n._pillar-tab {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  padding: var(--pillar-spacing-sm) var(--pillar-spacing-xs);\n  margin: 0 var(--pillar-spacing-xs);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  background: transparent;\n  color: var(--pillar-text-muted);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n  position: relative;\n}\n\n._pillar-tab:hover {\n  background: var(--pillar-bg-tertiary);\n  color: var(--pillar-text);\n}\n\n._pillar-tab--active {\n  background: var(--pillar-primary-light);\n  color: var(--pillar-primary);\n}\n\n._pillar-tab--active:hover {\n  background: var(--pillar-primary-light-hover);\n  color: var(--pillar-primary);\n}\n\n._pillar-tab-icon {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._pillar-tab-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n._pillar-tab-label {\n  font-size: 9px;\n  font-weight: 500;\n  text-align: center;\n  line-height: 1.2;\n  max-width: 40px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Public override classes */\n.pillar-tab-nav {}\n.pillar-tab {}\n.pillar-tab-icon {}\n.pillar-tab-label {}\n";
+export {};