@tylertech/forge-ai 0.14.0-dev.1 → 0.15.0

package/dist/ai-error-message/ai-error-message.mjs

@@ -1,16 +1,32 @@
 import { unsafeCSS, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { property, queryAssignedNodes, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import styles from "./ai-error-message.scss.mjs";
+var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _AiErrorMessageComponent_instances, handleTitleSlotChange_fn, title_get;
 const AiErrorMessageComponentTagName = "forge-ai-error-message";
 let AiErrorMessageComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiErrorMessageComponent_instances);
+    this.density = "medium";
+  }
   render() {
     return html`
       <div class="forge-inline-message">
@@ -25,9 +41,7 @@ let AiErrorMessageComponent = class extends LitElement {
           <path fill="none" d="M0 0h24v24H0z" />
           <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z" />
         </svg>
-        <div class="forge-inline-message__title">
-          <slot name="title"></slot>
-        </div>
+        ${__privateGet(this, _AiErrorMessageComponent_instances, title_get)}
         <div class="forge-inline-message__content">
           <slot></slot>
         </div>
@@ -35,7 +49,28 @@ let AiErrorMessageComponent = class extends LitElement {
     `;
   }
 };
+_AiErrorMessageComponent_instances = /* @__PURE__ */ new WeakSet();
+handleTitleSlotChange_fn = function() {
+  this.requestUpdate();
+};
+title_get = function() {
+  const classes = classMap({
+    "forge-inline-message__title": true,
+    "forge-inline-message__title--empty": this._titleNodes.length === 0
+  });
+  return html`
+      <div class=${classes}>
+        <slot name="title" @slotchange=${__privateMethod(this, _AiErrorMessageComponent_instances, handleTitleSlotChange_fn)}></slot>
+      </div>
+    `;
+};
 AiErrorMessageComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: String, reflect: true })
+], AiErrorMessageComponent.prototype, "density", 2);
+__decorateClass([
+  queryAssignedNodes({ slot: "title", flatten: true })
+], AiErrorMessageComponent.prototype, "_titleNodes", 2);
 AiErrorMessageComponent = __decorateClass([
   customElement(AiErrorMessageComponentTagName)
 ], AiErrorMessageComponent);

package/dist/ai-error-message/ai-error-message.scss.mjs

