slidev-addon-agent 0.0.1

package/agent/tools/export-tool.ts

@@ -0,0 +1,216 @@
+import path from "node:path"
+import { mkdir, readFile, readdir, realpath } from "node:fs/promises"
+import { spawn } from "node:child_process"
+import { createRequire } from "node:module"
+import { pathToFileURL } from "node:url"
+
+import { tool } from "langchain"
+import { z } from "zod"
+
+import { resolveDeckExecutionContext } from "../deck-context.js"
+
+const slidevExportScreenshotSchema = z.object({
+  slideIndex: z.number().int().positive().describe("1-based slide index to export as PNG."),
+  outputDir: z.string().optional().describe("Optional output directory. Prefer omitting this unless you need a custom project-local path."),
+  timeout: z.number().int().positive().optional().describe("Optional Slidev export timeout in milliseconds. Defaults to 60000."),
+  wait: z.number().int().nonnegative().optional().describe("Optional Slidev export wait in milliseconds. Defaults to 500."),
+})
+
+function isWithinRoot(rootDir: string, candidatePath: string) {
+  return candidatePath === rootDir || candidatePath.startsWith(`${rootDir}${path.sep}`)
+}
+
+async function resolveOutputDir(rootDir: string, deckHostDir: string, slideIndex: number, outputDir?: string) {
+  const fallbackOutputDir = path.join(deckHostDir, ".slidev-agent-artifacts", `verify-${slideIndex}`)
+  const requestedOutputDir = outputDir?.trim() || fallbackOutputDir
+  const resolvedOutputDir = path.isAbsolute(requestedOutputDir)
+    ? path.resolve(requestedOutputDir)
+    : path.resolve(deckHostDir, requestedOutputDir)
+
+  const [realRoot, realOutputDirParent] = await Promise.all([
+    realpath(rootDir).catch(() => rootDir),
+    realpath(path.dirname(resolvedOutputDir)).catch(() => path.dirname(resolvedOutputDir)),
+  ])
+
+  if (!isWithinRoot(realRoot, realOutputDirParent) && !isWithinRoot(rootDir, resolvedOutputDir)) {
+    throw new Error(`slidev_export_screenshot outputDir must stay within the project root (${rootDir}).`)
+  }
+
+  return resolvedOutputDir
+}
+
+function getPnpmCommand() {
+  return process.platform === "win32" ? "pnpm.cmd" : "pnpm"
+}
+
+type SlidevCliModule = {
+  resolveOptions?: (
+    options: { entry: string, theme?: string },
+    mode: string,
+  ) => Promise<{ data?: { slides?: unknown[] } }>
+}
+
+const ANSI_ESCAPE_PATTERN = /\u001B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g
+
+async function resolveDeckSlideCount(deckHostDir: string, entryPath: string) {
+  const requireFromDeck = createRequire(path.join(deckHostDir, "package.json"))
+  const slidevCliPackageJsonPath = requireFromDeck.resolve("@slidev/cli/package.json")
+  const slidevCliPackageJson = JSON.parse(
+    await readFile(slidevCliPackageJsonPath, "utf8"),
+  ) as { module?: string, main?: string }
+  const slidevCliEntry = path.resolve(
+    path.dirname(slidevCliPackageJsonPath),
+    slidevCliPackageJson.module || slidevCliPackageJson.main || "dist/index.mjs",
+  )
+  const slidevCli = await import(pathToFileURL(slidevCliEntry).href) as SlidevCliModule
+  const resolved = await slidevCli.resolveOptions?.({ entry: entryPath }, "export")
+  return Array.isArray(resolved?.data?.slides) ? resolved.data.slides.length : null
+}
+
+function stripAnsi(output: string) {
+  return output.replace(ANSI_ESCAPE_PATTERN, "")
+}
+
+function extractLikelyBuildError(output: string) {
+  const cleanedOutput = stripAnsi(output)
+  const lines = cleanedOutput.split(/\r?\n/)
+  const errorStartIndex = lines.findIndex(line =>
+    /\[vite\].*(Pre-transform error|Internal server error)/.test(line)
+    || /Plugin:\s+vite:vue/.test(line)
+    || /Failed to resolve import/i.test(line)
+    || /Invalid end tag\./.test(line),
+  )
+
+  if (errorStartIndex === -1)
+    return null
+
+  const errorLines: string[] = []
+  for (let index = errorStartIndex; index < lines.length; index += 1) {
+    const line = lines[index]
+
+    if (index > errorStartIndex && !line.trim())
+      break
+
+    if (/^\s*✓\s+exported to\b/.test(line))
+      break
+
+    errorLines.push(line)
+
+    if (errorLines.length >= 30)
+      break
+  }
+
+  return errorLines.join("\n").trim() || null
+}
+
+function runCommand(cwd: string, args: string[]) {
+  return new Promise<{ exitCode: number, output: string }>((resolve, reject) => {
+    const child = spawn(getPnpmCommand(), args, {
+      cwd,
+      env: process.env,
+      stdio: ["ignore", "pipe", "pipe"],
+    })
+
+    let output = ""
+
+    child.stdout.on("data", (chunk) => {
+      output += chunk.toString()
+    })
+
+    child.stderr.on("data", (chunk) => {
+      output += chunk.toString()
+    })
+
+    child.on("error", reject)
+    child.on("close", (exitCode) => {
+      resolve({
+        exitCode: exitCode ?? 1,
+        output,
+      })
+    })
+  })
+}
+
+export function createSlidevExportScreenshotTool(rootDir: string) {
+  return tool(async ({ slideIndex, outputDir, timeout, wait }) => {
+    const deckContext = resolveDeckExecutionContext(path.resolve(rootDir))
+    const resolvedOutputDir = await resolveOutputDir(deckContext.rootDir, deckContext.deckHostDir, slideIndex, outputDir)
+    const totalSlides = await resolveDeckSlideCount(deckContext.deckHostDir, deckContext.entryPath).catch(() => null)
+
+    if (totalSlides !== null && slideIndex > totalSlides) {
+      throw new Error([
+        `slidev_export_screenshot requested slide ${slideIndex}, but the resolved deck only has ${totalSlides} slides.`,
+        `Resolved deck entry: ${path.relative(deckContext.rootDir, deckContext.entryPath) || path.basename(deckContext.entryPath)}`,
+        "This usually means the slide is not imported into the final deck yet or the 1-based slide index was counted incorrectly.",
+      ].join("\n"))
+    }
+
+    await mkdir(resolvedOutputDir, { recursive: true })
+
+    const args = [
+      "exec",
+      "slidev-agent",
+      "export",
+      "--format",
+      "png",
+      "--range",
+      String(slideIndex),
+      "--per-slide",
+      "--output",
+      resolvedOutputDir,
+      "--timeout",
+      String(timeout ?? 60000),
+      "--wait",
+      String(wait ?? 500),
+      "--scale",
+      "1",
+    ]
+
+    const result = await runCommand(deckContext.deckHostDir, args)
+    if (result.exitCode !== 0) {
+      throw new Error([
+        `slidev_export_screenshot failed with exit code ${result.exitCode}.`,
+        `Deck directory: ${deckContext.deckHostDir}`,
+        `Command: ${getPnpmCommand()} ${args.join(" ")}`,
+        result.output.trim(),
+      ].filter(Boolean).join("\n"))
+    }
+
+    const imageFiles = (await readdir(resolvedOutputDir))
+      .filter(fileName => fileName.toLowerCase().endsWith(".png"))
+      .sort((a, b) => a.localeCompare(b))
+
+    if (imageFiles.length === 0) {
+      const buildError = extractLikelyBuildError(result.output)
+      if (buildError) {
+        throw new Error([
+          "slidev_export_screenshot hit a Slidev/Vite build error and produced no PNG files.",
+          `Deck directory: ${deckContext.deckHostDir}`,
+          `Command: ${getPnpmCommand()} ${args.join(" ")}`,
+          buildError,
+        ].join("\n"))
+      }
+
+      throw new Error([
+        `slidev_export_screenshot succeeded but produced no PNG files in ${resolvedOutputDir}.`,
+        totalSlides !== null ? `Resolved deck slide count: ${totalSlides}. Requested slide: ${slideIndex}.` : "",
+        "This usually means the requested 1-based slide index does not exist in the final rendered deck yet.",
+      ].filter(Boolean).join("\n"))
+    }
+
+    const imagePaths = imageFiles.map(fileName => path.join(resolvedOutputDir, fileName))
+
+    return {
+      slideIndex,
+      deckDir: deckContext.deckHostDir,
+      outputDir: resolvedOutputDir,
+      imagePaths,
+      primaryImagePath: imagePaths[0],
+      command: `${getPnpmCommand()} ${args.join(" ")}`,
+    }
+  }, {
+    name: "slidev_export_screenshot",
+    description: "Export one Slidev slide to PNG from the correct deck directory and return the generated image path.",
+    schema: slidevExportScreenshotSchema,
+  })
+}

