create-windy 0.8.3 → 0.9.1

package/template/apps/agent-server/plugins/branding/client.js

@@ -0,0 +1,338 @@
+/* Native DSH Client module; shared React comes from the upstream shell. */
+window.__ModuleLoader__.load({
+  id: "@southwind-ai/dsh-branding",
+  factory(require) {
+    const React = require("react");
+    const fallback = Object.freeze({
+      softwareName: "Windy",
+      description: "处理授权资料并交付可核验的工作成果",
+    });
+    const upstreamTitle = "DeepSeek Harness";
+
+    // Match Admin's PNG/JPEG/WebP data contract; SVG is accepted as an HTTP image,
+    // never as user-controlled inline markup or an embedded data SVG document.
+    function allowedLogo(value, origin) {
+      if (typeof value !== "string" || !value.trim()) return undefined;
+      const logo = value.trim();
+      if (logo.startsWith("data:")) {
+        return logo.length <= 1_398_128 &&
+          /^data:image\/(png|jpeg|webp);base64,[a-z\d+/]+={0,2}$/i.test(logo)
+          ? logo
+          : undefined;
+      }
+      if (
+        logo.length > 2048 ||
+        [...logo].some(
+          (char) =>
+            char.charCodeAt(0) <= 32 ||
+            char.charCodeAt(0) === 127 ||
+            char === "\\",
+        )
+      )
+        return undefined;
+      try {
+        const url = new URL(logo, origin);
+        if (url.username || url.password) return undefined;
+        if (
+          logo.startsWith("/") &&
+          !logo.startsWith("//") &&
+          url.origin === origin
+        )
+          return logo;
+        return /^https?:\/\//i.test(logo) ? url.href : undefined;
+      } catch {
+        return undefined;
+      }
+    }
+
+    function normalizeBranding(value, origin) {
+      if (!value || typeof value !== "object" || Array.isArray(value))
+        return fallback;
+      const softwareName =
+        typeof value.softwareName === "string" ? value.softwareName.trim() : "";
+      if (!softwareName || softwareName.length > 120) return fallback;
+      const logoUrl = allowedLogo(value.logoUrl, origin);
+      const description =
+        typeof value.description === "string" ? value.description.trim() : "";
+      return Object.freeze({
+        softwareName,
+        ...(logoUrl ? { logoUrl } : {}),
+        description:
+          description && description.length <= 500
+            ? description
+            : fallback.description,
+      });
+    }
+
+    function brandedTitle(raw, name, previousName = name) {
+      const label = name;
+      const legacyLabel = `${previousName} · 智能文档工作台`;
+      for (const product of [upstreamTitle, legacyLabel, previousName, name]) {
+        if (!raw || raw === product) return label;
+        const suffix = ` — ${product}`;
+        if (raw.endsWith(suffix))
+          return `${raw.slice(0, -suffix.length)} — ${label}`;
+      }
+      return `${raw} — ${label}`;
+    }
+
+    function installMetadata(getBrand) {
+      const originalTitle = document.title;
+      const icons = [...document.querySelectorAll('link[rel="icon"]')];
+      if (!icons.length) {
+        const icon = document.createElement("link");
+        icon.rel = "icon";
+        document.head.append(icon);
+        icons.push(icon);
+      }
+      const originalIcons = icons.map((icon) => ({
+        icon,
+        href: icon.getAttribute("href"),
+        type: icon.getAttribute("type"),
+      }));
+      let description = document.querySelector('meta[name="description"]');
+      const hadDescription = Boolean(description);
+      const originalDescription = description?.getAttribute("content");
+      if (!description) {
+        description = document.createElement("meta");
+        description.name = "description";
+        document.head.append(description);
+      }
+      let previousName = agentTitle;
+      function render() {
+        const brand = getBrand();
+        const next = brandedTitle(document.title, agentTitle, previousName);
+        if (document.title !== next) document.title = next;
+        previousName = agentTitle;
+        description.content = brand.description || "";
+        for (const icon of icons) {
+          icon.href = brand.logoUrl || defaultIcon;
+          const mime = /^data:(image\/[^;]+);/.exec(icon.href)?.[1];
+          if (mime) icon.type = mime;
+          else icon.removeAttribute("type");
+        }
+      }
+      // alpha.3 hardcodes its product title inside AppFrame. Observe only title
+      // mutations and replace its exact suffix; keep the native session prefix.
+      const observer = new MutationObserver(render);
+      const title = document.querySelector("title");
+      if (title)
+        observer.observe(title, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+        });
+      render();
+      return {
+        render,
+        dispose() {
+          observer.disconnect();
+          document.title = originalTitle;
+          if (!hadDescription) description.remove();
+          else description.content = originalDescription || "";
+          for (const { icon, href, type } of originalIcons) {
+            if (href === null) icon.remove();
+            else {
+              icon.href = href;
+              if (type === null) icon.removeAttribute("type");
+              else icon.type = type;
+            }
+          }
+        },
+      };
+    }
+
+    // alpha.3 owns the surrounding button. Adapt only the wide brand seat,
+    // avoiding nested interactive elements and leaving the collapsed toggle.
+    function bindHome(mark, name) {
+      const button = mark?.closest("button");
+      if (!button?.querySelector('[data-slot="sidebar.brand.name"]')) return;
+      const attributes = ["role", "aria-label", "aria-keyshortcuts"];
+      const before = attributes.map((key) => button.getAttribute(key));
+      button.setAttribute("role", "link");
+      button.setAttribute("aria-label", `在新标签页打开${name}首页`);
+      button.removeAttribute("aria-keyshortcuts");
+      button.classList.add("windy-dsh-home");
+      const open = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        window.open(
+          new URL("/", document.baseURI).href,
+          "_blank",
+          "noopener,noreferrer",
+        );
+      };
+      button.addEventListener("click", open, true);
+      return () => {
+        button.removeEventListener("click", open, true);
+        button.classList.remove("windy-dsh-home");
+        attributes.forEach((key, index) =>
+          before[index] === null
+            ? button.removeAttribute(key)
+            : button.setAttribute(key, before[index]),
+        );
+      };
+    }
+
+    function apply(ctx) {
+      let current = fallback;
+      const listeners = new Set();
+      const subscribe = (callback) => {
+        listeners.add(callback);
+        return () => listeners.delete(callback);
+      };
+      const useBrand = () =>
+        React.useSyncExternalStore(
+          subscribe,
+          () => current,
+          () => fallback,
+        );
+
+      function BrandMark({ size, className }) {
+        const brand = useBrand();
+        const [failures, setFailures] = React.useState(0);
+        React.useEffect(() => setFailures(0), [brand.logoUrl]);
+        const custom = brand.logoUrl && failures === 0;
+        const style = {
+          width: size,
+          height: size,
+          background: "transparent",
+          objectFit: "contain",
+          flex: "none",
+        };
+        if (custom && failures === 0)
+          return React.createElement("img", {
+            className: `windy-dsh-brand-mark ${custom ? "" : "windy-dsh-default-mark"} ${className || ""}`,
+            style,
+            src: brand.logoUrl,
+            alt: brand.softwareName,
+            referrerPolicy: "no-referrer",
+            onError: () => setFailures(custom ? 1 : 2),
+          });
+        return React.createElement(
+          "span",
+          {
+            className: `windy-dsh-brand-fallback ${className || ""}`,
+            style: {
+              ...style,
+              fontSize: Math.max(10, Math.round(size * 0.42)),
+            },
+            role: "img",
+            "aria-label": brand.softwareName,
+          },
+          brand.softwareName.slice(0, 2),
+        );
+      }
+
+      function BrandName() {
+        const brand = useBrand();
+        return React.createElement(
+          "span",
+          { className: "windy-dsh-brand-name" },
+          `${brand.softwareName} Agent`,
+        );
+      }
+
+      function HeroBrand() {
+        const brand = useBrand();
+        return React.createElement(
+          "span",
+          { className: "windy-dsh-hero-brand" },
+          React.createElement(BrandMark, { size: 64 }),
+          React.createElement(
+            "span",
+            { className: "windy-dsh-slogan" },
+            `${brand.softwareName} Agent`,
+          ),
+          React.createElement(
+            "span",
+            { className: "windy-dsh-hero-description" },
+            brand.description,
+          ),
+        );
+      }
+
+      function SidebarMark(props) {
+        const brand = useBrand();
+        const ref = React.useRef(null);
+        React.useEffect(
+          () => bindHome(ref.current, brand.softwareName),
+          [brand.softwareName],
+        );
+        return React.createElement(
+          "span",
+          { ref },
+          React.createElement(BrandMark, props),
+        );
+      }
+
+      ctx.slots.inject("sidebar.brand.mark", () =>
+        ctx.slots.inject("sidebar.brand.name", function* () {
+          yield ctx.slots.register({ name: "sidebar.brand.mark" }, SidebarMark);
+          yield ctx.slots.register({ name: "sidebar.brand.name" }, BrandName);
+        }),
+      );
+      ctx.slots.inject("conversation.hero.brand.mark", () =>
+        ctx.slots.register({ name: "conversation.hero.brand.mark" }, HeroBrand),
+      );
+
+      ctx.effect(() => {
+        let active = true;
+        let pending;
+        const metadata = installMetadata(() => current);
+        window.dispatchEvent(new Event("windy-workbench-ready"));
+        async function refresh() {
+          pending?.abort();
+          const controller = new AbortController();
+          pending = controller;
+          const timeout = setTimeout(() => controller.abort(), 5000);
+          try {
+            const response = await fetch(
+              new URL("windy/branding", document.baseURI),
+              {
+                credentials: "same-origin",
+                cache: "no-store",
+                signal: controller.signal,
+              },
+            );
+            if (!response.ok) return;
+            const next = normalizeBranding(
+              await response.json(),
+              location.origin,
+            );
+            if (!active || controller.signal.aborted) return;
+            current = next;
+            for (const notify of listeners) notify();
+            metadata.render();
+          } catch {
+            // Brand availability never disables the native workbench.
+          } finally {
+            clearTimeout(timeout);
+          }
+        }
+        const visible = () => {
+          if (document.visibilityState === "visible") void refresh();
+        };
+        window.addEventListener("focus", visible);
+        document.addEventListener("visibilitychange", visible);
+        void refresh();
+        return () => {
+          active = false;
+          pending?.abort();
+          window.removeEventListener("focus", visible);
+          document.removeEventListener("visibilitychange", visible);
+          metadata.dispose();
+          listeners.clear();
+        };
+      }, "windy-branding.metadata");
+    }
+
+    return {
+      inject: ["slots"],
+      apply,
+      normalizeBranding,
+      brandedTitle,
+      bindHome,
+    };
+  },
+});

