@design.estate/dees-catalog 4.12.0 → 5.0.0

package/ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.ts

@@ -6,6 +6,7 @@ import {
   customElement,
   type TemplateResult,
   property,
+  state,
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
@@ -14,6 +15,9 @@ import type {
   IHarnessMessage,
   IHarnessPermissionRequest,
   IHarnessQuestionRequest,
+  IHarnessIntelligenceExchange,
+  IHarnessScratchpad,
+  IHarnessSessionMetrics,
   IHarnessStatus,
   IHarnessTodoItem,
   IHarnessUsage,
@@ -24,6 +28,7 @@ import { DeesHarnessToolRegistry } from '../toolregistry.js';
 import { DeesHarnessMessageList } from '../dees-harness-message-list/dees-harness-message-list.js';
 import { DeesHarnessComposer } from '../dees-harness-composer/dees-harness-composer.js';
 import '../dees-harness-todos/dees-harness-todos.js';
+import '../dees-harness-session-sidebar/dees-harness-session-sidebar.js';
 import '../dees-harness-usage/dees-harness-usage.js';
 import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
@@ -40,8 +45,7 @@ declare global {
  * pinned permission queue, status line, and composer. Owns no business
  * logic — consumers feed `.messages`/`.permissions`/`.status` (and stream
  * through `applyDelta()`), and listen for the bubbling harness-* events
- * from the children plus `harness-new-session` / `harness-open-sessions`
- * from the toolbar.
+ * from the children plus `harness-toggle-sidebar` from the toolbar.
  */
 @customElement('dees-harness-chat')
 export class DeesHarnessChat extends DeesElement {
@@ -75,6 +79,36 @@ export class DeesHarnessChat extends DeesElement {
   @property({ type: Boolean })
   accessor showTodosPanel: boolean = true;
 
+  @property({ type: Boolean })
+  accessor showSessionSidebar: boolean = true;
+
+  @property({ attribute: false })
+  accessor sessionMetrics: IHarnessSessionMetrics = {};
+
+  @property({ attribute: false })
+  accessor scratchpad: IHarnessScratchpad | undefined = undefined;
+
+  @property({ type: Boolean })
+  accessor scratchpadBusy: boolean = false;
+
+  @property()
+  accessor scratchpadError: string = '';
+
+  @property({ type: Boolean })
+  accessor sessionIntelligenceEnabled: boolean = false;
+
+  @property({ attribute: false })
+  accessor intelligenceExchanges: IHarnessIntelligenceExchange[] = [];
+
+  @property({ type: Boolean })
+  accessor intelligenceBusy: boolean = false;
+
+  @property()
+  accessor intelligenceError: string = '';
+
+  @state()
+  private accessor sessionSidebarOpen: boolean = false;
+
   @property()
   accessor heading: string = '';
 
@@ -144,6 +178,7 @@ export class DeesHarnessChat extends DeesElement {
       }
 
       .chatBody {
+        position: relative;
         flex: 1;
         min-height: 0;
         min-width: 0;
@@ -156,7 +191,14 @@ export class DeesHarnessChat extends DeesElement {
         min-width: 0;
       }
 
-      .todosPanel {
+      .transcriptColumn {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .sessionPanel {
         flex: 0 0 232px;
         min-width: 0;
         overflow-y: auto;
@@ -167,11 +209,95 @@ export class DeesHarnessChat extends DeesElement {
         background: var(--dees-color-bg-secondary);
       }
 
-      /* narrow hosts (e.g. a sidebar chat) drop the panel; todo tool cards
-         in the transcript still carry the same information */
-      @container (max-width: 520px) {
-        .todosPanel {
-          display: none;
+      .sessionPanelClose,
+      .sessionPanelToggle,
+      .sessionPanelBackdrop {
+        display: none;
+      }
+
+      .sessionPanelToggle {
+        box-sizing: border-box;
+        width: var(--dees-control-height-lg);
+        height: var(--dees-control-height-lg);
+        padding: 0;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid transparent;
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        background: transparent;
+        color: var(--dees-color-text-primary);
+        cursor: pointer;
+      }
+
+      .sessionPanelToggle:hover {
+        background: var(--dees-color-badge-default-bg);
+      }
+
+      .sessionPanelToggle:focus-visible {
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: 2px;
+      }
+
+      /* Narrow hosts keep every session section reachable in an overlay.
+         Todo tool cards remain a second transcript-level representation. */
+      @container (max-width: 680px) {
+        .sessionPanel {
+          position: absolute;
+          inset: 0 0 0 auto;
+          width: min(320px, calc(100% - 36px));
+          max-width: none;
+          padding-top: 42px;
+          border-left-color: var(--dees-color-border-default);
+          box-shadow: var(--dees-shadow-lg);
+          visibility: hidden;
+          transform: translateX(100%);
+          transition:
+            transform var(--dees-transition-default) var(--dees-ease-out),
+            visibility 0s linear var(--dees-transition-default);
+        }
+
+        .sessionPanel.open {
+          visibility: visible;
+          transform: translateX(0);
+          transition-delay: 0s;
+        }
+
+        .sessionPanelClose {
+          position: absolute;
+          top: 6px;
+          right: 8px;
+          display: block;
+        }
+
+        .sessionPanelToggle {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          display: flex;
+        }
+
+        .sessionPanelBackdrop {
+          position: absolute;
+          inset: 0;
+          display: block;
+          border: 0;
+          background: color-mix(in srgb, var(--dees-color-bg-primary) 58%, transparent);
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity var(--dees-transition-default) var(--dees-ease-standard);
+        }
+
+        .sessionPanelBackdrop.open {
+          opacity: 1;
+          pointer-events: auto;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .sessionPanel,
+          .sessionPanelBackdrop {
+            transition: none;
+          }
         }
       }
 
@@ -219,7 +345,7 @@ export class DeesHarnessChat extends DeesElement {
         flex: 0 0 auto;
       }
 
-      .chatBody dees-harness-message-list {
+      .transcriptColumn dees-harness-message-list {
         flex: 1;
         min-height: 0;
       }
@@ -232,6 +358,36 @@ export class DeesHarnessChat extends DeesElement {
         position: relative;
         z-index: 1;
       }
+
+      .composerContextBar {
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        padding: 5px var(--dees-spacing-md);
+        background: var(--dees-color-bg-secondary);
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+        line-height: 1.3;
+      }
+
+      .composerContextBar dees-icon {
+        flex: 0 0 auto;
+        color: var(--dees-color-text-secondary);
+      }
+
+      .composerContextLabel {
+        flex: 0 0 auto;
+      }
+
+      .composerContextTitle {
+        min-width: 0;
+        overflow: hidden;
+        color: var(--dees-color-text-secondary);
+        font-weight: 600;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     `,
   ];
 
@@ -269,6 +425,16 @@ export class DeesHarnessChat extends DeesElement {
     return [];
   }
 
+  public get hasSessionSidebar(): boolean {
+    if (!this.showSessionSidebar) return false;
+    return (
+      (this.showTodosPanel && this.effectiveTodos.length > 0)
+      || Object.values(this.sessionMetrics).some((value) => value !== undefined)
+      || this.scratchpad !== undefined
+      || this.sessionIntelligenceEnabled
+    );
+  }
+
   private get listElement(): DeesHarnessMessageList | undefined {
     const element = this.shadowRoot?.querySelector('dees-harness-message-list');
     return element instanceof DeesHarnessMessageList ? element : undefined;
@@ -279,26 +445,113 @@ export class DeesHarnessChat extends DeesElement {
     return element instanceof DeesHarnessComposer ? element : undefined;
   }
 
+  private readonly toggleSessionSidebar = (): void => {
+    if (this.sessionSidebarOpen) {
+      void this.closeSessionSidebar();
+      return;
+    }
+    void this.openSessionSidebar();
+  };
+
+  private async openSessionSidebar(): Promise<void> {
+    this.sessionSidebarOpen = true;
+    await this.updateComplete;
+    const panel = this.shadowRoot?.querySelector<HTMLElement>('.sessionPanel');
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    panel?.focus();
+  }
+
+  private async closeSessionSidebar(): Promise<void> {
+    this.sessionSidebarOpen = false;
+    await this.updateComplete;
+    const toggleButton = this.shadowRoot?.querySelector<HTMLButtonElement>('.sessionPanelToggle');
+    toggleButton?.focus();
+  }
+
   // ----------------------------------------------------------------- render
 
   public render(): TemplateResult {
     return html`
       ${this.showToolbar ? this.renderToolbar() : ''}
       <div class="chatBody">
-        <dees-harness-message-list
-          .messages=${this.messages}
-          .permissions=${this.permissions}
-          .permissionsBusy=${this.disabled}
-          .questions=${this.questions}
-          .status=${this.status}
-          .showRoles=${this.showRoles}
-          .showTimestamps=${this.showTimestamps}
-          .toolRegistry=${this.toolRegistry}
-        ></dees-harness-message-list>
-        ${this.showTodosPanel && this.effectiveTodos.length
+        <div class="transcriptColumn">
+          <dees-harness-message-list
+            .messages=${this.messages}
+            .permissions=${this.permissions}
+            .permissionsBusy=${this.disabled}
+            .questions=${this.questions}
+            .status=${this.status}
+            .showRoles=${this.showRoles}
+            .showTimestamps=${this.showTimestamps}
+            .toolRegistry=${this.toolRegistry}
+          ></dees-harness-message-list>
+          ${this.heading
+            ? html`
+                <div class="composerContextBar" title=${`Replying to ${this.heading}`}>
+                  <dees-icon icon="lucide:MessageSquare" iconSize="11"></dees-icon>
+                  <span class="composerContextLabel">Replying to</span>
+                  <span class="composerContextTitle">${this.heading}</span>
+                </div>
+              `
+            : ''}
+          ${this.hasSessionSidebar ? html`
+            <button
+              class="sessionPanelToggle"
+              type="button"
+              aria-label="Session details"
+              title="Session details"
+              aria-expanded=${String(this.sessionSidebarOpen)}
+              aria-controls="harness-session-panel"
+              @click=${this.toggleSessionSidebar}
+            >
+              <dees-icon icon="lucide:PanelRight" iconSize="16"></dees-icon>
+            </button>
+          ` : ''}
+        </div>
+        ${this.hasSessionSidebar
           ? html`
-              <aside class="todosPanel">
-                <dees-harness-todos heading="Tasks" .todos=${this.effectiveTodos}></dees-harness-todos>
+              <button
+                class=${`sessionPanelBackdrop ${this.sessionSidebarOpen ? 'open' : ''}`}
+                aria-label="Close session details"
+                aria-hidden=${String(!this.sessionSidebarOpen)}
+                ?inert=${!this.sessionSidebarOpen}
+                tabindex=${this.sessionSidebarOpen ? '0' : '-1'}
+                @click=${() => void this.closeSessionSidebar()}
+              ></button>
+              <aside
+                id="harness-session-panel"
+                class=${`todosPanel sessionPanel ${this.sessionSidebarOpen ? 'open' : ''}`}
+                aria-label="Session details"
+                tabindex="-1"
+                @keydown=${(event: KeyboardEvent) => {
+                  if (event.key !== 'Escape') return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  void this.closeSessionSidebar();
+                }}
+              >
+                <dees-button
+                  class="sessionPanelClose"
+                  size="icon"
+                  type="ghost"
+                  icon="lucide:X"
+                  text="Close session details"
+                  title="Close session details"
+                  @clicked=${() => void this.closeSessionSidebar()}
+                ></dees-button>
+                <dees-harness-session-sidebar
+                  .todos=${this.effectiveTodos}
+                  .showTasks=${this.showTodosPanel}
+                  .metrics=${this.sessionMetrics}
+                  .scratchpad=${this.scratchpad}
+                  .scratchpadBusy=${this.scratchpadBusy}
+                  .scratchpadError=${this.scratchpadError}
+                  .intelligenceEnabled=${this.sessionIntelligenceEnabled}
+                  .intelligenceExchanges=${this.intelligenceExchanges}
+                  .intelligenceBusy=${this.intelligenceBusy}
+                  .intelligenceError=${this.intelligenceError}
+                  .disabled=${this.disabled}
+                ></dees-harness-session-sidebar>
               </aside>
             `
           : ''}
@@ -344,12 +597,14 @@ export class DeesHarnessChat extends DeesElement {
         </div>
         <div class="toolbarActions">
           <dees-harness-usage compact .usage=${this.usage}></dees-harness-usage>
-          <dees-button size="sm" type="ghost" title="Conversations" @clicked=${() => this.emit('harness-open-sessions')}>
-            <dees-icon icon="lucide:History" iconSize="14"></dees-icon>
-          </dees-button>
-          <dees-button size="sm" type="ghost" title="New conversation" @clicked=${() => this.emit('harness-new-session')}>
-            <dees-icon icon="lucide:SquarePen" iconSize="14"></dees-icon>
-          </dees-button>
+          <dees-button
+            size="icon"
+            type="ghost"
+            icon="lucide:PanelLeft"
+            text="Toggle chat sidebar"
+            title="Toggle chat sidebar"
+            @clicked=${() => this.emit('harness-toggle-sidebar')}
+          ></dees-button>
         </div>
       </div>
     `;

package/ts_web/elements/00group-harness/dees-harness-message/dees-harness-message.ts

@@ -136,6 +136,46 @@ export class DeesHarnessMessage extends DeesElement {
         background: var(--dees-color-bg-secondary);
       }
 
+      .message.role-assistant {
+        position: relative;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-md);
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+      }
+
+      .message.role-assistant::before {
+        content: '';
+        position: absolute;
+        inset: 0 auto 0 0;
+        width: 1px;
+        background: transparent;
+        pointer-events: none;
+      }
+
+      .message.role-assistant.streaming::before {
+        background:
+          linear-gradient(
+            to bottom,
+            transparent 40%,
+            color-mix(in srgb, var(--dees-color-accent-primary) 85%, transparent) 50%,
+            transparent 60%
+          ) 0 100% / 100% 250% no-repeat;
+        animation: assistantActivityScan 2s linear infinite;
+      }
+
+      @keyframes assistantActivityScan {
+        from { background-position: 0 100%; }
+        to { background-position: 0 0; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .message.role-assistant.streaming::before {
+          animation: none;
+          background: color-mix(in srgb, var(--dees-color-accent-primary) 65%, transparent);
+        }
+      }
+
       .message.role-user {
         /* chat-like: user turns bind right and size to their content */
         border-left-color: var(--dees-color-accent-primary);
@@ -210,7 +250,8 @@ export class DeesHarnessMessage extends DeesElement {
         vertical-align: text-bottom;
         border-radius: 1px;
         background: var(--dees-color-accent-primary);
-        animation: harness-cursor-blink 1s steps(2, start) infinite;
+        will-change: opacity;
+        animation: harness-cursor-blink 1.2s ease-in-out infinite;
       }
 
       @keyframes harness-cursor-blink {
@@ -385,7 +426,7 @@ export class DeesHarnessMessage extends DeesElement {
     }
     const roleClass = `role-${message.role}`;
     return html`
-      <div class="message ${roleClass} ${message.error ? 'has-error' : ''}">
+      <div class="message ${roleClass} ${message.streaming ? 'streaming' : ''} ${message.error ? 'has-error' : ''}">
         ${this.showRole || this.showTimestamp || message.model
           ? html`
               <div class="roleRow">

package/ts_web/elements/00group-harness/dees-harness-reasoning/dees-harness-reasoning.ts

@@ -50,10 +50,8 @@ export class DeesHarnessReasoning extends DeesElement {
       }
 
       .reasoning {
-        border: 1px solid var(--dees-color-border-subtle);
-        border-radius: var(--dees-radius-md);
-        corner-shape: var(--dees-corner-shape);
-        background: var(--dees-color-bg-tertiary);
+        border: 0;
+        background: transparent;
         overflow: hidden;
         animation: harness-reasoning-enter var(--dees-transition-default) var(--dees-ease-out);
       }
@@ -101,7 +99,7 @@ export class DeesHarnessReasoning extends DeesElement {
         display: flex;
         align-items: center;
         gap: var(--dees-spacing-sm);
-        padding: var(--dees-spacing-xs) var(--dees-spacing-md);
+        padding: var(--dees-spacing-xs) 0;
         border: 0;
         background: transparent;
         color: var(--dees-color-text-secondary);
@@ -165,7 +163,7 @@ export class DeesHarnessReasoning extends DeesElement {
 
       .body {
         margin: 0;
-        padding: 0 var(--dees-spacing-md) var(--dees-spacing-sm);
+        padding: 0 0 var(--dees-spacing-sm) calc(12px + var(--dees-spacing-sm));
         color: var(--dees-color-text-secondary);
         white-space: pre-wrap;
         overflow-wrap: anywhere;

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

@@ -507,7 +507,10 @@ export class DeesHarnessSessionList extends DeesElement {
       .expandToggle {
         display: grid;
         place-items: center;
-        margin: 7px 7px 7px 0;
+        min-width: 27px;
+        min-height: 32px;
+        margin: 7px 3px 7px 0;
+        padding: 0;
         border-radius: 9px;
         color: var(--dees-color-text-muted);
         cursor: pointer;

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

@@ -0,0 +1,67 @@
+import { html } from '@design.estate/dees-element';
+
+import type {
+  IHarnessIntelligenceExchange,
+  IHarnessScratchpad,
+  IHarnessSessionMetrics,
+  IHarnessTodoItem,
+} from '../interfaces.js';
+
+const todos: IHarnessTodoItem[] = [
+  { content: 'Inspect current context usage', status: 'completed' },
+  { content: 'Verify the cache-key patch', status: 'in_progress' },
+  { content: 'Prepare the release', status: 'pending' },
+];
+
+const metrics: IHarnessSessionMetrics = {
+  lifetimeUsedTokens: 184_320,
+  compactionCount: 2,
+  tokensBeforeLatestCompaction: 112_840,
+  currentContextTokens: 47_200,
+  maxContextTokens: 128_000,
+};
+
+const scratchpad: IHarnessScratchpad = {
+  id: 'demo-session',
+  text: '- Cache keys use the route manifest hash.\n- Release after staging verification.',
+  revision: 4,
+  updatedAt: Date.now() - 45_000,
+  updatedBy: 'intelligence',
+};
+
+const exchanges: IHarnessIntelligenceExchange[] = [{
+  id: 'intelligence-1',
+  question: 'What remains before release?',
+  answer: 'Staging verification is the only remaining task.',
+  status: 'completed',
+  model: 'gpt-5.6-luna',
+  createdAt: Date.now() - 30_000,
+  completedAt: Date.now() - 28_000,
+}];
+
+export const demoFunc = () => html`
+  <style>
+    .harnessSessionSidebarDemo {
+      width: 280px;
+      height: 720px;
+      margin: 40px auto;
+      border: 1px solid var(--dees-color-border-subtle);
+      background: var(--dees-color-bg-secondary);
+    }
+  </style>
+  <div class="harnessSessionSidebarDemo">
+    <dees-harness-session-sidebar
+      .todos=${todos}
+      .metrics=${metrics}
+      .scratchpad=${scratchpad}
+      .intelligenceEnabled=${true}
+      .intelligenceExchanges=${exchanges}
+      @harness-scratchpad-save=${(event: CustomEvent) => {
+        console.log('harness-scratchpad-save', event.detail);
+      }}
+      @harness-session-intelligence-ask=${(event: CustomEvent) => {
+        console.log('harness-session-intelligence-ask', event.detail);
+      }}
+    ></dees-harness-session-sidebar>
+  </div>
+`;