@rudderhq/agent-runtime-opencode-local 0.6.6-canary.8 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rudderhq/agent-runtime-opencode-local",
-  "version": "0.6.6-canary.8",
+  "version": "0.7.0",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://github.com/Undertone0809/rudder",
   "bugs": {
@@ -67,7 +67,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@rudderhq/agent-runtime-utils": "0.6.6-canary.8",
+    "@rudderhq/agent-runtime-utils": "0.7.0",
     "picocolors": "^1.1.1"
   },
   "devDependencies": {

package/skills/app-builder/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: app-builder
+description: "Create and iteratively improve local web products from natural-language requests, then prepare them to run as Rudder Apps. Use Rudder's maintained scaffold for new websites and preserve the existing stack for Next.js, React, Vue, Astro, SvelteKit, Nuxt, and other local web projects."
+---
+
+# App Builder
+
+Create or improve a useful local web product without making a non-technical
+user choose a framework, database, package manager, or process topology.
+
+A Rudder App is an ordinary local website presented as an App inside Rudder.
+This Skill owns requirements, source changes, and product verification. Rudder
+Desktop owns folder selection, launch-definition review, process lifecycle,
+loopback attestation, and embedded opening.
+
+## Build Workflow
+
+1. Capture a compact brief in the conversation: user/job, primary workflow,
+   essential screens, durable data, external integrations, constraints, and
+   exclusions. Ask at most three grouped questions, and only when an answer
+   materially changes behavior, real-data safety, or external authority.
+2. Choose the source path:
+   - For a new App, use the maintained scaffold in `assets/scaffold/`. Prefer
+     the Apps workspace flow when it is available. Otherwise run
+     `scripts/scaffold.mjs` with an explicit workspace root and target. Never
+     recreate the foundation from memory or overwrite a non-empty directory.
+   - For an existing web project, inspect its current framework, package
+     manager, development script, data boundary, and tests before editing.
+     Preserve its stack and conventions; never replace it with the maintained
+     scaffold merely to make it a Rudder App.
+3. Read [references/scaffold-contract.md](references/scaffold-contract.md)
+   before changing the runtime, database foundation, manifest, health endpoint,
+   import/export contract, or background-job runner.
+4. Implement the user's domain model and workflows. Keep the generated project
+   conventional and independently runnable.
+5. Follow [references/data-safety.md](references/data-safety.md) whenever an app
+   already has data, imports user data, changes its schema, or needs a real-data
+   diagnosis.
+6. Follow [references/design-guidelines.md](references/design-guidelines.md)
+   for visible UI work. Prefer coherent workflow screens over a generic
+   dashboard assembled from decorative cards.
+7. Run migrations against development or snapshot data, then run typecheck,
+   unit tests, build, and relevant app E2E tests.
+8. Prepare the website for its Rudder Apps handoff:
+   - A new managed App created from Apps Home keeps its typed manifest and
+     returns to that App's **Register & preview** action. Do not load the same
+     source again through the manual Local App path.
+   - An independently authored existing project keeps a direct supported
+     development script. Add the `package.json` `rudder` readiness or open-path
+     fields only when discovery cannot infer them safely, then direct the
+     operator to **Apps + > Add local web project** to select the folder and
+     review the launch definition.
+   The Agent writes and verifies source; Desktop alone owns runtime approval and
+   process start. Do not invent a public URL, tunnel, cloud deployment, or
+   unreviewed launch command.
+9. Read [references/verification.md](references/verification.md), then verify
+   the rendered app with Rudder Browser. Exercise the main workflow plus at
+   least one production-shaped edge case and inspect console errors.
+10. Materialize final screenshots and validation evidence in the originating
+    Chat or Run. A localhost URL or tool-only screenshot is not durable output.
+
+## Real Data Decision
+
+- New app with no user data: use the scaffold's development database and
+  synthetic fixtures.
+- UI or ordinary logic change on an app with user data: verify against a
+  temporary database snapshot by default.
+- Diagnosis that genuinely depends on user records: ask whether to use the
+  original database, a snapshot, or a redacted copy. State that relevant data
+  may be sent to the configured model provider.
+- Schema change: snapshot first and rehearse the migration on the snapshot.
+  Applying it to user data is an application-specific action and requires
+  explicit user intent.
+- A direct operation on the formal database requires explicit user intent.
+
+Never claim the Agent is sandboxed from files it can access. Use product
+controls and least-data workflow choices; explain the boundary honestly.
+
+## Runtime Boundary
+
+- App source, data, builds, and execution stay on the user's device.
+- The app may use outbound APIs only when requested and configured.
+- Background tasks implemented by the App run only with that managed App
+  process. V1 does not provide a separate Rudder job scheduler or catch-up UI.
+- Never place secret values in source, `rudder.app.json`, tool arguments, Chat,
+  screenshots, test fixtures, or logs. V1 does not provide a Rudder Secret
+  binding UI, so ask the user how the App should obtain any required
+  integration credential.
+- Opening Chat, Apps, an App tab, or a saved view must not passively start an app.
+- Cloud builds, hosted runtimes, public preview links, custom domains, managed
+  cloud databases, and cross-device synchronization are outside this skill.
+
+## Completion Gate
+
+Do not call the app complete until:
+
+- source and any required manifest or `package.json` Rudder configuration are durable;
+- typecheck, unit tests, and build pass;
+- the reviewed readiness path is ready on an attested loopback process;
+- Browser verification covers the primary workflow and a relevant edge case;
+- persistence behavior is verified against development or snapshot data;
+- current screenshot evidence is attached to the work;
+- user data was not modified without explicit intent; and
+- stop/cleanup leaves no owned process behind.

package/skills/app-builder/agents/openai.yaml

@@ -0,0 +1,14 @@
+interface:
+  display_name: "App Builder"
+  short_description: "Create or improve local web Apps for Rudder"
+  default_prompt: "Use $app-builder to create or improve this local web product, prepare it as a Rudder App, and verify it in the Browser."
+
+dependencies:
+  tools:
+    - type: "mcp"
+      value: "rudder-browser"
+      description: "Run-scoped Rudder Browser verification"
+      transport: "stdio"
+
+policy:
+  allow_implicit_invocation: true

package/skills/app-builder/assets/scaffold/.env.example

@@ -0,0 +1,3 @@
+# Rudder injects these values for managed previews and formal app runs.
+RUDDER_APP_DATA_MODE=development
+RUDDER_APP_DATA_DIR=./data

package/skills/app-builder/assets/scaffold/app/api/%5F%5Frudder/health/route.ts

@@ -0,0 +1,20 @@
+import { getDatabase } from "@/lib/db/client";
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    getDatabase().sqlite.prepare("select 1").get();
+    return NextResponse.json({
+      ok: true,
+      schemaVersion: 1,
+      dataMode: process.env.RUDDER_APP_DATA_MODE === "production"
+        ? "production"
+        : "development",
+    });
+  } catch {
+    return NextResponse.json({ ok: false, error: "database_unavailable" }, { status: 503 });
+  }
+}

