@design.estate/dees-catalog 4.12.0 → 6.0.0

package/ts_web/elements/00group-harness/dees-harness-session-sidebar/dees-harness-session-sidebar.ts

@@ -0,0 +1,802 @@
+import { demoFunc } from './dees-harness-session-sidebar.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+  directives,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type {
+  IHarnessIntelligenceExchange,
+  IHarnessScratchpad,
+  IHarnessScratchpadSaveDetail,
+  IHarnessSessionIntelligenceAskDetail,
+  IHarnessSessionMetrics,
+  IHarnessTodoItem,
+} from '../interfaces.js';
+import '../dees-harness-todos/dees-harness-todos.js';
+import '../../00group-button/dees-button/dees-button.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+const { repeat } = directives;
+
+const formatTokenCount = (valueArg: number): string => valueArg.toLocaleString('en-US');
+type TSessionSidebarSection = 'tasks' | 'metrics' | 'scratchpad' | 'intelligence';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-session-sidebar': DeesHarnessSessionSidebar;
+  }
+}
+
+/**
+ * Generic session context sidebar. It renders host-owned state and emits
+ * mutations, but never loads, persists, or executes session data itself.
+ */
+@customElement('dees-harness-session-sidebar')
+export class DeesHarnessSessionSidebar extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor todos: IHarnessTodoItem[] = [];
+
+  @property({ type: Boolean })
+  accessor showTasks: boolean = true;
+
+  @property({ attribute: false })
+  accessor metrics: IHarnessSessionMetrics = {};
+
+  @property({ attribute: false })
+  accessor scratchpad: IHarnessScratchpad | undefined = undefined;
+
+  @property({ type: Boolean })
+  accessor scratchpadBusy: boolean = false;
+
+  @property()
+  accessor scratchpadError: string = '';
+
+  @property({ type: Boolean })
+  accessor intelligenceEnabled: boolean = false;
+
+  @property({ attribute: false })
+  accessor intelligenceExchanges: IHarnessIntelligenceExchange[] = [];
+
+  @property({ type: Boolean })
+  accessor intelligenceBusy: boolean = false;
+
+  @property()
+  accessor intelligenceError: string = '';
+
+  @property({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @state()
+  private accessor scratchpadDraft: string = '';
+
+  @state()
+  private accessor scratchpadDraftRevision: number = 0;
+
+  @state()
+  private accessor scratchpadDirty: boolean = false;
+
+  @state()
+  private accessor scratchpadStale: boolean = false;
+
+  @state()
+  private accessor intelligenceQuestion: string = '';
+
+  @state()
+  private accessor expandedSection: TSessionSidebarSection | undefined = undefined;
+
+  private sectionStateInitialized = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+        font-family: var(--dees-font-family);
+        color: var(--dees-color-text-primary);
+      }
+
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .section {
+        display: flex;
+        flex: 0 0 auto;
+        flex-direction: column;
+        min-height: 0;
+        overflow: hidden;
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+      }
+
+      .section.expanded {
+        flex: 1 1 0;
+      }
+
+      .section:last-child {
+        border-bottom: 0;
+      }
+
+      .sectionHeading {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        width: 100%;
+        min-height: 30px;
+        margin: 0;
+        padding: 6px var(--dees-spacing-md) 6px var(--dees-spacing-xs);
+        border: 0;
+        background: var(--dees-color-bg-secondary);
+        color: var(--dees-color-text-primary);
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 650;
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .sectionHeading:hover {
+        background: var(--dees-color-badge-default-bg);
+      }
+
+      .sectionHeading:focus-visible {
+        position: relative;
+        z-index: 1;
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: -2px;
+      }
+
+      .sectionHeading dees-icon {
+        flex: 0 0 auto;
+        color: var(--dees-color-text-secondary);
+      }
+
+      .sectionHeadingText {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .sectionSummary {
+        flex: 0 0 auto;
+        margin-left: auto;
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+        font-variant-numeric: tabular-nums;
+        font-weight: 500;
+      }
+
+      .sectionContent {
+        flex: 1;
+        min-height: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      .sectionContent[hidden] {
+        display: none;
+      }
+
+      .sectionContent dees-harness-todos {
+        min-width: 0;
+      }
+
+      .scratchpadSection .sectionContent:not([hidden]) {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0;
+      }
+
+      .scratchpadSection textarea {
+        flex: 1;
+        min-height: 0;
+        resize: none;
+        overflow-y: auto;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border: 0;
+        border-radius: 0;
+        background: color-mix(in srgb, var(--dees-color-bg-secondary) 92%, black);
+        color: var(--dees-color-text-secondary);
+      }
+
+      .scratchpadSection textarea:focus-visible {
+        border-color: transparent;
+        background: color-mix(in srgb, var(--dees-color-bg-secondary) 92%, black);
+        box-shadow: none;
+      }
+
+      .scratchpadSection .conflict,
+      .scratchpadSection .error {
+        margin-right: var(--dees-spacing-md);
+        margin-left: var(--dees-spacing-md);
+      }
+
+      .scratchpadFooter {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-xs) var(--dees-spacing-md) var(--dees-spacing-sm);
+        border-top: 0;
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--dees-color-bg-secondary) 92%, black),
+          var(--dees-color-bg-secondary)
+        );
+      }
+
+      .scratchpadFooter .editorMeta {
+        margin-top: 0;
+      }
+
+      .intelligenceSection .sectionContent:not([hidden]) {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0;
+      }
+
+      .intelligenceHistory {
+        flex: 1;
+        min-height: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      .intelligenceComposer {
+        flex: 0 0 auto;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md) var(--dees-spacing-md);
+        background: linear-gradient(
+          to bottom,
+          var(--dees-color-bg-primary),
+          var(--dees-color-bg-secondary)
+        );
+        box-shadow: var(--dees-shadow-up-sm);
+      }
+
+      .intelligenceComposer textarea {
+        min-height: 64px;
+        max-height: 160px;
+        resize: none;
+        padding: var(--dees-spacing-sm) 0;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        color: var(--dees-color-text-primary);
+        font-family: inherit;
+        font-size: var(--dees-font-control-size, 13px);
+      }
+
+      .intelligenceComposer textarea:focus-visible {
+        border-color: transparent;
+        box-shadow: none;
+        outline: 2px solid color-mix(in srgb, var(--dees-color-accent-primary) 55%, transparent);
+        outline-offset: 2px;
+      }
+
+      .intelligenceControls {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+      }
+
+      .intelligenceControls .hint {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .metricList {
+        display: grid;
+        gap: 6px;
+      }
+
+      .metricRow {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: var(--dees-spacing-md);
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+      }
+
+      .metricValue {
+        color: var(--dees-color-text-primary);
+        font-family: var(--dees-font-family-mono);
+        font-variant-numeric: tabular-nums;
+        text-align: right;
+      }
+
+      .contextProgress {
+        height: 4px;
+        margin-top: 2px;
+        overflow: hidden;
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-color-fill-secondary);
+      }
+
+      .contextProgressFill {
+        height: 100%;
+        border-radius: inherit;
+        background: var(--dees-color-accent-primary);
+        transition: width var(--dees-transition-default) var(--dees-ease-standard);
+      }
+
+      textarea {
+        box-sizing: border-box;
+        width: 100%;
+        min-height: 108px;
+        resize: vertical;
+        padding: var(--dees-spacing-sm);
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: var(--dees-radius-md);
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
+        font: var(--dees-font-caption1-size, 11px) / 1.5 var(--dees-font-family-mono);
+        outline: none;
+      }
+
+      textarea:focus-visible {
+        border-color: var(--dees-color-accent-primary);
+        box-shadow: 0 0 0 1px var(--dees-color-accent-primary);
+      }
+
+      textarea:disabled {
+        opacity: 0.62;
+        cursor: not-allowed;
+      }
+
+      .editorMeta,
+      .exchangeMeta,
+      .hint {
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+        line-height: 1.4;
+      }
+
+      .editorMeta {
+        margin-top: 5px;
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--dees-spacing-xs);
+        margin-top: var(--dees-spacing-sm);
+      }
+
+      .conflict,
+      .error {
+        margin-top: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
+        border-radius: var(--dees-radius-md);
+        font-size: var(--dees-font-caption1-size, 11px);
+        line-height: 1.4;
+      }
+
+      .conflict {
+        color: var(--dees-color-text-warning);
+        background: var(--dees-color-badge-warning-bg);
+      }
+
+      .error {
+        color: var(--dees-color-text-error);
+        background: var(--dees-color-badge-error-bg);
+      }
+
+      .exchangeList {
+        display: grid;
+        gap: var(--dees-spacing-sm);
+        margin-bottom: var(--dees-spacing-sm);
+      }
+
+      .exchange {
+        display: grid;
+        gap: 4px;
+        padding-left: var(--dees-spacing-sm);
+        border-left: 1px solid var(--dees-color-border-default);
+      }
+
+      .question,
+      .answer {
+        overflow-wrap: anywhere;
+        font-size: var(--dees-font-caption1-size, 11px);
+        line-height: 1.45;
+        white-space: pre-wrap;
+      }
+
+      .question {
+        color: var(--dees-color-text-secondary);
+      }
+
+      .answer {
+        color: var(--dees-color-text-primary);
+      }
+
+      .exchange.running .answer {
+        color: var(--dees-color-text-muted);
+      }
+
+      .exchange.error .answer {
+        color: var(--dees-color-text-error);
+      }
+
+      .empty {
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption1-size, 11px);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .contextProgressFill {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  protected willUpdate(changedPropertiesArg: Map<PropertyKey, unknown>): void {
+    const availableSections = this.availableSections;
+    if (!this.sectionStateInitialized && availableSections.length > 0) {
+      this.expandedSection = this.defaultExpandedSection;
+      this.sectionStateInitialized = true;
+    } else if (
+      this.expandedSection !== undefined
+      && !availableSections.includes(this.expandedSection)
+    ) {
+      this.expandedSection = this.defaultExpandedSection;
+    }
+    if (!changedPropertiesArg.has('scratchpad')) return;
+    const next = this.scratchpad;
+    if (!next) {
+      this.scratchpadDraft = '';
+      this.scratchpadDraftRevision = 0;
+      this.scratchpadDirty = false;
+      this.scratchpadStale = false;
+      return;
+    }
+    const previous = changedPropertiesArg.get('scratchpad') as IHarnessScratchpad | undefined;
+    if (!previous || previous.id !== next.id) {
+      this.acceptScratchpad(next);
+      return;
+    }
+    if (!this.scratchpadDirty || next.text === this.scratchpadDraft) {
+      this.acceptScratchpad(next);
+      return;
+    }
+    if (next.revision > this.scratchpadDraftRevision) this.scratchpadStale = true;
+  }
+
+  public get contextPercentage(): number | undefined {
+    const current = this.metrics.currentContextTokens;
+    const maximum = this.metrics.maxContextTokens;
+    if (current === undefined || maximum === undefined || maximum <= 0) return undefined;
+    return Math.min(100, Math.max(0, (current / maximum) * 100));
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="sidebar">
+        ${this.showTasks ? this.renderTasks() : ''}
+        ${this.hasMetrics ? this.renderMetrics() : ''}
+        ${this.scratchpad ? this.renderScratchpad() : ''}
+        ${this.intelligenceEnabled ? this.renderIntelligence() : ''}
+      </div>
+    `;
+  }
+
+  private get hasMetrics(): boolean {
+    return Object.values(this.metrics).some((value) => value !== undefined);
+  }
+
+  private get availableSections(): TSessionSidebarSection[] {
+    return [
+      ...(this.showTasks ? ['tasks' as const] : []),
+      ...(this.hasMetrics ? ['metrics' as const] : []),
+      ...(this.scratchpad ? ['scratchpad' as const] : []),
+      ...(this.intelligenceEnabled ? ['intelligence' as const] : []),
+    ];
+  }
+
+  private get defaultExpandedSection(): TSessionSidebarSection | undefined {
+    if (this.showTasks && this.todos.length > 0) return 'tasks';
+    if (this.hasMetrics) return 'metrics';
+    if (this.scratchpad) return 'scratchpad';
+    if (this.intelligenceEnabled) return 'intelligence';
+    return this.showTasks ? 'tasks' : undefined;
+  }
+
+  private renderSection(
+    idArg: TSessionSidebarSection,
+    labelArg: string,
+    iconArg: string,
+    contentArg: TemplateResult,
+    summaryArg = '',
+  ): TemplateResult {
+    const expanded = this.expandedSection === idArg;
+    const contentId = `harness-session-section-${idArg}`;
+    return html`
+      <section class=${`section ${idArg}Section ${expanded ? 'expanded' : ''}`}>
+        <button
+          class="sectionHeading"
+          type="button"
+          aria-expanded=${String(expanded)}
+          aria-controls=${contentId}
+          @click=${() => {
+            this.sectionStateInitialized = true;
+            this.expandedSection = expanded ? undefined : idArg;
+          }}
+        >
+          <dees-icon
+            icon=${expanded ? 'lucide:ChevronDown' : 'lucide:ChevronRight'}
+            iconSize="13"
+          ></dees-icon>
+          <dees-icon icon=${iconArg} iconSize="13"></dees-icon>
+          <span class="sectionHeadingText">${labelArg}</span>
+          ${summaryArg ? html`<span class="sectionSummary">${summaryArg}</span>` : ''}
+        </button>
+        <div id=${contentId} class="sectionContent" ?hidden=${!expanded}>
+          ${contentArg}
+        </div>
+      </section>
+    `;
+  }
+
+  private renderTasks(): TemplateResult {
+    const completed = this.todos.filter((todo) => todo.status === 'completed').length;
+    return this.renderSection(
+      'tasks',
+      'Tasks',
+      'lucide:ListChecks',
+      html`<dees-harness-todos .todos=${this.todos} .showProgress=${false}></dees-harness-todos>`,
+      this.todos.length > 0 ? `${completed}/${this.todos.length}` : '',
+    );
+  }
+
+  private renderMetrics(): TemplateResult {
+    const metrics = this.metrics;
+    const percentage = this.contextPercentage;
+    const rows: Array<[string, number | undefined]> = [
+      ['Lifetime used', metrics.lifetimeUsedTokens],
+      ['Compactions', metrics.compactionCount],
+      ['Before latest compaction', metrics.tokensBeforeLatestCompaction],
+      ['Context window', metrics.maxContextTokens],
+      ['Current context', metrics.currentContextTokens],
+    ];
+    return this.renderSection(
+      'metrics',
+      'Tokens',
+      'lucide:Gauge',
+      html`
+        <div class="metricList">
+          ${rows.map(([label, value]) => value === undefined ? '' : html`
+            <div class="metricRow">
+              <span>${label}</span>
+              <span class="metricValue">
+                ${formatTokenCount(value)}${label === 'Current context' && percentage !== undefined
+                  ? ` · ${Math.round(percentage)}%`
+                  : ''}
+              </span>
+            </div>
+          `)}
+          ${percentage === undefined ? '' : html`
+            <div
+              class="contextProgress"
+              role="progressbar"
+              aria-label="Current context window usage"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-valuenow=${String(Math.round(percentage))}
+            >
+              <div class="contextProgressFill" style=${`width: ${percentage}%`}></div>
+            </div>
+          `}
+        </div>
+      `,
+    );
+  }
+
+  private renderScratchpad(): TemplateResult {
+    const scratchpad = this.scratchpad!;
+    return this.renderSection(
+      'scratchpad',
+      'Session Scratchpad',
+      'lucide:NotebookPen',
+      html`
+        <textarea
+          aria-label="Session scratchpad"
+          maxlength="32768"
+          .value=${this.scratchpadDraft}
+          ?disabled=${this.disabled || this.scratchpadBusy}
+          @input=${(event: InputEvent) => {
+            this.scratchpadDraft = (event.currentTarget as HTMLTextAreaElement).value;
+            this.scratchpadDirty = this.scratchpadDraft !== scratchpad.text;
+          }}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+              event.preventDefault();
+              this.saveScratchpad();
+            }
+          }}
+        ></textarea>
+        ${this.scratchpadStale ? html`
+          <div class="conflict" role="status">
+            A newer revision arrived. Keep this draft on the latest revision or discard it.
+            <div class="actions">
+              <dees-button
+                size="sm"
+                type="ghost"
+                text="Discard draft"
+                @clicked=${this.discardScratchpadDraft}
+              ></dees-button>
+              <dees-button
+                size="sm"
+                type="outline"
+                text="Keep draft on latest"
+                @clicked=${this.rebaseScratchpadDraft}
+              ></dees-button>
+            </div>
+          </div>
+        ` : ''}
+        ${this.scratchpadError ? html`<div class="error" role="alert">${this.scratchpadError}</div>` : ''}
+        <div class="scratchpadFooter">
+          <span class="editorMeta">rev. ${scratchpad.revision}</span>
+          <dees-button
+            size="sm"
+            type="accent"
+            text="Save"
+            .status=${this.scratchpadBusy ? 'pending' : 'normal'}
+            ?disabled=${this.disabled || this.scratchpadBusy || !this.scratchpadDirty || this.scratchpadStale}
+            @clicked=${this.saveScratchpad}
+          ></dees-button>
+        </div>
+      `,
+    );
+  }
+
+  private renderIntelligence(): TemplateResult {
+    return this.renderSection(
+      'intelligence',
+      'Session Intelligence',
+      'lucide:Sparkles',
+      html`
+        <div class="intelligenceHistory" role="log" aria-live="polite">
+          ${this.intelligenceExchanges.length ? html`
+            <div class="exchangeList">
+              ${repeat(
+                this.intelligenceExchanges,
+                (exchange) => exchange.id,
+                (exchange) => this.renderExchange(exchange),
+              )}
+            </div>
+          ` : html`<div class="empty">Ask about this session without interrupting its main work.</div>`}
+        </div>
+        <div class="intelligenceComposer">
+          <textarea
+            class="intelligenceInput"
+            aria-label="Ask Session Intelligence"
+            placeholder="Ask a parallel question…"
+            maxlength="8192"
+            rows="2"
+            .value=${this.intelligenceQuestion}
+            ?disabled=${this.disabled || this.intelligenceBusy}
+            @input=${(event: InputEvent) => {
+              this.intelligenceQuestion = (event.currentTarget as HTMLTextAreaElement).value;
+            }}
+            @keydown=${(event: KeyboardEvent) => {
+              if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                this.askIntelligence();
+              }
+            }}
+          ></textarea>
+          <div class="intelligenceControls">
+            <span class="hint">Parallel session · Ctrl/⌘ + Enter</span>
+            <dees-button
+              size="sm"
+              type="accent"
+              text="Ask"
+              .status=${this.intelligenceBusy ? 'pending' : 'normal'}
+              ?disabled=${this.disabled || this.intelligenceBusy || !this.intelligenceQuestion.trim()}
+              @clicked=${this.askIntelligence}
+            ></dees-button>
+          </div>
+          ${this.intelligenceError ? html`<div class="error" role="alert">${this.intelligenceError}</div>` : ''}
+        </div>
+      `,
+    );
+  }
+
+  private renderExchange(exchangeArg: IHarnessIntelligenceExchange): TemplateResult {
+    const answer = exchangeArg.status === 'running'
+      ? 'Thinking in parallel…'
+      : exchangeArg.status === 'error'
+        ? exchangeArg.error || 'Session Intelligence failed.'
+        : exchangeArg.answer || '';
+    return html`
+      <article class="exchange ${exchangeArg.status}">
+        <div class="question">${exchangeArg.question}</div>
+        <div class="answer">${answer}</div>
+        ${exchangeArg.model
+          ? html`<div class="exchangeMeta">${exchangeArg.model}</div>`
+          : ''}
+      </article>
+    `;
+  }
+
+  private acceptScratchpad(scratchpadArg: IHarnessScratchpad): void {
+    this.scratchpadDraft = scratchpadArg.text;
+    this.scratchpadDraftRevision = scratchpadArg.revision;
+    this.scratchpadDirty = false;
+    this.scratchpadStale = false;
+  }
+
+  private readonly discardScratchpadDraft = (): void => {
+    if (this.scratchpad) this.acceptScratchpad(this.scratchpad);
+  };
+
+  private readonly rebaseScratchpadDraft = (): void => {
+    if (!this.scratchpad) return;
+    this.scratchpadDraftRevision = this.scratchpad.revision;
+    this.scratchpadStale = false;
+    this.scratchpadDirty = this.scratchpadDraft !== this.scratchpad.text;
+  };
+
+  private readonly saveScratchpad = (): void => {
+    if (
+      !this.scratchpad
+      || !this.scratchpadDirty
+      || this.scratchpadStale
+      || this.disabled
+      || this.scratchpadBusy
+    ) return;
+    const detail: IHarnessScratchpadSaveDetail = {
+      text: this.scratchpadDraft,
+      expectedRevision: this.scratchpadDraftRevision,
+    };
+    this.dispatchEvent(new CustomEvent('harness-scratchpad-save', {
+      detail,
+      bubbles: true,
+      composed: true,
+    }));
+  };
+
+  private readonly askIntelligence = (): void => {
+    const question = this.intelligenceQuestion.trim();
+    if (!question || this.disabled || this.intelligenceBusy) return;
+    const detail: IHarnessSessionIntelligenceAskDetail = { question };
+    this.dispatchEvent(new CustomEvent('harness-session-intelligence-ask', {
+      detail,
+      bubbles: true,
+      composed: true,
+    }));
+    this.intelligenceQuestion = '';
+  };
+}