symbiote-ui 0.3.0-alpha.4

package/chat/chat-context.js

@@ -0,0 +1,123 @@
+/**
+ * Chat Context — generic keyed context management with pluggable type handlers.
+ *
+ * Provides context item normalization, merge-by-key, removal, and serialization.
+ * Applications register custom type handlers for domain-specific context types.
+ *
+ * Built-in: 'file' type handler.
+ */
+
+function shortName(fullPath) {
+  let clean = String(fullPath || '')
+  let trimmed = clean.endsWith('/') ? clean.slice(0, -1) : clean
+  return (trimmed.split('/').pop() || clean) + (clean.endsWith('/') ? '/' : '')
+}
+
+/** Built-in file type handler. */
+export const FILE_TYPE_HANDLER = {
+  normalize(input) {
+    let path = String(input.path || '').trim()
+    return {
+      type: 'file',
+      key: `file:${path}`,
+      path,
+      name: input.name || shortName(path),
+      title: path,
+      icon: path.endsWith('/') ? 'folder' : 'description',
+      source: input.source || 'manual',
+    }
+  },
+  contextKey(item) {
+    return item.key || `file:${item.path}`
+  },
+  formatPayload(item) {
+    return {
+      type: 'file',
+      path: item.path,
+      source: item.source,
+    }
+  },
+}
+
+const DEFAULT_TYPE_HANDLERS = {
+  file: FILE_TYPE_HANDLER,
+}
+
+function _resolveHandler(type, typeHandlers) {
+  return typeHandlers[type] || typeHandlers.file || FILE_TYPE_HANDLER
+}
+
+function _contextKey(item, typeHandlers) {
+  if (item.key) return String(item.key)
+  let handler = _resolveHandler(item.type || 'file', typeHandlers)
+  if (handler.contextKey) return handler.contextKey(item)
+  if (item.path) return `file:${item.path}`
+  return `${item.type || 'context'}:${item.name || item.title || ''}`
+}
+
+/**
+ * Normalize a context item using the appropriate type handler.
+ *
+ * @param {object} [input={}]
+ * @param {object} [typeHandlers] - Map of type name to handler object.
+ * @returns {object} Normalized context item with a `key` property.
+ */
+export function normalizeAttachedContextItem(input = {}, typeHandlers = DEFAULT_TYPE_HANDLERS) {
+  let type = input.type || 'file'
+  let handler = _resolveHandler(type, typeHandlers)
+  return handler.normalize(input)
+}
+
+/**
+ * Add or replace a context item by key.
+ *
+ * @param {Array} [current=[]] - Current context items.
+ * @param {object} [input={}] - Raw input to normalize and merge.
+ * @param {object} [typeHandlers] - Map of type name to handler object.
+ * @returns {Array} Updated context items.
+ */
+export function mergeAttachedContext(current = [], input = {}, typeHandlers = DEFAULT_TYPE_HANDLERS) {
+  let item = normalizeAttachedContextItem(input, typeHandlers)
+  let key = _contextKey(item, typeHandlers)
+  if (!key || key.endsWith(':')) return current
+  let withoutExisting = current.filter((ctx) => _contextKey(ctx, typeHandlers) !== key)
+  return [...withoutExisting, item]
+}
+
+/**
+ * Remove a context item by key.
+ *
+ * @param {Array} [current=[]] - Current context items.
+ * @param {string} key - Key of the item to remove.
+ * @param {object} [typeHandlers] - Map of type name to handler object.
+ * @returns {Array} Updated context items.
+ */
+export function removeAttachedContext(current = [], key, typeHandlers = DEFAULT_TYPE_HANDLERS) {
+  return current.filter((ctx) => _contextKey(ctx, typeHandlers) !== key)
+}
+
+/**
+ * Serialize context items into an attached context block string.
+ *
+ * @param {Array} [context=[]] - Context items to serialize.
+ * @param {object} [typeHandlers] - Map of type name to handler object.
+ * @returns {string} Serialized context block, or empty string if no items.
+ */
+export function formatAttachedContextBlock(context = [], typeHandlers = DEFAULT_TYPE_HANDLERS) {
+  let items = context
+    .map((c) => normalizeAttachedContextItem(c, typeHandlers))
+    .filter((item) => !_contextKey(item, typeHandlers).endsWith(':'))
+  if (items.length === 0) return ''
+
+  let payload = items.map((item) => {
+    let handler = _resolveHandler(item.type || 'file', typeHandlers)
+    if (handler.formatPayload) return handler.formatPayload(item)
+    return {
+      type: 'file',
+      path: item.path,
+      source: item.source,
+    }
+  })
+
+  return `[Attached Context]\n${JSON.stringify(payload, null, 2)}\n\n`
+}

