@rudderhq/agent-runtime-claude-local 0.7.2 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rudderhq/agent-runtime-claude-local",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://github.com/Undertone0809/rudder",
   "bugs": {
@@ -69,7 +69,7 @@
     "probe:quota:raw": "pnpm exec tsx src/cli/quota-probe.ts --json --raw-cli"
   },
   "dependencies": {
-    "@rudderhq/agent-runtime-utils": "0.7.2",
+    "@rudderhq/agent-runtime-utils": "0.7.3",
     "picocolors": "^1.1.1"
   },
   "devDependencies": {

package/skills/app-builder/SKILL.md

@@ -28,6 +28,9 @@ loopback attestation, and embedded opening.
      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.
+   When the originating prompt includes `Rudder App handoff`, retain its App ID
+   for the completion protocol below. Do not guess an App ID or use one from a
+   different conversation.
 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.
@@ -37,27 +40,51 @@ loopback attestation, and embedded opening.
    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.
+   for visible UI work. For a new App, also read
+   [references/rudder-ui-preset.md](references/rudder-ui-preset.md) and start
+   from the versioned Rudder UI preset already present in the maintained
+   scaffold. Keep its semantic tokens and source-owned shadcn primitives unless
+   the brief explicitly requires a different product identity. For an existing
+   project, preserve its design system by default; align it to Rudder only when
+   the user asks for that change. 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.
+   unit tests, build, and relevant app E2E tests. Review the final source and
+   rendered product for correctness, regressions, usability, data safety, and
+   evidence integrity; resolve every blocking finding before handoff.
 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.
+   - A new managed App created from Apps Home keeps its typed manifest. After
+     the completion gate passes, report `verified_source_ready` with the
+     originating App ID so Rudder Desktop can verify, start, and open that App
+     automatically. Do not load the same source 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
+   The Agent writes and verifies source; Desktop alone owns runtime admission
+   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.
+11. For an originating managed App handoff, use the injected run context without
+    printing or requesting credentials:
+    - Run `node scripts/report-build-status.mjs building <app-id>` when
+      implementation begins.
+    - Run `node scripts/report-build-status.mjs verified_source_ready <app-id>`
+      only after every Completion Gate item passes. This is the machine-visible
+      signal that authorizes Desktop to verify, start, and open the exact
+      assigned source root.
+    - Run `node scripts/report-build-status.mjs failed <app-id>` when work ends
+      in a terminal failure. Do not emit `verified_source_ready` for a question,
+      partial implementation, canceled run, missing evidence, or blocker.
+    Finish by telling the user the App is opening and that they can continue
+    improving it in this Chat. If the status command fails, report that failure
+    honestly instead of claiming the App opened.
 
 ## Real Data Decision
 
@@ -86,7 +113,8 @@ controls and least-data workflow choices; explain the boundary honestly.
   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.
+- Opening Chat, Apps Home, or a saved view must not passively start an app. A
+  run-scoped `verified_source_ready` handoff may start and open its managed App.
 - Cloud builds, hosted runtimes, public preview links, custom domains, managed
   cloud databases, and cross-device synchronization are outside this skill.
 
@@ -96,8 +124,10 @@ 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;
+- blocking code and product review findings are resolved;
 - the reviewed readiness path is ready on an attested loopback process;
 - Browser verification covers the primary workflow and a relevant edge case;
+- the versioned Rudder UI preset check passes for a new maintained App;
 - 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

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

@@ -1,32 +1,125 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:is(.dark *));
+
 :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;
+  color-scheme: light;
+  --background: oklch(0.975 0.008 80);
+  --foreground: oklch(0.22 0.012 75);
+  --card: oklch(0.992 0.004 80);
+  --card-foreground: oklch(0.22 0.012 75);
+  --popover: oklch(0.992 0.004 80);
+  --popover-foreground: oklch(0.22 0.012 75);
+  --primary: oklch(0.53 0.135 162);
+  --primary-foreground: oklch(0.985 0.01 160);
+  --secondary: oklch(0.94 0.009 78);
+  --secondary-foreground: oklch(0.29 0.012 75);
+  --muted: oklch(0.945 0.008 78);
+  --muted-foreground: oklch(0.52 0.014 75);
+  --accent: oklch(0.925 0.025 162);
+  --accent-foreground: oklch(0.32 0.08 162);
+  --destructive: oklch(0.56 0.2 27);
+  --destructive-foreground: oklch(0.985 0.005 27);
+  --border: oklch(0.875 0.01 75);
+  --input: oklch(0.875 0.01 75);
+  --ring: oklch(0.58 0.12 162);
+  --radius: 0.375rem;
 }
 