package/agent/tools/review-tool.ts

@@ -0,0 +1,136 @@
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import { readFile, realpath, stat } from "node:fs/promises"
+
+import { initChatModel, tool } from "langchain"
+import { z } from "zod"
+
+import { model } from "../../lib/env.js"
+
+const slidevReviewScreenshotSchema = z.object({
+  imagePath: z.string().min(1).describe("Path to the exported PNG screenshot file. Use a path inside the project root, for example `.slidev-agent-artifacts/verify-5/1.png`."),
+  slideIndex: z.number().int().positive().optional().describe("Optional 1-based slide index represented by the screenshot."),
+  focus: z.string().optional().describe("Optional short note about what to scrutinize most closely."),
+})
+
+const slidevReviewScreenshotResultSchema = z.object({
+  pass: z.boolean().describe("Whether the slide looks presentation-ready in the screenshot."),
+  summary: z.string().describe("Short visual verdict."),
+  issues: z.array(z.string()).describe("Concrete visual problems found in the screenshot."),
+  suggestions: z.array(z.string()).describe("Targeted improvements to address the issues."),
+})
+
+function isWithinRoot(rootDir: string, candidatePath: string) {
+  return candidatePath === rootDir || candidatePath.startsWith(`${rootDir}${path.sep}`)
+}
+
+function normalizeImagePathInput(imagePath: string) {
+  const trimmed = imagePath.trim()
+  if (!trimmed)
+    return trimmed
+
+  if (trimmed.startsWith("file://"))
+    return fileURLToPath(trimmed)
+
+  return trimmed
+}
+
+async function resolveImagePath(rootDir: string, imagePath: string) {
+  const absoluteRoot = path.resolve(rootDir)
+  const normalizedImagePath = normalizeImagePathInput(imagePath)
+  const resolved = path.isAbsolute(normalizedImagePath)
+    ? path.resolve(normalizedImagePath)
+    : path.resolve(absoluteRoot, normalizedImagePath)
+
+  if (resolved === absoluteRoot)
+    throw new Error("Screenshot path must point to an image file, not the project root.")
+
+  if (isWithinRoot(absoluteRoot, resolved))
+    return resolved
+
+  const [realRoot, realResolved] = await Promise.all([
+    realpath(absoluteRoot).catch(() => absoluteRoot),
+    realpath(resolved).catch(() => resolved),
+  ])
+
+  if (!isWithinRoot(realRoot, realResolved)) {
+    throw new Error(
+      `Screenshot path must stay within the project root (${absoluteRoot}). Export the PNG into a project-local folder such as ".slidev-agent-artifacts/verify-<slideIndex>" and pass that PNG file path to slidev_review_screenshot.`,
+    )
+  }
+
+  return realResolved
+}
+
+function isPngBuffer(fileBuffer: Buffer) {
+  return fileBuffer.length >= 8
+    && fileBuffer[0] === 0x89
+    && fileBuffer[1] === 0x50
+    && fileBuffer[2] === 0x4E
+    && fileBuffer[3] === 0x47
+    && fileBuffer[4] === 0x0D
+    && fileBuffer[5] === 0x0A
+    && fileBuffer[6] === 0x1A
+    && fileBuffer[7] === 0x0A
+}
+
+export function createSlidevReviewScreenshotTool(rootDir: string) {
+  return tool(async ({ imagePath, slideIndex, focus }) => {
+    const resolvedImagePath = await resolveImagePath(rootDir, imagePath)
+    const fileInfo = await stat(resolvedImagePath).catch(() => null)
+    if (!fileInfo?.isFile())
+      throw new Error(`Screenshot not found: ${imagePath}`)
+
+    const imageBuffer = await readFile(resolvedImagePath)
+    if (path.extname(resolvedImagePath).toLowerCase() !== ".png") {
+      throw new Error(
+        `slidev_review_screenshot only accepts PNG files. Got: ${path.extname(resolvedImagePath) || "unknown"}`,
+      )
+    }
+
+    if (!isPngBuffer(imageBuffer))
+      throw new Error(`slidev_review_screenshot expected a real PNG file at: ${imagePath}`)
+
+    const imageData = imageBuffer.toString("base64")
+    const reviewModel = await initChatModel(model, {
+      temperature: 0,
+    })
+    const structuredReviewer = reviewModel.withStructuredOutput(slidevReviewScreenshotResultSchema)
+
+    const review = await structuredReviewer.invoke([
+      {
+        role: "user",
+        content: [
+          {
+            type: "text",
+            text: [
+              `Review this rendered Slidev slide screenshot${slideIndex ? ` for slide ${slideIndex}` : ""}.`,
+              "Judge only what is visible in the image. Do not guess about hidden or source markdown content.",
+              "Mark the slide as failing if you notice clipped or off-screen content, overflow, cramped layout, collisions, unreadable or tiny text, broken wrapping, poor contrast, or obvious alignment problems.",
+              "Only pass the slide if it looks presentation-ready.",
+              focus ? `Pay extra attention to: ${focus}` : "",
+              "Return concise structured output.",
+            ].filter(Boolean).join("\n"),
+          },
+          {
+            type: "image",
+            source_type: "base64",
+            data: imageData,
+            mimeType: "image/png",
+            mime_type: "image/png",
+          },
+        ],
+      },
+    ])
+
+    return {
+      ...review,
+      imagePath: path.relative(rootDir, resolvedImagePath) || path.basename(resolvedImagePath),
+      slideIndex: slideIndex || null,
+    }
+  }, {
+    name: "slidev_review_screenshot",
+    description: "Review an exported PNG slide screenshot with a multimodal model and report visual issues such as clipping, overflow, collisions, poor contrast, and unreadable text.",
+    schema: slidevReviewScreenshotSchema,
+  })
+}

