symbiote-ui 0.3.0-alpha.4

package/display/EventFeed/EventFeed.js

@@ -0,0 +1,64 @@
+import Symbiote from '@symbiotejs/symbiote';
+import '../EmptyState/EmptyState.js';
+import './EventFeedItem.js';
+import template from './EventFeed.tpl.js';
+import css from './EventFeed.css.js';
+import { translate } from '../../locale/index.js';
+
+function normalizeEvents(events) {
+  return Array.isArray(events) ? events.filter((event) => event && typeof event === 'object') : [];
+}
+
+export class EventFeed extends Symbiote {
+  init$ = {
+    eventsList: [],
+    eventCount: '0',
+    hasEvents: false,
+    emptyText: translate('eventFeed.empty'),
+    title: translate('eventFeed.title'),
+    showHeader: true,
+  };
+
+  #events = [];
+  #maxItems = 100;
+
+  setEvents(events = [], options = {}) {
+    this.#maxItems = Number.isFinite(options.maxItems) ? Math.max(1, options.maxItems) : this.#maxItems;
+    this.#events = normalizeEvents(events).slice(0, this.#maxItems);
+    this.#render();
+  }
+
+  addEvent(event, options = {}) {
+    this.#maxItems = Number.isFinite(options.maxItems) ? Math.max(1, options.maxItems) : this.#maxItems;
+    this.#events.unshift(event);
+    this.#events = normalizeEvents(this.#events).slice(0, this.#maxItems);
+    this.#render();
+  }
+
+  clearEvents() {
+    this.#events = [];
+    this.#render();
+  }
+
+  getEvents() {
+    return [...this.#events];
+  }
+
+  #render() {
+    let count = this.#events.length;
+    this.set$({
+      eventCount: String(count),
+      hasEvents: count > 0,
+      eventsList: this.#events.map((event) => ({
+        eventData: JSON.stringify(event),
+      })),
+    });
+    this.toggleAttribute('empty', count === 0);
+  }
+}
+
+EventFeed.template = template;
+EventFeed.rootStyles = css;
+EventFeed.reg('sn-event-feed');
+
+export default EventFeed;

package/display/EventFeed/EventFeed.tpl.js

