@design.estate/dees-catalog 3.90.1 → 3.92.0

package/ts_web/elements/00group-dataview/dees-dataview-codebox/index.ts

@@ -1 +1,2 @@
 export * from './dees-dataview-codebox.js';
+export * from './codebox.diff.js';

package/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts

@@ -32,13 +32,14 @@ export class DeesDataviewStatusobject extends DeesElement {
 
   @property({ type: Object }) accessor statusObject!: tsclass.code.IStatusObject;
 
+  @state() accessor copied: boolean = false;
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        font-family: system-ui, 'Segoe UI', 'Roboto', sans-serif;
+        font-family: var(--dees-font-family);
       }
 
       dees-tile {
@@ -72,7 +73,9 @@ export class DeesDataviewStatusobject extends DeesElement {
         background: var(--dees-color-text-muted);
         margin: auto;
         box-shadow: 0 0 0 3px color-mix(in srgb, var(--dees-color-text-muted) 20%, transparent);
-        transition: all 0.2s ease;
+        transition:
+          background-color var(--dees-transition-default) var(--dees-ease-standard),
+          box-shadow var(--dees-transition-default) var(--dees-ease-standard);
       }
 
       .copyMain {
@@ -82,11 +85,14 @@ export class DeesDataviewStatusobject extends DeesElement {
         border: 1px solid var(--dees-color-border-default);
         text-align: center;
         padding: 4px 10px;
-        border-radius: 4px;
-        color: var(--dees-color-text-muted);
+        border-radius: var(--dees-radius-md);
+        color: var(--dees-color-text-secondary);
         user-select: none;
         cursor: pointer;
-        transition: all 0.15s ease;
+        transition:
+          background-color var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard),
+          border-color var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       .copyMain:hover {
@@ -96,10 +102,16 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .copyMain:active {
-        background: var(--dees-color-border-default);
+        background: var(--dees-color-active);
         transform: scale(0.98);
       }
 
+      .copyMain.copied {
+        background: color-mix(in srgb, var(--dees-color-accent-success) 12%, transparent);
+        border-color: var(--dees-color-text-success);
+        color: var(--dees-color-text-success);
+      }
+
       .statusdot.ok {
         background: var(--dees-color-text-success);
         box-shadow: 0 0 0 3px color-mix(in srgb, var(--dees-color-text-success) 20%, transparent);
@@ -122,7 +134,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         height: 36px;
         padding: 0 16px;
         border-bottom: 1px solid var(--dees-color-border-subtle);
-        transition: background-color 0.15s ease;
+        transition: background-color var(--dees-transition-fast) var(--dees-ease-standard);
         cursor: context-menu;
       }
 
@@ -149,7 +161,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       .detail .detailsText .label {
         font-size: 12px;
         font-weight: 500;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
         letter-spacing: -0.01em;
         white-space: nowrap;
         flex-shrink: 0;
@@ -157,7 +169,7 @@ export class DeesDataviewStatusobject extends DeesElement {
 
       .detail .detailsText .value {
         font-size: 13px;
-        font-family: 'Intel One Mono', 'Geist Mono', monospace;
+        font-family: var(--dees-font-family-mono);
         color: var(--dees-color-text-primary);
         margin-left: auto;
         text-align: right;
@@ -191,7 +203,9 @@ export class DeesDataviewStatusobject extends DeesElement {
         <div slot="header" class="heading">
           <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
           <h1>${this.statusObject?.name || 'No status object assigned'}</h1>
-          <div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
+          <div class="copyMain ${this.copied ? 'copied' : ''}" @click=${this.handleCopyAsJson}>
+            ${this.copied ? 'Copied!' : 'Copy JSON'}
+          </div>
         </div>
         ${this.statusObject?.details?.map((detailArg) => {
           return html`
@@ -253,31 +267,32 @@ export class DeesDataviewStatusobject extends DeesElement {
     }
   }
 
+  private copiedResetTimeout: ReturnType<typeof setTimeout> | null = null;
+
   private async handleCopyAsJson() {
     if (!this.statusObject) return;
-    
+
     try {
       await navigator.clipboard.writeText(JSON.stringify(this.statusObject, null, 2));
-      
-      // Show feedback
-      const button = this.shadowRoot!.querySelector('.copyMain') as HTMLElement;
-      const originalText = button.textContent;
-      button.textContent = 'Copied!';
-      
-      // Apply success styles based on theme
-      const isDark = !this.goBright;
-      button.style.background = isDark ? 'hsl(142.1 70.6% 45.3% / 0.1)' : 'hsl(142.1 76.2% 36.3% / 0.1)';
-      button.style.borderColor = isDark ? 'hsl(142.1 70.6% 45.3%)' : 'hsl(142.1 76.2% 36.3%)';
-      button.style.color = isDark ? 'hsl(142.1 70.6% 45.3%)' : 'hsl(142.1 76.2% 36.3%)';
-      
-      setTimeout(() => {
-        button.textContent = originalText;
-        button.style.background = '';
-        button.style.borderColor = '';
-        button.style.color = '';
-      }, 1500);
     } catch (err) {
       console.error('Failed to copy:', err);
+      return;
+    }
+    this.copied = true;
+    if (this.copiedResetTimeout) {
+      clearTimeout(this.copiedResetTimeout);
+    }
+    this.copiedResetTimeout = setTimeout(() => {
+      this.copied = false;
+      this.copiedResetTimeout = null;
+    }, 1500);
+  }
+
+  public async disconnectedCallback() {
+    if (this.copiedResetTimeout) {
+      clearTimeout(this.copiedResetTimeout);
+      this.copiedResetTimeout = null;
     }
+    await super.disconnectedCallback();
   }
 }

package/ts_web/elements/00group-dataview/dees-grouped-list/dees-grouped-list.ts

@@ -194,7 +194,7 @@ export class DeesGroupedList extends DeesElement {
 
       .value {
         margin-left: auto;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-primary);
         white-space: nowrap;
       }
 

package/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts

@@ -207,7 +207,6 @@ export class DeesStatsGrid extends DeesElement {
       }
 
       .tile-icon {
-        opacity: 0.7;
         color: var(--dees-color-text-secondary);
         font-size: 16px;
         flex-shrink: 0;

package/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-keys.ts

@@ -205,7 +205,7 @@ export class DeesStorageKeys extends DeesElement {
       }
 
       .size-cell {
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
         font-variant-numeric: tabular-nums;
       }
 

package/ts_web/elements/00group-dataview/dees-table/styles.ts

@@ -300,7 +300,7 @@ export const tableStyles: CSSResult[] = [
         text-align: left;
         font-weight: var(--dees-font-control-weight);
         font-size: var(--dees-font-caption1-size);
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
         letter-spacing: -0.01em;
       }
 

package/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts

@@ -79,7 +79,7 @@ export class DeesProgressbar extends DeesElement {
     css`
       :host {
         /* inner bevel hairline, dark mode only */
-        --progressbar-bevel: #555;
+        --progressbar-bevel: var(--dees-color-border-strong);
         display: block;
         color: var(--dees-color-text-primary);
       }
@@ -111,8 +111,8 @@ export class DeesProgressbar extends DeesElement {
       .progressValue {
         font-size: 12px;
         line-height: 1.3;
-        color: var(--dees-color-text-muted);
-        font-family: 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+        color: var(--dees-color-text-secondary);
+        font-family: var(--dees-font-family-mono);
       }
 
       .progressBar {
@@ -120,8 +120,8 @@ export class DeesProgressbar extends DeesElement {
         overflow: hidden;
         width: 100%;
         height: 8px;
-        border-radius: 999px;
-        background: var(--dees-color-border-default);
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-color-fill-secondary);
         border-top: 0.5px solid var(--progressbar-bevel);
       }
 
@@ -129,7 +129,7 @@ export class DeesProgressbar extends DeesElement {
         height: 100%;
         border-radius: inherit;
         background: var(--dees-color-accent-primary);
-        transition: width 0.2s ease;
+        transition: width var(--dees-transition-default) var(--dees-ease-standard);
       }
 
       .progressBarFill.indeterminate {
@@ -144,10 +144,10 @@ export class DeesProgressbar extends DeesElement {
         min-height: calc(var(--status-rows, 3) * 1.35em + 16px);
         padding: 8px 10px;
         box-sizing: border-box;
-        border-radius: 8px;
+        border-radius: var(--dees-radius-md);
         border: 1px solid var(--dees-color-border-strong);
-        background: var(--dees-color-tooltip-fg);
-        font-family: 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+        background: var(--dees-color-code-block-bg);
+        font-family: var(--dees-font-family-mono);
         font-size: 12px;
         line-height: 1.35;
         overflow: hidden;

package/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts

@@ -36,7 +36,7 @@ export class DeesFormSubmit extends DeesElement {
   accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
   @property({ type: String, reflect: true })
-  accessor type: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
+  accessor type: 'default' | 'accent' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
 
   @property({ type: String, reflect: true })
   accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default';

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

@@ -0,0 +1,193 @@
+import { html } from '@design.estate/dees-element';
+import type { DeesHarnessChat } from './dees-harness-chat.js';
+import type { IHarnessMessage, IHarnessPermissionRequest } from '../interfaces.js';
+import { harnessDemoConversation, makeStreamingSimulator } from '../harness.demodata.js';
+
+const toolShowcase = (): IHarnessMessage[] => {
+  const now = Date.now();
+  return [
+    {
+      id: 'demo-t1',
+      role: 'tool',
+      text: '',
+      createdAt: now - 240_000,
+      toolCall: {
+        id: 'call-1',
+        name: 'run_command',
+        status: 'completed',
+        input: { command: 'pnpm test --filter sitemap', cwd: '/srv/app' },
+        output: { exitCode: 0, stdout: '14 tests passed' },
+        startedAt: now - 250_000,
+        finishedAt: now - 243_000,
+      },
+    },
+    {
+      id: 'demo-t2',
+      role: 'tool',
+      text: '',
+      createdAt: now - 200_000,
+      toolCall: {
+        id: 'call-2',
+        name: 'write_file',
+        status: 'completed',
+        input: {
+          path: '/srv/app/src/jobs/sitemap.job.ts',
+          oldContent: "const cacheKey = hash(locales);",
+          content: "const cacheKey = hash(routeManifest);",
+        },
+        startedAt: now - 205_000,
+        finishedAt: now - 202_000,
+      },
+    },
+    {
+      id: 'demo-t3',
+      role: 'tool',
+      text: '',
+      createdAt: now - 150_000,
+      toolCall: {
+        id: 'call-3',
+        name: 'kb__lookup_article',
+        status: 'completed',
+        mcp: {
+          serverName: 'kb',
+          toolName: 'lookup_article',
+          annotations: { title: 'Knowledge Lookup', readOnlyHint: true, openWorldHint: true },
+        },
+        input: { query: 'sitemap cache determinism' },
+        contentBlocks: [
+          { type: 'text', text: 'Found “Deterministic sitemap builds”.' },
+          {
+            type: 'resource_link',
+            uri: 'https://kb.example.com/articles/812',
+            name: 'deterministic-sitemap-builds',
+            title: 'Deterministic sitemap builds',
+            mimeType: 'text/html',
+          },
+        ],
+        startedAt: now - 155_000,
+        finishedAt: now - 152_000,
+      },
+    },
+  ];
+};
+
+const pendingPermission: IHarnessPermissionRequest = {
+  id: 'perm-demo',
+  title: 'Write file',
+  type: 'write',
+  createdAt: Date.now(),
+  metadata: { path: '/srv/app/src/jobs/sitemap.job.ts', bytes: 812 },
+};
+
+let stopStream: (() => void) | undefined;
+
+const chatOf = (event: MouseEvent): DeesHarnessChat | null =>
+  (event.target as HTMLElement).closest('.chatDemo')?.querySelector('dees-harness-chat') ?? null;
+
+const simulate = (event: MouseEvent) => {
+  const chat = chatOf(event);
+  if (!chat) return;
+  stopStream?.();
+  const message: IHarnessMessage = {
+    id: `stream-${Date.now()}`,
+    role: 'assistant',
+    text: '',
+    createdAt: Date.now(),
+    streaming: true,
+  };
+  chat.messages = [...chat.messages, message];
+  chat.status = { type: 'busy', message: 'Responding…' };
+  stopStream = makeStreamingSimulator(
+    {
+      applyDelta: (delta) => {
+        chat.applyDelta(delta);
+        if (delta.type === 'message-end') {
+          chat.status = { type: 'idle' };
+        }
+      },
+    },
+    message.id,
+  );
+};
+
+const askPermission = (event: MouseEvent) => {
+  const chat = chatOf(event);
+  if (!chat) return;
+  chat.permissions = [...chat.permissions, { ...pendingPermission, id: `perm-${Date.now()}` }];
+};
+
+const toggleError = (event: MouseEvent) => {
+  const chat = chatOf(event);
+  if (!chat) return;
+  chat.status = chat.status.type === 'error'
+    ? { type: 'idle' }
+    : { type: 'error', message: 'The model endpoint returned 429 — retrying in 20s.' };
+};
+
+const resetChat = (event: MouseEvent) => {
+  const chat = chatOf(event);
+  if (!chat) return;
+  stopStream?.();
+  chat.messages = [...harnessDemoConversation(), ...toolShowcase()];
+  chat.permissions = [];
+  chat.status = { type: 'idle' };
+};
+
+export const demoFunc = () => html`
+  <style>
+    .chatDemo {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      gap: 12px;
+      height: 640px;
+      max-width: 860px;
+      margin: 40px auto;
+    }
+    .chatDemo .controls {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .chatDemo dees-harness-chat {
+      border: 1px solid var(--dees-color-border-subtle);
+      border-radius: var(--dees-radius-xl);
+      overflow: hidden;
+    }
+  </style>
+  <div
+    class="chatDemo"
+    @harness-send=${(event: CustomEvent) => console.log('harness-send', event.detail)}
+    @harness-permission-response=${(event: CustomEvent) => {
+      console.log('harness-permission-response', event.detail);
+      const chat = (event.target as HTMLElement).closest('.chatDemo')?.querySelector('dees-harness-chat');
+      if (chat) {
+        setTimeout(() => {
+          chat.permissions = chat.permissions.filter((request) => request.id !== event.detail.requestId);
+        }, 600);
+      }
+    }}
+    @harness-new-session=${() => console.log('harness-new-session')}
+    @harness-open-sessions=${() => console.log('harness-open-sessions')}
+    @harness-abort=${() => {
+      stopStream?.();
+      console.log('harness-abort');
+    }}
+  >
+    <div class="controls">
+      <dees-button type="accent" @clicked=${simulate}>Simulate streaming</dees-button>
+      <dees-button @clicked=${askPermission}>Ask permission</dees-button>
+      <dees-button @clicked=${toggleError}>Toggle error status</dees-button>
+      <dees-button type="ghost" @clicked=${resetChat}>Reset</dees-button>
+    </div>
+    <dees-harness-chat
+      heading="Deploy assistant"
+      subheading="acme-app · main · connected"
+      model="gpt-5.5"
+      reasoningEffort="high"
+      .modelOptions=${['gpt-5.5', 'gpt-5', 'o4-mini']}
+      .effortOptions=${['xhigh', 'high', 'medium', 'low']}
+      .usage=${{ inputTokens: 18_400, outputTokens: 3_100, totalTokens: 21_500 }}
+      .messages=${[...harnessDemoConversation(), ...toolShowcase()]}
+    ></dees-harness-chat>
+  </div>
+`;