@pillar-ai/sdk 0.1.8 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/README.md +118 -60
  2. package/dist/actions/index.d.ts +1 -1
  3. package/dist/actions/registry.d.ts +15 -27
  4. package/dist/actions/types.d.ts +20 -8
  5. package/dist/api/client.d.ts +91 -5
  6. package/dist/api/mcp-client.d.ts +105 -79
  7. package/dist/cli/sync.d.ts +0 -1
  8. package/dist/cli/sync.js +102 -14
  9. package/dist/components/DebugPanel/DebugPanel.d.ts +25 -0
  10. package/dist/components/DebugPanel/index.d.ts +2 -0
  11. package/dist/components/DevTools/index.d.ts +5 -0
  12. package/dist/components/DevTools/styles.d.ts +5 -0
  13. package/dist/components/Panel/Header.d.ts +1 -1
  14. package/dist/components/Panel/HistoryDropdown.d.ts +10 -0
  15. package/dist/components/Panel/Panel.d.ts +1 -0
  16. package/dist/components/Panel/TaskButton.d.ts +4 -14
  17. package/dist/components/Panel/styles.d.ts +1 -1
  18. package/dist/components/Plan/InlinePlanView.d.ts +1 -1
  19. package/dist/components/Plan/PlanDocument.d.ts +18 -0
  20. package/dist/components/Plan/PlanStepItem.d.ts +1 -1
  21. package/dist/components/Plan/PlanView.d.ts +1 -1
  22. package/dist/components/Plan/index.d.ts +1 -0
  23. package/dist/components/Progress/ProgressRow.d.ts +16 -0
  24. package/dist/components/Progress/ProgressStack.d.ts +15 -0
  25. package/dist/components/Progress/ReasoningDisclosure.d.ts +20 -0
  26. package/dist/components/Progress/index.d.ts +3 -0
  27. package/dist/components/Views/HomeView.d.ts +3 -0
  28. package/dist/components/Views/ResumePrompt.d.ts +22 -0
  29. package/dist/components/Views/index.d.ts +1 -0
  30. package/dist/components/index.d.ts +1 -0
  31. package/dist/components/shared/icons.d.ts +24 -0
  32. package/dist/components/shared/index.d.ts +1 -0
  33. package/dist/core/Pillar.d.ts +318 -80
  34. package/dist/core/config.d.ts +141 -3
  35. package/dist/core/events.d.ts +55 -70
  36. package/dist/core/plan-executor.d.ts +29 -0
  37. package/dist/core/plan.d.ts +6 -0
  38. package/dist/hooks/index.d.ts +5 -0
  39. package/dist/hooks/useDebouncedValue.d.ts +22 -0
  40. package/dist/hooks/useInlineCard.d.ts +35 -0
  41. package/dist/hooks/usePillarInstance.d.ts +30 -0
  42. package/dist/index.d.ts +14 -12
  43. package/dist/pillar.esm.js +1 -1
  44. package/dist/store/chat.d.ts +102 -4
  45. package/dist/store/index.d.ts +1 -0
  46. package/dist/store/session-persistence.d.ts +62 -0
  47. package/dist/store/suggestions.d.ts +58 -0
  48. package/dist/types/dom-scanner.d.ts +46 -0
  49. package/dist/types/index.d.ts +1 -0
  50. package/dist/types/user-context.d.ts +32 -1
  51. package/dist/utils/debug.d.ts +150 -0
  52. package/dist/utils/dom-scanner.d.ts +44 -0
  53. package/dist/utils/markdown-components.d.ts +53 -0
  54. package/dist/utils/preact-markdown.d.ts +17 -0
  55. package/dist/utils/route-observer.d.ts +67 -0
  56. package/package.json +1 -1
  57. package/src/actions/types.ts +21 -7
  58. package/dist/utils/markdown.d.ts +0 -9
