symbiote-ui 0.3.0-alpha.4

package/display/SourceViewer/SourceViewer.js

@@ -0,0 +1,418 @@
+import Symbiote from "@symbiotejs/symbiote";
+import "../CodeBlock/CodeBlock.js";
+import template from "./SourceViewer.tpl.js";
+import css from "./SourceViewer.css.js";
+import { translate } from "../../locale/index.js";
+
+const EXT_LANG = {
+  ".md": "md",
+  ".markdown": "md",
+  ".sql": "sql",
+  ".json": "json",
+  ".css": "css",
+  ".html": "html",
+  ".htm": "html",
+  ".xml": "xml",
+  ".yaml": "yaml",
+  ".yml": "yaml",
+  ".toml": "toml",
+  ".sh": "sh",
+  ".bash": "bash",
+  ".env": "env",
+  ".ini": "ini",
+  ".conf": "conf",
+  ".cfg": "cfg",
+  ".txt": "plain",
+  ".csv": "csv",
+  ".gitignore": "plain",
+  ".dockerignore": "plain",
+  ".editorconfig": "plain",
+  ".py": "python",
+  ".pyw": "python",
+  ".pyi": "python",
+  ".rb": "ruby",
+  ".rake": "ruby",
+  ".gemspec": "ruby",
+  ".go": "go",
+  ".rs": "rust",
+  ".java": "java",
+  ".kt": "kotlin",
+  ".kts": "kotlin",
+  ".swift": "swift",
+  ".c": "c",
+  ".h": "c",
+  ".cpp": "c",
+  ".hpp": "c",
+  ".cc": "c",
+  ".cxx": "c",
+  ".hh": "c",
+  ".cs": "csharp",
+  ".php": "php",
+  ".phtml": "php",
+  ".dart": "dart",
+  ".lua": "lua",
+  ".ts": "typescript",
+  ".tsx": "typescript",
+  ".graphql": "graphql",
+  ".gql": "graphql",
+  ".prisma": "prisma",
+  ".dockerfile": "dockerfile",
+  ".r": "plain",
+  ".scala": "java",
+  ".groovy": "java",
+  ".gradle": "java",
+  ".png": "image",
+  ".jpg": "image",
+  ".jpeg": "image",
+  ".gif": "image",
+  ".svg": "image",
+  ".webp": "image",
+  ".bmp": "image",
+  ".ico": "image",
+  ".pdf": "binary",
+  ".zip": "binary",
+  ".tar": "binary",
+  ".gz": "binary",
+  ".woff": "binary",
+  ".woff2": "binary",
+  ".ttf": "binary",
+  ".eot": "binary",
+  ".mp3": "binary",
+  ".mp4": "binary",
+  ".wav": "binary",
+  ".avi": "binary",
+  ".mov": "binary",
+};
+
+const FILE_LIKE_BASENAMES = new Set([
+  "Dockerfile",
+  "Makefile",
+  "Procfile",
+  "LICENSE",
+  "README",
+  "CHANGELOG",
+  "Gemfile",
+  "Rakefile",
+  "Vagrantfile",
+]);
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+function normalizeDirectoryPath(path) {
+  return String(path || "").replace(/^\.\//, "").replace(/\/$/, "");
+}
+
+export function getSourceLanguage(path) {
+  if (!path) return "js";
+  const base = path.split("/").pop() || "";
+  const dot = path.lastIndexOf(".");
+  if (dot >= 0) {
+    const ext = EXT_LANG[path.substring(dot).toLowerCase()];
+    if (ext) return ext;
+  }
+  if (base === "Dockerfile") return "dockerfile";
+  if (["Makefile", "Procfile", "LICENSE", "README", "CHANGELOG"].some((name) => base.startsWith(name))) {
+    return "plain";
+  }
+  return dot < 0 ? "plain" : "js";
+}
+
+export function isDirectoryLikePath(path, directoryIndex = null) {
+  if (!path) return false;
+  const norm = normalizeDirectoryPath(path);
+  const base = norm.split("/").pop() || "";
+  const pathLooksLikeDir = path.endsWith("/") || (!path.includes(".") && !FILE_LIKE_BASENAMES.has(base));
+  if (pathLooksLikeDir) return true;
+  if (!directoryIndex) return false;
+
+  const directories = Array.isArray(directoryIndex.directories)
+    ? directoryIndex.directories
+    : [];
+  for (const dir of directories) {
+    const normalized = normalizeDirectoryPath(dir);
+    if (normalized === norm || normalized.startsWith(`${norm}/`)) return true;
+  }
+  return false;
+}
+
+export function buildDirectoryInfo(path, directoryInfo = null) {
+  const norm = normalizeDirectoryPath(path);
+  const lines = [`Directory: ${norm || "."}`, "-".repeat(60), ""];
+  if (!directoryInfo) {
+    lines.push("Directory metadata is not available.");
+    return lines.join("\n");
+  }
+
+  const subdirectories = Array.from(directoryInfo.subdirectories || []).map(String).filter(Boolean).sort();
+  const directFiles = Array.from(directoryInfo.files || []).map(String).filter(Boolean).sort();
+  const fileTypes = directoryInfo.fileTypes && typeof directoryInfo.fileTypes === "object"
+    ? directoryInfo.fileTypes
+    : {};
+
+  if (subdirectories.length > 0) {
+    lines.push(`Subdirectories (${subdirectories.length}):`);
+    for (const dir of subdirectories) lines.push(`  - ${dir}/`);
+    lines.push("");
+  }
+
+  if (directFiles.length > 0) {
+    lines.push(`Files (${directFiles.length}):`);
+    for (const file of directFiles) lines.push(`  - ${file}`);
+    lines.push("");
+  }
+
+  const sortedExt = Object.entries(fileTypes).sort((a, b) => b[1] - a[1]);
+  if (sortedExt.length > 0) {
+    lines.push("File types:");
+    for (const [ext, count] of sortedExt) {
+      const bar = "#".repeat(Math.min(count, 30));
+      lines.push(`  ${ext.padEnd(12)} ${String(count).padStart(4)}  ${bar}`);
+    }
+    lines.push("");
+  }
+
+  lines.push("-".repeat(60));
+  const totalFiles = Number.isFinite(directoryInfo.totalFiles) ? directoryInfo.totalFiles : directFiles.length;
+  const totalSubdirectories = Number.isFinite(directoryInfo.totalSubdirectories)
+    ? directoryInfo.totalSubdirectories
+    : subdirectories.length;
+  lines.push(`Total: ${totalFiles} files across ${totalSubdirectories} subdirectories`);
+
+  if (directoryInfo.symbolCount > 0) {
+    lines.push(`Symbols: ${directoryInfo.symbolCount} exported nodes in this directory`);
+  }
+
+  return lines.join("\n");
+}
+
+export class SourceViewer extends Symbiote {
+  init$ = {
+    filename: "Select a file",
+    hasFile: false,
+    viewMode: "source",
+    modeLabel: "source",
+    statsText: "",
+    showToggle: false,
+    showGraphAction: true,
+    showGraphTitle: translate('sourceViewer.showInGraph'),
+    toggleModeTitle: translate('sourceViewer.toggleViewMode'),
+    graphLabel: translate('sourceViewer.graphLabel'),
+    toggleIcon: "compress",
+    onShowGraph: () => emit(this, "source-viewer-show-graph", { path: this._currentPath }),
+    onToggleMode: () => this.toggleMode(),
+  };
+
+  _currentPath = null;
+  _fileData = null;
+  _baseStatsText = "";
+  _transformStatsText = "";
+  _transformCache = null;
+  _loadingTransform = false;
+  _isReadable = true;
+  _transformSource = null;
+
+  renderCallback() {
+    this.sub("hasFile", (value) => {
+      this.toggleAttribute("has-file", value);
+    });
+    this.sub("viewMode", (mode) => {
+      const lang = this._fileData?.lang || getSourceLanguage(this._currentPath);
+      this.toggleAttribute("mode-raw", mode !== "source");
+      if (lang === "md") {
+        this.$.modeLabel = mode === "rendered" ? "rendered" : "source";
+        this.$.toggleIcon = mode === "rendered" ? "article" : "code";
+      } else {
+        this.$.modeLabel = mode === "source" ? "source" : this._isReadable ? "compact" : "expanded";
+        this.$.toggleIcon = this._isReadable ? "compress" : "open_in_full";
+      }
+    });
+  }
+
+  getCodeBlock() {
+    return this.querySelector("code-block");
+  }
+
+  setImageApiBase(base) {
+    this.getCodeBlock()?.setImageApiBase(base);
+  }
+
+  showEmpty(filename = "Select a file") {
+    this.$.filename = filename;
+    this.$.hasFile = false;
+    this.$.statsText = "";
+    this.$.showToggle = false;
+    this._currentPath = null;
+    this._fileData = null;
+    this._transformSource = null;
+    this.getCodeBlock()?.clearDiagnostics?.();
+  }
+
+  showDirectory(path, text) {
+    this._showPlain(path, text, "directory");
+  }
+
+  showBinary(path, text = `// Binary file: ${path}\n// Cannot display binary content`) {
+    this._showPlain(path, text, "binary");
+  }
+
+  showError(path, error) {
+    const message = error instanceof Error ? error.message : String(error || "Unknown error");
+    this._showPlain(path, `// Error: ${message}`, "error");
+  }
+
+  showImage(path) {
+    this._resetForPath(path);
+    this.setImageApiBase(this.getAttribute("image-api-base") || "");
+    const codeBlock = this.getCodeBlock();
+    if (codeBlock) {
+      codeBlock.$.lang = "image";
+      codeBlock.setBasePath(path);
+      codeBlock.$.code = path;
+    }
+    this.$.viewMode = "rendered";
+    this.$.modeLabel = "image";
+    this.$.showToggle = false;
+    this.$.hasFile = true;
+  }
+
+  showFile(options = {}) {
+    const path = options.path || "";
+    const lang = options.lang || getSourceLanguage(path);
+    const raw = options.raw ?? options.code ?? "";
+    this._resetForPath(path);
+    this._isReadable = options.isReadable !== false;
+    this._baseStatsText = options.statsText || "";
+    this._transformSource = typeof options.transform === "function" ? options.transform : null;
+    this._fileData = { raw, lang };
+    this.$.statsText = this._baseStatsText;
+
+    const codeBlock = this.getCodeBlock();
+    if (lang === "md" || lang === "markdown") {
+      this.$.viewMode = "rendered";
+      this.$.modeLabel = "rendered";
+      this.$.showToggle = true;
+      if (codeBlock) {
+        codeBlock.$.lang = "md";
+        codeBlock.setBasePath(path);
+        codeBlock.$.code = raw;
+      }
+    } else {
+      this.$.viewMode = "source";
+      this.$.modeLabel = "source";
+      this.$.showToggle = Boolean(this._transformSource);
+      if (codeBlock) {
+        codeBlock.$.lang = lang;
+        codeBlock.$.code = raw;
+      }
+    }
+    this.$.hasFile = true;
+  }
+
+  async toggleMode() {
+    if (!this._fileData) return;
+    const lang = this._fileData.lang;
+    if (lang === "md" || lang === "markdown") {
+      this.$.viewMode = this.$.viewMode === "rendered" ? "source" : "rendered";
+      await this._showCurrentMode();
+      emit(this, "source-viewer-toggle-mode", { path: this._currentPath, mode: this.$.viewMode });
+      return;
+    }
+    this.$.viewMode = this.$.viewMode === "source" ? "transformed" : "source";
+    await this._showCurrentMode();
+    emit(this, "source-viewer-toggle-mode", { path: this._currentPath, mode: this.$.viewMode });
+  }
+
+  async _showCurrentMode() {
+    const codeBlock = this.getCodeBlock();
+    if (!this._fileData || !codeBlock) return;
+    const lang = this._fileData.lang;
+
+    if (lang === "md" || lang === "markdown") {
+      if (this.$.viewMode === "rendered") {
+        codeBlock.$.lang = "md";
+        codeBlock.setBasePath(this._currentPath);
+      } else {
+        codeBlock.$.lang = "plain";
+      }
+      codeBlock.$.code = this._fileData.raw;
+      return;
+    }
+
+    codeBlock.$.lang = lang;
+    if (this.$.viewMode !== "transformed") {
+      this.$.statsText = this._baseStatsText;
+      codeBlock.$.code = this._fileData.raw;
+      return;
+    }
+
+    if (this._transformCache) {
+      codeBlock.$.code = this._transformCache;
+      if (this._transformStatsText) this.$.statsText = this._transformStatsText;
+      return;
+    }
+    if (!this._transformSource || this._loadingTransform) return;
+
+    this._loadingTransform = true;
+    codeBlock.$.code = this._isReadable ? "// Compressing..." : "// Expanding...";
+    try {
+      const result = await this._transformSource({
+        path: this._currentPath,
+        lang,
+        isReadable: this._isReadable,
+        source: this._fileData.raw,
+      });
+      this._transformCache = result?.code || (this._isReadable ? "// Compression unavailable" : "// Expand unavailable");
+      this._transformStatsText = result?.statsText || "";
+      if (this._transformStatsText) this.$.statsText = this._transformStatsText;
+      codeBlock.$.code = this._transformCache;
+    } catch {
+      codeBlock.$.code = this._isReadable ? "// Compression failed" : "// Expand failed";
+    } finally {
+      this._loadingTransform = false;
+    }
+  }
+
+  _showPlain(path, text, label) {
+    this._resetForPath(path);
+    const codeBlock = this.getCodeBlock();
+    if (codeBlock) {
+      codeBlock.$.lang = "plain";
+      codeBlock.$.code = text;
+    }
+    this.$.viewMode = "source";
+    this.$.modeLabel = label;
+    this.$.showToggle = false;
+    this.$.hasFile = true;
+  }
+
+  _resetForPath(path) {
+    this.$.filename = path || "Select a file";
+    this.$.hasFile = false;
+    this.$.statsText = "";
+    this._baseStatsText = "";
+    this._transformStatsText = "";
+    this._transformCache = null;
+    this._loadingTransform = false;
+    this._currentPath = path;
+    this._fileData = null;
+    this.getCodeBlock()?.clearDiagnostics?.();
+  }
+
+  scrollToLine(line) {
+    this.getCodeBlock()?.scrollToLine?.(line);
+  }
+
+  setDiagnostics(messages) {
+    this.getCodeBlock()?.setDiagnostics?.(messages);
+  }
+
+  clearDiagnostics() {
+    this.getCodeBlock()?.clearDiagnostics?.();
+  }
+}
+
+SourceViewer.template = template;
+SourceViewer.rootStyles = css;
+SourceViewer.reg("source-viewer");

package/display/SourceViewer/SourceViewer.tpl.js

@@ -0,0 +1,17 @@
+export default `
+  <div class="sv-header">
+    <span class="sv-filename" bind="textContent: filename"></span>
+    <div class="sv-controls">
+      <span class="sv-stats" bind="textContent: statsText"></span>
+      <button class="sv-action" bind="onclick: onShowGraph; hidden: !showGraphAction; title: showGraphTitle">
+        <span class="material-symbols-outlined icon-sm">account_tree</span>
+        <span class="sv-action-label" bind="textContent: graphLabel"></span>
+      </button>
+      <button class="sv-action" bind="onclick: onToggleMode; hidden: !showToggle; title: toggleModeTitle">
+        <span class="material-symbols-outlined icon-sm" bind="textContent: toggleIcon"></span>
+        <span class="sv-action-label" bind="textContent: modeLabel"></span>
+      </button>
+    </div>
+  </div>
+  <code-block></code-block>
+`;

package/display/StatusRibbon/StatusRibbon.css.js

@@ -0,0 +1,73 @@
+export default `
+:host {
+  display: block;
+}
+
+  sn-status-ribbon {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    z-index: 9999;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.4s ease, transform 0.4s ease;
+  }
+
+  sn-status-ribbon[visible] {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .fr-inner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 20px;
+    border-radius: 24px;
+    background: var(--sn-bg-overlay);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--sn-cat-server);
+    box-shadow: var(--sn-shadow-lg), var(--sn-accent-glow);
+    font-family: var(--sn-font-ui);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--sn-text);
+    white-space: nowrap;
+    max-width: 500px;
+  }
+
+  .fr-icon {
+    font-family: 'Material Symbols Outlined';
+    font-size: 16px;
+    color: var(--sn-cat-server);
+    animation: fr-pulse 2s ease-in-out infinite;
+  }
+
+  .fr-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .fr-dots::after {
+    content: '...';
+    animation: fr-dots 1.5s steps(3) infinite;
+    display: inline-block;
+    width: 16px;
+    text-align: left;
+    color: var(--sn-text-dim);
+  }
+
+  @keyframes fr-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  @keyframes fr-dots {
+    0% { content: ''; }
+    33% { content: '.'; }
+    66% { content: '..'; }
+    100% { content: '...'; }
+  }
+`

package/display/StatusRibbon/StatusRibbon.js

@@ -0,0 +1,87 @@
+import Symbiote from '@symbiotejs/symbiote'
+import template from './StatusRibbon.tpl.js'
+import css from './StatusRibbon.css.js'
+
+export class StatusRibbon extends Symbiote {
+  init$ = {
+    statusText: '',
+    visible: false,
+    statusEvent: 'follow-status-changed',
+    stateEvent: 'follow-state-changed',
+    fadeTimeout: 4000
+  }
+
+  _fadeTimer = null
+  _eventTarget = null
+
+  initCallback() {
+    this._eventTarget = window
+  }
+
+  renderCallback() {
+    this.sub('visible', (v) => {
+      this.toggleAttribute('visible', v)
+    })
+
+    const statusHandler = (e) => {
+      const text = e.detail?.text || ''
+      if (!text) {
+        this.$.visible = false
+        return
+      }
+      this.$.statusText = text
+      this.$.visible = true
+
+      if (this._fadeTimer) clearTimeout(this._fadeTimer)
+      this._fadeTimer = setTimeout(() => {
+        this.$.visible = false
+      }, this.$.fadeTimeout)
+    }
+
+    const stateHandler = (e) => {
+      if (!e.detail?.enabled) {
+        this.$.visible = false
+        this.$.statusText = ''
+        if (this._fadeTimer) {
+          clearTimeout(this._fadeTimer)
+          this._fadeTimer = null
+        }
+      }
+    }
+
+    this.sub('statusEvent', (evtName) => {
+      if (this._statusCleanup) this._statusCleanup()
+      const target = this.eventTarget || window
+      target.addEventListener(evtName, statusHandler)
+      this._statusCleanup = () => target.removeEventListener(evtName, statusHandler)
+    })
+
+    this.sub('stateEvent', (evtName) => {
+      if (this._stateCleanup) this._stateCleanup()
+      const target = this.eventTarget || window
+      target.addEventListener(evtName, stateHandler)
+      this._stateCleanup = () => target.removeEventListener(evtName, stateHandler)
+    })
+  }
+
+  set eventTarget(target) {
+    this._eventTarget = target
+    this.$.statusEvent = this.$.statusEvent
+    this.$.stateEvent = this.$.stateEvent
+  }
+
+  get eventTarget() {
+    return this._eventTarget
+  }
+
+  destroyCallback() {
+    if (this._statusCleanup) this._statusCleanup()
+    if (this._stateCleanup) this._stateCleanup()
+    if (this._fadeTimer) clearTimeout(this._fadeTimer)
+  }
+}
+
+StatusRibbon.template = template
+StatusRibbon.rootStyles = css
+
+StatusRibbon.reg('sn-status-ribbon')

package/display/StatusRibbon/StatusRibbon.tpl.js

@@ -0,0 +1,7 @@
+export default `
+<div class="fr-inner">
+  <span class="fr-icon">smart_toy</span>
+  <span class="fr-text" bind="textContent: statusText"></span>
+  <span class="fr-dots"></span>
+</div>
+`

package/display/event-feed-adapter.js

@@ -0,0 +1,72 @@
+export function createEventFeedAdapter(options = {}) {
+  const codeTools = new Set(options.codeTools || [])
+  const graphTools = new Set(options.graphTools || [])
+  const listTools = new Set(options.listTools || [])
+
+  function parseOutput(output) {
+    try {
+      return JSON.parse(output)
+    } catch {
+      return output
+    }
+  }
+
+  function toPreviewGraph(data) {
+    if (!data || typeof data !== 'object' || Array.isArray(data)) return data
+    if (Array.isArray(data.nodes)) return data
+
+    let nodeMap = data.n && typeof data.n === 'object' ? data.n : {}
+    let nodes = Object.entries(nodeMap).map(([id, node]) => ({
+      id,
+      label: node?.label || node?.name || node?.title || id,
+      kind: node?.kind || node?.type || 'node',
+      description: node?.description || node?.summary || '',
+    }))
+
+    let edges = Array.isArray(data.e) ? data.e.map((edge, index) => ({
+      id: edge.id || `edge-${index + 1}`,
+      source: edge.source || edge.from || edge.a || '',
+      target: edge.target || edge.to || edge.b || '',
+      label: edge.label || edge.name || '',
+      kind: edge.kind || edge.type || 'edge',
+    })) : []
+
+    return { nodes, edges }
+  }
+
+  function buildPreview(event) {
+    if (event.type === 'tool_call') return { type: 'empty' }
+    if (event.success === false || !event.output) {
+      return { type: 'error', value: event.output || 'Error' }
+    }
+
+    let output = String(event.output ?? '')
+    let data = parseOutput(output)
+
+    if (codeTools.has(event.tool)) return { type: 'code', value: output, lang: 'plain' }
+    if (graphTools.has(event.tool)) return { type: 'graph', value: toPreviewGraph(data), title: 'Graph output' }
+    if (listTools.has(event.tool)) return { type: 'list', value: data, title: 'List output' }
+    return { type: 'raw', value: output }
+  }
+
+  function toToolEventFeedItem(event) {
+    return {
+      direction: event.type === 'tool_call' ? 'call' : 'result',
+      tool: event.tool,
+      timestamp: event.ts,
+      durationText: event.duration_ms ? `${event.duration_ms}ms` : '',
+      success: event.success !== false,
+      args: event.args || {},
+      preview: buildPreview(event),
+    }
+  }
+
+  function toToolEventFeedItems(events) {
+    return Array.isArray(events) ? events.map(toToolEventFeedItem) : []
+  }
+
+  return {
+    toToolEventFeedItem,
+    toToolEventFeedItems
+  }
+}