package/skills/app-builder/assets/scaffold/app/api/contacts/[id]/route.ts

@@ -0,0 +1,39 @@
+import { getDatabase } from "@/lib/db/client";
+import { contacts } from "@/lib/db/schema";
+import { contactUpdateSchema } from "@/lib/domain";
+import { eq } from "drizzle-orm";
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function PATCH(
+  request: Request,
+  context: { params: Promise<{ id: string }> },
+) {
+  const parsed = contactUpdateSchema.safeParse(await request.json().catch(() => null));
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "invalid_contact", issues: parsed.error.issues },
+      { status: 422 },
+    );
+  }
+  const { id } = await context.params;
+  const row = await getDatabase().db.update(contacts)
+    .set({ ...parsed.data, updatedAt: new Date() })
+    .where(eq(contacts.id, id))
+    .returning()
+    .get();
+  if (!row) return NextResponse.json({ error: "contact_not_found" }, { status: 404 });
+  return NextResponse.json({ contact: row });
+}
+
+export async function DELETE(
+  _request: Request,
+  context: { params: Promise<{ id: string }> },
+) {
+  const { id } = await context.params;
+  const row = await getDatabase().db.delete(contacts).where(eq(contacts.id, id)).returning().get();
+  if (!row) return NextResponse.json({ error: "contact_not_found" }, { status: 404 });
+  return new NextResponse(null, { status: 204 });
+}