package/dist/components/Panel/styles.d.ts CHANGED
@@ -17,4 +17,4 @@ export declare function generateThemeVariables(colors: ThemeColors, prefix?: str
17
17
  * Generate custom theme CSS from config
18
18
  */
19
19
  export declare function generateThemeCSS(theme: ResolvedThemeConfig): string;
20
- export declare const PANEL_STYLES = "\n/* ============================================================================\n CSS Custom Properties (Variables)\n Users can override these to customize colors\n ============================================================================ */\n\n:host {\n /* Core colors - Light mode (default) */\n --pillar-primary: #2563eb;\n --pillar-primary-hover: #1d4ed8;\n --pillar-primary-light: #eff6ff;\n --pillar-primary-light-hover: #dbeafe;\n \n --pillar-bg: #ffffff;\n --pillar-bg-secondary: #f9fafb;\n --pillar-bg-tertiary: #f3f4f6;\n \n --pillar-text: #1a1a1a;\n --pillar-text-secondary: #374151;\n --pillar-text-muted: #6b7280;\n --pillar-text-placeholder: #9ca3af;\n \n --pillar-border: #e5e7eb;\n --pillar-border-light: #f3f4f6;\n \n /* Shadows */\n --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n \n /* Code blocks */\n --pillar-code-bg: #1f2937;\n --pillar-code-text: #e5e7eb;\n \n /* Scrollbar */\n --pillar-scrollbar-track: transparent;\n --pillar-scrollbar-thumb: #d1d5db;\n --pillar-scrollbar-thumb-hover: #9ca3af;\n \n /* Spacing (can be customized) */\n --pillar-panel-width: 380px;\n --pillar-spacing-xs: 4px;\n --pillar-spacing-sm: 8px;\n --pillar-spacing-md: 12px;\n --pillar-spacing-lg: 16px;\n --pillar-spacing-xl: 20px;\n --pillar-spacing-2xl: 24px;\n \n /* Border radius */\n --pillar-radius-sm: 4px;\n --pillar-radius-md: 6px;\n --pillar-radius-lg: 8px;\n --pillar-radius-xl: 10px;\n --pillar-radius-full: 9999px;\n \n /* Typography */\n --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n --pillar-font-mono: 'SF Mono', Consolas, monospace;\n --pillar-font-size-xs: 11px;\n --pillar-font-size-sm: 12px;\n --pillar-font-size-base: 14px;\n --pillar-font-size-md: 15px;\n --pillar-font-size-lg: 16px;\n --pillar-font-size-xl: 18px;\n --pillar-font-size-2xl: 20px;\n \n /* Animation */\n --pillar-transition-fast: 0.15s ease;\n --pillar-transition-normal: 0.3s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n :host:not([data-theme=\"light\"]) {\n --pillar-primary: #3b82f6;\n --pillar-primary-hover: #60a5fa;\n --pillar-primary-light: #1e3a5f;\n --pillar-primary-light-hover: #1e4976;\n \n --pillar-bg: #1a1a1a;\n --pillar-bg-secondary: #262626;\n --pillar-bg-tertiary: #333333;\n \n --pillar-text: #f5f5f5;\n --pillar-text-secondary: #e5e5e5;\n --pillar-text-muted: #a3a3a3;\n --pillar-text-placeholder: #737373;\n \n --pillar-border: #404040;\n --pillar-border-light: #333333;\n \n --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n \n --pillar-code-bg: #0d0d0d;\n --pillar-code-text: #e5e7eb;\n \n --pillar-scrollbar-thumb: #525252;\n --pillar-scrollbar-thumb-hover: #737373;\n }\n}\n\n/* Dark mode - Manual override */\n:host([data-theme=\"dark\"]) {\n --pillar-primary: #3b82f6;\n --pillar-primary-hover: #60a5fa;\n --pillar-primary-light: #1e3a5f;\n --pillar-primary-light-hover: #1e4976;\n \n --pillar-bg: #1a1a1a;\n --pillar-bg-secondary: #262626;\n --pillar-bg-tertiary: #333333;\n \n --pillar-text: #f5f5f5;\n --pillar-text-secondary: #e5e5e5;\n --pillar-text-muted: #a3a3a3;\n --pillar-text-placeholder: #737373;\n \n --pillar-border: #404040;\n --pillar-border-light: #333333;\n \n --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n \n --pillar-code-bg: #0d0d0d;\n --pillar-code-text: #e5e7eb;\n \n --pillar-scrollbar-thumb: #525252;\n --pillar-scrollbar-thumb-hover: #737373;\n}\n\n/* ============================================================================\n Base Styles\n Note: No CSS reset - we rely on explicit styles for SDK components\n and allow custom cards to inherit host app styling (Tailwind, etc.)\n ============================================================================ */\n\n:host {\n font-family: var(--pillar-font-family);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n color: var(--pillar-text);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* ============================================================================\n Panel Container\n Internal: _pillar-panel | Public: pillar-panel\n ============================================================================ */\n\n._pillar-panel {\n position: fixed;\n top: 0;\n bottom: 0;\n width: var(--pillar-panel-width);\n max-width: 100vw;\n background: var(--pillar-bg);\n border-left: 1px solid var(--pillar-border);\n display: flex;\n flex-direction: column;\n z-index: 99999;\n transform: translateX(100%);\n transition: transform var(--pillar-transition-normal);\n}\n\n._pillar-panel--right {\n right: 0;\n}\n\n._pillar-panel--left {\n left: 0;\n border-left: none;\n border-right: 1px solid var(--pillar-border);\n transform: translateX(-100%);\n}\n\n._pillar-panel--open {\n transform: translateX(0);\n}\n\n._pillar-panel--manual {\n position: static;\n transform: none;\n height: 100%;\n}\n\n._pillar-panel--full-width {\n width: 100vw;\n max-width: 100vw;\n}\n\n._pillar-panel-root {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n._pillar-panel-ui {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Public override classes - empty by default */\n.pillar-panel {}\n.pillar-panel-root {}\n.pillar-panel-ui {}\n\n/* ============================================================================\n Backdrop\n ============================================================================ */\n\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 var(--pillar-transition-normal), visibility var(--pillar-transition-normal);\n z-index: 99998;\n}\n\n._pillar-backdrop--visible {\n opacity: 1;\n visibility: visible;\n}\n\n.pillar-backdrop {}\n\n/* ============================================================================\n Header\n Internal: _pillar-header | Public: pillar-header\n ============================================================================ */\n\n._pillar-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n border-bottom: 1px solid var(--pillar-border);\n flex-shrink: 0;\n background: var(--pillar-bg);\n}\n\n._pillar-header-left {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n}\n\n._pillar-header-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n/* Public override classes */\n.pillar-header {}\n.pillar-header-left {}\n.pillar-header-title {}\n\n/* ============================================================================\n Icon Buttons (back, home, close)\n Internal: _pillar-icon-btn | Public: pillar-icon-btn\n ============================================================================ */\n\n._pillar-icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: none;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast), background var(--pillar-transition-fast);\n}\n\n._pillar-icon-btn:hover {\n color: var(--pillar-text);\n background: var(--pillar-bg-tertiary);\n}\n\n._pillar-icon-btn svg {\n width: 20px;\n height: 20px;\n}\n\n.pillar-icon-btn {}\n.pillar-back-btn {}\n.pillar-home-btn {}\n.pillar-close-btn {}\n\n/* ============================================================================\n Content Area\n Internal: _pillar-content | Public: pillar-content\n ============================================================================ */\n\n._pillar-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n.pillar-content {}\n\n/* ============================================================================\n Search Input\n Internal: _pillar-search | Public: pillar-search\n ============================================================================ */\n\n._pillar-search {\n position: relative;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-search-input {\n width: 100%;\n padding: 10px 12px 10px 40px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n outline: none;\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-search-input:focus {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-search-input::placeholder {\n color: var(--pillar-text-placeholder);\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: var(--pillar-text-placeholder);\n pointer-events: none;\n}\n\n._pillar-search-icon svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-search {}\n.pillar-search-input {}\n.pillar-search-icon {}\n\n/* ============================================================================\n Chat Input (Persistent Bottom)\n Internal: _pillar-chat-input | Public: pillar-chat-input\n ============================================================================ */\n\n._pillar-chat-input-container {\n flex-shrink: 0;\n border-top: 1px solid var(--pillar-border);\n background: var(--pillar-bg);\n display: flex;\n flex-direction: column;\n max-height: 50%;\n transition: max-height var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded {\n max-height: 60%;\n}\n\n._pillar-chat-input-messages {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n max-height: 0;\n transition: max-height var(--pillar-transition-normal), padding var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded ._pillar-chat-input-messages {\n max-height: 300px;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-chat-input-message {\n margin-bottom: var(--pillar-spacing-md);\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: var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n}\n\n._pillar-chat-input-message--user ._pillar-chat-input-message-content {\n background: var(--pillar-primary);\n color: #ffffff;\n border-bottom-right-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-message--assistant ._pillar-chat-input-message-content {\n background: var(--pillar-bg-tertiary);\n color: var(--pillar-text);\n border-bottom-left-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-sources {\n margin-top: var(--pillar-spacing-sm);\n padding-top: var(--pillar-spacing-sm);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-input-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: 6px;\n}\n\n._pillar-chat-input-source {\n display: block;\n padding: 6px 10px;\n margin-bottom: var(--pillar-spacing-xs);\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-md);\n text-decoration: none;\n cursor: pointer;\n}\n\n._pillar-chat-input-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-chat-input-area {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n}\n\n._pillar-chat-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-input-textarea {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-input-textarea::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n.pillar-chat-input-container {}\n.pillar-chat-input-messages {}\n.pillar-chat-input-message {}\n.pillar-chat-input-message-content {}\n.pillar-chat-input-sources {}\n.pillar-chat-input-area {}\n.pillar-chat-input-wrapper {}\n.pillar-chat-input-textarea {}\n\n/* ============================================================================\n Chat Input Footer (contains send button)\n ============================================================================ */\n\n._pillar-chat-input-footer {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n/* ============================================================================\n Send Button - In footer row, right aligned\n Internal: _pillar-send-btn | Public: pillar-send-btn\n ============================================================================ */\n\n._pillar-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-send-btn {}\n.pillar-chat-input-footer {}\n\n/* ============================================================================\n Loading States\n Internal: _pillar-loading | Public: pillar-loading\n ============================================================================ */\n\n._pillar-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px var(--pillar-spacing-xl);\n color: var(--pillar-text-muted);\n}\n\n._pillar-loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--pillar-border);\n border-top-color: var(--pillar-primary);\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.pillar-loading {}\n.pillar-loading-spinner {}\n\n/* ============================================================================\n Progress Indicator (AI activity status)\n Internal: _pillar-progress | Public: pillar-progress\n ============================================================================ */\n\n._pillar-progress-indicator {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n padding: var(--pillar-spacing-sm) 0;\n}\n\n._pillar-progress-indicator ._pillar-loading-spinner {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n}\n\n._pillar-progress-message {\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n font-style: italic;\n}\n\n.pillar-progress-indicator {}\n.pillar-progress-message {}\n\n/* ============================================================================\n Empty States\n Internal: _pillar-empty | Public: pillar-empty\n ============================================================================ */\n\n._pillar-empty {\n padding: 40px var(--pillar-spacing-xl);\n text-align: center;\n color: var(--pillar-text-muted);\n}\n\n._pillar-empty-icon {\n width: 48px;\n height: 48px;\n margin: 0 auto var(--pillar-spacing-lg);\n color: var(--pillar-border);\n}\n\n._pillar-empty-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 500;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-empty-description {\n font-size: var(--pillar-font-size-base);\n}\n\n.pillar-empty {}\n.pillar-empty-icon {}\n.pillar-empty-title {}\n.pillar-empty-description {}\n\n/* ============================================================================\n Section Titles\n Internal: _pillar-section-title | Public: pillar-section-title\n ============================================================================ */\n\n._pillar-section-title {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-xl) var(--pillar-spacing-sm);\n font-size: var(--pillar-font-size-xs);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--pillar-text-muted);\n}\n\n.pillar-section-title {}\n\n/* ============================================================================\n Related Articles\n ============================================================================ */\n\n._pillar-related-articles {\n border-top: 1px solid var(--pillar-border);\n margin-top: var(--pillar-spacing-2xl);\n padding-top: var(--pillar-spacing-sm);\n}\n\n.pillar-related-articles {}\n\n/* ============================================================================\n Scrollbar Styling\n ============================================================================ */\n\n._pillar-content::-webkit-scrollbar,\n._pillar-chat-input-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-content::-webkit-scrollbar-track,\n._pillar-chat-input-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-content::-webkit-scrollbar-thumb,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-content::-webkit-scrollbar-thumb:hover,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Home View\n ============================================================================ */\n\n._pillar-home-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-header {\n text-align: center;\n padding: var(--pillar-spacing-2xl) 0;\n}\n\n._pillar-home-view-icon {\n font-size: 40px;\n margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-home-view-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 0;\n}\n\n._pillar-home-view-questions {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n margin-bottom: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-input-wrapper {\n margin-top: auto;\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-home-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-home-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-home-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-home-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-home-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-home-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-home-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-home-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-home-view {}\n.pillar-home-view-header {}\n.pillar-home-view-title {}\n.pillar-home-view-questions {}\n.pillar-home-view-input-wrapper {}\n.pillar-home-view-input {}\n.pillar-home-view-send-btn {}\n\n/* ============================================================================\n Question Chip\n ============================================================================ */\n\n._pillar-question-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n text-align: left;\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: background var(--pillar-transition-fast), border-color var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover {\n border-color: var(--pillar-primary);\n}\n\n._pillar-question-chip-text {\n flex: 1;\n}\n\n._pillar-question-chip-arrow {\n color: var(--pillar-text-muted);\n margin-left: var(--pillar-spacing-sm);\n transition: color var(--pillar-transition-fast), transform var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover ._pillar-question-chip-arrow {\n color: var(--pillar-primary);\n transform: translateX(2px);\n}\n\n._pillar-question-chip-skeleton {\n height: 44px;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n overflow: hidden;\n}\n\n._pillar-question-chip-skeleton-bar {\n width: 60%;\n height: 14px;\n margin: 15px var(--pillar-spacing-lg);\n background: linear-gradient(90deg, var(--pillar-border) 25%, var(--pillar-bg-tertiary) 50%, var(--pillar-border) 75%);\n background-size: 200% 100%;\n animation: pillar-shimmer 1.5s infinite;\n border-radius: var(--pillar-radius-sm);\n}\n\n@keyframes pillar-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n.pillar-question-chip {}\n.pillar-question-chip-text {}\n.pillar-question-chip-arrow {}\n.pillar-question-chip-skeleton {}\n.pillar-question-chip-skeleton-bar {}\n\n/* ============================================================================\n Standalone Chat View\n Internal: _pillar-chat-view | Public: pillar-chat-view\n ============================================================================ */\n\n._pillar-chat-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n._pillar-chat-view-messages {\n flex: 1;\n overflow-y: auto;\n padding: var(--pillar-spacing-xl);\n display: flex;\n flex-direction: column;\n}\n\n._pillar-chat-view-welcome {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px var(--pillar-spacing-xl);\n text-align: center;\n flex: 1;\n}\n\n._pillar-chat-view-welcome-icon {\n font-size: 48px;\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-welcome-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-welcome-text {\n font-size: var(--pillar-font-size-base);\n color: var(--pillar-text-muted);\n max-width: 280px;\n}\n\n._pillar-chat-view-message {\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-message--user {\n text-align: right;\n}\n\n._pillar-chat-view-message--assistant {\n text-align: left;\n}\n\n.pillar-chat-view {}\n.pillar-chat-view-messages {}\n.pillar-chat-view-welcome {}\n.pillar-chat-view-message {}\n\n/* ============================================================================\n User Message Bubble\n Internal: _pillar-message-user | Public: pillar-message-user\n ============================================================================ */\n\n._pillar-message-user {\n display: inline-block;\n max-width: 85%;\n padding: 10px 14px;\n border-radius: var(--pillar-spacing-lg);\n border-bottom-right-radius: var(--pillar-radius-sm);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n background: var(--pillar-primary);\n color: #ffffff;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n._pillar-message-user-images {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-message-user-image {\n max-width: 120px;\n max-height: 120px;\n border-radius: var(--pillar-radius-md);\n object-fit: cover;\n}\n\n.pillar-message-user {}\n.pillar-message-user-images {}\n.pillar-message-user-image {}\n\n/* ============================================================================\n AI Response\n Internal: _pillar-message-assistant | Public: pillar-message-assistant\n ============================================================================ */\n\n._pillar-message-assistant {\n font-size: var(--pillar-font-size-base);\n line-height: 1.6;\n color: var(--pillar-text-secondary);\n}\n\n._pillar-message-assistant p {\n margin: 0 0 var(--pillar-spacing-md);\n}\n\n._pillar-message-assistant p:last-child {\n margin-bottom: 0;\n}\n\n._pillar-message-assistant h2 {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-lg) 0 var(--pillar-spacing-sm);\n}\n\n._pillar-message-assistant h3 {\n font-size: var(--pillar-font-size-md);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 14px 0 6px;\n}\n\n._pillar-message-assistant h4 {\n font-size: var(--pillar-font-size-base);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-md) 0 6px;\n}\n\n._pillar-message-assistant ul,\n._pillar-message-assistant ol {\n margin: 0 0 var(--pillar-spacing-md);\n padding-left: var(--pillar-spacing-2xl);\n list-style-position: outside;\n}\n\n._pillar-message-assistant ul {\n list-style-type: disc;\n}\n\n._pillar-message-assistant ol {\n list-style-type: decimal;\n}\n\n._pillar-message-assistant li {\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-message-assistant code {\n padding: 2px 6px;\n font-size: var(--pillar-font-size-sm);\n background: var(--pillar-bg-tertiary);\n border-radius: var(--pillar-radius-sm);\n font-family: var(--pillar-font-mono);\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant pre {\n margin: var(--pillar-spacing-md) 0;\n padding: var(--pillar-spacing-md) 14px;\n background: var(--pillar-code-bg);\n border-radius: var(--pillar-radius-lg);\n overflow-x: auto;\n}\n\n._pillar-message-assistant pre code {\n padding: 0;\n background: none;\n color: var(--pillar-code-text);\n font-size: var(--pillar-font-size-sm);\n line-height: 1.5;\n}\n\n._pillar-message-assistant a {\n color: var(--pillar-primary);\n text-decoration: none;\n}\n\n._pillar-message-assistant a:hover {\n text-decoration: underline;\n}\n\n._pillar-message-assistant strong {\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant em {\n font-style: italic;\n}\n\n.pillar-message-assistant {}\n\n/* ============================================================================\n Chat Sources\n Internal: _pillar-chat-sources | Public: pillar-chat-sources\n ============================================================================ */\n\n._pillar-chat-sources {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-source {\n display: block;\n padding: var(--pillar-spacing-sm) var(--pillar-spacing-md);\n margin-bottom: 6px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-lg);\n text-decoration: none;\n cursor: pointer;\n transition: background var(--pillar-transition-fast);\n}\n\n._pillar-chat-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n.pillar-chat-sources {}\n.pillar-chat-sources-title {}\n.pillar-chat-source {}\n\n/* ============================================================================\n Chat Actions (Suggested action buttons)\n Internal: _pillar-chat-actions | Public: pillar-chat-actions\n ============================================================================ */\n\n._pillar-chat-actions {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-actions-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-actions-buttons {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Task buttons should wrap horizontally */\n._pillar-chat-actions-buttons > ._pillar-task-button-group {\n display: flex;\n flex-wrap: wrap;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Confirm cards take full width */\n._pillar-chat-actions-buttons > .pillar-confirm-card-wrapper {\n width: 100%;\n}\n\n.pillar-chat-actions {}\n.pillar-chat-actions-title {}\n.pillar-chat-actions-buttons {}\n\n/* ============================================================================\n Chat View Input Area - Cursor-style design\n ============================================================================ */\n\n._pillar-chat-view-input-area {\n flex-shrink: 0;\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n border-top: 1px solid var(--pillar-border);\n background: var(--pillar-bg);\n}\n\n._pillar-chat-view-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-chat-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-chat-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-chat-view-send-btn:active:not(:disabled) {\n transform: scale(0.95);\n}\n\n._pillar-chat-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-chat-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-chat-view-input-area {}\n.pillar-chat-view-input-wrapper {}\n.pillar-chat-view-input {}\n.pillar-chat-view-send-btn {}\n.pillar-chat-view-input-footer {}\n.pillar-chat-view-new-chat-btn {}\n\n/* New chat button styling */\n._pillar-chat-view-input-footer {\n display: flex;\n justify-content: center;\n margin-top: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-new-chat-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n font-family: var(--pillar-font-family);\n color: var(--pillar-text-muted);\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-new-chat-btn:hover {\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-text-muted);\n}\n\n._pillar-chat-view-new-chat-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-view-new-chat-icon svg {\n width: 14px;\n height: 14px;\n}\n\n/* Scrollbar for chat view */\n._pillar-chat-view-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Chat Image Upload\n ============================================================================ */\n\n._pillar-chat-view-input-area--dragging {\n position: relative;\n background: rgba(37, 99, 235, 0.05);\n}\n\n._pillar-chat-drop-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: rgba(37, 99, 235, 0.1);\n border: 2px dashed var(--pillar-primary);\n border-radius: var(--pillar-radius-lg);\n color: var(--pillar-primary);\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n z-index: 10;\n pointer-events: none;\n}\n\n._pillar-chat-drop-overlay svg {\n width: 24px;\n height: 24px;\n}\n\n._pillar-chat-images-preview {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 12px 4px 12px;\n}\n\n._pillar-chat-image-thumb {\n position: relative;\n width: 56px;\n height: 56px;\n border-radius: var(--pillar-radius-md);\n overflow: hidden;\n border: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-image-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n._pillar-chat-image-loading {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-image-error {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(239, 68, 68, 0.3);\n color: #dc2626;\n font-weight: bold;\n font-size: 14px;\n}\n\n._pillar-chat-image-remove {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 18px;\n height: 18px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.6);\n border: none;\n border-radius: 50%;\n color: white;\n cursor: pointer;\n opacity: 0;\n transition: opacity var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-thumb:hover ._pillar-chat-image-remove {\n opacity: 1;\n}\n\n._pillar-chat-image-remove svg {\n width: 10px;\n height: 10px;\n}\n\n._pillar-chat-image-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: transparent;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-btn:hover:not(:disabled) {\n color: var(--pillar-text);\n}\n\n._pillar-chat-image-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n._pillar-chat-image-btn svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-chat-images-preview {}\n.pillar-chat-image-thumb {}\n.pillar-chat-image-remove {}\n.pillar-chat-image-btn {}\n.pillar-chat-drop-overlay {}\n\n/* ============================================================================\n Legacy Class Mappings (for backward compatibility)\n Maps old BEM-style class names to new internal classes\n ============================================================================ */\n\n.pillar-panel { }\n.pillar-panel--right { }\n.pillar-panel--left { }\n.pillar-panel--open { }\n.pillar-panel--manual { }\n.pillar-panel-root { }\n.pillar-panel-ui { }\n.pillar-panel__header { }\n.pillar-panel__header-left { }\n.pillar-panel__back-btn { }\n.pillar-panel__home-btn { }\n.pillar-panel__title { }\n.pillar-panel__close-btn { }\n.pillar-panel__content { }\n.pillar-search { }\n.pillar-search__input { }\n.pillar-search__icon { }\n.pillar-category-card { }\n.pillar-category-card__icon { }\n.pillar-category-card__content { }\n.pillar-category-card__title { }\n.pillar-category-card__description { }\n.pillar-category-card__count { }\n.pillar-article-card { }\n.pillar-article-card__title { }\n.pillar-article-card__excerpt { }\n.pillar-article-card__meta { }\n.pillar-article { }\n.pillar-article__title { }\n.pillar-article__content { }\n.pillar-category-header { }\n.pillar-category-header__title { }\n.pillar-category-header__description { }\n.pillar-chat-input-container { }\n.pillar-chat-input-container--expanded { }\n.pillar-chat-input__messages { }\n.pillar-chat-input__message { }\n.pillar-chat-input__message--user { }\n.pillar-chat-input__message--assistant { }\n.pillar-chat-input__message-content { }\n.pillar-chat-input__sources { }\n.pillar-chat-input__sources-title { }\n.pillar-chat-input__source { }\n.pillar-chat-input__area { }\n.pillar-chat-input__wrapper { }\n.pillar-chat-input__input { }\n.pillar-chat-input__send-btn { }\n.pillar-loading { }\n.pillar-loading__spinner { }\n.pillar-empty { }\n.pillar-empty__icon { }\n.pillar-empty__title { }\n.pillar-empty__description { }\n.pillar-section-title { }\n.pillar-related-articles { }\n.pillar-home-view { }\n.pillar-chat-view { }\n.pillar-chat-view__messages { }\n.pillar-chat-view__welcome { }\n.pillar-chat-view__welcome-icon { }\n.pillar-chat-view__welcome-title { }\n.pillar-chat-view__welcome-text { }\n.pillar-chat-view__message { }\n.pillar-chat-view__message--user { }\n.pillar-chat-view__message--assistant { }\n.pillar-chat-view__user-bubble { }\n.pillar-chat-view__ai-response { }\n.pillar-chat-view__sources { }\n.pillar-chat-view__sources-title { }\n.pillar-chat-view__source { }\n.pillar-chat-view__input-area { }\n.pillar-chat-view__input-wrapper { }\n.pillar-chat-view__input { }\n.pillar-chat-view__send-btn { }\n.pillar-backdrop { }\n.pillar-backdrop--visible { }\n\n/* ============================================================================\n Task Button Component\n ============================================================================ */\n\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/* 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/* 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\n/* ============================================================================\n Feedback Icons\n Internal: _pillar-feedback | Public: pillar-feedback\n ============================================================================ */\n\n._pillar-message-assistant-wrapper {\n position: relative;\n}\n\n._pillar-feedback-icons {\n display: flex;\n gap: 4px;\n margin-top: var(--pillar-spacing-sm);\n justify-content: flex-end;\n}\n\n._pillar-feedback-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n color: var(--pillar-text-placeholder);\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-feedback-btn:hover {\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-border);\n}\n\n._pillar-feedback-btn--active {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-color: var(--pillar-primary);\n}\n\n._pillar-feedback-btn--active:hover {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-feedback-btn svg {\n width: 14px;\n height: 14px;\n}\n\n.pillar-feedback-icons {}\n.pillar-feedback-btn {}\n.pillar-message-assistant-wrapper {}\n\n/* ============================================================================\n Action Status Indicators\n Internal: _pillar-action-status | Public: pillar-action-status\n Shows completion status for auto-run actions (checkmark, X, or spinner)\n ============================================================================ */\n\n._pillar-message-assistant-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n._pillar-action-status {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n._pillar-action-status-indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n}\n\n._pillar-action-status-indicator svg {\n width: 16px;\n height: 16px;\n}\n\n._pillar-action-status-indicator--success {\n color: #22c55e;\n}\n\n._pillar-action-status-indicator--failed {\n color: #ef4444;\n}\n\n._pillar-action-status-indicator--pending {\n color: var(--pillar-text-muted);\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\n.pillar-action-status {}\n.pillar-action-status-indicator {}\n.pillar-message-assistant-content {}\n\n/* ============================================================================\n Context Tags\n Internal: _pillar-context-tag | Public: pillar-context-tag\n Removable chips for user context items (highlighted text, etc.)\n ============================================================================ */\n\n._pillar-context-tag-list {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 8px 14px 0;\n}\n\n._pillar-context-tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n max-width: 200px;\n padding: 4px 6px 4px 8px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-secondary);\n background: var(--pillar-bg-tertiary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-md);\n cursor: default;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag:hover {\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-text-muted);\n}\n\n._pillar-context-tag-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n color: var(--pillar-primary);\n}\n\n._pillar-context-tag-icon svg {\n width: 12px;\n height: 12px;\n}\n\n._pillar-context-tag-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 1.3;\n}\n\n._pillar-context-tag-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n padding: 0;\n margin-left: 2px;\n color: var(--pillar-text-placeholder);\n background: transparent;\n border: none;\n border-radius: var(--pillar-radius-sm);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag-remove:hover {\n color: var(--pillar-text);\n background: var(--pillar-border);\n}\n\n._pillar-context-tag-remove svg {\n width: 12px;\n height: 12px;\n}\n\n.pillar-context-tag-list {}\n.pillar-context-tag {}\n.pillar-context-tag-icon {}\n.pillar-context-tag-label {}\n.pillar-context-tag-remove {}\n\n/* Context tags inside user message bubbles need inverted colors */\n._pillar-message-user ._pillar-context-tag-list {\n padding: 0 0 8px 0;\n}\n\n._pillar-message-user ._pillar-context-tag {\n background: rgba(255, 255, 255, 0.2);\n border-color: rgba(255, 255, 255, 0.3);\n color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag:hover {\n background: rgba(255, 255, 255, 0.3);\n border-color: rgba(255, 255, 255, 0.4);\n}\n\n._pillar-message-user ._pillar-context-tag-icon {\n color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag-label {\n color: #ffffff;\n}\n\n/* ============================================================================\n Unified Chat Input\n Internal: _pillar-unified-input | Public: pillar-unified-input\n Reusable input component with context tag support\n ============================================================================ */\n\n._pillar-unified-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-unified-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-unified-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-unified-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-unified-input:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n._pillar-unified-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-unified-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: #ffffff;\n background: var(--pillar-primary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-unified-send-btn:hover:not(:disabled) {\n background: var(--pillar-primary-hover);\n}\n\n._pillar-unified-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-unified-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-unified-input-wrapper {}\n.pillar-unified-input {}\n.pillar-unified-input-row {}\n.pillar-unified-send-btn {}\n";
20
+ export declare const PANEL_STYLES = "\n/* ============================================================================\n CSS Custom Properties (Variables)\n Users can override these to customize colors\n ============================================================================ */\n\n:host {\n /* Core colors - Light mode (default) */\n --pillar-primary: #2563eb;\n --pillar-primary-hover: #1d4ed8;\n --pillar-primary-light: #eff6ff;\n --pillar-primary-light-hover: #dbeafe;\n \n --pillar-bg: #ffffff;\n --pillar-bg-secondary: #f9fafb;\n --pillar-bg-tertiary: #f3f4f6;\n \n --pillar-text: #1a1a1a;\n --pillar-text-secondary: #374151;\n --pillar-text-muted: #6b7280;\n --pillar-text-placeholder: #9ca3af;\n \n --pillar-border: #e5e7eb;\n --pillar-border-light: #f3f4f6;\n \n /* Shadows */\n --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n \n /* Code blocks */\n --pillar-code-bg: #1f2937;\n --pillar-code-text: #e5e7eb;\n \n /* Scrollbar */\n --pillar-scrollbar-track: transparent;\n --pillar-scrollbar-thumb: #d1d5db;\n --pillar-scrollbar-thumb-hover: #9ca3af;\n \n /* Spacing (can be customized) */\n --pillar-panel-width: 380px;\n --pillar-spacing-xs: 4px;\n --pillar-spacing-sm: 8px;\n --pillar-spacing-md: 12px;\n --pillar-spacing-lg: 16px;\n --pillar-spacing-xl: 20px;\n --pillar-spacing-2xl: 24px;\n \n /* Border radius */\n --pillar-radius-sm: 4px;\n --pillar-radius-md: 6px;\n --pillar-radius-lg: 8px;\n --pillar-radius-xl: 10px;\n --pillar-radius-full: 9999px;\n \n /* Typography */\n --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n --pillar-font-mono: 'SF Mono', Consolas, monospace;\n --pillar-font-size-xs: 11px;\n --pillar-font-size-sm: 12px;\n --pillar-font-size-base: 14px;\n --pillar-font-size-md: 15px;\n --pillar-font-size-lg: 16px;\n --pillar-font-size-xl: 18px;\n --pillar-font-size-2xl: 20px;\n \n /* Animation */\n --pillar-transition-fast: 0.15s ease;\n --pillar-transition-normal: 0.3s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n :host:not([data-theme=\"light\"]) {\n --pillar-primary: #3b82f6;\n --pillar-primary-hover: #60a5fa;\n --pillar-primary-light: #1e3a5f;\n --pillar-primary-light-hover: #1e4976;\n \n --pillar-bg: #1a1a1a;\n --pillar-bg-secondary: #262626;\n --pillar-bg-tertiary: #333333;\n \n --pillar-text: #f5f5f5;\n --pillar-text-secondary: #e5e5e5;\n --pillar-text-muted: #a3a3a3;\n --pillar-text-placeholder: #737373;\n \n --pillar-border: #404040;\n --pillar-border-light: #333333;\n \n --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n \n --pillar-code-bg: #0d0d0d;\n --pillar-code-text: #e5e7eb;\n \n --pillar-scrollbar-thumb: #525252;\n --pillar-scrollbar-thumb-hover: #737373;\n }\n}\n\n/* Dark mode - Manual override */\n:host([data-theme=\"dark\"]) {\n --pillar-primary: #3b82f6;\n --pillar-primary-hover: #60a5fa;\n --pillar-primary-light: #1e3a5f;\n --pillar-primary-light-hover: #1e4976;\n \n --pillar-bg: #1a1a1a;\n --pillar-bg-secondary: #262626;\n --pillar-bg-tertiary: #333333;\n \n --pillar-text: #f5f5f5;\n --pillar-text-secondary: #e5e5e5;\n --pillar-text-muted: #a3a3a3;\n --pillar-text-placeholder: #737373;\n \n --pillar-border: #404040;\n --pillar-border-light: #333333;\n \n --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n \n --pillar-code-bg: #0d0d0d;\n --pillar-code-text: #e5e7eb;\n \n --pillar-scrollbar-thumb: #525252;\n --pillar-scrollbar-thumb-hover: #737373;\n}\n\n/* ============================================================================\n Base Styles\n Note: No CSS reset - we rely on explicit styles for SDK components\n and allow custom cards to inherit host app styling (Tailwind, etc.)\n ============================================================================ */\n\n:host {\n font-family: var(--pillar-font-family);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n color: var(--pillar-text);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* ============================================================================\n Panel Container\n Internal: _pillar-panel | Public: pillar-panel\n ============================================================================ */\n\n._pillar-panel {\n position: fixed;\n top: 0;\n bottom: 0;\n width: var(--pillar-panel-width);\n max-width: 100vw;\n background: var(--pillar-bg);\n border-left: 1px solid var(--pillar-border);\n display: flex;\n flex-direction: column;\n z-index: 99999;\n transform: translateX(100%);\n transition: transform var(--pillar-transition-normal);\n}\n\n._pillar-panel--right {\n right: 0;\n}\n\n._pillar-panel--left {\n left: 0;\n border-left: none;\n border-right: 1px solid var(--pillar-border);\n transform: translateX(-100%);\n}\n\n._pillar-panel--open {\n transform: translateX(0);\n}\n\n._pillar-panel--manual {\n position: static;\n transform: none;\n height: 100%;\n}\n\n._pillar-panel--full-width {\n width: 100vw;\n max-width: 100vw;\n}\n\n._pillar-panel-root {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n._pillar-panel-ui {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Public override classes - empty by default */\n.pillar-panel {}\n.pillar-panel-root {}\n.pillar-panel-ui {}\n\n/* ============================================================================\n Backdrop\n ============================================================================ */\n\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 var(--pillar-transition-normal), visibility var(--pillar-transition-normal);\n z-index: 99998;\n}\n\n._pillar-backdrop--visible {\n opacity: 1;\n visibility: visible;\n}\n\n.pillar-backdrop {}\n\n/* ============================================================================\n Header\n Internal: _pillar-header | Public: pillar-header\n ============================================================================ */\n\n._pillar-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n border-bottom: 1px solid var(--pillar-border);\n flex-shrink: 0;\n background: var(--pillar-bg);\n}\n\n._pillar-header-left {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n}\n\n._pillar-header-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n._pillar-header-right {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-xs);\n}\n\n/* Public override classes */\n.pillar-header {}\n.pillar-header-left {}\n.pillar-header-right {}\n.pillar-header-title {}\n.pillar-new-chat-btn {}\n\n/* ============================================================================\n Icon Buttons (back, home, close)\n Internal: _pillar-icon-btn | Public: pillar-icon-btn\n ============================================================================ */\n\n._pillar-icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: none;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast), background var(--pillar-transition-fast);\n}\n\n._pillar-icon-btn:hover {\n color: var(--pillar-text);\n background: var(--pillar-bg-tertiary);\n}\n\n._pillar-icon-btn svg {\n width: 20px;\n height: 20px;\n}\n\n.pillar-icon-btn {}\n.pillar-back-btn {}\n.pillar-home-btn {}\n.pillar-history-btn {}\n\n/* ============================================================================\n History Dropdown\n Internal: _pillar-history-* | Public: pillar-history-*\n ============================================================================ */\n\n._pillar-history-dropdown {\n position: relative;\n}\n\n._pillar-history-menu {\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: var(--pillar-spacing-xs);\n width: 280px;\n max-height: 400px;\n background: var(--pillar-bg);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n z-index: 100;\n}\n\n._pillar-history-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--pillar-spacing-sm);\n padding: var(--pillar-spacing-xl);\n color: var(--pillar-text-muted);\n font-size: 13px;\n}\n\n._pillar-history-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--pillar-border);\n border-top-color: var(--pillar-primary);\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._pillar-history-empty {\n padding: var(--pillar-spacing-xl);\n text-align: center;\n color: var(--pillar-text-muted);\n font-size: 13px;\n}\n\n._pillar-history-list {\n max-height: 360px;\n overflow-y: auto;\n padding: var(--pillar-spacing-xs) 0;\n}\n\n._pillar-history-group-header {\n padding: var(--pillar-spacing-xs) var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-sm);\n font-size: 10px;\n font-weight: 500;\n color: var(--pillar-text-muted);\n letter-spacing: 0.02em;\n}\n\n._pillar-history-group-header:first-child {\n padding-top: var(--pillar-spacing-xs);\n}\n\n._pillar-history-item {\n display: flex;\n align-items: center;\n width: 100%;\n padding: var(--pillar-spacing-xs) var(--pillar-spacing-md);\n background: none;\n border: none;\n text-align: left;\n cursor: pointer;\n transition: background var(--pillar-transition-fast);\n border-radius: var(--pillar-radius-sm);\n margin: 0 var(--pillar-spacing-xs);\n width: calc(100% - var(--pillar-spacing-sm));\n}\n\n._pillar-history-item:hover {\n background: var(--pillar-bg-secondary);\n}\n\n._pillar-history-item-title {\n font-size: 13px;\n color: var(--pillar-text);\n line-height: 1.4;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n}\n\n/* Public override classes */\n.pillar-history-dropdown {}\n.pillar-history-menu {}\n.pillar-history-group-header {}\n.pillar-history-list {}\n.pillar-history-item {}\n.pillar-history-item-title {}\n.pillar-close-btn {}\n\n/* ============================================================================\n Content Area\n Internal: _pillar-content | Public: pillar-content\n ============================================================================ */\n\n._pillar-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n.pillar-content {}\n\n/* ============================================================================\n Search Input\n Internal: _pillar-search | Public: pillar-search\n ============================================================================ */\n\n._pillar-search {\n position: relative;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-search-input {\n width: 100%;\n padding: 10px 12px 10px 40px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n outline: none;\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-search-input:focus {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-search-input::placeholder {\n color: var(--pillar-text-placeholder);\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: var(--pillar-text-placeholder);\n pointer-events: none;\n}\n\n._pillar-search-icon svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-search {}\n.pillar-search-input {}\n.pillar-search-icon {}\n\n/* ============================================================================\n Chat Input (Persistent Bottom)\n Internal: _pillar-chat-input | Public: pillar-chat-input\n ============================================================================ */\n\n._pillar-chat-input-container {\n flex-shrink: 0;\n border-top: 1px solid var(--pillar-border);\n background: var(--pillar-bg);\n display: flex;\n flex-direction: column;\n max-height: 50%;\n transition: max-height var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded {\n max-height: 60%;\n}\n\n._pillar-chat-input-messages {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n max-height: 0;\n transition: max-height var(--pillar-transition-normal), padding var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded ._pillar-chat-input-messages {\n max-height: 300px;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-chat-input-message {\n margin-bottom: var(--pillar-spacing-md);\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: var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n}\n\n._pillar-chat-input-message--user ._pillar-chat-input-message-content {\n background: var(--pillar-primary);\n color: #ffffff;\n border-bottom-right-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-message--assistant ._pillar-chat-input-message-content {\n background: var(--pillar-bg-tertiary);\n color: var(--pillar-text);\n border-bottom-left-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-sources {\n margin-top: var(--pillar-spacing-sm);\n padding-top: var(--pillar-spacing-sm);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-input-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: 6px;\n}\n\n._pillar-chat-input-source {\n display: block;\n padding: 6px 10px;\n margin-bottom: var(--pillar-spacing-xs);\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-md);\n text-decoration: none;\n cursor: pointer;\n}\n\n._pillar-chat-input-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-chat-input-area {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n}\n\n._pillar-chat-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-input-textarea {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-input-textarea::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n.pillar-chat-input-container {}\n.pillar-chat-input-messages {}\n.pillar-chat-input-message {}\n.pillar-chat-input-message-content {}\n.pillar-chat-input-sources {}\n.pillar-chat-input-area {}\n.pillar-chat-input-wrapper {}\n.pillar-chat-input-textarea {}\n\n/* ============================================================================\n Chat Input Footer (contains send button)\n ============================================================================ */\n\n._pillar-chat-input-footer {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n/* ============================================================================\n Send Button - In footer row, right aligned\n Internal: _pillar-send-btn | Public: pillar-send-btn\n ============================================================================ */\n\n._pillar-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-send-btn {}\n.pillar-chat-input-footer {}\n\n/* ============================================================================\n Loading States\n Internal: _pillar-loading | Public: pillar-loading\n ============================================================================ */\n\n._pillar-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px var(--pillar-spacing-xl);\n color: var(--pillar-text-muted);\n}\n\n._pillar-loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--pillar-border);\n border-top-color: var(--pillar-primary);\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.pillar-loading {}\n.pillar-loading-spinner {}\n\n/* ============================================================================\n Progress Indicator (AI activity status)\n Internal: _pillar-progress | Public: pillar-progress\n ============================================================================ */\n\n._pillar-progress-indicator {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n padding: var(--pillar-spacing-sm) 0;\n}\n\n._pillar-progress-indicator ._pillar-loading-spinner {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n}\n\n._pillar-progress-message {\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n font-style: italic;\n}\n\n.pillar-progress-indicator {}\n.pillar-progress-message {}\n\n/* ============================================================================\n Empty States\n Internal: _pillar-empty | Public: pillar-empty\n ============================================================================ */\n\n._pillar-empty {\n padding: 40px var(--pillar-spacing-xl);\n text-align: center;\n color: var(--pillar-text-muted);\n}\n\n._pillar-empty-icon {\n width: 48px;\n height: 48px;\n margin: 0 auto var(--pillar-spacing-lg);\n color: var(--pillar-border);\n}\n\n._pillar-empty-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 500;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-empty-description {\n font-size: var(--pillar-font-size-base);\n}\n\n.pillar-empty {}\n.pillar-empty-icon {}\n.pillar-empty-title {}\n.pillar-empty-description {}\n\n/* ============================================================================\n Section Titles\n Internal: _pillar-section-title | Public: pillar-section-title\n ============================================================================ */\n\n._pillar-section-title {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-xl) var(--pillar-spacing-sm);\n font-size: var(--pillar-font-size-xs);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--pillar-text-muted);\n}\n\n.pillar-section-title {}\n\n/* ============================================================================\n Related Articles\n ============================================================================ */\n\n._pillar-related-articles {\n border-top: 1px solid var(--pillar-border);\n margin-top: var(--pillar-spacing-2xl);\n padding-top: var(--pillar-spacing-sm);\n}\n\n.pillar-related-articles {}\n\n/* ============================================================================\n Scrollbar Styling\n ============================================================================ */\n\n._pillar-content::-webkit-scrollbar,\n._pillar-chat-input-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-content::-webkit-scrollbar-track,\n._pillar-chat-input-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-content::-webkit-scrollbar-thumb,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-content::-webkit-scrollbar-thumb:hover,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Home View\n ============================================================================ */\n\n._pillar-home-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-header {\n text-align: center;\n padding: var(--pillar-spacing-2xl) 0;\n}\n\n._pillar-home-view-icon {\n font-size: 40px;\n margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-home-view-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 0;\n}\n\n._pillar-home-view-questions {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n margin-bottom: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-input-wrapper {\n margin-top: auto;\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-home-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-home-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-home-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-home-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-home-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-home-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-home-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-home-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-home-view {}\n.pillar-home-view-header {}\n.pillar-home-view-title {}\n.pillar-home-view-questions {}\n.pillar-home-view-input-wrapper {}\n.pillar-home-view-input {}\n.pillar-home-view-send-btn {}\n\n/* ============================================================================\n Question Chip\n ============================================================================ */\n\n._pillar-question-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n text-align: left;\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: background var(--pillar-transition-fast), border-color var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover {\n border-color: var(--pillar-primary);\n}\n\n._pillar-question-chip-text {\n flex: 1;\n}\n\n._pillar-question-chip-arrow {\n color: var(--pillar-text-muted);\n margin-left: var(--pillar-spacing-sm);\n transition: color var(--pillar-transition-fast), transform var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover ._pillar-question-chip-arrow {\n color: var(--pillar-primary);\n transform: translateX(2px);\n}\n\n._pillar-question-chip-skeleton {\n height: 44px;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n overflow: hidden;\n}\n\n._pillar-question-chip-skeleton-bar {\n width: 60%;\n height: 14px;\n margin: 15px var(--pillar-spacing-lg);\n background: linear-gradient(90deg, var(--pillar-border) 25%, var(--pillar-bg-tertiary) 50%, var(--pillar-border) 75%);\n background-size: 200% 100%;\n animation: pillar-shimmer 1.5s infinite;\n border-radius: var(--pillar-radius-sm);\n}\n\n@keyframes pillar-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n.pillar-question-chip {}\n.pillar-question-chip-text {}\n.pillar-question-chip-arrow {}\n.pillar-question-chip-skeleton {}\n.pillar-question-chip-skeleton-bar {}\n\n/* ============================================================================\n Standalone Chat View\n Internal: _pillar-chat-view | Public: pillar-chat-view\n ============================================================================ */\n\n._pillar-chat-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n._pillar-chat-view-messages {\n flex: 1;\n overflow-y: auto;\n padding: var(--pillar-spacing-xl);\n display: flex;\n flex-direction: column;\n}\n\n._pillar-chat-view-welcome {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px var(--pillar-spacing-xl);\n text-align: center;\n flex: 1;\n}\n\n._pillar-chat-view-welcome-icon {\n font-size: 48px;\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-welcome-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-welcome-text {\n font-size: var(--pillar-font-size-base);\n color: var(--pillar-text-muted);\n max-width: 280px;\n}\n\n._pillar-chat-view-message {\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-message--user {\n text-align: right;\n}\n\n._pillar-chat-view-message--assistant {\n text-align: left;\n}\n\n.pillar-chat-view {}\n.pillar-chat-view-messages {}\n.pillar-chat-view-welcome {}\n.pillar-chat-view-message {}\n\n/* ============================================================================\n User Message Bubble\n Internal: _pillar-message-user | Public: pillar-message-user\n ============================================================================ */\n\n._pillar-message-user {\n display: inline-block;\n max-width: 85%;\n padding: 10px 14px;\n border-radius: var(--pillar-spacing-lg);\n border-bottom-right-radius: var(--pillar-radius-sm);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n background: var(--pillar-primary);\n color: #ffffff;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n._pillar-message-user-images {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-message-user-image {\n max-width: 120px;\n max-height: 120px;\n border-radius: var(--pillar-radius-md);\n object-fit: cover;\n}\n\n.pillar-message-user {}\n.pillar-message-user-images {}\n.pillar-message-user-image {}\n\n/* ============================================================================\n AI Response\n Internal: _pillar-message-assistant | Public: pillar-message-assistant\n ============================================================================ */\n\n._pillar-message-assistant {\n font-size: var(--pillar-font-size-base);\n line-height: 1.6;\n color: var(--pillar-text-secondary);\n}\n\n._pillar-message-assistant p {\n margin: 0 0 var(--pillar-spacing-md);\n}\n\n._pillar-message-assistant p:last-child {\n margin-bottom: 0;\n}\n\n._pillar-message-assistant h2 {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-lg) 0 var(--pillar-spacing-sm);\n}\n\n._pillar-message-assistant h3 {\n font-size: var(--pillar-font-size-md);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 14px 0 6px;\n}\n\n._pillar-message-assistant h4 {\n font-size: var(--pillar-font-size-base);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-md) 0 6px;\n}\n\n._pillar-message-assistant ul,\n._pillar-message-assistant ol {\n margin: 0 0 var(--pillar-spacing-md);\n padding-left: var(--pillar-spacing-2xl);\n list-style-position: outside;\n}\n\n._pillar-message-assistant ul {\n list-style-type: disc;\n}\n\n._pillar-message-assistant ol {\n list-style-type: decimal;\n}\n\n._pillar-message-assistant li {\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-message-assistant code {\n padding: 2px 6px;\n font-size: var(--pillar-font-size-sm);\n background: var(--pillar-bg-tertiary);\n border-radius: var(--pillar-radius-sm);\n font-family: var(--pillar-font-mono);\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant pre {\n margin: var(--pillar-spacing-md) 0;\n padding: var(--pillar-spacing-md) 14px;\n background: var(--pillar-code-bg);\n border-radius: var(--pillar-radius-lg);\n overflow-x: auto;\n}\n\n._pillar-message-assistant pre code {\n padding: 0;\n background: none;\n color: var(--pillar-code-text);\n font-size: var(--pillar-font-size-sm);\n line-height: 1.5;\n}\n\n._pillar-message-assistant a {\n color: var(--pillar-primary);\n text-decoration: none;\n}\n\n._pillar-message-assistant a:hover {\n text-decoration: underline;\n}\n\n._pillar-message-assistant strong {\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant em {\n font-style: italic;\n}\n\n.pillar-message-assistant {}\n\n/* ============================================================================\n Chat Sources\n Internal: _pillar-chat-sources | Public: pillar-chat-sources\n ============================================================================ */\n\n._pillar-chat-sources {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-source {\n display: block;\n padding: var(--pillar-spacing-sm) var(--pillar-spacing-md);\n margin-bottom: 6px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-lg);\n text-decoration: none;\n cursor: pointer;\n transition: background var(--pillar-transition-fast);\n}\n\n._pillar-chat-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n.pillar-chat-sources {}\n.pillar-chat-sources-title {}\n.pillar-chat-source {}\n\n/* ============================================================================\n Chat Actions (Suggested action buttons)\n Internal: _pillar-chat-actions | Public: pillar-chat-actions\n ============================================================================ */\n\n._pillar-chat-actions {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-actions-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-actions-buttons {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Task buttons should wrap horizontally */\n._pillar-chat-actions-buttons > ._pillar-task-button-group {\n display: flex;\n flex-wrap: wrap;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Confirm cards take full width */\n._pillar-chat-actions-buttons > .pillar-confirm-card-wrapper {\n width: 100%;\n}\n\n.pillar-chat-actions {}\n.pillar-chat-actions-title {}\n.pillar-chat-actions-buttons {}\n\n/* ============================================================================\n Chat View Input Area - Cursor-style design\n ============================================================================ */\n\n._pillar-chat-view-input-area {\n flex-shrink: 0;\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n border-top: 1px solid var(--pillar-border);\n background: var(--pillar-bg);\n}\n\n._pillar-chat-view-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-chat-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-chat-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-chat-view-send-btn:active:not(:disabled) {\n transform: scale(0.95);\n}\n\n._pillar-chat-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-chat-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-chat-view-input-area {}\n.pillar-chat-view-input-wrapper {}\n.pillar-chat-view-input {}\n.pillar-chat-view-send-btn {}\n.pillar-chat-view-input-footer {}\n.pillar-chat-view-new-chat-btn {}\n\n/* New chat button styling */\n._pillar-chat-view-input-footer {\n display: flex;\n justify-content: center;\n margin-top: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-new-chat-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n font-family: var(--pillar-font-family);\n color: var(--pillar-text-muted);\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-new-chat-btn:hover {\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-text-muted);\n}\n\n._pillar-chat-view-new-chat-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-view-new-chat-icon svg {\n width: 14px;\n height: 14px;\n}\n\n/* Scrollbar for chat view */\n._pillar-chat-view-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Chat Image Upload\n ============================================================================ */\n\n._pillar-chat-view-input-area--dragging {\n position: relative;\n background: rgba(37, 99, 235, 0.05);\n}\n\n._pillar-chat-drop-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: rgba(37, 99, 235, 0.1);\n border: 2px dashed var(--pillar-primary);\n border-radius: var(--pillar-radius-lg);\n color: var(--pillar-primary);\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n z-index: 10;\n pointer-events: none;\n}\n\n._pillar-chat-drop-overlay svg {\n width: 24px;\n height: 24px;\n}\n\n._pillar-chat-images-preview {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 12px 4px 12px;\n}\n\n._pillar-chat-image-thumb {\n position: relative;\n width: 56px;\n height: 56px;\n border-radius: var(--pillar-radius-md);\n overflow: hidden;\n border: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-image-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n._pillar-chat-image-loading {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-image-error {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(239, 68, 68, 0.3);\n color: #dc2626;\n font-weight: bold;\n font-size: 14px;\n}\n\n._pillar-chat-image-remove {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 18px;\n height: 18px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.6);\n border: none;\n border-radius: 50%;\n color: white;\n cursor: pointer;\n opacity: 0;\n transition: opacity var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-thumb:hover ._pillar-chat-image-remove {\n opacity: 1;\n}\n\n._pillar-chat-image-remove svg {\n width: 10px;\n height: 10px;\n}\n\n._pillar-chat-image-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: transparent;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-btn:hover:not(:disabled) {\n color: var(--pillar-text);\n}\n\n._pillar-chat-image-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n._pillar-chat-image-btn svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-chat-images-preview {}\n.pillar-chat-image-thumb {}\n.pillar-chat-image-remove {}\n.pillar-chat-image-btn {}\n.pillar-chat-drop-overlay {}\n\n/* ============================================================================\n Legacy Class Mappings (for backward compatibility)\n Maps old BEM-style class names to new internal classes\n ============================================================================ */\n\n.pillar-panel { }\n.pillar-panel--right { }\n.pillar-panel--left { }\n.pillar-panel--open { }\n.pillar-panel--manual { }\n.pillar-panel-root { }\n.pillar-panel-ui { }\n.pillar-panel__header { }\n.pillar-panel__header-left { }\n.pillar-panel__back-btn { }\n.pillar-panel__home-btn { }\n.pillar-panel__title { }\n.pillar-panel__close-btn { }\n.pillar-panel__content { }\n.pillar-search { }\n.pillar-search__input { }\n.pillar-search__icon { }\n.pillar-category-card { }\n.pillar-category-card__icon { }\n.pillar-category-card__content { }\n.pillar-category-card__title { }\n.pillar-category-card__description { }\n.pillar-category-card__count { }\n.pillar-article-card { }\n.pillar-article-card__title { }\n.pillar-article-card__excerpt { }\n.pillar-article-card__meta { }\n.pillar-article { }\n.pillar-article__title { }\n.pillar-article__content { }\n.pillar-category-header { }\n.pillar-category-header__title { }\n.pillar-category-header__description { }\n.pillar-chat-input-container { }\n.pillar-chat-input-container--expanded { }\n.pillar-chat-input__messages { }\n.pillar-chat-input__message { }\n.pillar-chat-input__message--user { }\n.pillar-chat-input__message--assistant { }\n.pillar-chat-input__message-content { }\n.pillar-chat-input__sources { }\n.pillar-chat-input__sources-title { }\n.pillar-chat-input__source { }\n.pillar-chat-input__area { }\n.pillar-chat-input__wrapper { }\n.pillar-chat-input__input { }\n.pillar-chat-input__send-btn { }\n.pillar-loading { }\n.pillar-loading__spinner { }\n.pillar-empty { }\n.pillar-empty__icon { }\n.pillar-empty__title { }\n.pillar-empty__description { }\n.pillar-section-title { }\n.pillar-related-articles { }\n.pillar-home-view { }\n.pillar-chat-view { }\n.pillar-chat-view__messages { }\n.pillar-chat-view__welcome { }\n.pillar-chat-view__welcome-icon { }\n.pillar-chat-view__welcome-title { }\n.pillar-chat-view__welcome-text { }\n.pillar-chat-view__message { }\n.pillar-chat-view__message--user { }\n.pillar-chat-view__message--assistant { }\n.pillar-chat-view__user-bubble { }\n.pillar-chat-view__ai-response { }\n.pillar-chat-view__sources { }\n.pillar-chat-view__sources-title { }\n.pillar-chat-view__source { }\n.pillar-chat-view__input-area { }\n.pillar-chat-view__input-wrapper { }\n.pillar-chat-view__input { }\n.pillar-chat-view__send-btn { }\n.pillar-backdrop { }\n.pillar-backdrop--visible { }\n\n/* ============================================================================\n Task Button Component\n ============================================================================ */\n\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/* 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/* 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\n/* ============================================================================\n Feedback Icons\n Internal: _pillar-feedback | Public: pillar-feedback\n ============================================================================ */\n\n._pillar-message-assistant-wrapper {\n position: relative;\n}\n\n._pillar-feedback-icons {\n display: flex;\n gap: 4px;\n margin-top: var(--pillar-spacing-sm);\n justify-content: flex-end;\n}\n\n._pillar-feedback-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n color: var(--pillar-text-placeholder);\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-feedback-btn:hover {\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-border);\n}\n\n._pillar-feedback-btn--active {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-color: var(--pillar-primary);\n}\n\n._pillar-feedback-btn--active:hover {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-feedback-btn svg {\n width: 14px;\n height: 14px;\n}\n\n.pillar-feedback-icons {}\n.pillar-feedback-btn {}\n.pillar-message-assistant-wrapper {}\n\n/* ============================================================================\n Action Status Indicators\n Internal: _pillar-action-status | Public: pillar-action-status\n Shows completion status for auto-run actions (checkmark, X, or spinner)\n ============================================================================ */\n\n._pillar-message-assistant-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n}\n\n._pillar-action-status {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n._pillar-action-status-indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n}\n\n._pillar-action-status-indicator svg {\n width: 16px;\n height: 16px;\n}\n\n._pillar-action-status-indicator--success {\n color: #22c55e;\n}\n\n._pillar-action-status-indicator--failed {\n color: #ef4444;\n}\n\n._pillar-action-status-indicator--pending {\n color: var(--pillar-text-muted);\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\n.pillar-action-status {}\n.pillar-action-status-indicator {}\n.pillar-message-assistant-content {}\n\n/* ============================================================================\n Context Tags\n Internal: _pillar-context-tag | Public: pillar-context-tag\n Removable chips for user context items (highlighted text, etc.)\n ============================================================================ */\n\n._pillar-context-tag-list {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 8px 14px 0;\n}\n\n._pillar-context-tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n max-width: 200px;\n padding: 4px 6px 4px 8px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-secondary);\n background: var(--pillar-bg-tertiary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-md);\n cursor: default;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag:hover {\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-text-muted);\n}\n\n._pillar-context-tag-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n color: var(--pillar-primary);\n}\n\n._pillar-context-tag-icon svg {\n width: 12px;\n height: 12px;\n}\n\n._pillar-context-tag-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 1.3;\n}\n\n._pillar-context-tag-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n padding: 0;\n margin-left: 2px;\n color: var(--pillar-text-placeholder);\n background: transparent;\n border: none;\n border-radius: var(--pillar-radius-sm);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag-remove:hover {\n color: var(--pillar-text);\n background: var(--pillar-border);\n}\n\n._pillar-context-tag-remove svg {\n width: 12px;\n height: 12px;\n}\n\n.pillar-context-tag-list {}\n.pillar-context-tag {}\n.pillar-context-tag-icon {}\n.pillar-context-tag-label {}\n.pillar-context-tag-remove {}\n\n/* Context tags inside user message bubbles need inverted colors */\n._pillar-message-user ._pillar-context-tag-list {\n padding: 0 0 8px 0;\n}\n\n._pillar-message-user ._pillar-context-tag {\n background: rgba(255, 255, 255, 0.2);\n border-color: rgba(255, 255, 255, 0.3);\n color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag:hover {\n background: rgba(255, 255, 255, 0.3);\n border-color: rgba(255, 255, 255, 0.4);\n}\n\n._pillar-message-user ._pillar-context-tag-icon {\n color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag-label {\n color: #ffffff;\n}\n\n/* ============================================================================\n Unified Chat Input\n Internal: _pillar-unified-input | Public: pillar-unified-input\n Reusable input component with context tag support\n ============================================================================ */\n\n._pillar-unified-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-unified-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-unified-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-unified-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-unified-input:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n._pillar-unified-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-unified-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: #ffffff;\n background: var(--pillar-primary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-unified-send-btn:hover:not(:disabled) {\n background: var(--pillar-primary-hover);\n}\n\n._pillar-unified-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-unified-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-unified-input-wrapper {}\n.pillar-unified-input {}\n.pillar-unified-input-row {}\n.pillar-unified-send-btn {}\n\n/* ============================================================================\n Progress Row (for search, query, generating events)\n Internal: _pillar-progress-row | Public: pillar-progress-row\n ============================================================================ */\n\n._pillar-progress-events {\n margin: 4px 0;\n}\n\n._pillar-progress-row {\n margin: 1px 0;\n padding: 1px 0;\n font-size: 12px;\n animation: pillar-progress-row-fade-in 0.3s ease-in-out;\n}\n\n._pillar-progress-row--error {\n color: #dc2626;\n}\n\n@keyframes pillar-progress-row-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n._pillar-progress-row-header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n}\n\n._pillar-progress-expand-icon {\n font-size: 10px;\n color: var(--pillar-text-muted);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n}\n\n._pillar-progress-row-header[style*=\"cursor: pointer\"]:hover ._pillar-progress-expand-icon {\n color: var(--pillar-text-secondary);\n}\n\n._pillar-progress-row-header[data-expanded=\"true\"] ._pillar-progress-expand-icon {\n transform: rotate(90deg);\n}\n\n._pillar-progress-message {\n flex: 1;\n color: var(--pillar-text-muted);\n font-size: 12px;\n font-style: italic;\n}\n\n._pillar-progress-no-results {\n color: var(--pillar-text-muted);\n font-size: 11px;\n font-style: italic;\n margin-left: 4px;\n}\n\n._pillar-progress-sources {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n._pillar-progress-source-item {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n font-size: 11px;\n}\n\n._pillar-progress-source-link {\n flex: 1;\n display: flex;\n flex-direction: column;\n text-decoration: none;\n overflow: hidden;\n color: inherit;\n}\n\n._pillar-progress-source-link:hover ._pillar-progress-source-title {\n text-decoration: underline;\n}\n\n._pillar-progress-source-title {\n font-weight: 400;\n color: var(--pillar-text-muted);\n font-size: 11px;\n}\n\n._pillar-progress-details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n._pillar-progress-detail-item {\n font-size: 11px;\n color: var(--pillar-text-muted);\n padding: 1px 0;\n}\n\n._pillar-progress-detail-action {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n}\n\n._pillar-progress-detail-name {\n font-weight: 500;\n}\n\n._pillar-progress-detail-desc {\n color: var(--pillar-text-muted);\n opacity: 0.8;\n}\n\n._pillar-progress-content-wrapper {\n position: relative;\n padding-left: 16px;\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.2s ease-out;\n}\n\n._pillar-progress-content-wrapper--expanded {\n grid-template-rows: 1fr;\n margin-top: 6px;\n}\n\n._pillar-progress-content-container {\n overflow: hidden;\n min-height: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--pillar-scrollbar-thumb) transparent;\n}\n\n._pillar-progress-content-wrapper--expanded ._pillar-progress-content-container {\n max-height: 100px;\n overflow-y: auto;\n}\n\n._pillar-progress-content-container::-webkit-scrollbar {\n width: 4px;\n}\n\n._pillar-progress-content-container::-webkit-scrollbar-track {\n background: transparent;\n}\n\n._pillar-progress-content-container::-webkit-scrollbar-thumb {\n background-color: var(--pillar-scrollbar-thumb);\n border-radius: 2px;\n}\n\n._pillar-progress-content-gradient {\n position: absolute;\n bottom: 0;\n left: 16px;\n right: 0;\n height: 20px;\n background: linear-gradient(transparent, var(--pillar-bg));\n pointer-events: none;\n}\n\n._pillar-progress-text {\n font-size: 11px;\n color: var(--pillar-text-muted);\n line-height: 1.4;\n word-break: break-word;\n}\n\n._pillar-progress-text p {\n margin: 0 0 4px 0;\n}\n\n._pillar-progress-text p:last-child {\n margin-bottom: 0;\n}\n\n._pillar-progress-text ol,\n._pillar-progress-text ul {\n margin: 2px 0;\n padding-left: 16px;\n}\n\n._pillar-progress-text li {\n margin-bottom: 1px;\n}\n\n._pillar-progress-text br {\n display: block;\n content: \"\";\n margin-top: 2px;\n}\n\n/* Chevron indicator for progress rows - rotates based on expanded state */\n._pillar-progress-chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--pillar-text-muted);\n transition: transform 0.2s ease;\n}\n\n._pillar-progress-error-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--pillar-error, #dc2626);\n}\n\n/* Text preview for streaming content */\n._pillar-progress-text-preview-wrapper {\n position: relative;\n margin-top: 4px;\n padding-left: 20px;\n}\n\n._pillar-progress-text-preview {\n max-height: 80px;\n overflow-y: auto;\n font-size: 11px;\n color: var(--pillar-text-muted);\n line-height: 1.4;\n scroll-behavior: smooth;\n white-space: pre-wrap;\n word-break: break-word;\n scrollbar-width: thin;\n scrollbar-color: var(--pillar-scrollbar-thumb) transparent;\n}\n\n/* Top gradient - fades out older text at the top */\n._pillar-progress-text-gradient {\n position: absolute;\n top: 0;\n left: 20px;\n right: 0;\n height: 20px;\n background: linear-gradient(to bottom, var(--pillar-bg), transparent);\n pointer-events: none;\n z-index: 1;\n}\n\n._pillar-progress-text-preview::-webkit-scrollbar {\n width: 4px;\n}\n\n._pillar-progress-text-preview::-webkit-scrollbar-track {\n background: transparent;\n}\n\n._pillar-progress-text-preview::-webkit-scrollbar-thumb {\n background-color: var(--pillar-scrollbar-thumb);\n border-radius: 2px;\n}\n\n/* Active state indicator */\n._pillar-progress-row--active ._pillar-progress-message {\n font-weight: 500;\n}\n\n/* Long text truncation for labels */\n._pillar-progress-message {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 300px;\n}\n\n/* Children/sub-items styling */\n._pillar-progress-children {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n._pillar-progress-child-item {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n font-size: 11px;\n}\n\n._pillar-progress-child-link {\n color: var(--pillar-text-muted);\n text-decoration: none;\n transition: color 0.15s ease;\n}\n\n._pillar-progress-child-link:hover {\n color: var(--pillar-text-secondary);\n text-decoration: underline;\n}\n\n._pillar-progress-child-label {\n color: var(--pillar-text-muted);\n font-size: 11px;\n}\n\n.pillar-progress-events {}\n.pillar-progress-chevron {}\n.pillar-progress-error-icon {}\n.pillar-progress-text-preview-wrapper {}\n.pillar-progress-text-preview {}\n.pillar-progress-text-gradient {}\n.pillar-progress-children {}\n.pillar-progress-child-item {}\n.pillar-progress-child-link {}\n.pillar-progress-child-label {}\n.pillar-progress-row {}\n.pillar-progress-row-header {}\n.pillar-progress-expand-icon {}\n.pillar-progress-message {}\n.pillar-progress-no-results {}\n.pillar-progress-sources {}\n.pillar-progress-source-item {}\n.pillar-progress-source-link {}\n.pillar-progress-source-title {}\n.pillar-progress-content-wrapper {}\n.pillar-progress-content-container {}\n.pillar-progress-content-gradient {}\n.pillar-progress-text {}\n\n/* ============================================================================\n Reasoning Disclosure (collapsible thinking steps)\n Internal: _pillar-reasoning-disclosure | Public: pillar-reasoning-disclosure\n Compact single-line design that expands to show steps\n ============================================================================ */\n\n._pillar-reasoning-disclosure {\n /* No box styling - just a simple inline element */\n}\n\n._pillar-reasoning-header {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 0;\n font-size: var(--pillar-font-size-sm);\n font-family: var(--pillar-font-family);\n color: var(--pillar-text-muted);\n background: transparent;\n border: none;\n cursor: pointer;\n text-align: left;\n transition: color var(--pillar-transition-fast);\n}\n\n._pillar-reasoning-header:hover {\n color: var(--pillar-text);\n}\n\n._pillar-reasoning-icon {\n font-size: 8px;\n transition: transform 0.2s ease;\n flex-shrink: 0;\n opacity: 0.7;\n}\n\n._pillar-reasoning-label {\n /* Inherits from header */\n}\n\n/* Animated content wrapper using CSS Grid for smooth height transition */\n._pillar-reasoning-content-wrapper {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.25s ease-out;\n}\n\n._pillar-reasoning-content-wrapper--expanded {\n grid-template-rows: 1fr;\n}\n\n._pillar-reasoning-content-wrapper > ._pillar-reasoning-content {\n overflow: hidden;\n min-height: 0;\n}\n\n._pillar-reasoning-content {\n padding-top: 8px;\n padding-left: 12px;\n border-left: 2px solid var(--pillar-border-light);\n margin-left: 3px;\n}\n\n._pillar-reasoning-content ._pillar-progress-row {\n margin-top: 4px;\n}\n\n._pillar-reasoning-content ._pillar-progress-row:first-child {\n margin-top: 0;\n}\n\n/* Chevron rotation when expanded */\n._pillar-reasoning-header[data-expanded=\"true\"] ._pillar-reasoning-icon {\n transform: rotate(90deg);\n}\n\n.pillar-reasoning-disclosure {}\n.pillar-reasoning-content-wrapper {}\n.pillar-reasoning-header {}\n.pillar-reasoning-icon {}\n.pillar-reasoning-label {}\n.pillar-reasoning-content {}\n\n/* ============================================================================\n Resume Prompt (Session Resumption)\n Internal: _pillar-resume-prompt | Public: pillar-resume-prompt\n Shows when user reconnects and has an interrupted session to resume\n ============================================================================ */\n\n._pillar-resume-prompt {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-md);\n padding: var(--pillar-spacing-lg);\n margin: var(--pillar-spacing-md) 0;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n}\n\n._pillar-resume-prompt--seamless {\n flex-direction: row;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n background: transparent;\n border: none;\n justify-content: center;\n}\n\n._pillar-resume-prompt-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--pillar-border);\n border-top-color: var(--pillar-primary);\n border-radius: 50%;\n animation: pillar-spin 0.8s linear infinite;\n flex-shrink: 0;\n}\n\n._pillar-resume-prompt-text {\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n font-style: italic;\n}\n\n._pillar-resume-prompt-content {\n display: flex;\n gap: var(--pillar-spacing-md);\n align-items: flex-start;\n}\n\n._pillar-resume-prompt-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-md);\n}\n\n._pillar-resume-prompt-body {\n flex: 1;\n min-width: 0;\n}\n\n._pillar-resume-prompt-title {\n font-size: var(--pillar-font-size-base);\n font-weight: 600;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-resume-prompt-message {\n display: flex;\n flex-direction: column;\n gap: 2px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n}\n\n._pillar-resume-prompt-user-msg {\n font-style: italic;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n._pillar-resume-prompt-summary {\n font-size: var(--pillar-font-size-xs);\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-resume-prompt-actions {\n display: flex;\n gap: var(--pillar-spacing-sm);\n justify-content: flex-end;\n}\n\n._pillar-resume-prompt-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n font-family: var(--pillar-font-family);\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: all var(--pillar-transition-fast);\n border: 1px solid transparent;\n}\n\n._pillar-resume-prompt-btn--primary {\n background: var(--pillar-primary);\n color: #ffffff;\n border-color: var(--pillar-primary);\n}\n\n._pillar-resume-prompt-btn--primary:hover {\n background: var(--pillar-primary-hover);\n border-color: var(--pillar-primary-hover);\n}\n\n._pillar-resume-prompt-btn--ghost {\n background: transparent;\n color: var(--pillar-text-muted);\n border-color: transparent;\n}\n\n._pillar-resume-prompt-btn--ghost:hover {\n background: var(--pillar-bg-tertiary);\n color: var(--pillar-text);\n}\n\n._pillar-resume-prompt-btn svg {\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n}\n\n.pillar-resume-prompt {}\n.pillar-resume-prompt-spinner {}\n.pillar-resume-prompt-text {}\n.pillar-resume-prompt-content {}\n.pillar-resume-prompt-icon {}\n.pillar-resume-prompt-body {}\n.pillar-resume-prompt-title {}\n.pillar-resume-prompt-message {}\n.pillar-resume-prompt-user-msg {}\n.pillar-resume-prompt-summary {}\n.pillar-resume-prompt-actions {}\n.pillar-resume-prompt-btn {}\n";
package/dist/components/Plan/InlinePlanView.d.ts CHANGED
@@ -20,5 +20,5 @@ export declare function InlinePlanView({ plan }: InlinePlanViewProps): h.JSX.Ele
20
20
  * Check if a plan should be displayed inline.
21
21
  */
22
22
  export declare function shouldDisplayInline(plan: ExecutionPlan): boolean;
23
- export declare const INLINE_PLAN_STYLES = "\n/* Inline Plan Container */\n.pillar-inline-plan {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 8px 0;\n}\n\n/* Steps list */\n.pillar-inline-plan__steps {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n/* Individual step */\n.pillar-inline-plan__step {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border-radius: 6px;\n font-size: 13px;\n background: transparent;\n transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__step-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-inline-plan__step-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.pillar-inline-plan__step-text {\n color: var(--pillar-text-primary, #374151);\n line-height: 1.4;\n}\n\n.pillar-inline-plan__step-instruction {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.pillar-inline-plan__action-badge {\n display: inline-block;\n padding: 1px 5px;\n font-size: 9px;\n font-weight: 600;\n text-transform: uppercase;\n background: var(--pillar-warning, #f59e0b);\n color: white;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n.pillar-inline-plan__instruction-text {\n font-size: 11px;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step-actions {\n display: flex;\n gap: 4px;\n}\n\n/* Step states */\n.pillar-inline-plan__step--pending {\n opacity: 0.6;\n}\n\n.pillar-inline-plan__step--ready .pillar-inline-plan__step-icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--awaiting_confirmation {\n background: var(--pillar-bg-warning-subtle, rgba(251, 191, 36, 0.1));\n}\n\n.pillar-inline-plan__step--awaiting_confirmation .pillar-inline-plan__step-icon {\n color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-inline-plan__step--executing .pillar-inline-plan__step-icon,\n.pillar-inline-plan__step--awaiting_result .pillar-inline-plan__step-icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-icon {\n color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-text {\n text-decoration: line-through;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step--skipped {\n opacity: 0.5;\n}\n\n.pillar-inline-plan__step--skipped .pillar-inline-plan__step-text {\n text-decoration: line-through;\n}\n\n.pillar-inline-plan__step--failed {\n background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__step--failed .pillar-inline-plan__step-icon {\n color: var(--pillar-danger, #dc2626);\n}\n\n/* Guidance step styles */\n.pillar-inline-plan__step--guidance {\n background: var(--pillar-bg-info-subtle, rgba(59, 130, 246, 0.08));\n border-left: 2px solid var(--pillar-info, #3b82f6);\n padding-left: 10px;\n}\n\n.pillar-inline-plan__step--guidance .pillar-inline-plan__step-icon {\n color: var(--pillar-info, #3b82f6);\n}\n\n.pillar-inline-plan__step--guidance.pillar-inline-plan__step--completed {\n background: transparent;\n border-left-color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__guidance-text {\n font-size: 11px;\n color: var(--pillar-text-secondary, #6b7280);\n line-height: 1.4;\n margin-top: 2px;\n}\n\n.pillar-inline-plan__guidance-sources {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 4px;\n}\n\n/* Inline UI Card Container */\n.pillar-inline-plan__inline-card {\n margin-top: 6px;\n}\n\n.pillar-inline-plan__inline-card .pillar-confirm-card {\n margin: 0;\n}\n\n.pillar-inline-plan__source-link {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n color: var(--pillar-primary, #2563eb);\n background: var(--pillar-bg-primary-subtle, rgba(37, 99, 235, 0.1));\n border-radius: 3px;\n text-decoration: none;\n transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__source-link:hover {\n background: var(--pillar-bg-primary-subtle-hover, rgba(37, 99, 235, 0.15));\n text-decoration: underline;\n}\n\n/* Buttons */\n.pillar-inline-plan__btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 500;\n font-family: inherit;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n border: none;\n}\n\n.pillar-inline-plan__btn--confirm {\n background: var(--pillar-success, #059669);\n color: #ffffff;\n min-width: 24px;\n}\n\n.pillar-inline-plan__btn--confirm:hover {\n background: var(--pillar-success-hover, #047857);\n}\n\n.pillar-inline-plan__btn--skip {\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--skip:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n.pillar-inline-plan__btn--retry {\n background: var(--pillar-danger, #dc2626);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--retry:hover {\n background: var(--pillar-danger-hover, #b91c1c);\n}\n\n.pillar-inline-plan__btn--done {\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--done:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--start {\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--start:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--cancel {\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--cancel:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n color: var(--pillar-danger, #dc2626);\n border-color: var(--pillar-danger, #dc2626);\n}\n\n/* Footer */\n.pillar-inline-plan__footer {\n display: flex;\n gap: 8px;\n padding-top: 6px;\n}\n\n/* Status messages */\n.pillar-inline-plan__status {\n font-size: 12px;\n font-weight: 500;\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.pillar-inline-plan__status--success {\n color: var(--pillar-success, #059669);\n background: var(--pillar-bg-success-subtle, rgba(5, 150, 105, 0.1));\n}\n\n.pillar-inline-plan__status--error {\n color: var(--pillar-danger, #dc2626);\n background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__status--cancelled {\n color: var(--pillar-text-tertiary, #9ca3af);\n background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n/* Spinner animation */\n@keyframes pillar-inline-plan-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.pillar-inline-plan__spinner {\n animation: pillar-inline-plan-spin 1s linear infinite;\n}\n";
23
+ export declare const INLINE_PLAN_STYLES = "\n/* Inline Plan Container */\n.pillar-inline-plan {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 4px 0;\n}\n\n/* Approach text - simple inline text */\n.pillar-inline-plan__approach {\n font-size: 13px;\n line-height: 1.5;\n color: var(--pillar-text-secondary, #6b7280);\n margin-bottom: 2px;\n}\n\n.pillar-inline-plan__approach p {\n margin: 0 0 4px 0;\n}\n\n.pillar-inline-plan__approach p:last-child {\n margin-bottom: 0;\n}\n\n/* Steps list */\n.pillar-inline-plan__steps {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n/* Individual step */\n.pillar-inline-plan__step {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border-radius: 6px;\n font-size: 13px;\n background: transparent;\n transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__step-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-inline-plan__step-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.pillar-inline-plan__step-text {\n color: var(--pillar-text-primary, #374151);\n line-height: 1.4;\n}\n\n.pillar-inline-plan__step-instruction {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.pillar-inline-plan__action-badge {\n display: inline-block;\n padding: 1px 5px;\n font-size: 9px;\n font-weight: 600;\n text-transform: uppercase;\n background: var(--pillar-warning, #f59e0b);\n color: white;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n.pillar-inline-plan__instruction-text {\n font-size: 11px;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step-actions {\n display: flex;\n gap: 4px;\n}\n\n/* Step states */\n.pillar-inline-plan__step--pending {\n opacity: 0.6;\n}\n\n.pillar-inline-plan__step--ready .pillar-inline-plan__step-icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--awaiting_confirmation {\n background: var(--pillar-bg-warning-subtle, rgba(251, 191, 36, 0.1));\n}\n\n.pillar-inline-plan__step--awaiting_confirmation .pillar-inline-plan__step-icon {\n color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-inline-plan__step--executing .pillar-inline-plan__step-icon,\n.pillar-inline-plan__step--awaiting_result .pillar-inline-plan__step-icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-icon {\n color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-text {\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step--skipped {\n opacity: 0.5;\n}\n\n.pillar-inline-plan__step--skipped .pillar-inline-plan__step-text {\n text-decoration: line-through;\n}\n\n.pillar-inline-plan__step--failed {\n background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__step--failed .pillar-inline-plan__step-icon {\n color: var(--pillar-danger, #dc2626);\n}\n\n/* Guidance step styles */\n.pillar-inline-plan__step--guidance {\n background: var(--pillar-bg-info-subtle, rgba(59, 130, 246, 0.08));\n border-left: 2px solid var(--pillar-info, #3b82f6);\n padding-left: 10px;\n}\n\n.pillar-inline-plan__step--guidance .pillar-inline-plan__step-icon {\n color: var(--pillar-info, #3b82f6);\n}\n\n.pillar-inline-plan__step--guidance.pillar-inline-plan__step--completed {\n background: transparent;\n border-left-color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__guidance-text {\n font-size: 11px;\n color: var(--pillar-text-secondary, #6b7280);\n line-height: 1.4;\n margin-top: 2px;\n}\n\n.pillar-inline-plan__guidance-sources {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 4px;\n}\n\n/* Inline UI Card Container */\n.pillar-inline-plan__inline-card {\n margin-top: 6px;\n}\n\n.pillar-inline-plan__inline-card .pillar-confirm-card {\n margin: 0;\n}\n\n.pillar-inline-plan__source-link {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n color: var(--pillar-primary, #2563eb);\n background: var(--pillar-bg-primary-subtle, rgba(37, 99, 235, 0.1));\n border-radius: 3px;\n text-decoration: none;\n transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__source-link:hover {\n background: var(--pillar-bg-primary-subtle-hover, rgba(37, 99, 235, 0.15));\n text-decoration: underline;\n}\n\n/* Buttons */\n.pillar-inline-plan__btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 500;\n font-family: inherit;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n border: none;\n}\n\n.pillar-inline-plan__btn--confirm {\n background: var(--pillar-success, #059669);\n color: #ffffff;\n min-width: 24px;\n}\n\n.pillar-inline-plan__btn--confirm:hover {\n background: var(--pillar-success-hover, #047857);\n}\n\n.pillar-inline-plan__btn--skip {\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--skip:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n.pillar-inline-plan__btn--retry {\n background: var(--pillar-danger, #dc2626);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--retry:hover {\n background: var(--pillar-danger-hover, #b91c1c);\n}\n\n.pillar-inline-plan__btn--done {\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--done:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--start {\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--start:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--cancel {\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--cancel:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n color: var(--pillar-danger, #dc2626);\n border-color: var(--pillar-danger, #dc2626);\n}\n\n/* Footer */\n.pillar-inline-plan__footer {\n display: flex;\n gap: 8px;\n padding-top: 6px;\n}\n\n/* Status messages */\n.pillar-inline-plan__status {\n font-size: 12px;\n font-weight: 500;\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.pillar-inline-plan__status--success {\n color: var(--pillar-success, #059669);\n background: var(--pillar-bg-success-subtle, rgba(5, 150, 105, 0.1));\n}\n\n.pillar-inline-plan__status--error {\n color: var(--pillar-danger, #dc2626);\n background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__status--cancelled {\n color: var(--pillar-text-tertiary, #9ca3af);\n background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n/* Spinner animation */\n@keyframes pillar-inline-plan-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.pillar-inline-plan__spinner {\n animation: pillar-inline-plan-spin 1s linear infinite;\n}\n";
24
24
  export {};
package/dist/components/Plan/PlanDocument.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ /**
2
+ * PlanDocument Component
3
+ *
4
+ * Displays a collapsible section showing the LLM-generated plan document.
5
+ * The document explains the plan's approach, reasoning, dependencies,
6
+ * and success criteria.
7
+ *
8
+ * Collapsed by default - users can click to expand and read the full context.
9
+ */
10
+ import { h } from 'preact';
11
+ export interface PlanDocumentProps {
12
+ /** The plan document content (markdown) */
13
+ document: string;
14
+ /** Whether to start expanded (default: false) */
15
+ defaultExpanded?: boolean;
16
+ }
17
+ export declare function PlanDocument({ document, defaultExpanded, }: PlanDocumentProps): h.JSX.Element;
18
+ export declare const PLAN_DOCUMENT_STYLES = "\n/* Plan Document Section */\n.pillar-plan-document {\n border-radius: 8px;\n background: var(--pillar-bg-tertiary, #f3f4f6);\n overflow: hidden;\n}\n\n/* Header row (always visible) */\n.pillar-plan-document__header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n user-select: none;\n transition: background 0.15s ease;\n}\n\n.pillar-plan-document__header:hover {\n background: var(--pillar-bg-tertiary-hover, rgba(0, 0, 0, 0.05));\n}\n\n/* Rotating expand icon */\n.pillar-plan-document__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n color: var(--pillar-text-tertiary, #9ca3af);\n transition: transform 0.2s ease;\n}\n\n/* Title (\"Approach\") */\n.pillar-plan-document__title {\n font-size: 12px;\n font-weight: 600;\n color: var(--pillar-text-secondary, #6b7280);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Collapsible content wrapper */\n.pillar-plan-document__content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.25s ease-out;\n}\n\n.pillar-plan-document__content--expanded {\n max-height: 500px;\n}\n\n/* Markdown content area */\n.pillar-plan-document__body {\n padding: 0 12px 12px 12px;\n font-size: 13px;\n line-height: 1.5;\n color: var(--pillar-text-primary, #374151);\n}\n\n/* Markdown element styles */\n.pillar-plan-document__body p {\n margin: 0 0 8px 0;\n}\n\n.pillar-plan-document__body p:last-child {\n margin-bottom: 0;\n}\n\n.pillar-plan-document__body ul,\n.pillar-plan-document__body ol {\n margin: 0 0 8px 0;\n padding-left: 20px;\n}\n\n.pillar-plan-document__body ul:last-child,\n.pillar-plan-document__body ol:last-child {\n margin-bottom: 0;\n}\n\n.pillar-plan-document__body li {\n margin: 0 0 4px 0;\n}\n\n.pillar-plan-document__body li:last-child {\n margin-bottom: 0;\n}\n\n.pillar-plan-document__body strong {\n font-weight: 600;\n}\n\n.pillar-plan-document__body code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 12px;\n padding: 1px 4px;\n background: var(--pillar-bg-secondary, #e5e7eb);\n border-radius: 3px;\n}\n";
package/dist/components/Plan/PlanStepItem.d.ts CHANGED
@@ -19,5 +19,5 @@ interface PlanStepItemProps {
19
19
  onInlineConfirm?: (stepId: string, data?: Record<string, unknown>) => void;
20
20
  }
21
21
  export declare function PlanStepItem({ step, onConfirm, onSkip, onRetry, onDone, onInlineConfirm }: PlanStepItemProps): h.JSX.Element;
22
- export declare const PLAN_STEP_STYLES = "\n/* Individual Step */\n.pillar-plan-step {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 12px;\n background: var(--pillar-bg-primary, #ffffff);\n border: 1px solid var(--pillar-border, #e5e7eb);\n border-radius: 8px;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-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: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-plan-step__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.pillar-plan-step__description {\n font-size: 13px;\n font-weight: 500;\n color: var(--pillar-text-primary, #374151);\n line-height: 1.4;\n}\n\n.pillar-plan-step__status-text {\n font-size: 12px;\n color: var(--pillar-primary, #2563eb);\n font-style: italic;\n}\n\n.pillar-plan-step__error {\n font-size: 12px;\n color: var(--pillar-danger, #dc2626);\n}\n\n.pillar-plan-step__actions {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n/* Step States */\n.pillar-plan-step--pending {\n opacity: 0.6;\n}\n\n.pillar-plan-step--ready {\n background: var(--pillar-bg-info-subtle, #eff6ff);\n border-color: var(--pillar-info, #93c5fd);\n}\n\n.pillar-plan-step--ready .pillar-plan-step__icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--awaiting_confirmation {\n background: var(--pillar-bg-warning-subtle, #fef3c7);\n border-color: var(--pillar-warning, #fcd34d);\n}\n\n.pillar-plan-step--awaiting_confirmation .pillar-plan-step__icon {\n color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-plan-step--executing,\n.pillar-plan-step--awaiting_result {\n background: var(--pillar-bg-info-subtle, #eff6ff);\n border-color: var(--pillar-info, #93c5fd);\n}\n\n.pillar-plan-step--executing .pillar-plan-step__icon,\n.pillar-plan-step--awaiting_result .pillar-plan-step__icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__icon {\n color: var(--pillar-success, #059669);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__description {\n text-decoration: line-through;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-plan-step--skipped {\n opacity: 0.5;\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__icon {\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__description {\n text-decoration: line-through;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--failed {\n background: var(--pillar-bg-danger-subtle, #fef2f2);\n border-color: var(--pillar-danger-light, #fca5a5);\n}\n\n.pillar-plan-step--failed .pillar-plan-step__icon {\n color: var(--pillar-danger, #dc2626);\n}\n\n/* Error Container */\n.pillar-plan-step__error-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.pillar-plan-step__retry-info {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 2px;\n}\n\n.pillar-plan-step__retry-count {\n font-size: 11px;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__retry-exhausted {\n font-size: 11px;\n color: var(--pillar-text-tertiary, #9ca3af);\n font-style: italic;\n margin-top: 2px;\n}\n\n/* Retry Button */\n.pillar-plan-step__retry-btn {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 11px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-danger, #dc2626);\n color: #ffffff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__retry-btn:hover {\n background: var(--pillar-danger-hover, #b91c1c);\n}\n\n/* Confirm Button */\n.pillar-plan-step__confirm-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: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__confirm-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Skip Button */\n.pillar-plan-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: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__skip-btn:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n color: var(--pillar-text-primary, #374151);\n}\n\n/* Awaiting Result Container */\n.pillar-plan-step__awaiting-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.pillar-plan-step__instruction-row {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.pillar-plan-step__action-badge {\n display: inline-block;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n background: var(--pillar-warning, #f59e0b);\n color: white;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n.pillar-plan-step__instruction {\n font-size: 12px;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n/* Done Button */\n.pillar-plan-step__done-btn {\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n padding: 6px 14px;\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__done-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Inline Card Container */\n.pillar-plan-step__inline-card {\n margin-top: 8px;\n}\n\n.pillar-plan-step__inline-card .pillar-confirm-card {\n margin: 0;\n}\n\n/* Spinner Animation for Executing Step */\n@keyframes pillar-plan-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.pillar-plan-step__spinner {\n animation: pillar-plan-spin 1s linear infinite;\n}\n";
22
+ export declare const PLAN_STEP_STYLES = "\n/* Individual Step - minimal checklist style */\n.pillar-plan-step {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 4px 0;\n}\n\n.pillar-plan-step__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin-top: 1px;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-plan-step__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.pillar-plan-step__description {\n font-size: 13px;\n font-weight: 400;\n color: var(--pillar-text-primary, #374151);\n line-height: 1.4;\n}\n\n.pillar-plan-step__status-text {\n font-size: 12px;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__error {\n font-size: 12px;\n color: var(--pillar-danger, #dc2626);\n}\n\n.pillar-plan-step__actions {\n display: flex;\n gap: 8px;\n margin-top: 2px;\n}\n\n/* Step States - minimal styling */\n.pillar-plan-step--pending {\n opacity: 0.5;\n}\n\n.pillar-plan-step--pending .pillar-plan-step__icon {\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--ready .pillar-plan-step__icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--awaiting_confirmation .pillar-plan-step__icon {\n color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-plan-step--executing .pillar-plan-step__icon,\n.pillar-plan-step--awaiting_result .pillar-plan-step__icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__icon {\n color: var(--pillar-success, #059669);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__description {\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-plan-step--skipped {\n opacity: 0.5;\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__icon {\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__description {\n text-decoration: line-through;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--failed .pillar-plan-step__icon {\n color: var(--pillar-danger, #dc2626);\n}\n\n/* Error Container */\n.pillar-plan-step__error-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.pillar-plan-step__retry-info {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 2px;\n}\n\n.pillar-plan-step__retry-count {\n font-size: 11px;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__retry-exhausted {\n font-size: 11px;\n color: var(--pillar-text-tertiary, #9ca3af);\n font-style: italic;\n margin-top: 2px;\n}\n\n/* Retry Button */\n.pillar-plan-step__retry-btn {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 11px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-danger, #dc2626);\n color: #ffffff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__retry-btn:hover {\n background: var(--pillar-danger-hover, #b91c1c);\n}\n\n/* Confirm Button */\n.pillar-plan-step__confirm-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: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__confirm-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Skip Button */\n.pillar-plan-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: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__skip-btn:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n color: var(--pillar-text-primary, #374151);\n}\n\n/* Awaiting Result Container */\n.pillar-plan-step__awaiting-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.pillar-plan-step__instruction-row {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.pillar-plan-step__action-badge {\n display: inline-block;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n background: var(--pillar-warning, #f59e0b);\n color: white;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n.pillar-plan-step__instruction {\n font-size: 12px;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n/* Done Button */\n.pillar-plan-step__done-btn {\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n padding: 6px 14px;\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__done-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Inline Card Container */\n.pillar-plan-step__inline-card {\n margin-top: 8px;\n}\n\n.pillar-plan-step__inline-card .pillar-confirm-card {\n margin: 0;\n}\n\n/* Spinner Animation for Executing Step */\n@keyframes pillar-plan-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.pillar-plan-step__spinner {\n animation: pillar-plan-spin 1s linear infinite;\n}\n";
23
23
  export {};
package/dist/components/Plan/PlanView.d.ts CHANGED
@@ -7,4 +7,4 @@
7
7
  */
8
8
  import { h } from 'preact';
9
9
  export declare function PlanView(): h.JSX.Element | null;
10
- export declare const PLAN_STYLES = "\n/* Plan Container */\n.pillar-plan {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 16px;\n background: var(--pillar-bg-secondary, #f9fafb);\n border: 1px solid var(--pillar-border, #e5e7eb);\n border-radius: 12px;\n margin: 12px 0;\n}\n\n/* Header */\n.pillar-plan__header {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.pillar-plan__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-plan__title {\n flex: 1;\n font-size: 14px;\n font-weight: 600;\n color: var(--pillar-text-primary, #1a1a1a);\n line-height: 1.4;\n}\n\n.pillar-plan__progress {\n font-size: 12px;\n font-weight: 500;\n color: var(--pillar-text-secondary, #6b7280);\n padding: 2px 8px;\n background: var(--pillar-bg-tertiary, #e5e7eb);\n border-radius: 10px;\n}\n\n/* Progress Bar */\n.pillar-plan__progress-bar {\n height: 4px;\n background: var(--pillar-bg-tertiary, #e5e7eb);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.pillar-plan__progress-fill {\n height: 100%;\n background: var(--pillar-primary, #2563eb);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* Steps List */\n.pillar-plan__steps {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n/* Footer */\n.pillar-plan__footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--pillar-border, #e5e7eb);\n}\n\n/* Start Button */\n.pillar-plan__start-btn {\n display: inline-flex;\n align-items: center;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan__start-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Cancel Button */\n.pillar-plan__cancel-btn {\n display: inline-flex;\n align-items: center;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan__cancel-btn:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n color: var(--pillar-danger, #dc2626);\n border-color: var(--pillar-danger, #dc2626);\n}\n";
10
+ export declare const PLAN_STYLES = "\n/* Plan Container - minimal, chat-native styling */\n.pillar-plan {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin: 4px 0;\n}\n\n/* Plan goal - simple text styling */\n.pillar-plan__goal {\n font-size: 14px;\n font-weight: 500;\n color: var(--pillar-text-primary, #1a1a1a);\n line-height: 1.4;\n}\n\n/* Approach text - simple inline text, not collapsible */\n.pillar-plan__approach {\n font-size: 13px;\n line-height: 1.5;\n color: var(--pillar-text-secondary, #6b7280);\n margin-bottom: 4px;\n}\n\n.pillar-plan__approach p {\n margin: 0 0 4px 0;\n}\n\n.pillar-plan__approach p:last-child {\n margin-bottom: 0;\n}\n\n/* Steps List */\n.pillar-plan__steps {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* Footer - minimal */\n.pillar-plan__footer {\n display: flex;\n justify-content: flex-start;\n gap: 8px;\n margin-top: 4px;\n}\n\n/* Start Button */\n.pillar-plan__start-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: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan__start-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Cancel Button - text-only style */\n.pillar-plan__cancel-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: var(--pillar-text-tertiary, #9ca3af);\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan__cancel-btn:hover {\n color: var(--pillar-danger, #dc2626);\n background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n/* Warning Message */\n.pillar-plan__warning {\n padding: 8px 12px;\n font-size: 12px;\n color: var(--pillar-warning-text, #92400e);\n background: var(--pillar-warning-bg, #fef3c7);\n border: 1px solid var(--pillar-warning-border, #fcd34d);\n border-radius: 6px;\n}\n";
package/dist/components/Plan/index.d.ts CHANGED
@@ -6,3 +6,4 @@
6
6
  export { PlanView, PLAN_STYLES } from './PlanView';
7
7
  export { PlanStepItem, PLAN_STEP_STYLES } from './PlanStepItem';
8
8
  export { InlinePlanView, INLINE_PLAN_STYLES, INLINE_PLAN_MAX_STEPS, shouldDisplayInline, } from './InlinePlanView';
9
+ export { PlanDocument, PLAN_DOCUMENT_STYLES } from './PlanDocument';
package/dist/components/Progress/ProgressRow.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * ProgressRow Component
3
+ *
4
+ * Displays progress events during AI response generation.
5
+ * Uses a chevron-based UI (like Cursor):
6
+ * - Chevron points down when expanded (active state)
7
+ * - Chevron points right when collapsed (done state)
8
+ * - All rows with text content are expandable/collapsible
9
+ */
10
+ import type { ProgressEvent } from '../../store/chat';
11
+ export interface ProgressRowProps {
12
+ progress: ProgressEvent;
13
+ isActive?: boolean;
14
+ isLast?: boolean;
15
+ }
16
+ export declare function ProgressRow({ progress, isActive, isLast, }: ProgressRowProps): import("preact").JSX.Element | null;
package/dist/components/Progress/ProgressStack.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * ProgressStack Component
3
+ *
4
+ * Renders a stack of progress events during AI response generation.
5
+ * Each event is displayed as a row with status icon, label, and optional streaming text.
6
+ */
7
+ import type { ProgressEvent } from '../../store/chat';
8
+ export interface ProgressStackProps {
9
+ events: ProgressEvent[];
10
+ }
11
+ /**
12
+ * Renders an array of progress events as stacked rows.
13
+ * Used during active streaming to show the AI's progress.
14
+ */
15
+ export declare function ProgressStack({ events }: ProgressStackProps): import("preact").JSX.Element | null;
package/dist/components/Progress/ReasoningDisclosure.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ /**
2
+ * ReasoningDisclosure Component
3
+ *
4
+ * Displays the AI's reasoning/thinking steps in a collapsible section.
5
+ * Used to show progress events after a message is complete.
6
+ *
7
+ * Features:
8
+ * - Animated expand/collapse using CSS Grid
9
+ * - Accessible with ARIA attributes
10
+ * - Keyboard navigation support
11
+ */
12
+ import { h } from 'preact';
13
+ import type { ProgressEvent } from '../../store/chat';
14
+ export interface ReasoningDisclosureProps {
15
+ events: ProgressEvent[];
16
+ defaultExpanded?: boolean;
17
+ /** Unique ID for accessibility - defaults to 'reasoning' */
18
+ id?: string;
19
+ }
20
+ export declare function ReasoningDisclosure({ events, defaultExpanded, id, }: ReasoningDisclosureProps): h.JSX.Element | null;
package/dist/components/Progress/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { ProgressRow, type ProgressRowProps } from './ProgressRow';
2
+ export { ProgressStack, type ProgressStackProps } from './ProgressStack';
3
+ export { ReasoningDisclosure, type ReasoningDisclosureProps } from './ReasoningDisclosure';
package/dist/components/Views/HomeView.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  /**
2
2
  * Home View Component
3
3
  * Default panel view with suggested questions and chat input
4
+ *
5
+ * Uses the suggestions store for page-aware suggestions that are sorted
6
+ * client-side based on the current page context (URL, title).
4
7
  */
5
8
  export declare function HomeView(): import("preact").JSX.Element;
package/dist/components/Views/ResumePrompt.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /**
2
+ * ResumePrompt Component
3
+ *
4
+ * Displays an inline prompt to resume an interrupted conversation.
5
+ * Shows after a user reconnects and there's a resumable session.
6
+ *
7
+ * - For quick reconnects (<15s): Shows a brief "Resuming..." indicator
8
+ * - For longer disconnects: Shows summary + Resume/Discard buttons
9
+ */
10
+ import { h } from 'preact';
11
+ import type { InterruptedSession } from '../../store/chat';
12
+ export interface ResumePromptProps {
13
+ /** The interrupted session details */
14
+ session: InterruptedSession;
15
+ /** Called when user clicks Resume */
16
+ onResume: () => void;
17
+ /** Called when user clicks Discard */
18
+ onDiscard: () => void;
19
+ /** Whether resumption is in progress */
20
+ isResuming?: boolean;
21
+ }
22
+ export declare function ResumePrompt({ session, onResume, onDiscard, isResuming, }: ResumePromptProps): h.JSX.Element;
package/dist/components/Views/index.d.ts CHANGED
@@ -3,3 +3,4 @@
3
3
  */
4
4
  export { HomeView } from './HomeView';
5
5
  export { ChatView } from './ChatView';
6
+ export { ResumePrompt } from './ResumePrompt';
package/dist/components/index.d.ts CHANGED
@@ -5,3 +5,4 @@ export { Panel, PanelContent, Header, ChatInput, PANEL_STYLES } from './Panel';
5
5
  export { PillarProvider, usePillar, useAPI, useEvents } from './context';
6
6
  export * from './shared';
7
7
  export * from './Views';
8
+ export * from './Progress';
package/dist/components/shared/icons.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Shared Icons Module
3
+ *
4
+ * Centralized step status icons used across Workflow components.
5
+ * Icons are parameterized by size and optional spinner class.
6
+ */
7
+ import type { WorkflowStepStatus } from '../../core/workflow';
8
+ export type IconSize = 14 | 16 | 18;
9
+ /**
10
+ * Get workflow step status icon.
11
+ *
12
+ * @param status - The workflow step status
13
+ * @param size - Icon size (14, 16, or 18)
14
+ * @param spinnerClass - CSS class for spinner animation (active state)
15
+ */
16
+ export declare function getWorkflowStatusIcon(status: WorkflowStepStatus, size?: IconSize, spinnerClass?: string): string;
17
+ /**
18
+ * Get the guidance icon (question mark in circle).
19
+ */
20
+ export declare function getGuidanceIcon(size?: IconSize): string;
21
+ /**
22
+ * Get the workflow header icon (grid of squares).
23
+ */
24
+ export declare function getWorkflowIcon(size?: IconSize): string;
package/dist/components/shared/index.d.ts CHANGED
@@ -5,3 +5,4 @@ export { Loading } from './Loading';
5
5
  export { Empty } from './Empty';
6
6
  export { QuestionChip, QuestionChipSkeleton } from './QuestionChip';
7
7
  export { MessageInputArea } from './MessageInputArea';
8
+ export { getWorkflowStatusIcon, getGuidanceIcon, getWorkflowIcon, type IconSize, } from './icons';