package/app/index.ts

@@ -0,0 +1,124 @@
+import path from "node:path"
+import { readFile, stat } from "node:fs/promises"
+
+import { Hono } from "hono"
+import { env } from "../lib/env.js"
+
+function resolveRootDir() {
+  return path.resolve(env(process.env, "SLIDEV_AGENT_ROOT_DIR") || process.cwd())
+}
+
+function normalizeBasePath(basePath: string) {
+  if (!basePath.startsWith("/"))
+    return `/${basePath}`
+
+  return basePath.replace(/\/+$/, "")
+}
+
+function getMimeType(filePath: string) {
+  const extension = path.extname(filePath).toLowerCase()
+  switch (extension) {
+    case ".html":
+      return "text/html; charset=utf-8"
+    case ".js":
+      return "application/javascript; charset=utf-8"
+    case ".mjs":
+      return "application/javascript; charset=utf-8"
+    case ".css":
+      return "text/css; charset=utf-8"
+    case ".json":
+      return "application/json; charset=utf-8"
+    case ".svg":
+      return "image/svg+xml"
+    case ".png":
+      return "image/png"
+    case ".jpg":
+    case ".jpeg":
+      return "image/jpeg"
+    case ".gif":
+      return "image/gif"
+    case ".webp":
+      return "image/webp"
+    case ".woff":
+      return "font/woff"
+    case ".woff2":
+      return "font/woff2"
+    default:
+      return "application/octet-stream"
+  }
+}
+
+async function exists(filePath: string) {
+  try {
+    await stat(filePath)
+    return true
+  }
+  catch {
+    return false
+  }
+}
+
+async function proxyToDevServer(requestUrl: URL, assetPath: string) {
+  const devServerUrl = new URL(env(process.env, "SLIDEV_AGENT_DEV_URL", "http://localhost:3030"))
+  const targetUrl = new URL(assetPath || "/", devServerUrl)
+  targetUrl.search = requestUrl.search
+
+  const response = await fetch(targetUrl)
+  const body = await response.arrayBuffer()
+
+  return new Response(body, {
+    status: response.status,
+    headers: response.headers,
+  })
+}
+
+const app = new Hono()
+
+const basePath = normalizeBasePath(env(process.env, "SLIDEV_AGENT_APP_BASE_PATH", "/slidev-agent"))
+
+app.get("/", c => c.redirect(`${basePath}/`, 302))
+app.get(basePath, c => c.redirect(`${basePath}/`, 302))
+
+app.get(`${basePath}/*`, async (c) => {
+  const requestUrl = new URL(c.req.url)
+  const assetPath = requestUrl.pathname.slice(basePath.length) || "/"
+  const distRoot = path.join(resolveRootDir(), "dist")
+
+  if (await exists(path.join(distRoot, "index.html"))) {
+    const candidatePath = path.normalize(path.join(distRoot, assetPath))
+    const safeRoot = `${distRoot}${path.sep}`
+    const safeCandidate = candidatePath === distRoot || candidatePath.startsWith(safeRoot)
+
+    if (!safeCandidate)
+      return c.text("Invalid asset path", 400)
+
+    const isSpaRoute = !path.extname(assetPath)
+    const filePath = await exists(candidatePath)
+      ? candidatePath
+      : isSpaRoute
+        ? path.join(distRoot, "index.html")
+        : ""
+
+    if (!filePath)
+      return c.text("Asset not found", 404)
+
+    const content = await readFile(filePath)
+    return new Response(content, {
+      headers: {
+        "content-type": getMimeType(filePath),
+      },
+    })
+  }
+
+  try {
+    return await proxyToDevServer(requestUrl, assetPath)
+  }
+  catch {
+    return c.text(
+      `Slidev app is not available yet. Start \`slidev-agent dev\` or build the deck so LangGraph can serve it from ${basePath}/.`,
+      503,
+    )
+  }
+})
+
+export { app }

