agent-bundle 0.1.0

package/dist/webui/public/file-transfer.js

@@ -0,0 +1,114 @@
+/* File Upload & Download — companion to app.js */
+(function () {
+  "use strict";
+
+  // ── Toast helper ──
+  function showToast(message, isError) {
+    var toast = document.createElement("div");
+    toast.className = "ft-toast" + (isError ? " ft-toast--error" : "");
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    setTimeout(function () { toast.remove(); }, 3000);
+  }
+
+  // ── Upload button in file-panel header ──
+  var panelHeader = document.querySelector("#file-panel .panel-header");
+  if (!panelHeader) return;
+
+  var uploadInput = document.createElement("input");
+  uploadInput.type = "file";
+  uploadInput.multiple = true;
+  uploadInput.style.display = "none";
+  panelHeader.appendChild(uploadInput);
+
+  var uploadBtn = document.createElement("button");
+  uploadBtn.type = "button";
+  uploadBtn.className = "ft-upload-btn";
+  uploadBtn.setAttribute("aria-label", "Upload files");
+  uploadBtn.setAttribute("title", "Upload files");
+  uploadBtn.innerHTML =
+    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +
+    'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+    '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>' +
+    '<polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>';
+  panelHeader.appendChild(uploadBtn);
+
+  uploadBtn.addEventListener("click", function () { uploadInput.click(); });
+
+  function uploadFiles(files) {
+    Array.from(files).forEach(function (file) {
+      var form = new FormData();
+      form.append("file", file);
+      fetch("/api/file-upload", { method: "POST", body: form })
+        .then(function (res) { return res.json(); })
+        .then(function (data) {
+          if (data.ok) {
+            showToast("Uploaded " + file.name, false);
+            window.dispatchEvent(new CustomEvent("files-changed"));
+          } else {
+            showToast(data.error || "Upload failed", true);
+          }
+        })
+        .catch(function () { showToast("Upload failed", true); });
+    });
+  }
+
+  uploadInput.addEventListener("change", function () {
+    if (uploadInput.files && uploadInput.files.length) {
+      uploadFiles(uploadInput.files);
+      uploadInput.value = "";
+    }
+  });
+
+  // ── Drag-and-drop on file tree ──
+  var fileTree = document.getElementById("file-tree");
+  if (fileTree) {
+    fileTree.addEventListener("dragover", function (e) {
+      e.preventDefault();
+      fileTree.classList.add("ft-drag-over");
+    });
+    fileTree.addEventListener("dragleave", function (e) {
+      if (!fileTree.contains(e.relatedTarget)) {
+        fileTree.classList.remove("ft-drag-over");
+      }
+    });
+    fileTree.addEventListener("drop", function (e) {
+      e.preventDefault();
+      fileTree.classList.remove("ft-drag-over");
+      if (e.dataTransfer && e.dataTransfer.files.length) {
+        uploadFiles(e.dataTransfer.files);
+      }
+    });
+  }
+
+  // ── Download button in preview header ──
+  var previewHeader = document.querySelector("#preview-area .preview-header");
+  if (!previewHeader) return;
+
+  var downloadBtn = document.createElement("button");
+  downloadBtn.type = "button";
+  downloadBtn.className = "ft-download-btn";
+  downloadBtn.setAttribute("aria-label", "Download file");
+  downloadBtn.setAttribute("title", "Download workspace");
+  downloadBtn.innerHTML =
+    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +
+    'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+    '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>' +
+    '<polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
+
+  // Insert before the close button
+  var closeBtn = document.getElementById("preview-close");
+  previewHeader.insertBefore(downloadBtn, closeBtn);
+
+  downloadBtn.addEventListener("click", function () {
+    var filePreview = document.getElementById("preview-area");
+    var filePath = filePreview ? filePreview.getAttribute("data-file-path") : null;
+    if (!filePath) return;
+    var a = document.createElement("a");
+    a.href = "/api/file-download?path=" + encodeURIComponent(filePath);
+    a.download = filePath.split("/").pop() || "file";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  });
+})();