@@ -0,0 +1,14 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<section class="sn-event-feed">
+  <header class="sn-event-feed-header" ${{ hidden: '!showHeader' }}>
+    <span ${{ textContent: 'title' }}></span>
+    <span class="sn-event-feed-count" ${{ textContent: 'eventCount' }}></span>
+  </header>
+  <div class="sn-event-feed-body-list">
+    <div class="sn-event-feed-items" ${{ itemize: 'eventsList', 'item-tag': 'sn-event-feed-item' }}></div>
+    <sn-empty-state class="sn-event-feed-empty" ${{ hidden: 'hasEvents', textContent: 'emptyText' }}></sn-empty-state>
+  </div>
+</section>
+`;

package/display/EventFeed/EventFeedItem.js

@@ -0,0 +1,116 @@
+import Symbiote from '@symbiotejs/symbiote';
+import '../CodeBlock/CodeBlock.js';
+import '../OutputGraphPreview/OutputGraphPreview.js';
+import '../OutputListPreview/OutputListPreview.js';
+import template from './EventFeedItem.tpl.js';
+import css from './EventFeed.css.js';
+
+function formatTime(value) {
+  if (!value) return '';
+  let date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+  return date.toLocaleTimeString('en', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
+function stringifyArgs(value) {
+  if (typeof value === 'string') return value;
+  if (!value || typeof value !== 'object') return '';
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return '';
+  }
+}
+
+function truncate(value, limit = 500) {
+  let text = String(value ?? '');
+  return text.length > limit ? `${text.slice(0, limit)}...` : text;
+}
+
+function normalizeMode(value) {
+  let mode = String(value ?? '').trim();
+  if (['code', 'graph', 'list', 'raw', 'error', 'empty'].includes(mode)) return mode;
+  return 'raw';
+}
+
+export class EventFeedItem extends Symbiote {
+  init$ = {
+    '@eventData': null,
+    isCall: true,
+    tool: '',
+    argsText: '',
+    timeText: '',
+    durationText: '',
+    success: true,
+    mode: 'empty',
+    errorText: '',
+    rawOutput: '',
+  };
+
+  renderCallback() {
+    this.sub('@eventData', (value) => {
+      if (!value) return;
+      try {
+        this.setEvent(JSON.parse(value));
+      } catch {
+        this.setEvent(null);
+      }
+    });
+  }
+
+  setEvent(event) {
+    let data = event && typeof event === 'object' ? event : {};
+    let isCall = data.direction === 'call' || data.type === 'tool_call';
+    let preview = data.preview && typeof data.preview === 'object' ? data.preview : {};
+    let mode = isCall ? 'empty' : normalizeMode(preview.type);
+    if (!isCall && data.success === false) mode = 'error';
+
+    this.set$({
+      isCall,
+      tool: String(data.tool ?? ''),
+      argsText: stringifyArgs(data.argsText ?? data.args),
+      timeText: data.timeText ? String(data.timeText) : formatTime(data.timestamp ?? data.ts),
+      durationText: data.durationText ? String(data.durationText) : '',
+      success: data.success !== false,
+      mode,
+      errorText: truncate(preview.error ?? preview.value ?? data.error ?? 'Error'),
+      rawOutput: truncate(preview.value ?? ''),
+    });
+
+    this.toggleAttribute('data-is-call', isCall);
+    this.toggleAttribute('data-success', data.success !== false);
+    this.#renderPreview(mode, preview);
+  }
+
+  #renderPreview(mode, preview) {
+    if (mode === 'code') {
+      this.ref.codePreview?.set$({
+        lang: String(preview.lang ?? 'plain'),
+        code: String(preview.value ?? ''),
+      });
+    } else if (mode === 'graph') {
+      let graph = this.ref.graphPreview;
+      if (graph?.setValue) {
+        graph.$.title = String(preview.title ?? 'Graph output');
+        graph.setValue(preview.value);
+      }
+    } else if (mode === 'list') {
+      let list = this.ref.listPreview;
+      if (list?.setValue) {
+        list.$.title = String(preview.title ?? 'List output');
+        list.setValue(preview.value);
+      }
+    }
+  }
+}
+
+EventFeedItem.template = template;
+EventFeedItem.rootStyles = css;
+EventFeedItem.reg('sn-event-feed-item');
+
+export default EventFeedItem;

package/display/EventFeed/EventFeedItem.tpl.js

@@ -0,0 +1,22 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<article class="sn-event-feed-item" ${{ 'data-is-call': 'isCall', 'data-success': 'success' }}>
+  <header class="sn-event-feed-item-header">
+    <span class="sn-event-feed-arrow" ${{ textContent: 'isCall ? "->" : "<-"' }}></span>
+    <span class="sn-event-feed-tool" ${{ textContent: 'tool' }}></span>
+    <span class="sn-event-feed-time" ${{ textContent: 'timeText' }}></span>
+    <span class="sn-event-feed-duration" ${{ textContent: 'durationText' }}></span>
+  </header>
+  <div class="sn-event-feed-body" ${{ hidden: '!isCall' }}>
+    <span class="sn-event-feed-args" ${{ textContent: 'argsText' }}></span>
+  </div>
+  <div class="sn-event-feed-body sn-event-feed-result" ${{ hidden: 'isCall' }}>
+    <div class="sn-event-feed-error" ${{ hidden: 'mode !== "error"', textContent: 'errorText' }}></div>
+    <code-block ref="codePreview" ${{ hidden: 'mode !== "code"' }}></code-block>
+    <output-graph-preview ref="graphPreview" ${{ hidden: 'mode !== "graph"' }}></output-graph-preview>
+    <output-list-preview ref="listPreview" ${{ hidden: 'mode !== "list"' }}></output-list-preview>
+    <pre class="sn-event-feed-raw" ${{ hidden: 'mode !== "raw"', textContent: 'rawOutput' }}></pre>
+  </div>
+</article>
+`;

package/display/LoadingOverlay/LoadingOverlay.css.js