-* {
-  border-color: var(--border);
+.dark {
+  color-scheme: dark;
+  --background: oklch(0.18 0.012 75);
+  --foreground: oklch(0.93 0.008 75);
+  --card: oklch(0.215 0.012 75);
+  --card-foreground: oklch(0.93 0.008 75);
+  --popover: oklch(0.215 0.012 75);
+  --popover-foreground: oklch(0.93 0.008 75);
+  --primary: oklch(0.68 0.135 162);
+  --primary-foreground: oklch(0.17 0.03 162);
+  --secondary: oklch(0.27 0.012 75);
+  --secondary-foreground: oklch(0.91 0.008 75);
+  --muted: oklch(0.255 0.011 75);
+  --muted-foreground: oklch(0.69 0.012 75);
+  --accent: oklch(0.29 0.05 162);
+  --accent-foreground: oklch(0.88 0.06 162);
+  --destructive: oklch(0.66 0.18 27);
+  --destructive-foreground: oklch(0.98 0.005 27);
+  --border: oklch(0.34 0.012 75);
+  --input: oklch(0.34 0.012 75);
+  --ring: oklch(0.68 0.11 162);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    color-scheme: dark;
+    --background: oklch(0.18 0.012 75);
+    --foreground: oklch(0.93 0.008 75);
+    --card: oklch(0.215 0.012 75);
+    --card-foreground: oklch(0.93 0.008 75);
+    --popover: oklch(0.215 0.012 75);
+    --popover-foreground: oklch(0.93 0.008 75);
+    --primary: oklch(0.68 0.135 162);
+    --primary-foreground: oklch(0.17 0.03 162);
+    --secondary: oklch(0.27 0.012 75);
+    --secondary-foreground: oklch(0.91 0.008 75);
+    --muted: oklch(0.255 0.011 75);
+    --muted-foreground: oklch(0.69 0.012 75);
+    --accent: oklch(0.29 0.05 162);
+    --accent-foreground: oklch(0.88 0.06 162);
+    --destructive: oklch(0.66 0.18 27);
+    --destructive-foreground: oklch(0.98 0.005 27);
+    --border: oklch(0.34 0.012 75);
+    --input: oklch(0.34 0.012 75);
+    --ring: oklch(0.68 0.11 162);
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
 }
 
 body {
   margin: 0;
+  min-width: 320px;
   background: var(--background);
   color: var(--foreground);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  text-rendering: optimizeLegibility;
 }
 
 button,
-input {
-  font: inherit;
+input,
+select,
+textarea {
+  color: inherit;
+}
+
+* {
+  border-color: var(--border);
+}
+
+::selection {
+  background: var(--accent);
+  color: var(--accent-foreground);
 }

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

@@ -1,10 +1,15 @@
 "use client";
 
+import { Alert } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Download, Plus, Search, Trash2, Upload } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Download, Plus, Search, Trash2, Upload, UsersRound } from "lucide-react";
 import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 type Contact = {
@@ -25,6 +30,13 @@ type Draft = {
 
 const emptyDraft: Draft = { name: "", email: "", company: "" };
 
+const statusVariant: Record<Contact["status"], "secondary" | "outline" | "success"> = {
+  new: "secondary",
+  contacted: "outline",
+  replied: "success",
+  paused: "outline",
+};
+
 export function ContactsWorkspace() {
   const [contacts, setContacts] = useState<Contact[]>([]);
   const [draft, setDraft] = useState<Draft>(emptyDraft);
@@ -118,175 +130,187 @@ export function ContactsWorkspace() {
   }
 
   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 className="min-h-screen bg-background text-foreground">
+      <header className="border-b bg-card/80">
+        <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 lg:px-6">
+          <div className="flex min-w-0 items-center gap-3">
+            <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <UsersRound aria-hidden className="size-4" />
+            </span>
+            <div className="min-w-0">
+              <p className="m-0 truncate text-sm font-semibold">Pipeline Desk</p>
+              <p className="m-0 text-xs text-muted-foreground">Local customer workspace</p>
+            </div>
           </div>
-        </header>
+          <Badge variant="outline">Development data</Badge>
+        </div>
+      </header>
 
-        <Card>
-          <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <main className="mx-auto grid max-w-7xl gap-4 px-4 py-5 lg:grid-cols-[minmax(0,1fr)_20rem] lg:px-6">
+        <section className="min-w-0">
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-end 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"}
+              <h1 className="m-0 text-2xl font-semibold">Contacts</h1>
+              <p className="mb-0 mt-1 text-sm text-muted-foreground">
+                Keep the next conversation visible and every record on this device.
               </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 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 data-icon="inline-start" />
+                Import
+              </Button>
+              <Button asChild variant="outline">
+                <a href="/api/data/export" download>
+                  <Download aria-hidden data-icon="inline-start" />
+                  Export
+                </a>
+              </Button>
             </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>
+
+          <Card>
+            <CardHeader className="sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <CardTitle>All contacts</CardTitle>
+                <CardDescription>{contacts.length} {contacts.length === 1 ? "record" : "records"}</CardDescription>
+              </div>
+              <div className="relative w-full sm:w-64">
+                <Search aria-hidden className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  aria-label="Search contacts"
+                  className="pl-9"
+                  placeholder="Search contacts"
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                />
               </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>
+            </CardHeader>
+            <div aria-live="polite">
+              {loading ? (
+                <div className="flex flex-col gap-3 p-4" aria-label="Loading contacts">
+                  {[0, 1, 2].map((item) => <Skeleton className="h-11 w-full" key={item} />)}
+                </div>
+              ) : visibleContacts.length === 0 ? (
+                <Empty>
+                  <EmptyHeader>
+                    <EmptyTitle>{contacts.length === 0 ? "No contacts yet" : "No matching contacts"}</EmptyTitle>
+                    <EmptyDescription>
+                      {contacts.length === 0
+                        ? "Add the first contact with the form beside this list."
+                        : "Try a different name, email, company, or status."}
+                    </EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              ) : (
+                <Table className="table-fixed sm:min-w-[40rem] sm:table-auto">
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead scope="col">Contact</TableHead>
+                      <TableHead className="hidden sm:table-cell" scope="col">Company</TableHead>
+                      <TableHead className="w-20 sm:w-auto" scope="col">Status</TableHead>
+                      <TableHead aria-label="Actions" className="w-12 text-right sm:w-auto" scope="col">
+                        <span className="hidden sm:inline">Actions</span>
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
                     {visibleContacts.map((contact) => (
-                      <tr className="border-t" key={contact.id}>
-                        <td className="px-5 py-4">
+                      <TableRow key={contact.id}>
+                        <TableCell>
                           <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 className="block break-all text-muted-foreground sm:inline">{contact.email}</span>
+                          <span className="mt-1 block text-xs text-muted-foreground sm:hidden">
+                            {contact.company || "Company not set"}
                           </span>
-                        </td>
-                        <td className="px-5 py-4 text-right">
+                        </TableCell>
+                        <TableCell className="hidden sm:table-cell">{contact.company || "Not set"}</TableCell>
+                        <TableCell>
+                          <Badge variant={statusVariant[contact.status]}>{contact.status}</Badge>
+                        </TableCell>
+                        <TableCell className="text-right">
                           <Button
                             aria-label={`Delete ${contact.name}`}
-                            size="sm"
+                            size="icon-sm"
                             type="button"
                             variant="ghost"
                             onClick={() => void deleteContact(contact)}
                           >
-                            <Trash2 aria-hidden size={16} />
+                            <Trash2 aria-hidden />
                           </Button>
-                        </td>
-                      </tr>
+                        </TableCell>
+                      </TableRow>
                     ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </div>
-        </Card>
-      </section>
+                  </TableBody>
+                </Table>
+              )}
+            </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>
+        <aside>
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Plus aria-hidden className="size-4" />
+                Add contact
+              </CardTitle>
+              <CardDescription>Create a development record.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={(event) => void createContact(event)}>
+                <FieldGroup>
+                  <Field>
+                    <FieldLabel htmlFor="contact-name">Name</FieldLabel>
+                    <Input
+                      id="contact-name"
+                      required
+                      autoComplete="name"
+                      value={draft.name}
+                      onChange={(event) => setDraft({ ...draft, name: event.target.value })}
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="contact-email">Email</FieldLabel>
+                    <Input
+                      id="contact-email"
+                      required
+                      autoComplete="email"
+                      type="email"
+                      value={draft.email}
+                      onChange={(event) => setDraft({ ...draft, email: event.target.value })}
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="contact-company">Company</FieldLabel>
+                    <Input
+                      id="contact-company"
+                      autoComplete="organization"
+                      value={draft.company}
+                      onChange={(event) => setDraft({ ...draft, company: event.target.value })}
+                    />
+                  </Field>
+                  {error ? <Alert>{error}</Alert> : null}
+                  <Button disabled={saving} type="submit">
+                    {saving ? "Adding..." : "Add contact"}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </CardContent>
+          </Card>
+        </aside>
+      </main>
     </div>
   );
 }

package/skills/app-builder/assets/scaffold/components/ui/alert.tsx

@@ -0,0 +1,12 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export function Alert({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="alert"
+      className={cn("rounded-md border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm text-destructive", className)}
+      {...props}
+    />
+  );
+}