@tangle-network/sandbox-ui 0.2.2 → 0.3.3

package/dist/chunk-M34OA6PQ.js

@@ -1,233 +0,0 @@
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-
-// src/markdown/simple-markdown.tsx
-import { jsx } from "react/jsx-runtime";
-function SimpleMarkdown({ content, className }) {
-  const html = renderMarkdown(content);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("tangle-prose", className),
-      dangerouslySetInnerHTML: { __html: html }
-    }
-  );
-}
-function escapeHtml(text) {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function renderInline(text) {
-  let result = escapeHtml(text);
-  result = result.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
-  result = result.replace(/__(.+?)__/g, "<strong>$1</strong>");
-  result = result.replace(/\*(.+?)\*/g, "<em>$1</em>");
-  result = result.replace(/_(.+?)_/g, "<em>$1</em>");
-  result = result.replace(/`([^`]+)`/g, '<code class="tangle-inline-code">$1</code>');
-  result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener" class="tangle-link">$1</a>');
-  return result;
-}
-function renderMarkdown(md) {
-  const lines = md.split("\n");
-  const output = [];
-  let i = 0;
-  let inList = false;
-  let listType = "ul";
-  const closeList = () => {
-    if (inList) {
-      output.push(`</${listType}>`);
-      inList = false;
-    }
-  };
-  while (i < lines.length) {
-    const line = lines[i];
-    if (line.startsWith("```")) {
-      closeList();
-      const lang = line.slice(3).trim();
-      const codeLines = [];
-      i++;
-      while (i < lines.length && !lines[i].startsWith("```")) {
-        codeLines.push(lines[i]);
-        i++;
-      }
-      i++;
-      const code = escapeHtml(codeLines.join("\n"));
-      output.push(`<div class="tangle-code-block">`);
-      if (lang) output.push(`<div class="tangle-code-lang">${escapeHtml(lang)}</div>`);
-      output.push(`<pre><code>${code}</code></pre></div>`);
-      continue;
-    }
-    if (line.includes("|") && i + 1 < lines.length && /^\s*\|?[\s-:|]+\|/.test(lines[i + 1])) {
-      closeList();
-      const headers = line.split("|").map((h) => h.trim()).filter(Boolean);
-      i += 2;
-      output.push('<div class="tangle-table-wrap"><table class="tangle-table">');
-      output.push("<thead><tr>");
-      for (const h of headers) output.push(`<th>${renderInline(h)}</th>`);
-      output.push("</tr></thead><tbody>");
-      while (i < lines.length && lines[i].includes("|")) {
-        const cells = lines[i].split("|").map((c) => c.trim()).filter(Boolean);
-        output.push("<tr>");
-        for (const c of cells) output.push(`<td>${renderInline(c)}</td>`);
-        output.push("</tr>");
-        i++;
-      }
-      output.push("</tbody></table></div>");
-      continue;
-    }
-    const headingMatch = line.match(/^(#{1,6})\s+(.+)/);
-    if (headingMatch) {
-      closeList();
-      const level = headingMatch[1].length;
-      output.push(`<h${level} class="tangle-h${level}">${renderInline(headingMatch[2])}</h${level}>`);
-      i++;
-      continue;
-    }
-    if (line.startsWith("> ")) {
-      closeList();
-      const quoteLines = [];
-      while (i < lines.length && lines[i].startsWith("> ")) {
-        quoteLines.push(lines[i].slice(2));
-        i++;
-      }
-      output.push(`<blockquote class="tangle-blockquote">${quoteLines.map(renderInline).join("<br>")}</blockquote>`);
-      continue;
-    }
-    if (/^[\s]*[-*+]\s/.test(line)) {
-      if (!inList || listType !== "ul") {
-        closeList();
-        output.push('<ul class="tangle-list">');
-        inList = true;
-        listType = "ul";
-      }
-      output.push(`<li>${renderInline(line.replace(/^[\s]*[-*+]\s/, ""))}</li>`);
-      i++;
-      continue;
-    }
-    if (/^[\s]*\d+\.\s/.test(line)) {
-      if (!inList || listType !== "ol") {
-        closeList();
-        output.push('<ol class="tangle-list tangle-list-ordered">');
-        inList = true;
-        listType = "ol";
-      }
-      output.push(`<li>${renderInline(line.replace(/^[\s]*\d+\.\s/, ""))}</li>`);
-      i++;
-      continue;
-    }
-    if (/^[-*_]{3,}\s*$/.test(line)) {
-      closeList();
-      output.push('<hr class="tangle-hr">');
-      i++;
-      continue;
-    }
-    if (!line.trim()) {
-      closeList();
-      i++;
-      continue;
-    }
-    closeList();
-    output.push(`<p>${renderInline(line)}</p>`);
-    i++;
-  }
-  closeList();
-  return output.join("\n");
-}
-var simpleMarkdownStyles = `
-.tangle-prose {
-  font-family: var(--font-sans);
-  color: var(--text-primary);
-  font-size: 0.9375rem;
-  line-height: 1.6;
-}
-.tangle-prose p { margin: 0.5em 0; }
-.tangle-prose p:last-child { margin-bottom: 0; }
-.tangle-h1 { font-size: 1.5rem; font-weight: 700; margin: 1em 0 0.5em; }
-.tangle-h2 { font-size: 1.25rem; font-weight: 700; margin: 1em 0 0.5em; }
-.tangle-h3 { font-size: 1.1rem; font-weight: 600; margin: 0.75em 0 0.4em; }
-.tangle-h4, .tangle-h5, .tangle-h6 { font-size: 1rem; font-weight: 600; margin: 0.5em 0 0.3em; }
-.tangle-inline-code {
-  font-family: var(--font-mono);
-  font-size: 0.85em;
-  background: var(--bg-input);
-  border: 1px solid var(--border-subtle);
-  border-radius: 4px;
-  padding: 0.15em 0.4em;
-}
-.tangle-code-block {
-  position: relative;
-  margin: 0.75em 0;
-  background: var(--bg-input);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-.tangle-code-lang {
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.tangle-code-block pre {
-  margin: 0;
-  padding: 1rem;
-  overflow-x: auto;
-  font-family: var(--font-mono);
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--text-secondary);
-}
-.tangle-link {
-  color: var(--brand-cool);
-  text-decoration: none;
-}
-.tangle-link:hover { text-decoration: underline; }
-.tangle-blockquote {
-  border-left: 3px solid var(--border-accent);
-  padding: 0.5em 1em;
-  margin: 0.5em 0;
-  color: var(--text-secondary);
-}
-.tangle-list {
-  margin: 0.5em 0;
-  padding-left: 1.5em;
-}
-.tangle-list li { margin: 0.2em 0; }
-.tangle-list-ordered { list-style-type: decimal; }
-.tangle-table-wrap { overflow-x: auto; margin: 0.75em 0; }
-.tangle-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-}
-.tangle-table th {
-  text-align: left;
-  padding: 0.5em 0.75em;
-  border-bottom: 2px solid var(--border-default);
-  font-weight: 600;
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-.tangle-table td {
-  padding: 0.4em 0.75em;
-  border-bottom: 1px solid var(--border-subtle);
-  color: var(--text-secondary);
-}
-.tangle-table tr:hover td { background: var(--bg-hover); }
-.tangle-hr {
-  border: none;
-  border-top: 1px solid var(--border-subtle);
-  margin: 1em 0;
-}
-strong { font-weight: 700; }
-em { font-style: italic; }
-`;
-
-export {
-  SimpleMarkdown,
-  simpleMarkdownStyles
-};

