@beastmode-develeap/beastmode 0.1.35 → 0.1.36

package/dist/web/board.html

@@ -2268,7 +2268,8 @@ async function api(method, path, body) {
   // Each project has its own SQLite DB on the server — without this
   // scoping every project would share one global board.
   const isBoardCall = path.startsWith('/api/board/items') ||
-                      path.startsWith('/api/board/updates');
+                      path.startsWith('/api/board/updates') ||
+                      path.startsWith('/api/board/attachments');
   if (isBoardCall) {
     const proj = localStorage.getItem('beastmode-selected-project') || '';
     if (proj && proj !== 'all' && !path.includes('board=')) {
@@ -3205,6 +3206,11 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
   const [updates, setUpdates] = useState([]);
   const [loadingUpdates, setLoadingUpdates] = useState(true);
   const [sortNewest, setSortNewest] = useState(true);
+  // Attachments (Gap 8a — 2026-04-15): list every attachment the
+  // board service has for this item, render image types as thumbnails
+  // that open in a new tab when clicked.
+  const [attachments, setAttachments] = useState([]);
+  const [loadingAttachments, setLoadingAttachments] = useState(true);
   const sidebarRef = useRef(null);
   const topCommentRef = useRef(null);
 
@@ -3218,6 +3224,16 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
       .catch(() => setUpdates([]));
   }, [item && item.id]);
 
+  const refreshAttachments = useCallback(() => {
+    if (!item) return;
+    api('GET', '/api/board/items/' + item.id + '/attachments')
+      .then(data => {
+        const list = Array.isArray(data) ? data : (data.attachments || data.data || []);
+        setAttachments(list);
+      })
+      .catch(() => setAttachments([]));
+  }, [item && item.id]);
+
   useEffect(() => {
     if (!item) return;
     setLoadingUpdates(true);
@@ -3228,7 +3244,18 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
       })
       .catch(() => setUpdates([]))
       .finally(() => setLoadingUpdates(false));
-    const interval = setInterval(refreshUpdates, 10000);
+    setLoadingAttachments(true);
+    api('GET', '/api/board/items/' + item.id + '/attachments')
+      .then(data => {
+        const list = Array.isArray(data) ? data : (data.attachments || data.data || []);
+        setAttachments(list);
+      })
+      .catch(() => setAttachments([]))
+      .finally(() => setLoadingAttachments(false));
+    const interval = setInterval(() => {
+      refreshUpdates();
+      refreshAttachments();
+    }, 10000);
     return () => clearInterval(interval);
   }, [item && item.id]);
 
@@ -3357,6 +3384,41 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
         <label>Parent Epic</label>
         <div class="detail-value">${item.parent_epic ? '#' + item.parent_epic : '\u2014'}</div>
       </div>
+      ${(loadingAttachments || attachments.length > 0) && html`
+        <div style="padding:12px 24px 0;">
+          <h4 style="margin:0 0 8px 0;font-size:13px;font-weight:600;">
+            Attachments${attachments.length > 0 ? ' (' + attachments.length + ')' : ''}
+          </h4>
+          ${loadingAttachments ? html`<div class="loading-text">Loading attachments...</div>` : html`
+            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;">
+              ${attachments.map((att) => {
+                const isImage = (att.content_type || '').startsWith('image/');
+                const proj = localStorage.getItem('beastmode-selected-project') || '';
+                const sep = '?';
+                const boardQuery = (proj && proj !== 'all') ? sep + 'board=' + encodeURIComponent(proj) : '';
+                const downloadUrl = '/api/board/attachments/' + att.id + '/download' + boardQuery;
+                const sizeLabel = att.file_size > 1024 * 1024
+                  ? (att.file_size / (1024 * 1024)).toFixed(1) + ' MB'
+                  : Math.round(att.file_size / 1024) + ' KB';
+                if (isImage) {
+                  return html`
+                    <a key=${att.id} href=${downloadUrl} target="_blank" rel="noopener" title=${att.original_name + ' (' + sizeLabel + ')'} style="display:block;border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--bg-input);">
+                      <img src=${downloadUrl} alt=${att.original_name} style="display:block;width:100%;height:80px;object-fit:cover;background:var(--bg-input);" />
+                      <div style="padding:4px 6px;font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${att.original_name}</div>
+                    </a>
+                  `;
+                }
+                return html`
+                  <a key=${att.id} href=${downloadUrl} target="_blank" rel="noopener" title=${att.original_name + ' (' + sizeLabel + ')'} style="display:block;border:1px solid var(--border);border-radius:4px;padding:8px;background:var(--bg-input);text-decoration:none;color:inherit;">
+                    <div style="font-size:11px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">📎 ${att.original_name}</div>
+                    <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">${sizeLabel}</div>
+                  </a>
+                `;
+              })}
+            </div>
+          `}
+        </div>
+      `}
       <div class="detail-updates">
         <${UpdatesHeader} count=${updates.length} sortNewest=${sortNewest} onToggle=${() => setSortNewest(!sortNewest)} itemId=${item.id} onPosted=${refreshUpdates} />
         ${loadingUpdates ? html`<div class="loading-text">Loading updates...</div>` :

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beastmode-develeap/beastmode",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "BeastMode Dark Factory — turn intent into verified software",
   "type": "module",
   "bin": {