@w3kits-com/plugin-dreamifly 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# W3Kits Dreamifly Plugin
+
+Thin W3Kits plugin package extracted from the Dreamifly creative surface.
+
+V1 scope:
+
+- create image drafts
+- repair / upscale workflows
+- shared W3Kits locale bootstrap
+- W3Kits runtime-session AI calls
+- draft/history state in plugin storage
+- reference and output files persisted into the shared desktop VFS
+
+Out of scope:
+
+- hosted Dreamifly auth, billing, subscriptions, community, admin, and OSS flows
+- Dreamifly Postgres / Drizzle backend
+- direct provider ownership inside the plugin
+
+Build:
+
+```bash
+node scripts/prepare-dist.mjs
+```

package/dist/__w3kits/icon.svg

@@ -0,0 +1,8 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="36" y="28" width="184" height="200" rx="44" fill="#141319"/>
+  <path d="M75 84C75 63.0132 92.0132 46 113 46H160C173.255 46 184 56.7452 184 70V154C184 174.987 166.987 192 146 192H99C85.7452 192 75 181.255 75 168V84Z" fill="#F6F2EA"/>
+  <path d="M122.749 74.2C140.966 74.2 155.965 88.0515 157.771 105.797L157.943 109.194C157.943 127.411 144.091 142.41 126.347 144.216L122.749 144.388H116.581V169.2H98.6652V74.2H122.749ZM122.749 90.8848H116.581V127.703H122.749C132.528 127.703 139.972 120.259 139.972 110.479C139.972 100.956 132.913 93.6655 123.491 90.9978L122.749 90.8848Z" fill="#141319"/>
+  <path d="M151.48 124.23C169.143 124.23 183.461 138.548 183.461 156.211C183.461 173.874 169.143 188.192 151.48 188.192C133.817 188.192 119.499 173.874 119.499 156.211C119.499 138.548 133.817 124.23 151.48 124.23Z" fill="#8D7BFF"/>
+  <path d="M149.776 141.851L162.385 154.46L149.776 167.069" stroke="#F6F2EA" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M138.274 154.46H162.385" stroke="#F6F2EA" stroke-width="11" stroke-linecap="round"/>
+</svg>

package/dist/config.js

