@genesislcap/ai-assistant 15.26.0 → 15.27.0-agent-log-submit.3

package/dist/esm/components/settings-modal/settings-modal.template.js

@@ -31,6 +31,54 @@ const toggleAnimationEnabled = (host, value, enabled) => {
     host.setEnabledAnimations(next);
 };
 const readSwitchChecked = (event) => event.target.checked;
+/**
+ * The timestamp modes, in the order they read as an increasing amount of chrome.
+ *
+ * Keyed by {@link TimestampDisplay} rather than listed as an array of `{ value, label }`,
+ * so adding a mode to the union is a compile error here instead of a picker that silently
+ * cannot reach it.
+ */
+const TIMESTAMP_MODE_LABELS = {
+    off: 'Off',
+    hover: 'On hover',
+    always: 'Always',
+};
+const TIMESTAMP_MODE_OPTIONS = Object.keys(TIMESTAMP_MODE_LABELS).map((value) => ({ value, label: TIMESTAMP_MODE_LABELS[value] }));
+/**
+ * Three-way picker for {@link TimestampDisplay} (GENC-1257).
+ *
+ * The design system's segmented control rather than the `switch` every other row uses,
+ * because the setting genuinely has three states — and rather than hand-rolled buttons
+ * carrying `role="radio"`, because ARIA roles supply semantics but never behaviour:
+ * promising a radio group means owning roving `tabindex` and arrow-key navigation.
+ *
+ * `SegmentedControl extends FASTRadioGroup` (and `SegmentedItem extends FASTRadio`), so
+ * this IS the DS radio group — it inherits the whole keyboard pattern — just skinned as
+ * segments rather than dots, which is the right affordance for three short mode labels.
+ *
+ * The usual reason to avoid a DS control here does not apply. `RadioGroup.valueChanged`
+ * emits `change` whenever `value` is written — including the write this template's own
+ * binding performs on render, exactly the phantom-change footgun the DS switch has
+ * (GENC-1351 #1). It is harmless because the `timestampDisplay` setter guards on
+ * `preferenceUnchanged`, as every preference setter does, so a render-time echo returns early
+ * and never reaches the store or marks preferences user-changed.
+ */
+export const timestampModePickerTemplate = (segmentedControlTag, segmentedItemTag) => html `
+  <${segmentedControlTag}
+    part="toggle-timestamps"
+    aria-label="Show timestamps"
+    :value=${(x) => x.timestampDisplay}
+    @change=${(x, c) => {
+    x.timestampDisplay = c.event.target.value;
+}}
+  >
+    ${repeat(() => TIMESTAMP_MODE_OPTIONS, html `
+        <${segmentedItemTag} part="timestamp-mode-option" value="${(option) => option.value}"
+          >${(option) => option.label}</${segmentedItemTag}
+        >
+      `)}
+  </${segmentedControlTag}>
+`;
 /** Inline animation picker — categories and options always visible (no multiselect popup). */
 const animationsPickerTemplate = (switchTag) => html `
   <div class="settings-animation-list" part="toggle-animations">
@@ -198,7 +246,7 @@ export const settingsUsageMetersTemplate = (progressTag, buttonTag, iconTag) =>
       </div>
     `)}
 `;
-const chatBotSettingsTemplate = (switchTag, buttonTag) => html `
+const chatBotSettingsTemplate = (switchTag, buttonTag, segmentedControlTag, segmentedItemTag) => html `
   ${when((x) => { var _a; return ((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.showToolCalls) != null; }, chatBotToggleRow('Show tool calls', "Display each tool the chatbot invokes — file reads, searches, edits and commands — inline as it works, so you can follow exactly what it's doing behind the scenes.", switchTag, 'toggle-tool-calls', (x) => x.showToolCalls, (x, c) => {
     x.showToolCalls = readSwitchChecked(c.event);
 }))}
@@ -211,6 +259,7 @@ const chatBotSettingsTemplate = (switchTag, buttonTag) => html `
   ${when((x) => { var _a; return ((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.showAgentSwitchIndicator) != null; }, chatBotToggleRow('Show delegation', 'Show in the chat window when tasks are delegated to different agents.', switchTag, 'toggle-agent-switch', (x) => x.showAgentSwitchIndicator, (x, c) => {
     x.showAgentSwitchIndicator = readSwitchChecked(c.event);
 }))}
+  ${settingsToggleRow('Show timestamps', 'Show when each message was sent, next to the sender name. Screen readers announce the full date in either visible mode.', 'toggle-timestamps', timestampModePickerTemplate(segmentedControlTag, segmentedItemTag))}
   ${when((x) => x.persistenceToggleable, chatBotToggleRow('Remember chat', 'Save this conversation so it can be restored after a page refresh. Turning this off deletes the saved copy.', switchTag, 'toggle-remember-chat', (x) => x.persistenceActive, (x, c) => {
     x.setPersistenceEnabled(readSwitchChecked(c.event));
 }))}
@@ -513,6 +562,171 @@ const costSessionHistoryTemplate = (iconTag, buttonTag) => html `
       </div>
     `)}
 `;
+/**
+ * The settings "Agent log" section: the Download / Send row, the always-present status
+ * live region, and the Send button's compose box. Exported (like
+ * `settingsUsageMetersTemplate`) so `agent-log-section.template.test.ts` can render it on
+ * an unconnected element and pin what the getters alone cannot show — that the `when`s,
+ * `?disabled`s and part tokens are actually wired to them.
+ */
+export const agentLogSectionTemplate = (buttonTag, textareaTag) => html `
+  ${when((x) => x.settingsAgentLogSectionVisible, html `
+      <section class="settings-modal-section" part="settings-section-agent-log">
+        <div class="settings-modal-section-body">
+          <!--
+                Row and compose box share a wrapper so the box can drop straight under the
+                row (full width, no divider between them) while the row keeps its layout.
+              -->
+          <div class="agent-log-block" part="agent-log-block">
+            ${settingsToggleRow('Agent log', (x) => x.debugLogRowDescription, 
+// The helper appends "-row", so this renders as
+// part="download-agent-log-row agent-log-row": the original token stays
+// for hosts already styling it, and `agent-log-row` names what the row
+// now is — the container of both actions. Pinned in
+// agent-log-section.template.test.ts.
+'download-agent-log-row agent-log', html `
+                <div class="agent-log-actions" part="agent-log-actions">
+                  ${when((x) => { var _a; return ((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.allowDebugDownload) === true; }, html `
+                        <${buttonTag}
+                          part="download-button"
+                          appearance="outline"
+                          ?disabled=${(x) => x.downloadingDebugLog}
+                          @click=${(x) => x.downloadDebugLog()}
+                        >
+                          ${when((x) => x.downloadingDebugLog, html `
+                              <span
+                                class="download-spinner"
+                                part="download-spinner"
+                                aria-hidden="true"
+                              ></span>
+                            `)}
+                          ${(x) => (x.downloadingDebugLog ? 'Downloading…' : 'Download')}
+                        </${buttonTag}>
+                      `)}
+                  ${when((x) => { var _a; return ((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.debugLogSubmit) != null; }, html `
+                        <${buttonTag}
+                          part="submit-log-button"
+                          appearance="outline"
+                          ?disabled=${(x) => x.submittingDebugLog || x.debugLogComposeOpen}
+                          aria-expanded=${(x) => x.debugLogNoteConfig ? String(x.debugLogComposeOpen) : null}
+                          @click=${(x) => x.openDebugLogCompose()}
+                        >
+                          ${when((x) => x.submittingDebugLog && !x.debugLogComposeOpen, html `
+                              <span
+                                class="download-spinner"
+                                part="download-spinner"
+                                aria-hidden="true"
+                              ></span>
+                            `)}
+                          ${(x) => x.debugLogSubmitButtonLabel}
+                        </${buttonTag}>
+                      `)}
+                </div>
+              `, 'row-centered')}
+            <!--
+                  Present whenever Send is configured (not gated on the compose box) so a live region exists
+                  BEFORE an outcome lands in it — one that appears together with its text is
+                  not announced — and so a note-less (note: false) host, whose only visible change is
+                  the button label, is announced too.
+                -->
+            ${when((x) => { var _a; return ((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.debugLogSubmit) != null; }, html `
+                <span
+                  class="visually-hidden"
+                  part="agent-log-status"
+                  role="status"
+                  aria-live="polite"
+                >
+                  ${(x) => x.debugLogSubmitAnnouncement}
+                </span>
+              `)}
+            ${when((x) => x.debugLogComposeOpen && x.debugLogNoteConfig !== null, html `
+                  <!--
+                    Keys are handled on the wrapper so they mean the same from every control:
+                    Escape cancels the box (and does not reach the dialog, which would close
+                    the whole modal and lose the note) whether focus is on the note, Cancel or
+                    Send; Enter submits only from the note, and only when a submit would
+                    actually go — otherwise the key keeps its default so it is not simply dead.
+                  -->
+                  <div
+                    class="agent-log-compose"
+                    part="agent-log-compose"
+                    @keydown=${(x, c) => {
+    const e = c.event;
+    if (e.key === 'Escape') {
+        x.cancelDebugLogCompose();
+        return false;
+    }
+    if (e.key === 'Enter' &&
+        !e.shiftKey &&
+        e.target === x.debugLogNoteEl &&
+        !x.debugLogSendDisabled) {
+        void x.submitDebugLog();
+        return false;
+    }
+    return true;
+}}
+                  >
+                    <${textareaTag}
+                      ${ref('debugLogNoteEl')}
+                      class="agent-log-note"
+                      part="agent-log-note"
+                      rows="3"
+                      resize="vertical"
+                      aria-label=${(x) => x.debugLogNoteAriaLabel}
+                      placeholder=${(x) => { var _a; return (_a = x.debugLogNoteConfig) === null || _a === void 0 ? void 0 : _a.placeholder; }}
+                      maxlength=${(x) => { var _a; return (_a = x.debugLogNoteConfig) === null || _a === void 0 ? void 0 : _a.maxLength; }}
+                      :value=${(x) => x.debugLogNote}
+                      ?disabled=${(x) => x.submittingDebugLog}
+                      @input=${(x, c) => x.noteDebugLogInput(c.event.target.value)}
+                    ></${textareaTag}>
+                    <div class="agent-log-compose-footer">
+                      <!--
+                        Visual hint only (aria-hidden): a live counter would be announced on
+                        every keystroke, and an IDREF from the text-area cannot reach across
+                        its shadow boundary. AT gets the cap from the note's static aria-label,
+                        the remaining count near the cap and every outcome from the row's
+                        status region.
+                      -->
+                      <span
+                        class="agent-log-compose-hint ${(x) => x.debugLogSubmitResult === 'error' ? 'is-error' : ''}"
+                        part="agent-log-compose-hint"
+                        aria-hidden="true"
+                      >
+                        ${(x) => x.debugLogComposeHint}
+                      </span>
+                      <div class="agent-log-actions">
+                        <${buttonTag}
+                          part="agent-log-cancel-button"
+                          appearance="outline"
+                          ?disabled=${(x) => x.submittingDebugLog}
+                          @click=${(x) => x.cancelDebugLogCompose()}
+                        >
+                          Cancel
+                        </${buttonTag}>
+                        <${buttonTag}
+                          part="agent-log-send-button"
+                          appearance="accent"
+                          ?disabled=${(x) => x.debugLogSendDisabled}
+                          @click=${(x) => x.submitDebugLog()}
+                        >
+                          ${when((x) => x.submittingDebugLog, html `
+                              <span
+                                class="download-spinner"
+                                part="download-spinner"
+                                aria-hidden="true"
+                              ></span>
+                            `)}
+                          ${(x) => (x.submittingDebugLog ? 'Sending…' : x.debugLogSubmitLabel)}
+                        </${buttonTag}>
+                      </div>
+                    </div>
+                  </div>
+                `)}
+          </div>
+        </div>
+      </section>
+    `)}
+`;
 /**
  * Modal shell for assistant settings — Configuration and Usage tabs, section slots for
  * app-specific UI, and built-in chat-bot toggles.
@@ -523,9 +737,12 @@ export const SettingsModalTemplate = (designSystemPrefix) => {
     const switchTag = `${designSystemPrefix}-switch`;
     const iconTag = `${designSystemPrefix}-icon`;
     const progressTag = `${designSystemPrefix}-progress`;
+    const textareaTag = `${designSystemPrefix}-text-area`;
     const tabsTag = `${designSystemPrefix}-tabs`;
     const tabTag = `${designSystemPrefix}-tab`;
     const tabPanelTag = `${designSystemPrefix}-tab-panel`;
+    const segmentedControlTag = `${designSystemPrefix}-segmented-control`;
+    const segmentedItemTag = `${designSystemPrefix}-segmented-item`;
     const settingsTabPanel = html `
     <${tabPanelTag}
       slot="tabpanel"
@@ -551,29 +768,7 @@ export const SettingsModalTemplate = (designSystemPrefix) => {
         with the assistant's other sections rather than trailing the host's — where, now that the
         host section carries no heading of its own, it read as one more of the host's settings.
       -->
-      ${when((x) => { var _a; return ((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.allowDebugDownload) === true; }, html `
-          <section class="settings-modal-section" part="settings-section-agent-log">
-            <div class="settings-modal-section-body">
-              ${settingsToggleRow('Download agent log', "Export a structured debug timeline of this session's agent activity.", 'download-agent-log', html `
-                  <${buttonTag}
-                    part="download-button"
-                    appearance="outline"
-                    ?disabled=${(x) => x.downloadingDebugLog}
-                    @click=${(x) => x.downloadDebugLog()}
-                  >
-                    ${when((x) => x.downloadingDebugLog, html `
-                        <span
-                          class="download-spinner"
-                          part="download-spinner"
-                          aria-hidden="true"
-                        ></span>
-                      `)}
-                    ${(x) => (x.downloadingDebugLog ? 'Downloading…' : 'Download')}
-                  </${buttonTag}>
-                `, 'row-centered')}
-            </div>
-          </section>
-        `)}
+      ${agentLogSectionTemplate(buttonTag, textareaTag)}
       <!--
         No heading here, by design. This section belongs to the host: only it knows what its
         settings are called, so the assistant supplies neither text nor icon and the host titles
@@ -595,7 +790,7 @@ export const SettingsModalTemplate = (designSystemPrefix) => {
         </h3>
         <p class="settings-modal-section-note">These options only control what you see in the chat window and do not control model behaviour.</p>
         <div class="settings-modal-section-body">
-          ${chatBotSettingsTemplate(switchTag, buttonTag)}
+          ${chatBotSettingsTemplate(switchTag, buttonTag, segmentedControlTag, segmentedItemTag)}
         </div>
       </section>
       </div>