caudate-cli 0.1.0__py3-none-any.whl

api/artifact_viewer.py

@@ -0,0 +1,366 @@
+"""Artifact viewer — polished single-page renderer for FileStore items.
+
+Phase 1 of `COGNOS_UI_ROADMAP.md`. The route `GET /artifact/{file_id}`
+serves a clean HTML page that renders the file according to its type:
+
+  - HTML / SVG → iframe / inline preview + collapsible source view
+  - Code (py/js/ts/html/css/md/json/yaml/sh/...) → syntax-highlighted
+  - Markdown → rendered (marked.js) + raw toggle
+  - Image → full-size view + download
+  - Audio → HTML5 player + download
+  - Other → download-only fallback
+
+Compared to the raw `/files/{id}/content` endpoint, this route gives
+each artifact its own polished standalone page — the foundation for
+later moving toward a side-pane experience inside the chat UI.
+"""
+
+from __future__ import annotations
+
+import html
+import json
+from pathlib import Path
+from typing import Any
+
+
+# Map file suffixes to (kind, prism-language) — drives the renderer.
+# `kind` is one of: html, svg, image, audio, video, markdown, code, text, binary.
+# `prism` is the Prism.js language tag used when the kind is `code` or `markdown` raw.
+_TYPE_MAP: dict[str, tuple[str, str]] = {
+    ".html":   ("html",     "markup"),
+    ".htm":    ("html",     "markup"),
+    ".svg":    ("svg",      "markup"),
+    ".md":     ("markdown", "markdown"),
+    ".markdown": ("markdown", "markdown"),
+    ".py":     ("code",     "python"),
+    ".js":     ("code",     "javascript"),
+    ".mjs":    ("code",     "javascript"),
+    ".ts":     ("code",     "typescript"),
+    ".tsx":    ("code",     "tsx"),
+    ".jsx":    ("code",     "jsx"),
+    ".css":    ("code",     "css"),
+    ".json":   ("code",     "json"),
+    ".yaml":   ("code",     "yaml"),
+    ".yml":    ("code",     "yaml"),
+    ".toml":   ("code",     "toml"),
+    ".sh":     ("code",     "bash"),
+    ".bash":   ("code",     "bash"),
+    ".rs":     ("code",     "rust"),
+    ".go":     ("code",     "go"),
+    ".java":   ("code",     "java"),
+    ".c":      ("code",     "c"),
+    ".cpp":    ("code",     "cpp"),
+    ".sql":    ("code",     "sql"),
+    ".xml":    ("code",     "xml"),
+    ".txt":    ("text",     "none"),
+    ".log":    ("text",     "none"),
+    ".png":    ("image",    "none"),
+    ".jpg":    ("image",    "none"),
+    ".jpeg":   ("image",    "none"),
+    ".webp":   ("image",    "none"),
+    ".gif":    ("image",    "none"),
+    ".bmp":    ("image",    "none"),
+    ".wav":    ("audio",    "none"),
+    ".mp3":    ("audio",    "none"),
+    ".ogg":    ("audio",    "none"),
+    ".flac":   ("audio",    "none"),
+    ".m4a":    ("audio",    "none"),
+    ".mp4":    ("video",    "none"),
+    ".webm":   ("video",    "none"),
+}
+
+
+def _classify(filename: str, mime_type: str) -> tuple[str, str]:
+    """Return (kind, prism-language) for the file."""
+    suffix = Path(filename).suffix.lower()
+    if suffix in _TYPE_MAP:
+        return _TYPE_MAP[suffix]
+    # Fallback by MIME family
+    if mime_type:
+        if mime_type.startswith("image/"):
+            return ("image", "none")
+        if mime_type.startswith("audio/"):
+            return ("audio", "none")
+        if mime_type.startswith("video/"):
+            return ("video", "none")
+        if mime_type.startswith("text/"):
+            return ("text", "none")
+        if "json" in mime_type:
+            return ("code", "json")
+        if "html" in mime_type:
+            return ("html", "markup")
+        if "svg" in mime_type:
+            return ("svg", "markup")
+    return ("binary", "none")
+
+
+def render_artifact_page(
+    *,
+    file_id: str,
+    filename: str,
+    mime_type: str,
+    size_bytes: int,
+    content_bytes: bytes,
+) -> str:
+    """Build the single-page viewer HTML for one artifact."""
+    kind, prism = _classify(filename, mime_type)
+
+    # The /files/<id>/content URL — used by iframes / image / audio
+    raw_url = f"/files/{file_id}/content"
+
+    # For text-y kinds, decode and stash raw text for source view + JS render
+    raw_text = ""
+    if kind in ("html", "svg", "code", "markdown", "text"):
+        try:
+            raw_text = content_bytes.decode("utf-8", errors="replace")
+        except Exception:
+            raw_text = ""
+
+    safe_filename = html.escape(filename)
+    safe_size = _humanize_bytes(size_bytes)
+    type_badge = _badge_for_kind(kind, prism)
+
+    # Body section depends on kind
+    body = _render_body(kind, prism, raw_url, raw_text, filename)
+
+    # Embed raw text in a JSON-encoded JS variable so toggles can read
+    # it without a second fetch. Limit size to avoid huge pages —
+    # >2 MB falls back to "use the download button".
+    embedded_text = json.dumps(raw_text) if len(raw_text) < 2_000_000 else "null"
+
+    return f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{safe_filename} — Cognos artifact</title>
+  <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
+  <style>
+    :root {{
+      --bg:        #0f1115;
+      --bg-elev:   #181b21;
+      --bg-pre:   #0c0e12;
+      --text:      #e6e7eb;
+      --text-dim:  #8a8e98;
+      --border:    #262a32;
+      --accent:    #7aa2f7;
+    }}
+    * {{ box-sizing: border-box; margin: 0; padding: 0; }}
+    html, body {{ height: 100%; }}
+    body {{
+      background: var(--bg);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      font-size: 14px;
+      line-height: 1.55;
+      display: flex; flex-direction: column;
+    }}
+    header {{
+      display: flex; align-items: center; gap: 12px;
+      padding: 10px 16px;
+      background: var(--bg-elev);
+      border-bottom: 1px solid var(--border);
+    }}
+    header .filename {{ font-weight: 600; font-size: 13px; }}
+    header .meta {{ color: var(--text-dim); font-size: 11px; }}
+    header .badge {{
+      background: var(--bg);
+      border: 1px solid var(--border);
+      padding: 2px 8px; border-radius: 10px;
+      font-size: 11px; color: var(--accent);
+      text-transform: uppercase; letter-spacing: 0.5px;
+    }}
+    header .controls {{ margin-left: auto; display: flex; gap: 6px; }}
+    button, .btn {{
+      background: var(--bg);
+      color: var(--text);
+      border: 1px solid var(--border);
+      padding: 6px 12px;
+      font-size: 12px; cursor: pointer;
+      border-radius: 4px; text-decoration: none;
+      font-family: inherit;
+    }}
+    button:hover, .btn:hover {{ border-color: var(--accent); color: var(--accent); }}
+    main {{
+      flex: 1; min-height: 0; overflow: auto;
+      padding: 16px 22px;
+    }}
+    iframe.preview {{
+      width: 100%; height: calc(100vh - 110px);
+      border: 1px solid var(--border); border-radius: 6px;
+      background: white;
+    }}
+    img.preview {{ max-width: 100%; max-height: calc(100vh - 110px); border-radius: 6px; }}
+    audio.preview, video.preview {{ width: 100%; }}
+    .svg-container {{ background: white; padding: 20px; border-radius: 6px;
+                      max-width: 100%; overflow: auto; }}
+    .svg-container svg {{ max-width: 100%; height: auto; }}
+    .markdown-rendered {{
+      background: var(--bg-elev); border: 1px solid var(--border);
+      padding: 22px 28px; border-radius: 6px; max-width: 760px;
+    }}
+    .markdown-rendered h1 {{ margin: 0 0 14px; font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }}
+    .markdown-rendered h2 {{ margin: 18px 0 10px; font-size: 17px; }}
+    .markdown-rendered h3 {{ margin: 14px 0 8px; font-size: 14px; color: var(--text-dim); }}
+    .markdown-rendered p, .markdown-rendered li {{ margin: 4px 0 8px; }}
+    .markdown-rendered ul, .markdown-rendered ol {{ padding-left: 24px; }}
+    .markdown-rendered code {{ background: var(--bg-pre); padding: 1px 5px; border-radius: 3px; font-size: 12px; }}
+    .markdown-rendered pre {{ background: var(--bg-pre); padding: 12px; border-radius: 4px; overflow-x: auto; }}
+    .markdown-rendered pre code {{ background: transparent; padding: 0; font-size: 12px; }}
+    .markdown-rendered table {{ border-collapse: collapse; margin: 8px 0; }}
+    .markdown-rendered th, .markdown-rendered td {{ border: 1px solid var(--border); padding: 4px 8px; }}
+    .markdown-rendered a {{ color: var(--accent); }}
+    pre.source {{
+      background: var(--bg-pre); border: 1px solid var(--border);
+      border-radius: 4px; padding: 14px;
+      overflow-x: auto; max-height: calc(100vh - 110px);
+      font-size: 12.5px;
+    }}
+    .text-content {{
+      background: var(--bg-elev); border: 1px solid var(--border);
+      padding: 14px; border-radius: 4px;
+      white-space: pre-wrap; word-wrap: break-word;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace;
+      font-size: 12.5px;
+    }}
+    .hidden {{ display: none !important; }}
+    .empty {{ color: var(--text-dim); padding: 20px; text-align: center; font-style: italic; }}
+  </style>
+</head>
+<body>
+<header>
+  <span class="filename">{safe_filename}</span>
+  <span class="badge">{type_badge}</span>
+  <span class="meta">{safe_size}</span>
+  <div class="controls">
+    {_render_view_toggle(kind)}
+    <a class="btn" href="{raw_url}" download="{safe_filename}">Download</a>
+  </div>
+</header>
+<main>
+{body}
+</main>
+<script>
+  window.__ARTIFACT__ = {{
+    kind: {json.dumps(kind)},
+    filename: {json.dumps(filename)},
+    rawText: {embedded_text},
+    rawUrl:  {json.dumps(raw_url)},
+  }};
+  {_VIEW_TOGGLE_JS}
+</script>
+{_RENDERER_SCRIPTS_FOR_KIND.get(kind, "")}
+</body>
+</html>"""
+
+
+def _humanize_bytes(n: int) -> str:
+    for unit in ("B", "KB", "MB", "GB"):
+        if n < 1024 or unit == "GB":
+            return f"{n:.0f}{unit}" if unit == "B" else f"{n:.1f}{unit}"
+        n /= 1024
+    return f"{n}TB"
+
+
+def _badge_for_kind(kind: str, prism: str) -> str:
+    if kind == "code":
+        return prism
+    return kind
+
+
+def _render_view_toggle(kind: str) -> str:
+    """Render the source/preview toggle button — only shown for kinds
+    that have a meaningful split between rendered preview and raw."""
+    if kind in ("html", "svg", "markdown"):
+        return '<button id="toggle-source-btn">View source</button>'
+    return ''
+
+
+def _render_body(kind: str, prism: str, raw_url: str,
+                 raw_text: str, filename: str) -> str:
+    """Per-type body markup."""
+    safe_filename = html.escape(filename)
+    if kind == "html":
+        return f"""
+<iframe id="preview-frame" class="preview" src="{raw_url}" sandbox="allow-scripts"></iframe>
+<pre id="source-view" class="source hidden"><code class="language-markup">{html.escape(raw_text)}</code></pre>
+"""
+    if kind == "svg":
+        return f"""
+<div id="preview-frame" class="svg-container">{raw_text}</div>
+<pre id="source-view" class="source hidden"><code class="language-markup">{html.escape(raw_text)}</code></pre>
+"""
+    if kind == "markdown":
+        return f"""
+<div id="preview-frame" class="markdown-rendered"></div>
+<pre id="source-view" class="source hidden"><code class="language-markdown">{html.escape(raw_text)}</code></pre>
+"""
+    if kind == "code":
+        return f"""
+<pre class="source"><code class="language-{prism}">{html.escape(raw_text)}</code></pre>
+"""
+    if kind == "text":
+        return f'<div class="text-content">{html.escape(raw_text)}</div>'
+    if kind == "image":
+        return f'<img class="preview" src="{raw_url}" alt="{safe_filename}">'
+    if kind == "audio":
+        return f'<audio class="preview" controls src="{raw_url}"></audio>'
+    if kind == "video":
+        return f'<video class="preview" controls src="{raw_url}"></video>'
+    # binary / unknown
+    return (
+        '<div class="empty">'
+        f'No inline preview for this file type. '
+        f'<a class="btn" href="{raw_url}" download="{safe_filename}">Download</a>'
+        '</div>'
+    )
+
+
+_VIEW_TOGGLE_JS = r"""
+(function() {
+  const btn = document.getElementById('toggle-source-btn');
+  const preview = document.getElementById('preview-frame');
+  const source = document.getElementById('source-view');
+  if (!btn || !preview || !source) return;
+  let showingSource = false;
+  btn.addEventListener('click', () => {
+    showingSource = !showingSource;
+    preview.classList.toggle('hidden', showingSource);
+    source.classList.toggle('hidden', !showingSource);
+    btn.textContent = showingSource ? 'View preview' : 'View source';
+  });
+})();
+"""
+
+# Per-kind external scripts (Prism + marked + initial render)
+_RENDERER_SCRIPTS_FOR_KIND = {
+    "code": (
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>'
+    ),
+    "html": (
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>'
+    ),
+    "svg": (
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>'
+    ),
+    "markdown": (
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.2/marked.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>'
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markdown.min.js"></script>'
+        '<script>'
+        '  if (window.__ARTIFACT__.rawText && window.marked) {'
+        '    document.getElementById("preview-frame").innerHTML = '
+        '      window.marked.parse(window.__ARTIFACT__.rawText);'
+        '  }'
+        '</script>'
+    ),
+}