From 678da370c73b445e267b8d8ba4d8fedaec190ae4 Mon Sep 17 00:00:00 2001
From: Chris Pardy <chris.pardy@gmail.com>
Date: Fri, 01 May 2026 11:56:09 +0000
Subject: [PATCH] feat(dashboard): scripts grouped by trigger family + lexicon targeting panel

Frontend for the trigger-keyed scripts subsystem (commit
a086830). The dashboard now exposes:

- `/dashboard/settings/scripts` — grouped list of all scripts by
  trigger family (Record events, XRPC handlers, Label arrivals).
  The script's `id` IS its trigger string; the table makes that
  visible in monospace and links to the detail page.
- `/dashboard/settings/scripts/new` — create form. The trigger id
  is composed via a `(kind, suffix)` picker (kind dropdown for the
  prefix family + free-text suffix for the NSID). The Lua body
  prefills with a `handle()` skeleton. The form accepts a
  `?id=<trigger>` URL param so the lexicon detail page can deep-link
  with a candidate id pre-filled.
- `/dashboard/settings/scripts/[id]` — detail/edit. The id is the
  PK so it's locked here; rename = delete + recreate. The header
  shows the cascade hint for record events ("`record.create:<id>`
  fires only on this action; cascades to `record.index:<id>` if
  absent.").

The lexicon detail page gets a new "Scripts targeting this lexicon"
panel that lists the trigger ids relevant to the lexicon's type:

- Record-type lexicons show the four `record.*` slots
  (`record.index` / `record.create` / `record.update` /
  `record.delete`) with Edit/Create links.
- XRPC lexicons show the matching `xrpc.{query,procedure}` slot.

Existing scripts link straight to the detail page; missing rows
link to the New Script page pre-filled with the trigger id. Operators
get a one-click path from a lexicon to the scripts that affect it.

The legacy `index_hook` editor on the lexicon page is left in place
for now — operators with existing data can still see and edit the
column, even though the runtime no longer reads it. A follow-up commit
can drop the editor once we're confident no one relies on it.

New: `web/src/types/scripts.ts` (Script, UpsertScriptBody,
PatchScriptBody, TriggerKind / TriggerFamily helpers, parseTriggerId,
DEFAULT_SCRIPT_BODY).

Sidebar gets a Scripts nav item under Integrations
(`scripts:read`-gated).

Signed-off-by: Chris Pardy <chris.pardy@gmail.com>

Signed-off-by: Trezy <tre@trezy.com>
---
 src/admin/backfill.rs | 14 ++++++++------
 web/src/components/app-sidebar.tsx | 7 +++++++
 web/src/lib/api.ts | 45 +++++++++++++++++++++++++++++++++++++++++++++
 web/src/types/scripts.ts | 135 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/app/dashboard/lexicons/[id]/lexicon-detail.tsx | 273 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------
 web/src/app/dashboard/settings/scripts/page.tsx | 181 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/app/dashboard/settings/scripts/script-form.tsx | 315 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/app/dashboard/settings/scripts/[id]/page.tsx | 11 +++++++++++
 web/src/app/dashboard/settings/scripts/[id]/script-detail.tsx | 188 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/app/dashboard/settings/scripts/new/page.tsx | 125 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 10 file(s) changed, 1196 insertion(s)(+), 98 deletion(s)(-)

diff --git a/src/admin/backfill.rs b/src/admin/backfill.rs
--- a/src/admin/backfill.rs
+++ b/src/admin/backfill.rs
@@ -1349,12 +1349,14 @@
 
             let rec_to_store = match crate::lua::run_record_event_script(
                 state,
-                collection,
-                "create",
-                &uri,
-                did,
-                &rkey,
-                Some(&entry.value),
+                crate::lua::RecordEventPayload {
+                    nsid: collection,
+                    action: "create",
+                    uri: &uri,
+                    did,
+                    rkey: &rkey,
+                    record: Some(&entry.value),
+                },
             )
             .await
             {
diff --git a/web/src/components/app-sidebar.tsx b/web/src/components/app-sidebar.tsx
--- a/web/src/components/app-sidebar.tsx
+++ b/web/src/components/app-sidebar.tsx
@@ -18,6 +18,7 @@
   IconApps,
   IconArrowUpCircle,
   IconArrowsShuffle,
+  IconCode,
   IconSkull,
   IconFlask,
 } from "@tabler/icons-react";
@@ -98,6 +99,12 @@
     url: "/dashboard/settings/labelers",
     icon: IconTag,
     requiredPermissions: ["labelers:read"],
+  },
+  {
+    title: "Scripts",
+    url: "/dashboard/settings/scripts",
+    icon: IconCode,
+    requiredPermissions: ["scripts:read"],
   },
 ];
 
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -7,6 +7,7 @@
 import type { AdminListRecordsResponse } from "@/types/records";
 import type { EventsListResponse } from "@/types/events";
 import type { ScriptVariableSummary } from "@/types/script-variables";
+import type { Script, UpsertScriptBody, PatchScriptBody } from "@/types/scripts";
 import type { LabelerSummary } from "@/types/labelers";
 import type {
   ApiClientSummary,
@@ -37,6 +38,21 @@
 export type { AdminRecord, AdminListRecordsResponse } from "@/types/records";
 export type { EventLogEntry, EventsListResponse } from "@/types/events";
 export type { ScriptVariableSummary } from "@/types/script-variables";
+export type {
+  Script,
+  ScriptLanguage,
+  TriggerKind,
+  TriggerFamily,
+  UpsertScriptBody,
+  PatchScriptBody,
+} from "@/types/scripts";
+export {
+  TRIGGER_KIND_LABELS,
+  TRIGGER_FAMILY_LABELS,
+  familyOf,
+  parseTriggerId,
+  DEFAULT_SCRIPT_BODY,
+} from "@/types/scripts";
 export type { LabelerSummary } from "@/types/labelers";
 export type { RecordLabel } from "@/types/records";
 export type {
@@ -782,4 +798,33 @@
     method: "POST",
     body: JSON.stringify(body),
   });
