@lazyingart/agintiflow 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazyingart/agintiflow",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "AgInTiFlow is a resumable Playwright website-control agent with OpenAI-compatible tool calling.",
   "license": "Apache-2.0",

package/public/app.js

@@ -122,6 +122,7 @@ const translations = {
     artifactTunnelTitle: "Canvas & artifacts",
     artifactTunnelHelp: "Agent-selected canvas items, generated files, screenshots, diffs, and final answers.",
     artifactCanvasTab: "Canvas",
+    artifactPdfTab: "PDF Reader",
     artifactExplorerTab: "Explorer",
     artifactNotificationsTab: "Notifications",
     artifactListTitle: "Artifacts",
@@ -132,6 +133,10 @@ const translations = {
     artifactLoading: "Loading artifact...",
     artifactLoadFailed: "Failed to load artifact.",
     artifactSeenUpdated: "Notifications marked as seen.",
+    artifactDownloadLabel: "Download artifact",
+    artifactDownloadPreparing: "Preparing download...",
+    artifactDownloadReady: "Download started.",
+    artifactDownloadFailed: "Download failed.",
   },
   ar: {
     documentTitle: "AgInTiFlow",
@@ -1030,9 +1035,28 @@ function artifactLabel(item) {
   return [item.kind, source, when].filter(Boolean).join(" · ");
 }
 
+function isPdfArtifact(item) {
+  return item?.kind === "pdf" || item?.mime === "application/pdf" || /\.pdf$/i.test(item?.path || "");
+}
+
+function artifactVisibleInCurrentTab(item) {
+  if (currentArtifactTab === "pdf") return isPdfArtifact(item);
+  return item.tab === currentArtifactTab;
+}
+
+function preferredArtifactForCurrentTab(fallbackId = "") {
+  const current = artifactItems.find((item) => item.id === selectedArtifactId && artifactVisibleInCurrentTab(item));
+  if (current) return current;
+
+  const fallback = artifactItems.find((item) => item.id === fallbackId && artifactVisibleInCurrentTab(item));
+  if (fallback) return fallback;
+
+  return artifactItems.find(artifactVisibleInCurrentTab) || null;
+}
+
 function renderArtifactList() {
   if (!artifactListEl) return;
-  const visible = artifactItems.filter((item) => item.tab === currentArtifactTab);
+  const visible = artifactItems.filter(artifactVisibleInCurrentTab);
   const readIds = getArtifactReadIds();
 
   document.querySelectorAll(".artifact-tab").forEach((tab) => {
@@ -1054,14 +1078,23 @@ function renderArtifactList() {
       (item) => {
         const read = readIds.has(item.id);
         return `
-        <button class="artifact-row" type="button" data-artifact-id="${escapeHtml(item.id)}" data-selected="${item.id === selectedArtifactId}" data-read="${read}">
-          <span class="artifact-row-top">
-            <strong>${escapeHtml(item.title || item.path || item.kind)}</strong>
-            <span>${read ? escapeHtml(item.kind) : `New · ${escapeHtml(item.kind)}`}</span>
-          </span>
-          <span class="artifact-row-meta">${escapeHtml(artifactLabel(item))}</span>
-          <span class="artifact-row-preview">${escapeHtml(item.preview || item.path || "")}</span>
-        </button>
+        <div class="artifact-row" data-selected="${item.id === selectedArtifactId}" data-read="${read}">
+          <button class="artifact-row-main" type="button" data-artifact-id="${escapeHtml(item.id)}">
+            <span class="artifact-row-top">
+              <strong>${escapeHtml(item.title || item.path || item.kind)}</strong>
+              <span>${read ? escapeHtml(item.kind) : `New · ${escapeHtml(item.kind)}`}</span>
+            </span>
+            <span class="artifact-row-meta">${escapeHtml(artifactLabel(item))}</span>
+            <span class="artifact-row-preview">${escapeHtml(item.preview || item.path || "")}</span>
+          </button>
+          <button
+            class="artifact-menu-button"
+            type="button"
+            data-artifact-download-id="${escapeHtml(item.id)}"
+            aria-label="${escapeHtml(t("artifactDownloadLabel"))}"
+            title="${escapeHtml(t("artifactDownloadLabel"))}"
+          >...</button>
+        </div>
       `;
       }
     )
@@ -1078,7 +1111,8 @@ function resetArtifactViewer() {
 function renderArtifactShell() {
   renderArtifactBadge();
   renderArtifactList();
-  if (!selectedArtifactId || !artifactItems.some((item) => item.id === selectedArtifactId)) {
+  const selected = artifactItems.find((item) => item.id === selectedArtifactId);
+  if (!selected || !artifactVisibleInCurrentTab(selected)) {
     resetArtifactViewer();
   }
 }
@@ -1111,6 +1145,79 @@ function renderArtifactContent(content) {
   `;
 }
 
+function artifactDownloadName(item, content) {
+  const sourceName = content.path || item?.path || content.title || item?.title || `artifact-${content.id || "download"}`;
+  const fallbackExt =
+    content.mime === "application/pdf" || content.kind === "pdf"
+      ? ".pdf"
+      : content.mime?.startsWith("image/png")
+        ? ".png"
+        : content.mime?.startsWith("image/svg")
+          ? ".svg"
+          : content.kind === "json"
+            ? ".json"
+            : content.kind === "diff"
+              ? ".diff"
+              : content.kind === "markdown"
+                ? ".md"
+                : ".txt";
+  const base = sourceName
+    .split("/")
+    .filter(Boolean)
+    .pop()
+    ?.replace(/[^A-Za-z0-9._-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  const name = base || `artifact-${content.id || Date.now()}`;
+  return /\.[A-Za-z0-9]{1,8}$/.test(name) ? name : `${name}${fallbackExt}`;
+}
+
+function blobFromDataUrl(dataUrl) {
+  const [meta = "", payload = ""] = String(dataUrl || "").split(",", 2);
+  const mime = meta.match(/^data:([^;,]+)/)?.[1] || "application/octet-stream";
+  if (meta.includes(";base64")) {
+    const binary = atob(payload);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+    return new Blob([bytes], { type: mime });
+  }
+  return new Blob([decodeURIComponent(payload)], { type: mime });
+}
+
+async function downloadArtifact(artifactId) {
+  if (!currentSessionId || !artifactId) return;
+  const item = artifactItems.find((candidate) => candidate.id === artifactId);
+  artifactStatusEl.textContent = t("artifactDownloadPreparing");
+
+  try {
+    const response = await fetch(
+      `/api/sessions/${encodeURIComponent(currentSessionId)}/artifacts/${encodeURIComponent(artifactId)}`
+    );
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(data.error || t("artifactDownloadFailed"));
+
+    const blob = data.dataUrl
+      ? blobFromDataUrl(data.dataUrl)
+      : new Blob([typeof data.text === "string" ? data.text : JSON.stringify(data, null, 2)], {
+          type: data.mime || "text/plain;charset=utf-8",
+        });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = artifactDownloadName(item, data);
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+
+    markArtifactRead(artifactId);
+    renderArtifactBadge();
+    renderArtifactList();
+    artifactStatusEl.textContent = t("artifactDownloadReady");
+  } catch (error) {
+    artifactStatusEl.textContent = error instanceof Error ? error.message : t("artifactDownloadFailed");
+  }
+}
+
 async function refreshArtifacts({ loadSelected = false } = {}) {
   if (!currentSessionId) {
     artifactItems = [];
@@ -1125,9 +1232,27 @@ async function refreshArtifacts({ loadSelected = false } = {}) {
   const data = await response.json();
   artifactItems = data.items || [];
   artifactUnreadCount = computeUnreadArtifactCount();
+
+  if (loadSelected) {
+    const backendSelected = artifactItems.find((item) => item.id === data.selectedItemId);
+    const pdfCandidate = artifactItems.find((item) => item.id === selectedArtifactId && isPdfArtifact(item))
+      || (backendSelected && isPdfArtifact(backendSelected) ? backendSelected : null)
+      || artifactItems.find(isPdfArtifact);
+    if (pdfCandidate) {
+      currentArtifactTab = "pdf";
+      selectedArtifactId = pdfCandidate.id;
+    }
+  }
+
   if (!selectedArtifactId || !artifactItems.some((item) => item.id === selectedArtifactId)) {
     selectedArtifactId = data.selectedItemId || artifactItems[0]?.id || "";
   }
+
+  const visiblePreferred = preferredArtifactForCurrentTab(data.selectedItemId);
+  if (visiblePreferred) {
+    selectedArtifactId = visiblePreferred.id;
+  }
+
   renderArtifactShell();
   if (loadSelected && selectedArtifactId) await selectArtifact(selectedArtifactId, { persist: false });
 }
@@ -1466,10 +1591,26 @@ artifactTabsEl.addEventListener("click", (event) => {
   const tab = event.target.closest("[data-artifact-tab]");
   if (!tab) return;
   currentArtifactTab = tab.dataset.artifactTab || "canvas";
+  const preferred = preferredArtifactForCurrentTab();
+  if (preferred) selectedArtifactId = preferred.id;
   renderArtifactShell();
+  if (selectedArtifactId) {
+    selectArtifact(selectedArtifactId, { persist: false }).catch((error) => {
+      artifactStatusEl.textContent = String(error);
+    });
+  }
 });
 
 artifactListEl.addEventListener("click", (event) => {
+  const downloadButton = event.target.closest("[data-artifact-download-id]");
+  if (downloadButton) {
+    event.stopPropagation();
+    downloadArtifact(downloadButton.dataset.artifactDownloadId || "").catch((error) => {
+      artifactStatusEl.textContent = String(error);
+    });
+    return;
+  }
+
   const row = event.target.closest("[data-artifact-id]");
   if (!row) return;
   selectArtifact(row.dataset.artifactId || "").catch((error) => {

package/public/index.html

@@ -308,6 +308,7 @@
         </div>
         <div class="artifact-tabs" role="tablist" aria-label="Artifact tunnel tabs">
           <button id="artifact-tab-canvas" class="artifact-tab" type="button" data-artifact-tab="canvas" data-selected="true" data-i18n="artifactCanvasTab">Canvas</button>
+          <button id="artifact-tab-pdf" class="artifact-tab" type="button" data-artifact-tab="pdf" data-i18n="artifactPdfTab">PDF Reader</button>
           <button id="artifact-tab-explorer" class="artifact-tab" type="button" data-artifact-tab="explorer" data-i18n="artifactExplorerTab">Explorer</button>
           <button id="artifact-tab-notifications" class="artifact-tab" type="button" data-artifact-tab="notifications" data-i18n="artifactNotificationsTab">Notifications</button>
         </div>

package/public/styles.css

@@ -14,6 +14,13 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
 body {
   margin: 0;
   font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
@@ -25,20 +32,24 @@ body {
 }
 
 .page {
-  width: min(1240px, calc(100% - 32px));
+  width: min(1240px, 100%);
+  max-width: 100%;
   margin: 32px auto;
+  padding: 0 16px;
   display: grid;
   gap: 20px;
-  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
+  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
 }
 
 .stack {
   display: grid;
+  min-width: 0;
   align-content: start;
   gap: 14px;
 }
 
 .panel {
+  min-width: 0;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 18px;
@@ -137,6 +148,7 @@ button {
 input,
 textarea,
 select {
+  min-width: 0;
   width: 100%;
   border: 1px solid var(--line);
   background: #fffdfa;
@@ -306,6 +318,8 @@ button.danger {
 .actions,
 .header-row {
   display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
   gap: 12px;
   align-items: center;
   justify-content: space-between;
@@ -417,6 +431,7 @@ button.danger {
   font-size: 0.72rem;
   line-height: 1.42;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 .sandbox-card h2 {
@@ -444,6 +459,7 @@ button.danger {
   font-size: 0.78rem;
   line-height: 1.45;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 .session-select {
@@ -452,13 +468,18 @@ button.danger {
 
 .session-tools {
   display: flex;
-  min-width: min(100%, 420px);
+  flex: 1 1 420px;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   justify-content: flex-end;
 }
 
 .session-tools .session-select {
+  flex: 1 1 220px;
+  min-width: 0;
   max-width: none;
 }
 
@@ -476,6 +497,7 @@ button.danger {
   font-size: 0.9rem;
   line-height: 1.5;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 .chat-panel {
@@ -514,6 +536,7 @@ button.danger {
 
 .chat-content {
   line-height: 1.5;
+  overflow-wrap: anywhere;
 }
 
 .chat-form {
@@ -522,6 +545,7 @@ button.danger {
 
 .modal {
   width: min(720px, calc(100% - 28px));
+  max-width: 100%;
   padding: 0;
   border: 0;
   border-radius: 22px;
@@ -604,6 +628,7 @@ button.danger {
 
 .artifact-modal {
   width: min(1120px, calc(100% - 28px));
+  max-width: 100%;
 }
 
 .artifact-modal-card {
@@ -613,6 +638,7 @@ button.danger {
 
 .artifact-tabs {
   display: flex;
+  max-width: 100%;
   flex-wrap: wrap;
   gap: 8px;
   padding: 5px;
@@ -623,7 +649,7 @@ button.danger {
 
 .artifact-tab {
   flex: 1;
-  min-width: 130px;
+  min-width: min(130px, 100%);
   border: 1px solid transparent;
   background: transparent;
   color: var(--muted);
@@ -639,6 +665,7 @@ button.danger {
 .artifact-layout {
   display: grid;
   min-height: 520px;
+  max-width: 100%;
   gap: 14px;
   grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
   overflow: hidden;
@@ -674,6 +701,7 @@ button.danger {
 .artifact-list {
   display: grid;
   align-content: start;
+  min-width: 0;
   gap: 8px;
   overflow: auto;
   padding: 10px;
@@ -681,7 +709,8 @@ button.danger {
 
 .artifact-row {
   display: grid;
-  gap: 5px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
   width: 100%;
   padding: 11px 12px;
   border: 1px solid var(--line);
@@ -691,6 +720,40 @@ button.danger {
   text-align: left;
 }
 
+.artifact-row-main {
+  display: grid;
+  min-width: 0;
+  gap: 5px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  text-align: left;
+}
+
+.artifact-menu-button {
+  width: 34px;
+  min-width: 34px;
+  height: 34px;
+  align-self: start;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 253, 250, 0.9);
+  color: var(--muted);
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  box-shadow: none;
+}
+
+.artifact-menu-button:hover,
+.artifact-menu-button:focus-visible {
+  border-color: rgba(15, 118, 110, 0.34);
+  color: var(--accent);
+}
+
 .artifact-row[data-selected="true"] {
   border-color: rgba(15, 118, 110, 0.62);
   box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1);
@@ -715,6 +778,7 @@ button.danger {
 .artifact-row-top,
 .artifact-viewer-header {
   display: flex;
+  min-width: 0;
   gap: 10px;
   align-items: flex-start;
   justify-content: space-between;
@@ -722,6 +786,7 @@ button.danger {
 
 .artifact-row-top strong,
 .artifact-viewer-header h3 {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -752,6 +817,7 @@ button.danger {
 .artifact-row-preview {
   display: -webkit-box;
   overflow: hidden;
+  overflow-wrap: anywhere;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
@@ -808,6 +874,7 @@ button.danger {
 
 .artifact-pdf-frame {
   width: 100%;
+  max-width: 100%;
   min-height: 62vh;
   border: 1px solid var(--line);
   border-radius: 14px;
@@ -828,6 +895,8 @@ button.danger {
 
 @media (max-width: 960px) {
   .page {
+    margin: 16px auto;
+    padding: 0 12px;
     grid-template-columns: 1fr;
   }
 
@@ -876,3 +945,23 @@ button.danger {
     overflow: auto;
   }
 }
+
+@media (max-width: 720px) {
+  .grid,
+  .checks,
+  .wrapper-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .panel {
+    padding: 15px;
+  }
+
+  .artifact-tabs {
+    border-radius: 18px;
+  }
+
+  .artifact-tab {
+    min-width: 120px;
+  }
+}