@design.estate/dees-catalog 4.11.1 → 5.0.0

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

@@ -0,0 +1,557 @@
+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');
+
+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 = '';
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        min-width: 0;
+        height: 100%;
+        font-family: var(--dees-font-family);
+        color: var(--dees-color-text-primary);
+      }
+
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+      }
+
+      .section {
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+      }
+
+      .section:last-child {
+        border-bottom: 0;
+      }
+
+      .sectionHeading {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        margin-bottom: var(--dees-spacing-sm);
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 650;
+      }
+
+      .sectionHeading dees-icon {
+        color: var(--dees-color-text-secondary);
+      }
+
+      .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 {
+    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 renderTasks(): TemplateResult {
+    return html`
+      <section class="section tasksSection">
+        <dees-harness-todos heading="Tasks" .todos=${this.todos}></dees-harness-todos>
+      </section>
+    `;
+  }
+
+  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 html`
+      <section class="section metricsSection">
+        <div class="sectionHeading">
+          <dees-icon icon="lucide:Gauge" iconSize="13"></dees-icon>
+          <span>Tokens</span>
+        </div>
+        <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>
+      </section>
+    `;
+  }
+
+  private renderScratchpad(): TemplateResult {
+    const scratchpad = this.scratchpad!;
+    const updatedBy = scratchpad.updatedBy === 'intelligence' ? 'Session Intelligence' : 'you';
+    return html`
+      <section class="section scratchpadSection">
+        <div class="sectionHeading">
+          <dees-icon icon="lucide:NotebookPen" iconSize="13"></dees-icon>
+          <span>Session Scratchpad</span>
+        </div>
+        <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>
+        <div class="editorMeta">
+          Revision ${scratchpad.revision}${scratchpad.updatedAt
+            ? ` · updated by ${updatedBy} ${new Date(scratchpad.updatedAt).toLocaleString()}`
+            : ''}
+        </div>
+        ${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="actions">
+          <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>
+      </section>
+    `;
+  }
+
+  private renderIntelligence(): TemplateResult {
+    return html`
+      <section class="section intelligenceSection">
+        <div class="sectionHeading">
+          <dees-icon icon="lucide:Sparkles" iconSize="13"></dees-icon>
+          <span>Session Intelligence</span>
+        </div>
+        ${this.intelligenceExchanges.length ? html`
+          <div class="exchangeList" role="log" aria-live="polite">
+            ${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>`}
+        <textarea
+          class="intelligenceInput"
+          aria-label="Ask Session Intelligence"
+          placeholder="Ask a parallel question…"
+          maxlength="8192"
+          .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="hint">Runs separately from the main session. Ctrl/⌘ + Enter to ask.</div>
+        ${this.intelligenceError ? html`<div class="error" role="alert">${this.intelligenceError}</div>` : ''}
+        <div class="actions">
+          <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>
+      </section>
+    `;
+  }
+
+  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 = '';
+  };
+}

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

@@ -0,0 +1 @@
+export * from './dees-harness-session-sidebar.js';

package/ts_web/elements/00group-harness/harness.markdown.ts

@@ -127,12 +127,14 @@ export const markdownStyles: CSSResult = css`
   .markdown-body table {
     margin: var(--dees-spacing-sm) 0;
     border-collapse: collapse;
+    color: var(--dees-color-text-primary);
     font-size: 0.95em;
   }
   .markdown-body th,
   .markdown-body td {
     padding: 4px 10px;
     border: 1px solid var(--dees-color-border-default);
+    color: var(--dees-color-text-primary);
     text-align: left;
   }
   .markdown-body th {

package/ts_web/elements/00group-harness/harness.styles.ts

@@ -17,6 +17,17 @@ export const harnessCardStyles: CSSResult = css`
   .harness-card.status-running,
   .harness-card.status-pending {
     border-left-color: var(--dees-color-accent-primary);
+    background:
+      linear-gradient(
+        105deg,
+        transparent 40%,
+        color-mix(in srgb, var(--dees-color-accent-primary) 6%, transparent) 45%,
+        color-mix(in srgb, var(--dees-color-accent-primary) 20%, transparent) 50%,
+        color-mix(in srgb, var(--dees-color-accent-primary) 6%, transparent) 55%,
+        transparent 60%
+      ) 100% 0 / 250% 100% no-repeat,
+      var(--dees-color-bg-secondary);
+    animation: harness-card-running-scan 2s linear infinite;
   }
   .harness-card.status-completed {
     border-left-color: var(--dees-color-accent-success);
@@ -27,6 +38,23 @@ export const harnessCardStyles: CSSResult = css`
   .harness-card.destructive {
     border-left-color: var(--dees-color-accent-error);
   }
+
+  @keyframes harness-card-running-scan {
+    from { background-position: 100% 0; }
+    to { background-position: 0 0; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .harness-card.status-running,
+    .harness-card.status-pending {
+      animation: none;
+      background: color-mix(
+        in srgb,
+        var(--dees-color-accent-primary) 8%,
+        var(--dees-color-bg-secondary)
+      );
+    }
+  }
 `;
 
 export const harnessPillStyles: CSSResult = css`

package/ts_web/elements/00group-harness/index.ts

@@ -17,6 +17,7 @@ export * from './dees-harness-question-card/index.js';
 export * from './dees-harness-message-list/index.js';
 export * from './dees-harness-reasoning/index.js';
 export * from './dees-harness-session-list/index.js';
+export * from './dees-harness-session-sidebar/index.js';
 export * from './dees-terminal-view/index.js';
 export * from './dees-harness-status/index.js';
 export * from './dees-harness-todos/index.js';

package/ts_web/elements/00group-harness/interfaces.ts

@@ -43,6 +43,54 @@ export interface IHarnessUsage {
   cacheWriteTokens?: number;
 }
 
+/** Session-level token facts. Unknown metrics stay undefined. */
+export interface IHarnessSessionMetrics {
+  /** Cumulative token usage across the complete session. */
+  lifetimeUsedTokens?: number;
+  /** Number of completed context compactions. */
+  compactionCount?: number;
+  /** Context-token total immediately before the newest compaction. */
+  tokensBeforeLatestCompaction?: number;
+  /** Context window of the model that produced currentContextTokens. */
+  maxContextTokens?: number;
+  /** Current active context-token total. */
+  currentContextTokens?: number;
+}
+
+export type THarnessScratchpadUpdater = 'user' | 'intelligence';
+
+export interface IHarnessScratchpad {
+  /** Stable session-scoped identity; a changed id resets local editor state. */
+  id: string;
+  text: string;
+  /** Monotonic persistence revision used for optimistic concurrency. */
+  revision: number;
+  updatedAt?: number;
+  updatedBy?: THarnessScratchpadUpdater;
+}
+
+export interface IHarnessScratchpadSaveDetail {
+  text: string;
+  expectedRevision: number;
+}
+
+export type THarnessIntelligenceStatus = 'running' | 'completed' | 'error';
+
+export interface IHarnessIntelligenceExchange {
+  id: string;
+  question: string;
+  status: THarnessIntelligenceStatus;
+  answer?: string;
+  error?: string;
+  model?: string;
+  createdAt: number;
+  completedAt?: number;
+}
+
+export interface IHarnessSessionIntelligenceAskDetail {
+  question: string;
+}
+
 export interface IHarnessMessage {
   /** stable id — used as the keyed-repeat key; never reuse across messages */
   id: string;