@kestra-io/create-artifact-sdk 0.0.1

package/README.md

@@ -0,0 +1,68 @@
+# `@kestra-io/create-artifact-sdk`
+
+CLI scaffolder for Kestra plugin custom UIs.
+
+## Usage
+
+Run from your plugin's root directory (the one containing `settings.gradle` or `settings.gradle.kts`):
+
+```sh
+npm create @kestra-io/artifact-sdk
+```
+
+Or from inside the `ui/` directory:
+
+```sh
+cd my-plugin/ui
+npm create @kestra-io/artifact-sdk
+```
+
+The CLI will:
+
+1. **Detect your plugin** — reads `settings.gradle[.kts]` to find the plugin group id (e.g. `io.kestra.plugin.redis`).
+2. **Ask which task** you want to add a custom UI for (e.g. `list.ListPop`).
+3. **Ask which UI module** to customize:
+   - `topology-details` — panel shown when a task node is selected in the topology view
+   - `log-details` — panel shown in the log view for a task execution
+   - `metrics-details` — panel shown in the metrics tab for a task execution
+   - `trigger-details` — panel shown when a trigger node is selected
+4. **Show a summary** and ask for confirmation before writing anything.
+5. **Scaffold the `ui/` directory** with:
+   - `package.json` (with all required dependencies)
+   - `vite.config.ts` (pre-configured with your plugin id and task)
+   - `src/main.ts` and `src/App.vue` for local development
+   - `src/components/<ComponentName>.vue` — the starter component to edit
+   - `src/<ComponentName>.stories.ts` — a Storybook story
+   - `.storybook/main.ts` and `.storybook/preview.ts`
+   - `index.html`, `tsconfig.json`, `.gitignore`
+6. **Run `npm install`** (optional, prompted).
+
+## After scaffolding
+
+```sh
+cd ui
+
+# Local dev — renders the component in a Vite app
+npm run dev
+
+# Storybook — develop and document in isolation
+npm run storybook
+
+# Build the UI module for bundling with the plugin
+npm run build
+```
+
+## How component names are derived
+
+The component filename is built from the task type and the UI module:
+
+| Task type          | UI module          | Component name                      |
+| ------------------ | ------------------ | ----------------------------------- |
+| `list.ListPop`     | `topology-details` | `ListListPopTopologyDetails.vue`    |
+| `io.Get`           | `log-details`      | `IoGetLogDetails.vue`               |
+| `trigger.Schedule` | `trigger-details`  | `TriggerScheduleTriggerDetails.vue` |
+
+## Requirements
+
+- Node.js ≥ 18
+- Must be run from a directory containing `settings.gradle` or `settings.gradle.kts` (or a direct child of one)

package/bin/create.js