package/chat/message-model.js

@@ -0,0 +1,156 @@
+import { escapeHtml, formatElapsed } from '../display/markdown-formatter.js';
+import { translate } from '../locale/index.js';
+
+export function buildSessionMetaHtml(text) {
+  if (!text) return '';
+  let chips = [];
+  let modeMatch = text.match(/- Mode:\s*(.+)/i);
+  if (modeMatch) {
+    let mode = modeMatch[1].trim();
+    let iconName = mode === 'yolo' ? 'bolt' : mode === 'plan' ? 'lock' : 'settings';
+    chips.push(`<span class="meta-chip"><span class="material-symbols-outlined meta-chip-icon">${iconName}</span> ${escapeHtml(mode)}</span>`);
+  }
+  let exitMatch = text.match(/- Exit code:\s*(\d+)/i);
+  if (exitMatch) {
+    let code = parseInt(exitMatch[1]);
+    let cls = code === 0 ? 'meta-ok' : 'meta-err';
+    chips.push(`<span class="meta-chip ${cls}">${escapeHtml(translate('chat.meta.exit', { code }))}</span>`);
+  }
+  let sidMatch = text.match(/- Session ID:\s*`([^`]+)`/i);
+  if (sidMatch) {
+    chips.push(`<span class="meta-chip meta-sid" title="${escapeHtml(sidMatch[1])}">${escapeHtml(sidMatch[1].substring(0, 12))}...</span>`);
+  }
+  let tokensMatch = text.match(/- Tokens:\s*(\d+)/i);
+  if (tokensMatch) {
+    chips.push(`<span class="meta-chip meta-info" title="${escapeHtml(translate('chat.meta.tokens'))}">${tokensMatch[1]} tks</span>`);
+  }
+  let costMatch = text.match(/- Cost:\s*\$?([\d.]+)/i);
+  if (costMatch) {
+    chips.push(`<span class="meta-chip meta-info" title="${escapeHtml(translate('chat.meta.cost'))}">$${costMatch[1]}</span>`);
+  }
+  return chips.join('');
+}
+
+export function buildWorkMetaHtml(meta) {
+  if (!meta) return '';
+  let items = [];
+  if (meta.mode) {
+    let iconName = meta.mode === 'yolo' ? 'bolt' : 'settings';
+    items.push(`<span class="meta-chip"><span class="material-symbols-outlined meta-chip-icon">${iconName}</span> ${escapeHtml(meta.mode)}</span>`);
+  }
+  if (meta.exitCode != null) {
+    let cls = meta.exitCode === 0 ? 'meta-ok' : 'meta-err';
+    items.push(`<span class="meta-chip ${cls}">${escapeHtml(translate('chat.meta.exit', { code: meta.exitCode }))}</span>`);
+  }
+  if (meta.sessionId) {
+    items.push(`<span class="meta-chip meta-sid" title="${escapeHtml(meta.sessionId)}">${escapeHtml(meta.sessionId.substring(0, 16))}...</span>`);
+  }
+  if (meta.tools) {
+    let key = meta.tools > 1 ? 'chat.meta.toolCalls' : 'chat.meta.toolCall';
+    items.push(`<span class="meta-chip">${escapeHtml(translate(key, { count: meta.tools }))}</span>`);
+  }
+  if (meta.tokens != null) items.push(`<span class="meta-chip meta-info">${meta.tokens} tks</span>`);
+  if (meta.cost != null) items.push(`<span class="meta-chip meta-info">$${meta.cost.toFixed(4)}</span>`);
+  if (meta.errors) items.push(`<span class="meta-chip meta-err">${escapeHtml(meta.errors)}</span>`);
+  return items.join('');
+}
+
+export function findPreviousAgentText(messages, fromIndex) {
+  for (let i = fromIndex - 1; i >= 0; i--) {
+    let msg = messages[i];
+    if (msg?.role === 'agent' && typeof msg.text === 'string' && msg.text.trim()) return msg.text;
+    if (msg?.role === 'user') break;
+  }
+  return '';
+}
+
+function compactText(value, maxLength = 96) {
+  let text = String(value || '').replace(/\s+/g, ' ').trim();
+  if (!text) return '';
+  return text.length > maxLength ? `${text.slice(0, maxLength - 3)}...` : text;
+}
+
+export function summarizeToolInput(input) {
+  if (input == null) return '';
+  if (typeof input === 'string') return compactText(input);
+  if (typeof input !== 'object') return compactText(input);
+  for (let key of ['command', 'description', 'prompt', 'question', 'path', 'file', 'name']) {
+    if (typeof input[key] === 'string' && input[key].trim()) return compactText(input[key]);
+  }
+  return compactText(JSON.stringify(input));
+}
+
+export function buildWorkSummaryHtml(msg, copyText) {
+  let metaHtml = buildWorkMetaHtml(msg?.meta);
+  let bodyHtml = metaHtml ? `<div class="work-body">${metaHtml}</div>` : '';
+  let copyBtn = copyText
+    ? `<button class="work-copy-btn" type="button" title="${escapeHtml(translate('chat.message.copyResponse'))}" data-copy-text="${escapeHtml(copyText)}"><span class="material-symbols-outlined">content_copy</span></button>`
+    : '';
+  let elapsed = formatElapsed(msg?.elapsed || 0);
+  return `<div class="work-summary-wrap"><details class="work-summary"><summary><span class="material-symbols-outlined work-summary-icon">check_circle</span>${escapeHtml(translate('chat.message.workedFor', { elapsed }))}${copyBtn}</summary>${bodyHtml}</details></div>`;
+}
+
+export function toChatMessageItem(msg, options = {}) {
+  return {
+    type: msg?.type || msg?.role,
+    role: msg?.role,
+    text: msg?.text || msg?.content || '',
+    isStreaming: Boolean(options.isLatestStreaming),
+    isLatestTool: Boolean(options.isLatestTool),
+    name: msg?.name || '',
+    input: msg?.input || null,
+    result: msg?.result || null,
+    done: Boolean(msg?.done),
+    elapsedText: formatElapsed(msg?.elapsed || 0),
+    status: msg?.status || '',
+    metaHtml: buildWorkMetaHtml(msg?.meta),
+    cardItems: Array.isArray(msg?.cardItems) ? msg.cardItems : [],
+    workSummaryHtml: '',
+    copyText: '',
+  };
+}
+
+export function buildChatMessageItems(messages = [], options = {}) {
+  let source = Array.isArray(messages) ? messages : [];
+  let hasActiveStream = Boolean(options.hasActiveStream);
+  let items = [];
+  let streamingBoards = [];
+  let lastAgentItem = null;
+  let lastStreamingIndex = -1;
+  let lastToolIndex = -1;
+
+  for (let i = 0; i < source.length; i++) {
+    let msg = source[i];
+    if (msg?.streaming) lastStreamingIndex = i;
+    if (msg?.role === 'tool') lastToolIndex = i;
+  }
+
+  for (let i = 0; i < source.length; i++) {
+    let msg = source[i];
+    let isLatestStreaming = hasActiveStream && i === lastStreamingIndex && Boolean(msg?.streaming);
+
+    if (msg?.role === 'thinking' && msg.done) {
+      let copyText = findPreviousAgentText(source, i);
+      if (lastAgentItem) {
+        lastAgentItem.workSummaryHtml = buildWorkSummaryHtml(msg, copyText);
+        continue;
+      }
+    }
+
+    let item = toChatMessageItem(msg, {
+      isLatestStreaming,
+      isLatestTool: i === lastToolIndex,
+    });
+    if (msg?.role === 'thinking' && msg.done) {
+      item.copyText = findPreviousAgentText(source, i);
+    }
+    items.push(item);
+
+    if (msg?.role === 'agent') lastAgentItem = item;
+    if (msg?.role === 'board' && item.isStreaming && item.cardItems?.length) {
+      streamingBoards.push(item.cardItems.map((card) => card.id).filter(Boolean));
+    }
+  }
+
+  return { items, streamingBoards };
+}

package/cli.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+import { fileURLToPath } from 'node:url';
+
+import { cmdDiscover } from './discover.js';
+
+let command = process.argv[2] || 'discover';
+let isMain = fileURLToPath(import.meta.url) === process.argv[1];
+
+if (isMain && command === 'discover') {
+  let result = await cmdDiscover({});
+  process.stdout.write(JSON.stringify(result, null, 2) + '\n');
+} else if (isMain) {
+  console.log(`symbiote-ui CLI
+
+Commands:
+  discover    Output provider metadata as JSON
+`);
+  if (command && command !== '--help' && command !== '-h') process.exit(1);
+}

package/control/Button/Button.css.js

@@ -0,0 +1,93 @@
+export default /*css*/ `
+sn-button {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sn-button-gap);
+  min-width: 0;
+  min-height: var(--sn-button-min-height);
+  padding: var(--sn-button-padding);
+  border: 1px solid var(--sn-button-border);
+  border-radius: var(--sn-button-radius);
+  background: var(--sn-button-bg);
+  color: var(--sn-button-color);
+  font-family: var(--sn-font);
+  font-size: var(--sn-button-font-size);
+  font-weight: var(--sn-button-font-weight);
+  line-height: var(--sn-button-line-height);
+  cursor: pointer;
+  user-select: none;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, filter 150ms ease;
+}
+
+sn-button[hidden] {
+  display: none !important;
+}
+
+sn-button:hover:not([disabled]) {
+  border-color: var(--sn-button-hover-border);
+  background: var(--sn-button-hover-bg);
+}
+
+sn-button:focus-visible {
+  outline: var(--sn-button-focus-ring);
+  outline-offset: 2px;
+}
+
+sn-button[disabled] {
+  cursor: not-allowed;
+  opacity: var(--sn-button-disabled-opacity);
+}
+
+sn-button[variant="primary"] {
+  border-color: var(--sn-button-primary-border);
+  background: var(--sn-button-primary-bg);
+  color: var(--sn-button-primary-color);
+}
+
+sn-button[variant="primary"]:hover:not([disabled]) {
+  filter: var(--sn-button-primary-hover-filter);
+}
+
+sn-button[variant="success"] {
+  border-color: var(--sn-button-success-border);
+  background: var(--sn-button-success-bg);
+  color: var(--sn-button-success-color);
+}
+
+sn-button[variant="success"]:hover:not([disabled]) {
+  border-color: var(--sn-button-success-hover-border);
+  background: var(--sn-button-success-hover-bg);
+  color: var(--sn-button-success-hover-color);
+}
+
+sn-button[variant="danger"] {
+  border-color: var(--sn-button-danger-border);
+  background: var(--sn-button-danger-bg);
+  color: var(--sn-button-danger-color);
+}
+
+sn-button[variant="danger"]:hover:not([disabled]) {
+  border-color: var(--sn-button-danger-hover-border);
+  background: var(--sn-button-danger-hover-bg);
+  color: var(--sn-button-danger-hover-color);
+}
+
+sn-button[variant="icon"] {
+  width: var(--sn-button-icon-size);
+  min-height: var(--sn-button-icon-size);
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--sn-text-dim);
+}
+
+sn-button[variant="icon"]:hover:not([disabled]) {
+  color: var(--sn-text);
+}
+
+sn-button .material-symbols-outlined {
+  font-size: var(--sn-button-icon-font-size);
+}
+`;

package/control/Button/Button.js

@@ -0,0 +1,78 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import template from './Button.tpl.js';
+import css from './Button.css.js';
+
+export class ActionButton extends Symbiote {
+  static observedAttributes = ['disabled'];
+
+  #disabled = false;
+
+  #onClick = (event) => {
+    if (!this.disabled) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+
+  #onKeyDown = (event) => {
+    if (this.disabled) return;
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    this.click();
+  };
+
+  constructor() {
+    super();
+    this.templateProcessors.add(slotProcessor);
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'button');
+    if (!this.hasAttribute('tabindex')) this.tabIndex = 0;
+    this.#disabled = this.hasAttribute('disabled');
+    this._syncDisabled(this.#disabled);
+    this.addEventListener('click', this.#onClick, { capture: true });
+    this.addEventListener('keydown', this.#onKeyDown);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.#onClick, { capture: true });
+    this.removeEventListener('keydown', this.#onKeyDown);
+    super.disconnectedCallback?.();
+  }
+
+  get disabled() {
+    return this.#disabled || this.hasAttribute('disabled');
+  }
+
+  set disabled(value) {
+    this.#disabled = Boolean(value);
+    this._syncDisabled(this.#disabled);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name !== 'disabled') {
+      super.attributeChangedCallback?.(name, oldValue, newValue);
+      return;
+    }
+    if (oldValue === newValue) return;
+    this.#disabled = newValue !== null;
+    this._syncDisabled(this.#disabled, { reflect: false });
+  }
+
+  _syncDisabled(value, options = {}) {
+    let disabled = Boolean(value);
+    if (options.reflect !== false) {
+      this.toggleAttribute('disabled', disabled);
+    }
+    this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    this.tabIndex = disabled ? -1 : 0;
+  }
+}
+
+ActionButton.template = template;
+ActionButton.rootStyles = css;
+ActionButton.reg('sn-button');
+
+export default ActionButton;

package/control/Button/Button.tpl.js

@@ -0,0 +1,3 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`<slot></slot>`;

package/control/Field/Field.css.js

@@ -0,0 +1,91 @@
+export default /*css*/ `
+sn-field {
+  display: block;
+  box-sizing: border-box;
+  margin-block-end: var(--sn-field-margin-block-end);
+  color: var(--sn-text);
+  font-family: var(--sn-font);
+}
+
+sn-field[hidden] {
+  display: none !important;
+}
+
+sn-field > label,
+sn-field > [slot="label"],
+sn-field > .sn-field-label {
+  display: block;
+  margin-block-end: var(--sn-field-label-margin-block-end);
+  color: var(--sn-field-label-color);
+  font-size: var(--sn-field-label-size);
+  font-weight: var(--sn-field-label-weight);
+  line-height: var(--sn-field-label-line-height);
+  text-transform: var(--sn-field-label-transform);
+}
+
+sn-field input,
+sn-field select,
+sn-field textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--sn-field-control-border);
+  border-radius: var(--sn-field-control-radius);
+  background: var(--sn-field-control-bg);
+  color: var(--sn-field-control-color);
+  padding: var(--sn-field-control-padding);
+  font-family: var(--sn-font);
+  font-size: var(--sn-field-control-font-size);
+  line-height: var(--sn-field-control-line-height);
+  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
+}
+
+sn-field input::placeholder,
+sn-field textarea::placeholder {
+  color: var(--sn-field-placeholder-color);
+}
+
+sn-field input:focus,
+sn-field select:focus,
+sn-field textarea:focus {
+  outline: none;
+  border-color: var(--sn-field-control-focus-border);
+  box-shadow: var(--sn-field-control-focus-shadow);
+}
+
+sn-field textarea {
+  min-height: var(--sn-field-textarea-min-height);
+  resize: vertical;
+}
+
+sn-field [slot="hint"],
+sn-field .sn-field-hint {
+  display: block;
+  margin-block-start: var(--sn-field-hint-margin-block-start);
+  color: var(--sn-field-hint-color);
+  font-size: var(--sn-field-hint-size);
+  line-height: var(--sn-field-hint-line-height);
+}
+
+sn-field[variant="inline"] {
+  display: flex;
+  align-items: center;
+  gap: var(--sn-field-inline-gap);
+}
+
+sn-field[variant="inline"] > label,
+sn-field[variant="inline"] > [slot="label"],
+sn-field[variant="inline"] > .sn-field-label {
+  margin-block-end: 0;
+}
+
+sn-field[variant="compact"] {
+  margin-block-end: var(--sn-field-compact-margin-block-end);
+}
+
+sn-field[variant="compact"] input,
+sn-field[variant="compact"] select,
+sn-field[variant="compact"] textarea {
+  padding: var(--sn-field-compact-control-padding);
+}
+`;

package/control/Field/Field.js

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

package/control/Field/Field.tpl.js

@@ -0,0 +1,3 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`<slot></slot>`;

package/core/Connection.js

@@ -0,0 +1,47 @@
+/**
+ * Connection — link between two node ports
+ *
+ * Uses symbiote-node naming: from/out/to/in
+ * Adds connection ID for selection/history support.
+ *
+ * @module symbiote-node/core/Connection
+ */
+
+import { uid } from './Socket.js';
+
+export class Connection {
+  /**
+   * @param {import('./Node.js').Node} sourceNode - Source node
+   * @param {string} sourceOutput - Output port key
+   * @param {import('./Node.js').Node} targetNode - Target node
+   * @param {string} targetInput - Input port key
+   */
+  constructor(sourceNode, sourceOutput, targetNode, targetInput) {
+    if (!sourceNode.outputs[sourceOutput]) {
+      throw new Error(`source node doesn't have output '${sourceOutput}'`);
+    }
+    if (!targetNode.inputs[targetInput]) {
+      throw new Error(`target node doesn't have input '${targetInput}'`);
+    }
+
+    /** @type {string} */
+    this.id = uid('conn');
+
+    /** @type {string} - Source node ID (symbiote-node: 'from') */
+    this.from = sourceNode.id;
+
+    /** @type {string} - Source output key (symbiote-node: 'out') */
+    this.out = sourceOutput;
+
+    /** @type {string} - Target node ID (symbiote-node: 'to') */
+    this.to = targetNode.id;
+
+    /** @type {string} - Target input key (symbiote-node: 'in') */
+    this.in = targetInput;
+
+    /** @type {boolean} */
+    this.selected = false;
+  }
+}
+
+export { Connection as default };