@pillar-ai/sdk 0.1.0

package/dist/core/plan.d.ts

@@ -0,0 +1,155 @@
+/**
+ * Execution Plan Types
+ *
+ * Types for server-generated multi-step execution plans. These types
+ * match the backend ExecutionPlan and ExecutionStep model `to_dict()` output.
+ *
+ * Plans are created by the ReAct agent when it determines that a user's
+ * request requires multiple sequential actions. The plan is persisted
+ * server-side and streamed to the client for execution.
+ *
+ * @see backend/apps/mcp/models/execution_plan.py
+ */
+/**
+ * Plan status values from PlanStatus enum.
+ * Matches backend PlanStatus.choices.
+ */
+export type PlanStatus = 'planning' | 'ready' | 'executing' | 'awaiting_start' | 'awaiting_input' | 'awaiting_result' | 'completed' | 'failed' | 'cancelled';
+/**
+ * Step status values from StepStatus enum.
+ * Matches backend StepStatus.choices.
+ */
+export type StepStatus = 'pending' | 'ready' | 'awaiting_confirmation' | 'executing' | 'awaiting_result' | 'completed' | 'skipped' | 'failed';
+/**
+ * Execution location for a step.
+ */
+export type ExecutionLocation = 'client' | 'server';
+/**
+ * A multi-step execution plan.
+ * Matches ExecutionPlan.to_dict() output.
+ */
+export interface ExecutionPlan {
+    /** UUID string */
+    id: string;
+    /** Interpreted goal statement */
+    goal: string;
+    /** Original user query */
+    query: string;
+    /** Current plan status */
+    status: PlanStatus;
+    /** If true, plan starts executing immediately. If false, user must click Start. */
+    auto_execute: boolean;
+    /** Total number of steps in the plan */
+    total_steps: number;
+    /** Number of completed steps */
+    completed_steps: number;
+    /** Minutes before plan is considered timed out */
+    timeout_minutes: number;
+    /** All steps in the plan */
+    steps: ExecutionStep[];
+    /** When the plan was created (ISO timestamp) */
+    created_at: string | null;
+    /** When the plan completed (ISO timestamp) */
+    completed_at: string | null;
+}
+/**
+ * A single step in an execution plan.
+ * Matches ExecutionStep.to_dict() output.
+ */
+export interface ExecutionStep {
+    /** UUID string */
+    id: string;
+    /** Step order (0-indexed) */
+    index: number;
+    /** Human-readable step description */
+    description: string;
+    /** Name of the action to execute */
+    action_name: string;
+    /** Data payload for the action */
+    action_data: Record<string, unknown>;
+    /** Where this step executes (client or server) */
+    execution_location: ExecutionLocation;
+    /** If true, pause for user confirmation before executing */
+    requires_user_confirmation: boolean;
+    /** If true, client must send result back to server */
+    requires_result_feedback: boolean;
+    /** Execute immediately without user clicking */
+    auto_run: boolean;
+    /** Mark complete immediately after execution */
+    auto_complete: boolean;
+    /** Custom card type for confirmation UI */
+    confirmation_card_type: string;
+    /** Configuration for the confirmation card */
+    confirmation_card_config: Record<string, unknown>;
+    /** List of step UUIDs this step depends on */
+    depends_on: string[];
+    /** Current step status */
+    status: StepStatus;
+    /** Result data from step execution */
+    result: unknown | null;
+    /** Error message if step failed */
+    error_message: string;
+    /** Number of retry attempts made */
+    retry_count: number;
+    /** Maximum retry attempts allowed */
+    max_retries: number;
+    /** Whether this step can be retried on failure */
+    is_retriable: boolean;
+    /**
+     * @deprecated LLM now generates contextual guidance in the response text instead.
+     * This field is no longer populated by the backend.
+     */
+    awaiting_instruction?: string;
+}
+/**
+ * Plan-related events emitted by the SDK.
+ */
+export interface PlanEvents {
+    /** Plan execution has started */
+    'plan:start': ExecutionPlan;
+    /** A step has become active (started executing) */
+    'plan:step:active': {
+        plan: ExecutionPlan;
+        step: ExecutionStep;
+    };
+    /** A step is awaiting user confirmation */
+    'plan:step:confirm': {
+        plan: ExecutionPlan;
+        step: ExecutionStep;
+    };
+    /** A step has completed (success or failure) */
+    'plan:step:complete': {
+        plan: ExecutionPlan;
+        step: ExecutionStep;
+        success: boolean;
+    };
+    /** A step was skipped by the user */
+    'plan:step:skip': {
+        plan: ExecutionPlan;
+        step: ExecutionStep;
+    };
+    /** A step has failed (includes retry info) */
+    'plan:step:failed': {
+        plan: ExecutionPlan;
+        step: ExecutionStep;
+        error: Error;
+        canRetry: boolean;
+    };
+    /** A step is being retried */
+    'plan:step:retry': {
+        plan: ExecutionPlan;
+        step: ExecutionStep;
+        retryCount: number;
+    };
+    /** Plan was updated (e.g., after server analysis) */
+    'plan:updated': ExecutionPlan;
+    /** All steps complete, plan finished */
+    'plan:complete': ExecutionPlan;
+    /** Plan was cancelled by the user */
+    'plan:cancel': ExecutionPlan;
+    /** An error occurred during plan execution */
+    'plan:error': {
+        plan: ExecutionPlan;
+        error: Error;
+    };
+}

