agent-canvas 0.1.44 → 0.2.0

package/daemon/client/components/CodeBlock.tsx

@@ -1,35 +0,0 @@
-import React, { useEffect, useRef } from "react";
-
-interface CodeBlockProps {
-  language?: string;
-  children?: React.ReactNode;
-}
-
-export function CodeBlock({ language, children }: CodeBlockProps) {
-  const code = typeof children === "string" ? children : String(children ?? "");
-  const codeRef = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    const el = codeRef.current;
-    const hljs = (window as any).hljs;
-    if (!el || !hljs) return;
-    // Reset previous highlighting
-    el.removeAttribute("data-highlighted");
-    el.className = language ? `language-${language}` : "";
-    el.textContent = code;
-    hljs.highlightElement(el);
-  }, [code, language]);
-
-  return (
-    <div className="relative mt-3 group/code" data-md="codeblock" data-md-language={language || ""}>
-      {language && (
-        <span className="absolute top-2 right-3 text-tiny text-text-tertiary opacity-0 group-hover/code:opacity-60 transition-opacity duration-150 z-10 font-mono">
-          {language}
-        </span>
-      )}
-      <pre className="bg-bg-code rounded-md p-4 overflow-x-auto text-code font-mono leading-relaxed">
-        <code ref={codeRef} className={language ? `language-${language}` : ""}>{code}</code>
-      </pre>
-    </div>
-  );
-}

package/daemon/client/components/Diff.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-
-interface DiffProps {
-  before: string;
-  after: string;
-  language?: string;
-}
-
-export function Diff({ before, after, language }: DiffProps) {
-  const beforeLines = before.split("\n");
-  const afterLines = after.split("\n");
-  const lcs = computeLCS(beforeLines, afterLines);
-  const diffLines: Array<{ type: "same" | "removed" | "added"; line: string }> = [];
-
-  let bi = 0, ai = 0, li = 0;
-  while (bi < beforeLines.length || ai < afterLines.length) {
-    if (li < lcs.length && bi < beforeLines.length && ai < afterLines.length
-        && beforeLines[bi] === lcs[li] && afterLines[ai] === lcs[li]) {
-      diffLines.push({ type: "same", line: beforeLines[bi] }); bi++; ai++; li++;
-    } else if (bi < beforeLines.length && (li >= lcs.length || beforeLines[bi] !== lcs[li])) {
-      diffLines.push({ type: "removed", line: beforeLines[bi] }); bi++;
-    } else if (ai < afterLines.length) {
-      diffLines.push({ type: "added", line: afterLines[ai] }); ai++;
-    }
-  }
-
-  return (
-    <div className="mt-3 bg-bg-code rounded-md overflow-hidden group/diff" data-md="diff" data-md-language={language || ""}>
-      {language && (
-        <div className="px-4 py-2 text-meta font-mono text-text-tertiary opacity-0 group-hover/diff:opacity-60 transition-opacity">
-          diff ({language})
-        </div>
-      )}
-      <pre className="px-4 pb-3 overflow-x-auto text-code font-mono">
-        {diffLines.map((d, i) => (
-          <div key={i} className={
-            d.type === "removed" ? "bg-accent-red-muted text-accent-red" :
-            d.type === "added" ? "bg-accent-green-muted text-accent-green" :
-            "text-text-tertiary"
-          }>
-            <span className="select-none w-6 inline-block text-center opacity-60">
-              {d.type === "removed" ? "-" : d.type === "added" ? "+" : " "}
-            </span>
-            {d.line}
-          </div>
-        ))}
-      </pre>
-    </div>
-  );
-}
-
-function computeLCS(a: string[], b: string[]): string[] {
-  const m = a.length, n = b.length;
-  const dp: number[][] = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
-  for (let i = 1; i <= m; i++)
-    for (let j = 1; j <= n; j++)
-      dp[i][j] = a[i-1] === b[j-1] ? dp[i-1][j-1]+1 : Math.max(dp[i-1][j], dp[i][j-1]);
-  const result: string[] = [];
-  let i = m, j = n;
-  while (i > 0 && j > 0) {
-    if (a[i-1] === b[j-1]) { result.unshift(a[i-1]); i--; j--; }
-    else if (dp[i-1][j] > dp[i][j-1]) i--; else j--;
-  }
-  return result;
-}

package/daemon/client/components/FilePreview.tsx