@@ -0,0 +1,91 @@
+export default /*css*/ `
+:host,
+sn-loading-overlay,
+loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: block;
+  color: var(--sn-text);
+  font-family: var(--sn-font-ui);
+  z-index: var(--sn-loading-overlay-z);
+  pointer-events: none;
+}
+
+:host([hidden]),
+sn-loading-overlay[hidden],
+loading-overlay[hidden] {
+  display: none !important;
+}
+
+.sn-loading-overlay {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--sn-loading-overlay-gap);
+  width: 100%;
+  height: 100%;
+  background: var(--sn-loading-overlay-bg);
+  opacity: 1;
+  transition: opacity 0.3s ease-out;
+}
+
+:host([hidden-state]) .sn-loading-overlay,
+sn-loading-overlay[hidden-state] .sn-loading-overlay,
+loading-overlay[hidden-state] .sn-loading-overlay {
+  opacity: 0;
+}
+
+.sn-loading-label,
+.sn-loading-phase,
+.sn-loading-sub {
+  max-width: min(320px, 80%);
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sn-loading-label {
+  color: var(--sn-loading-label-color);
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-loading-label-size);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.sn-loading-phase {
+  min-height: 14px;
+  color: var(--sn-loading-phase-color);
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-loading-phase-size);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.sn-loading-track {
+  width: var(--sn-loading-track-width);
+  max-width: 80%;
+  height: var(--sn-loading-track-height);
+  overflow: hidden;
+  border-radius: var(--sn-loading-track-radius);
+  background: var(--sn-loading-track-bg);
+}
+
+.sn-loading-bar {
+  height: 100%;
+  width: var(--sn-loading-progress, 0%);
+  border-radius: inherit;
+  background: var(--sn-loading-bar-bg);
+  box-shadow: var(--sn-loading-bar-shadow);
+  transition: width 0.35s ease-out;
+}
+
+.sn-loading-sub {
+  min-height: 12px;
+  color: var(--sn-loading-sub-color);
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-loading-sub-size);
+}
+`;

package/display/LoadingOverlay/LoadingOverlay.js

@@ -0,0 +1,48 @@
+import Symbiote from '@symbiotejs/symbiote';
+import template from './LoadingOverlay.tpl.js';
+import css from './LoadingOverlay.css.js';
+import { translate } from '../../locale/index.js';
+
+export class LoadingOverlay extends Symbiote {
+  init$ = {
+    label: translate('loading.label'),
+    pct: 0,
+    phase: translate('loading.initializing'),
+    sub: '',
+    isHidden: false,
+  };
+
+  renderCallback() {
+    this.sub('isHidden', (value) => {
+      this.toggleAttribute('hidden-state', Boolean(value));
+    });
+    this.sub('pct', (value) => {
+      let pct = Number.isFinite(Number(value)) ? Math.max(0, Math.min(100, Number(value))) : 0;
+      this.style.setProperty('--sn-loading-progress', `${pct}%`);
+    });
+  }
+
+  show() {
+    this.$.isHidden = false;
+  }
+
+  hide(onComplete) {
+    this.$.isHidden = true;
+    if (onComplete) {
+      setTimeout(onComplete, 350);
+    }
+  }
+
+  setProgress(pct, phase, sub = '') {
+    let value = Number(pct);
+    this.$.pct = Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
+    this.$.phase = phase || '';
+    this.$.sub = sub || '';
+  }
+}
+
+LoadingOverlay.template = template;
+LoadingOverlay.rootStyles = css;
+LoadingOverlay.reg('sn-loading-overlay');
+
+export default LoadingOverlay;

package/display/LoadingOverlay/LoadingOverlay.tpl.js