package/skills/app-builder/assets/scaffold/app/api/contacts/route.ts

@@ -0,0 +1,31 @@
+import { getDatabase } from "@/lib/db/client";
+import { contacts } from "@/lib/db/schema";
+import { contactCreateSchema } from "@/lib/domain";
+import { desc } from "drizzle-orm";
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  const rows = await getDatabase().db.select().from(contacts).orderBy(desc(contacts.updatedAt)).all();
+  return NextResponse.json({ contacts: rows });
+}
+
+export async function POST(request: Request) {
+  const parsed = contactCreateSchema.safeParse(await request.json().catch(() => null));
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "invalid_contact", issues: parsed.error.issues },
+      { status: 422 },
+    );
+  }
+  const now = new Date();
+  const row = await getDatabase().db.insert(contacts).values({
+    ...parsed.data,
+    id: crypto.randomUUID(),
+    createdAt: now,
+    updatedAt: now,
+  }).returning().get();
+  return NextResponse.json({ contact: row }, { status: 201 });
+}

package/skills/app-builder/assets/scaffold/app/api/data/export/route.ts

@@ -0,0 +1,19 @@
+import { buildExportEnvelope } from "@/lib/data-transfer";
+import { getDatabase } from "@/lib/db/client";
+import { contacts } from "@/lib/db/schema";
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  const payload = buildExportEnvelope(
+    await getDatabase().db.select().from(contacts).all(),
+  );
+  return new NextResponse(JSON.stringify(payload, null, 2), {
+    headers: {
+      "Content-Disposition": `attachment; filename="rudder-app-export-${Date.now()}.json"`,
+      "Content-Type": "application/json; charset=utf-8",
+    },
+  });
+}

package/skills/app-builder/assets/scaffold/app/api/data/import/route.ts

@@ -0,0 +1,40 @@
+import { importEnvelopeSchema } from "@/lib/data-transfer";
+import { getDatabase } from "@/lib/db/client";
+import { contacts } from "@/lib/db/schema";
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function POST(request: Request) {
+  const parsed = importEnvelopeSchema.safeParse(await request.json().catch(() => null));
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "invalid_import", issues: parsed.error.issues },
+      { status: 422 },
+    );
+  }
+
+  const { db } = getDatabase();
+  const imported = await db.transaction(async (transaction) => {
+    for (const contact of parsed.data.data.contacts) {
+      await transaction.insert(contacts).values({
+        ...contact,
+        createdAt: new Date(contact.createdAt),
+        updatedAt: new Date(contact.updatedAt),
+      }).onConflictDoUpdate({
+        target: contacts.id,
+        set: {
+          name: contact.name,
+          email: contact.email,
+          company: contact.company,
+          status: contact.status,
+          updatedAt: new Date(contact.updatedAt),
+        },
+      }).run();
+    }
+    return parsed.data.data.contacts.length;
+  });
+
+  return NextResponse.json({ imported });
+}

package/skills/app-builder/assets/scaffold/app/globals.css

