@vellumai/assistant 0.8.5 → 0.8.7-dev.202606052118.34cd356

package/src/config/bundled-skills/app-builder/references/examples/habit-tracker.md

@@ -0,0 +1,490 @@
+# Example — Habit Tracker
+
+A 7-day habit grid: add habits, toggle a checkmark per day, delete habits. This is the
+canonical **CRUD over a custom route** example — full create / read / update / delete
+backed by a JSON file on disk, called from a multi-file TSX (`formatVersion: 2`) app via
+`window.vellum.fetch`.
+
+**What it demonstrates**
+
+- A `routes/habits.ts` handler exporting `GET` / `POST` / `PATCH` / `DELETE`.
+- Mutations addressed by `id` via a **query param** (`/v1/x/habits?id=…`) — route files
+  cannot use `[id].ts` path segments (see [CUSTOM_ROUTES.md](../CUSTOM_ROUTES.md)).
+- A frontend that always checks `res.ok`, surfaces errors, and re-reads after every write
+  so the UI reflects persisted state rather than optimistic guesses.
+
+## File tree
+
+```
+src/index.html
+src/main.tsx
+src/components/HabitTracker.tsx
+src/components/HabitRow.tsx
+src/styles.css
+routes/habits.ts
+```
+
+## Route handler
+
+```typescript
+// routes/habits.ts — Habit CRUD, persisted as a JSON file in the app workspace.
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+export const description = "Habit CRUD — stores habits as a JSON file";
+
+interface Habit {
+  id: string;
+  name: string;
+  completedDates: string[];
+  createdAt: string;
+}
+
+const DATA_DIR = join(process.env.VELLUM_WORKSPACE_DIR!, "data");
+const DATA_FILE = join(DATA_DIR, "habits.json");
+
+function loadHabits(): Habit[] {
+  mkdirSync(DATA_DIR, { recursive: true });
+  if (!existsSync(DATA_FILE)) return [];
+  return JSON.parse(readFileSync(DATA_FILE, "utf-8")) as Habit[];
+}
+
+function saveHabits(habits: Habit[]): void {
+  mkdirSync(DATA_DIR, { recursive: true });
+  writeFileSync(DATA_FILE, JSON.stringify(habits, null, 2));
+}
+
+export function GET(): Response {
+  return Response.json(loadHabits());
+}
+
+export async function POST(request: Request): Promise<Response> {
+  const body = (await request.json()) as { name?: unknown };
+  const name = typeof body.name === "string" ? body.name.trim() : "";
+  if (!name)
+    return Response.json({ error: "name is required" }, { status: 400 });
+
+  const habit: Habit = {
+    id: crypto.randomUUID(),
+    name,
+    completedDates: [],
+    createdAt: new Date().toISOString(),
+  };
+  const habits = loadHabits();
+  habits.push(habit);
+  saveHabits(habits);
+  return Response.json(habit, { status: 201 });
+}
+
+export async function PATCH(request: Request): Promise<Response> {
+  const id = new URL(request.url).searchParams.get("id");
+  if (!id) return Response.json({ error: "id is required" }, { status: 400 });
+
+  const body = (await request.json()) as { completedDates?: unknown };
+  if (!Array.isArray(body.completedDates)) {
+    return Response.json(
+      { error: "completedDates must be an array" },
+      { status: 400 },
+    );
+  }
+
+  const habits = loadHabits();
+  const habit = habits.find((h) => h.id === id);
+  if (!habit) return Response.json({ error: "not found" }, { status: 404 });
+
+  habit.completedDates = body.completedDates.filter(
+    (d): d is string => typeof d === "string",
+  );
+  saveHabits(habits);
+  return Response.json(habit);
+}
+
+export function DELETE(request: Request): Response {
+  const id = new URL(request.url).searchParams.get("id");
+  if (!id) return Response.json({ error: "id is required" }, { status: 400 });
+
+  const habits = loadHabits();
+  const next = habits.filter((h) => h.id !== id);
+  if (next.length === habits.length) {
+    return Response.json({ error: "not found" }, { status: 404 });
+  }
+  saveHabits(next);
+  return Response.json({ ok: true });
+}
+```
+
+## Frontend
+
+```html
+<!-- src/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Habit Tracker</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+```
+
+```tsx
+// src/main.tsx
+import { render } from "preact";
+import { HabitTracker } from "./components/HabitTracker.js";
+import "./styles.css";
+
+render(<HabitTracker />, document.getElementById("app")!);
+```
+
+```tsx
+// src/components/HabitTracker.tsx
+import { useCallback, useEffect, useState } from "preact/hooks";
+import { HabitRow } from "./HabitRow.js";
+
+interface Habit {
+  id: string;
+  name: string;
+  completedDates: string[];
+}
+
+function getDates(): string[] {
+  const dates: string[] = [];
+  for (let i = 6; i >= 0; i--) {
+    const d = new Date();
+    d.setDate(d.getDate() - i);
+    dates.push(d.toISOString().slice(0, 10));
+  }
+  return dates;
+}
+
+function getDayNames(dates: string[]): string[] {
+  const names = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  return dates.map((d) => names[new Date(d + "T12:00:00").getDay()]);
+}
+
+export function HabitTracker() {
+  const [habits, setHabits] = useState<Habit[]>([]);
+  const [input, setInput] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const dates = getDates();
+  const dayNames = getDayNames(dates);
+
+  const loadHabits = useCallback(async () => {
+    try {
+      const res = await window.vellum.fetch("/v1/x/habits");
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      setHabits(await res.json());
+      setError(null);
+    } catch (e) {
+      setError("Couldn't load habits. Try again.");
+      console.error(e);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadHabits();
+  }, [loadHabits]);
+
+  const addHabit = async () => {
+    const name = input.trim();
+    if (!name) return;
+    setInput("");
+    try {
+      const res = await window.vellum.fetch("/v1/x/habits", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      await loadHabits();
+    } catch (e) {
+      setError("Couldn't add habit. Try again.");
+      console.error(e);
+    }
+  };
+
+  const toggleDate = async (id: string, date: string) => {
+    const habit = habits.find((h) => h.id === id);
+    if (!habit) return;
+    const completed = habit.completedDates.includes(date)
+      ? habit.completedDates.filter((d) => d !== date)
+      : [...habit.completedDates, date];
+    try {
+      const res = await window.vellum.fetch(`/v1/x/habits?id=${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ completedDates: completed }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      await loadHabits();
+    } catch (e) {
+      setError("Couldn't update habit. Try again.");
+      console.error(e);
+    }
+  };
+
+  const deleteHabit = async (id: string) => {
+    try {
+      const res = await window.vellum.fetch(`/v1/x/habits?id=${id}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      await loadHabits();
+    } catch (e) {
+      setError("Couldn't delete habit. Try again.");
+      console.error(e);
+    }
+  };
+
+  return (
+    <div>
+      <div class="header">
+        <h1>Habit Tracker</h1>
+      </div>
+      {error && <div class="error-banner">{error}</div>}
+      <div class="add-form">
+        <input
+          type="text"
+          value={input}
+          onInput={(e) => setInput((e.target as HTMLInputElement).value)}
+          onKeyDown={(e) => e.key === "Enter" && addHabit()}
+          placeholder="Add a new habit..."
+        />
+        <button class="btn-primary" onClick={addHabit}>
+          Add
+        </button>
+      </div>
+      <div class="days-header">
+        <div />
+        {dayNames.map((name, i) => (
+          <div key={i} class="day-label">
+            {name}
+          </div>
+        ))}
+      </div>
+      <div>
+        {habits.length === 0 ? (
+          <div class="empty-state">No habits yet. Add one above!</div>
+        ) : (
+          habits.map((habit) => (
+            <HabitRow
+              key={habit.id}
+              habit={habit}
+              dates={dates}
+              onToggle={toggleDate}
+              onDelete={deleteHabit}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+```tsx
+// src/components/HabitRow.tsx
+interface Habit {
+  id: string;
+  name: string;
+  completedDates: string[];
+}
+
+interface HabitRowProps {
+  habit: Habit;
+  dates: string[];
+  onToggle: (id: string, date: string) => void;
+  onDelete: (id: string) => void;
+}
+
+export function HabitRow({ habit, dates, onToggle, onDelete }: HabitRowProps) {
+  return (
+    <div class="habit-row">
+      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <span class="habit-name">{habit.name}</span>
+        <button class="delete-btn" onClick={() => onDelete(habit.id)}>
+          x
+        </button>
+      </div>
+      {dates.map((date) => {
+        const checked = habit.completedDates.includes(date);
+        return (
+          <div key={date} class="check-cell">
+            <button
+              class={`check-btn${checked ? " checked" : ""}`}
+              onClick={() => onToggle(habit.id, date)}
+            >
+              {checked ? "\u2713" : ""}
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+```css
+/* src/styles.css */
+:root {
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --primary: #6366f1;
+  --primary-hover: #5558e6;
+  --success: #22c55e;
+  --text: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --border: #334155;
+  --radius: 10px;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  padding: 24px;
+  min-height: 100vh;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+h1 {
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+.error-banner {
+  background: rgba(239, 68, 68, 0.12);
+  color: #fca5a5;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  margin-bottom: 16px;
+  font-size: 0.85rem;
+}
+.add-form {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+.add-form input {
+  flex: 1;
+  padding: 10px 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.9rem;
+  outline: none;
+}
+.add-form input:focus {
+  border-color: var(--primary);
+}
+.add-form input::placeholder {
+  color: var(--text-secondary);
+}
+button {
+  font-family: inherit;
+  font-size: 0.85rem;
+  font-weight: 500;
+  padding: 10px 18px;
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.btn-primary {
+  background: var(--primary);
+  color: white;
+}
+.btn-primary:hover {
+  background: var(--primary-hover);
+}
+.days-header {
+  display: grid;
+  grid-template-columns: 1fr repeat(7, 40px);
+  gap: 4px;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+.day-label {
+  text-align: center;
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+}
+.habit-row {
+  display: grid;
+  grid-template-columns: 1fr repeat(7, 40px);
+  gap: 4px;
+  padding: 10px 4px;
+  border-radius: var(--radius);
+  margin-bottom: 4px;
+  align-items: center;
+}
+.habit-row:hover {
+  background: var(--surface);
+}
+.habit-name {
+  font-size: 0.9rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.check-cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.check-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 2px solid var(--border);
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  color: transparent;
+  font-size: 14px;
+}
+.check-btn.checked {
+  background: var(--success);
+  border-color: var(--success);
+  color: white;
+}
+.check-btn:hover {
+  border-color: var(--success);
+}
+.delete-btn {
+  background: transparent;
+  color: var(--text-secondary);
+  border: none;
+  padding: 4px 8px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.delete-btn:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+.empty-state {
+  text-align: center;
+  padding: 48px 0;
+  color: var(--text-secondary);
+}
+```

package/src/config/bundled-skills/app-builder/tools/app-list.ts

@@ -0,0 +1,62 @@
+import * as appStore from "../../../../memory/app-store.js";
+import type {
+  ToolContext,
+  ToolExecutionResult,
+} from "../../../../tools/types.js";
+
+interface AppListEntry {
+  app_id: string;
+  name: string;
+  description?: string;
+  updated_at: number;
+  created_at: number;
+}
+
+function toEntry(app: appStore.AppDefinition): AppListEntry {
+  return {
+    app_id: app.id,
+    name: app.name,
+    ...(app.description ? { description: app.description } : {}),
+    updated_at: app.updatedAt,
+    created_at: app.createdAt,
+  };
+}
+
+export async function run(
+  input: Record<string, unknown>,
+  _context: ToolContext,
+): Promise<ToolExecutionResult> {
+  const apps = appStore.listApps();
+  const entries = apps.map(toEntry);
+
+  const query =
+    typeof input.query === "string" ? input.query.trim().toLowerCase() : "";
+
+  if (!query) {
+    return {
+      content: JSON.stringify({ count: entries.length, apps: entries }),
+      isError: false,
+    };
+  }
+
+  // Resolve the app the user mentioned by name. Prefer an exact (case-insensitive)
+  // name match, then fall back to substring matches in either direction so
+  // "habit tracker" resolves "Habit Tracker" and "my budget" resolves "Budget".
+  const exact = entries.filter((e) => e.name.toLowerCase() === query);
+  const matches =
+    exact.length > 0
+      ? exact
+      : entries.filter((e) => {
+          const name = e.name.toLowerCase();
+          return name.includes(query) || query.includes(name);
+        });
+
+  return {
+    content: JSON.stringify({
+      query: input.query,
+      match_count: matches.length,
+      matches,
+    }),
+    isError: false,
+  };
+}

package/src/config/bundled-skills/document-editor/SKILL.md

@@ -1,48 +1,45 @@
 ---
 name: document-editor
-description: Rich text document editor with collaborative editing tools — create, read, update, and annotate documents
+description: Use whenever the user wants to write or draft an article, blog post, essay, report, or any long-form content. Creates the content in a rich text editor instead of dumping it in chat, so it can be streamed, reviewed, edited, and exported.
 compatibility: "Designed for Vellum personal assistants"
 metadata:
-  emoji: "📄"
+  emoji: "✍️"
   vellum:
-    display-name: "Document Editor"
+    display-name: "Document Writer"
     activation-hints:
-      - "User asks to write, draft, or collaborate on long-form content — use the document editor for a better editing experience"
-      - "When content will be iterated on, reviewed, or exported, prefer the document editor over inline markdown"
-      - "When a file attachment contains a draft or document the user wants to iterate on, open it in the editor"
+      - "User asks to write, draft, or compose an article, blog post, essay, report, story, or any long-form content — always create it in the document editor, not as a chat reply"
+      - "User wants written content they will iterate on, review, or export — use the editor instead of inline markdown"
+      - "A file attachment contains a draft or document the user wants to revise — open it in the editor"
+    avoid-when:
+      - "The user wants an interactive app, dashboard, calculator, game, or anything with state or data — use app-builder instead"
+      - "A one or two sentence answer is enough — just reply in chat"
 ---
 
-Create and edit long-form documents using the built-in rich text editor. Documents open in workspace mode with chat docked to the side.
+Write and edit long-form documents using the built-in rich text editor. Documents open in workspace mode with chat docked to the side. When a request is about writing prose (an article, blog post, report, essay, story, or similar), create it here rather than writing it into the chat response.
 
 ## Tools
 
-- **document_open** - Opens an existing document in the editor panel by `surface_id`. Use this when a document exists but isn't visible in the editor — for example after the user switches devices, refreshes the page, or when the editor panel was closed. Fetches the document from storage and sends it to the client.
-- **document_create** - Opens a new document editor with an optional title and initial Markdown content. Returns a `surface_id` for subsequent updates.
+- **document_create** - Opens a new document editor with an optional title and initial Markdown content. Returns a `surface_id` for subsequent updates. This is the entry point for any new piece of writing.
 - **document_update** - Updates content in an open document editor by `surface_id`. Supports `replace` (overwrite) and `append` (add to end) modes.
 - **document_read** - Reads the current content of a document by `surface_id` when it belongs to the current conversation, or when the current actor is the guardian/local user. Use to verify content before editing.
-- **document_list** - Lists documents. Without `query`, lists the current conversation's documents. With `query`, searches by title; guardian/local users can search across conversations, while other actors are scoped to the current conversation.
 - **document_find** - Searches a document for text or regex patterns. Returns matching lines with line numbers, match positions, and matched text.
 - **document_replace_text** - Targeted find-and-replace within a document. Supports literal and regex patterns (with backreferences). Optionally limit the number of replacements.
+- **document_list** - Lists documents. Without `query`, lists the current conversation's documents. With `query`, searches by title; guardian/local users can search across conversations, while other actors are scoped to the current conversation.
+- **document_open** - Opens an existing document in the editor panel by `surface_id`. Use this when a document exists but isn't visible in the editor — for example after the user switches devices, refreshes the page, or when the editor panel was closed. Fetches the document from storage and sends it to the client.
 - **document_delete** - Deletes a document by `surface_id`. Use to clean up unwanted documents.
 
-## Retrieving existing documents
-
-When the user asks to see, open, or pull up a document:
-
-1. Check the `<active_documents>` block in your context — it lists all documents in this conversation with their `surface_id` and title.
-2. If the document is NOT in `<active_documents>`, call `document_list` with a `query` matching the document title. For guardian/local users, this searches across previous conversations and sessions.
-3. Once you have the `surface_id`, call `document_open` to open the editor panel. This both surfaces the editor on the client and returns the document content. If the user only needs the text (not the editor), use `document_read` instead.
-
-**Never** search the filesystem, conversation history, or archives to find a document. Always use `document_list` with a `query`.
-
-**If the user says they can't see a document you know exists** (e.g. after switching from macOS to web, or after a page refresh), call `document_open` with the `surface_id` to re-surface the editor panel on their current client.
-
 ## Creating a new document
 
-1. **Create the document**: Call `document_create` with a title (inferred from the request). Call the tool immediately, not after conversational preamble.
+This is the default path when the user asks you to write something.
+
+1. **Create the document**: Call `document_create` with a title (inferred from the request). Call the tool immediately, not after conversational preamble. Capture the `surface_id` from the response — every subsequent `document_update` call must reference it.
 2. **Write content in Markdown**: Use proper structure (`#` for titles, `##` for sections), **bold**, _italic_, code blocks, tables, lists, blockquotes as appropriate.
 3. **CRITICAL - Stream content in chunks**: Call `document_update` MULTIPLE times, not just once. Break content into logical chunks (paragraphs, sections, or every 200-300 words). Call `document_update` with `mode: "append"` for EACH chunk separately. The user experiences real-time content appearing as you write.
 
+### Recovering from a failed update
+
+If a `document_update` call fails with an `Invalid input` error (for example because `surface_id` was missing), do NOT call `document_create` again. The `surface_id` you need is in the tool result of the most recent `document_create` call in this turn. Retry `document_update` with that `surface_id` and the same content. Creating a second document with the same title produces a duplicate for the user.
+
 ## Editing an existing document
 
 When the user requests changes to a document:
@@ -55,6 +52,18 @@ When the user requests changes to a document:
    - `document_find` + `document_replace_text` — **for everything else**. Fixing typos, renaming terms, swapping sections, reordering content, adjusting formatting, or any edit that touches only part of the document. This is the default choice for edits. It avoids rewriting the entire document and eliminates the risk of accidentally dropping content.
 4. **Do NOT use `document_update` with `mode: "replace"` for targeted edits.** Rewriting the entire document to change a few words or rearrange sections is wasteful and error-prone.
 
+## Retrieving existing documents
+
+When the user asks to see, open, or pull up a document:
+
+1. Check the `<active_documents>` block in your context — it lists all documents in this conversation with their `surface_id` and title.
+2. If the document is NOT in `<active_documents>`, call `document_list` with a `query` matching the document title. For guardian/local users, this searches across previous conversations and sessions.
+3. Once you have the `surface_id`, call `document_open` to open the editor panel. This surfaces the editor on the client and returns document metadata (`surface_id`, `title`, `word_count`) — not the full content. If you need the actual document text, follow up with `document_read`.
+
+**Never** search the filesystem, conversation history, or archives to find a document. Always use `document_list` with a `query`.
+
+**If the user says they can't see a document you know exists** (e.g. after switching from macOS to web, or after a page refresh), call `document_open` with the `surface_id` to re-surface the editor panel on their current client.
+
 ## Find & Replace
 
 Use `document_find` and `document_replace_text` for surgical edits that target specific text patterns without rewriting the entire document.
@@ -113,7 +122,7 @@ Users can leave inline comments on documents. Open comments are surfaced in a `<
 ## Anti-Patterns
 
 - **Don't use `app_create` for blog posts, articles, or written content.** Use `document_create` — apps are for interactive content with state/data.
-- **Don't output the full content in chat.** The content goes in the document editor, not in the chat response. Acknowledge what you're doing and stream to the editor.
+- **Don't write the article into the chat response.** Long-form prose goes in the document editor via `document_create`, not in chat and not into a `.md` file in the workspace. Acknowledge what you're doing and stream to the editor.
 - **Don't wait to generate everything before sending.** Stream content in chunks via `document_update` with `mode: "append"` so users see progress in real time.
 
 ## Usage Notes

package/src/config/bundled-skills/document-editor/TOOLS.json

@@ -42,7 +42,7 @@
     },
     {
       "name": "document_update",
-      "description": "Update content in an open document editor. Use this to stream generated content or apply edits.",
+      "description": "Append to or fully replace a document's content. Takes the full Markdown in `content` plus a `mode`: \"append\" adds it to the end (use this to stream generated content in chunks), \"replace\" overwrites the entire document. This tool does NOT do targeted edits — for changing specific words, phrases, or sections, use document_replace_text instead. There is no old/new or find/replace parameter here.",
       "category": "document-editor",
       "risk": "low",
       "input_schema": {

package/src/config/bundled-skills/media-processing/services/reduce.ts

@@ -195,15 +195,12 @@ async function sendToClaude(
   const { signal, cleanup } = createTimeout(REDUCE_TIMEOUT_MS);
 
   try {
-    const response = await provider.sendMessage(
-      [userMessage(userContent)],
-      [],
-      effectiveSystemPrompt,
-      {
-        config: model ? { model } : {},
-        signal,
-      },
-    );
+    const response = await provider.sendMessage([userMessage(userContent)], {
+      tools: [],
+      systemPrompt: effectiveSystemPrompt,
+      config: model ? { model } : {},
+      signal,
+    });
     cleanup();
 
     const answer = extractAllText(response);