@@ -0,0 +1,166 @@
+export const DESKTOP_ROOT = "/.w3kits/desktop/files/Dreamifly";
+export const REFERENCE_DIR = `${DESKTOP_ROOT}/references`;
+export const OUTPUT_DIR = `${DESKTOP_ROOT}/outputs`;
+export const STATE_DRAFT_PATH = "state/draft.json";
+export const STATE_HISTORY_PATH = "state/history.json";
+
+export const IMAGE_MODELS = [
+  {
+    id: "gpt-image-2",
+    name: "GPT Image 2",
+    description: {
+      en: "OpenAI image generation and single-image editing.",
+      "zh-CN": "OpenAI 图像生成与单图编辑。",
+    },
+    supportsReference: true,
+    supportsGeneration: true,
+  },
+  {
+    id: "dall-e-3",
+    name: "DALL-E 3",
+    description: {
+      en: "OpenAI text-to-image generation.",
+      "zh-CN": "OpenAI 文生图模型。",
+    },
+    supportsReference: false,
+    supportsGeneration: true,
+  },
+];
+
+export const WORKFLOWS = [
+  {
+    id: "create",
+    title: {
+      en: "Create",
+      "zh-CN": "创作",
+    },
+    description: {
+      en: "Prompt-driven image generation.",
+      "zh-CN": "基于提示词的图像生成。",
+    },
+    requiresReference: false,
+    promptPrefix: "",
+  },
+  {
+    id: "repair",
+    title: {
+      en: "Repair",
+      "zh-CN": "修复",
+    },
+    description: {
+      en: "Repair the uploaded image while preserving the original composition.",
+      "zh-CN": "修复上传图片并尽量保留原始构图。",
+    },
+    requiresReference: true,
+    promptPrefix: {
+      en: "Repair and restore the uploaded image.",
+      "zh-CN": "修复并还原上传的图片。",
+    },
+  },
+  {
+    id: "upscale",
+    title: {
+      en: "Upscale",
+      "zh-CN": "放大",
+    },
+    description: {
+      en: "Enhance detail and clarity for the uploaded image.",
+      "zh-CN": "增强上传图片的细节与清晰度。",
+    },
+    requiresReference: true,
+    promptPrefix: {
+      en: "Upscale the uploaded image with cleaner detail and improved sharpness.",
+      "zh-CN": "放大上传图片并提升细节和锐度。",
+    },
+  },
+];
+
+export const SIZE_OPTIONS = [
+  { id: "square", label: "1:1", width: 1024, height: 1024 },
+  { id: "landscape", label: "16:9", width: 1536, height: 1024 },
+  { id: "portrait", label: "9:16", width: 1024, height: 1536 },
+];
+
+export const VIDEO_MODELS = [
+  {
+    id: "grok-video",
+    name: "Grok Video",
+    ready: false,
+  },
+  {
+    id: "veo",
+    name: "Veo",
+    ready: false,
+  },
+];
+
+export const COPY = {
+  en: {
+    appTitle: "Dreamifly",
+    subtitle: "W3Kits creative create/workflows surface",
+    workflowTitle: "Workflow",
+    modelTitle: "Image model",
+    promptTitle: "Prompt",
+    promptPlaceholder: "Describe the image you want to create or how to transform the reference.",
+    generate: "Generate",
+    generating: "Generating...",
+    referenceTitle: "Reference image",
+    referenceHint: "Stored in shared /home/agent VFS.",
+    clearReference: "Clear",
+    draftTitle: "Draft state",
+    draftSaved: "Drafts and history sync through W3Kits plugin storage.",
+    outputsTitle: "Recent outputs",
+    noOutputs: "No outputs yet.",
+    outputPath: "Saved path",
+    outputModel: "Model",
+    outputWorkflow: "Workflow",
+    statusReady: "Ready.",
+    statusLogin: "Login required.",
+    openLogin: "Open login",
+    missingPrompt: "Prompt is required.",
+    missingReference: "This workflow requires a reference image.",
+    videoTitle: "Reserved video models",
+    videoHint: "Reserved for the broader W3Kits video-provider contract.",
+    videoReserved: "Reserved provider",
+    openFolder: "Outputs write into /home/agent/Dreamifly/outputs.",
+  },
+  "zh-CN": {
+    appTitle: "Dreamifly",
+    subtitle: "W3Kits 创作 / 工作流切片",
+    workflowTitle: "工作流",
+    modelTitle: "图像模型",
+    promptTitle: "提示词",
+    promptPlaceholder: "描述你想生成的图像，或说明如何处理参考图。",
+    generate: "开始生成",
+    generating: "生成中...",
+    referenceTitle: "参考图",
+    referenceHint: "文件会保存到共享 /home/agent VFS。",
+    clearReference: "清除",
+    draftTitle: "草稿状态",
+    draftSaved: "草稿和历史记录通过 W3Kits 插件存储同步。",
+    outputsTitle: "最近输出",
+    noOutputs: "暂无输出。",
+    outputPath: "保存路径",
+    outputModel: "模型",
+    outputWorkflow: "工作流",
+    statusReady: "已就绪。",
+    statusLogin: "需要登录。",
+    openLogin: "打开登录",
+    missingPrompt: "请输入提示词。",
+    missingReference: "当前工作流需要参考图。",
+    videoTitle: "预留视频模型",
+    videoHint: "为更广义的 W3Kits 视频提供商协议预留。",
+    videoReserved: "预留提供商",
+    openFolder: "输出会写入 /home/agent/Dreamifly/outputs。",
+  },
+};
+
+export function localized(locale, value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") return value[locale] || value.en || "";
+  return "";
+}
+
+export function t(locale, key) {
+  return COPY[locale]?.[key] || COPY.en[key] || key;
+}

package/dist/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dreamifly</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

package/dist/main.js