+}
+
+// Scripts (trigger-keyed)
+export function getScripts() {
+  return apiFetch<Script[]>("/admin/scripts")
+}
+
+export function getScript(id: string) {
+  return apiFetch<Script>(`/admin/scripts/${encodeURIComponent(id)}`)
+}
+
+export function upsertScript(body: UpsertScriptBody) {
+  return apiFetch<Script>("/admin/scripts", {
+    method: "POST",
+    body: JSON.stringify(body),
+  })
+}
+
+export function patchScript(id: string, body: PatchScriptBody) {
+  return apiFetch<Script>(`/admin/scripts/${encodeURIComponent(id)}`, {
+    method: "PATCH",
+    body: JSON.stringify(body),
+  })
+}
+
+export function deleteScript(id: string) {
+  return apiFetch(`/admin/scripts/${encodeURIComponent(id)}`, {
+    method: "DELETE",
+  })
 }
diff --git a/web/src/types/scripts.ts b/web/src/types/scripts.ts
new file mode 100644
--- /dev/null
+++ b/web/src/types/scripts.ts
@@ -0,0 +1,135 @@
+/**
+ * Scripting language a script is written for. The backend stamps this
+ * on every row so a future runtime (e.g. `"typescript"`) can land
+ * without a schema migration. Today only `"lua"` ships.
+ */
+export type ScriptLanguage = "lua"
+
+/**
+ * One row from the `scripts` table — what the admin API returns.
+ *
+ * The script's `id` IS its trigger string; the dispatcher resolves
+ * scripts directly by id at firing time. Examples:
+ *
+ *   record.index:com.example.thing       — wildcard for any record event
+ *   record.create:com.example.thing      — fires only on create
+ *   xrpc.query:com.example.list          — XRPC query handler
+ *   xrpc.procedure:com.example.create    — XRPC procedure handler
+ *   labeler.apply:app.bsky.feed.post     — label on at://<did>/app.bsky.feed.post/<rkey>
+ *   labeler.apply:_actor                 — label on a bare DID
+ *
+ * Cascade rule (record events ONLY): the dispatcher tries
+ * `record.<action>:<nsid>` first, falls back to `record.index:<nsid>`
+ * if no specific row exists. No cascade for XRPC or labeler triggers.
+ */
+export interface Script {
+  /** Trigger string; identifies the row. */
+  id: string
+  script_type: ScriptLanguage
+  body: string
+  description?: string | null
+  created_at: string
+  updated_at: string
+}
+
+/** Body for `POST /admin/scripts` (create or replace by `id`). */
+export interface UpsertScriptBody {
+  id: string
+  /** Defaults to `"lua"` server-side if omitted. */
+  script_type?: ScriptLanguage
+  body: string
+  description?: string | null
+}
+
+/**
+ * Body for `PATCH /admin/scripts/{id}`. All fields optional. Patching
+ * `script_type` requires `body` alongside (server can't validate a
+ * stale body against a new language).
+ */
+export interface PatchScriptBody {
+  script_type?: ScriptLanguage
+  body?: string
+  description?: string | null
+}
+
+// ---------------------------------------------------------------------------
+// Trigger grammar
+// ---------------------------------------------------------------------------
+
+/** Trigger families the dispatcher knows. */
+export type TriggerKind =
+  | "record.index"
+  | "record.create"
+  | "record.update"
+  | "record.delete"
+  | "xrpc.query"
+  | "xrpc.procedure"
+  | "labeler.apply"
+
+/** Display labels for each trigger kind. */
+export const TRIGGER_KIND_LABELS: Record<TriggerKind, string> = {
+  "record.index": "Record (any action)",
+  "record.create": "Record create",
+  "record.update": "Record update",
+  "record.delete": "Record delete",
+  "xrpc.query": "XRPC query",
+  "xrpc.procedure": "XRPC procedure",
+  "labeler.apply": "Label arrival",
+}
+
+/** Top-level grouping for the Scripts list page. */
+export type TriggerFamily = "record" | "xrpc" | "labeler"
+
+export const TRIGGER_FAMILY_LABELS: Record<TriggerFamily, string> = {
+  record: "Record events",
+  xrpc: "XRPC handlers",
+  labeler: "Label arrivals",
+}
+
+/** Map a trigger kind to its top-level family. */
+export function familyOf(kind: TriggerKind): TriggerFamily {
+  if (kind.startsWith("record.")) return "record"
+  if (kind.startsWith("xrpc.")) return "xrpc"
+  return "labeler"
+}
+
+/**
+ * Split a trigger id into its `(kind, suffix)` parts. Returns `null`
+ * if the id doesn't match the trigger grammar — useful for surfacing
+ * broken rows in the UI.
+ */
+export function parseTriggerId(
+  id: string,
+): { kind: TriggerKind; suffix: string } | null {
+  const sep = id.indexOf(":")
+  if (sep <= 0 || sep === id.length - 1) return null
+  const prefix = id.slice(0, sep)
+  const suffix = id.slice(sep + 1)
+  const kind = ([
+    "record.index",
+    "record.create",
+    "record.update",
+    "record.delete",
+    "xrpc.query",
+    "xrpc.procedure",
+    "labeler.apply",
+  ] as const).find((k) => k === prefix)
+  if (!kind) return null
+  return { kind, suffix }
+}
+
+/**
+ * A reasonable starter script body — defines the required `handle()`
+ * function. Used to prefill the new-script form.
+ */
+export const DEFAULT_SCRIPT_BODY = `-- Trigger script: receives an \`event\` table describing what fired
+-- the script and returns either a transformed event/record (table) or
+-- \`nil\` to skip the operation.
+--
+-- Available APIs: db.*, http.*, xrpc.*, atproto.*, Record.*, env.<KEY>
+
+function handle()
+    log("script fired")
+    return event
+end
+`
diff --git a/web/src/app/dashboard/lexicons/[id]/lexicon-detail.tsx b/web/src/app/dashboard/lexicons/[id]/lexicon-detail.tsx
--- a/web/src/app/dashboard/lexicons/[id]/lexicon-detail.tsx
+++ b/web/src/app/dashboard/lexicons/[id]/lexicon-detail.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { IconPlus } from "@tabler/icons-react";
+import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 
 import { useCurrentUser } from "@/hooks/use-current-user";