package/dist/core/workflow.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Workflow Types
+ *
+ * Types for dynamic workflow composition - multi-step sequences
+ * composed from atomic ActionTasks at runtime.
+ */
+/**
+ * Status of a workflow step
+ */
+export type WorkflowStepStatus = 'pending' | 'awaiting_initiation' | 'active' | 'completed' | 'skipped' | 'failed';
+/**
+ * A single step in a workflow
+ */
+export interface WorkflowStep {
+    /** Step index in the workflow */
+    index: number;
+    /** Database ID of the ActionTask */
+    task_id?: string;
+    /** Task identifier */
+    task_name: string;
+    /** Task type for built-in handling */
+    task_type: 'navigate' | 'open_modal' | 'fill_form' | 'trigger_action' | 'copy_text' | 'external_link' | 'start_tutorial';
+    /** Human-readable label */
+    label: string;
+    /** Task description */
+    description?: string;
+    /** Helpful note for the user */
+    note?: string;
+    /** Data payload for this step */
+    data: Record<string, unknown>;
+    /** Current step status */
+    status: WorkflowStepStatus;
+    /**
+     * If true, action executes immediately without user clicking.
+     * If false, shows button and waits for user interaction.
+     * Used for safe, reversible actions like navigation.
+     */
+    auto_run: boolean;
+    /**
+     * If true, step completes immediately after execution without
+     * waiting for host app confirmation.
+     * Used for simple navigations and clipboard operations.
+     */
+    auto_complete: boolean;
+}
+/**
+ * A workflow composed of multiple steps
+ */
+export interface Workflow {
+    /** Unique workflow ID for this session (ephemeral) */
+    id: string;
+    /** Human-readable title */
+    title: string;
+    /** Workflow description */
+    description?: string;
+    /** Ordered steps */
+    steps: WorkflowStep[];
+    /** Total number of steps */
+    total_steps: number;
+    /** Currently active step index */
+    current_step: number;
+}
+/**
+ * Events emitted during workflow execution
+ */
+export interface WorkflowEvents {
+    /** Workflow has started */
+    'workflow:start': Workflow;
+    /** A step has become active (started executing) */
+    'workflow:step:active': {
+        workflow: Workflow;
+        step: WorkflowStep;
+    };
+    /** A step has completed (success or failure) */
+    'workflow:step:complete': {
+        workflow: Workflow;
+        step: WorkflowStep;
+        success: boolean;
+    };
+    /** A step was skipped by the user */
+    'workflow:step:skip': {
+        workflow: Workflow;
+        step: WorkflowStep;
+    };
+    /** All steps complete, workflow finished */
+    'workflow:complete': Workflow;
+    /** Workflow was cancelled by the user */
+    'workflow:cancel': Workflow;
+}

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Pillar SDK - Embedded Help for Your Application
+ *
+ * @example
+ * // Script tag usage
+ * <script src="https://cdn.trypillar.com/sdk/pillar.min.js"></script>
+ * <script>
+ *   Pillar.init({
+ *     helpCenter: 'your-help-center',
+ *     publicKey: 'pk_live_xxx',
+ *   });
+ * </script>
+ *
+ * @example
+ * // ES Module usage
+ * import { Pillar } from '@pillar-ai/sdk';
+ *
+ * await Pillar.init({
+ *   helpCenter: 'your-help-center',
+ *   publicKey: 'pk_live_xxx',
+ * });
+ */
+export { Pillar, type PillarState } from './core/Pillar';
+export { EventEmitter, type PillarEvents, type TaskExecutePayload, type CardRenderer, type CardCallbacks } from './core/events';
+export { type PillarConfig, type ResolvedConfig, type ResolvedPanelConfig, type PanelConfig, type FloatingButtonConfig, type TooltipsConfig, type UrlParamsConfig, type TextSelectionConfig, type UserContext, type PanelPosition, type PanelMode, type FloatingButtonPosition, type FloatingButtonStyle, type TooltipTrigger, type TooltipPosition, type ThemeMode, type ThemeColors, type ThemeConfig, type ResolvedThemeConfig, type SidebarTabConfig, DEFAULT_SIDEBAR_TABS, } from './core/config';
+export { type ProductContext, type UserProfile, type Suggestion, type AssistantContext, } from './core/context';
+export { type PlanStatus, type StepStatus, type ExecutionLocation, type ExecutionPlan, type ExecutionStep, type PlanEvents, } from './core/plan';
+export { defineActions, setClientInfo, getClientInfo, getHandler, getActionDefinition, hasAction, getActionNames, getManifest, clearRegistry, getActionCount, type ActionType, type ActionDataSchema, type ActionDefinition, type ActionDefinitions, type ActionManifest, type ActionManifestEntry, type ClientInfo, type Platform, type SyncActionDefinition, type SyncActionDefinitions, type ActionTypeDataMap, type NavigateActionData, type TriggerActionData, type InlineUIData, type ExternalLinkData, type CopyTextData, type ActionDataType, type ActionNames, type TypedTaskHandler, type TypedOnTask, type TypedPillarMethods, } from './actions';
+export { APIClient, type TooltipData, type ArticleData, type ArticleSummary, type ChatMessage, type ChatResponse, type ProgressEvent, } from './api/client';
+export { type ChatImage, type ImageUploadResponse, } from './api/mcp-client';
+import { Pillar } from './core/Pillar';
+export default Pillar;

