veryfront 0.1.47 → 0.1.49

package/src/src/data/data-fetcher.ts

@@ -1,5 +1,3 @@
-// Direct import from base.ts to avoid circular dependency through barrel
-import type { RuntimeAdapter } from "../platform/adapters/base.js";
 import { withSpan } from "../observability/tracing/otlp-setup.js";
 import { SpanNames } from "../observability/tracing/span-names.js";
 import { CacheManager } from "./data-fetching-cache.js";
@@ -14,10 +12,11 @@ export class DataFetcher {
   private staticFetcher: StaticDataFetcher;
   private pathsFetcher: StaticPathsFetcher;
 
-  constructor(adapter?: RuntimeAdapter) {
+  // deno-lint-ignore no-unused-vars -- adapter kept for public API compatibility
+  constructor(adapter?: unknown) {
     this.cacheManager = new CacheManager();
-    this.serverFetcher = new ServerDataFetcher(adapter);
-    this.staticFetcher = new StaticDataFetcher(this.cacheManager, adapter);
+    this.serverFetcher = new ServerDataFetcher();
+    this.staticFetcher = new StaticDataFetcher(this.cacheManager);
     this.pathsFetcher = new StaticPathsFetcher();
   }
 
@@ -27,26 +26,21 @@ export class DataFetcher {
     mode: "development" | "production" = "development",
   ): Promise<DataResult> {
     const preferServerData = mode === "development" || !pageModule.getStaticData;
+    const useServer = preferServerData && !!pageModule.getServerData;
+    const useStatic = !useServer && !!pageModule.getStaticData;
 
-    let fetchType: "server" | "static" | "none" = "none";
-    if (preferServerData && pageModule.getServerData) {
-      fetchType = "server";
-    } else if (pageModule.getStaticData) {
-      fetchType = "static";
-    }
+    const fetchType: "server" | "static" | "none" = useServer
+      ? "server"
+      : useStatic
+      ? "static"
+      : "none";
 
     return withSpan(
       SpanNames.DATA_FETCH,
-      async () => {
-        if (preferServerData && pageModule.getServerData) {
-          return this.serverFetcher.fetch(pageModule, context);
-        }
-
-        if (pageModule.getStaticData) {
-          return this.staticFetcher.fetch(pageModule, context);
-        }
-
-        return { props: {} };
+      () => {
+        if (useServer) return this.serverFetcher.fetch(pageModule, context);
+        if (useStatic) return this.staticFetcher.fetch(pageModule, context);
+        return Promise.resolve({ props: {} });
       },
       {
         "data.fetch_type": fetchType,

package/src/src/data/server-data-fetcher.ts

@@ -1,5 +1,3 @@
-// Direct import from base.ts to avoid circular dependency through barrel
-import type { RuntimeAdapter } from "../platform/adapters/base.js";
 import type { DataContext, DataResult, PageWithData } from "./types.js";
 import { serverLogger } from "../utils/index.js";
 import { DATA_FETCH_TIMEOUT_MS } from "../config/defaults.js";
@@ -8,8 +6,6 @@ import { withSpan } from "../observability/tracing/otlp-setup.js";
 import { CircuitBreakerOpen, getCircuitBreaker } from "../utils/circuit-breaker.js";
 
 export class ServerDataFetcher {
-  constructor(private adapter?: RuntimeAdapter) {}
-
   fetch(pageModule: PageWithData, context: DataContext): Promise<DataResult> {
     if (typeof pageModule.getServerData !== "function") {
       return Promise.resolve({ props: {} });
@@ -30,12 +26,9 @@ export class ServerDataFetcher {
         const start = performance.now();
 
         try {
-          const getServerData = pageModule.getServerData;
-          if (!getServerData) throw new Error(`No getServerData function on ${pathname}`);
-
           const result = await circuitBreaker.execute(() =>
             withTimeoutThrow(
-              Promise.resolve(getServerData(context)),
+              Promise.resolve(pageModule.getServerData!(context)),
               DATA_FETCH_TIMEOUT_MS,
               `getServerData for ${pathname}`,
             )

package/src/src/data/static-data-fetcher.ts

@@ -1,5 +1,3 @@
-// Direct import from base.ts to avoid circular dependency through barrel
-import type { RuntimeAdapter } from "../platform/adapters/base.js";
 import type { CacheManager } from "./data-fetching-cache.js";
 import type { DataContext, DataResult, PageWithData } from "./types.js";
 import { serverLogger } from "../utils/index.js";
@@ -56,10 +54,7 @@ function getProjectId(context: DataContext, fallback: string): string {
 export class StaticDataFetcher {
   private pendingRevalidations = new Map<string, Promise<void>>();
 
-  constructor(
-    private cacheManager: CacheManager,
-    private adapter?: RuntimeAdapter,
-  ) {}
+  constructor(private cacheManager: CacheManager) {}
 
   async fetch(pageModule: PageWithData, context: DataContext): Promise<DataResult> {
     if (typeof pageModule.getStaticData !== "function") return { props: {} };

package/src/src/discovery/discovery-engine.ts

@@ -8,6 +8,7 @@
 import { detectPlatform } from "../platform/core-platform.js";
 import { agentLogger } from "../utils/logger/logger.js";
 import { ensureError } from "../errors/veryfront-error.js";
+import { registerSkill, skillRegistry } from "../skill/registry.js";
 import type {
   DiscoveryConfig,
   DiscoveryHandler,
@@ -18,12 +19,14 @@ import { importModule } from "./transpiler.js";
 import { findTypeScriptFiles } from "./file-discovery.js";
 import {
   agentHandler,
+  discoverSkills,
   promptHandler,
   resourceHandler,
   taskHandler,
   toolHandler,
   workflowHandler,
 } from "./handlers/index.js";
+import { join } from "../platform/compat/path/index.js";
 
 const logger = agentLogger.component("discovery");
 
@@ -87,6 +90,7 @@ export async function discoverAll(config: DiscoveryConfig): Promise<DiscoveryRes
   const result: DiscoveryResult = {
     tools: new Map(),
     agents: new Map(),
+    skills: new Map(),
     resources: new Map(),
     prompts: new Map(),
     workflows: new Map(),
@@ -124,5 +128,28 @@ export async function discoverAll(config: DiscoveryConfig): Promise<DiscoveryRes
     await discoverItems(`${baseDir}/${dir}`, result, context, taskHandler, config.verbose);
   }
 
+  // Clear stale skills before rediscovery so deleted/renamed skills are removed.
+  skillRegistry.clear();
+
+  // Discover skills (parallel path — markdown-based, not TypeScript import)
+  for (const dir of config.skillDirs ?? ["skills"]) {
+    const skillResult = await discoverSkills(
+      join(baseDir, dir),
+      context,
+      config.verbose,
+    );
+    for (const [id, skill] of skillResult.skills) {
+      if (result.skills.has(id)) {
+        logger.warn(`Duplicate skill "${id}" across discovery roots; keeping first registration`);
+        continue;
+      }
+      registerSkill(id, skill);
+      result.skills.set(id, skill);
+    }
+    result.errors.push(
+      ...skillResult.errors.map((e) => ({ file: e.file, error: e.error })),
+    );
+  }
+
   return result;
 }

package/src/src/discovery/discovery-utils.ts

@@ -36,13 +36,6 @@ export function trackAgentPath(id: string, filePath: string): void {
   discoveredAgentPaths.set(id, filePath);
 }
 
-/**
- * Get all tracked agent paths
- */
-export function getTrackedAgentPaths(): Map<string, string> {
-  return discoveredAgentPaths;
-}
-
 /**
  * Clear tracked agent paths
  */

package/src/src/discovery/file-discovery.ts

@@ -58,21 +58,15 @@ export async function findTypeScriptFiles(
 }
 
 /**
- * Get Node.js fs and path modules (cached on context)
+ * Get Node.js fs and path modules (cached on context).
+ *
+ * Only called when no fsAdapter is present — callers must guard accordingly.
  */
 export async function getNodeDeps(
   context: FileDiscoveryContext,
 ): Promise<{ fs: typeof import("node:fs"); path: typeof import("node:path") }> {
   if (context.nodeDeps) return context.nodeDeps;
 
-  if (context.fsAdapter) {
-    context.nodeDeps = {
-      fs: {} as typeof import("node:fs"),
-      path: {} as typeof import("node:path"),
-    };
-    return context.nodeDeps;
-  }
-
   const [fsModule, pathModule] = await Promise.all([import("node:fs"), import("node:path")]);
   context.nodeDeps = { fs: fsModule, path: pathModule };
   return context.nodeDeps;

package/src/src/discovery/handlers/index.ts

@@ -10,3 +10,4 @@ export { resourceHandler } from "./resource-handler.js";
 export { promptHandler } from "./prompt-handler.js";
 export { workflowHandler } from "./workflow-handler.js";
 export { taskHandler } from "./task-handler.js";
+export { discoverSkills } from "./skill-handler.js";

package/src/src/discovery/handlers/skill-handler.ts

@@ -0,0 +1,123 @@
+/**
+ * Skill Discovery Handler
+ *
+ * Discovers skills from SKILL.md files in project directories.
+ * This is a parallel discovery path — it does NOT implement DiscoveryHandler<T>
+ * (which expects TypeScript import()). Instead, it operates on markdown files.
+ */
+
+import { exists, readDir, readTextFile } from "../../platform/compat/fs.js";
+import { join } from "../../platform/compat/path/index.js";
+import { agentLogger } from "../../utils/logger/logger.js";
+import { ensureError } from "../../errors/veryfront-error.js";
+import { parseSkillFrontmatter, validateSkillMetadata } from "../../skill/parser.js";
+import { SKILL_MD_FILENAME } from "../../skill/types.js";
+import type { Skill } from "../../skill/index.js";
+import type { FileDiscoveryContext } from "../types.js";
+
+const logger = agentLogger.component("skill-discovery");
+
+export interface SkillDiscoveryError {
+  file: string;
+  error: Error;
+}
+
+export interface SkillDiscoveryResult {
+  skills: Map<string, Skill>;
+  errors: SkillDiscoveryError[];
+}
+
+/**
+ * Discover skills from a directory.
+ *
+ * Scans for subdirectories containing SKILL.md files and parses them
+ * into Skill objects. Uses fsAdapter when available (for VFS/cloud),
+ * falling back to compat layer functions.
+ */
+export async function discoverSkills(
+  dir: string,
+  context: FileDiscoveryContext,
+  verbose?: boolean,
+): Promise<SkillDiscoveryResult> {
+  const skills = new Map<string, Skill>();
+  const errors: SkillDiscoveryError[] = [];
+  const { fsAdapter } = context;
+
+  // Check if directory exists
+  const dirExists = fsAdapter ? await fsAdapter.exists(dir) : await exists(dir);
+
+  if (!dirExists) {
+    if (verbose) {
+      logger.info(`Skills directory does not exist: ${dir}`);
+    }
+    return { skills, errors };
+  }
+
+  // Iterate subdirectories
+  const entries = fsAdapter ? fsAdapter.readDir(dir) : readDir(dir);
+
+  for await (const entry of entries) {
+    if (!entry.isDirectory) continue;
+
+    const skillDir = join(dir, entry.name);
+    const skillMdPath = join(skillDir, SKILL_MD_FILENAME);
+
+    try {
+      // Check if SKILL.md exists
+      const mdExists = fsAdapter ? await fsAdapter.exists(skillMdPath) : await exists(skillMdPath);
+
+      if (!mdExists) {
+        if (verbose) {
+          logger.info(`Skipping ${entry.name}: no ${SKILL_MD_FILENAME}`);
+        }
+        continue;
+      }
+
+      // Read SKILL.md content
+      const content = fsAdapter
+        ? await fsAdapter.readFile(skillMdPath)
+        : await readTextFile(skillMdPath);
+
+      // Parse frontmatter
+      const parsed = await parseSkillFrontmatter(content);
+
+      // Validate metadata (directory name as fallback for skill name)
+      const metadata = validateSkillMetadata(parsed.frontmatter, entry.name);
+
+      // Warn if metadata name differs from directory name, use directory name as ID
+      const skillId = entry.name;
+      if (metadata.name !== entry.name) {
+        logger.warn(
+          `Skill "${metadata.name}" in directory "${entry.name}" — using directory name as ID`,
+        );
+      }
+
+      // Check for duplicate IDs (first wins)
+      if (skills.has(skillId)) {
+        logger.warn(`Duplicate skill "${skillId}" — keeping first registration`);
+        continue;
+      }
+
+      const skill: Skill = {
+        id: skillId,
+        metadata,
+        rootPath: skillDir,
+        ...(fsAdapter && { fsAdapter }),
+      };
+
+      skills.set(skillId, skill);
+
+      if (verbose) {
+        logger.info(`Discovered skill: ${skillId}`);
+      }
+    } catch (error) {
+      errors.push({ file: skillMdPath, error: ensureError(error) });
+
+      if (verbose) {
+        logger.error(`Error loading skill from ${entry.name}:`, error);
+      }
+    }
+  }
+
+  return { skills, errors };
+}

package/src/src/discovery/handlers/task-handler.ts

@@ -10,12 +10,8 @@ export const taskHandler: DiscoveryHandler<TaskDefinition> = {
   typeName: "task",
   validate: (item): item is TaskDefinition => isTaskDefinition(item),
   getId: (_task, file, dir) => {
-    // Derive ID from file path relative to tasks dir
-    let relative = file;
     const prefix = dir.endsWith("/") ? dir : `${dir}/`;
-    if (relative.startsWith(prefix)) {
-      relative = relative.slice(prefix.length);
-    }
+    const relative = file.startsWith(prefix) ? file.slice(prefix.length) : file;
     return relative.replace(/\.(ts|tsx|js|jsx)$/, "");
   },
   register: (_id, task) => task,

package/src/src/discovery/transpiler.ts

@@ -16,6 +16,10 @@ import type { FileSystemAdapter } from "../platform/adapters/base.js";
 import type { FileDiscoveryContext } from "./types.js";
 import { rewriteDiscoveryImports, rewriteForDeno } from "./import-rewriter.js";
 import { wrapWithCurrentContext } from "../platform/adapters/fs/veryfront/multi-project-adapter.js";
+// Static import ensures deno compile includes embedding in the binary.
+// Other modules (agent, tool, etc.) are statically imported elsewhere;
+// embedding is only referenced here.
+import * as embeddingMod from "../embedding/index.js";
 
 const transpileCache = new Map<string, unknown>();
 
@@ -42,6 +46,7 @@ async function ensureVeryfrontGlobals(): Promise<void> {
     "veryfront/platform": platformMod,
     "veryfront/prompt": promptMod,
     "veryfront/resource": resourceMod,
+    "veryfront/embedding": embeddingMod,
   };
 
   veryfrontGlobalsInitialized = true;
@@ -202,9 +207,9 @@ export async function importModule(
     },
   });
 
-  if (result.errors?.length) {
+  if (result.errors.length > 0) {
     throw new Error(
-      `Failed to transpile ${filePath}: ${result.errors[0]?.text || "unknown error"}`,
+      `Failed to transpile ${filePath}: ${result.errors[0]?.text ?? "unknown error"}`,
     );
   }
 

package/src/src/discovery/types.ts

@@ -9,6 +9,7 @@ import type { Agent } from "../agent/index.js";
 import type { Resource } from "../resource/index.js";
 import type { Prompt } from "../prompt/index.js";
 import type { Workflow } from "../workflow/index.js";
+import type { Skill } from "../skill/index.js";
 import type { TaskDefinition } from "../task/types.js";
 import type { Platform } from "../platform/core-platform.js";
 import type { FileSystemAdapter } from "../platform/adapters/base.js";
@@ -33,6 +34,7 @@ export interface DiscoveryConfig {
   baseDir: string;
   toolDirs?: string[];
   agentDirs?: string[];
+  skillDirs?: string[];
   resourceDirs?: string[];
   promptDirs?: string[];
   workflowDirs?: string[];
@@ -47,6 +49,7 @@ export interface DiscoveryConfig {
 export interface DiscoveryResult {
   tools: Map<string, Tool>;
   agents: Map<string, Agent>;
+  skills: Map<string, Skill>;
   resources: Map<string, Resource>;
   prompts: Map<string, Prompt>;
   workflows: Map<string, Workflow>;

package/src/src/embedding/chunk.ts

@@ -0,0 +1,60 @@
+import type { ChunkOptions } from "./types.js";
+
+/**
+ * Splits text into overlapping chunks for embedding.
+ *
+ * Uses a recursive character splitting strategy: tries each separator in
+ * order (paragraphs → lines → words → characters) to produce semantically
+ * coherent chunks within the size limit.
+ *
+ * Default chunk size is 2000 characters (~512 tokens), aligned with
+ * common embedding model context limits (e.g. OpenAI's 8191-token max).
+ *
+ * @example
+ * ```ts
+ * const chunks = await chunk("long document...", { maxChars: 2000, overlap: 200 });
+ * ```
+ */
+export async function chunk(text: string, options?: ChunkOptions): Promise<string[]> {
+  const maxChars = options?.maxChars ?? 2000;
+  const overlap = options?.overlap ?? 200;
+  const separators = options?.separators ?? ["\n\n", "\n", " ", ""];
+
+  return splitRecursive(text, separators, maxChars, overlap);
+}
+
+function splitRecursive(
+  text: string,
+  separators: string[],
+  maxChars: number,
+  overlap: number,
+): string[] {
+  if (text.length <= maxChars) return [text];
+
+  const sep = separators.find((s) => text.includes(s)) ?? "";
+  const parts = sep ? text.split(sep) : [...text];
+
+  const chunks: string[] = [];
+  let current = "";
+
+  for (const part of parts) {
+    const candidate = current ? current + sep + part : part;
+    if (candidate.length > maxChars && current) {
+      chunks.push(current);
+      // Overlap: keep the tail of the current chunk
+      const tail = current.slice(-overlap);
+      current = tail ? tail + sep + part : part;
+    } else {
+      current = candidate;
+    }
+  }
+  if (current) chunks.push(current);
+
+  // If any chunk still exceeds maxChars, recurse with next separator
+  const remaining = separators.slice(separators.indexOf(sep) + 1);
+  if (remaining.length === 0) return chunks;
+
+  return chunks.flatMap((c) =>
+    c.length > maxChars ? splitRecursive(c, remaining, maxChars, overlap) : [c]
+  );
+}

package/src/src/embedding/embedding.ts

@@ -0,0 +1,62 @@
+import { embed, embedMany } from "ai";
+import type { Embedding, EmbeddingConfig } from "./types.js";
+import { resolveEmbeddingModel } from "./resolve.js";
+
+const DEFAULT_BATCH_SIZE = 100;
+
+/**
+ * Creates an embedding facade.
+ *
+ * Sync factory, async methods — same pattern as `tool()` and `agent()`.
+ *
+ * - `embed()` applies `queryPrefix` (optimized for search queries)
+ * - `embedMany()` applies `documentPrefix` (optimized for document indexing)
+ * - `embedMany()` automatically batches large inputs to stay within API limits
+ *
+ * @example
+ * ```ts
+ * const embedder = embedding({
+ *   model: "openai/text-embedding-3-small",
+ *   documentPrefix: "search_document: ",  // for Nomic, E5, BGE models
+ *   queryPrefix: "search_query: ",
+ * });
+ * const vector = await embedder.embed("some query");
+ * const vectors = await embedder.embedMany(["doc1", "doc2"]);
+ * ```
+ */
+export function embedding(config: EmbeddingConfig): Embedding {
+  const model = resolveEmbeddingModel(config.model);
+  const batchSize = config.batchSize ?? DEFAULT_BATCH_SIZE;
+  const docPrefix = config.documentPrefix ?? "";
+  const queryPrefix = config.queryPrefix ?? "";
+
+  return {
+    model: config.model,
+
+    async embed(text: string): Promise<number[]> {
+      const result = await embed({ model, value: queryPrefix + text });
+      return result.embedding;
+    },
+
+    async embedMany(texts: string[]): Promise<number[][]> {
+      if (texts.length === 0) return [];
+
+      const prefixed = docPrefix ? texts.map((t) => docPrefix + t) : texts;
+
+      // Single batch — no chunking needed
+      if (prefixed.length <= batchSize) {
+        const result = await embedMany({ model, values: prefixed });
+        return result.embeddings;
+      }
+
+      // Chunked batches for large inputs
+      const results: number[][] = [];
+      for (let i = 0; i < prefixed.length; i += batchSize) {
+        const batch = prefixed.slice(i, i + batchSize);
+        const result = await embedMany({ model, values: batch });
+        results.push(...result.embeddings);
+      }
+      return results;
+    },
+  };
+}

package/src/src/embedding/index.ts

@@ -0,0 +1,49 @@
+/**
+ * Embedding — RAG primitives for chunking, embedding, and similarity search.
+ *
+ * Provides a facade over AI SDK (embeddings, similarity) and LangChain
+ * (text splitting) behind veryfront's own API.
+ *
+ * @module embedding
+ *
+ * @example
+ * ```ts
+ * import { uploadStore, createUploadHandler } from "veryfront/embedding";
+ *
+ * const store = uploadStore({ model: "openai/text-embedding-3-small" });
+ * export const { POST, GET, DELETE } = createUploadHandler(store);
+ * ```
+ */
+import "../../_dnt.polyfills.js";
+
+
+export { embedding } from "./embedding.js";
+export { chunk } from "./chunk.js";
+export { cosineSimilarity as similarity } from "ai";
+export { vectorStore } from "./vector-store.js";
+export { uploadStore } from "./upload-store.js";
+export { createUploadHandler } from "./upload-handler.js";
+export { loadUpload } from "./upload-loader.js";
+export { useUploads } from "./react/use-uploads.js";
+export type { UseUploadsOptions, UseUploadsResult } from "./react/use-uploads.js";
+export {
+  clearEmbeddingProviders,
+  registerEmbeddingProvider,
+  resolveEmbeddingModel,
+} from "./resolve.js";
+export type {
+  ChunkOptions,
+  Embedding,
+  EmbeddingConfig,
+  SearchOptions,
+  SearchResult,
+  StoredChunk,
+  UploadMeta,
+  UploadSearchOptions,
+  UploadSearchResult,
+  UploadStore,
+  UploadStoreConfig,
+  UploadStoreData,
+  VectorStore,
+  VectorStoreConfig,
+} from "./types.js";

package/src/src/embedding/react/use-uploads.ts

@@ -0,0 +1,101 @@
+/**
+ * useUploads Hook
+ *
+ * Manages upload, deletion, and listing for RAG applications.
+ * Pairs with `createUploadHandler` on the server side.
+ */
+import * as dntShim from "../../../_dnt.shims.js";
+
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { UploadMeta } from "../types.js";
+
+export interface UseUploadsOptions {
+  /** API endpoint, e.g. "/api/uploads" */
+  api: string;
+}
+
+export interface UseUploadsResult {
+  /** All uploads from the server */
+  uploads: UploadMeta[];
+  /** True while an upload is in progress */
+  uploading: boolean;
+  /** User-facing error message, cleared on next action */
+  error: string | null;
+  /** Upload a file (multipart POST) */
+  upload: (file: dntShim.File) => Promise<void>;
+  /** Delete an upload by ID */
+  remove: (id: string) => Promise<void>;
+  /** Re-fetch the upload list */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * useUploads hook for managing RAG upload lifecycle.
+ */
+export function useUploads(options: UseUploadsOptions): UseUploadsResult {
+  const [uploads, setUploads] = useState<UploadMeta[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const refresh = useCallback(async (): Promise<void> => {
+    try {
+      const res = await dntShim.fetch(options.api);
+      if (!res.ok) return;
+      const data = await res.json();
+      setUploads(data.uploads ?? []);
+    } catch {
+      setError("Failed to load uploads");
+    }
+  }, [options.api]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const upload = useCallback(
+    async (file: dntShim.File): Promise<void> => {
+      setError(null);
+      setUploading(true);
+
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      try {
+        const formData = new dntShim.FormData();
+        formData.append("file", file);
+        const res = await dntShim.fetch(options.api, {
+          method: "POST",
+          body: formData,
+          signal: abortController.signal,
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error ?? "Upload failed");
+        await refresh();
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") return;
+        setError(err instanceof Error ? err.message : "Upload failed");
+      } finally {
+        setUploading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [options.api, refresh],
+  );
+
+  const remove = useCallback(
+    async (id: string): Promise<void> => {
+      setError(null);
+      try {
+        await dntShim.fetch(`${options.api}/${id}`, { method: "DELETE" });
+        await refresh();
+      } catch {
+        setError("Failed to delete upload");
+      }
+    },
+    [options.api, refresh],
+  );
+
+  return { uploads, uploading, error, upload, remove, refresh };
+}