@@ -9,26 +11,22 @@
   deleteLexicon,
   deleteNetworkLexicon,
   getLexicon,
+  getScripts,
   uploadLexicon,
 } from "@/lib/api";
 import type { LexiconDetail } from "@/types/lexicons";
-import {
-  indexHookScript,
-  procedureScript,
-  queryScript,
-} from "@/lib/lua-templates";
-import { useLuaCompletions } from "@/hooks/use-lua-completions";
+import type { Script, TriggerKind } from "@/types/scripts";
 import { SiteHeader } from "@/components/site-header";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 
 export default function LexiconDetailPage() {
   const pathname = usePathname();
@@ -38,51 +36,39 @@
   const { hasPermission } = useCurrentUser();
   const router = useRouter();
   const [lexicon, setLexicon] = useState<LexiconDetail | null>(null);
+  // All scripts in the system — we filter to those targeting this
+  // lexicon's id below. Best-effort: render an empty panel if the
+  // scripts call fails so the rest of the page still works.
+  const [scripts, setScripts] = useState<Script[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
   const [saving, setSaving] = useState(false);
 
-  // Editable text state
+  // Editable text state. The lexicon page used to edit `script` and
+  // `index_hook` columns inline via lua editors; those columns are
+  // now managed via the Scripts subsystem (see "Scripts targeting
+  // this lexicon" panel below). We pass the existing values through
+  // unchanged on save so legacy data isn't accidentally NULLed.
   const [jsonText, setJsonText] = useState("");
-  const [luaText, setLuaText] = useState("");
   const [originalJson, setOriginalJson] = useState("");
-  const [originalLua, setOriginalLua] = useState("");
-  const [hookText, setHookText] = useState("");
-  const [originalHook, setOriginalHook] = useState("");
-  const [showHookEditor, setShowHookEditor] = useState(false);
   const [tokenCost, setTokenCost] = useState("");
   const [originalTokenCost, setOriginalTokenCost] = useState("");
-  const { luaCompletions, collections } = useLuaCompletions(jsonText);
 
   const load = useCallback(() => {
+    // Fire both requests in parallel; the scripts list is best-effort.
+    getScripts()
+      .then(setScripts)
+      .catch(() => setScripts([]));
     getLexicon(id)
       .then((lex) => {
         setLexicon(lex);
         const json = JSON.stringify(lex.lexicon_json, null, 2);
         setJsonText(json);
         setOriginalJson(json);
-
-        // If lexicon has no script but is a query/procedure, auto-generate one
-        if (
-          !lex.script &&
-          (lex.lexicon_type === "query" || lex.lexicon_type === "procedure")
-        ) {
-          const generated =
-            lex.lexicon_type === "procedure"
-              ? procedureScript(lex.target_collection ?? "")
-              : queryScript(lex.target_collection ?? "");
-          setLuaText(generated);
-          // Set originalLua to "" so isDirty becomes true, prompting user to save
-          setOriginalLua("");
-        } else {
-          setLuaText(lex.script ?? "");
-          setOriginalLua(lex.script ?? "");
-        }
-        setHookText(lex.index_hook ?? "");
-        setOriginalHook(lex.index_hook ?? "");
-        setShowHookEditor(!!lex.index_hook);
         setTokenCost(lex.token_cost != null ? String(lex.token_cost) : "");
-        setOriginalTokenCost(lex.token_cost != null ? String(lex.token_cost) : "");
+        setOriginalTokenCost(
+          lex.token_cost != null ? String(lex.token_cost) : "",
+        );
       })
       .catch((e) => setError(e instanceof Error ? e.message : String(e)));
   }, [id]);
@@ -92,10 +78,7 @@
   }, [load]);
 
   const isDirty =
-    jsonText !== originalJson ||
-    luaText !== originalLua ||
-    hookText !== originalHook ||
-    tokenCost !== originalTokenCost;
+    jsonText !== originalJson || tokenCost !== originalTokenCost;
 
   async function handleSave() {
     if (!lexicon) return;
@@ -106,8 +89,11 @@
       await uploadLexicon({
         lexicon_json: lexiconJson,
         backfill: lexicon.backfill,
-        script: luaText || undefined,
-        index_hook: hookText || undefined,
+        // Preserve any legacy script / index_hook values verbatim — we
+        // no longer edit them here, but leaving them out of the body
+        // would NULL the columns on upsert and lose data.
+        script: lexicon.script ?? undefined,
+        index_hook: lexicon.index_hook ?? undefined,
         token_cost: tokenCost ? Number(tokenCost) : null,
       });
       load();
@@ -157,12 +143,28 @@
   }
 
   const isNetwork = lexicon.source === "network";
-  const showLua =
-    lexicon.has_script ||
-    lexicon.lexicon_type === "query" ||
-    lexicon.lexicon_type === "procedure";
   const isRecord = lexicon.lexicon_type === "record";
-  const showHook = isRecord && (showHookEditor || !!lexicon.index_hook);
+
+  // Triggers that target this lexicon's id, given its type.
+  //
+  // Record-type lexicons get the four `record.*` slots (the cascade
+  // wildcard `record.index` listed first as the most common starting
+  // point, then the three action-specific slots), plus `labeler.apply`
+  // for "react to labels arriving on records of this type."
+  // XRPC lexicons get the matching `xrpc.{query,procedure}` slot only.
+  const targetingTriggers: { kind: TriggerKind; label: string }[] = isRecord
+    ? [
+        { kind: "record.index", label: "Default handler (any action)" },
+        { kind: "record.create", label: "On create" },
+        { kind: "record.update", label: "On update" },
+        { kind: "record.delete", label: "On delete" },
+        { kind: "labeler.apply", label: "On label applied" },
+      ]
+    : lexicon.lexicon_type === "query"
+      ? [{ kind: "xrpc.query", label: "Query handler" }]
+      : lexicon.lexicon_type === "procedure"
+        ? [{ kind: "xrpc.procedure", label: "Procedure handler" }]
+        : [];
 
   return (
     <div className="flex flex-col h-full max-h-screen md:max-h-[calc(100vh-((var(--spacing)*2)*2))] overflow-hidden">
@@ -244,20 +246,30 @@
               </div>
             )}
           </div>