package/dist/chunk-M6VLC32S.js

@@ -1,219 +0,0 @@
-import {
-  SimpleMarkdown
-} from "./chunk-M34OA6PQ.js";
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-
-// src/run/tool-call-step.tsx
-import { useState } from "react";
-import {
-  Terminal,
-  FileText,
-  FileCode,
-  Search,
-  CheckCircle,
-  ChevronRight,
-  Loader2,
-  FolderOpen,
-  Download,
-  Pencil,
-  Eye
-} from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ICONS = {
-  bash: Terminal,
-  read: Eye,
-  write: FileText,
-  edit: Pencil,
-  glob: FolderOpen,
-  grep: Search,
-  list: FolderOpen,
-  download: Download,
-  inspect: Search,
-  audit: CheckCircle,
-  unknown: FileCode
-};
-var STATUS_COLORS = {
-  running: "text-[var(--brand-cool)]",
-  success: "text-[var(--code-success)]",
-  error: "text-[var(--code-error)]"
-};
-function ToolCallStep({
-  type,
-  label,
-  status,
-  detail,
-  output,
-  duration,
-  className
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const Icon = ICONS[type] || ICONS.unknown;
-  const hasExpandable = !!(detail || output);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "group border-l-2 pl-3 py-1.5 transition-colors",
-        status === "running" && "border-[var(--brand-cool)] bg-[var(--brand-cool)]/5",
-        status === "success" && "border-[var(--border-subtle)] hover:border-[var(--border-accent)]",
-        status === "error" && "border-[var(--code-error)]/40",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => hasExpandable && setExpanded(!expanded),
-            disabled: !hasExpandable,
-            className: cn(
-              "flex items-center gap-2 w-full text-left text-sm",
-              hasExpandable && "cursor-pointer"
-            ),
-            children: [
-              status === "running" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-[var(--brand-cool)] shrink-0" }) : /* @__PURE__ */ jsx(Icon, { className: cn("h-3.5 w-3.5 shrink-0", STATUS_COLORS[status]) }),
-              /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)] truncate flex-1 font-[var(--font-sans)]", children: label }),
-              duration !== void 0 && status !== "running" && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)] text-xs tabular-nums shrink-0", children: duration < 1e3 ? `${duration}ms` : `${(duration / 1e3).toFixed(1)}s` }),
-              hasExpandable && /* @__PURE__ */ jsx(
-                ChevronRight,
-                {
-                  className: cn(
-                    "h-3 w-3 text-[var(--text-muted)] transition-transform shrink-0",
-                    expanded && "rotate-90"
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        expanded && (detail || output) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 ml-5.5 space-y-1", children: [
-          detail && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)] font-[var(--font-mono)]", children: detail }),
-          output && /* @__PURE__ */ jsx("pre", { className: "text-xs text-[var(--text-secondary)] bg-[var(--bg-input)] border border-[var(--border-subtle)] rounded-[var(--radius-sm)] p-2 overflow-x-auto max-h-48 font-[var(--font-mono)]", children: output })
-        ] })
-      ]
-    }
-  );
-}
-function ToolCallGroup({ title, children, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-0.5 my-2", className), children: [
-    title && /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-[var(--text-muted)] uppercase tracking-wider mb-1 px-1", children: title }),
-    children
-  ] });
-}
-
-// src/run/tool-call-feed.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function ToolCallFeed({ segments, className }) {
-  if (segments.length === 0) return null;
-  return /* @__PURE__ */ jsx2("div", { className: cn("space-y-1", className), children: segments.map((segment, i) => {
-    if (segment.kind === "text") {
-      return segment.content.trim() ? /* @__PURE__ */ jsx2(SimpleMarkdown, { content: segment.content }, i) : null;
-    }
-    if (segment.kind === "tool_call") {
-      return /* @__PURE__ */ jsx2(
-        ToolCallStep,
-        {
-          type: segment.call.type,
-          label: segment.call.label,
-          status: segment.call.status,
-          detail: segment.call.detail,
-          output: segment.call.output,
-          duration: segment.call.duration
-        },
-        segment.call.id || i
-      );
-    }
-    if (segment.kind === "tool_group") {
-      return /* @__PURE__ */ jsx2(ToolCallGroup, { title: segment.title, children: segment.calls.map((call) => /* @__PURE__ */ jsx2(
-        ToolCallStep,
-        {
-          type: call.type,
-          label: call.label,
-          status: call.status,
-          detail: call.detail,
-          output: call.output,
-          duration: call.duration
-        },
-        call.id
-      )) }, i);
-    }
-    return null;
-  }) });
-}
-function parseToolEvent(event) {
-  const { type, data } = event;
-  if (type === "tool.invocation" || type === "tool_use") {
-    const toolName = data.name || data.tool || "unknown";
-    const input = data.input;
-    return {
-      id: data.id || data.toolUseId || crypto.randomUUID(),
-      type: mapToolName(toolName),
-      label: formatToolLabel(toolName, input),
-      status: "running",
-      detail: input ? formatToolInput(toolName, input) : void 0
-    };
-  }
-  if (type === "tool.result" || type === "tool_result") {
-    return {
-      id: data.id || data.toolUseId || "",
-      type: mapToolName(data.name || data.tool || "unknown"),
-      label: formatToolLabel(data.name || data.tool || "unknown"),
-      status: data.error ? "error" : "success",
-      output: truncate(data.output || data.result || "", 500),
-      duration: data.duration
-    };
-  }
-  return null;
-}
-function mapToolName(name) {
-  const lower = name.toLowerCase();
-  if (lower.includes("bash") || lower.includes("terminal") || lower.includes("exec")) return "bash";
-  if (lower.includes("read") || lower.includes("cat")) return "read";
-  if (lower.includes("write") || lower.includes("create")) return "write";
-  if (lower.includes("edit") || lower.includes("replace")) return "edit";
-  if (lower.includes("glob") || lower.includes("find")) return "glob";
-  if (lower.includes("grep") || lower.includes("search")) return "grep";
-  if (lower.includes("list") || lower.includes("ls")) return "list";
-  if (lower.includes("inspect")) return "inspect";
-  if (lower.includes("audit")) return "audit";
-  return "unknown";
-}
-function formatToolLabel(toolName, input) {
-  const lower = toolName.toLowerCase();
-  if (lower.includes("bash") && input?.command) {
-    const cmd = String(input.command);
-    return cmd.length > 80 ? `${cmd.slice(0, 77)}...` : cmd;
-  }
-  if ((lower.includes("read") || lower.includes("cat")) && input?.path) {
-    return `Read ${input.path}`;
-  }
-  if (lower.includes("write") && input?.path) {
-    return `Write ${input.path}`;
-  }
-  if (lower.includes("edit") && input?.path) {
-    return `Edit ${input.path}`;
-  }
-  if (lower.includes("glob") && input?.pattern) {
-    return `Find ${input.pattern}`;
-  }
-  if (lower.includes("grep") && input?.pattern) {
-    return `Search for ${input.pattern}`;
-  }
-  return toolName;
-}
-function formatToolInput(toolName, input) {
-  if (input.command) return String(input.command);
-  if (input.path) return String(input.path);
-  return JSON.stringify(input, null, 2).slice(0, 300);
-}
-function truncate(text, max) {
-  return text.length > max ? text.slice(0, max - 3) + "..." : text;
-}
-
-export {
-  ToolCallStep,
-  ToolCallGroup,
-  ToolCallFeed,
-  parseToolEvent
-};