@@ -0,0 +1,12 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<div class="sn-loading-overlay">
+  <div class="sn-loading-label" ${{ textContent: 'label' }}></div>
+  <div class="sn-loading-phase" ${{ textContent: 'phase' }}></div>
+  <div class="sn-loading-track">
+    <div class="sn-loading-bar"></div>
+  </div>
+  <div class="sn-loading-sub" ${{ textContent: 'sub' }}></div>
+</div>
+`;

package/display/Metric/Metric.css.js

@@ -0,0 +1,60 @@
+export default /*css*/ `
+sn-metric {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sn-metric-gap);
+  min-width: 0;
+  padding: var(--sn-metric-padding);
+  border-block-end: 1px solid var(--sn-metric-border);
+  color: var(--sn-metric-color);
+  font-family: var(--sn-font);
+  font-size: var(--sn-metric-label-size);
+}
+
+sn-metric[hidden] {
+  display: none !important;
+}
+
+sn-metric:last-child {
+  border-block-end: 0;
+}
+
+sn-metric[variant="stacked"] {
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.sn-metric-label {
+  min-width: 0;
+  color: var(--sn-metric-label-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sn-metric-value {
+  min-width: 0;
+  color: var(--sn-metric-value-color);
+  font-family: var(--sn-metric-value-font);
+  font-size: var(--sn-metric-value-size);
+  font-weight: var(--sn-metric-value-weight);
+  text-align: end;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+sn-metric[status="success"] .sn-metric-value {
+  color: var(--sn-metric-success-color);
+}
+
+sn-metric[status="warning"] .sn-metric-value {
+  color: var(--sn-metric-warning-color);
+}
+
+sn-metric[status="error"] .sn-metric-value {
+  color: var(--sn-metric-error-color);
+}
+`;

package/display/Metric/Metric.js

@@ -0,0 +1,17 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import template from './Metric.tpl.js';
+import css from './Metric.css.js';
+
+export class MetricItem extends Symbiote {
+  constructor() {
+    super();
+    this.templateProcessors.add(slotProcessor);
+  }
+}
+
+MetricItem.template = template;
+MetricItem.rootStyles = css;
+MetricItem.reg('sn-metric');
+
+export default MetricItem;

package/display/Metric/Metric.tpl.js

@@ -0,0 +1,6 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<span class="sn-metric-label"><slot name="label"></slot></span>
+<span class="sn-metric-value"><slot name="value"></slot><slot></slot></span>
+`;

package/display/OutputGraphPreview/OutputGraphPreview.css.js

@@ -0,0 +1,122 @@
+export default /*css*/ `
+:host,
+output-graph-preview {
+  display: block;
+  color: var(--sn-text);
+  font-family: var(--sn-font-ui, inherit);
+}
+
+:host([hidden]),
+output-graph-preview[hidden] {
+  display: none !important;
+}
+
+.output-graph-preview {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sn-output-preview-gap);
+  min-width: 0;
+  padding: var(--sn-output-preview-padding);
+  border: 1px solid var(--sn-output-preview-border);
+  border-radius: var(--sn-output-preview-radius);
+  background: var(--sn-output-preview-bg);
+}
+
+.output-graph-preview-head,
+.output-graph-preview-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 18px;
+  color: var(--sn-output-preview-muted, var(--sn-text-dim));
+  font-size: 11px;
+}
+
+.output-graph-preview-title {
+  overflow: hidden;
+  color: var(--sn-output-preview-title, var(--sn-text));
+  font-size: 12px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.output-graph-preview-count,
+.output-graph-preview-foot {
+  font-family: var(--sn-font-mono, monospace);
+}
+
+.output-graph-preview-empty {
+  padding: 8px 0;
+  color: var(--sn-output-preview-muted, var(--sn-text-dim));
+  font-size: 12px;
+}
+
+.output-graph-preview-canvas {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
+  gap: 10px;
+  min-height: 96px;
+  padding: 8px;
+  border-radius: var(--sn-output-preview-canvas-radius);
+  background:
+    linear-gradient(var(--sn-output-preview-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--sn-output-preview-grid) 1px, transparent 1px);
+  background-size: 16px 16px;
+}
+
+.output-graph-preview-node {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 52px;
+  padding: 8px 10px;
+  border: 1px solid var(--sn-output-preview-item-border);
+  border-radius: var(--sn-output-preview-item-radius);
+  background: var(--sn-output-preview-item-bg);
+}
+
+.output-graph-preview-node-label,
+.output-graph-preview-node-kind,
+.output-graph-preview-node-description,
+.output-graph-preview-edge {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.output-graph-preview-node-label {
+  color: var(--sn-output-preview-label, var(--sn-text));
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.output-graph-preview-node-kind,
+.output-graph-preview-node-description,
+.output-graph-preview-edge {
+  color: var(--sn-output-preview-muted, var(--sn-text-dim));
+  font-size: 10px;
+  line-height: 1.35;
+}
+
+.output-graph-preview-node-kind,
+.output-graph-preview-edge {
+  font-family: var(--sn-font-mono, monospace);
+}
+
+.output-graph-preview-edges {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.output-graph-preview-edge {
+  max-width: 100%;
+  padding: 3px 6px;
+  border-radius: 999px;
+  background: var(--sn-output-preview-edge-bg);
+}
+`;

package/display/OutputGraphPreview/OutputGraphPreview.js

@@ -0,0 +1,89 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { escapeHtml } from '../markdown-formatter.js';
+import { normalizePreviewGraph } from '../output-preview.js';
+import template from './OutputGraphPreview.tpl.js';
+import css from './OutputGraphPreview.css.js';
+import { translate } from '../../locale/index.js';
+
+function renderNode(node) {
+  let description = node.description
+    ? `<div class="output-graph-preview-node-description">${escapeHtml(node.description)}</div>`
+    : '';
+
+  return `
+    <article class="output-graph-preview-node" data-node-id="${escapeHtml(node.id)}">
+      <div class="output-graph-preview-node-label">${escapeHtml(node.label)}</div>
+      <div class="output-graph-preview-node-kind">${escapeHtml(node.kind)}</div>
+      ${description}
+    </article>
+  `;
+}
+
+function renderEdge(edge) {
+  let label = edge.label ? ` ${edge.label}` : '';
+  return `
+    <span class="output-graph-preview-edge">
+      ${escapeHtml(edge.source)} -> ${escapeHtml(edge.target)}${escapeHtml(label)}
+    </span>
+  `;
+}
+
+function renderGraph(data) {
+  let nodes = data.nodes.map(renderNode).join('');
+  let edges = data.edges.length
+    ? `<div class="output-graph-preview-edges">${data.edges.map(renderEdge).join('')}</div>`
+    : '';
+  return `${nodes}${edges}`;
+}
+
+export class OutputGraphPreview extends Symbiote {
+  init$ = {
+    title: translate('outputGraph.title'),
+    countText: '0 nodes',
+    emptyText: translate('outputGraph.empty'),
+    graphHtml: '',
+    truncatedText: '',
+    isEmpty: true,
+    isTruncated: false,
+    showHeader: true,
+  };
+
+  #normalized = normalizePreviewGraph({ nodes: [], edges: [] });
+
+  renderCallback() {
+    this.sub('isEmpty', (value) => {
+      this.toggleAttribute('empty', Boolean(value));
+    });
+  }
+
+  setValue(value, options = {}) {
+    this.setData(normalizePreviewGraph(value, options));
+  }
+
+  setGraph(value, options = {}) {
+    this.setValue(value, options);
+  }
+
+  setData(data = normalizePreviewGraph({ nodes: [], edges: [] })) {
+    this.#normalized = data;
+    let nodePlural = data.nodes.length === 1 ? 'node' : 'nodes';
+    let edgePlural = data.edges.length === 1 ? 'edge' : 'edges';
+    this.set$({
+      countText: `${data.nodes.length} ${nodePlural}, ${data.edges.length} ${edgePlural}`,
+      graphHtml: renderGraph(data),
+      truncatedText: data.truncated ? translate('outputGraph.truncated') : '',
+      isEmpty: data.empty,
+      isTruncated: data.truncated,
+    });
+  }
+
+  getData() {
+    return this.#normalized;
+  }
+}
+
+OutputGraphPreview.template = template;
+OutputGraphPreview.rootStyles = css;
+OutputGraphPreview.reg('output-graph-preview');
+
+export default OutputGraphPreview;

package/display/OutputGraphPreview/OutputGraphPreview.tpl.js

@@ -0,0 +1,13 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<section class="output-graph-preview">
+  <header class="output-graph-preview-head" ${{ '@hidden': '!showHeader' }}>
+    <span class="output-graph-preview-title" ${{ textContent: 'title' }}></span>
+    <span class="output-graph-preview-count" ${{ textContent: 'countText' }}></span>
+  </header>
+  <div class="output-graph-preview-empty" ${{ textContent: 'emptyText', '@hidden': '!isEmpty' }}></div>
+  <div class="output-graph-preview-canvas" ${{ innerHTML: 'graphHtml', '@hidden': 'isEmpty' }}></div>
+  <footer class="output-graph-preview-foot" ${{ textContent: 'truncatedText', '@hidden': '!isTruncated' }}></footer>
+</section>
+`;