package/template/apps/agent-server/plugins/branding/index.mjs

@@ -0,0 +1,35 @@
+import { readFileSync } from "node:fs";
+import { loadingShell, loadingScript } from "./loading.mjs";
+
+export const name = "windy-branding";
+export const inject = ["webServer"];
+const brandStyles = readFileSync(
+  new URL("./brand.css", import.meta.url),
+  "utf8",
+);
+const title = "Windy Agent";
+
+export function restyleIndex(html) {
+  return html.replace(/<title>[^<]*<\/title>/i, `<title>${title}</title>`);
+}
+
+/** Native Host hooks leave static assets, API, layout and button owners intact. */
+export function apply(ctx) {
+  ctx.on("webserver/index-inject", (table) => {
+    table.push({ kind: "html", placement: "body", html: loadingShell });
+    table.push({ kind: "script", placement: "body", text: loadingScript });
+    table.push({
+      kind: "style",
+      text: brandStyles,
+    });
+    table.push({
+      kind: "html",
+      placement: "head",
+      html: '<meta name="color-scheme" content="light dark">',
+    });
+  });
+  ctx.effect(
+    () => ctx.webServer.tapIndex(restyleIndex),
+    "windy-branding.index",
+  );
+}

package/template/apps/agent-server/plugins/branding/loading.d.mts