@@ -1,4 +1,4 @@
-const styles = '/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-inline-message {\n  --_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-info-container-low, #e3edf7));\n  --_inline-message-color:var(--forge-inline-message-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));\n  --_inline-message-shape:var(--forge-inline-message-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_inline-message-padding:var(--forge-inline-message-padding, var(--forge-spacing-small, 12px));\n  --_inline-message-padding-inline:var(--forge-inline-message-padding-inline, var(--_inline-message-padding));\n  --_inline-message-padding-block:var(--forge-inline-message-padding-block, var(--_inline-message-padding));\n  --_inline-message-border-width:var(--forge-inline-message-border-width, var(--forge-border-thin, 1px));\n  --_inline-message-border-style:var(--forge-inline-message-border-style, none);\n  --_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-info-container, #c7daf0));\n  --_inline-message-gap:var(--forge-inline-message-gap, var(--forge-spacing-small, 12px));\n  --_inline-message-icon-gap:var(--forge-inline-message-icon-gap, var(--_inline-message-gap));\n  --_inline-message-content-gap:var(--forge-inline-message-content-gap, var(--_inline-message-gap));\n  --_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-info-container-low, #0b3768));\n}\n\n.forge-inline-message {\n  display: block;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  background: var(--_inline-message-background);\n  color: var(--_inline-message-color);\n  border-radius: var(--_inline-message-shape);\n  border-width: var(--_inline-message-border-width);\n  border-style: var(--_inline-message-border-style);\n  border-color: var(--_inline-message-border-color);\n  display: flex;\n  align-items: center;\n  gap: var(--_inline-message-icon-gap);\n  box-sizing: border-box;\n  padding-inline: var(--_inline-message-padding-inline);\n  padding-block: var(--_inline-message-padding-block);\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto 1fr;\n}\n\n.forge-inline-message:not(:has(.forge-inline-message__icon)) {\n  grid-template-columns: 1fr;\n}\n\n.forge-inline-message__title {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-heading1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-heading1-font-weight, 500);\n  line-height: var(--forge-typography-heading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-heading1-letter-spacing, 0.0178571429em);\n  text-transform: var(--forge-typography-heading1-text-transform, inherit);\n  text-decoration: var(--forge-typography-heading1-text-decoration, inherit);\n}\n\n.forge-inline-message__icon {\n  color: var(--_inline-message-icon-color);\n  align-self: start;\n  grid-row: 1/span 2;\n}\n\n:host {\n  display: block;\n}\n\n.forge-inline-message {\n  --forge-inline-message-background: var(--forge-theme-error-container-low, #f6e0e4);\n  --forge-inline-message-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-icon-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-border-color: var(--forge-theme-error-container, #ecc2c9);\n  --forge-inline-message-border-style: solid;\n}\n.forge-inline-message__title {\n  font-weight: bold;\n}\n.forge-inline-message__content {\n  overflow-wrap: anywhere;\n}\n\n::slotted(*) {\n  margin-block: 0;\n  overflow-wrap: anywhere;\n}';
+const styles = '/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-inline-message {\n  --_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-info-container-low, #e3edf7));\n  --_inline-message-color:var(--forge-inline-message-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));\n  --_inline-message-shape:var(--forge-inline-message-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_inline-message-padding:var(--forge-inline-message-padding, var(--forge-spacing-small, 12px));\n  --_inline-message-padding-inline:var(--forge-inline-message-padding-inline, var(--_inline-message-padding));\n  --_inline-message-padding-block:var(--forge-inline-message-padding-block, var(--_inline-message-padding));\n  --_inline-message-border-width:var(--forge-inline-message-border-width, var(--forge-border-thin, 1px));\n  --_inline-message-border-style:var(--forge-inline-message-border-style, none);\n  --_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-info-container, #c7daf0));\n  --_inline-message-gap:var(--forge-inline-message-gap, var(--forge-spacing-small, 12px));\n  --_inline-message-icon-gap:var(--forge-inline-message-icon-gap, var(--_inline-message-gap));\n  --_inline-message-content-gap:var(--forge-inline-message-content-gap, var(--_inline-message-gap));\n  --_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-info-container-low, #0b3768));\n}\n\n.forge-inline-message {\n  display: block;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  background: var(--_inline-message-background);\n  color: var(--_inline-message-color);\n  border-radius: var(--_inline-message-shape);\n  border-width: var(--_inline-message-border-width);\n  border-style: var(--_inline-message-border-style);\n  border-color: var(--_inline-message-border-color);\n  display: flex;\n  align-items: center;\n  gap: var(--_inline-message-icon-gap);\n  box-sizing: border-box;\n  padding-inline: var(--_inline-message-padding-inline);\n  padding-block: var(--_inline-message-padding-block);\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto 1fr;\n}\n\n.forge-inline-message:not(:has(.forge-inline-message__icon)) {\n  grid-template-columns: 1fr;\n}\n\n.forge-inline-message__title {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-heading1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-heading1-font-weight, 500);\n  line-height: var(--forge-typography-heading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-heading1-letter-spacing, 0.0178571429em);\n  text-transform: var(--forge-typography-heading1-text-transform, inherit);\n  text-decoration: var(--forge-typography-heading1-text-decoration, inherit);\n}\n\n.forge-inline-message__icon {\n  color: var(--_inline-message-icon-color);\n  align-self: start;\n  grid-row: 1/span 2;\n}\n\n:host {\n  display: block;\n}\n\n.forge-inline-message {\n  --forge-inline-message-background: var(--forge-theme-error-container-low, #f6e0e4);\n  --forge-inline-message-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-icon-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-border-color: var(--forge-theme-error-container, #ecc2c9);\n  --forge-inline-message-border-style: solid;\n}\n.forge-inline-message__title {\n  font-weight: bold;\n}\n.forge-inline-message__title--empty {\n  display: none;\n}\n.forge-inline-message__content {\n  overflow-wrap: anywhere;\n}\n.forge-inline-message:has(.forge-inline-message__title--empty) {\n  grid-template-rows: auto;\n}\n.forge-inline-message:has(.forge-inline-message__title--empty) .forge-inline-message__icon {\n  grid-row: auto;\n  align-self: center;\n}\n\n:host([density=small]) .forge-inline-message {\n  --forge-inline-message-padding: var(--forge-spacing-xsmall, 8px);\n  --forge-inline-message-gap: var(--forge-spacing-xsmall, 8px);\n  --forge-inline-message-content-gap: var(--forge-spacing-xxsmall, 4px);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n  font-weight: var(--forge-typography-body2-font-weight, 400);\n  line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n  letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);\n  text-transform: var(--forge-typography-body2-text-transform, inherit);\n  text-decoration: var(--forge-typography-body2-text-decoration, inherit);\n}\n:host([density=small]) .forge-inline-message__icon {\n  height: 20px;\n  width: 20px;\n}\n\n::slotted(*) {\n  margin-block: 0;\n  overflow-wrap: anywhere;\n}';
 export {
   styles as default
 };

