@webda/debug 4.0.0-beta.5 → 4.0.0-beta.7

package/webui/components/models.js

@@ -1,213 +0,0 @@
-import { h } from "preact";
-import { useState } from "preact/hooks";
-import htm from "htm";
-import { ModelGraph } from "./model-graph.js";
-
-const html = htm.bind(h);
-
-export function ModelsPanel({ data }) {
-  const [selected, setSelected] = useState("__graph");
-  const [filter, setFilter] = useState("");
-  const models = data || [];
-  const detail = selected && selected !== "__graph" ? models.find((m) => m.id === selected) || null : null;
-
-  const filtered = models.filter(
-    (m) => (m.id || m.name || "").toLowerCase().includes(filter.toLowerCase())
-  );
-
-  return html`
-    <div class="split-panel">
-      <div class="split-left">
-        <input
-          class="search-input"
-          placeholder="Filter models..."
-          value=${filter}
-          onInput=${(e) => setFilter(e.target.value)}
-        />
-        <div
-          class="list-item ${selected === "__graph" ? "active" : ""}"
-          onClick=${() => setSelected("__graph")}
-          style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);margin-bottom:0.5rem;padding-bottom:0.625rem"
-        >
-          <span style="font-weight:500">Model Graph</span>
-          <span class="badge badge-muted">${models.length}</span>
-        </div>
-        ${filtered.map(
-          (m) => html`
-            <div
-              key=${m.id || m.name}
-              class="list-item ${selected === (m.id || m.name) ? "active" : ""}"
-              onClick=${() => setSelected(m.id || m.name)}
-            >
-              ${m.id || m.name}
-            </div>
-          `
-        )}
-        ${filtered.length === 0 && html`<div style="color: var(--text-muted); padding: 0.5rem;">No models found</div>`}
-      </div>
-      <div class="split-right">
-        ${selected === "__graph"
-          ? html`<${ModelGraph} models=${models} selectedId=${null} onSelect=${id => setSelected(id)} />`
-          : detail ? html`<${ModelDetail} model=${detail} onSelect=${id => setSelected(id)} />`
-          : html`
-            <div style="color: var(--text-muted); padding: 2rem; text-align: center;">
-              Select a model to view details
-            </div>
-          `}
-      </div>
-    </div>
-  `;
-}
-
-function SchemaTab({ schemas }) {
-  const [activeTab, setActiveTab] = useState("Input");
-  const tabs = ["Input", "Output", "Stored"].filter((t) => schemas?.[t]);
-
-  if (tabs.length === 0) {
-    return html`<div style="color: var(--text-muted); padding: 0.5rem;">No schemas available</div>`;
-  }
-
-  // Default to first available tab if active isn't available
-  const current = tabs.includes(activeTab) ? activeTab : tabs[0];
-
-  return html`
-    <div>
-      <div style="display: flex; gap: 0; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border);">
-        ${tabs.map(
-          (tab) => html`
-            <button
-              key=${tab}
-              onClick=${() => setActiveTab(tab)}
-              style="
-                padding: 6px 16px;
-                background: ${current === tab ? "var(--bg-tertiary)" : "transparent"};
-                color: ${current === tab ? "var(--accent)" : "var(--text-muted)"};
-                border: none;
-                border-bottom: 2px solid ${current === tab ? "var(--accent)" : "transparent"};
-                cursor: pointer;
-                font-size: 0.875rem;
-                font-weight: ${current === tab ? "600" : "400"};
-              "
-            >
-              ${tab}
-            </button>
-          `
-        )}
-      </div>
-      <pre class="mono" style="
-        background: var(--bg-secondary);
-        padding: 1rem;
-        border-radius: 4px;
-        overflow: auto;
-        max-height: 400px;
-        font-size: 0.8125rem;
-        line-height: 1.5;
-      ">${JSON.stringify(schemas[current], null, 2)}</pre>
-    </div>
-  `;
-}
-
-function ModelLink({ id, onSelect }) {
-  return html`<a href="#" class="mono" style="color:var(--accent);text-decoration:none" onClick=${e => { e.preventDefault(); onSelect(id); }}>${id.split("/").pop()}</a>`;
-}
-
-function RelationsTable({ relations, onSelect }) {
-  const rows = [];
-  if (relations.parent) {
-    rows.push({ name: relations.parent.attribute, type: "parent", target: relations.parent.model });
-  }
-  (relations.links || []).forEach(l => rows.push({ name: l.attribute, type: l.type || "link", target: l.model }));
-  (relations.queries || []).forEach(q => rows.push({ name: q.attribute, type: "query", target: q.model }));
-  (relations.maps || []).forEach(m => rows.push({ name: m.attribute, type: "map", target: m.model }));
-  (relations.children || []).forEach(c => rows.push({ name: "", type: "child", target: c }));
-  (relations.binaries || []).forEach(b => rows.push({ name: b.attribute, type: `binary (${b.cardinality})`, target: "" }));
-  (relations.behaviors || []).forEach(b => rows.push({ name: b.attribute, type: "behavior", target: b.behavior }));
-  if (rows.length === 0) return null;
-  return html`
-    <div class="detail-section">
-      <h3>Relations</h3>
-      <div class="table-container">
-        <table>
-          <thead><tr><th>Attribute</th><th>Type</th><th>Target</th></tr></thead>
-          <tbody>
-            ${rows.map((r, i) => html`
-              <tr key=${i}>
-                <td class="mono">${r.name || "-"}</td>
-                <td><span class="badge ${r.type === "parent" ? "badge-purple" : r.type === "child" ? "badge-purple" : r.type === "query" ? "badge-green" : r.type.startsWith("binary") ? "badge-orange" : r.type === "behavior" ? "badge-orange" : "badge-blue"}">${r.type}</span></td>
-                <td>${r.target ? html`<${ModelLink} id=${r.target} onSelect=${onSelect} />` : "-"}</td>
-              </tr>
-            `)}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  `;
-}
-
-function ModelDetail({ model, onSelect }) {
-  const ancestors = model.metadata?.Ancestors || [];
-  const subclasses = model.metadata?.Subclasses || [];
-
-  return html`
-    <div>
-      <h2 style="margin-bottom:0.5rem;color:var(--accent)">${model.id?.split("/").pop()}</h2>
-      <div class="mono" style="font-size:0.75rem;color:var(--text-muted);margin-bottom:1rem">${model.id}</div>
-
-      <div style="display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center">
-        ${model.store && html`
-          <div style="background:var(--bg-tertiary);padding:0.375rem 0.625rem;border-radius:4px;font-size:0.8125rem">
-            <span style="color:var(--text-muted)">Store: </span>
-            <span class="mono">${model.store}</span>
-            ${model.storeType && html`<span style="color:var(--text-muted)"> (${model.storeType})</span>`}
-          </div>
-        `}
-        ${model.plural && html`
-          <div style="background:var(--bg-tertiary);padding:0.375rem 0.625rem;border-radius:4px;font-size:0.8125rem">
-            <span style="color:var(--text-muted)">Plural: </span>
-            <span class="mono">${model.plural}</span>
-          </div>
-        `}
-      </div>
-
-      ${ancestors.length > 0 && html`
-        <div class="detail-section">
-          <h3>Inheritance</h3>
-          <div style="display:flex;align-items:center;gap:0.375rem;flex-wrap:wrap;font-size:0.8125rem">
-            ${[...ancestors].reverse().map(a => html`
-              <${ModelLink} key=${a} id=${a} onSelect=${onSelect} />
-              <span style="color:var(--text-muted)">\u2192</span>
-            `)}
-            <span class="mono" style="font-weight:600;color:var(--accent)">${model.id?.split("/").pop()}</span>
-            ${subclasses.length > 0 && html`
-              <span style="color:var(--text-muted)">\u2192</span>
-              ${subclasses.map((s, i) => html`
-                <${ModelLink} key=${s} id=${s} onSelect=${onSelect} />
-                ${i < subclasses.length - 1 && html`<span style="color:var(--text-muted)">,</span>`}
-              `)}
-            `}
-          </div>
-        </div>
-      `}
-
-      <${RelationsTable} relations=${model.relations || {}} onSelect=${onSelect} />
-
-      ${model.actions && model.actions.length > 0 && html`
-        <div class="detail-section">
-          <h3>Actions</h3>
-          <div style="display:flex;gap:0.375rem;flex-wrap:wrap">
-            ${model.actions.map(a => html`
-              <span key=${typeof a === "string" ? a : a.name} class="badge badge-blue">${typeof a === "string" ? a : a.name}</span>
-            `)}
-          </div>
-        </div>
-      `}
-
-      ${model.schemas && html`
-        <div class="detail-section">
-          <h3>Schemas</h3>
-          <${SchemaTab} schemas=${model.schemas} />
-        </div>
-      `}
-    </div>
-  `;
-}