@@ -1,88 +0,0 @@
-import React, { useEffect, useState, useContext, useRef } from "react";
-import { SessionContext, ActiveViewCtx } from "#canvas/runtime";
-
-interface FilePreviewProps {
-  path: string;
-  lines?: [number, number];
-  /** Injected by compiler at build time — skip runtime fetch when present */
-  __content?: string;
-}
-
-const EXT_TO_LANG: Record<string, string> = {
-  ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
-  py: "python", rs: "rust", go: "go", rb: "ruby", java: "java",
-  json: "json", yaml: "yaml", yml: "yaml", md: "markdown",
-  css: "css", html: "html", sh: "bash", bash: "bash", toml: "toml",
-  sql: "sql", xml: "xml", c: "c", cpp: "cpp", h: "c",
-};
-
-export function FilePreview({ path, lines, __content }: FilePreviewProps) {
-  const sessionId = useContext(SessionContext);
-  const { setActiveView } = useContext(ActiveViewCtx);
-  const [content, setContent] = useState<string | null>(__content ?? null);
-  const [language, setLanguage] = useState(() => {
-    const ext = path.split(".").pop() || "";
-    return EXT_TO_LANG[ext] || "text";
-  });
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(!__content);
-  const codeRef = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    if (__content !== undefined) return; // already resolved at compile time
-    setLoading(true);
-    setError(null);
-    fetch(`/api/file?session=${sessionId}&path=${encodeURIComponent(path)}`)
-      .then((r) => r.json())
-      .then((data: any) => {
-        if (data.error) {
-          setError(data.error);
-        } else {
-          let text = data.content;
-          if (lines) {
-            const allLines = text.split("\n");
-            text = allLines.slice(lines[0] - 1, lines[1]).join("\n");
-          }
-          setContent(text);
-          setLanguage(data.language || "text");
-        }
-      })
-      .catch(() => setError("Failed to fetch file"))
-      .finally(() => setLoading(false));
-  }, [sessionId, path, lines?.[0], lines?.[1], __content]);
-
-  // Highlight after content loads
-  useEffect(() => {
-    const el = codeRef.current;
-    const hljs = (window as any).hljs;
-    if (!el || !hljs || !content) return;
-    el.removeAttribute("data-highlighted");
-    el.className = language ? `language-${language}` : "";
-    el.textContent = content;
-    hljs.highlightElement(el);
-  }, [content, language]);
-
-  if (loading) {
-    return <div className="text-text-tertiary text-body mt-3 bg-bg-code rounded-md p-4">Loading {path}...</div>;
-  }
-
-  if (error) {
-    return <div className="text-accent-red text-body mt-3 bg-accent-red-muted rounded-md p-4">{path}: {error}</div>;
-  }
-
-  return (
-    <div className="mt-3 bg-bg-code rounded-md overflow-hidden" data-md="filepreview" data-md-path={path} {...(lines ? { "data-md-lines": `${lines[0]}-${lines[1]}` } : {})}>
-      <div className="px-4 py-2 flex items-center justify-between">
-        <button
-          className="font-mono text-meta text-text-tertiary hover:text-text-secondary hover:underline cursor-pointer text-left"
-          onClick={() => setActiveView({ type: "file", path })}
-          title={`Open ${path}`}
-        >{path}</button>
-        {lines && <span className="font-mono text-meta text-text-tertiary opacity-60">L{lines[0]}–{lines[1]}</span>}
-      </div>
-      <pre className="px-4 pb-3 overflow-x-auto text-code font-mono !bg-transparent" style={{ background: "transparent" }}>
-        <code ref={codeRef} className={language ? `language-${language}` : ""}>{content}</code>
-      </pre>
-    </div>
-  );
-}

package/daemon/client/components/Image.tsx

@@ -1,45 +0,0 @@
-import React, { useContext, useState } from "react";
-import { SessionContext } from "#canvas/runtime";
-
-interface ImageProps {
-  src: string;
-  alt?: string;
-  caption?: string;
-  width?: number | string;
-  height?: number | string;
-}
-
-export function ImageView({ src, alt, caption, width, height }: ImageProps) {
-  const sessionId = useContext(SessionContext);
-  const [error, setError] = useState(false);
-
-  const imgSrc = `/api/image?session=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(src)}`;
-
-  if (error) {
-    return (
-      <div className="mt-3 text-accent-red text-body bg-accent-red-muted rounded-md p-4">
-        {src}: Failed to load image
-      </div>
-    );
-  }
-
-  return (
-    <figure className="mt-3 relative" data-md="image" data-md-src={src}>
-      <div className="rounded-md overflow-hidden border border-border-subtle bg-bg-code inline-block">
-        <img
-          src={imgSrc}
-          alt={alt || src}
-          onError={() => setError(true)}
-          className="block max-w-full h-auto"
-          {...(width ? { width } : {})}
-          {...(height ? { height } : {})}
-        />
-      </div>
-      {caption && (
-        <figcaption className="mt-1.5 text-meta text-text-tertiary font-body">
-          {caption}
-        </figcaption>
-      )}
-    </figure>
-  );
-}

package/daemon/client/components/Markdown.tsx

@@ -1,44 +0,0 @@
-import React, { useMemo } from "react";
-import { marked } from "marked";
-
-interface MarkdownProps {
-  /** Inline markdown source (via children) */
-  children?: React.ReactNode;
-  /** File path (resolved at compile time) */
-  file?: string;
-  /** Injected by compiler when file prop is used */
-  __content?: string;
-}
-
-// Configure marked for safe rendering
-marked.setOptions({
-  gfm: true,
-  breaks: false,
-});
-
-export function Markdown({ children, file, __content }: MarkdownProps) {
-  const source = __content ?? (typeof children === "string" ? children : String(children ?? ""));
-
-  const html = useMemo(() => {
-    if (!source) return "";
-    return marked.parse(source, { async: false }) as string;
-  }, [source]);
-
-  if (!source) {
-    return (
-      <div className="text-text-tertiary text-tiny mt-3">
-        {file ? `Could not load: ${file}` : "No markdown content"}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="mt-3 prose-canvas"
-      data-md="markdown"
-      {...(file ? { "data-md-file": file } : {})}
-      data-md-source={source}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  );
-}