package/dist/ai-error-message/index.d.ts

@@ -1 +1,2 @@
 export { AiErrorMessageComponent, AiErrorMessageComponentTagName } from './ai-error-message.js';
+export type { ErrorMessageDensity } from './ai-error-message.js';

package/dist/ai-fab/ai-fab.d.ts

@@ -22,6 +22,8 @@ export declare class AiFabComponent extends LitElement {
     disabled: boolean;
     /** Whether the button is extended */
     extended: boolean;
+    /** Accessible label for the button, announced by screen readers. */
+    label: string;
     constructor();
     willUpdate(changedProperties: PropertyValues<this>): void;
     render(): TemplateResult;

package/dist/ai-fab/ai-fab.mjs

@@ -30,6 +30,7 @@ let AiFabComponent = class extends LitElement {
     __privateAdd(this, _AiFabComponent_instances);
     this.disabled = false;
     this.extended = false;
+    this.label = "Launch chatbot";
     __privateAdd(this, _internals);
     __privateSet(this, _internals, this.attachInternals());
     __privateMethod(this, _AiFabComponent_instances, setCssState_fn).call(this);
@@ -43,7 +44,7 @@ let AiFabComponent = class extends LitElement {
     return html`
       <forge-ai-gradient-container variant=${this.disabled ? "disabled" : "high"}>
         <button
-          aria-label="Floating Action Button Demo"
+          aria-label=${this.label}
           class="forge-fab ai-fab ${this.extended ? "forge-fab--small forge-fab--extended" : ""}"
           .disabled=${this.disabled}>
           <slot name="icon">
@@ -68,6 +69,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], AiFabComponent.prototype, "extended", 2);
+__decorateClass([
+  property({ type: String })
+], AiFabComponent.prototype, "label", 2);
 AiFabComponent = __decorateClass([
   customElement(AiFabComponentTagName)
 ], AiFabComponent);

package/dist/ai-icon-button/ai-icon-button.mjs

@@ -39,7 +39,10 @@ let AiIconButtonComponent = class extends LitElement {
   }
   render() {
     return html`
-      <button aria-label="AI Icon Button" class="forge-icon-button ai-icon-button" .disabled=${this.disabled}>
+      <button
+        aria-label="AI Icon Button"
+        class="forge-icon-button forge-icon-button--medium ai-icon-button"
+        .disabled=${this.disabled}>
         <forge-ai-icon></forge-ai-icon>
       </button>
     `;

package/dist/ai-message-thread/ai-message-thread.mjs

@@ -87,9 +87,9 @@ let AiMessageThreadComponent = class extends LitElement {
   render() {
     return html`
       <div class="message-thread" @scroll=${this.autoScroll ? __privateGet(this, _handleScroll) : void 0}>
+        ${__privateGet(this, _AiMessageThreadComponent_instances, scrollToBottomButton_get)}
         <div class="message-thread-content">${__privateGet(this, _AiMessageThreadComponent_instances, emptyState_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, messages_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, thinkingIndicator_get)}</div>
       </div>
-      ${__privateGet(this, _AiMessageThreadComponent_instances, scrollToBottomButton_get)}
     `;
   }
 };

package/dist/ai-sidebar/ai-sidebar.mjs

@@ -85,9 +85,9 @@ let AiSidebarComponent = class extends LitElement {
               <div
                 ${ref(__privateGet(this, _resizeHandleRef))}
                 class=${classMap(handleClasses)}
-                role="separator"
+                role="slider"
                 aria-orientation="vertical"
-                aria-label="Resize sidebar"
+                aria-label="Resize chatbot panel, use left and right arrow keys"
                 aria-valuemin="${MIN_WIDTH}"
                 aria-valuemax="${MAX_WIDTH}"
                 aria-valuenow=${this._width}

package/dist/ai-thread-actions-menu/ai-thread-actions-menu.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult, CSSResult } from 'lit';
 import { Thread } from '../ai-threads';
+import { DropdownMenuDensity } from '../ai-dropdown-menu';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-thread-actions-menu': AiThreadActionsMenuComponent;
@@ -40,5 +41,9 @@ export declare class AiThreadActionsMenuComponent extends LitElement {
     thread: Thread;
     showRename: boolean;
     showDelete: boolean;
+    /**
+     * The density of the trigger button
+     */
+    density: DropdownMenuDensity;
     render(): TemplateResult;
 }

package/dist/ai-thread-actions-menu/ai-thread-actions-menu.mjs

@@ -28,15 +28,16 @@ let AiThreadActionsMenuComponent = class extends LitElement {
     __privateAdd(this, _AiThreadActionsMenuComponent_instances);
     this.showRename = false;
     this.showDelete = false;
+    this.density = "small";
   }
   render() {
     return html`
       <forge-ai-dropdown-menu
         variant="icon-button-squared"
-        density="small"
+        density=${this.density}
         selection-mode="none"
         popover-placement="bottom-start"
-        trigger-label="Thread options"
+        trigger-label="More actions for ${this.thread.title}"
         @keydown=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuKeyDown_fn)}
         @forge-ai-dropdown-menu-open=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuOpen_fn)}
         @forge-ai-dropdown-menu-close=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuClose_fn)}