package/dist/panel/Panel.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Help Panel Container
+ * Shadow DOM container for the help panel
+ */
+import type { EventEmitter } from '../core/events';
+import type { ResolvedConfig } from '../core/config';
+import type { APIClient } from '../api/client';
+export declare class Panel {
+    private config;
+    private api;
+    private events;
+    private host;
+    private shadow;
+    private backdrop;
+    private panelElement;
+    private panelUI;
+    private _isOpen;
+    constructor(config: ResolvedConfig, api: APIClient, events: EventEmitter);
+    /**
+     * Whether the panel is currently open
+     */
+    get isOpen(): boolean;
+    /**
+     * Initialize the panel
+     */
+    init(): Promise<void>;
+    /**
+     * Open the panel
+     */
+    open(options?: {
+        view?: string;
+        article?: string;
+        search?: string;
+    }): void;
+    /**
+     * Close the panel
+     */
+    close(): void;
+    /**
+     * Navigate to a specific view
+     */
+    navigate(view: string, params?: Record<string, string>): void;
+    /**
+     * Destroy the panel
+     */
+    destroy(): void;
+    private createHost;
+    private createBackdrop;
+    private createPanel;
+    private bindEvents;
+    private handleKeyDown;
+    private setupFocusTrap;
+}

package/dist/panel/PanelUI.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Panel UI Controller
+ * Manages panel navigation and view rendering with persistent chat input
+ */
+import type { EventEmitter } from '../core/events';
+import type { APIClient } from '../api/client';
+export type ViewType = 'home' | 'article' | 'search' | 'category';
+export interface PanelUIOptions {
+    api: APIClient;
+    events: EventEmitter;
+    onClose: () => void;
+}
+export declare class PanelUI {
+    private options;
+    private container;
+    private header;
+    private content;
+    private chatInput;
+    private homeView;
+    private articleView;
+    private searchView;
+    private categoryView;
+    private viewStack;
+    private currentView;
+    constructor(options: PanelUIOptions);
+    render(): HTMLElement;
+    /**
+     * Show the initial view when panel opens for the first time
+     * or when no view is currently displayed
+     */
+    showInitialView(): void;
+    navigate(view: ViewType, params?: Record<string, string>): void;
+    goBack(): void;
+    reset(): void;
+    private renderView;
+    private renderHomeView;
+    private renderArticleView;
+    private renderSearchView;
+    private renderCategoryView;
+    private updateHeader;
+    private destroyCurrentView;
+    destroy(): void;
+}