+
+          {/* Trigger-keyed scripts that target this lexicon. Each row
+              either links to the existing script or to the New Script
+              page pre-filled with the trigger id. */}
+          {targetingTriggers.length > 0 && (
+            <ScriptsTargetingPanel
+              lexiconId={lexicon.id}
+              scripts={scripts}
+              entries={targetingTriggers}
+              canManage={hasPermission("scripts:manage")}
+            />
+          )}
         </div>
 
-        {/* Code Panels */}
+        {/* JSON editor only — scripts (record-event handlers, XRPC
+            handlers, label-arrival handlers) are managed via the
+            "Scripts targeting this lexicon" panel above. The legacy
+            `script` / `index_hook` columns on the lexicons table are
+            preserved as-is on save but no longer edited here. */}
         <CodePanels
           className="flex-1 min-h-0 px-4 md:px-6"
           jsonValue={jsonText}
           onJsonChange={isNetwork ? undefined : setJsonText}
           jsonReadOnly={isNetwork}
-          luaValue={showHook ? hookText : showLua ? luaText : undefined}
-          onLuaChange={
-            showHook ? setHookText : showLua ? setLuaText : undefined
-          }
-          luaCompletions={showLua ? luaCompletions : undefined}
-          collections={showLua ? collections : undefined}
         />
 
         {/* Actions */}
@@ -273,40 +285,6 @@
           )}
 
           <div className="flex gap-2">