package/components/MessageItem.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import type { SidebarMessage } from "../lib/sidebar"
+import { renderChatMarkdown } from "../lib/render-chat-markdown"
+import SubagentCard from "./SubagentCard.vue"
+
+defineProps<{
+  message: SidebarMessage
+}>()
+</script>
+
+<template>
+  <div
+    class="slidev-agent-message"
+    :class="`slidev-agent-message--${message.role}`"
+  >
+    <template v-if="message.kind === 'tool'">
+      <div class="slidev-agent-tool">
+        <span class="slidev-agent-tool__dot" />
+        <span class="slidev-agent-tool__headline">{{ message.toolHeadline }}</span>
+        <span v-if="message.argsSummary" class="slidev-agent-tool__args">
+          {{ message.argsSummary }}
+        </span>
+        <span class="slidev-agent-tool__summary">
+          {{ message.resultSummary }}
+        </span>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="slidev-agent-message__label">
+        {{ message.label }}
+      </div>
+
+      <div
+        v-if="message.content"
+        class="slidev-agent-message__body"
+        v-html="renderChatMarkdown(message.content)"
+      />
+
+      <div
+        v-if="message.subagents.length > 0"
+        class="slidev-agent-message__subagents"
+      >
+        <SubagentCard
+          v-for="subagent in message.subagents"
+          :key="subagent.id"
+          :subagent="subagent"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.slidev-agent-message {
+  padding: 0.75rem;
+  border-radius: 0.9rem;
+  background: rgba(30, 41, 59, 0.85);
+  min-width: 0;
+}
+
+.slidev-agent-message--human {
+  background: rgba(37, 99, 235, 0.2);
+}
+
+.slidev-agent-message--tool {
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  border: 0;
+}
+
+.slidev-agent-message--subagent {
+  padding: 0.55rem 0.6rem;
+  background: rgba(15, 23, 42, 0.72);
+  border: 1px solid rgba(148, 163, 184, 0.16);
+}
+
+.slidev-agent-message__label {
+  margin-bottom: 0.35rem;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #93c5fd;
+}
+
+.slidev-agent-message__body {
+  line-height: 1.45;
+  font-size: 0.92rem;
+  word-break: break-word;
+}
+
+.slidev-agent-message__body :deep(p) {
+  margin: 0 0 0.5em;
+}
+
+.slidev-agent-message__body :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.slidev-agent-message__body :deep(ul),
+.slidev-agent-message__body :deep(ol) {
+  margin: 0.35em 0 0.5em;
+  padding-left: 1.25rem;
+}
+
+.slidev-agent-message__body :deep(li + li) {
+  margin-top: 0.25em;
+}
+
+.slidev-agent-message__body :deep(a) {
+  color: #93c5fd;
+  text-decoration: underline;
+  text-underline-offset: 0.12em;
+}
+
+.slidev-agent-message__body :deep(code) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.88em;
+  padding: 0.12em 0.35em;
+  border-radius: 0.35rem;
+  background: rgba(15, 23, 42, 0.85);
+  color: #e2e8f0;
+}
+
+.slidev-agent-message__body :deep(pre) {
+  margin: 0.5em 0;
+  padding: 0.55rem 0.65rem;
+  border-radius: 0.5rem;
+  background: rgba(15, 23, 42, 0.92);
+  overflow-x: auto;
+  font-size: 0.82rem;
+}
+
+.slidev-agent-message__body :deep(pre code) {
+  padding: 0;
+  background: transparent;
+  font-size: inherit;
+}
+
+.slidev-agent-message__body :deep(blockquote) {
+  margin: 0.4em 0;
+  padding-left: 0.75rem;
+  border-left: 3px solid rgba(148, 163, 184, 0.45);
+  color: #cbd5e1;
+}
+
+.slidev-agent-message__body :deep(h1),
+.slidev-agent-message__body :deep(h2),
+.slidev-agent-message__body :deep(h3) {
+  margin: 0.5em 0 0.35em;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.slidev-agent-message__body :deep(h1) {
+  font-size: 1.05em;
+}
+
+.slidev-agent-message__body :deep(h2) {
+  font-size: 1em;
+}
+
+.slidev-agent-message__body :deep(h3) {
+  font-size: 0.95em;
+}
+
+.slidev-agent-message__body :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.45em 0;
+  font-size: 0.88em;
+}
+
+.slidev-agent-message__body :deep(th),
+.slidev-agent-message__body :deep(td) {
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  padding: 0.3rem 0.45rem;
+  text-align: left;
+}
+
+.slidev-agent-message__body :deep(hr) {
+  margin: 0.6em 0;
+  border: 0;
+  border-top: 1px solid rgba(148, 163, 184, 0.25);
+}
+
+.slidev-agent-message__subagents {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.slidev-agent-tool {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  padding: 0 0.1rem;
+  font-size: 0.74rem;
+  line-height: 1.4;
+}
+
+.slidev-agent-tool__dot {
+  width: 0.38rem;
+  height: 0.38rem;
+  border-radius: 999px;
+  background: rgba(96, 165, 250, 0.85);
+  flex: 0 0 auto;
+}
+
+.slidev-agent-tool__headline {
+  font-weight: 600;
+  color: #dbeafe;
+}
+
+.slidev-agent-tool__args {
+  color: #cbd5e1;
+}
+
+.slidev-agent-tool__summary {
+  color: #93c5fd;
+}
+
+.slidev-agent-tool__summary::before {
+  content: "•";
+  margin-right: 0.3rem;
+  color: rgba(148, 163, 184, 0.6);
+}
+</style>