@@ -0,0 +1,401 @@
+import {
+  DESKTOP_ROOT,
+  IMAGE_MODELS,
+  OUTPUT_DIR,
+  REFERENCE_DIR,
+  SIZE_OPTIONS,
+  STATE_DRAFT_PATH,
+  STATE_HISTORY_PATH,
+  VIDEO_MODELS,
+  WORKFLOWS,
+  localized,
+  t,
+} from "./config.js";
+import {
+  bootstrapLocale,
+  desktopMkdir,
+  desktopReadDataUrl,
+  desktopWriteDataUrl,
+  generateImage,
+  readPluginJson,
+  requestLogin,
+  setWindowTitle,
+  syncPluginStorage,
+  visibleDesktopPath,
+  writePluginJson,
+} from "./runtime.js";
+
+const locale = bootstrapLocale();
+setWindowTitle(`Dreamifly - ${localized(locale, WORKFLOWS[0].title)}`);
+
+const defaultState = {
+  locale,
+  workflowId: "create",
+  modelId: "gpt-image-2",
+  sizeId: "square",
+  prompt: "",
+  busy: false,
+  status: t(locale, "statusReady"),
+  reference: null,
+  history: [],
+};
+
+const state = { ...defaultState };
+const app = document.querySelector("#app");
+
+void bootstrap();
+
+async function bootstrap() {
+  try {
+    await Promise.all([
+      desktopMkdir(DESKTOP_ROOT),
+      desktopMkdir(REFERENCE_DIR),
+      desktopMkdir(OUTPUT_DIR),
+    ]);
+  } catch (error) {
+    state.status = error instanceof Error ? error.message : String(error);
+  }
+
+  const storedDraft = await readPluginJson(STATE_DRAFT_PATH, null);
+  const storedHistory = await readPluginJson(STATE_HISTORY_PATH, []);
+  if (storedDraft && typeof storedDraft === "object") {
+    Object.assign(state, sanitizeDraft(storedDraft));
+  }
+  if (Array.isArray(storedHistory)) {
+    state.history = storedHistory.filter(isHistoryRecord).slice(0, 12);
+  }
+
+  if (state.reference?.path) {
+    try {
+      const dataUrl = await desktopReadDataUrl(state.reference.path);
+      if (dataUrl) state.reference.dataUrl = dataUrl;
+    } catch {
+      state.reference = null;
+    }
+  }
+
+  render();
+}
+
+function sanitizeDraft(value) {
+  return {
+    workflowId: typeof value.workflowId === "string" ? value.workflowId : defaultState.workflowId,
+    modelId: typeof value.modelId === "string" ? value.modelId : defaultState.modelId,
+    sizeId: typeof value.sizeId === "string" ? value.sizeId : defaultState.sizeId,
+    prompt: typeof value.prompt === "string" ? value.prompt : "",
+    reference: sanitizeReference(value.reference),
+  };
+}
+
+function sanitizeReference(value) {
+  if (!value || typeof value !== "object") return null;
+  if (typeof value.path !== "string" || typeof value.name !== "string") return null;
+  return {
+    path: value.path,
+    name: value.name,
+    contentType: typeof value.contentType === "string" ? value.contentType : "image/png",
+    dataUrl: typeof value.dataUrl === "string" ? value.dataUrl : undefined,
+  };
+}
+
+function isHistoryRecord(value) {
+  return value && typeof value === "object" && typeof value.id === "string" && typeof value.path === "string";
+}
+
+function currentWorkflow() {
+  return WORKFLOWS.find((item) => item.id === state.workflowId) || WORKFLOWS[0];
+}
+
+function currentModel() {
+  return IMAGE_MODELS.find((item) => item.id === state.modelId) || IMAGE_MODELS[0];
+}
+
+function currentSize() {
+  return SIZE_OPTIONS.find((item) => item.id === state.sizeId) || SIZE_OPTIONS[0];
+}
+
+function escapeHtml(value) {
+  return String(value || "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+function render() {
+  const workflow = currentWorkflow();
+  const model = currentModel();
+  const promptMissing = !state.prompt.trim();
+  const referenceMissing = workflow.requiresReference && !state.reference?.dataUrl;
+  const disabled = state.busy || promptMissing || referenceMissing;
+
+  app.innerHTML = `
+    <main class="shell">
+      <section class="hero">
+        <div>
+          <h1>${escapeHtml(t(locale, "appTitle"))}</h1>
+          <p>${escapeHtml(t(locale, "subtitle"))}</p>
+        </div>
+        <div class="status-pill">${escapeHtml(state.status)}</div>
+      </section>
+      <section class="grid">
+        <div class="panel stack">
+          <div class="panel-head">
+            <h2>${escapeHtml(t(locale, "workflowTitle"))}</h2>
+            <span>${escapeHtml(t(locale, "openFolder"))}</span>
+          </div>
+          <div class="workflow-grid">
+            ${WORKFLOWS.map((item) => `
+              <button class="workflow-card${item.id === workflow.id ? " active" : ""}" data-workflow="${escapeHtml(item.id)}">
+                <strong>${escapeHtml(localized(locale, item.title))}</strong>
+                <span>${escapeHtml(localized(locale, item.description))}</span>
+              </button>
+            `).join("")}
+          </div>
+
+          <label class="field">
+            <span>${escapeHtml(t(locale, "modelTitle"))}</span>
+            <select id="model">
+              ${IMAGE_MODELS.map((item) => `
+                <option value="${escapeHtml(item.id)}" ${item.id === model.id ? "selected" : ""}>
+                  ${escapeHtml(item.name)}
+                </option>
+              `).join("")}
+            </select>
+            <small>${escapeHtml(localized(locale, model.description))}</small>
+          </label>
+
+          <div class="field-row">
+            <label class="field">
+              <span>Aspect</span>
+              <select id="size">
+                ${SIZE_OPTIONS.map((item) => `
+                  <option value="${escapeHtml(item.id)}" ${item.id === state.sizeId ? "selected" : ""}>
+                    ${escapeHtml(item.label)} · ${item.width}x${item.height}
+                  </option>
+                `).join("")}
+              </select>
+            </label>
+            <label class="field">
+              <span>${escapeHtml(t(locale, "referenceTitle"))}</span>
+              <input id="reference" type="file" accept="image/*" />
+              <small>${escapeHtml(t(locale, "referenceHint"))}</small>
+            </label>
+          </div>
+
+          <label class="field">
+            <span>${escapeHtml(t(locale, "promptTitle"))}</span>
+            <textarea id="prompt" rows="8" placeholder="${escapeHtml(t(locale, "promptPlaceholder"))}">${escapeHtml(state.prompt)}</textarea>
+          </label>
+
+          <div class="action-row">
+            <button id="generate" class="primary" ${disabled ? "disabled" : ""}>
+              ${escapeHtml(state.busy ? t(locale, "generating") : t(locale, "generate"))}
+            </button>
+            <button id="login" type="button">${escapeHtml(t(locale, "openLogin"))}</button>
+            <button id="clear-reference" type="button" ${state.reference ? "" : "disabled"}>${escapeHtml(t(locale, "clearReference"))}</button>
+          </div>
+
+          <div class="reference-card${state.reference ? " has-reference" : ""}">
+            ${
+              state.reference?.dataUrl
+                ? `<img src="${escapeHtml(state.reference.dataUrl)}" alt="${escapeHtml(state.reference.name)}" />
+                   <div>
+                     <strong>${escapeHtml(state.reference.name)}</strong>
+                     <span>${escapeHtml(visibleDesktopPath(state.reference.path))}</span>
+                   </div>`
+                : `<div>
+                     <strong>${escapeHtml(t(locale, "draftTitle"))}</strong>
+                     <span>${escapeHtml(t(locale, "draftSaved"))}</span>
+                   </div>`
+            }
+          </div>
+        </div>
+
+        <div class="panel stack">
+          <div class="panel-head">
+            <h2>${escapeHtml(t(locale, "outputsTitle"))}</h2>
+            <span>${escapeHtml(t(locale, "videoTitle"))}</span>
+          </div>
+          <div class="video-strip">
+            ${VIDEO_MODELS.map((item) => `
+              <div class="video-card">
+                <strong>${escapeHtml(item.name)}</strong>
+                <span>${escapeHtml(t(locale, "videoReserved"))}</span>
+              </div>
+            `).join("")}
+          </div>
+          <p class="video-hint">${escapeHtml(t(locale, "videoHint"))}</p>
+          <div class="history-list">
+            ${
+              state.history.length
+                ? state.history.map((item) => `
+                    <article class="history-card">
+                      <img src="${escapeHtml(item.previewDataUrl)}" alt="${escapeHtml(item.prompt)}" />
+                      <div class="history-copy">
+                        <strong>${escapeHtml(item.modelName)}</strong>
+                        <span>${escapeHtml(item.workflowName)}</span>
+                        <span>${escapeHtml(item.createdAt)}</span>
+                        <span>${escapeHtml(t(locale, "outputPath"))}: ${escapeHtml(visibleDesktopPath(item.path))}</span>
+                      </div>
+                    </article>
+                  `).join("")
+                : `<div class="empty">${escapeHtml(t(locale, "noOutputs"))}</div>`
+            }
+          </div>
+        </div>
+      </section>
+    </main>
+  `;
+
+  app.querySelectorAll("[data-workflow]").forEach((element) => {
+    element.addEventListener("click", async () => {
+      state.workflowId = element.getAttribute("data-workflow") || "create";
+      state.status = t(locale, "statusReady");
+      await persistDraft();
+      render();
+    });
+  });
+
+  app.querySelector("#model")?.addEventListener("change", async (event) => {
+    state.modelId = event.target.value;
+    await persistDraft();
+    render();
+  });
+
+  app.querySelector("#size")?.addEventListener("change", async (event) => {
+    state.sizeId = event.target.value;
+    await persistDraft();
+  });
+
+  app.querySelector("#prompt")?.addEventListener("input", async (event) => {
+    state.prompt = event.target.value;
+    await persistDraft();
+  });
+
+  app.querySelector("#login")?.addEventListener("click", () => {
+    requestLogin("plugin_runtime");
+  });
+
+  app.querySelector("#clear-reference")?.addEventListener("click", async () => {
+    state.reference = null;
+    await persistDraft();
+    render();
+  });
+
+  app.querySelector("#reference")?.addEventListener("change", async (event) => {
+    const [file] = event.target.files || [];
+    if (!file) return;
+    const dataUrl = await fileToDataUrl(file);
+    const safeName = `${Date.now()}-${sanitizeFileName(file.name)}`;
+    const path = `${REFERENCE_DIR}/${safeName}`;
+    await desktopWriteDataUrl(path, dataUrl);
+    state.reference = {
+      path,
+      name: file.name,
+      contentType: file.type || "image/png",
+      dataUrl,
+    };
+    state.status = visibleDesktopPath(path);
+    await persistDraft();
+    render();
+  });
+
+  app.querySelector("#generate")?.addEventListener("click", () => {
+    void handleGenerate();
+  });
+}
+
+async function handleGenerate() {
+  const workflow = currentWorkflow();
+  const model = currentModel();
+  const size = currentSize();
+  const promptText = state.prompt.trim();
+  if (!promptText) {
+    state.status = t(locale, "missingPrompt");
+    render();
+    return;
+  }
+  if (workflow.requiresReference && !state.reference?.dataUrl) {
+    state.status = t(locale, "missingReference");
+    render();
+    return;
+  }
+
+  const workflowPrefix = localized(locale, workflow.promptPrefix);
+  const finalPrompt = workflowPrefix ? `${workflowPrefix}\n\n${promptText}` : promptText;
+
+  state.busy = true;
+  state.status = t(locale, "generating");
+  render();
+
+  try {
+    const previewDataUrl = await generateImage({
+      model: model.id,
+      prompt: finalPrompt,
+      width: size.width,
+      height: size.height,
+      referenceDataUrl: state.reference?.dataUrl || null,
+    });
+
+    const fileName = `${Date.now()}-${sanitizeFileName(model.id)}.png`;
+    const path = `${OUTPUT_DIR}/${fileName}`;
+    await desktopWriteDataUrl(path, previewDataUrl);
+
+    const record = {
+      id: crypto.randomUUID(),
+      path,
+      previewDataUrl,
+      modelId: model.id,
+      modelName: model.name,
+      workflowId: workflow.id,
+      workflowName: localized(locale, workflow.title),
+      prompt: promptText,
+      createdAt: new Date().toISOString(),
+    };
+
+    state.history = [record, ...state.history].slice(0, 12);
+    state.status = visibleDesktopPath(path);
+    await Promise.all([persistDraft(), persistHistory()]);
+  } catch (error) {
+    state.status = error instanceof Error ? error.message : String(error);
+  } finally {
+    state.busy = false;
+    render();
+  }
+}
+
+async function persistDraft() {
+  await writePluginJson(STATE_DRAFT_PATH, {
+    workflowId: state.workflowId,
+    modelId: state.modelId,
+    sizeId: state.sizeId,
+    prompt: state.prompt,
+    reference: state.reference
+      ? {
+          path: state.reference.path,
+          name: state.reference.name,
+          contentType: state.reference.contentType,
+        }
+      : null,
+  });
+  await syncPluginStorage();
+}
+
+async function persistHistory() {
+  await writePluginJson(STATE_HISTORY_PATH, state.history);
+  await syncPluginStorage();
+}
+
+function sanitizeFileName(value) {
+  return String(value || "asset").toLowerCase().replace(/[^a-z0-9._-]+/g, "-");
+}
+
+function fileToDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("file_read_failed"));
+    reader.readAsDataURL(file);
+  });
+}

