Add media support for Slack threads (#31)

* Add media support for Slack threads

Enable the bot to read images (via Claude vision), download videos,
and inline text files from Slack messages. Media files are saved to
a temp directory so the agent can upload them to GitHub issues.

Includes per-file type handling, size/count guards, skip notifications,
and an in-memory download cache with TTL-based eviction.

* Fix path traversal, filename collisions, and unbounded cache

- Use basename() to strip directory segments from Slack filenames
- Prefix temp files with index to prevent overwrites on duplicate names
- Cap media cache at 100 entries, evicting oldest when exceeded

Author: gonpombo8

prompts/system.md

@@ -21,9 +21,18 @@ You read Slack thread conversations and respond to whatever is being asked. You
 - Summarize threads
 - Search for related issues or PRs
 - Answer questions about code or repositories
+- Analyze images shared in Slack threads (screenshots, diagrams, error messages, etc.)
+- Upload images and videos to GitHub issues or comments when requested
 - Give opinions or suggestions
 - Any other task the user requests
 
+## Media handling
+
+- **Images** shared in Slack threads are visible to you for visual analysis. They are also saved to temp paths listed in the "Attached Media" section so you can upload them to GitHub.
+- **Videos** are saved to disk but cannot be analyzed visually. You can upload them to GitHub issues/comments when asked.
+- **Text files** (plain text, markdown) have their content inlined in the thread text. They are also saved to disk for upload.
+- When uploading media to GitHub, use the file paths listed in the "Attached Media" section with `gh` CLI commands.
+
 Your response will be posted back to the Slack thread — keep it concise and well-formatted for Slack.
 
 ## Attribution

src/agent.ts

@@ -1,7 +1,10 @@
-import { readFileSync, writeFileSync, existsSync } from "node:fs";
-import { join, dirname } from "node:path";
+import { readFileSync, writeFileSync, existsSync, mkdtempSync, rmSync } from "node:fs";
+import { join, dirname, basename } from "node:path";
+import { tmpdir } from "node:os";
 import { fileURLToPath } from "node:url";
 import { EventEmitter } from "node:events";
+import type { ImageContent } from "@mariozechner/pi-ai";
+import type { MediaAttachment } from "./slack.js";
 import {
   createAgentSession,
   SessionManager,
@@ -31,6 +34,9 @@ interface AgentConfig {
 
 export interface RunOptions {
   threadContent: string;
+  images?: MediaAttachment[];
+  videos?: MediaAttachment[];
+  files?: MediaAttachment[];
   dryRun?: boolean;
   triggeredBy?: string;
   events?: EventEmitter;
@@ -130,6 +136,8 @@ export async function runAgent(options: RunOptions): Promise<RunResult> {
   }
 
   const { threadContent, dryRun, triggeredBy, events } = options;
+  const images = options.images ?? [];
+  const allMedia = [...images, ...(options.videos ?? []), ...(options.files ?? [])];
   const effectiveModelId = options.model || modelId;
   const sessionManager = SessionManager.inMemory();
 
@@ -166,8 +174,25 @@ export async function runAgent(options: RunOptions): Promise<RunResult> {
     tools: createCodingTools(cwd),
   });
 
+  let tempDir: string | undefined;
+
   try {
-    const prompt = buildPrompt(threadContent, dryRun, triggeredBy);
+    let mediaPaths: string[] | undefined;
+
+    if (allMedia.length > 0) {
+      tempDir = mkdtempSync(join(tmpdir(), "slack-media-"));
+      mediaPaths = allMedia.map((attachment, i) => {
+        const filePath = join(tempDir!, `${i}-${basename(attachment.filename)}`);
+        writeFileSync(filePath, Buffer.from(attachment.data, "base64"));
+        return filePath;
+      });
+    }
+
+    const imageContents: ImageContent[] | undefined = images.length > 0
+      ? images.map((img) => ({ type: "image" as const, data: img.data, mimeType: img.mimeType }))
+      : undefined;
+
+    const prompt = buildPrompt(threadContent, dryRun, triggeredBy, mediaPaths);
 
     if (events) {
       subscribeToTextDeltas(session, events);
@@ -176,7 +201,10 @@ export async function runAgent(options: RunOptions): Promise<RunResult> {
     console.log("[agent] running prompt...");
     console.log("[agent] prompt:", prompt.slice(0, 200));
     console.log("[agent] model:", effectiveModelId);
-    await session.prompt(prompt);
+    if (mediaPaths) {
+      console.log(`[agent] media: ${mediaPaths.length} files (${imageContents?.length ?? 0} images for vision)`);
+    }
+    await session.prompt(prompt, imageContents ? { images: imageContents } : undefined);
 
     const messageCount = session.messages.length;
     console.log("[agent] messages in session:", messageCount);
@@ -195,6 +223,13 @@ export async function runAgent(options: RunOptions): Promise<RunResult> {
     console.log("[agent] result length:", text.length);
     return { text, cost, tokens };
   } finally {
+    if (tempDir) {
+      try {
+        rmSync(tempDir, { recursive: true, force: true });
+      } catch (err) {
+        console.error("[agent] Failed to clean up temp dir:", err);
+      }
+    }
     session.dispose();
   }
 }

src/prompt.ts

@@ -1,4 +1,4 @@
-export function buildPrompt(threadContent: string, dryRun?: boolean, triggeredBy?: string): string {
+export function buildPrompt(threadContent: string, dryRun?: boolean, triggeredBy?: string, mediaPaths?: string[]): string {
   const dryRunNotice = dryRun
     ? "IMPORTANT: Do not execute any commands. Just describe what you would do.\n\n"
     : "";
@@ -7,5 +7,9 @@ export function buildPrompt(threadContent: string, dryRun?: boolean, triggeredBy
     ? `Triggered by: ${triggeredBy}\n\n`
     : "";
 
-  return `${dryRunNotice}${attribution}## Slack Thread\n\n<slack-thread>\n${threadContent}\n</slack-thread>`;
+  const mediaSection = mediaPaths?.length
+    ? `\n\n## Attached Media\n\nThe following files from the Slack thread are saved to disk for upload:\n${mediaPaths.map((p) => `- ${p}`).join("\n")}\n`
+    : "";
+
+  return `${dryRunNotice}${attribution}## Slack Thread\n\n<slack-thread>\n${threadContent}\n</slack-thread>${mediaSection}`;
 }

src/slack.ts

@@ -4,6 +4,34 @@ import type { Config } from "./config.js";
 import { runAgent, syncAuth, REVIEW_MODEL, PR_URL_PATTERN, REVIEW_KEYWORD_PATTERN } from "./agent.js";
 import { AgentScheduler } from "./concurrency.js";
 
+export interface MediaAttachment {
+  data: string;       // base64
+  mimeType: string;
+  filename: string;
+}
+
+export interface ThreadData {
+  text: string;
+  images: MediaAttachment[];
+  videos: MediaAttachment[];
+  files: MediaAttachment[];
+}
+
+const IMAGE_MIMES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+const VIDEO_MIMES = new Set(["video/mp4", "video/quicktime", "video/webm"]);
+const TEXT_MIMES = new Set(["text/plain", "text/markdown"]);
+const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20MB
+const MAX_FILES_PER_THREAD = 10;
+const MAX_CACHE_ENTRIES = 100;
+const CACHE_TTL_MS = 60 * 60 * 1000; // 1 hour
+
+interface CachedAttachment {
+  attachment: MediaAttachment;
+  cachedAt: number;
+}
+
+const mediaCache = new Map<string, CachedAttachment>();
+
 const nameCache = new Map<string, string>();
 
 export async function startSlackBot(config: Config): Promise<void> {
@@ -38,13 +66,16 @@ export async function startSlackBot(config: Config): Promise<void> {
     const submission = scheduler.submit(threadTs, async () => {
       await react("rl-bonk-doge");
 
-      const threadContent = await fetchThread(client, event.channel, threadTs);
+      const threadData = await fetchThread(client, event.channel, threadTs, config.slackBotToken);
       const isReview =
-        PR_URL_PATTERN.test(threadContent) ||
+        PR_URL_PATTERN.test(threadData.text) ||
         REVIEW_KEYWORD_PATTERN.test(text);
       const model = isReview ? REVIEW_MODEL : undefined;
       const { text: response, cost, tokens } = await runAgent({
-        threadContent,
+        threadContent: threadData.text,
+        images: threadData.images,
+        videos: threadData.videos,
+        files: threadData.files,
         triggeredBy: userName,
         model,
       });
@@ -161,7 +192,8 @@ async function fetchThread(
   client: WebClient,
   channel: string,
   threadTs: string,
-): Promise<string> {
+  botToken: string,
+): Promise<ThreadData> {
   const reply = await client.conversations.replies({
     channel,
     ts: threadTs,
@@ -180,11 +212,121 @@ async function fetchThread(
     }),
   );
 
-  return messages
-    .map((m) => {
-      const name = userNames.get(m.user || "") || "unknown";
-      const ts = m.ts ? new Date(parseFloat(m.ts) * 1000).toISOString() : "";
-      return `[${name}] (${ts}): ${m.text || ""}`;
-    })
-    .join("\n");
+  const images: MediaAttachment[] = [];
+  const videos: MediaAttachment[] = [];
+  const files: MediaAttachment[] = [];
+  let totalFiles = 0;
+
+  // Evict expired cache entries, then cap size by removing oldest
+  const now = Date.now();
+  for (const [key, entry] of mediaCache) {
+    if (now - entry.cachedAt > CACHE_TTL_MS) mediaCache.delete(key);
+  }
+  while (mediaCache.size > MAX_CACHE_ENTRIES) {
+    const oldest = mediaCache.keys().next().value!;
+    mediaCache.delete(oldest);
+  }
+
+  const textLines: string[] = [];
+
+  for (const m of messages) {
+    const name = userNames.get(m.user || "") || "unknown";
+    const ts = m.ts ? new Date(parseFloat(m.ts) * 1000).toISOString() : "";
+    let line = `[${name}] (${ts}): ${m.text || ""}`;
+
+    const msgFiles = (m as any).files as any[] | undefined;
+    if (msgFiles) {
+      for (const file of msgFiles) {
+        const mime: string = file.mimetype || "";
+        const filename: string = file.name || "unnamed";
+        const fileId: string = file.id || "";
+        const size: number = file.size || 0;
+        const url: string = file.url_private_download || "";
+
+        const isImage = IMAGE_MIMES.has(mime);
+        const isVideo = VIDEO_MIMES.has(mime);
+        const isText = TEXT_MIMES.has(mime);
+
+        if (!isImage && !isVideo && !isText) {
+          line += `\n[skipped file: ${filename} — unsupported type ${mime}]`;
+          continue;
+        }
+
+        if (size > MAX_FILE_SIZE) {
+          line += `\n[skipped file: ${filename} — exceeds 20MB limit]`;
+          continue;
+        }
+
+        if (totalFiles >= MAX_FILES_PER_THREAD) {
+          line += `\n[skipped file: ${filename} — thread file limit reached]`;
+          continue;
+        }
+
+        if (!url) {
+          line += `\n[skipped file: ${filename} — no download URL]`;
+          continue;
+        }
+
+        let attachment: MediaAttachment;
+        const cached = fileId ? mediaCache.get(fileId) : undefined;
+        if (cached && now - cached.cachedAt <= CACHE_TTL_MS) {
+          attachment = cached.attachment;
+        } else {
+          try {
+            attachment = await downloadSlackFile(url, mime, filename, botToken);
+            if (fileId) {
+              mediaCache.set(fileId, { attachment, cachedAt: now });
+            }
+          } catch (err) {
+            console.error(`[slack] Failed to download file ${filename}:`, err);
+            line += `\n[skipped file: ${filename} — download failed]`;
+            continue;
+          }
+        }
+
+        totalFiles++;
+
+        if (isImage) {
+          images.push(attachment);
+          line += `\n[attached image: ${filename}]`;
+        } else if (isVideo) {
+          videos.push(attachment);
+          line += `\n[attached video: ${filename}]`;
+        } else if (isText) {
+          files.push(attachment);
+          const content = Buffer.from(attachment.data, "base64").toString("utf-8");
+          line += `\n[attached file: ${filename}]\n--- file content ---\n${content}\n--- end file ---`;
+        }
+      }
+    }
+
+    textLines.push(line);
+  }
+
+  return {
+    text: textLines.join("\n"),
+    images,
+    videos,
+    files,
+  };
+}
+
+async function downloadSlackFile(
+  url: string,
+  mimeType: string,
+  filename: string,
+  botToken: string,
+): Promise<MediaAttachment> {
+  const response = await fetch(url, {
+    headers: { Authorization: `Bearer ${botToken}` },
+  });
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status} downloading ${filename}`);
+  }
+  const buffer = Buffer.from(await response.arrayBuffer());
+  return {
+    data: buffer.toString("base64"),
+    mimeType,
+    filename,
+  };
 }

test/prompt.test.ts

@@ -38,4 +38,22 @@ describe("buildPrompt", () => {
     const result = buildPrompt("hello");
     assert.ok(!result.includes("Triggered by:"));
   });
+
+  it("includes media paths when provided", () => {
+    const paths = ["/tmp/slack-media-abc/screenshot.png", "/tmp/slack-media-abc/video.mp4"];
+    const result = buildPrompt("hello", false, undefined, paths);
+    assert.ok(result.includes("## Attached Media"));
+    assert.ok(result.includes("/tmp/slack-media-abc/screenshot.png"));
+    assert.ok(result.includes("/tmp/slack-media-abc/video.mp4"));
+  });
+
+  it("omits media section when no paths provided", () => {
+    const result = buildPrompt("hello");
+    assert.ok(!result.includes("Attached Media"));
+  });
+
+  it("omits media section when empty array provided", () => {
+    const result = buildPrompt("hello", false, undefined, []);
+    assert.ok(!result.includes("Attached Media"));
+  });
 });