@@ -0,0 +1,2 @@
+export const loadingShell: string;
+export const loadingScript: string;

package/template/apps/agent-server/plugins/branding/loading.mjs

@@ -0,0 +1,66 @@
+import { themeTokens } from "../theme/index.mjs";
+
+// Windy's Web entry has no pre-rendered loader. This native status panel uses
+// the same generated semantic tokens, without another palette or preferences.
+const colors = (mode) =>
+  Object.entries({
+    background: "--dsw-alias-bg-base",
+    foreground: "--dsw-alias-label-primary",
+    muted: "--dsw-alias-label-secondary",
+    border: "--dsw-alias-border-l1",
+    primary: "--dsw-alias-brand-primary",
+  })
+    .map(
+      ([name, token]) => `--windy-loading-${name}:${themeTokens[token][mode]};`,
+    )
+    .join("");
+
+export const loadingShell = `<style id="windy-loading-style">
+#app-loading { ${colors("light")} position:fixed; inset:0; z-index:2147483646; display:grid; place-items:center; padding:24px; background:var(--windy-loading-background); color:var(--windy-loading-foreground); font-family:system-ui,sans-serif; }
+@media (prefers-color-scheme:dark) { #app-loading { ${colors("dark")} } }
+#app-loading .app-loading__content { display:grid; justify-items:center; gap:16px; max-width:30rem; text-align:center; }
+#app-loading .app-loading__indicator { width:32px; height:32px; border:2px solid var(--windy-loading-border); border-top-color:var(--windy-loading-primary); border-radius:50%; animation:windy-loading-spin 1s linear infinite; }
+#app-loading .app-loading__title { margin:0; font-size:18px; font-weight:600; }
+#app-loading .app-loading__description { margin:0; color:var(--windy-loading-muted); font-size:14px; line-height:1.6; }
+#app-loading .app-loading__retry { min-height:40px; padding:8px 16px; border:1px solid var(--windy-loading-border); border-radius:${themeTokens["--dsw-radius-lg"].light}; color:inherit; background:transparent; cursor:pointer; }
+#app-loading .app-loading__retry:focus-visible { outline:2px solid var(--windy-loading-primary); outline-offset:3px; }
+#app-loading[data-state="error"] .app-loading__indicator { display:none; }
+@keyframes windy-loading-spin { to { transform:rotate(360deg); } }
+@media (prefers-reduced-motion:reduce) { #app-loading .app-loading__indicator { animation:none; } }
+</style>
+<section id="app-loading" role="status" aria-live="polite" aria-busy="true">
+  <div class="app-loading__content">
+    <span class="app-loading__indicator" aria-hidden="true"></span>
+    <h1 class="app-loading__title">正在加载工作台…</h1>
+    <p class="app-loading__description">连接成功后即可继续工作。</p>
+  </div>
+</section>`;
+
+export const loadingScript = `(() => {
+  const shell = document.getElementById("app-loading");
+  if (!shell) return;
+  const fail = () => {
+    if (!shell.isConnected || shell.dataset.state === "error") return;
+    shell.dataset.state = "error";
+    shell.setAttribute("role", "alert");
+    shell.setAttribute("aria-busy", "false");
+    shell.querySelector(".app-loading__title").textContent = "工作台加载失败";
+    shell.querySelector(".app-loading__description").textContent = "请检查连接后手动重新加载。";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "app-loading__retry";
+    button.textContent = "重新加载";
+    button.onclick = () => location.reload();
+    shell.querySelector(".app-loading__content").append(button);
+  };
+  const timer = setTimeout(fail, 30000);
+  window.addEventListener("error", fail);
+  window.addEventListener("unhandledrejection", fail);
+  window.addEventListener("windy-workbench-ready", () => {
+    clearTimeout(timer);
+    window.removeEventListener("error", fail);
+    window.removeEventListener("unhandledrejection", fail);
+    shell.remove();
+    document.getElementById("windy-loading-style")?.remove();
+  }, { once: true });
+})();`;