package/dist/webui/public/index.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>agent-bundle</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/assets/styles.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
+</head>
+<body>
+  <!-- Background effects (matching site/index.html) -->
+  <div class="mesh-bg"></div>
+  <div class="noise"></div>
+
+  <div id="app">
+    <!-- Header -->
+    <header id="header">
+      <button id="menu-toggle" class="menu-toggle" type="button" aria-label="Toggle file tree">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <line x1="3" y1="6" x2="21" y2="6"/>
+          <line x1="3" y1="12" x2="21" y2="12"/>
+          <line x1="3" y1="18" x2="21" y2="18"/>
+        </svg>
+      </button>
+      <span class="logo">agent<span class="logo-dot">&middot;</span>bundle</span>
+    </header>
+
+    <div id="panels">
+      <!-- Left: File Panel -->
+      <aside id="file-panel">
+        <div class="panel-header">
+          <span class="panel-title">Files</span>
+          <span class="subtle">/workspace</span>
+        </div>
+        <div id="file-tree" class="file-tree"></div>
+      </aside>
+
+      <!-- Center: Workspace (hero) -->
+      <main id="workspace-panel">
+
+        <!-- Workspace content area -->
+        <div id="workspace-content" class="workspace-content">
+          <!-- Welcome State (shown when no file selected and no messages) -->
+          <div id="welcome-state" class="welcome-state">
+            <div class="welcome-icon">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="20" x2="18" y2="10"></line>
+                <line x1="12" y1="20" x2="12" y2="4"></line>
+                <line x1="6" y1="20" x2="6" y2="14"></line>
+                <rect x="1" y="1" width="22" height="22" rx="3" ry="3" stroke="#8b5cf6" stroke-width="1.5" fill="none" opacity="0.3"></rect>
+              </svg>
+            </div>
+            <h2 class="welcome-title" id="welcome-agent-name">Data Analysis Agent</h2>
+            <p class="welcome-powered">powered by agent<span class="dot">&middot;</span>bundle</p>
+            <p class="welcome-subtitle">Drop a CSV, ask questions in plain English, get charts and reports</p>
+            <div id="skill-badges" class="skill-badges"></div>
+            <div class="welcome-heading">Try an example</div>
+            <div id="prompt-chips" class="prompt-chips">
+              <button class="prompt-chip" data-prompt="Generate sample sales data for 12 months and show monthly revenue trends">
+                &#128202; Monthly revenue trends
+              </button>
+              <button class="prompt-chip" data-prompt="Create a dataset of 100 students with random grades, then show the grade distribution histogram">
+                &#128200; Grade distribution analysis
+              </button>
+              <button class="prompt-chip" data-prompt="Analyze the correlation between temperature and ice cream sales with sample data">
+                &#128279; Correlation analysis
+              </button>
+            </div>
+          </div>
+
+          <!-- Empty state: no files yet -->
+          <div id="empty-no-files" class="workspace-empty" style="display:none;">
+            <div class="workspace-empty-card">
+              <div class="workspace-empty-icon">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                  <polyline points="14 2 14 8 20 8"></polyline>
+                  <line x1="12" y1="18" x2="12" y2="12"></line>
+                  <line x1="9" y1="15" x2="15" y2="15"></line>
+                </svg>
+              </div>
+              <div class="workspace-empty-text">Files will appear here as the agent works.</div>
+              <div class="workspace-empty-suggestions">
+                <button class="workspace-empty-suggestion" data-prompt="Analyze the data and show trends">Analyze the data and show trends</button>
+                <button class="workspace-empty-suggestion" data-prompt="Generate a chart from the dataset">Generate a chart from the dataset</button>
+                <button class="workspace-empty-suggestion" data-prompt="Create a summary report">Create a summary report</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Empty state: files exist, none selected -->
+          <div id="empty-with-files" class="workspace-empty" style="display:none;align-items:stretch;justify-content:flex-start;">
+            <div class="workspace-empty-header">Recently Generated</div>
+            <div id="file-card-grid" class="file-card-grid">
+              <!-- Cards injected by JS -->
+            </div>
+          </div>
+
+          <!-- Preview content (shown when a file is selected) -->
+          <div id="preview-area" class="preview-area" style="display:none;">
+            <div class="preview-header">
+              <div id="preview-breadcrumb" class="preview-breadcrumb">
+                <span id="preview-filename" class="preview-breadcrumb-current">filename</span>
+              </div>
+              <button id="preview-close" class="preview-close" type="button" aria-label="Close preview">&times;</button>
+            </div>
+            <div id="preview-content" class="preview-content"></div>
+          </div>
+
+        </div>
+      </main>
+
+      <!-- Right: Chat Sidebar -->
+      <aside id="chat-sidebar" class="chat-sidebar">
+        <div class="chat-sidebar-header">
+          <span class="chat-sidebar-title">Chat</span>
+          <span id="status-badge" class="badge badge--idle">idle</span>
+        </div>
+
+        <!-- Chat Messages Area -->
+        <div id="chat-messages" class="chat-messages">
+          <!-- Messages injected by JS -->
+        </div>
+
+        <!-- Chat Input -->
+        <form id="chat-form" class="chat-form">
+          <div class="input-wrapper">
+            <textarea
+              id="chat-input"
+              class="chat-input"
+              placeholder="Send a message..."
+              rows="1"
+              autocomplete="off"
+              autofocus
+            ></textarea>
+            <button type="submit" id="send-btn" class="send-btn" aria-label="Send message">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13"></line>
+                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+              </svg>
+            </button>
+          </div>
+          <div class="input-hint">Enter to send &middot; Shift+Enter for newline</div>
+        </form>
+      </aside>
+    </div>
+  </div>
+
+  <!-- Panel overlay (mobile backdrop) -->
+  <div class="panel-overlay"></div>
+
+  <!-- Image Modal -->
+  <div id="image-modal" class="image-modal" style="display:none;" role="dialog" aria-modal="true" aria-label="Image preview">
+    <img id="modal-image" src="" alt="Preview">
+    <button id="modal-close" class="modal-close" type="button" aria-label="Close image preview">&times;</button>
+  </div>
+
+  <!-- Scripts -->
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+  <script src="/assets/app.js"></script>
+  <script src="/assets/file-transfer.js"></script>
+</body>
+</html>