package/dist/panel/components/ArticleCard.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Article Card Component
+ */
+import type { ArticleSummary } from '../../api/client';
+export interface ArticleCardOptions {
+    article: ArticleSummary;
+    onClick: (article: ArticleSummary) => void;
+}
+export declare function createArticleCard(options: ArticleCardOptions): HTMLElement;
+export declare function createArticleList(articles: ArticleSummary[], onClick: (article: ArticleSummary) => void): HTMLElement;

package/dist/panel/components/CategoryCard.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Category Card Component
+ */
+import type { CategoryData } from '../../api/client';
+export interface CategoryCardOptions {
+    category: CategoryData;
+    onClick: (category: CategoryData) => void;
+}
+export declare function createCategoryCard(options: CategoryCardOptions): HTMLElement;
+export declare function createCategoryList(categories: CategoryData[], onClick: (category: CategoryData) => void): HTMLElement;

package/dist/panel/components/ChatInput.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Chat Input Component
+ * Persistent chat input with message display area
+ */
+import type { APIClient, ArticleSummary } from '../../api/client';
+export interface ChatInputOptions {
+    api: APIClient;
+    onArticleClick: (article: ArticleSummary) => void;
+}
+export declare class ChatInput {
+    private options;
+    private element;
+    private messagesContainer;
+    private inputElement;
+    private sendButton;
+    private messages;
+    private isLoading;
+    private isExpanded;
+    constructor(options: ChatInputOptions);
+    render(): HTMLElement;
+    private createInputArea;
+    private handleSend;
+    private expand;
+    private addWelcomeMessage;
+    private addMessage;
+    private createAssistantMessageElement;
+    private createSourcesElement;
+    private formatMessageContent;
+    private setLoading;
+    private scrollToBottom;
+    /**
+     * Reset the chat state
+     */
+    reset(): void;
+    destroy(): void;
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Panel Header Component
+ * Displays title, back button, home button, and close button
+ */
+export interface HeaderOptions {
+    title: string;
+    showBack?: boolean;
+    showHome?: boolean;
+    onBack?: () => void;
+    onHome?: () => void;
+    onClose?: () => void;
+}
+export declare function createHeader(options: HeaderOptions): HTMLElement;
+export declare function updateHeaderTitle(header: HTMLElement, title: string): void;
+export declare function setBackButtonVisible(header: HTMLElement, visible: boolean): void;
+export declare function setHomeButtonVisible(header: HTMLElement, visible: boolean): void;

package/dist/panel/components/SearchInput.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Search Input Component
+ */
+export interface SearchInputOptions {
+    placeholder?: string;
+    onSearch: (query: string) => void;
+    debounceMs?: number;
+}
+export declare function createSearchInput(options: SearchInputOptions): HTMLElement;
+export declare function setSearchValue(container: HTMLElement, value: string): void;
+export declare function focusSearch(container: HTMLElement): void;

package/dist/panel/styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Panel CSS Styles
+ * Complete styling for the help panel (injected into Shadow DOM)
+ */
+export declare const PANEL_STYLES = "\n/* Reset and base styles */\n*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n:host {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Panel Container */\n.pillar-panel {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: var(--pillar-panel-width, 380px);\n  max-width: 100vw;\n  background: #ffffff;\n  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);\n  display: flex;\n  flex-direction: column;\n  z-index: 99999;\n  transform: translateX(100%);\n  transition: transform 0.3s ease;\n}\n\n.pillar-panel--right {\n  right: 0;\n}\n\n.pillar-panel--left {\n  left: 0;\n  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);\n  transform: translateX(-100%);\n}\n\n.pillar-panel--open {\n  transform: translateX(0);\n}\n\n/* Panel UI - Main layout */\n.pillar-panel-ui {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* Backdrop */\n.pillar-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.3);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n  z-index: 99998;\n}\n\n.pillar-backdrop--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* Header */\n.pillar-panel__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e5e7eb;\n  flex-shrink: 0;\n}\n\n.pillar-panel__header-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.pillar-panel__back-btn,\n.pillar-panel__home-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  color: #6b7280;\n  background: none;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n\n.pillar-panel__back-btn:hover,\n.pillar-panel__home-btn:hover {\n  color: #1a1a1a;\n  background: #f3f4f6;\n}\n\n.pillar-panel__back-btn svg,\n.pillar-panel__home-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.pillar-panel__title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.pillar-panel__close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  color: #6b7280;\n  background: none;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n\n.pillar-panel__close-btn:hover {\n  color: #1a1a1a;\n  background: #f3f4f6;\n}\n\n.pillar-panel__close-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* Content area */\n.pillar-panel__content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n}\n\n/* Search Input */\n.pillar-search {\n  position: relative;\n  padding: 16px 20px;\n}\n\n.pillar-search__input {\n  width: 100%;\n  padding: 10px 12px 10px 40px;\n  font-size: 14px;\n  color: #1a1a1a;\n  background: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  outline: none;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.pillar-search__input:focus {\n  border-color: #2563eb;\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.pillar-search__input::placeholder {\n  color: #9ca3af;\n}\n\n.pillar-search__icon {\n  position: absolute;\n  left: 32px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 18px;\n  height: 18px;\n  color: #9ca3af;\n  pointer-events: none;\n}\n\n/* Category Card */\n.pillar-category-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 14px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #f3f4f6;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.pillar-category-card:hover {\n  background: #f9fafb;\n}\n\n.pillar-category-card__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: #eff6ff;\n  border-radius: 10px;\n  color: #2563eb;\n  flex-shrink: 0;\n}\n\n.pillar-category-card__icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.pillar-category-card__content {\n  flex: 1;\n  min-width: 0;\n}\n\n.pillar-category-card__title {\n  font-size: 15px;\n  font-weight: 500;\n  color: #1a1a1a;\n  margin-bottom: 2px;\n}\n\n.pillar-category-card__description {\n  font-size: 13px;\n  color: #6b7280;\n}\n\n.pillar-category-card__count {\n  font-size: 12px;\n  color: #9ca3af;\n  margin-top: 4px;\n}\n\n/* Article Card */\n.pillar-article-card {\n  display: block;\n  padding: 16px 20px;\n  border-bottom: 1px solid #f3f4f6;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  text-decoration: none;\n  color: inherit;\n}\n\n.pillar-article-card:hover {\n  background: #f9fafb;\n}\n\n.pillar-article-card__title {\n  font-size: 15px;\n  font-weight: 500;\n  color: #1a1a1a;\n  margin-bottom: 4px;\n}\n\n.pillar-article-card__excerpt {\n  font-size: 13px;\n  color: #6b7280;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.pillar-article-card__meta {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n/* Article Content */\n.pillar-article {\n  padding: 20px;\n}\n\n.pillar-article__title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a1a1a;\n  margin-bottom: 16px;\n}\n\n.pillar-article__content {\n  font-size: 15px;\n  line-height: 1.7;\n  color: #374151;\n}\n\n.pillar-article__content h1,\n.pillar-article__content h2,\n.pillar-article__content h3,\n.pillar-article__content h4 {\n  color: #1a1a1a;\n  margin: 24px 0 12px;\n  font-weight: 600;\n}\n\n.pillar-article__content h2 {\n  font-size: 18px;\n}\n\n.pillar-article__content h3 {\n  font-size: 16px;\n}\n\n.pillar-article__content p {\n  margin: 0 0 16px;\n}\n\n.pillar-article__content ul,\n.pillar-article__content ol {\n  margin: 0 0 16px;\n  padding-left: 24px;\n}\n\n.pillar-article__content li {\n  margin-bottom: 8px;\n}\n\n.pillar-article__content a {\n  color: #2563eb;\n  text-decoration: none;\n}\n\n.pillar-article__content a:hover {\n  text-decoration: underline;\n}\n\n.pillar-article__content code {\n  padding: 2px 6px;\n  font-size: 13px;\n  background: #f3f4f6;\n  border-radius: 4px;\n  font-family: 'SF Mono', Consolas, monospace;\n}\n\n.pillar-article__content pre {\n  padding: 16px;\n  margin: 0 0 16px;\n  background: #1a1a1a;\n  border-radius: 8px;\n  overflow-x: auto;\n}\n\n.pillar-article__content pre code {\n  padding: 0;\n  background: none;\n  color: #e5e7eb;\n}\n\n.pillar-article__content img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n  margin: 16px 0;\n}\n\n/* ============================================================================\n   Persistent Chat Input (bottom of panel)\n   ============================================================================ */\n\n.pillar-chat-input-container {\n  flex-shrink: 0;\n  border-top: 1px solid #e5e7eb;\n  background: #ffffff;\n  display: flex;\n  flex-direction: column;\n  max-height: 50%;\n  transition: max-height 0.3s ease;\n}\n\n.pillar-chat-input-container--expanded {\n  max-height: 60%;\n}\n\n/* Messages area */\n.pillar-chat-input__messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0;\n  max-height: 0;\n  transition: max-height 0.3s ease, padding 0.3s ease;\n}\n\n.pillar-chat-input-container--expanded .pillar-chat-input__messages {\n  max-height: 300px;\n  padding: 16px 20px;\n}\n\n.pillar-chat-input__message {\n  margin-bottom: 12px;\n}\n\n.pillar-chat-input__message--user {\n  text-align: right;\n}\n\n.pillar-chat-input__message-content {\n  display: inline-block;\n  max-width: 85%;\n  padding: 10px 14px;\n  border-radius: 16px;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.pillar-chat-input__message--user .pillar-chat-input__message-content {\n  background: #2563eb;\n  color: #ffffff;\n  border-bottom-right-radius: 4px;\n}\n\n.pillar-chat-input__message--assistant .pillar-chat-input__message-content {\n  background: #f3f4f6;\n  color: #1a1a1a;\n  border-bottom-left-radius: 4px;\n}\n\n.pillar-chat-input__sources {\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid #e5e7eb;\n}\n\n.pillar-chat-input__sources-title {\n  font-size: 11px;\n  font-weight: 500;\n  color: #6b7280;\n  margin-bottom: 6px;\n}\n\n.pillar-chat-input__source {\n  display: block;\n  padding: 6px 10px;\n  margin-bottom: 4px;\n  font-size: 12px;\n  color: #2563eb;\n  background: #eff6ff;\n  border-radius: 6px;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.pillar-chat-input__source:hover {\n  background: #dbeafe;\n}\n\n/* Input area */\n.pillar-chat-input__area {\n  padding: 12px 16px;\n}\n\n.pillar-chat-input__wrapper {\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n}\n\n.pillar-chat-input__input {\n  flex: 1;\n  padding: 10px 14px;\n  font-size: 14px;\n  font-family: inherit;\n  color: #1a1a1a;\n  background: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-radius: 20px;\n  outline: none;\n  resize: none;\n  min-height: 40px;\n  max-height: 120px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.pillar-chat-input__input:focus {\n  border-color: #2563eb;\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.pillar-chat-input__input::placeholder {\n  color: #9ca3af;\n}\n\n.pillar-chat-input__send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  color: #ffffff;\n  background: #2563eb;\n  border: none;\n  border-radius: 20px;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: background 0.15s ease;\n}\n\n.pillar-chat-input__send-btn:hover:not(:disabled) {\n  background: #1d4ed8;\n}\n\n.pillar-chat-input__send-btn:disabled {\n  background: #9ca3af;\n  cursor: not-allowed;\n}\n\n.pillar-chat-input__send-btn svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* ============================================================================\n   Legacy Chat View (for backwards compatibility)\n   ============================================================================ */\n\n.pillar-chat {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.pillar-chat__messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n\n.pillar-chat__message {\n  margin-bottom: 16px;\n}\n\n.pillar-chat__message--user {\n  text-align: right;\n}\n\n.pillar-chat__message-content {\n  display: inline-block;\n  max-width: 85%;\n  padding: 12px 16px;\n  border-radius: 16px;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.pillar-chat__message--user .pillar-chat__message-content {\n  background: #2563eb;\n  color: #ffffff;\n  border-bottom-right-radius: 4px;\n}\n\n.pillar-chat__message--assistant .pillar-chat__message-content {\n  background: #f3f4f6;\n  color: #1a1a1a;\n  border-bottom-left-radius: 4px;\n}\n\n.pillar-chat__sources {\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid #e5e7eb;\n}\n\n.pillar-chat__sources-title {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6b7280;\n  margin-bottom: 8px;\n}\n\n.pillar-chat__source {\n  display: block;\n  padding: 8px 12px;\n  margin-bottom: 4px;\n  font-size: 13px;\n  color: #2563eb;\n  background: #eff6ff;\n  border-radius: 6px;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.pillar-chat__source:hover {\n  background: #dbeafe;\n}\n\n.pillar-chat__input-area {\n  padding: 16px 20px;\n  border-top: 1px solid #e5e7eb;\n  background: #ffffff;\n}\n\n.pillar-chat__input-wrapper {\n  display: flex;\n  gap: 8px;\n}\n\n.pillar-chat__input {\n  flex: 1;\n  padding: 10px 14px;\n  font-size: 14px;\n  color: #1a1a1a;\n  background: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-radius: 20px;\n  outline: none;\n  resize: none;\n  min-height: 40px;\n  max-height: 120px;\n}\n\n.pillar-chat__input:focus {\n  border-color: #2563eb;\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.pillar-chat__send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  color: #ffffff;\n  background: #2563eb;\n  border: none;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.pillar-chat__send-btn:hover:not(:disabled) {\n  background: #1d4ed8;\n}\n\n.pillar-chat__send-btn:disabled {\n  background: #9ca3af;\n  cursor: not-allowed;\n}\n\n.pillar-chat__send-btn svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* Loading states */\n.pillar-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  color: #6b7280;\n}\n\n.pillar-loading__spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid #e5e7eb;\n  border-top-color: #2563eb;\n  border-radius: 50%;\n  animation: pillar-spin 0.8s linear infinite;\n}\n\n@keyframes pillar-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* Empty states */\n.pillar-empty {\n  padding: 40px 20px;\n  text-align: center;\n  color: #6b7280;\n}\n\n.pillar-empty__icon {\n  width: 48px;\n  height: 48px;\n  margin: 0 auto 16px;\n  color: #d1d5db;\n}\n\n.pillar-empty__title {\n  font-size: 16px;\n  font-weight: 500;\n  color: #1a1a1a;\n  margin-bottom: 4px;\n}\n\n.pillar-empty__description {\n  font-size: 14px;\n}\n\n/* Section titles */\n.pillar-section-title {\n  padding: 12px 20px 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #6b7280;\n}\n\n/* Chat entry button (legacy - kept for backwards compatibility) */\n.pillar-chat-entry {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 16px 20px;\n  padding: 14px 16px;\n  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);\n  border: none;\n  border-radius: 12px;\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.pillar-chat-entry:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\n}\n\n.pillar-chat-entry__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 10px;\n  color: #ffffff;\n}\n\n.pillar-chat-entry__icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.pillar-chat-entry__content {\n  flex: 1;\n  text-align: left;\n}\n\n.pillar-chat-entry__title {\n  font-size: 15px;\n  font-weight: 600;\n  color: #ffffff;\n  margin-bottom: 2px;\n}\n\n.pillar-chat-entry__description {\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n}\n\n/* Scrollbar styling */\n.pillar-panel__content::-webkit-scrollbar,\n.pillar-chat__messages::-webkit-scrollbar,\n.pillar-chat-input__messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n.pillar-panel__content::-webkit-scrollbar-track,\n.pillar-chat__messages::-webkit-scrollbar-track,\n.pillar-chat-input__messages::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.pillar-panel__content::-webkit-scrollbar-thumb,\n.pillar-chat__messages::-webkit-scrollbar-thumb,\n.pillar-chat-input__messages::-webkit-scrollbar-thumb {\n  background: #d1d5db;\n  border-radius: 3px;\n}\n\n.pillar-panel__content::-webkit-scrollbar-thumb:hover,\n.pillar-chat__messages::-webkit-scrollbar-thumb:hover,\n.pillar-chat-input__messages::-webkit-scrollbar-thumb:hover {\n  background: #9ca3af;\n}\n\n/* Home view */\n.pillar-home-view {\n  padding-bottom: 16px;\n}\n";

package/dist/panel/views/ArticleView.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Article View
+ * Displays article content using TipTap for rendering
+ */
+import type { APIClient, ArticleSummary } from '../../api/client';
+export interface ArticleViewOptions {
+    api: APIClient;
+    onArticleClick: (article: ArticleSummary) => void;
+}
+export declare class ArticleView {
+    private options;
+    private element;
+    private currentSlug;
+    constructor(options: ArticleViewOptions);
+    render(slug: string): Promise<HTMLElement>;
+    private loadArticle;
+    private createArticleElement;
+    private createRelatedArticles;
+    getTitle(): string;
+    destroy(): void;
+}

package/dist/panel/views/CategoryView.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Category View
+ * Displays articles within a category
+ */
+import type { APIClient, CategoryData, ArticleSummary } from '../../api/client';
+export interface CategoryViewOptions {
+    api: APIClient;
+    onArticleClick: (article: ArticleSummary) => void;
+}
+export declare class CategoryView {
+    private options;
+    private element;
+    private currentCategory;
+    constructor(options: CategoryViewOptions);
+    render(category: CategoryData): Promise<HTMLElement>;
+    private createCategoryHeader;
+    private loadArticles;
+    getTitle(): string;
+    destroy(): void;
+}

package/dist/panel/views/ChatView.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Chat View
+ * AI chat interface with streaming responses
+ */
+import type { APIClient, ArticleSummary } from '../../api/client';
+export interface ChatViewOptions {
+    api: APIClient;
+    onArticleClick: (article: ArticleSummary) => void;
+}
+export declare class ChatView {
+    private options;
+    private element;
+    private messagesContainer;
+    private inputElement;
+    private sendButton;
+    private messages;
+    private isLoading;
+    constructor(options: ChatViewOptions);
+    render(): HTMLElement;
+    private createInputArea;
+    private addWelcomeMessage;
+    private handleSend;
+    private addMessage;
+    private createAssistantMessageElement;
+    private createSourcesElement;
+    private formatMessageContent;
+    private setLoading;
+    private scrollToBottom;
+    destroy(): void;
+}

package/dist/panel/views/HomeView.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Home View
+ * Default panel view with categories list
+ */
+import type { APIClient, CategoryData } from '../../api/client';
+export interface HomeViewOptions {
+    api: APIClient;
+    onCategoryClick: (category: CategoryData) => void;
+}
+export declare class HomeView {
+    private options;
+    private element;
+    private categoriesLoaded;
+    constructor(options: HomeViewOptions);
+    render(): HTMLElement;
+    private loadCategories;
+    destroy(): void;
+}

package/dist/panel/views/SearchView.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Search View
+ * Search results display
+ */
+import type { APIClient, ArticleSummary } from '../../api/client';
+export interface SearchViewOptions {
+    api: APIClient;
+    onArticleClick: (article: ArticleSummary) => void;
+    initialQuery?: string;
+}
+export declare class SearchView {
+    private options;
+    private element;
+    private resultsContainer;
+    private currentQuery;
+    constructor(options: SearchViewOptions);
+    render(): HTMLElement;
+    private handleSearch;
+    private showEmptyState;
+    private showNoResults;
+    destroy(): void;
+}