@@ -0,0 +1,257 @@
+#!/usr/bin/env node
+// oxlint-disable no-console
+import {
+  intro,
+  outro,
+  text,
+  select,
+  confirm,
+  spinner,
+  log,
+  cancel,
+  note,
+  isCancel,
+} from "@clack/prompts";
+import pc from "picocolors";
+import path from "node:path";
+import fs from "node:fs";
+
+import { detectContext } from "../src/context.js";
+import { UI_MODULES, deriveComponentName } from "../src/modules.js";
+import {
+  scaffoldPackageJson,
+  scaffoldMainTs,
+  scaffoldAppVue,
+  scaffoldViteConfig,
+  scaffoldComponent,
+  scaffoldIndexHtml,
+  scaffoldTsConfig,
+  scaffoldStorybookMain,
+  scaffoldStorybookPreview,
+  scaffoldStory,
+  scaffoldGitignore,
+} from "../src/scaffold.js";
+import { npmInstall } from "../src/runner.js";
+import { findKestraTasks } from "../src/find-kestra-tasks.js";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function bail(message) {
+  cancel(message);
+  process.exit(1);
+}
+
+function checkCancel(value) {
+  if (isCancel(value)) bail("Operation cancelled.");
+  return value;
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+async function main() {
+  console.log(); // breathing room
+  intro(pc.bgCyan(pc.black(" create-artifact-sdk ")));
+
+  // ── 1. Detect project context ─────────────────────────────────────────────
+
+  const ctx = detectContext(process.cwd());
+
+  if (!ctx.pluginRoot) {
+    log.warn(
+      "Could not find a " +
+        pc.bold("settings.gradle") +
+        " or " +
+        pc.bold("settings.gradle.kts") +
+        " file in the current directory or its parent.",
+    );
+    log.info(
+      "Run this command from your plugin's root directory (or the " +
+        pc.bold("ui/") +
+        " directory inside it).",
+    );
+    bail("Plugin root not found.");
+  }
+
+  log.info("Detected plugin root: " + pc.cyan(ctx.pluginRoot));
+
+  // ── 2. Resolve / confirm plugin id ───────────────────────────────────────
+
+  let pluginId = ctx.pluginId;
+
+  if (!pluginId) {
+    log.warn("Could not deduce a plugin group id from " + pc.bold(path.basename(ctx.gradleFile)));
+    pluginId = checkCancel(
+      await text({
+        message: "Enter the plugin group id (e.g. io.kestra.plugin.redis):",
+        validate: (v) =>
+          v.includes(".") ? undefined : "Must be a dotted id like io.kestra.plugin.myPlugin",
+      }),
+    );
+  } else {
+    const confirmed = checkCancel(
+      await confirm({
+        message: `Plugin id detected as ${pc.cyan(pluginId)} — is that correct?`,
+        initialValue: true,
+      }),
+    );
+    if (!confirmed) {
+      pluginId = checkCancel(
+        await text({
+          message: "Enter the correct plugin group id:",
+          validate: (v) =>
+            v.includes(".") ? undefined : "Must be a dotted id like io.kestra.plugin.myPlugin",
+        }),
+      );
+    }
+  }
+
+  // ── 3. Task type ──────────────────────────────────────────────────────────
+
+  // get task list from plugin sources, if possible, and offer it as autocomplete options
+  let taskOptions = await findKestraTasks(path.join(ctx.pluginRoot, "src"));
+  const taskType = checkCancel(
+    await select({
+      message: "Which task do you want to add a custom UI for?",
+      options: taskOptions.map((task) => {
+        const taskShort = task.replace(`${ctx.pluginId}.`, "");
+        return {
+          value: taskShort,
+          label: taskShort,
+        };
+      }),
+      validate: (v) => {
+        if (!v.trim()) return "Task type is required.";
+      },
+    }),
+  );
+
+  // ── 4. UI module ──────────────────────────────────────────────────────────
+
+  const moduleValue = checkCancel(
+    await select({
+      message: "Which UI do you want to customize?",
+      options: Object.entries(UI_MODULES).map(([key, m]) => ({
+        value: key,
+        label: m.label,
+        hint: m.hint,
+      })),
+    }),
+  );
+
+  const mod = UI_MODULES[moduleValue];
+  const componentName = deriveComponentName(taskType, mod.componentSuffix);
+
+  // ── 5. Summary & confirmation ─────────────────────────────────────────────
+
+  const uiDir = ctx.uiDir;
+  const relUiDir = path.relative(process.cwd(), uiDir) || "ui";
+
+  note(
+    [
+      `Plugin id:   ${pc.cyan(pluginId)}`,
+      `Task:        ${pc.cyan(taskType)}`,
+      `UI module:   ${pc.cyan(moduleValue)}`,
+      `Component:   ${pc.cyan(componentName + ".vue")}`,
+      ``,
+      `${pc.bold("Will create / write:")}`,
+      `  ${relUiDir}/package.json`,
+      `  ${relUiDir}/index.html`,
+      `  ${relUiDir}/tsconfig.json`,
+      `  ${relUiDir}/vite.config.ts`,
+      `  ${relUiDir}/src/main.ts`,
+      `  ${relUiDir}/src/App.vue`,
+      `  ${relUiDir}/src/components/${componentName}.vue`,
+      `  ${relUiDir}/src/${componentName}.stories.ts`,
+      `  ${relUiDir}/.storybook/main.ts`,
+      `  ${relUiDir}/.storybook/preview.ts`,
+      `  ${relUiDir}/.gitignore`,
+      ctx.uiDirExists ? "" : `  ${relUiDir}/  ${pc.dim("(directory will be created)")}`,
+    ]
+      .filter((l) => l !== undefined)
+      .join("\n"),
+    "Here's what will happen",
+  );
+
+  const go = checkCancel(await confirm({ message: "Proceed?", initialValue: true }));
+  if (!go) bail("Cancelled.");
+
+  // ── 6. Scaffold files ─────────────────────────────────────────────────────
+
+  const s = spinner();
+  s.start("Scaffolding files…");
+
+  try {
+    fs.mkdirSync(uiDir, { recursive: true });
+
+    const npmPkgName = pluginId; // use the plugin group id as the npm package name
+
+    scaffoldPackageJson(uiDir, npmPkgName);
+    scaffoldIndexHtml(uiDir, npmPkgName);
+    scaffoldTsConfig(uiDir);
+    scaffoldViteConfig(
+      uiDir,
+      pluginId,
+      taskType,
+      moduleValue,
+      componentName,
+      mod.additionalProperties,
+    );
+    scaffoldMainTs(uiDir);
+    scaffoldAppVue(uiDir, componentName, moduleValue);
+    scaffoldComponent(uiDir, componentName, mod.starterFile);
+    scaffoldStorybookMain(uiDir);
+    scaffoldStorybookPreview(uiDir);
+    scaffoldStory(uiDir, componentName, moduleValue);
+    scaffoldGitignore(uiDir);
+
+    s.stop("Files scaffolded.");
+  } catch (err) {
+    s.stop("Scaffolding failed.");
+    bail(String(err));
+  }
+
+  // ── 7. npm install ────────────────────────────────────────────────────────
+
+  const doInstall = checkCancel(
+    await confirm({
+      message: `Run ${pc.bold("npm install")} in ${pc.cyan(relUiDir)}?`,
+      initialValue: true,
+    }),
+  );
+
+  if (doInstall) {
+    const s2 = spinner();
+    s2.start("Installing dependencies…");
+    const { success, output } = npmInstall(uiDir);
+    if (success) {
+      s2.stop("Dependencies installed.");
+    } else {
+      s2.stop(pc.yellow("npm install finished with warnings/errors."));
+      log.warn(output.slice(0, 600));
+    }
+  }
+
+  // ── 8. Done ───────────────────────────────────────────────────────────────
+
+  const cdCmd = ctx.pluginRoot !== process.cwd() ? `cd ${relUiDir} && ` : `cd ${relUiDir} && `;
+
+  outro(
+    pc.green("✔ Done!") +
+      "\n\n" +
+      [
+        "Next steps:",
+        `  ${pc.bold(cdCmd + "npm run dev")}        — start Vite dev server`,
+        `  ${pc.bold(cdCmd + "npm run storybook")}   — start Storybook`,
+        `  ${pc.bold(cdCmd + "npm run build")}        — build the UI module`,
+      ].join("\n"),
+  );
+}
+
+main().catch((err) => {
+  console.error(pc.red("Unexpected error:"), err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@kestra-io/create-artifact-sdk",
+  "version": "0.0.1",
+  "description": "Scaffold a Kestra plugin custom UI package",
+  "keywords": [
+    "kestra",
+    "plugin",
+    "scaffold",
+    "ui"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kestra-io/artifact-sdk.git"
+  },
+  "bin": {
+    "create-artifact-sdk": "./bin/create.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "templates"
+  ],
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "node bin/create.js"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.2.0",
+    "@kestra-io/artifact-sdk": "*",
+    "picocolors": "^1.1.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/context.js

@@ -0,0 +1,75 @@
+import fs from "node:fs";
+import path from "node:path";
+
+/**
+ * Walk upward from `startDir` looking for a settings.gradle or settings.gradle.kts file.
+ * Returns { dir, file, content } or null if not found within `maxLevels`.
+ */
+function findGradleSettings(startDir, maxLevels = 2) {
+  let dir = startDir;
+  for (let i = 0; i <= maxLevels; i++) {
+    for (const name of ["settings.gradle.kts", "settings.gradle"]) {
+      const candidate = path.join(dir, name);
+      if (fs.existsSync(candidate)) {
+        return { dir, file: candidate, content: fs.readFileSync(candidate, "utf8") };
+      }
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) break; // filesystem root
+    dir = parent;
+  }
+  return null;
+}
+
+/**
+ * Extract the rootProject.name value from a Gradle settings file.
+ * Handles both:
+ *   rootProject.name = "my-plugin"   (Groovy)
+ *   rootProject.name = "my-plugin"   (KTS)
+ */
+function extractPluginName(content) {
+  const match = content.match(/rootProject\.name\s*=\s*["']([^"']+)["']/);
+  return match ? match[1] : null;
+}
+
+/**
+ * Derive a Java-style plugin group id from the project name.
+ * e.g. "plugin-redis" → "io.kestra.plugin.redis"
+ * If the name already looks like a group id, return as-is.
+ */
+function derivePluginId(name) {
+  if (name.includes(".")) return name;
+  // strip leading "plugin-" or "kestra-plugin-" if present
+  const stripped = name.replace(/^(kestra-)?plugin-/i, "");
+  return `io.kestra.plugin.${stripped}`;
+}
+
+export function detectContext(cwd = process.cwd()) {
+  const gradle = findGradleSettings(cwd);
+
+  let pluginRoot = null;
+  let pluginName = null;
+  let pluginId = null;
+  let uiDirExists = false;
+  let gradleFile = null;
+
+  if (gradle) {
+    pluginRoot = gradle.dir;
+    gradleFile = gradle.file;
+    pluginName = extractPluginName(gradle.content);
+    if (pluginName) {
+      pluginId = derivePluginId(pluginName);
+    }
+    uiDirExists = fs.existsSync(path.join(pluginRoot, "ui"));
+  }
+
+  return {
+    cwd,
+    pluginRoot, // absolute path to the directory containing settings.gradle
+    gradleFile, // absolute path to the settings.gradle file
+    pluginName, // raw name from rootProject.name, e.g. "plugin-redis"
+    pluginId, // derived group id, e.g. "io.kestra.plugin.redis"
+    uiDirExists, // whether ui/ already exists in pluginRoot
+    uiDir: pluginRoot ? path.join(pluginRoot, "ui") : null,
+  };
+}

package/src/find-kestra-tasks.js

@@ -0,0 +1,97 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join, extname } from "node:path";
+
+// ---------------------------------------------------------------------------
+// Heuristics (mirrors the GitHub version)
+// ---------------------------------------------------------------------------
+
+const TASK_ANNOTATIONS = [/@Plugin\s*\(/, /@Schema\s*\(/];
+
+const TASK_SUPERTYPES = [
+  /implements\s+Task\b/,
+  /extends\s+\w*(Task|Trigger|Condition)\b/,
+  /implements\s+RunnableTask/,
+  /implements\s+FlowableTask/,
+  /implements\s+TriggerInterface/,
+];
+
+const EXCLUDE = [
+  /^\s*(public\s+)?abstract\s+class/m, // abstract classes
+  /^\s*public\s+interface\s+/m, // interfaces
+  /package\s+.*\.tests?[.;]/, // test packages
+];
+
+function isTaskClass(source) {
+  if (EXCLUDE.some((re) => re.test(source))) return false;
+  return (
+    TASK_ANNOTATIONS.some((re) => re.test(source)) || TASK_SUPERTYPES.some((re) => re.test(source))
+  );
+}
+
+function extractFullClassName(source, filePath) {
+  const packageMatch = source.match(/^\s*package\s+([\w.]+)\s*;/m);
+  const pkg = packageMatch ? packageMatch[1] : null;
+  if (!pkg || !pkg.startsWith("io.kestra.plugin.")) return null;
+
+  const classMatch = source.match(/public\s+(?:final\s+)?class\s+(\w+)/);
+  const className = classMatch
+    ? classMatch[1]
+    : filePath
+        .split("/")
+        .pop()
+        .replace(/\.java$/, "");
+
+  return `${pkg}.${className}`;
+}
+
+// ---------------------------------------------------------------------------
+// Recursive .java file collector
+// ---------------------------------------------------------------------------
+
+async function collectJavaFiles(dir, results = []) {
+  const entries = await readdir(dir, { withFileTypes: true });
+  await Promise.all(
+    entries.map((entry) => {
+      const full = join(dir, entry.name);
+      if (entry.isDirectory()) return collectJavaFiles(full, results);
+      if (entry.isFile() && extname(entry.name) === ".java") results.push(full);
+    }),
+  );
+  return results;
+}
+
+// ---------------------------------------------------------------------------
+// Main exported function
+// ---------------------------------------------------------------------------
+
+/**
+ * Scans a local Kestra plugin source tree and returns the class names of all
+ * concrete task / trigger / condition classes found.
+ *
+ * @param {string} srcRoot  Path to the source root, e.g. "/path/to/plugin/src"
+ *                          or the deeper Java root like "…/src/main/java".
+ *                          The function accepts either — it will descend into
+ *                          src/main/java automatically if `srcRoot` points at
+ *                          the broader `src` directory.
+ * @returns {Promise<string[]>}  Sorted array of fully-qualified class names (e.g. `io.kestra.plugin.jdbc.mysql.Query`).
+ */
+export async function findKestraTasks(srcRoot) {
+  // Normalise: if the caller passed the broad `src` dir, step into main/java.
+  const javaRoot = srcRoot.endsWith("/src") ? join(srcRoot, "main", "java") : srcRoot;
+
+  const files = await collectJavaFiles(javaRoot);
+
+  const classNames = (
+    await Promise.all(
+      files.map(async (filePath) => {
+        const source = await readFile(filePath, "utf8");
+        if (!isTaskClass(source)) return null;
+        return extractFullClassName(source, filePath);
+      }),
+    )
+  )
+    .filter(Boolean)
+    .sort();
+
+  return classNames;
+}

package/src/modules.js

@@ -0,0 +1,26 @@
+import { UI_MODULES } from "@kestra-io/artifact-sdk";
+
+/**
+ * Derive a PascalCase component name from a task type and a UI module.
+ *
+ * The task type is the short dotted form: e.g. "list.ListPop"
+ * The module suffix is e.g. "TopologyDetails"
+ *
+ * Steps:
+ *   1. Split on "." → ["list", "ListPop"]
+ *   2. PascalCase each segment → ["List", "ListPop"]
+ *   3. Join + append suffix → "ListListPopTopologyDetails"
+ */
+export function deriveComponentName(taskType, moduleSuffix) {
+  const segments = taskType.split(".").map((s) => s.charAt(0).toUpperCase() + s.slice(1));
+  return segments.join("") + moduleSuffix;
+}
+
+/**
+ * Look up a UI_MODULES entry by its value string.
+ */
+export function findModule(value) {
+  return UI_MODULES[value];
+}
+
+export { UI_MODULES };

package/src/runner.js

@@ -0,0 +1,20 @@
+import { spawnSync } from "node:child_process";
+
+/**
+ * Run `npm install` in the given directory.
+ * Returns { success, output }.
+ */
+export function npmInstall(cwd) {
+  const result = spawnSync("npm", ["install"], {
+    cwd,
+    stdio: "pipe",
+    encoding: "utf8",
+    shell: process.platform === "win32",
+  });
+
+  const output = (result.stdout ?? "") + (result.stderr ?? "");
+  return {
+    success: result.status === 0,
+    output,
+  };
+}

package/src/scaffold.js

@@ -0,0 +1,194 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATES_DIR = path.resolve(__dirname, "../templates");
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+function write(filePath, content) {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, content, "utf8");
+}
+
+function readStatic(name) {
+  return fs.readFileSync(path.join(TEMPLATES_DIR, "static", name), "utf8");
+}
+
+function readDynamic(name) {
+  return fs.readFileSync(path.join(TEMPLATES_DIR, "dynamic", name), "utf8");
+}
+
+function readStarter(name) {
+  // get the root of the starters directory, which is in @kestra-io/artifact-sdk
+  const startersDir = path.dirname(
+    require.resolve("@kestra-io/artifact-sdk/starters/placeholder.txt"),
+  );
+  return fs.readFileSync(path.join(startersDir, name), "utf8");
+}
+
+/**
+ * Replace all `{{key}}` placeholders in a template string with the
+ * corresponding values from the `vars` object.
+ */
+function render(template, vars) {
+  return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+    if (!(key in vars)) throw new Error(`Template variable "{{${key}}}" has no value.`);
+    return vars[key];
+  });
+}
+
+// ---------------------------------------------------------------------------
+// package.json  (structured data — kept in JS for easy maintenance)
+// ---------------------------------------------------------------------------
+
+export function scaffoldPackageJson(uiDir, pluginName) {
+  const pkg = {
+    name: pluginName,
+    version: "0.1.0",
+    private: true,
+    type: "module",
+    scripts: {
+      dev: "vite",
+      build: "vite build",
+      preview: "vite preview",
+      storybook: "storybook dev --port 6006",
+      "build-storybook": "storybook build",
+    },
+    dependencies: {
+      "@kestra-io/artifact-sdk": "latest",
+      vue: "^3.5.0",
+    },
+    devDependencies: {
+      "@chromatic-com/storybook": "^3.0.0",
+      "@storybook/addon-essentials": "^8.0.0",
+      "@storybook/addon-interactions": "^8.0.0",
+      "@storybook/addon-links": "^8.0.0",
+      "@storybook/blocks": "^8.0.0",
+      "@storybook/vue3": "^8.0.0",
+      "@storybook/vue3-vite": "^8.0.0",
+      "@vitejs/plugin-vue": "^5.0.0",
+      storybook: "^8.0.0",
+      typescript: "^5.0.0",
+      vite: "^6.0.0",
+    },
+  };
+  write(path.join(uiDir, "package.json"), JSON.stringify(pkg, null, 2) + "\n");
+}
+
+// ---------------------------------------------------------------------------
+// tsconfig.json  (structured data — kept in JS for easy maintenance)
+// ---------------------------------------------------------------------------
+
+export function scaffoldTsConfig(uiDir) {
+  const tsconfig = {
+    compilerOptions: {
+      target: "ES2020",
+      useDefineForClassFields: true,
+      module: "ESNext",
+      lib: ["ES2020", "DOM", "DOM.Iterable"],
+      skipLibCheck: true,
+      moduleResolution: "bundler",
+      allowImportingTsExtensions: true,
+      resolveJsonModule: true,
+      isolatedModules: true,
+      noEmit: true,
+      jsx: "preserve",
+      strict: true,
+    },
+    include: ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  };
+  write(path.join(uiDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2) + "\n");
+}
+
+// ---------------------------------------------------------------------------
+// Static files — read verbatim from templates/static/
+// ---------------------------------------------------------------------------
+
+export function scaffoldMainTs(uiDir) {
+  write(path.join(uiDir, "src", "main.ts"), readStatic("main.ts"));
+}
+
+export function scaffoldStorybookMain(uiDir) {
+  write(path.join(uiDir, ".storybook", "main.ts"), readStatic("storybook-main.ts"));
+}
+
+export function scaffoldStorybookPreview(uiDir) {
+  write(path.join(uiDir, ".storybook", "preview.ts"), readStatic("storybook-preview.ts"));
+}
+
+export function scaffoldGitignore(uiDir) {
+  write(path.join(uiDir, ".gitignore"), readStatic("gitignore"));
+}
+
+// ---------------------------------------------------------------------------
+// Dynamic files — rendered from templates/dynamic/*.hbs
+// ---------------------------------------------------------------------------
+
+export function scaffoldAppVue(uiDir, componentName, moduleValue) {
+  const content = render(readDynamic("App.vue.hbs"), {
+    componentName,
+    moduleValue,
+  });
+  write(path.join(uiDir, "src", "App.vue"), content);
+}
+
+export function scaffoldIndexHtml(uiDir, pluginName) {
+  const content = render(readDynamic("index.html.hbs"), { pluginName });
+  write(path.join(uiDir, "index.html"), content);
+}
+
+export function scaffoldViteConfig(
+  uiDir,
+  pluginId,
+  taskType,
+  moduleValue,
+  componentName,
+  additionalProperties,
+) {
+  const hasAdditional = Object.keys(additionalProperties).length > 0;
+  const additionalPropertiesStr = hasAdditional
+    ? "\n        additionalProperties: " +
+      JSON.stringify(additionalProperties, null, 2).split("\n").join("\n        ") +
+      ","
+    : "";
+
+  const content = render(readDynamic("vite.config.ts.hbs"), {
+    pluginId,
+    taskType,
+    moduleValue,
+    componentName,
+    additionalProperties: additionalPropertiesStr,
+  });
+  write(path.join(uiDir, "vite.config.ts"), content);
+}
+
+export function scaffoldStory(uiDir, componentName, moduleValue) {
+  const content = render(readDynamic("Component.stories.ts.hbs"), {
+    componentName,
+    moduleValue,
+  });
+  write(path.join(uiDir, "src", `${componentName}.stories.ts`), content);
+}
+
+// ---------------------------------------------------------------------------
+// Component — copied from templates/starters/ with fallback
+// ---------------------------------------------------------------------------
+
+export function scaffoldComponent(uiDir, componentName, starterFile) {
+  let content;
+  try {
+    content = readStarter(starterFile);
+  } catch {
+    // Fallback used before @kestra-io/artifact-sdk is published
+    const uiType = starterFile.replace(".vue", "");
+    content = render(readDynamic("Component.fallback.vue.hbs"), {
+      componentName,
+      uiType,
+    });
+  }
+  write(path.join(uiDir, "src", "components", `${componentName}.vue`), content);
+}

package/templates/dynamic/App.vue.hbs

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import {{componentName}} from "./components/{{componentName}}.vue";
+
+// Default props for local development — adjust to match your task's real output
+const props = {
+  // TODO: populate with realistic sample data for the "{{moduleValue}}" UI
+};
+</script>
+
+<template>
+  <div style="padding: 1rem; font-family: sans-serif">
+    <{{componentName}} v-bind="props" />
+  </div>
+</template>

package/templates/dynamic/Component.fallback.vue.hbs

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  // TODO: define props matching the "{{uiType}}" contract
+  // from @kestra-io/artifact-sdk once the SDK is published.
+  defineProps<Record<string, unknown>>();
+</script>
+
+<template>
+  <div class="kestra-custom-ui">
+    <p>✏️ Customize this component for your task.</p>
+  </div>
+</template>
+
+<style scoped>
+  .kestra-custom-ui { padding: 1rem; }
+</style>

package/templates/dynamic/Component.stories.ts.hbs

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import {{componentName}} from "./components/{{componentName}}.vue";
+
+const meta: Meta<typeof {{componentName}}> = {
+  title: "Plugin UI / {{moduleValue}} / {{componentName}}",
+  component: {{componentName}},
+  tags: ["autodocs"],
+  argTypes: {
+    // TODO: define argTypes matching your component's props
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof {{componentName}}>;
+
+export const Default: Story = {
+  args: {
+    // TODO: populate with realistic sample data
+  },
+};

package/templates/dynamic/index.html.hbs

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{pluginName}} — Plugin UI Dev</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/dynamic/vite.config.ts.hbs

@@ -0,0 +1,13 @@
+import { defaultViteConfig } from "@kestra-io/artifact-sdk";
+
+export default defaultViteConfig({
+  plugin: "{{pluginId}}",
+  exposes: {
+    "{{taskType}}": [
+      {
+        uiModule: "{{moduleValue}}",
+        path: "./src/components/{{componentName}}.vue",{{additionalProperties}}
+      },
+    ],
+  },
+});

package/templates/static/gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+storybook-static
+*.local

package/templates/static/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import "@kestra-io/artifact-sdk/style.css";
+import { initApp } from "@kestra-io/artifact-sdk";
+import App from "./App.vue";
+
+const appInstance = createApp(App);
+initApp(appInstance);
+appInstance.mount("#app");

package/templates/static/storybook-main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+};
+
+export default config;

package/templates/static/storybook-preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from "@storybook/vue3";
+import "@kestra-io/artifact-sdk/style.css";
+import { setup } from "@storybook/vue3";
+import { initApp } from "@kestra-io/artifact-sdk";
+
+setup((app) => {
+  initApp(app);
+});
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;