@kodaris/krubble-app-components 1.0.126 → 1.0.128

package/dist/krubble-app.umd.js

@@ -3473,10 +3473,9 @@
               }
           }
           // `this.load` is always set by here (defaulted above when the consumer didn't
-          // supply one), so capture it for the async chain — TS can't narrow the nullable
-          // property across the promise boundary.
-          const load = this.load;
-          resolveConversationId.then(() => load()).then((messages) => {
+          // supply one); the `!` is because TS can't narrow the nullable property across
+          // the promise boundary.
+          resolveConversationId.then(() => this.load()).then((messages) => {
               if (messages && messages.length) {
                   this.messages = messages;
               }
@@ -3745,11 +3744,10 @@
       }
       _saveState() {
           try {
-              // `toolDetail` and `history` are transient views, not saved ones — persist
-              // only the real preference views so a reload never reopens a stale tool or a
-              // stale conversation list.
+              // `toolDetail` is a transient peek, not a saved view — persist only the two
+              // real preference views so a reload never reopens a stale tool.
               let persistedDrawerView = this._drawerView;
-              if (persistedDrawerView === 'toolDetail' || persistedDrawerView === 'history') {
+              if (persistedDrawerView === 'toolDetail') {
                   persistedDrawerView = 'settings';
               }
               const state = {
@@ -3808,8 +3806,14 @@
               this._showToolInputs = state.showToolInputs === 'true';
               this._showConfirmationInput = state.showConfirmationInput === 'true';
               this._drawerOpen = state.drawerOpen === 'true';
-              if (state.drawerView === 'settings' || state.drawerView === 'debug') {
+              if (state.drawerView === 'settings' || state.drawerView === 'debug' || state.drawerView === 'history') {
                   this._drawerView = state.drawerView;
+                  // History's list isn't persisted (it can go stale); refetch it so a reload
+                  // that was on the conversations panel comes back to a populated list rather
+                  // than an empty one.
+                  if (state.drawerView === 'history') {
+                      this._loadConversations();
+                  }
               }
               const w = Number(state.drawerWidth);
               if (w >= 300) {
@@ -4953,41 +4957,47 @@
           else {
               this._drawerOpen = true;
               this._drawerView = view;
-              // Opening the history view refetches the user's previous conversations
-              // (most-recently modified first) so a just-created or renamed conversation
-              // shows without a reload. Ownership is enforced server-side (the endpoint
-              // scopes to the current administrator), so we only filter to active ones.
+              // Opening the history view refetches the list so a just-created or renamed
+              // conversation shows without a reload.
               if (view === 'history') {
-                  this._conversationsLoading = true;
-                  krubbleHttp.Http.fetch({
-                      url: '/api/system/conversation/list',
-                      method: 'POST',
-                      body: {
-                          page: 0,
-                          size: 50,
-                          sortBy: 'lastModified',
-                          sortDirection: 'desc',
-                          filterFields: [{
-                                  name: 'active',
-                                  operation: 'IS',
-                                  value: 'true',
-                              }],
-                      },
-                  })
-                      .then((r) => r.json())
-                      .then((res) => {
-                      this._conversations = res?.data?.content || [];
-                  })
-                      .catch(() => {
-                      this._conversations = [];
-                  })
-                      .then(() => {
-                      this._conversationsLoading = false;
-                  });
+                  this._loadConversations();
               }
           }
           this._saveState();
       }
+      /**
+       * Fetch the user's previous conversations for the history list, most-recently
+       * modified first. Ownership is enforced server-side (the endpoint scopes to the
+       * current administrator), so we only filter to active ones.
+       */
+      _loadConversations() {
+          this._conversationsLoading = true;
+          krubbleHttp.Http.fetch({
+              url: '/api/system/conversation/list',
+              method: 'POST',
+              body: {
+                  page: 0,
+                  size: 50,
+                  sortBy: 'lastModified',
+                  sortDirection: 'desc',
+                  filterFields: [{
+                          name: 'active',
+                          operation: 'IS',
+                          value: 'true',
+                      }],
+              },
+          })
+              .then((r) => r.json())
+              .then((res) => {
+              this._conversations = res?.data?.content || [];
+          })
+              .catch(() => {
+              this._conversations = [];
+          })
+              .then(() => {
+              this._conversationsLoading = false;
+          });
+      }
       /**
        * Switch the floating widget to a previously-created conversation (clicked in the
        * history list): stop any live turn, reset the transient turn/context state, pin
@@ -5006,7 +5016,22 @@
           // one, so the header falls back to the default label).
           this._conversationTitle = this._conversations.find((c) => c.conversationID === conversationID)?.title || '';
           this._persistConversationId();
-          this._resetConversationState();
+          // Clear the transient, per-conversation state so it doesn't bleed into the one
+          // we're switching to — pending confirmations, context banners, errors, the
+          // reconnect counter, and staged composer files (the transcript is loaded below).
+          this._pendingActions = [];
+          this._inlineConfirm = true;
+          this._contextWarning = '';
+          this._contextLimitReached = false;
+          this._contextLimitMessage = '';
+          this._error = '';
+          this._reconnectAttempts = 0;
+          this._pendingConversationFiles.forEach((p) => {
+              if (p.previewUrl) {
+                  URL.revokeObjectURL(p.previewUrl);
+              }
+          });
+          this._pendingConversationFiles = [];
           this._drawerOpen = false;
           this._saveState();
           if (this.load) {
@@ -5033,17 +5058,9 @@
           this._conversationTitle = '';
           this._persistConversationId();
           this.messages = [];
-          this._resetConversationState();
-          this._drawerOpen = false;
-          this._saveState();
-      }
-      /**
-       * Clear the transient, per-conversation state that must not bleed across a
-       * conversation switch/new — pending confirmations, context banners, errors, the
-       * reconnect counter, and staged composer files. The transcript itself is set by
-       * the caller (loaded for a switch, emptied for new).
-       */
-      _resetConversationState() {
+          // Clear the transient, per-conversation state so it doesn't bleed into the new
+          // conversation — pending confirmations, context banners, errors, the reconnect
+          // counter, and staged composer files.
           this._pendingActions = [];
           this._inlineConfirm = true;
           this._contextWarning = '';
@@ -5057,6 +5074,8 @@
               }
           });
           this._pendingConversationFiles = [];
+          this._drawerOpen = false;
+          this._saveState();
       }
       /** Close the drawer. `_drawerView` is left intact so its content stays visible
        *  while the drawer slides shut. */
@@ -5939,55 +5958,58 @@
           <div class="history__empty">No previous conversations</div>
         ` : b `
           <div class="history__list">
-            ${this._conversations.map((conversation) => b `
-              <button
-                type="button"
-                class=${e({
-            'history__item': true,
-            'history__item--active': conversation.conversationID === this.conversationId,
+            ${this._conversations.map((conversation) => {
+            // Format lastModified for the row: today shows the time, this year
+            // shows month/day, older shows month/day/year; the raw value if it
+            // isn't a parseable date. Empty when the conversation has no date.
+            let dateLabel = '';
+            if (conversation.lastModified) {
+                const date = new Date(conversation.lastModified);
+                const now = new Date();
+                if (isNaN(date.getTime())) {
+                    dateLabel = conversation.lastModified;
+                }
+                else if (date.toDateString() === now.toDateString()) {
+                    dateLabel = date.toLocaleTimeString('en-US', {
+                        hour: 'numeric',
+                        minute: '2-digit',
+                    });
+                }
+                else if (date.getFullYear() === now.getFullYear()) {
+                    dateLabel = date.toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                    });
+                }
+                else {
+                    dateLabel = date.toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                    });
+                }
+            }
+            return b `
+                <button
+                  type="button"
+                  class=${e({
+                'history__item': true,
+                'history__item--active': conversation.conversationID === this.conversationId,
+            })}
+                  @click=${() => this._handleSwitchConversation(conversation.conversationID)}
+                >
+                  <span class="history__item-title">${conversation.title || 'Untitled conversation'}</span>
+                  ${dateLabel ? b `
+                    <span class="history__item-date">${dateLabel}</span>
+                  ` : A}
+                </button>
+              `;
         })}
-                @click=${() => this._handleSwitchConversation(conversation.conversationID)}
-              >
-                <span class="history__item-title">${conversation.title || 'Untitled conversation'}</span>
-                ${conversation.lastModified ? b `
-                  <span class="history__item-date">${this._renderConversationDate(conversation.lastModified)}</span>
-                ` : A}
-              </button>
-            `)}
           </div>
         `}
       </div>
     `;
       }
-      /**
-       * Format a conversation's lastModified for the history list: today shows the
-       * time, this year shows month/day, older shows month/day/year. Falls back to the
-       * raw value if it isn't a parseable date.
-       */
-      _renderConversationDate(lastModified) {
-          const date = new Date(lastModified);
-          if (isNaN(date.getTime())) {
-              return lastModified;
-          }
-          const now = new Date();
-          if (date.toDateString() === now.toDateString()) {
-              return date.toLocaleTimeString('en-US', {
-                  hour: 'numeric',
-                  minute: '2-digit',
-              });
-          }
-          if (date.getFullYear() === now.getFullYear()) {
-              return date.toLocaleDateString('en-US', {
-                  month: 'short',
-                  day: 'numeric',
-              });
-          }
-          return date.toLocaleDateString('en-US', {
-              month: 'short',
-              day: 'numeric',
-              year: 'numeric',
-          });
-      }
       /**
        * The side drawer — one sliding panel that holds the Settings, Debug, History,
        * and tool-detail views. The header buttons switch `_drawerView`; the title and
@@ -6018,25 +6040,24 @@
           // In the floating widget the drawer fills the panel over the transcript (a
           // full-panel view with a back button) rather than sliding in beside it — the
           // panel is too narrow to show both. Inline keeps the side-drawer behavior.
-          const fullPanel = this.variant === 'floating';
           return b `
       <div
         class=${e({
             'drawer': true,
             'drawer--open': this._drawerOpen,
             'drawer--resizing': this._isDrawerResizing,
-            'drawer--full': fullPanel,
+            'drawer--full': this.variant === 'floating',
         })}
-        style=${o(fullPanel ? {} : { width: `${this._drawerWidth}px` })}
+        style=${o(this.variant === 'floating' ? {} : { width: `${this._drawerWidth}px` })}
       >
-        ${fullPanel ? A : b `
+        ${this.variant === 'floating' ? A : b `
           <div
             class="drawer__resize"
             @mousedown=${this._handleDrawerResizeMouseDown}
           ></div>
         `}
         <div class="drawer__header">
-          ${fullPanel ? b `
+          ${this.variant === 'floating' ? b `
             <button
               class="header-action"
               @click=${this._handleCloseDrawer}
@@ -6084,7 +6105,7 @@
               New conversation
             </kr-button>
           ` : A}
-          ${fullPanel ? A : b `
+          ${this.variant === 'floating' ? A : b `
             <button
               class="header-action"
               @click=${this._handleCloseDrawer}
@@ -11490,17 +11511,31 @@
    *     { id: 'activity', label: 'Activity', url: '/companies/123/activity' },
    *   ]}
    *   activeId="overview"
+   *   .actions=${[
+   *     { id: 'edit', label: 'Edit', variant: 'flat' },
+   *     { id: 'archive', label: 'Archive' },
+   *     { id: 'delete', label: 'Delete' },
+   *     { id: 'export', label: 'Export' },
+   *   ]}
    * >
    *   <div>Screen content here</div>
    * </kr-screen-nav>
    * ```
    *
+   * Actions render in a footer at the bottom of the nav column. With more than
+   * `maxVisibleActions` (default 3), the overflow collapses into a "More" dropdown.
+   * Listen for `action-click` to handle a click: `e.detail.action` is the action id.
+   *
    * @slot - The main screen content
    *
    * @property {string} label - Main label (e.g., entity name like "Acme Corporation")
    * @property {string} subLabel - Sub label (e.g., entity type like "Company")
    * @property {KRScreenNavItem[]} items - Navigation items as JSON array
    * @property {string} activeId - Currently active item ID
+   * @property {KRScreenNavAction[]} actions - Action buttons rendered in the nav footer
+   * @property {number} maxVisibleActions - Max inline actions before collapsing into a "More" dropdown (default 3)
+   *
+   * @fires action-click - When an action button (inline or overflow) is clicked; detail is `{ action: id }`
    */
   class KRScreenNav extends i$3 {
       constructor() {
@@ -11522,6 +11557,17 @@
            * Can be set explicitly by the parent to override.
            */
           this.activeId = '';
+          /**
+           * Action buttons rendered in the nav footer.
+           */
+          this.actions = [];
+          /**
+           * Max number of inline action buttons before the overflow collapses into a
+           * "More" dropdown. When actions exceed this count, the last visible slot is
+           * used for the "More" button so the total footer button count never exceeds
+           * this value.
+           */
+          this.maxVisibleActions = 3;
           this.handlePopstate = () => {
               this.syncActiveFromUrl();
           };
@@ -11582,7 +11628,35 @@
               this.activeId = match.id;
           }
       }
+      handleActionClick(e, action) {
+          this.dispatchEvent(new CustomEvent('action-click', {
+              detail: { action: action.id },
+              bubbles: true,
+              composed: true,
+          }));
+      }
+      // Fired by the "More" kr-button when an overflow option is chosen; detail is { id, label }.
+      handleMoreSelect(e) {
+          this.dispatchEvent(new CustomEvent('action-click', {
+              detail: { action: e.detail.id },
+              bubbles: true,
+              composed: true,
+          }));
+      }
       render() {
+          const hasOverflow = this.actions.length > this.maxVisibleActions;
+          // When collapsing, the last visible slot is the "More" button, so only
+          // show the first (maxVisibleActions - 1) actions inline.
+          let inlineActions = this.actions;
+          let overflowOptions = [];
+          if (hasOverflow) {
+              inlineActions = this.actions.slice(0, this.maxVisibleActions - 1);
+              // Everything past the inline slots goes into the "More" dropdown.
+              overflowOptions = this.actions.slice(this.maxVisibleActions - 1).map((action) => ({
+                  id: action.id,
+                  label: action.label,
+              }));
+          }
           return b `
       <nav class="nav">
         ${this.label ? b `
@@ -11609,6 +11683,31 @@
               `)}
           </div>
         </div>
+        ${this.actions.length ? b `
+          <div class="nav-actions">
+            ${inlineActions.map((action) => b `
+                <kr-button
+                  class="nav-actions__button"
+                  variant=${action.variant || 'outline'}
+                  size="small"
+                  @click=${(e) => this.handleActionClick(e, action)}
+                >
+                  ${action.label}
+                </kr-button>
+              `)}
+            ${hasOverflow ? b `
+              <kr-button
+                class="nav-actions__button"
+                variant="outline"
+                size="small"
+                .options=${overflowOptions}
+                @option-select=${this.handleMoreSelect}
+              >
+                More
+              </kr-button>
+            ` : A}
+          </div>
+        ` : A}
       </nav>
       <main class="content">
         <div class="content__main">
@@ -11697,6 +11796,19 @@
       font-weight: 700;
     }
 
+    .nav-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid rgba(0, 0, 0, 0.08);
+      flex-shrink: 0;
+    }
+
+    .nav-actions__button {
+      width: 100%;
+    }
+
     .content {
       flex: 1;
       min-width: 0;
@@ -11721,6 +11833,12 @@
   __decorate$2([
       n$1({ type: String })
   ], KRScreenNav.prototype, "activeId", void 0);
+  __decorate$2([
+      n$1({ type: Array })
+  ], KRScreenNav.prototype, "actions", void 0);
+  __decorate$2([
+      n$1({ type: Number })
+  ], KRScreenNav.prototype, "maxVisibleActions", void 0);
   // Guarded registration: no-op if the tag is already defined, so a second copy of krubble on
   // the page (e.g. the Operations shell loads krubble globally while an embedded app bundled its
   // own copy) doesn't throw. First definition wins.