package/webui/components/operations.js

@@ -1,315 +0,0 @@
-import { h } from "preact";
-import { useState, useMemo } from "preact/hooks";
-import htm from "htm";
-import { SchemaForm } from "./schema-form.js";
-
-const html = htm.bind(h);
-
-/**
- * Generate a random example value from a JSON Schema property.
- */
-function randomValue(schema, name) {
-  if (!schema) return null;
-  if (schema.enum) return schema.enum[Math.floor(Math.random() * schema.enum.length)];
-  if (schema.const) return schema.const;
-  switch (schema.type) {
-    case "string":
-      if (schema.format === "email") return "user@example.com";
-      if (schema.format === "uri" || schema.format === "url") return "https://example.com";
-      if (schema.format === "date-time") return new Date().toISOString();
-      if (schema.format === "date") return new Date().toISOString().split("T")[0];
-      if (schema.format === "uuid") return crypto.randomUUID();
-      if (schema.pattern) return `match-${name || "value"}`;
-      if (schema.minLength) return (name || "text").padEnd(schema.minLength, "x");
-      return name || "string-value";
-    case "number":
-    case "integer":
-      const min = schema.minimum ?? 0;
-      const max = schema.maximum ?? 100;
-      return schema.type === "integer" ? Math.floor(Math.random() * (max - min) + min) : +(Math.random() * (max - min) + min).toFixed(2);
-    case "boolean":
-      return Math.random() > 0.5;
-    case "array":
-      const item = schema.items ? randomValue(schema.items, name) : "item";
-      return [item, randomValue(schema.items, name)].filter(Boolean);
-    case "object":
-      if (!schema.properties) return {};
-      const obj = {};
-      for (const [k, v] of Object.entries(schema.properties)) {
-        obj[k] = randomValue(v, k);
-      }
-      return obj;
-    default:
-      return null;
-  }
-}
-
-export function OperationsPanel({ data }) {
-  const [filter, setFilter] = useState("");
-  const [selected, setSelected] = useState(null);
-  const [activeTab, setActiveTab] = useState("form");
-  const [formValues, setFormValues] = useState({});
-  const operations = data || [];
-
-  const filtered = operations.filter(
-    (o) => (o.id || "").toLowerCase().includes(filter.toLowerCase())
-  );
-
-  const detail = selected ? operations.find(o => o.id === selected) : null;
-
-  const exampleOutput = useMemo(() => {
-    if (!detail?.outputSchema) return null;
-    return randomValue(detail.outputSchema, "result");
-  }, [detail?.id, detail?.outputSchema]);
-
-  return html`
-    <div class="split-panel">
-      <div class="split-left">
-        <input
-          class="search-input"
-          placeholder="Filter operations..."
-          value=${filter}
-          onInput=${(e) => setFilter(e.target.value)}
-        />
-        ${filtered.map(o => html`
-          <div
-            key=${o.id}
-            class="list-item ${selected === o.id ? "active" : ""}"
-            onClick=${() => { setSelected(o.id); setFormValues({}); setActiveTab("form"); }}
-          >
-            <div>${o.id}</div>
-            <div style="font-size:0.6875rem;color:var(--text-muted)">
-              ${o.input && o.input !== "void" ? o.input.split("/").pop().split(".").pop() : "void"}
-              ${" → "}
-              ${o.output && o.output !== "void" ? o.output.split("/").pop().split(".").pop() : "void"}
-            </div>
-            ${o.rest?.method && html`
-              <div style="font-size:0.625rem;margin-top:0.125rem;display:flex;align-items:center;gap:0.25rem;min-width:0">
-                <span class="badge method-${o.rest.method.toLowerCase()}" style="font-size:0.5625rem;padding:0.0625rem 0.25rem;flex-shrink:0">${o.rest.method.toUpperCase()}</span>
-                <span class="mono" style="color:var(--text-muted);opacity:0.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${o.rest.url || o.rest.path || "/"}</span>
-              </div>
-            `}
-          </div>
-        `)}
-        ${filtered.length === 0 && html`<div style="color:var(--text-muted);padding:0.5rem">No operations found</div>`}
-      </div>
-      <div class="split-right">
-        ${detail ? html`<${OperationDetail}
-          op=${detail}
-          activeTab=${activeTab}
-          setActiveTab=${setActiveTab}
-          formValues=${formValues}
-          setFormValues=${setFormValues}
-          exampleOutput=${exampleOutput}
-        />` : html`
-          <div style="color:var(--text-muted);padding:2rem;text-align:center">
-            Select an operation to view details
-          </div>
-        `}
-      </div>
-    </div>
-  `;
-}
-
-/**
- * Lightweight JS syntax highlighter — no external dependencies.
- * Tokenizes into comments, strings, keywords, numbers, and punctuation.
- */
-function highlightJS(code) {
-  const keywords = new Set([
-    "async","await","break","case","catch","class","const","continue","debugger","default",
-    "delete","do","else","export","extends","finally","for","function","if","import","in",
-    "instanceof","let","new","of","return","static","super","switch","this","throw","try",
-    "typeof","var","void","while","with","yield","from","true","false","null","undefined"
-  ]);
-  const tokens = [];
-  let i = 0;
-  while (i < code.length) {
-    // Line comments
-    if (code[i] === "/" && code[i + 1] === "/") {
-      const end = code.indexOf("\n", i);
-      tokens.push({ type: "comment", value: code.slice(i, end === -1 ? undefined : end) });
-      i = end === -1 ? code.length : end;
-      continue;
-    }
-    // Block comments
-    if (code[i] === "/" && code[i + 1] === "*") {
-      const end = code.indexOf("*/", i + 2);
-      tokens.push({ type: "comment", value: code.slice(i, end === -1 ? undefined : end + 2) });
-      i = end === -1 ? code.length : end + 2;
-      continue;
-    }
-    // Strings
-    if (code[i] === '"' || code[i] === "'" || code[i] === "`") {
-      const q = code[i];
-      let j = i + 1;
-      while (j < code.length && code[j] !== q) { if (code[j] === "\\") j++; j++; }
-      tokens.push({ type: "string", value: code.slice(i, j + 1) });
-      i = j + 1;
-      continue;
-    }
-    // Numbers
-    if (/[0-9]/.test(code[i]) && (i === 0 || /[^a-zA-Z_$]/.test(code[i - 1]))) {
-      let j = i;
-      while (j < code.length && /[0-9a-fA-FxXoObBeE._n]/.test(code[j])) j++;
-      tokens.push({ type: "number", value: code.slice(i, j) });
-      i = j;
-      continue;
-    }
-    // Words (identifiers / keywords)
-    if (/[a-zA-Z_$]/.test(code[i])) {
-      let j = i;
-      while (j < code.length && /[a-zA-Z0-9_$]/.test(code[j])) j++;
-      const word = code.slice(i, j);
-      tokens.push({ type: keywords.has(word) ? "keyword" : "ident", value: word });
-      i = j;
-      continue;
-    }
-    // Punctuation / operators
-    tokens.push({ type: "punct", value: code[i] });
-    i++;
-  }
-  return tokens;
-}
-
-function CodeBlock({ code }) {
-  const tokens = useMemo(() => highlightJS(code), [code]);
-  return html`<pre class="code-block"><code>${tokens.map((t, i) =>
-    t.type === "comment" ? html`<span key=${i} class="hl-comment">${t.value}</span>`
-    : t.type === "string" ? html`<span key=${i} class="hl-string">${t.value}</span>`
-    : t.type === "keyword" ? html`<span key=${i} class="hl-keyword">${t.value}</span>`
-    : t.type === "number" ? html`<span key=${i} class="hl-number">${t.value}</span>`
-    : t.value
-  )}</code></pre>`;
-}
-
-function OperationDetail({ op, activeTab, setActiveTab, formValues, setFormValues, exampleOutput }) {
-  const tabs = [];
-  if (op.inputSchema) tabs.push("form");
-  tabs.push("input-schema", "output-schema");
-  if (exampleOutput !== null) tabs.push("example");
-  if (op.implementor?.code) tabs.push("code");
-
-  const currentTab = tabs.includes(activeTab) ? activeTab : tabs[0];
-
-  const hasInput = op.input && op.input !== "void";
-  const hasOutput = op.output && op.output !== "void";
-
-  return html`
-    <div>
-      <h2 style="margin-bottom:0.5rem;color:var(--accent)">${op.id}</h2>
-
-      <div style="display:flex;gap:0.75rem;margin-bottom:1rem;flex-wrap:wrap">
-        ${op.summary && html`<div style="color:var(--text-muted);font-size:0.875rem">${op.summary}</div>`}
-      </div>
-
-      <div style="display:flex;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap;align-items:center">
-        <div style="background:var(--bg-tertiary);padding:0.375rem 0.625rem;border-radius:4px;font-size:0.8125rem">
-          <span style="color:var(--text-muted)">Input: </span>
-          <span class="mono">${hasInput ? op.input : "void"}</span>
-        </div>
-        <div style="background:var(--bg-tertiary);padding:0.375rem 0.625rem;border-radius:4px;font-size:0.8125rem">
-          <span style="color:var(--text-muted)">Output: </span>
-          <span class="mono">${hasOutput ? op.output : "void"}</span>
-        </div>
-        ${op.implementor && html`
-          <div style="background:var(--bg-tertiary);padding:0.375rem 0.625rem;border-radius:4px;font-size:0.8125rem">
-            <span style="color:var(--text-muted)">${op.implementor.type === "model" ? "Model" : "Service"}: </span>
-            <span class="mono">${op.implementor.name}</span>
-            ${op.implementor.method && html`<span class="mono" style="color:var(--text-muted)">.${op.implementor.method}()</span>`}
-          </div>
-        `}
-        ${op.tags?.length > 0 && op.tags.map(t => html`
-          <span key=${t} class="badge badge-purple">${t}</span>
-        `)}
-        ${op.rest && typeof op.rest === "object" && op.rest.method && html`
-          <span class="badge method-${op.rest.method.toLowerCase()}" style="padding:0.125rem 0.5rem;line-height:1.2">${op.rest.method.toUpperCase()}</span>
-          <span class="mono" style="font-size:0.8125rem;color:var(--text-muted)">${op.rest.url || op.rest.path || "/"}</span>
-        `}
-      </div>
-
-      <!-- Tabs -->
-      <div style="display:flex;gap:0;margin-bottom:0.75rem;border-bottom:1px solid var(--border)">
-        ${tabs.map(tab => {
-          const label = tab === "form" ? "Try It" : tab === "input-schema" ? "Input Schema" : tab === "output-schema" ? "Output Schema" : tab === "code" ? "Code" : "Example Output";
-          return html`
-            <button key=${tab} onClick=${() => setActiveTab(tab)} style="
-              padding:6px 16px;
-              background:${currentTab === tab ? "var(--bg-tertiary)" : "transparent"};
-              color:${currentTab === tab ? "var(--accent)" : "var(--text-muted)"};
-              border:none;
-              border-bottom:2px solid ${currentTab === tab ? "var(--accent)" : "transparent"};
-              cursor:pointer;font-size:0.875rem;
-              font-weight:${currentTab === tab ? "600" : "400"};
-            ">${label}</button>
-          `;
-        })}
-      </div>
-
-      <!-- Tab Content -->
-      ${currentTab === "form" && op.inputSchema && html`
-        <div>
-          <${SchemaForm} schema=${op.inputSchema} values=${formValues} onChange=${setFormValues} />
-          <div style="margin-top:1rem">
-            <button class="btn btn-primary" disabled>Execute (coming soon)</button>
-          </div>
-          ${Object.keys(formValues).length > 0 && html`
-            <div style="margin-top:0.75rem">
-              <strong style="color:var(--text-muted);font-size:0.75rem;text-transform:uppercase">Request Body</strong>
-              <pre class="mono" style="
-                background:var(--bg-secondary);padding:0.75rem;border-radius:4px;
-                margin-top:0.25rem;font-size:0.8125rem;overflow:auto;max-height:200px;
-              ">${JSON.stringify(formValues, null, 2)}</pre>
-            </div>
-          `}
-        </div>
-      `}
-
-      ${currentTab === "input-schema" && html`
-        <div>
-          ${hasInput && op.inputSchema
-            ? html`<pre class="mono" style="
-                background:var(--bg-secondary);padding:1rem;border-radius:4px;
-                overflow:auto;max-height:400px;font-size:0.8125rem;line-height:1.5;
-              ">${JSON.stringify(op.inputSchema, null, 2)}</pre>`
-            : html`<div style="color:var(--text-muted);padding:0.5rem">${hasInput ? `Schema ref: ${op.input} (not resolved)` : "No input (void)"}</div>`
-          }
-        </div>
-      `}
-
-      ${currentTab === "output-schema" && html`
-        <div>
-          ${hasOutput && op.outputSchema
-            ? html`<pre class="mono" style="
-                background:var(--bg-secondary);padding:1rem;border-radius:4px;
-                overflow:auto;max-height:400px;font-size:0.8125rem;line-height:1.5;
-              ">${JSON.stringify(op.outputSchema, null, 2)}</pre>`
-            : html`<div style="color:var(--text-muted);padding:0.5rem">${hasOutput ? `Schema ref: ${op.output} (not resolved)` : "No output (void)"}</div>`
-          }
-        </div>
-      `}
-
-      ${currentTab === "example" && html`
-        <div>
-          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
-            <strong style="color:var(--text-muted);font-size:0.75rem;text-transform:uppercase">Random Example</strong>
-            <button class="btn btn-ghost btn-sm" onClick=${() => { /* force re-render */ setActiveTab("input-schema"); setTimeout(() => setActiveTab("example"), 0); }}>Regenerate</button>
-          </div>
-          <pre class="mono" style="
-            background:var(--bg-secondary);padding:1rem;border-radius:4px;
-            overflow:auto;max-height:400px;font-size:0.8125rem;line-height:1.5;
-          ">${JSON.stringify(exampleOutput, null, 2)}</pre>
-        </div>
-      `}
-
-      ${currentTab === "code" && op.implementor?.code && html`
-        <div>
-          <div style="margin-bottom:0.5rem;font-size:0.8125rem;color:var(--text-muted)">
-            <span class="mono">${op.implementor.name}.${op.implementor.method}()</span>
-          </div>
-          <${CodeBlock} code=${op.implementor.code} />
-        </div>
-      `}
-    </div>
-  `;
-}