package/dist/runtime.js

@@ -0,0 +1,319 @@
+const W3KITS_PLUGIN_ID = "dreamifly";
+const W3KITS_BRIDGE_VERSION = 1;
+const W3KITS_RESPONSE = "W3KITS_RESPONSE";
+const W3KITS_AUTH_REQUIRED = "W3KITS_AUTH_REQUIRED";
+const W3KITS_RUNTIME_SESSION_REQUEST = "W3KITS_RUNTIME_SESSION_REQUEST";
+const W3KITS_STORAGE_READ = "W3KITS_STORAGE_READ";
+const W3KITS_STORAGE_WRITE = "W3KITS_STORAGE_WRITE";
+const W3KITS_STORAGE_SYNC = "W3KITS_STORAGE_SYNC";
+const W3KITS_DESKTOP_FS_READ = "W3KITS_DESKTOP_FS_READ";
+const W3KITS_DESKTOP_FS_WRITE = "W3KITS_DESKTOP_FS_WRITE";
+const W3KITS_DESKTOP_FS_MKDIR = "W3KITS_DESKTOP_FS_MKDIR";
+const W3KITS_WINDOW_TITLE = "W3KITS_WINDOW_TITLE";
+const LOCALE_STORAGE_KEY = "dreamifly.w3kits.locale";
+
+let cachedRuntimeSession = null;
+
+function queryParam(name) {
+  return new URL(window.location.href).searchParams.get(name);
+}
+
+function normalizeLocale(value) {
+  if (!value) return null;
+  const normalized = value.toLowerCase();
+  if (normalized.startsWith("zh")) return "zh-CN";
+  if (normalized.startsWith("en")) return "en";
+  return null;
+}
+
+function getParentOrigin() {
+  const explicit = queryParam("w3kitsParentOrigin");
+  if (explicit) return explicit;
+  const fallback = queryParam("openaiBaseUrl") || queryParam("w3kitsOpenAiBaseUrl");
+  if (fallback) {
+    try {
+      return new URL(fallback).origin;
+    } catch {
+      return "https://w3kits.com";
+    }
+  }
+  return "https://w3kits.com";
+}
+
+function bridgeRequest(message, timeoutMs = 20000) {
+  if (window.parent === window) {
+    return Promise.reject(new Error("W3Kits runtime bridge is unavailable."));
+  }
+
+  const requestId = `dreamifly-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  const parentOrigin = getParentOrigin();
+
+  return new Promise((resolve, reject) => {
+    const timeout = window.setTimeout(() => {
+      window.removeEventListener("message", onMessage);
+      reject(new Error("W3Kits runtime bridge timed out."));
+    }, timeoutMs);
+
+    const onMessage = (event) => {
+      if (event.source !== window.parent) return;
+      if (event.origin !== parentOrigin) return;
+      const data = event.data;
+      if (!data || data.type !== W3KITS_RESPONSE || data.requestId !== requestId) return;
+
+      window.clearTimeout(timeout);
+      window.removeEventListener("message", onMessage);
+
+      if (data.ok) {
+        resolve(data.data);
+        return;
+      }
+
+      const message = data?.error?.message || data?.error?.code || "W3Kits runtime bridge failed.";
+      reject(new Error(message));
+    };
+
+    window.addEventListener("message", onMessage);
+    window.parent.postMessage({ ...message, version: W3KITS_BRIDGE_VERSION, requestId }, parentOrigin);
+  });
+}
+
+export function bootstrapLocale() {
+  const queryLocale = normalizeLocale(queryParam("w3kitsLocale"));
+  const storedLocale = normalizeLocale(window.localStorage.getItem(LOCALE_STORAGE_KEY));
+  const browserLocale =
+    normalizeLocale(window.navigator.language) ||
+    normalizeLocale(window.navigator.languages?.[0]);
+  const locale = queryLocale || storedLocale || browserLocale || "en";
+
+  window.localStorage.setItem(LOCALE_STORAGE_KEY, locale);
+  document.documentElement.lang = locale;
+  return locale;
+}
+
+export function setWindowTitle(title) {
+  if (window.parent === window) return;
+  window.parent.postMessage(
+    {
+      type: W3KITS_WINDOW_TITLE,
+      version: W3KITS_BRIDGE_VERSION,
+      pluginId: W3KITS_PLUGIN_ID,
+      title,
+    },
+    getParentOrigin(),
+  );
+}
+
+export function requestLogin(reason = "plugin_runtime") {
+  if (window.parent === window) return;
+  window.parent.postMessage(
+    {
+      type: W3KITS_AUTH_REQUIRED,
+      version: W3KITS_BRIDGE_VERSION,
+      pluginId: W3KITS_PLUGIN_ID,
+      reason,
+    },
+    getParentOrigin(),
+  );
+}
+
+export async function getRuntimeSession() {
+  const now = Date.now();
+  if (cachedRuntimeSession && cachedRuntimeSession.expiresAt - now > 30000) {
+    return cachedRuntimeSession.value;
+  }
+
+  const session = await bridgeRequest({
+    type: W3KITS_RUNTIME_SESSION_REQUEST,
+    pluginId: W3KITS_PLUGIN_ID,
+    origin: window.location.origin,
+  });
+
+  cachedRuntimeSession = {
+    value: session,
+    expiresAt: now + Math.max(30, (session.expiresIn || 60) - 30) * 1000,
+  };
+  return session;
+}
+
+function runtimeHeaders(session, includeJsonContentType = true) {
+  const headers = {};
+  if (includeJsonContentType) headers["Content-Type"] = "application/json";
+  headers["x-w3kits-runtime-session"] = session.token;
+  headers["x-w3kits-plugin-id"] = session.pluginId || W3KITS_PLUGIN_ID;
+  headers["x-w3kits-plugin-version"] = session.pluginVersion;
+
+  for (const [key, value] of Object.entries(session.identityHeaders || {})) {
+    if (typeof value === "string" && value) headers[key] = value;
+  }
+
+  if (session.packageName) headers["x-w3kits-plugin-package"] = session.packageName;
+  if (session.packageIntegrity) headers["x-w3kits-plugin-integrity"] = session.packageIntegrity;
+  return headers;
+}
+
+export async function readPluginJson(path, fallback) {
+  try {
+    const result = await bridgeRequest({
+      type: W3KITS_STORAGE_READ,
+      pluginId: W3KITS_PLUGIN_ID,
+      path,
+    });
+    if (!result?.body) return fallback;
+    return JSON.parse(result.body);
+  } catch (error) {
+    const message = error instanceof Error ? error.message.toLowerCase() : "";
+    if (message.includes("not_found")) return fallback;
+    throw error;
+  }
+}
+
+export async function writePluginJson(path, value) {
+  return bridgeRequest({
+    type: W3KITS_STORAGE_WRITE,
+    pluginId: W3KITS_PLUGIN_ID,
+    path,
+    body: JSON.stringify(value, null, 2),
+    contentType: "application/json",
+  });
+}
+
+export async function syncPluginStorage() {
+  return bridgeRequest({
+    type: W3KITS_STORAGE_SYNC,
+    pluginId: W3KITS_PLUGIN_ID,
+  });
+}
+
+export async function desktopMkdir(path) {
+  return bridgeRequest({
+    type: W3KITS_DESKTOP_FS_MKDIR,
+    pluginId: W3KITS_PLUGIN_ID,
+    path,
+  });
+}
+
+export async function desktopReadDataUrl(path) {
+  const result = await bridgeRequest({
+    type: W3KITS_DESKTOP_FS_READ,
+    pluginId: W3KITS_PLUGIN_ID,
+    path,
+  });
+  if (result?.bodyBase64) {
+    return `data:${result.contentType || "application/octet-stream"};base64,${result.bodyBase64}`;
+  }
+  if (typeof result?.body === "string" && result.body) {
+    return result.body;
+  }
+  return null;
+}
+
+export async function desktopWriteDataUrl(path, dataUrl) {
+  const parsed = parseDataUrl(dataUrl);
+  return bridgeRequest({
+    type: W3KITS_DESKTOP_FS_WRITE,
+    pluginId: W3KITS_PLUGIN_ID,
+    path,
+    bodyBase64: parsed.base64,
+    contentType: parsed.contentType,
+  });
+}
+
+function parseDataUrl(dataUrl) {
+  const match = /^data:([^;,]+);base64,(.*)$/u.exec(dataUrl || "");
+  if (!match) {
+    throw new Error("invalid_data_url");
+  }
+  return {
+    contentType: match[1],
+    base64: match[2].replace(/\s/g, ""),
+  };
+}
+
+async function fetchImageAsDataUrl(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to download generated asset (${response.status}).`);
+  }
+  const blob = await response.blob();
+  return blobToDataUrl(blob);
+}
+
+function blobToDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("file_read_failed"));
+    reader.readAsDataURL(blob);
+  });
+}
+
+function isLoginRequired(payload, status) {
+  if (status === 401) return true;
+  const code = payload?.error?.code || payload?.error || payload?.code;
+  return code === "login_required" || code === "plugin_runtime_session_required" || code === "invalid_plugin_runtime_session";
+}
+
+export async function generateImage({ model, prompt, width, height, referenceDataUrl }) {
+  const session = await getRuntimeSession();
+  const baseUrl = String(session.openaiBaseUrl || queryParam("openaiBaseUrl") || "/api/ai/openai/v1").replace(/\/+$/, "");
+
+  if (referenceDataUrl && model === "gpt-image-2") {
+    const formData = new FormData();
+    const parsed = parseDataUrl(referenceDataUrl);
+    const binary = atob(parsed.base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+    formData.append("model", model);
+    formData.append("prompt", prompt);
+    formData.append("n", "1");
+    formData.append("size", `${width}x${height}`);
+    formData.append("image", new Blob([bytes], { type: parsed.contentType }), "reference.png");
+
+    const response = await fetch(`${baseUrl}/images/edits`, {
+      method: "POST",
+      headers: runtimeHeaders(session, false),
+      body: formData,
+    });
+    const payload = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      if (isLoginRequired(payload, response.status)) requestLogin("ai_request");
+      throw new Error(payload?.error?.message || payload?.message || `Image edit failed (${response.status}).`);
+    }
+    return readImageResult(payload);
+  }
+
+  const response = await fetch(`${baseUrl}/images/generations`, {
+    method: "POST",
+    headers: runtimeHeaders(session, true),
+    body: JSON.stringify({
+      model,
+      prompt,
+      n: 1,
+      size: `${width}x${height}`,
+    }),
+  });
+  const payload = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    if (isLoginRequired(payload, response.status)) requestLogin("ai_request");
+    throw new Error(payload?.error?.message || payload?.message || `Image generation failed (${response.status}).`);
+  }
+  return readImageResult(payload);
+}
+
+async function readImageResult(payload) {
+  const asset = Array.isArray(payload?.data) ? payload.data[0] : null;
+  if (!asset) {
+    throw new Error("Generated response missing image data.");
+  }
+  if (asset.b64_json) {
+    return `data:image/png;base64,${asset.b64_json}`;
+  }
+  if (asset.url) {
+    return fetchImageAsDataUrl(asset.url);
+  }
+  throw new Error("Generated response missing b64_json/url.");
+}
+
+export function visibleDesktopPath(path) {
+  return String(path || "").replace(/^\/\.w3kits\/desktop\/files/, "/home/agent");
+}