package/template/apps/agent-server/plugins/branding/loading.test.ts

@@ -0,0 +1,89 @@
+import { expect, test } from "bun:test";
+import { runInNewContext } from "node:vm";
+import { loadingShell, loadingScript } from "./loading.mjs";
+import { themeTokens } from "../theme/index.mjs";
+
+test("native loading status uses the existing semantic theme without a business renderer", () => {
+  expect(loadingShell).toContain(
+    'role="status" aria-live="polite" aria-busy="true"',
+  );
+  expect(loadingShell).toContain("正在加载工作台…");
+  expect(loadingShell).toContain("prefers-reduced-motion:reduce");
+  expect(loadingShell).not.toMatch(
+    /情报|研判|app-loading__network|#[0-9a-f]{6}/i,
+  );
+  for (const token of [
+    "--dsw-alias-bg-base",
+    "--dsw-alias-label-primary",
+    "--dsw-alias-label-secondary",
+    "--dsw-alias-border-l1",
+    "--dsw-alias-brand-primary",
+  ])
+    for (const mode of ["light", "dark"] as const)
+      expect(loadingShell).toContain(themeTokens[token]![mode]);
+});
+
+test("boot failure offers manual recovery once and removes the loader only when ready", () => {
+  const listeners = new Map<string, () => void>();
+  const attributes = new Map<string, string>();
+  const title = { textContent: "" },
+    description = { textContent: "" };
+  const buttons: { textContent: string; onclick(): void }[] = [];
+  let timeout: (() => void) | undefined;
+  let removed = false,
+    cleared = false,
+    reloads = 0;
+  const shell = {
+    isConnected: true,
+    dataset: {} as Record<string, string>,
+    setAttribute: (key: string, value: string) => attributes.set(key, value),
+    remove: () => {
+      removed = true;
+    },
+    querySelector: (selector: string) =>
+      selector === ".app-loading__title"
+        ? title
+        : selector === ".app-loading__description"
+          ? description
+          : {
+              append: (value: (typeof buttons)[number]) => buttons.push(value),
+            },
+  };
+  runInNewContext(loadingScript, {
+    document: { getElementById: () => shell, createElement: () => ({}) },
+    window: {
+      addEventListener: (name: string, fn: () => void) =>
+        listeners.set(name, fn),
+      removeEventListener: (name: string) => listeners.delete(name),
+    },
+    setTimeout: (fn: () => void) => {
+      timeout = fn;
+      return 1;
+    },
+    clearTimeout: () => {
+      cleared = true;
+    },
+    location: {
+      reload: () => {
+        reloads++;
+      },
+    },
+  });
+  expect(removed).toBe(false);
+  timeout!();
+  timeout!();
+  expect(attributes.get("role")).toBe("alert");
+  expect(attributes.get("aria-busy")).toBe("false");
+  expect(title.textContent).toBe("工作台加载失败");
+  expect(description.textContent).toBe("请检查连接后手动重新加载。");
+  expect(buttons).toHaveLength(1);
+  expect(buttons[0]!.textContent).toBe("重新加载");
+  expect(reloads).toBe(0);
+  buttons[0]!.onclick();
+  expect(reloads).toBe(1);
+  listeners.get("windy-workbench-ready")!();
+  expect(removed).toBe(true);
+  expect(cleared).toBe(true);
+  expect(listeners.has("error")).toBe(false);
+  expect(listeners.has("unhandledrejection")).toBe(false);
+});

package/template/apps/agent-server/plugins/branding/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@southwind-ai/dsh-branding",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./index.mjs",
+    "./client": "./client.js",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-sidebar",
+        "@deepseek-ai/dsh-client-ui-conversation"
+      ]
+    }
+  }
+}