@@ -0,0 +1,32 @@
+@import "tailwindcss";
+
+:root {
+  --background: #f8fafc;
+  --foreground: #172033;
+  --card: #ffffff;
+  --card-foreground: #172033;
+  --muted: #eef2f7;
+  --muted-foreground: #64748b;
+  --primary: #2563eb;
+  --primary-foreground: #ffffff;
+  --destructive: #dc2626;
+  --border: #dbe3ee;
+  --ring: #3b82f6;
+  --radius: 0.75rem;
+}
+
+* {
+  border-color: var(--border);
+}
+
+body {
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+button,
+input {
+  font: inherit;
+}

package/skills/app-builder/assets/scaffold/app/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Rudder App",
+  description: "A full-stack app built with Rudder App Builder",
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/skills/app-builder/assets/scaffold/app/page.tsx

@@ -0,0 +1,9 @@
+import { ContactsWorkspace } from "@/components/contacts-workspace";
+
+export default function Home() {
+  return (
+    <main className="min-h-screen">
+      <ContactsWorkspace />
+    </main>
+  );
+}

package/skills/app-builder/assets/scaffold/components/contacts-workspace.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Download, Plus, Search, Trash2, Upload } from "lucide-react";
+import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+type Contact = {
+  id: string;
+  name: string;
+  email: string;
+  company: string;
+  status: "new" | "contacted" | "replied" | "paused";
+  createdAt: string;
+  updatedAt: string;
+};
+
+type Draft = {
+  name: string;
+  email: string;
+  company: string;
+};
+
+const emptyDraft: Draft = { name: "", email: "", company: "" };
+
+export function ContactsWorkspace() {
+  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [draft, setDraft] = useState<Draft>(emptyDraft);
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const importRef = useRef<HTMLInputElement>(null);
+
+  const loadContacts = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/contacts", { cache: "no-store" });
+      if (!response.ok) throw new Error("Could not load contacts.");
+      const body = await response.json() as { contacts: Contact[] };
+      setContacts(body.contacts);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : "Could not load contacts.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadContacts();
+  }, [loadContacts]);
+
+  const visibleContacts = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return contacts;
+    return contacts.filter((contact) => (
+      `${contact.name} ${contact.email} ${contact.company} ${contact.status}`
+        .toLowerCase()
+        .includes(normalized)
+    ));
+  }, [contacts, query]);
+
+  async function createContact(event: FormEvent) {
+    event.preventDefault();
+    setSaving(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/contacts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(draft),
+      });
+      if (!response.ok) {
+        const body = await response.json().catch(() => null) as { error?: string } | null;
+        throw new Error(body?.error === "invalid_contact"
+          ? "Enter a name and a valid email address."
+          : "Could not create the contact.");
+      }
+      setDraft(emptyDraft);
+      await loadContacts();
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : "Could not create the contact.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function deleteContact(contact: Contact) {
+    if (!window.confirm(`Delete ${contact.name}? This cannot be undone.`)) return;
+    setError(null);
+    const response = await fetch(`/api/contacts/${contact.id}`, { method: "DELETE" });
+    if (!response.ok) {
+      setError("Could not delete the contact.");
+      return;
+    }
+    setContacts((current) => current.filter((candidate) => candidate.id !== contact.id));
+  }
+
+  async function importData(file: File) {
+    setError(null);
+    try {
+      const payload = JSON.parse(await file.text());
+      const response = await fetch("/api/data/import", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      if (!response.ok) throw new Error("The import file is invalid or incompatible.");
+      await loadContacts();
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : "Could not import this file.");
+    } finally {
+      if (importRef.current) importRef.current.value = "";
+    }
+  }
+
+  return (
+    <div className="mx-auto grid max-w-7xl gap-6 px-4 py-6 lg:grid-cols-[minmax(0,1fr)_22rem] lg:px-8">
+      <section className="min-w-0">
+        <header className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <p className="mb-1 text-sm font-medium text-[var(--primary)]">Contacts</p>
+            <h1 className="m-0 text-2xl font-semibold tracking-tight">Customer workspace</h1>
+            <p className="mb-0 mt-2 text-sm text-[var(--muted-foreground)]">
+              Keep the next conversation visible and every record on this device.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <input
+              ref={importRef}
+              aria-label="Import app data"
+              className="sr-only"
+              type="file"
+              accept="application/json,.json"
+              onChange={(event) => {
+                const file = event.currentTarget.files?.[0];
+                if (file) void importData(file);
+              }}
+            />
+            <Button type="button" variant="outline" onClick={() => importRef.current?.click()}>
+              <Upload aria-hidden size={16} />
+              Import
+            </Button>
+            <Button asChild variant="outline">
+              <a href="/api/data/export" download>
+                <Download aria-hidden size={16} />
+                Export
+              </a>
+            </Button>
+          </div>
+        </header>
+
+        <Card>
+          <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 className="m-0 text-base font-semibold">All contacts</h2>
+              <p className="mb-0 mt-1 text-sm text-[var(--muted-foreground)]">
+                {contacts.length} {contacts.length === 1 ? "record" : "records"}
+              </p>
+            </div>
+            <div className="relative w-full sm:w-72">
+              <Search
+                aria-hidden
+                className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]"
+                size={16}
+              />
+              <Input
+                aria-label="Search contacts"
+                className="pl-9"
+                placeholder="Search name, email, company…"
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+              />
+            </div>
+          </CardHeader>
+          <div aria-live="polite">
+            {loading ? (
+              <p className="p-8 text-center text-sm text-[var(--muted-foreground)]">
+                Loading contacts…
+              </p>
+            ) : visibleContacts.length === 0 ? (
+              <div className="p-10 text-center">
+                <h3 className="m-0 text-base font-semibold">
+                  {contacts.length === 0 ? "No contacts yet" : "No matching contacts"}
+                </h3>
+                <p className="mb-0 mt-2 text-sm text-[var(--muted-foreground)]">
+                  {contacts.length === 0
+                    ? "Add the first contact with the form beside this list."
+                    : "Try a different name, email, company, or status."}
+                </p>
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full min-w-[42rem] border-collapse text-left text-sm">
+                  <thead className="bg-[var(--muted)] text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
+                    <tr>
+                      <th className="px-5 py-3 font-medium" scope="col">Contact</th>
+                      <th className="px-5 py-3 font-medium" scope="col">Company</th>
+                      <th className="px-5 py-3 font-medium" scope="col">Status</th>
+                      <th className="px-5 py-3 text-right font-medium" scope="col">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {visibleContacts.map((contact) => (
+                      <tr className="border-t" key={contact.id}>
+                        <td className="px-5 py-4">
+                          <strong className="block font-medium">{contact.name}</strong>
+                          <span className="text-[var(--muted-foreground)]">{contact.email}</span>
+                        </td>
+                        <td className="px-5 py-4">{contact.company || "—"}</td>
+                        <td className="px-5 py-4">
+                          <span className="rounded-full bg-[var(--muted)] px-2.5 py-1 text-xs font-medium capitalize">
+                            {contact.status}
+                          </span>
+                        </td>
+                        <td className="px-5 py-4 text-right">
+                          <Button
+                            aria-label={`Delete ${contact.name}`}
+                            size="sm"
+                            type="button"
+                            variant="ghost"
+                            onClick={() => void deleteContact(contact)}
+                          >
+                            <Trash2 aria-hidden size={16} />
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </Card>
+      </section>
+
+      <aside>
+        <Card>
+          <CardHeader>
+            <h2 className="m-0 flex items-center gap-2 text-base font-semibold">
+              <Plus aria-hidden size={18} />
+              Add contact
+            </h2>
+          </CardHeader>
+          <CardContent>
+            <form className="grid gap-4" onSubmit={(event) => void createContact(event)}>
+              <div className="grid gap-1.5">
+                <Label htmlFor="contact-name">Name</Label>
+                <Input
+                  id="contact-name"
+                  required
+                  autoComplete="name"
+                  value={draft.name}
+                  onChange={(event) => setDraft({ ...draft, name: event.target.value })}
+                />
+              </div>
+              <div className="grid gap-1.5">
+                <Label htmlFor="contact-email">Email</Label>
+                <Input
+                  id="contact-email"
+                  required
+                  autoComplete="email"
+                  type="email"
+                  value={draft.email}
+                  onChange={(event) => setDraft({ ...draft, email: event.target.value })}
+                />
+              </div>
+              <div className="grid gap-1.5">
+                <Label htmlFor="contact-company">Company</Label>
+                <Input
+                  id="contact-company"
+                  autoComplete="organization"
+                  value={draft.company}
+                  onChange={(event) => setDraft({ ...draft, company: event.target.value })}
+                />
+              </div>
+              {error ? (
+                <p className="m-0 text-sm text-[var(--destructive)]" role="alert">{error}</p>
+              ) : null}
+              <Button disabled={saving} type="submit">
+                {saving ? "Adding…" : "Add contact"}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </aside>
+    </div>
+  );
+}