package/dist/styles.css

@@ -0,0 +1,280 @@
+:root {
+  color-scheme: dark;
+  --bg: #0f1013;
+  --panel: #17191f;
+  --panel-2: #1f232b;
+  --border: rgba(255, 255, 255, 0.08);
+  --text: #f4f5f7;
+  --muted: #aeb5c2;
+  --accent: #8d7bff;
+  --accent-2: #4cc2ff;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  background:
+    radial-gradient(circle at top right, rgba(141, 123, 255, 0.18), transparent 28%),
+    radial-gradient(circle at bottom left, rgba(76, 194, 255, 0.14), transparent 26%),
+    var(--bg);
+  color: var(--text);
+  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button,
+select,
+input,
+textarea {
+  color: inherit;
+}
+
+button {
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  border-radius: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button.primary {
+  background: linear-gradient(135deg, var(--accent), #6f67ff);
+  border-color: transparent;
+  color: #fff;
+  min-width: 132px;
+}
+
+select,
+input[type="file"],
+textarea {
+  width: 100%;
+  background: #11131a;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 12px;
+}
+
+textarea {
+  resize: vertical;
+  min-height: 160px;
+}
+
+.shell {
+  padding: 18px;
+}
+
+.hero,
+.grid {
+  display: grid;
+  gap: 16px;
+}
+
+.hero {
+  grid-template-columns: 1fr auto;
+  align-items: end;
+  margin-bottom: 16px;
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: 28px;
+}
+
+.hero p {
+  margin: 6px 0 0;
+  color: var(--muted);
+}
+
+.status-pill {
+  align-self: start;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 8px 12px;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.grid {
+  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
+}
+
+.panel {
+  border: 1px solid var(--border);
+  background: rgba(23, 25, 31, 0.92);
+  border-radius: 18px;
+  padding: 16px;
+  min-height: 0;
+}
+
+.stack {
+  display: grid;
+  gap: 14px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.panel-head h2 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.panel-head span,
+.field small,
+.video-hint,
+.empty,
+.history-copy span,
+.reference-card span {
+  color: var(--muted);
+}
+
+.workflow-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.workflow-card {
+  display: grid;
+  gap: 6px;
+  text-align: left;
+  min-height: 104px;
+}
+
+.workflow-card.active {
+  border-color: rgba(141, 123, 255, 0.8);
+  box-shadow: inset 0 0 0 1px rgba(141, 123, 255, 0.35);
+}
+
+.field,
+.field-row {
+  display: grid;
+  gap: 8px;
+}
+
+.field-row {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.action-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.reference-card {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.025);
+  border: 1px dashed var(--border);
+}
+
+.reference-card.has-reference {
+  grid-template-columns: 112px 1fr;
+  align-items: center;
+}
+
+.reference-card img {
+  width: 112px;
+  height: 112px;
+  object-fit: cover;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+}
+
+.video-strip {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.video-card,
+.empty {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.history-list {
+  display: grid;
+  gap: 10px;
+  max-height: 640px;
+  overflow: auto;
+}
+
+.history-card {
+  display: grid;
+  grid-template-columns: 132px 1fr;
+  gap: 12px;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.history-card img {
+  width: 132px;
+  height: 132px;
+  object-fit: cover;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+}
+
+.history-copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.history-copy strong,
+.history-copy span,
+.reference-card strong,
+.reference-card span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 1080px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  .workflow-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .field-row,
+  .video-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .history-card,
+  .reference-card.has-reference {
+    grid-template-columns: 1fr;
+  }
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@w3kits-com/plugin-dreamifly",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "W3Kits Dreamifly plugin extracted from the Dreamifly creative create/workflows surface.",
+  "license": "UNLICENSED",
+  "author": "W3Kits",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/W3Kits/Dreamifly.git"
+  },
+  "homepage": "https://github.com/W3Kits/Dreamifly#readme",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "build": "node scripts/prepare-dist.mjs",
+    "prepare:dist": "node scripts/prepare-dist.mjs",
+    "pack:dry-run": "npm pack --json --dry-run",
+    "pack:artifact": "npm pack --json"
+  }
+}