@pillar-ai/sdk 0.1.15 → 0.1.17

package/README.md

@@ -1,6 +1,6 @@
 # @pillar-ai/sdk
 
-Cursor for your product — Embed an AI co-pilot that executes tasks, not just answers questions.
+[Pillar](https://trypillar.com) is an open-source product copilot SDK for SaaS and web apps — embed an AI assistant that executes tasks, not just answers questions. [GitHub](https://github.com/pillarhq/pillar) · [Docs](https://trypillar.com/docs)
 
 [![npm version](https://img.shields.io/npm/v/@pillar-ai/sdk)](https://www.npmjs.com/package/@pillar-ai/sdk)
 [![npm downloads](https://img.shields.io/npm/dm/@pillar-ai/sdk)](https://www.npmjs.com/package/@pillar-ai/sdk)
@@ -9,13 +9,21 @@ Cursor for your product — Embed an AI co-pilot that executes tasks, not just a
 
 ## What is Pillar?
 
-Pillar is an embedded AI co-pilot that helps users complete tasks, not just answer questions. Users say what they want, and Pillar uses your UI to make it happen — navigating pages, pre-filling forms, and calling your APIs.
+Pillar is a product copilot for SaaS and web applications. Users say what they want, and Pillar uses your UI to make it happen — navigating pages, pre-filling forms, and calling your APIs.
 
-**How it works:**
+A CRM user could ask:
 
-1. User asks: *"Export this to CSV"* or *"Turn off email notifications"*
-2. Pillar understands intent and chains actions
-3. Your code executes with the user's session
+> "Close the Walmart deal as won in Salesforce and notify implementation"
+
+An analytics user could ask:
+
+> "Add a weekly signups chart to my Amplitude dashboard"
+
+Or an HR user:
+
+> "How do I change my direct deposit in Rippling?"
+
+Pillar understands the intent, builds a multi-step plan, and executes it client-side with the user's session.
 
 ## Features
 
@@ -50,11 +58,9 @@ yarn add @pillar-ai/sdk
 
 ### 1. Get Your Product Key
 
-First, register your product in the [Pillar app](https://app.trypillar.com):
-
-1. Sign up or log in at [app.trypillar.com](https://app.trypillar.com)
-2. Create a new product
-3. Copy your **Product Key** from the settings page
+> **⚠️ Beta Onboarding:** Cloud access is currently manual while we learn from early teams. Join the waitlist at [trypillar.com](https://trypillar.com), and we will reach out to onboard you.
+>
+> By default, you'll get an engineer from Pillar to help with setup. If you prefer onboarding without engineering support, include that in your waitlist request and we will support that too.
 
 ### 2. Initialize the SDK
 
@@ -63,7 +69,7 @@ import { Pillar } from "@pillar-ai/sdk";
 
 // Initialize and get the instance
 const pillar = await Pillar.init({
-  productKey: "your-product-key", // From Pillar app
+  productKey: "your-product-key", // Provided during onboarding
 });
 
 // Now you can use instance methods

package/dist/api/client.d.ts

@@ -2,13 +2,13 @@
  * API Client for Pillar SDK
  * Handles all communication with the Pillar backend
  */
-import type { TaskButtonData } from '../components/Panel/TaskButton';
-import type { ResolvedConfig } from '../core/config';
-import type { Context, Suggestion, UserProfile } from '../core/context';
-import type { Workflow } from '../core/workflow';
-import type { UserContextItem } from '../types/user-context';
-import type { ActionRequest, ChatImage, ImageUploadResponse } from './mcp-client';
-import { MCPClient } from './mcp-client';
+import type { TaskButtonData } from "../components/Panel/TaskButton";
+import type { ResolvedConfig } from "../core/config";
+import type { Context, Suggestion, UserProfile } from "../core/context";
+import type { Workflow } from "../core/workflow";
+import type { UserContextItem } from "../types/user-context";
+import type { ActionRequest, ChatImage, ImageUploadResponse } from "./mcp-client";
+import { MCPClient } from "./mcp-client";
 export interface ArticleSummary {
     id: string;
     title: string;
@@ -17,7 +17,7 @@ export interface ArticleSummary {
     category_name?: string;
 }
 export interface ChatMessage {
-    role: 'user' | 'assistant';
+    role: "user" | "assistant";
     content: string;
 }
 export interface SuggestedQuestion {
@@ -53,7 +53,7 @@ export interface ProgressEvent {
     kind: string;
     id?: string;
     label?: string;
-    status?: 'active' | 'done' | 'error';
+    status?: "active" | "done" | "error";
     text?: string;
     children?: ProgressChild[];
     metadata?: Record<string, unknown>;
@@ -67,7 +67,7 @@ export interface ProgressEvent {
 export interface ServerEmbedConfig {
     panel?: {
         enabled?: boolean;
-        position?: 'left' | 'right';
+        position?: "left" | "right";
         width?: number;
     };
     floatingButton?: {
@@ -97,7 +97,7 @@ export interface ConversationSummary {
  * Used for UI display of the agent's reasoning process.
  */
 export interface DisplayStep {
-    step_type: 'thinking' | 'tool_decision' | 'parallel_tool_decision' | 'tool_result' | 'token_summary' | 'step_start' | 'generating' | 'narration';
+    step_type: "thinking" | "tool_decision" | "parallel_tool_decision" | "tool_result" | "token_summary" | "step_start" | "generating" | "narration";
     iteration?: number;
     timestamp_ms?: number;
     content?: string;
@@ -119,10 +119,11 @@ export interface DisplayStep {
  */
 export interface HistoryMessage {
     id: string;
-    role: 'user' | 'assistant';
+    role: "user" | "assistant";
     content: string;
     timestamp: string | null;
     display_trace?: DisplayStep[];
+    images?: ChatImage[];
 }
 /**
  * Full conversation with messages.
@@ -186,13 +187,22 @@ export declare class APIClient {
      * @returns Promise with signed URL and expiration
      */
     uploadImage(file: File): Promise<ImageUploadResponse>;
-    chat(message: string, history?: ChatMessage[], onChunk?: (chunk: string) => void, articleSlug?: string, existingConversationId?: string | null, onActions?: (actions: TaskButtonData[]) => void, userContext?: UserContextItem[], images?: ChatImage[], onProgress?: (progress: ProgressEvent) => void, onConversationStarted?: (conversationId: string, assistantMessageId?: string) => void, onActionRequest?: (request: ActionRequest) => Promise<void>, signal?: AbortSignal, onRequestId?: (requestId: number) => void): Promise<ChatResponse>;
-    /**
-     * Legacy chat method using the old /ai/chat/ endpoint.
-     * @deprecated Use chat() which uses the MCP protocol.
-     */
-    chatLegacy(message: string, history?: ChatMessage[], onChunk?: (chunk: string) => void, articleSlug?: string, existingConversationId?: string | null): Promise<ChatResponse>;
-    private handleStreamingChat;
+    chat(opts: {
+        message: string;
+        history?: ChatMessage[];
+        onChunk?: (chunk: string) => void;
+        articleSlug?: string;
+        existingConversationId?: string | null;
+        onActions?: (actions: TaskButtonData[]) => void;
+        userContext?: UserContextItem[];
+        images?: ChatImage[];
+        onProgress?: (progress: ProgressEvent) => void;
+        onConversationStarted?: (conversationId: string, assistantMessageId?: string) => void;
+        onActionRequest?: (request: ActionRequest) => Promise<void>;
+        signal?: AbortSignal;
+        onRequestId?: (requestId: number) => void;
+        resume?: boolean;
+    }): Promise<ChatResponse>;
     /**
      * Submit feedback on an AI assistant message.
      * Fire-and-forget - errors are logged but don't throw.
@@ -201,7 +211,7 @@ export declare class APIClient {
      * @param feedback - 'up' for helpful, 'down' for not helpful
      * @param comment - Optional comment explaining the feedback
      */
-    submitFeedback(messageId: string, feedback: 'up' | 'down', comment?: string): Promise<void>;
+    submitFeedback(messageId: string, feedback: "up" | "down", comment?: string): Promise<void>;
     /**
      * Confirm task execution result.
      * Called by the SDK after a customer's task handler completes.
@@ -211,7 +221,7 @@ export declare class APIClient {
      * @param status - 'success' or 'failure'
      * @param details - Optional execution details
      */
-    confirmTaskExecution(taskId: string, status: 'success' | 'failure', details?: {
+    confirmTaskExecution(taskId: string, status: "success" | "failure", details?: {
         error?: string;
         duration_ms?: number;
         session_id?: string;
@@ -223,13 +233,6 @@ export declare class APIClient {
      * Returns relevant articles, videos, and actions.
      */
     getSuggestions(ctx: Context, userProfile: UserProfile): Promise<Suggestion[]>;
-    /**
-     * Chat with enhanced context.
-     * Includes product context and user profile for better responses.
-     *
-     * Note: Context is passed to the MCP ask tool as additional arguments.
-     */
-    chatWithContext(message: string, history: ChatMessage[] | undefined, ctx: Context, userProfile: UserProfile, onChunk?: (chunk: string) => void, existingConversationId?: string | null, onActions?: (actions: TaskButtonData[]) => void): Promise<ChatResponse>;
     /**
      * Identify the current user after login.
      * Links the anonymous visitor to the authenticated user ID, enabling

package/dist/api/mcp-client.d.ts

@@ -8,7 +8,7 @@ import type { TaskButtonData } from '../components/Panel/TaskButton';
 import type { ResolvedConfig } from '../core/config';
 import type { UserContextItem } from '../types/user-context';
 import { type LogEntry } from '../utils/debug';
-import type { ArticleSummary } from './client';
+import type { ArticleSummary, DisplayStep } from './client';
 /** MCP Tool result content */
 interface ToolResultContent {
     type: 'text' | 'image' | 'resource';
@@ -123,10 +123,13 @@ export interface ChatImage {
     url: string;
     /** Detail level for image analysis. 'low' is faster and cheaper. */
     detail?: 'low' | 'high';
+    /** GCS storage path for URL refresh on history load */
+    path?: string;
 }
 /** Response from image upload endpoint */
 export interface ImageUploadResponse {
     url: string;
+    path: string;
     expires_at: string;
 }
 export declare class MCPClient {
@@ -201,6 +204,8 @@ export declare class MCPClient {
         signal?: AbortSignal;
         /** Conversation ID - generated client-side, always provided */
         conversationId?: string;
+        /** Resume an interrupted session (sends empty query, loads state server-side) */
+        resume?: boolean;
     }): Promise<ToolResult>;
     /**
      * Cancel an active streaming request.
@@ -250,21 +255,6 @@ export declare class MCPClient {
      * @returns Session status with resumption details, or null if not resumable
      */
     getConversationStatus(conversationId: string): Promise<ConversationStatus | null>;
-    /**
-     * Resume an interrupted conversation.
-     *
-     * Returns a streaming response that continues the conversation
-     * from where it was interrupted.
-     *
-     * @param conversationId - The conversation to resume
-     * @param userContext - Optional current page context (highlighted text, DOM snapshot, etc.)
-     * @param callbacks - Streaming callbacks
-     */
-    resumeConversation(conversationId: string, userContext: UserContextItem[] | undefined, callbacks: StreamCallbacks): Promise<void>;
-    /**
-     * Handle events from the resume stream.
-     */
-    private handleResumeStreamEvent;
 }
 /**
  * Conversation status for session resumption.
@@ -275,11 +265,8 @@ export interface ConversationStatus {
     elapsed_ms?: number;
     user_message?: string;
     partial_response?: string;
-    summary?: string;
-    accomplished?: Array<{
-        action: string;
-        result_summary: string;
-    }>;
+    display_trace?: DisplayStep[];
+    registered_actions?: Record<string, unknown>[];
 }
 /**
  * Convert ActionData from MCP response to TaskButtonData for UI rendering.

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

@@ -26,6 +26,12 @@ export declare class EdgeTrigger {
     private unsubscribeActiveTab;
     private themeObserver;
     private currentTheme;
+    private _isResizing;
+    private _resizeStartX;
+    private _resizeStartWidth;
+    private _resizeRafId;
+    private _boundHandleResizeMove;
+    private _boundHandleResizeEnd;
     constructor(config: ResolvedConfig, events: EventEmitter, onClick: () => void, rootContainer?: HTMLElement | null);
     /**
      * Handle tab click - sets active tab and opens panel
@@ -75,5 +81,17 @@ export declare class EdgeTrigger {
      * Destroy the trigger
      */
     destroy(): void;
+    /**
+     * Handle resize start from mouse or touch event on the drag handle
+     */
+    private handleResizeStart;
+    /**
+     * Handle resize move - throttled via requestAnimationFrame
+     */
+    private handleResizeMove;
+    /**
+     * Handle resize end - save final width and clean up
+     */
+    private handleResizeEnd;
     private render;
 }

package/dist/components/Cards/ConfirmActionCard.d.ts

@@ -17,7 +17,3 @@ export declare function createDefaultConfirmCard(action: TaskButtonData, callbac
  * Uses custom renderer if registered, otherwise uses default.
  */
 export declare function createConfirmActionCard(action: TaskButtonData, onConfirm: (data?: Record<string, unknown>) => void, onCancel: () => void): HTMLDivElement;
-/**
- * CSS styles for ConfirmActionCard.
- */
-export declare const CONFIRM_CARD_STYLES = "\n/* Confirm Action Card */\n.pillar-confirm-card-wrapper {\n  margin-top: 12px;\n}\n\n.pillar-confirm-card {\n  background: var(--pillar-bg-secondary, #f9fafb);\n  border: 1px solid var(--pillar-border, #e5e7eb);\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.pillar-confirm-card__content {\n  padding: 16px;\n}\n\n.pillar-confirm-card__header {\n  margin-bottom: 12px;\n}\n\n.pillar-confirm-card__title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--pillar-text-primary, #111827);\n}\n\n.pillar-confirm-card__data {\n  background: var(--pillar-bg-primary, #ffffff);\n  border: 1px solid var(--pillar-border, #e5e7eb);\n  border-radius: 8px;\n  padding: 12px;\n  margin-bottom: 12px;\n}\n\n.pillar-confirm-card__data-row {\n  display: flex;\n  gap: 8px;\n  font-size: 13px;\n  margin-bottom: 4px;\n}\n\n.pillar-confirm-card__data-row:last-child {\n  margin-bottom: 0;\n}\n\n.pillar-confirm-card__data-key {\n  color: var(--pillar-text-secondary, #6b7280);\n  flex-shrink: 0;\n}\n\n.pillar-confirm-card__data-value {\n  color: var(--pillar-text-primary, #111827);\n  word-break: break-word;\n}\n\n.pillar-confirm-card__actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.pillar-confirm-card__btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: inherit;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n}\n\n.pillar-confirm-card__btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.pillar-confirm-card__btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-confirm-card__btn--primary {\n  background: var(--pillar-primary, #2563eb);\n  color: #ffffff;\n  border-color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-confirm-card__btn--primary:hover:not(:disabled) {\n  background: var(--pillar-primary-hover, #1d4ed8);\n  border-color: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-confirm-card__btn--secondary {\n  background: var(--pillar-bg-primary, #ffffff);\n  color: var(--pillar-text-secondary, #6b7280);\n  border-color: var(--pillar-border, #e5e7eb);\n}\n\n.pillar-confirm-card__btn--secondary:hover:not(:disabled) {\n  background: var(--pillar-bg-secondary, #f9fafb);\n}\n\n.pillar-confirm-card__success {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 16px;\n  color: #059669;\n  font-weight: 500;\n}\n\n.pillar-confirm-card__success-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.pillar-confirm-card__error {\n  background: #fef2f2;\n  border: 1px solid #fecaca;\n  border-radius: 8px;\n  padding: 12px;\n  margin-bottom: 12px;\n  color: #dc2626;\n  font-size: 13px;\n}\n\n.pillar-confirm-card__spinner {\n  display: inline-flex;\n  animation: pillar-spin 1s linear infinite;\n}\n\n@keyframes pillar-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n";

package/dist/components/Cards/index.d.ts

@@ -3,4 +3,4 @@
  *
  * Components for rendering interactive cards in chat responses.
  */
-export { createConfirmActionCard, createDefaultConfirmCard, CONFIRM_CARD_STYLES, } from './ConfirmActionCard';
+export { createConfirmActionCard, createDefaultConfirmCard, } from './ConfirmActionCard';

package/dist/components/DevTools/index.d.ts

@@ -2,4 +2,4 @@
  * DevTools Components
  * Development tools for debugging and previewing Pillar SDK features
  */
-export { DEVTOOLS_STYLES } from './styles';
+export { default as devtoolsCSS } from './devtools.css';

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

@@ -4,4 +4,3 @@
  */
 export { PagePilotBanner } from './PagePilotBanner';
 export { PagePilotManager } from './PagePilotManager';
-export { PAGE_PILOT_STYLES } from './styles';

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

@@ -1,6 +1,7 @@
 /**
  * Panel Header Component
- * Navigation header with back, home, history, and close buttons
+ * Navigation header with back, home, history, and close buttons.
+ * In mobile mode, the header doubles as a drag handle: swipe down to dismiss.
  */
 import { type ViewType } from "../../store/router";
 interface HeaderProps {

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

@@ -2,9 +2,9 @@
  * Panel Container Component
  * Shadow DOM container for the help panel with Preact rendering
  */
-import type { APIClient } from '../../api/client';
-import type { ResolvedConfig } from '../../core/config';
-import type { EventEmitter } from '../../core/events';
+import type { APIClient } from "../../api/client";
+import type { ResolvedConfig } from "../../core/config";
+import type { EventEmitter } from "../../core/events";
 export declare class Panel {
     private config;
     private api;
@@ -54,6 +54,12 @@ export declare class Panel {
      */
     destroy(): void;
     private subscribeToState;
+    /**
+     * Toggle backdrop visibility using inline styles.
+     * The backdrop is created with inline styles, so we must toggle via
+     * inline styles too (class-based overrides lose to inline specificity).
+     */
+    private setBackdropVisible;
     private applyPushModeStyles;
     private removePushModeStyles;
     /**
@@ -101,5 +107,5 @@ export declare class Panel {
     /**
      * Update the theme at runtime
      */
-    setTheme(themeConfig: Partial<ResolvedConfig['theme']>): void;
+    setTheme(themeConfig: Partial<ResolvedConfig["theme"]>): void;
 }

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

@@ -42,8 +42,4 @@ export declare function createTaskButton(props: TaskButtonProps): HTMLButtonElem
  * Create a container with multiple task buttons.
  */
 export declare function createTaskButtonGroup(tasks: TaskButtonData[]): HTMLDivElement;
-/**
- * CSS styles for TaskButton (to be added to PANEL_STYLES).
- */
-export declare const TASK_BUTTON_STYLES = "\n/* Task Button Component */\n.pillar-task-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: inherit;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  text-decoration: none;\n}\n\n.pillar-task-btn__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.pillar-task-btn__icon svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-task-btn__label {\n  white-space: nowrap;\n}\n\n/* Primary variant (default) */\n.pillar-task-btn--primary {\n  background: #2563eb;\n  color: #ffffff;\n  border-color: #2563eb;\n}\n\n.pillar-task-btn--primary:hover {\n  background: #1d4ed8;\n  border-color: #1d4ed8;\n}\n\n/* Default variant */\n.pillar-task-btn--default {\n  background: #f3f4f6;\n  color: #1a1a1a;\n  border-color: #e5e7eb;\n}\n\n.pillar-task-btn--default:hover {\n  background: #e5e7eb;\n}\n\n/* Secondary variant */\n.pillar-task-btn--secondary {\n  background: #eff6ff;\n  color: #2563eb;\n  border-color: #dbeafe;\n}\n\n.pillar-task-btn--secondary:hover {\n  background: #dbeafe;\n}\n\n/* Outline variant */\n.pillar-task-btn--outline {\n  background: transparent;\n  color: #2563eb;\n  border-color: #2563eb;\n}\n\n.pillar-task-btn--outline:hover {\n  background: #eff6ff;\n}\n\n/* Ghost variant */\n.pillar-task-btn--ghost {\n  background: transparent;\n  color: #6b7280;\n  border-color: transparent;\n}\n\n.pillar-task-btn--ghost:hover {\n  background: #f3f4f6;\n  color: #1a1a1a;\n}\n\n/* Active state for inline_ui buttons with expanded card */\n.pillar-task-btn--active {\n  background: #1d4ed8;\n  border-color: #1d4ed8;\n}\n\n/* Task button group */\n.pillar-task-btn-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n/* Inline card container for inline_ui actions */\n.pillar-task-btn-inline-card {\n  margin-top: 12px;\n  animation: pillar-slide-down 0.15s ease-out;\n}\n\n@keyframes pillar-slide-down {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Task suggestion card in chat */\n.pillar-task-suggestion {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  margin-top: 12px;\n}\n\n.pillar-task-suggestion__header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #6b7280;\n}\n\n.pillar-task-suggestion__header svg {\n  width: 14px;\n  height: 14px;\n}\n\n.pillar-task-suggestion__description {\n  font-size: 13px;\n  color: #374151;\n}\n";
 export {};

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

@@ -3,8 +3,8 @@
  * Reusable input with context tags and image upload support
  * Used across all views in the SDK
  */
-import { type ChatImage } from '../../store/chat';
-import type { UserContextItem } from '../../types';
+import { type ChatImage } from "../../store/chat";
+import type { UserContextItem } from "../../types";
 interface UnifiedChatInputProps {
     /** Placeholder text for the input */
     placeholder?: string;

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

@@ -6,4 +6,3 @@
  */
 import { h } from 'preact';
 export declare function WorkflowChecklist(): h.JSX.Element | null;
-export declare const WORKFLOW_STYLES = "\n/* Workflow Checklist Container */\n.pillar-workflow {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  background: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  margin: 12px 0;\n}\n\n/* Header */\n.pillar-workflow__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.pillar-workflow__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #6b7280;\n}\n\n.pillar-workflow__title {\n  flex: 1;\n  font-size: 14px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.pillar-workflow__progress {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6b7280;\n  padding: 2px 8px;\n  background: #e5e7eb;\n  border-radius: 10px;\n}\n\n.pillar-workflow__description {\n  font-size: 13px;\n  color: #6b7280;\n}\n\n/* Steps List */\n.pillar-workflow__steps {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* Individual Step */\n.pillar-workflow-step {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px 12px;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.pillar-workflow-step__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  color: #9ca3af;\n}\n\n.pillar-workflow-step__icon svg {\n  width: 18px;\n  height: 18px;\n}\n\n.pillar-workflow-step__content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.pillar-workflow-step__label {\n  font-size: 13px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.pillar-workflow-step__note {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.pillar-workflow-step__status-text {\n  font-size: 12px;\n  color: #2563eb;\n  font-style: italic;\n}\n\n.pillar-workflow-step__actions {\n  display: flex;\n  gap: 8px;\n  margin-top: 4px;\n}\n\n/* Step States */\n.pillar-workflow-step--pending {\n  opacity: 0.6;\n}\n\n.pillar-workflow-step--awaiting_initiation {\n  background: #fef3c7;\n  border-color: #fcd34d;\n}\n\n.pillar-workflow-step--awaiting_initiation .pillar-workflow-step__icon {\n  color: #d97706;\n}\n\n.pillar-workflow-step--active {\n  background: #eff6ff;\n  border-color: #93c5fd;\n}\n\n.pillar-workflow-step--active .pillar-workflow-step__icon {\n  color: #2563eb;\n}\n\n.pillar-workflow-step--completed .pillar-workflow-step__icon {\n  color: #059669;\n}\n\n.pillar-workflow-step--completed .pillar-workflow-step__label {\n  text-decoration: line-through;\n  color: #6b7280;\n}\n\n.pillar-workflow-step--skipped {\n  opacity: 0.5;\n}\n\n.pillar-workflow-step--skipped .pillar-workflow-step__icon {\n  color: #9ca3af;\n}\n\n.pillar-workflow-step--skipped .pillar-workflow-step__label {\n  text-decoration: line-through;\n  color: #9ca3af;\n}\n\n.pillar-workflow-step--failed {\n  background: #fef2f2;\n  border-color: #fca5a5;\n}\n\n.pillar-workflow-step--failed .pillar-workflow-step__icon {\n  color: #dc2626;\n}\n\n/* Start Button */\n.pillar-workflow-step__start-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: inherit;\n  background: #2563eb;\n  color: #ffffff;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-workflow-step__start-btn:hover {\n  background: #1d4ed8;\n}\n\n/* Skip Button */\n.pillar-workflow-step__skip-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  background: transparent;\n  color: #6b7280;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-workflow-step__skip-btn:hover {\n  background: #f3f4f6;\n  color: #374151;\n}\n\n/* Spinner Animation for Active Step */\n@keyframes pillar-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.pillar-workflow-step__spinner {\n  animation: pillar-spin 1s linear infinite;\n}\n\n/* Footer */\n.pillar-workflow__footer {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 8px;\n  border-top: 1px solid #e5e7eb;\n}\n\n.pillar-workflow__cancel-btn {\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  background: transparent;\n  color: #9ca3af;\n  border: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-workflow__cancel-btn:hover {\n  color: #dc2626;\n}\n";

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

@@ -7,7 +7,6 @@ export { Header } from './Header';
 export { ChatInput } from './ChatInput';
 export { UnifiedChatInput } from './UnifiedChatInput';
 export { ContextTag, ContextTagList } from './ContextTag';
-export { PANEL_STYLES } from './styles';
-export { createTaskButton, createTaskButtonGroup, TASK_BUTTON_STYLES } from './TaskButton';
+export { createTaskButton, createTaskButtonGroup } from './TaskButton';
 export type { TaskButtonData } from './TaskButton';
-export { WorkflowChecklist, WORKFLOW_STYLES } from './WorkflowChecklist';
+export { WorkflowChecklist } from './WorkflowChecklist';