@@ -139,6 +140,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-delete" })
 ], AiThreadActionsMenuComponent.prototype, "showDelete", 2);
+__decorateClass([
+  property()
+], AiThreadActionsMenuComponent.prototype, "density", 2);
 AiThreadActionsMenuComponent = __decorateClass([
   customElement(AiThreadActionsMenuComponentTagName)
 ], AiThreadActionsMenuComponent);

package/dist/ai-threads-search/ai-threads-search.d.ts

@@ -13,6 +13,7 @@ declare global {
         'forge-ai-threads-search-delete': CustomEvent<ForgeAiThreadsSearchDeleteEventData>;
         'forge-ai-threads-search-delete-confirm': CustomEvent<ForgeAiThreadsSearchDeleteConfirmEventData>;
         'forge-ai-threads-search-back': CustomEvent<void>;
+        'forge-ai-threads-search-retry': CustomEvent<void>;
     }
 }
 export interface ForgeAiThreadsSearchQueryEventData {
@@ -57,6 +58,7 @@ export declare const AiThreadsSearchComponentTagName: keyof HTMLElementTagNameMa
  * @event {CustomEvent<ForgeAiThreadsSearchDeleteEventData>} forge-ai-threads-search-delete - Fired when thread delete confirmed. Cancelable - if prevented, call onSuccess() to commit deletion or onError() to revert.
  * @event {CustomEvent<ForgeAiThreadsSearchDeleteConfirmEventData>} forge-ai-threads-search-delete-confirm - Fired before showing the built-in delete confirmation. Cancelable - if prevented, this component shows no confirmation UI; the host must show its own and call confirmThreadDelete() once accepted.
  * @event {CustomEvent<void>} forge-ai-threads-search-back - Fired when the back button (shown via showBackButton) is clicked.
+ * @event {CustomEvent<void>} forge-ai-threads-search-retry - Fired when the retry button in the error state is clicked. The host should re-request the threads and clear errorMessage once the load succeeds.
  *
  * @description A standalone search component for conversations/threads. Can be slotted into forge-ai-threads
  * or used independently. Supports both local and external/async search patterns via event callbacks.
@@ -88,8 +90,18 @@ export declare class AiThreadsSearchComponent extends LitElement {
      * infinite scroll entirely. Useful when all data is loaded upfront.
      */
     totalChats: number;
+    /**
+     * Placeholder text for the search input. The input's aria-label is "Search" - avoid reusing
+     * that word here so screen readers don't announce the same word twice.
+     */
     placeholder: string;
-    emptyMessage: string;
+    /**
+     * Message describing a failed thread load. When no threads are loaded, an error banner with a
+     * retry button replaces the empty state. When threads are already on screen the list stays visible
+     * and the message shows as a compact single line with a retry - at the bottom of the list if a page
+     * was in flight, otherwise above it. The host owns this value and should clear it once a load succeeds.
+     */
+    errorMessage?: string;
     showThreadRename: boolean;
     showThreadDelete: boolean;
     /**

package/dist/ai-threads-search/ai-threads-search.mjs

@@ -1,4 +1,4 @@
-import { unsafeCSS, LitElement, html } from "lit";
+import { unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, query, state, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { formatRelativeTime } from "../utils.mjs";
@@ -6,6 +6,7 @@ import { DeleteThreadController } from "../utils/delete-thread-controller.mjs";
 import { InfiniteScrollController } from "../utils/infinite-scroll-controller.mjs";
 import "../ai-thread-actions-menu/ai-thread-actions-menu.mjs";
 import "../ai-edit-thread/ai-edit-thread.mjs";
+import "../ai-error-message/ai-error-message.mjs";
 import "../ai-spinner/ai-spinner.mjs";
 import "../ai-modal/ai-modal.mjs";
 import styles from "./ai-threads-search.scss.mjs";
@@ -26,7 +27,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _deleteThreadController, _infiniteScrollController, _AiThreadsSearchComponent_instances, shouldEnablePagination_get, handleSearchInput_fn, performSearch_fn, loadMore_fn, handleThreadSelect_fn, handleNewChatClick_fn, handleBackClick_fn, handleMenuRename_fn, handleMenuOpen_fn, handleMenuClose_fn, handleMenuDeleteClick_fn, confirmDelete_fn, handleEditSave_fn, handleEditCancel_fn, handleClearSearch_fn, displayedThreads_get, header_get, searchField_get, renderThreadItem_fn, resultsList_get;
+var _deleteThreadController, _infiniteScrollController, _AiThreadsSearchComponent_instances, shouldEnablePagination_get, handleSearchInput_fn, performSearch_fn, loadMore_fn, handleThreadSelect_fn, handleNewChatClick_fn, handleBackClick_fn, handleRetryClick_fn, handleMenuRename_fn, handleMenuOpen_fn, handleMenuClose_fn, handleMenuDeleteClick_fn, confirmDelete_fn, handleEditSave_fn, handleEditCancel_fn, handleClearSearch_fn, displayedThreads_get, header_get, searchField_get, renderThreadItem_fn, errorState_get, compactError_get, errorPlacement_get, emptyState_get, listFooter_get, resultsList_get;
 const AiThreadsSearchComponentTagName = "forge-ai-threads-search";
 let AiThreadsSearchComponent = class extends LitElement {
   constructor() {
@@ -38,8 +39,7 @@ let AiThreadsSearchComponent = class extends LitElement {
     this.showBackButton = false;
     this.showSearch = true;
     this.totalChats = 0;
-    this.placeholder = "Search chats...";
-    this.emptyMessage = "No chats found";
+    this.placeholder = "Find a chat";
     this.showThreadRename = false;
     this.showThreadDelete = false;
     this.selectedThreadId = null;
@@ -88,7 +88,8 @@ let AiThreadsSearchComponent = class extends LitElement {
   render() {
     return html`
       <div class="threads-search-container">
-        ${__privateGet(this, _AiThreadsSearchComponent_instances, header_get)} ${when(this.showSearch, () => __privateGet(this, _AiThreadsSearchComponent_instances, searchField_get))} ${__privateGet(this, _AiThreadsSearchComponent_instances, resultsList_get)}
+        ${__privateGet(this, _AiThreadsSearchComponent_instances, header_get)} ${when(this.showSearch, () => __privateGet(this, _AiThreadsSearchComponent_instances, searchField_get))}
+        ${when(__privateGet(this, _AiThreadsSearchComponent_instances, errorPlacement_get) === "above-list", () => __privateGet(this, _AiThreadsSearchComponent_instances, compactError_get))} ${__privateGet(this, _AiThreadsSearchComponent_instances, resultsList_get)}
       </div>
       ${__privateGet(this, _deleteThreadController).template}
     `;
@@ -181,6 +182,13 @@ handleBackClick_fn = function() {
   });
   this.dispatchEvent(event);
 };
+handleRetryClick_fn = function() {
+  const event = new CustomEvent("forge-ai-threads-search-retry", {
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchEvent(event);
+};
 handleMenuRename_fn = function(e) {
   this._editingThreadId = e.detail.id;
   this._openMenuThreadId = null;
@@ -326,10 +334,12 @@ searchField_get = function() {
             d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" />
         </svg>
         <input
+          id="threads-search-input"
           type="text"
           autocomplete="off"
-          .value=${this._searchQuery}
+          aria-label="Search"
           placeholder=${this.placeholder}
+          .value=${this._searchQuery}
           @input=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleSearchInput_fn)} />
         ${when(this._isSearching, () => html`<forge-ai-spinner size="extra-small"></forge-ai-spinner>`)}
         ${when(
@@ -365,7 +375,10 @@ renderThreadItem_fn = function(thread) {
             </forge-ai-edit-thread>
           `,
     () => html`
-            <button type="button" aria-selected=${isSelected} @click=${() => __privateMethod(this, _AiThreadsSearchComponent_instances, handleThreadSelect_fn).call(this, thread)}>
+            <button
+              type="button"
+              aria-current=${isSelected ? "true" : nothing}
+              @click=${() => __privateMethod(this, _AiThreadsSearchComponent_instances, handleThreadSelect_fn).call(this, thread)}>
               ${thread.title}
             </button>
             <span class="thread-time">${formatRelativeTime(thread.createdAt)}</span>
@@ -390,31 +403,75 @@ renderThreadItem_fn = function(thread) {
       </li>
     `;
 };
+errorState_get = function() {
+  return html`
+      <div class="error-state">
+        <forge-ai-error-message density="small">
+          <span slot="title">Error</span>
+          <p class="error-state__message">${this.errorMessage}</p>
+          <button
+            class="forge-button forge-button--outlined forge-button--dense error-state__retry"
+            type="button"
+            @click=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleRetryClick_fn)}>
+            Retry
+          </button>
+        </forge-ai-error-message>
+      </div>
+    `;
+};
+compactError_get = function() {
+  return html`
+      <forge-ai-error-message class="compact-error" density="small">
+        <div class="compact-error__body">
+          <span>${this.errorMessage}</span>
+          <button
+            class="forge-button forge-button--outlined forge-button--dense compact-error__retry"
+            type="button"
+            @click=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleRetryClick_fn)}>
+            Retry
+          </button>
+        </div>
+      </forge-ai-error-message>
+    `;
+};
+errorPlacement_get = function() {
+  if (!this.errorMessage || __privateGet(this, _AiThreadsSearchComponent_instances, displayedThreads_get).length === 0) {
+    return "none";
+  }
+  return __privateGet(this, _infiniteScrollController).isLoadingMore ? "list-footer" : "above-list";
+};
+emptyState_get = function() {
+  const message = this._searchQuery.trim() ? "No chats found" : "No chats yet";
+  return html`
+      <div class="empty-state">
+        <p>${message}</p>
+      </div>
+    `;
+};
+listFooter_get = function() {
+  if (__privateGet(this, _AiThreadsSearchComponent_instances, errorPlacement_get) === "list-footer") {
+    return __privateGet(this, _AiThreadsSearchComponent_instances, compactError_get);
+  }
+  if (!__privateGet(this, _infiniteScrollController).isLoadingMore) {
+    return nothing;
+  }
+  return html`
+      <div class="loading-more-indicator">
+        <forge-ai-spinner></forge-ai-spinner>
+      </div>
+    `;
+};
 resultsList_get = function() {
   const displayThreads = __privateGet(this, _AiThreadsSearchComponent_instances, displayedThreads_get);
+  if (displayThreads.length === 0) {
+    return html`<div class="results-container">${this.errorMessage ? __privateGet(this, _AiThreadsSearchComponent_instances, errorState_get) : __privateGet(this, _AiThreadsSearchComponent_instances, emptyState_get)}</div>`;
+  }
   return html`
       <div class="results-container">
-        ${when(
-    displayThreads.length === 0,
-    () => html`
-            <div class="empty-state">
-              <p>${this.emptyMessage}</p>
-            </div>
-          `,
-    () => html`
-            <ul class="forge-list forge-list--dense forge-list--navlist" role="list">
-              ${displayThreads.map((thread) => __privateMethod(this, _AiThreadsSearchComponent_instances, renderThreadItem_fn).call(this, thread))}
-            </ul>
-            ${when(
-      __privateGet(this, _infiniteScrollController).isLoadingMore,
-      () => html`
-                <div class="loading-more-indicator">
-                  <forge-ai-spinner></forge-ai-spinner>
-                </div>
-              `
-    )}
-          `
-  )}
+        <ul class="forge-list forge-list--dense forge-list--navlist" role="list">
+          ${displayThreads.map((thread) => __privateMethod(this, _AiThreadsSearchComponent_instances, renderThreadItem_fn).call(this, thread))}
+        </ul>
+        ${__privateGet(this, _AiThreadsSearchComponent_instances, listFooter_get)}
       </div>
     `;
 };
@@ -441,8 +498,8 @@ __decorateClass([
   property({ type: String })
 ], AiThreadsSearchComponent.prototype, "placeholder", 2);
 __decorateClass([
-  property({ type: String, attribute: "empty-message" })
-], AiThreadsSearchComponent.prototype, "emptyMessage", 2);
+  property({ type: String, attribute: "error-message" })
+], AiThreadsSearchComponent.prototype, "errorMessage", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "show-thread-rename" })
 ], AiThreadsSearchComponent.prototype, "showThreadRename", 2);