-            {hasPermission("lexicons:create") && isRecord && !showHook && (
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="outline"
-                      onClick={() => {
-                        setHookText(indexHookScript());
-                        setShowHookEditor(true);
-                      }}
-                    >
-                      Add Index Hook
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent className="max-w-xs">
-                    {
-                      "An Index Hook is a Lua script that runs automatically whenever a record in this collection is created, updated, or deleted on the network."
-                    }
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            )}
-            {hasPermission("lexicons:create") && isRecord && showHook && (
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setHookText("");
-                  setShowHookEditor(false);
-                }}
-              >
-                Remove Index Hook
-              </Button>
-            )}
-
             {hasPermission("lexicons:create") && (
               <Button onClick={handleSave} disabled={!isDirty || saving}>
                 {saving ? "Saving..." : "Save"}
@@ -315,6 +293,117 @@
           </div>
         </footer>
       </div>
+    </div>
+  );
+}
+
+/**
+ * Lists scripts targeting this lexicon and offers a "+ New" dropdown
+ * for the slots that don't yet have a script.
+ *
+ * Existing scripts (those whose trigger id matches one of `entries`)
+ * appear as rows linking to the Scripts detail page. Missing slots
+ * are surfaced via a single "+ New script" dropdown so the operator
+ * picks the kind of handler they want without seeing four "Create"
+ * buttons stacked. The dropdown hides when every slot is taken.
+ */
+function ScriptsTargetingPanel({
+  lexiconId,
+  scripts,
+  entries,
+  canManage,
+}: {
+  lexiconId: string;
+  scripts: Script[];
+  entries: { kind: TriggerKind; label: string }[];
+  canManage: boolean;
+}) {
+  const byId = new Map(scripts.map((s) => [s.id, s]));
+  const existing = entries
+    .map((e) => ({ ...e, triggerId: `${e.kind}:${lexiconId}` }))
+    .filter((e) => byId.has(e.triggerId));
+  const available = entries
+    .map((e) => ({ ...e, triggerId: `${e.kind}:${lexiconId}` }))
+    .filter((e) => !byId.has(e.triggerId));
+
+  return (
+    <div className="mt-6 rounded-md border p-4">
+      <div className="mb-3 flex items-center justify-between gap-2">
+        <div>
+          <h3 className="text-sm font-semibold">
+            Scripts targeting this lexicon
+          </h3>
+          <p className="text-muted-foreground text-xs">
+            Each row is a{" "}
+            <Link
+              href="/dashboard/settings/scripts"
+              className="underline hover:no-underline"
+            >
+              trigger
+            </Link>{" "}
+            the dispatcher resolves at firing time.
+          </p>
+        </div>
+        {canManage && available.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <IconPlus className="size-4" />
+                New script
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {available.map(({ kind, label, triggerId }) => (
+                <DropdownMenuItem key={kind} asChild>
+                  <Link
+                    href={`/dashboard/settings/scripts/new?id=${encodeURIComponent(triggerId)}`}
+                    className="flex flex-col items-start gap-0.5"
+                  >
+                    <span className="text-sm">{label}</span>
+                    <span className="text-muted-foreground font-mono text-[11px]">
+                      {triggerId}
+                    </span>
+                  </Link>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+      {existing.length === 0 ? (
+        <p className="text-muted-foreground text-sm py-2">
+          No scripts yet.
+          {canManage && available.length > 0 && (
+            <> Use the &ldquo;New script&rdquo; menu to add one.</>
+          )}
+        </p>
+      ) : (
+        <ul className="flex flex-col divide-y">
+          {existing.map(({ kind, label, triggerId }) => (
+            <li
+              key={kind}
+              className="flex items-center justify-between gap-2 py-2"
+            >
+              <Link
+                href={`/dashboard/settings/scripts/${encodeURIComponent(triggerId)}`}
+                className="flex flex-col gap-0.5 hover:underline"
+              >
+                <span className="text-sm">{label}</span>
+                <span className="text-muted-foreground font-mono text-xs">
+                  {triggerId}
+                </span>
+              </Link>
+              <Button asChild variant="ghost" size="sm">
+                <Link
+                  href={`/dashboard/settings/scripts/${encodeURIComponent(triggerId)}`}
+                >
+                  Edit
+                </Link>
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }
diff --git a/web/src/app/dashboard/settings/scripts/page.tsx b/web/src/app/dashboard/settings/scripts/page.tsx
new file mode 100644
--- /dev/null
+++ b/web/src/app/dashboard/settings/scripts/page.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+
+import { useCurrentUser } from "@/hooks/use-current-user";
+import { deleteScript, getScripts } from "@/lib/api";
+import type { Script, TriggerFamily } from "@/types/scripts";
+import {
+  TRIGGER_FAMILY_LABELS,
+  TRIGGER_KIND_LABELS,
+  familyOf,
+  parseTriggerId,
+} from "@/types/scripts";
+import { SiteHeader } from "@/components/site-header";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+const FAMILY_ORDER: TriggerFamily[] = ["record", "xrpc", "labeler"];
+
+export default function ScriptsPage() {
+  const { hasPermission } = useCurrentUser();
+  const [scripts, setScripts] = useState<Script[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    getScripts()
+      .then(setScripts)
+      .catch((e) => setError(e instanceof Error ? e.message : String(e)));
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const grouped = useMemo(() => {
+    const map: Record<TriggerFamily, Script[]> = {
+      record: [],
+      xrpc: [],
+      labeler: [],
+    };
+    for (const s of scripts) {
+      const parsed = parseTriggerId(s.id);
+      // Group unparseable rows under their best-effort family — tolerant
+      // because the operator may have created them via direct DB access.
+      const fam: TriggerFamily = parsed ? familyOf(parsed.kind) : "record";
+      map[fam].push(s);
+    }
+    for (const fam of FAMILY_ORDER) {
+      map[fam].sort((a, b) => a.id.localeCompare(b.id));
+    }
+    return map;
+  }, [scripts]);
+
+  async function handleDelete(id: string) {
+    if (!confirm(`Delete script '${id}'?`)) return;
+    try {
+      await deleteScript(id);
+      load();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }
+
+  return (
+    <>
+      <SiteHeader title="Scripts" />
+      <div className="flex flex-1 flex-col gap-6 p-4 md:p-6">
+        {error && <p className="text-destructive text-sm">{error}</p>}
+
+        <div className="flex items-baseline justify-between">
+          <p className="text-muted-foreground text-sm">
+            Each row is a Lua script bound to a trigger. The script&apos;s{" "}
+            <span className="font-mono">id</span> IS its trigger string —
+            no separate name or binding step. The dispatcher resolves
+            scripts by id at firing time.
+          </p>
+          {hasPermission("scripts:manage") && (
+            <Button asChild>
+              <Link href="/dashboard/settings/scripts/new">New script</Link>
+            </Button>
+          )}
+        </div>
+
+        {scripts.length === 0 && (
+          <div className="bg-sidebar-accent text-muted-foreground rounded-md border p-6 text-center text-sm">
+            No scripts yet.
+            {hasPermission("scripts:manage") && (
+              <>
+                {" "}
+                <Link
+                  href="/dashboard/settings/scripts/new"
+                  className="underline hover:no-underline"
+                >
+                  Create one
+                </Link>
+                .
+              </>
+            )}
+          </div>
+        )}
+
+        {FAMILY_ORDER.map((fam) => {
+          const rows = grouped[fam];
+          if (rows.length === 0) return null;
+          return (
+            <section key={fam} className="flex flex-col gap-2">
+              <h2 className="text-base font-semibold">
+                {TRIGGER_FAMILY_LABELS[fam]}
+              </h2>
+              <div className="overflow-clip rounded-lg border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Trigger</TableHead>
+                      <TableHead>Kind</TableHead>
+                      <TableHead>Description</TableHead>
+                      <TableHead>Updated</TableHead>
+                      <TableHead className="w-10 sticky right-0 bg-inherit z-[1]" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {rows.map((s) => {
+                      const parsed = parseTriggerId(s.id);
+                      return (
+                        <TableRow key={s.id}>
+                          <TableCell className="font-mono text-xs">
+                            <Link
+                              href={`/dashboard/settings/scripts/${encodeURIComponent(s.id)}`}
+                              className="underline hover:no-underline"
+                            >
+                              {s.id}
+                            </Link>
+                          </TableCell>
+                          <TableCell>
+                            {parsed ? (
+                              <Badge variant="outline">
+                                {TRIGGER_KIND_LABELS[parsed.kind]}
+                              </Badge>
+                            ) : (
+                              <Badge variant="destructive">malformed</Badge>
+                            )}
+                          </TableCell>
+                          <TableCell className="text-muted-foreground text-sm">
+                            {s.description ?? ""}
+                          </TableCell>
+                          <TableCell className="text-muted-foreground text-sm">
+                            {new Date(s.updated_at).toLocaleString()}
+                          </TableCell>
+                          <TableCell className="sticky right-0 bg-inherit z-[1]">
+                            {hasPermission("scripts:manage") && (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleDelete(s.id)}
+                              >
+                                Delete
+                              </Button>
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </div>
+            </section>
+          );
+        })}
+      </div>
+    </>
+  );
+}
diff --git a/web/src/app/dashboard/settings/scripts/script-form.tsx b/web/src/app/dashboard/settings/scripts/script-form.tsx
new file mode 100644
--- /dev/null
+++ b/web/src/app/dashboard/settings/scripts/script-form.tsx
@@ -0,0 +1,315 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+
+import { MonacoEditor } from "@/components/monaco-editor";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import type { LexiconSummary } from "@/types/lexicons";
+import type { TriggerKind } from "@/types/scripts";
+import { TRIGGER_KIND_LABELS, parseTriggerId } from "@/types/scripts";
+
+/**
+ * Sentinel suffix used when the operator picks "Actor" in the lexicon
+ * dropdown. Combined with `kind = "labeler.apply"` it yields the
+ * `labeler.apply:_actor` trigger.
+ */
+export const ACTOR_SUFFIX = "_actor";
+
+export interface ScriptFormState {
+  /** Trigger kind selector value (e.g. `record.create`). */
+  kind: TriggerKind;
+  /**
+   * Suffix portion of the trigger id — usually an NSID (= a lexicon id),
+   * or the literal `_actor` when `kind === "labeler.apply"` for
+   * actor-level labels.
+   */
+  suffix: string;
+  description: string;
+  body: string;
+}
+
+/**
+ * Build a `ScriptFormState` from a backend `id` string + body. Returns
+ * defaults if the id is malformed (so the form still renders something
+ * editable).
+ */
+export function stateFromScript(args: {
+  id: string;
+  description: string | null | undefined;
+  body: string;
+}): ScriptFormState {
+  const parsed = parseTriggerId(args.id);
+  return {
+    kind: parsed?.kind ?? "record.index",
+    suffix: parsed?.suffix ?? "",
+    description: args.description ?? "",
+    body: args.body,
+  };
+}
+
+/** Recompose the trigger id from `(kind, suffix)`. */
+export function composeTriggerId(state: ScriptFormState): string {
+  return `${state.kind}:${state.suffix}`;
+}
+
+// ---------------------------------------------------------------------------
+// Trigger-kind options per lexicon type
+// ---------------------------------------------------------------------------
+
+interface ActionOption {
+  kind: TriggerKind;
+  label: string;
+}
+
+const ACTOR_ACTIONS: ActionOption[] = [
+  { kind: "labeler.apply", label: TRIGGER_KIND_LABELS["labeler.apply"] },
+];
+
+const RECORD_ACTIONS: ActionOption[] = [
+  { kind: "record.index", label: "Default handler (any action)" },
+  { kind: "record.create", label: "On create" },
+  { kind: "record.update", label: "On update" },
+  { kind: "record.delete", label: "On delete" },
+  { kind: "labeler.apply", label: "On label applied" },
+];
+
+const QUERY_ACTIONS: ActionOption[] = [
+  { kind: "xrpc.query", label: "Query handler" },
+];
+
+const PROCEDURE_ACTIONS: ActionOption[] = [
+  { kind: "xrpc.procedure", label: "Procedure handler" },
+];
+
+function actionsFor(suffix: string, lexicons: LexiconSummary[]): ActionOption[] {
+  if (suffix === ACTOR_SUFFIX) return ACTOR_ACTIONS;
+  const lex = lexicons.find((l) => l.id === suffix);
+  if (!lex) return [];
+  switch (lex.lexicon_type) {
+    case "record":
+      return RECORD_ACTIONS;
+    case "query":
+      return QUERY_ACTIONS;
+    case "procedure":
+      return PROCEDURE_ACTIONS;
+    default:
+      return [];
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Form
+// ---------------------------------------------------------------------------
+
+/**
+ * Shared form for create + edit. The trigger id is the row's PK and
+ * can't change after creation — to "rename" you delete and recreate.
+ *
+ * - When `idLocked` is true (detail page): the trigger id is rendered
+ *   as plain text; only description + body are editable.
+ * - When `idLocked` is false (new page): a Lexicon picker (with
+ *   `Actor` at the top, then a divider, then every stored lexicon)
+ *   composes the suffix; an Action picker filtered to the selected
+ *   lexicon's type composes the kind.
+ */
+export function ScriptForm({
+  state,
+  onChange,
+  idLocked,
+  lexicons,
+}: {
+  state: ScriptFormState;
+  onChange: (next: ScriptFormState) => void;
+  idLocked?: boolean;
+  /** Required when `idLocked` is false; ignored otherwise. */
+  lexicons?: LexiconSummary[];
+}) {
+  return (
+    <div className="flex flex-col flex-1 min-h-0 gap-4">
+      {idLocked ? (
+        <LockedTrigger triggerId={composeTriggerId(state)} />
+      ) : (
+        <TriggerComposer
+          state={state}
+          onChange={onChange}
+          lexicons={lexicons ?? []}
+        />
+      )}
+
+      <div className="flex flex-col gap-1">
+        <Label htmlFor="description" className="text-xs">
+          Description (optional)
+        </Label>
+        <Textarea
+          id="description"
+          value={state.description}
+          onChange={(e) => onChange({ ...state, description: e.target.value })}
+          rows={2}
+          placeholder="What does this script do?"
+          className="text-sm"
+        />
+      </div>
+
+      <div className="flex flex-col flex-1 min-h-[300px] gap-1">
+        <Label htmlFor="body" className="text-xs">
+          Lua body
+        </Label>
+        <div className="border rounded-md flex-1 min-h-[300px] overflow-hidden">
+          <MonacoEditor
+            value={state.body}
+            onChange={(v) => onChange({ ...state, body: v })}
+            language="lua"
+            className="h-full"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LockedTrigger({ triggerId }: { triggerId: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <Label className="text-xs">Trigger</Label>
+      <p className="font-mono text-sm">{triggerId}</p>
+    </div>
+  );
+}
+
+function TriggerComposer({
+  state,
+  onChange,
+  lexicons,
+}: {
+  state: ScriptFormState;
+  onChange: (next: ScriptFormState) => void;
+  lexicons: LexiconSummary[];
+}) {
+  const sortedLexicons = useMemo(
+    () => [...lexicons].sort((a, b) => a.id.localeCompare(b.id)),
+    [lexicons],
+  );
+  const actions = useMemo(
+    () => actionsFor(state.suffix, lexicons),
+    [state.suffix, lexicons],
+  );
+
+  // If the current kind doesn't match the actions valid for the current
+  // suffix (e.g. user just switched lexicon, the old kind is invalid),
+  // snap to the first available action.
+  useEffect(() => {
+    if (actions.length === 0) return;
+    if (!actions.some((a) => a.kind === state.kind)) {
+      onChange({ ...state, kind: actions[0].kind });
+    }
+    // We deliberately omit `state` from deps to avoid re-running when
+    // the user edits other fields (description / body).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actions, state.suffix]);
+
+  function handleSuffixChange(next: string) {
+    // Pre-snap kind so the resolved trigger id badge updates immediately
+    // rather than flickering through an invalid state.
+    const nextActions = actionsFor(next, lexicons);
+    const nextKind = nextActions.some((a) => a.kind === state.kind)
+      ? state.kind
+      : (nextActions[0]?.kind ?? state.kind);
+    onChange({ ...state, suffix: next, kind: nextKind });
+  }
+
+  const triggerPreview =
+    state.suffix && actions.length > 0 ? composeTriggerId(state) : null;
+
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="lexicon-pick" className="text-xs">
+            Lexicon
+          </Label>
+          <Select value={state.suffix} onValueChange={handleSuffixChange}>
+            <SelectTrigger id="lexicon-pick" size="sm" className="w-full">
+              <SelectValue placeholder="Choose a lexicon" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value={ACTOR_SUFFIX}>
+                  Actor
+                  <span className="text-muted-foreground ml-2 text-xs">
+                    (labels on bare DIDs)
+                  </span>
+                </SelectItem>
+              </SelectGroup>
+              <SelectSeparator />
+              <SelectGroup>
+                <SelectLabel className="text-xs">Lexicons</SelectLabel>
+                {sortedLexicons.length === 0 ? (
+                  <SelectItem value="__no_lexicons__" disabled>
+                    No lexicons yet
+                  </SelectItem>
+                ) : (
+                  sortedLexicons.map((lex) => (
+                    <SelectItem key={lex.id} value={lex.id}>
+                      <span className="font-mono">{lex.id}</span>
+                      <span className="text-muted-foreground ml-2 text-xs">
+                        ({lex.lexicon_type})
+                      </span>
+                    </SelectItem>
+                  ))
+                )}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="action-pick" className="text-xs">
+            Action
+          </Label>
+          <Select
+            value={state.kind}
+            onValueChange={(v) => onChange({ ...state, kind: v as TriggerKind })}
+            disabled={actions.length <= 1}
+          >
+            <SelectTrigger id="action-pick" size="sm" className="w-full">
+              <SelectValue placeholder="Pick a lexicon first" />
+            </SelectTrigger>
+            <SelectContent>
+              {actions.map((a) => (
+                <SelectItem key={a.kind} value={a.kind}>
+                  {a.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div>
+        <Label className="text-xs text-muted-foreground">
+          Resolved trigger id
+        </Label>
+        <p className="mt-1 font-mono text-sm">
+          {triggerPreview ? (
+            <Badge variant="outline">{triggerPreview}</Badge>
+          ) : (
+            <span className="text-muted-foreground">
+              Pick a lexicon to compose the trigger id.
+            </span>
+          )}
+        </p>
+      </div>
+    </>
+  );
+}
diff --git a/web/src/app/dashboard/settings/scripts/[id]/page.tsx b/web/src/app/dashboard/settings/scripts/[id]/page.tsx
new file mode 100644
--- /dev/null
+++ b/web/src/app/dashboard/settings/scripts/[id]/page.tsx
@@ -0,0 +1,11 @@
+import ScriptDetail from "./script-detail";
+
+// https://github.com/vercel/next.js/issues/71862
+// Returning [] fails with output:"export", so provide a dummy param.
+export async function generateStaticParams() {
+  return [{ id: "_" }];
+}
+
+export default function ScriptDetailPage() {
+  return <ScriptDetail />;
+}
diff --git a/web/src/app/dashboard/settings/scripts/[id]/script-detail.tsx b/web/src/app/dashboard/settings/scripts/[id]/script-detail.tsx
new file mode 100644
--- /dev/null
+++ b/web/src/app/dashboard/settings/scripts/[id]/script-detail.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+
+import { useCurrentUser } from "@/hooks/use-current-user";
+import { deleteScript, getScript, patchScript } from "@/lib/api";
+import type { Script, TriggerFamily } from "@/types/scripts";
+import {
+  TRIGGER_KIND_LABELS,
+  familyOf,
+  parseTriggerId,
+} from "@/types/scripts";
+import { SiteHeader } from "@/components/site-header";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+import {
+  ScriptForm,
+  type ScriptFormState,
+  stateFromScript,
+} from "../script-form";
+
+export default function ScriptDetail() {
+  const pathname = usePathname();
+  // The `[id]` route segment carries the URL-encoded trigger id.
+  // Decode once so all downstream calls see the canonical id (which
+  // contains `:` and `.`).
+  const id = decodeURIComponent(
+    pathname.split("/").filter(Boolean).pop() ?? "",
+  );
+  const { hasPermission } = useCurrentUser();
+  const router = useRouter();
+  const [script, setScript] = useState<Script | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const [state, setState] = useState<ScriptFormState | null>(null);
+  const [original, setOriginal] = useState<ScriptFormState | null>(null);
+
+  const load = useCallback(() => {
+    getScript(id)
+      .then((s) => {
+        setScript(s);
+        const next = stateFromScript({
+          id: s.id,
+          description: s.description,
+          body: s.body,
+        });
+        setState(next);
+        setOriginal(next);
+      })
+      .catch((e) => setError(e instanceof Error ? e.message : String(e)));
+  }, [id]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const isDirty = useMemo(() => {
+    if (!state || !original) return false;
+    return (
+      state.body !== original.body ||
+      state.description !== original.description
+    );
+  }, [state, original]);
+
+  async function handleSave() {
+    if (!state || !script) return;
+    setSaving(true);
+    setError(null);
+    try {
+      // PATCH only the editable fields. Trigger id is the PK — to
+      // rename, delete and recreate.
+      await patchScript(script.id, {
+        body: state.body,
+        description: state.description.trim() || null,
+      });
+      load();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!script) return;
+    if (!confirm(`Delete script '${script.id}'?`)) return;
+    setDeleting(true);
+    try {
+      await deleteScript(script.id);
+      router.push("/dashboard/settings/scripts");
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e));
+      setDeleting(false);
+    }
+  }
+
+  if (error && !state) {
+    return (
+      <>
+        <SiteHeader title="Script" backHref="/dashboard/settings/scripts" />
+        <div className="p-4 md:p-6">
+          <p className="text-destructive text-sm">{error}</p>
+        </div>
+      </>
+    );
+  }
+
+  if (!state) {
+    return (
+      <>
+        <SiteHeader title="Script" backHref="/dashboard/settings/scripts" />
+        <div className="p-4 md:p-6">
+          <p className="text-muted-foreground text-sm">Loading...</p>
+        </div>
+      </>
+    );
+  }
+
+  const canManage = hasPermission("scripts:manage");
+  const parsed = parseTriggerId(id);
+  const familyLabel: Record<TriggerFamily, string> = {
+    record: "Record event",
+    xrpc: "XRPC handler",
+    labeler: "Label arrival",
+  };
+
+  return (
+    <>
+      <SiteHeader title={`Script: ${id}`} backHref="/dashboard/settings/scripts" />
+
+      <div className="flex flex-col flex-1 min-h-0">
+        <div className="flex flex-col flex-1 min-h-0 gap-6 p-4 md:p-6">
+          {error && <p className="text-destructive text-sm">{error}</p>}
+
+          {parsed && (
+            <div className="flex gap-2 items-baseline">
+              <Badge variant="outline">{TRIGGER_KIND_LABELS[parsed.kind]}</Badge>
+              <span className="text-muted-foreground text-xs">
+                ({familyLabel[familyOf(parsed.kind)]})
+              </span>
+              {parsed.kind.startsWith("record.") &&
+                parsed.kind !== "record.index" && (
+                  <span className="text-muted-foreground text-xs">
+                    — fires only on this action; cascades to{" "}
+                    <span className="font-mono">
+                      record.index:{parsed.suffix}
+                    </span>{" "}
+                    if absent.
+                  </span>
+                )}
+              {parsed.kind === "record.index" && (
+                <span className="text-muted-foreground text-xs">
+                  — wildcard fallback; runs for any action without an
+                  action-specific row.
+                </span>
+              )}
+            </div>
+          )}
+
+          <ScriptForm state={state} onChange={setState} idLocked />
+        </div>
+
+        <footer className="bg-sidebar-accent flex justify-between gap-2 ps-4 pt-2 pb-1 md:px-6 md:py-4 rounded-b-md">
+          {canManage && (
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? "Deleting..." : "Delete script"}
+            </Button>
+          )}
+          <div className="flex gap-2">
+            {canManage && (
+              <Button onClick={handleSave} disabled={!isDirty || saving}>
+                {saving ? "Saving..." : "Save"}
+              </Button>
+            )}
+          </div>
+        </footer>
+      </div>
+    </>
+  );
+}
diff --git a/web/src/app/dashboard/settings/scripts/new/page.tsx b/web/src/app/dashboard/settings/scripts/new/page.tsx
new file mode 100644
--- /dev/null
+++ b/web/src/app/dashboard/settings/scripts/new/page.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+import { useCurrentUser } from "@/hooks/use-current-user";
+import { getLexicons, upsertScript } from "@/lib/api";
+import type { LexiconSummary } from "@/types/lexicons";
+import type { TriggerKind } from "@/types/scripts";
+import { DEFAULT_SCRIPT_BODY, parseTriggerId } from "@/types/scripts";
+import { SiteHeader } from "@/components/site-header";
+import { Button } from "@/components/ui/button";
+
+import {
+  ScriptForm,
+  type ScriptFormState,
+  composeTriggerId,
+} from "../script-form";
+
+function NewScriptInner() {
+  const { hasPermission } = useCurrentUser();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [state, setState] = useState<ScriptFormState>(() =>
+    initialState(searchParams),
+  );
+  // The Lexicon picker is sourced from /admin/lexicons; we render the
+  // form even if the call fails (the operator can still pick "Actor"
+  // and create a labeler.apply:_actor script).
+  const [lexicons, setLexicons] = useState<LexiconSummary[]>([]);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // If the URL changes (e.g. user navigates with new ?id=...), refresh state.
+  useEffect(() => {
+    setState(initialState(searchParams));
+  }, [searchParams]);
+
+  useEffect(() => {
+    getLexicons()
+      .then(setLexicons)
+      .catch(() => setLexicons([]));
+  }, []);
+
+  if (!hasPermission("scripts:manage")) {
+    return (
+      <>
+        <SiteHeader title="New script" backHref="/dashboard/settings/scripts" />
+        <div className="p-4 md:p-6">
+          <p className="text-destructive text-sm">
+            You don&apos;t have permission to create scripts.
+          </p>
+        </div>
+      </>
+    );
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    setError(null);
+    try {
+      const id = composeTriggerId(state);
+      await upsertScript({
+        id,
+        body: state.body,
+        description: state.description.trim() || null,
+      });
+      router.push(`/dashboard/settings/scripts/${encodeURIComponent(id)}`);
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e));
+      setSaving(false);
+    }
+  }
+
+  return (
+    <>
+      <SiteHeader title="New script" backHref="/dashboard/settings/scripts" />
+      <div className="flex flex-col flex-1 min-h-0">
+        <div className="flex flex-col flex-1 min-h-0 gap-6 p-4 md:p-6">
+          {error && <p className="text-destructive text-sm">{error}</p>}
+          <ScriptForm state={state} onChange={setState} lexicons={lexicons} />
+        </div>
+        <footer className="bg-sidebar-accent flex justify-end gap-2 px-4 py-2 md:px-6 md:py-4 rounded-b-md">
+          <Button onClick={handleSave} disabled={saving || !state.suffix}>
+            {saving ? "Creating..." : "Create script"}
+          </Button>
+        </footer>
+      </div>
+    </>
+  );
+}
+
+export default function NewScriptPage() {
+  return (
+    <Suspense fallback={null}>
+      <NewScriptInner />
+    </Suspense>
+  );
+}
+
+function initialState(searchParams: URLSearchParams): ScriptFormState {
+  // Optional `?id=record.create:<nsid>` pre-fills the form — the lexicon
+  // detail page links here with a candidate trigger id.
+  const presetId = searchParams.get("id");
+  if (presetId) {
+    const parsed = parseTriggerId(presetId);
+    if (parsed) {
+      return {
+        kind: parsed.kind,
+        suffix: parsed.suffix,
+        description: "",
+        body: DEFAULT_SCRIPT_BODY,
+      };
+    }
+  }
+  // Fallbacks to a sensible default. Suffix starts empty so the form
+  // surfaces the "Pick a lexicon to compose the trigger id" hint.
+  const kind = (searchParams.get("kind") as TriggerKind | null) ?? "record.index";
+  return {
+    kind,
+    suffix: searchParams.get("suffix") ?? "",
+    description: "",
+    body: DEFAULT_SCRIPT_BODY,
+  };
+}

--
tangled.sh