@malette/agent-sdk 0.1.3-beta.11 → 0.1.3-beta.13

package/dist/index.js

@@ -499,10 +499,16 @@ var artifactService = {
   /**
    * 更新产物内容（用户编辑后保存）
    */
-  updateContent: async (artifactId, content) => {
+  updateContent: async (artifactId, content, options) => {
     return fetcher(`${API_BASE}/artifacts/${artifactId}/content`, {
       method: "PUT",
-      body: JSON.stringify({ artifactId, content })
+      body: JSON.stringify({
+        artifactId,
+        content,
+        ...options?.type && { type: options.type },
+        ...options?.language !== void 0 && { language: options.language },
+        ...options?.title !== void 0 && { title: options.title }
+      })
     });
   },
   /**
@@ -1707,6 +1713,25 @@ var useAgentStore = zustand.create()(
         false,
         "updateArtifactVisibility"
       ),
+      updateArtifactType: (artifactId, type, language) => set(
+        (state) => {
+          const existing = state.artifacts[artifactId];
+          if (!existing) return state;
+          return {
+            artifacts: {
+              ...state.artifacts,
+              [artifactId]: {
+                ...existing,
+                type,
+                language: language ?? existing.language,
+                gmtModified: (/* @__PURE__ */ new Date()).toISOString()
+              }
+            }
+          };
+        },
+        false,
+        "updateArtifactType"
+      ),
       // ============ 复合操作 ============
       startNewChat: (sessionId) => {
         set(
@@ -7809,6 +7834,104 @@ var resolveAssetForDisplay = async (asset, config) => {
   }
   return null;
 };
+var resolveHtmlAssetUrls = (html2) => {
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const resolveSrc = (src, isVideo) => {
+    if (!src.trim()) return src;
+    if (/^(data:|blob:|javascript:|#)/i.test(src)) return src;
+    if (src.includes("${")) return src;
+    if (/^https?:/i.test(src)) {
+      if (src.includes("industryai")) {
+        return src.split("?")[0];
+      }
+      return src;
+    }
+    const resolved = isVideo ? getHDImageUrl(src) : getImageUrl(src);
+    return resolved.startsWith("http") ? resolved : `${origin}${resolved}`;
+  };
+  const processHtmlPart = (part) => {
+    let result = part.replace(
+      /(<(?:img|video|source)\s[^>]*?\bsrc\s*=\s*["'])([^"']*)(["'])/gi,
+      (match, prefix, src, suffix) => {
+        const tagMatch = match.match(/^<(\w+)/i);
+        const tag = tagMatch?.[1]?.toLowerCase() ?? "";
+        const isVideo = tag === "video" || tag === "source";
+        return `${prefix}${resolveSrc(src, isVideo)}${suffix}`;
+      }
+    );
+    result = result.replace(
+      /(<video\s[^>]*?\bposter\s*=\s*["'])([^"']*)(["'])/gi,
+      (match, prefix, src, suffix) => `${prefix}${resolveSrc(src, false)}${suffix}`
+    );
+    return result;
+  };
+  const parts = html2.split(/(<script\b[\s\S]*?<\/script>)/gi);
+  return parts.map((part, i) => i % 2 === 1 ? part : processHtmlPart(part)).join("");
+};
+var resolveHtmlAssetUrlsAsync = async (html2, config) => {
+  if (!config?.asset) return resolveHtmlAssetUrls(html2);
+  const srcPattern = /(<(?:img|video|source)\s[^>]*?\bsrc\s*=\s*["'])([^"']*)(["'])/gi;
+  const posterPattern = /(<video\s[^>]*?\bposter\s*=\s*["'])([^"']*)(["'])/gi;
+  const scriptSplitPattern = /(<script\b[\s\S]*?<\/script>)/gi;
+  const parts = html2.split(scriptSplitPattern);
+  const nonScriptHtml = parts.filter((_, i) => i % 2 === 0).join("");
+  const urlsToResolve = /* @__PURE__ */ new Map();
+  const collectUrl = (src) => {
+    if (!src.trim()) return;
+    if (/^(data:|blob:|javascript:|#)/i.test(src)) return;
+    if (src.includes("${")) return;
+    urlsToResolve.set(src, src);
+  };
+  let match;
+  const srcRe = new RegExp(srcPattern.source, srcPattern.flags);
+  while ((match = srcRe.exec(nonScriptHtml)) !== null) {
+    collectUrl(match[2]);
+  }
+  const posterRe = new RegExp(posterPattern.source, posterPattern.flags);
+  while ((match = posterRe.exec(nonScriptHtml)) !== null) {
+    collectUrl(match[2]);
+  }
+  await Promise.all(
+    Array.from(urlsToResolve.keys()).map(async (src) => {
+      const tagMatch = nonScriptHtml.match(
+        new RegExp(`<(img|video|source)[^>]*(?:src|poster)=["']${src.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}["']`, "i")
+      );
+      const tag = tagMatch?.[1]?.toLowerCase() ?? "";
+      const isVideo = tag === "video" || tag === "source";
+      const type = isVideo ? "video" : "image";
+      const isHttp = /^https?:/i.test(src);
+      const asset = createAssetFromSource({
+        fileId: !isHttp ? src : void 0,
+        fileUrl: isHttp ? src : void 0,
+        type
+      });
+      if (!asset) return;
+      const resolved = await resolveAssetForDisplay(asset, config);
+      if (resolved) {
+        urlsToResolve.set(src, resolved.url);
+      }
+    })
+  );
+  const processedParts = parts.map((part, i) => {
+    if (i % 2 === 1) return part;
+    let result = part.replace(
+      /(<(?:img|video|source)\s[^>]*?\bsrc\s*=\s*["'])([^"']*)(["'])/gi,
+      (m, prefix, src, suffix) => {
+        const resolved = urlsToResolve.get(src);
+        return resolved && resolved !== src ? `${prefix}${resolved}${suffix}` : m;
+      }
+    );
+    result = result.replace(
+      /(<video\s[^>]*?\bposter\s*=\s*["'])([^"']*)(["'])/gi,
+      (m, prefix, src, suffix) => {
+        const resolved = urlsToResolve.get(src);
+        return resolved && resolved !== src ? `${prefix}${resolved}${suffix}` : m;
+      }
+    );
+    return result;
+  });
+  return processedParts.join("");
+};
 var ComponentContext = React16.createContext(void 0);
 var ComponentProvider = ({
   components = {},
@@ -16260,10 +16383,10 @@ var Observer = class {
         });
       }
     };
-    this.custom = (jsx66, data) => {
+    this.custom = (jsx68, data) => {
       const id = (data == null ? void 0 : data.id) || toastsCounter++;
       this.create({
-        jsx: jsx66(id),
+        jsx: jsx68(id),
         id,
         ...data
       });
@@ -21772,15 +21895,24 @@ var CodeBlock3 = React16.memo(function CodeBlock4({
     ] }, i)) }) }) })
   ] });
 });
-var HtmlPreview3 = React16.memo(function HtmlPreview4({ content }) {
+var HtmlPreview3 = React16.memo(function HtmlPreview4({
+  content,
+  config
+}) {
   const [scale, setScale] = React16.useState(1);
   const [deviceMode, setDeviceMode] = React16.useState("responsive");
   const [isLoading, setIsLoading] = React16.useState(true);
   const [iframeHeight, setIframeHeight] = React16.useState(600);
   const iframeRef = React16.useRef(null);
   const containerRef = React16.useRef(null);
-  const blobUrl = React16.useMemo(() => {
-    const styleInjection = `
+  const [blobUrl, setBlobUrl] = React16.useState("");
+  React16.useEffect(() => {
+    let active = true;
+    let currentUrl = "";
+    const buildBlobUrl = async () => {
+      const processed = config?.asset ? await resolveHtmlAssetUrlsAsync(content, config) : resolveHtmlAssetUrls(content);
+      if (!active) return;
+      const styleInjection = `
 <style>
   html, body {
     margin: 0;
@@ -21794,24 +21926,26 @@ var HtmlPreview3 = React16.memo(function HtmlPreview4({ content }) {
   }
 </style>
 `;
-    let modifiedContent = content;
-    if (content.includes("<head>")) {
-      modifiedContent = content.replace("<head>", "<head>" + styleInjection);
-    } else if (content.includes("<html>")) {
-      modifiedContent = content.replace("<html>", "<html><head>" + styleInjection + "</head>");
-    } else if (content.includes("<!DOCTYPE") || content.includes("<!doctype")) {
-      modifiedContent = content.replace(/(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i, "$1<html><head>" + styleInjection + "</head><body>") + "</body></html>";
-    } else {
-      modifiedContent = `<!DOCTYPE html><html><head>${styleInjection}</head><body>${content}</body></html>`;
-    }
-    const blob = new Blob([modifiedContent], { type: "text/html" });
-    return URL.createObjectURL(blob);
-  }, [content]);
-  React16.useEffect(() => {
+      let modifiedContent = processed;
+      if (processed.includes("<head>")) {
+        modifiedContent = processed.replace("<head>", "<head>" + styleInjection);
+      } else if (processed.includes("<html>")) {
+        modifiedContent = processed.replace("<html>", "<html><head>" + styleInjection + "</head>");
+      } else if (processed.includes("<!DOCTYPE") || processed.includes("<!doctype")) {
+        modifiedContent = processed.replace(/(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i, "$1<html><head>" + styleInjection + "</head><body>") + "</body></html>";
+      } else {
+        modifiedContent = `<!DOCTYPE html><html><head>${styleInjection}</head><body>${processed}</body></html>`;
+      }
+      const blob = new Blob([modifiedContent], { type: "text/html" });
+      currentUrl = URL.createObjectURL(blob);
+      setBlobUrl(currentUrl);
+    };
+    buildBlobUrl();
     return () => {
-      URL.revokeObjectURL(blobUrl);
+      active = false;
+      if (currentUrl) URL.revokeObjectURL(currentUrl);
     };
-  }, [blobUrl]);
+  }, [content, config]);
   const deviceConfig = {
     desktop: { width: "100%", maxWidth: "1400px", height: 800, icon: lucideReact.Monitor, label: "Desktop" },
     tablet: { width: "768px", height: 1024, icon: lucideReact.Tablet, label: "Tablet" },
@@ -21966,7 +22100,7 @@ var HtmlPreview3 = React16.memo(function HtmlPreview4({ content }) {
               },
               children: [
                 deviceMode === "mobile" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 bg-zinc-900 agent-sdk-light:bg-zinc-200 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-4 bg-zinc-800 agent-sdk-light:bg-zinc-300 rounded-full" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                blobUrl && /* @__PURE__ */ jsxRuntime.jsx(
                   "iframe",
                   {
                     ref: iframeRef,
@@ -23863,6 +23997,237 @@ function ArtifactDeleteButton({
     modal
   ] });
 }
+var CHANGEABLE_TYPES = ["code", "html", "svg", "markdown", "json", "text"];
+function ArtifactTypeSelector({
+  currentType,
+  currentLanguage,
+  onTypeChange,
+  disabled = false
+}) {
+  const [isOpen, setIsOpen] = React16.useState(false);
+  const [isChanging, setIsChanging] = React16.useState(false);
+  const dropdownRef = React16.useRef(null);
+  const typeConfig2 = artifactTypeConfig[currentType] || artifactTypeConfig.text;
+  const isChangeable = CHANGEABLE_TYPES.includes(currentType);
+  React16.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  const handleSelectType = React16.useCallback(async (newType) => {
+    if (newType === currentType || isChanging) return;
+    setIsChanging(true);
+    try {
+      await onTypeChange(newType);
+      setIsOpen(false);
+    } finally {
+      setIsChanging(false);
+    }
+  }, [currentType, isChanging, onTypeChange]);
+  if (!isChangeable) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-7 h-7 rounded-lg ${typeConfig2.bgColor} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) });
+  }
+  const availableTypes = CHANGEABLE_TYPES.filter((t) => t !== currentType);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => !disabled && !isChanging && setIsOpen(!isOpen),
+        disabled: disabled || isChanging,
+        className: cn3(
+          "flex items-center gap-1 p-1 rounded-lg transition-colors",
+          "hover:bg-zinc-800 agent-sdk-light:hover:bg-zinc-200",
+          (disabled || isChanging) && "opacity-50 cursor-not-allowed"
+        ),
+        title: "\u5207\u6362\u4EA7\u7269\u7C7B\u578B",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-7 h-7 rounded-lg ${typeConfig2.bgColor} flex items-center justify-center flex-shrink-0`, children: isChanging ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, className: `${typeConfig2.color} animate-spin` }) : /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 10, className: "text-zinc-500" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-full mt-1 z-50 w-44 bg-zinc-900 agent-sdk-light:bg-white border border-zinc-700/50 agent-sdk-light:border-zinc-200 rounded-lg shadow-xl overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-b border-zinc-800/50 agent-sdk-light:border-zinc-100", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-zinc-500 agent-sdk-light:text-zinc-400", children: "\u5207\u6362\u7C7B\u578B" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: availableTypes.map((type) => {
+        const config = artifactTypeConfig[type];
+        const TypeIcon = config.icon;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleSelectType(type),
+            disabled: isChanging,
+            className: cn3(
+              "flex items-center gap-2.5 px-2 py-1.5 text-xs rounded-md transition-all w-full text-left",
+              "text-zinc-300 agent-sdk-light:text-zinc-700",
+              "hover:bg-zinc-800/70 agent-sdk-light:hover:bg-zinc-100",
+              isChanging && "opacity-50 cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn3("w-5 h-5 rounded flex items-center justify-center flex-shrink-0", config.bgColor), children: /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { size: 11, className: config.color }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.label })
+            ]
+          },
+          type
+        );
+      }) })
+    ] })
+  ] });
+}
+var COMMON_LANGUAGES = [
+  "javascript",
+  "typescript",
+  "python",
+  "java",
+  "go",
+  "rust",
+  "c",
+  "cpp",
+  "csharp",
+  "ruby",
+  "php",
+  "swift",
+  "kotlin",
+  "sql",
+  "shell",
+  "html",
+  "css",
+  "json",
+  "yaml",
+  "xml",
+  "markdown"
+];
+function ArtifactLanguageSelector({
+  currentLanguage,
+  onLanguageChange,
+  disabled = false
+}) {
+  const [isOpen, setIsOpen] = React16.useState(false);
+  const [isChanging, setIsChanging] = React16.useState(false);
+  const [search, setSearch] = React16.useState("");
+  const dropdownRef = React16.useRef(null);
+  const inputRef = React16.useRef(null);
+  React16.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  React16.useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  const handleSelect = React16.useCallback(async (language) => {
+    if (language === currentLanguage || isChanging) return;
+    setIsChanging(true);
+    try {
+      await onLanguageChange(language);
+      setIsOpen(false);
+      setSearch("");
+    } finally {
+      setIsChanging(false);
+    }
+  }, [currentLanguage, isChanging, onLanguageChange]);
+  const handleKeyDown = React16.useCallback((e) => {
+    if (e.key === "Enter" && search.trim()) {
+      e.preventDefault();
+      handleSelect(search.trim().toLowerCase());
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+      setSearch("");
+    }
+  }, [search, handleSelect]);
+  const filteredLanguages = search.trim() ? COMMON_LANGUAGES.filter((lang) => lang.includes(search.trim().toLowerCase())) : COMMON_LANGUAGES;
+  const showCustomOption = search.trim() && !COMMON_LANGUAGES.includes(search.trim().toLowerCase()) && search.trim().toLowerCase() !== currentLanguage;
+  if (!currentLanguage) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => !disabled && !isChanging && setIsOpen(!isOpen),
+        disabled: disabled || isChanging,
+        className: cn3(
+          "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1 text-xs transition-colors",
+          "hover:text-zinc-300 agent-sdk-light:hover:text-zinc-700",
+          (disabled || isChanging) && "opacity-50 cursor-not-allowed",
+          !disabled && !isChanging && "cursor-pointer"
+        ),
+        children: isChanging ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 10, className: "animate-spin" }),
+          currentLanguage
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          "\u2022 ",
+          currentLanguage
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-full mt-1 z-50 w-48 bg-zinc-900 agent-sdk-light:bg-white border border-zinc-700/50 agent-sdk-light:border-zinc-200 rounded-lg shadow-xl overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b border-zinc-800/50 agent-sdk-light:border-zinc-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: "\u641C\u7D22\u8BED\u8A00...",
+          className: "w-full px-2 py-1.5 text-xs bg-zinc-800 agent-sdk-light:bg-zinc-100 text-zinc-200 agent-sdk-light:text-zinc-800 rounded-md border border-zinc-700/50 agent-sdk-light:border-zinc-200 outline-none focus:border-zinc-500 agent-sdk-light:focus:border-zinc-400 placeholder-zinc-600 agent-sdk-light:placeholder-zinc-400"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-48 overflow-y-auto p-1", children: [
+        showCustomOption && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleSelect(search.trim().toLowerCase()),
+            disabled: isChanging,
+            className: cn3(
+              "flex items-center justify-between px-2 py-1.5 text-xs rounded-md transition-all w-full text-left",
+              "text-zinc-300 agent-sdk-light:text-zinc-700",
+              "hover:bg-zinc-800/70 agent-sdk-light:hover:bg-zinc-100",
+              isChanging && "opacity-50 cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                '"',
+                search.trim().toLowerCase(),
+                '"'
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-600 agent-sdk-light:text-zinc-400", children: "\u56DE\u8F66\u786E\u8BA4" })
+            ]
+          }
+        ),
+        filteredLanguages.map((lang) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleSelect(lang),
+            disabled: isChanging,
+            className: cn3(
+              "flex items-center justify-between px-2 py-1.5 text-xs rounded-md transition-all w-full text-left",
+              lang === currentLanguage ? "text-zinc-100 agent-sdk-light:text-zinc-900 bg-zinc-800/50 agent-sdk-light:bg-zinc-100" : "text-zinc-300 agent-sdk-light:text-zinc-700 hover:bg-zinc-800/70 agent-sdk-light:hover:bg-zinc-100",
+              isChanging && "opacity-50 cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: lang }),
+              lang === currentLanguage && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, className: "text-green-400 agent-sdk-light:text-green-600 flex-shrink-0" })
+            ]
+          },
+          lang
+        )),
+        filteredLanguages.length === 0 && !showCustomOption && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-xs text-zinc-600 agent-sdk-light:text-zinc-400 text-center", children: "\u65E0\u5339\u914D\u7ED3\u679C" })
+      ] })
+    ] })
+  ] });
+}
 var ArtifactViewer = React16.memo(function ArtifactViewer2({
   artifact,
   isOpen,
@@ -23880,13 +24245,20 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
   onContentChange,
   onSave,
   onVisibilityChange,
-  onDelete
+  onDelete,
+  onTypeChange,
+  onLanguageChange,
+  onTitleChange
 }) {
   const [viewMode, setViewMode] = React16.useState(defaultView);
   const [isEditing, setIsEditing] = React16.useState(false);
   const [editContent, setEditContent] = React16.useState("");
   const [undoStack, setUndoStack] = React16.useState([]);
   const [redoStack, setRedoStack] = React16.useState([]);
+  const [isEditingTitle, setIsEditingTitle] = React16.useState(false);
+  const [editingTitle, setEditingTitle] = React16.useState("");
+  const [isSavingTitle, setIsSavingTitle] = React16.useState(false);
+  const titleInputRef = React16.useRef(null);
   React16.useEffect(() => {
     if (artifact) {
       if (artifact.type === "html" || artifact.type === "markdown" || artifact.type === "svg") {
@@ -23898,8 +24270,9 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
       setEditContent(artifact.content);
       setUndoStack([]);
       setRedoStack([]);
+      setIsEditingTitle(false);
     }
-  }, [artifact?.id]);
+  }, [artifact?.id, artifact?.type]);
   React16.useEffect(() => {
     if (artifact && !isEditing) {
       setEditContent(artifact.content);
@@ -23912,6 +24285,7 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
   const handleStartEdit = () => {
     setEditContent(artifact.content);
     setUndoStack([artifact.content]);
+    handleStartEditTitle();
     setRedoStack([]);
     setIsEditing(true);
     setViewMode("code");
@@ -23946,6 +24320,43 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
     setEditContent(artifact.content);
     setIsEditing(false);
   };
+  const handleStartEditTitle = React16.useCallback(() => {
+    if (!onTitleChange || isEditing || isSavingTitle) return;
+    setEditingTitle(artifact.title);
+    setIsEditingTitle(true);
+  }, [onTitleChange, isEditing, isSavingTitle, artifact.title]);
+  const handleSaveTitle = React16.useCallback(async () => {
+    const trimmed = editingTitle.trim();
+    if (!trimmed || trimmed === artifact.title) {
+      setIsEditingTitle(false);
+      return;
+    }
+    setIsSavingTitle(true);
+    try {
+      await onTitleChange?.(artifact.id, trimmed);
+    } finally {
+      setIsSavingTitle(false);
+      setIsEditingTitle(false);
+    }
+  }, [editingTitle, artifact.title, artifact.id, onTitleChange]);
+  const handleCancelEditTitle = React16.useCallback(() => {
+    setIsEditingTitle(false);
+  }, []);
+  const handleTitleKeyDown = React16.useCallback((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSaveTitle();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancelEditTitle();
+    }
+  }, [handleSaveTitle, handleCancelEditTitle]);
+  React16.useEffect(() => {
+    if (isEditingTitle && titleInputRef.current) {
+      titleInputRef.current.focus();
+      titleInputRef.current.select();
+    }
+  }, [isEditingTitle]);
   const displayContent = isEditing ? editContent : artifact.content;
   const renderContent = () => {
     if (isEditing) {
@@ -23986,7 +24397,7 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
     switch (artifact.type) {
       case "html":
       case "svg":
-        return /* @__PURE__ */ jsxRuntime.jsx(HtmlPreview3, { content: displayContent });
+        return /* @__PURE__ */ jsxRuntime.jsx(HtmlPreview3, { content: displayContent, config });
       case "markdown":
         return /* @__PURE__ */ jsxRuntime.jsx(MarkdownPreview, { content: displayContent, config });
       default:
@@ -24003,15 +24414,56 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col bg-zinc-900 agent-sdk-light:bg-white relative", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-zinc-800/50 agent-sdk-light:border-zinc-200 bg-zinc-900/95 agent-sdk-light:bg-zinc-50 backdrop-blur-sm flex-shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-7 h-7 rounded-lg ${typeConfig2.bgColor} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
+          onTypeChange ? /* @__PURE__ */ jsxRuntime.jsx(
+            ArtifactTypeSelector,
+            {
+              currentType: artifact.type,
+              currentLanguage: artifact.language,
+              onTypeChange: (newType, language) => onTypeChange(artifact.id, newType, language),
+              disabled: isEditing
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-7 h-7 rounded-lg ${typeConfig2.bgColor} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-zinc-100 agent-sdk-light:text-zinc-900 truncate", children: artifact.title }),
+            isEditingTitle ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: titleInputRef,
+                  type: "text",
+                  value: editingTitle,
+                  onChange: (e) => setEditingTitle(e.target.value),
+                  onKeyDown: handleTitleKeyDown,
+                  onBlur: handleSaveTitle,
+                  disabled: isSavingTitle,
+                  className: "text-sm font-medium text-zinc-100 agent-sdk-light:text-zinc-900 bg-zinc-800 agent-sdk-light:bg-zinc-100 border border-zinc-600 agent-sdk-light:border-zinc-300 rounded px-1.5 py-0.5 outline-none focus:border-zinc-400 agent-sdk-light:focus:border-zinc-500 w-full min-w-0"
+                }
+              ),
+              isSavingTitle && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 12, className: "text-zinc-500 animate-spin flex-shrink-0" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: cn3(
+                  "text-sm font-medium text-zinc-100 agent-sdk-light:text-zinc-900 truncate",
+                  onTitleChange && !isEditing && "cursor-pointer hover:text-zinc-300 agent-sdk-light:hover:text-zinc-600"
+                ),
+                onDoubleClick: handleStartEditTitle,
+                title: onTitleChange && !isEditing ? "\u53CC\u51FB\u7F16\u8F91\u6807\u9898" : void 0,
+                children: artifact.title
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `text-xs ${typeConfig2.color}`, children: [
               typeConfig2.label,
-              artifact.language && artifact.language !== artifact.type && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1", children: [
+              artifact.language && artifact.language !== artifact.type && (onLanguageChange ? /* @__PURE__ */ jsxRuntime.jsx(
+                ArtifactLanguageSelector,
+                {
+                  currentLanguage: artifact.language,
+                  onLanguageChange: (lang) => onLanguageChange(artifact.id, lang),
+                  disabled: isEditing
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1", children: [
                 "\u2022 ",
                 artifact.language
-              ] })
+              ] }))
             ] })
           ] })
         ] }),
@@ -24136,15 +24588,54 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
       isOpen,
       onClose,
       title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-6 h-6 rounded-md ${typeConfig2.bgColor} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: artifact.title })
+        onTypeChange ? /* @__PURE__ */ jsxRuntime.jsx(
+          ArtifactTypeSelector,
+          {
+            currentType: artifact.type,
+            currentLanguage: artifact.language,
+            onTypeChange: (newType, language) => onTypeChange(artifact.id, newType, language),
+            disabled: isEditing
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-6 h-6 rounded-md ${typeConfig2.bgColor} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
+        isEditingTitle ? /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: titleInputRef,
+            type: "text",
+            value: editingTitle,
+            onChange: (e) => setEditingTitle(e.target.value),
+            onKeyDown: handleTitleKeyDown,
+            onBlur: handleSaveTitle,
+            disabled: isSavingTitle,
+            className: "text-sm font-medium text-zinc-100 agent-sdk-light:text-zinc-900 bg-zinc-800 agent-sdk-light:bg-zinc-100 border border-zinc-600 agent-sdk-light:border-zinc-300 rounded px-1.5 py-0.5 outline-none focus:border-zinc-400 agent-sdk-light:focus:border-zinc-500 min-w-0 flex-1"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn3(
+              "truncate",
+              onTitleChange && !isEditing && "cursor-pointer hover:text-zinc-300 agent-sdk-light:hover:text-zinc-600"
+            ),
+            onDoubleClick: handleStartEditTitle,
+            title: onTitleChange && !isEditing ? "\u53CC\u51FB\u7F16\u8F91\u6807\u9898" : void 0,
+            children: artifact.title
+          }
+        ),
+        isSavingTitle && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 12, className: "text-zinc-500 animate-spin flex-shrink-0" })
       ] }),
       subtitle: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: typeConfig2.color, children: [
         typeConfig2.label,
-        artifact.language && artifact.language !== artifact.type && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1", children: [
+        artifact.language && artifact.language !== artifact.type && (onLanguageChange ? /* @__PURE__ */ jsxRuntime.jsx(
+          ArtifactLanguageSelector,
+          {
+            currentLanguage: artifact.language,
+            onLanguageChange: (lang) => onLanguageChange(artifact.id, lang),
+            disabled: isEditing
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1", children: [
           "\u2022 ",
           artifact.language
-        ] })
+        ] }))
       ] }),
       isFullscreen,
       onFullscreenToggle,
@@ -25057,7 +25548,7 @@ function useArtifactPanel({ currentSessionId }) {
     const existingArtifact = Object.values(artifacts).find(
       (a) => {
         const sameContent = a.currentContent === data.content && a.type === data.type;
-        const sameId = a?.metadata?.workId === data.metadata?.workId;
+        const sameId = !!data.metadata?.workId && a?.metadata?.workId === data.metadata?.workId;
         return sameContent || sameId;
       }
     );
@@ -25119,7 +25610,8 @@ function useArtifactPanel({ currentSessionId }) {
     setActiveArtifact,
     removeArtifact,
     reorderArtifacts,
-    updateArtifactContent
+    updateArtifactContent,
+    upsertArtifact
   };
 }
 
@@ -25935,7 +26427,8 @@ var AgentChat = React16__namespace.default.forwardRef(({
     setActiveArtifact,
     removeArtifact,
     reorderArtifacts,
-    updateArtifactContent
+    updateArtifactContent,
+    upsertArtifact
   } = useArtifactPanel({ currentSessionId: useAgentStore((state) => state.currentSession?.sessionId) });
   const reconnectRef = React16.useRef(null);
   const reconnectWrapper = React16.useCallback(async (messageId) => {
@@ -26409,6 +26902,52 @@ var AgentChat = React16__namespace.default.forwardRef(({
                             toast.error("\u5220\u9664\u4EA7\u7269\u5931\u8D25");
                           }
                         },
+                        onTypeChange: async (artifactId, newType, language) => {
+                          try {
+                            const content = activeArtifact?.currentContent || "";
+                            const res = await artifactService.updateContent(artifactId, content, {
+                              type: newType,
+                              language
+                            });
+                            if (res.success && res.data) {
+                              upsertArtifact(artifactService.normalizeEntry(res.data));
+                              toast.success("\u7C7B\u578B\u5DF2\u66F4\u65B0");
+                            } else {
+                              toast.error("\u7C7B\u578B\u66F4\u65B0\u5931\u8D25");
+                            }
+                          } catch (err) {
+                            console.error("[AgentChat] Change artifact type failed:", err);
+                            toast.error("\u7C7B\u578B\u66F4\u65B0\u5931\u8D25");
+                          }
+                        },
+                        onLanguageChange: async (artifactId, language) => {
+                          try {
+                            const content = activeArtifact?.currentContent || "";
+                            const res = await artifactService.updateContent(artifactId, content, { language });
+                            if (res.success && res.data) {
+                              upsertArtifact(artifactService.normalizeEntry(res.data));
+                            } else {
+                              toast.error("\u8BED\u8A00\u66F4\u65B0\u5931\u8D25");
+                            }
+                          } catch (err) {
+                            console.error("[AgentChat] Change artifact language failed:", err);
+                            toast.error("\u8BED\u8A00\u66F4\u65B0\u5931\u8D25");
+                          }
+                        },
+                        onTitleChange: async (artifactId, title) => {
+                          try {
+                            const content = activeArtifact?.currentContent || "";
+                            const res = await artifactService.updateContent(artifactId, content, { title });
+                            if (res.success && res.data) {
+                              upsertArtifact(artifactService.normalizeEntry(res.data));
+                            } else {
+                              toast.error("\u6807\u9898\u66F4\u65B0\u5931\u8D25");
+                            }
+                          } catch (err) {
+                            console.error("[AgentChat] Change artifact title failed:", err);
+                            toast.error("\u6807\u9898\u66F4\u65B0\u5931\u8D25");
+                          }
+                        },
                         onVisibilityChange: async (artifactId, isPublic) => {
                           try {
                             const res = await artifactService.updateVisibility(artifactId, isPublic);
@@ -26944,19 +27483,58 @@ function ShareReplayPage({ shareId, onNavigateBack }) {
   ] });
 }
 var typeConfig = {
-  html: { icon: lucideReact.Globe, label: "HTML", color: "text-orange-400", bgColor: "bg-orange-500/10" },
-  svg: { icon: lucideReact.Globe, label: "SVG", color: "text-orange-400", bgColor: "bg-orange-500/10" },
-  markdown: { icon: lucideReact.FileText, label: "Markdown", color: "text-blue-400", bgColor: "bg-blue-500/10" },
-  json: { icon: lucideReact.FileJson, label: "JSON", color: "text-yellow-400", bgColor: "bg-yellow-500/10" },
-  code: { icon: lucideReact.FileCode, label: "Code", color: "text-purple-400", bgColor: "bg-purple-500/10" },
-  text: { icon: lucideReact.FileText, label: "Text", color: "text-zinc-400", bgColor: "bg-zinc-500/10" },
-  image: { icon: lucideReact.FileImage, label: "Image", color: "text-green-400", bgColor: "bg-green-500/10" },
-  video: { icon: lucideReact.Video, label: "Video", color: "text-pink-400", bgColor: "bg-pink-500/10" }
+  html: { icon: lucideReact.Globe, label: "HTML", color: "#fb923c" },
+  svg: { icon: lucideReact.Globe, label: "SVG", color: "#fb923c" },
+  markdown: { icon: lucideReact.FileText, label: "Markdown", color: "#60a5fa" },
+  json: { icon: lucideReact.FileJson, label: "JSON", color: "#facc15" },
+  code: { icon: lucideReact.FileCode, label: "Code", color: "#c084fc" },
+  text: { icon: lucideReact.FileText, label: "Text", color: "#a1a1aa" },
+  image: { icon: lucideReact.FileImage, label: "Image", color: "#4ade80" },
+  video: { icon: lucideReact.Video, label: "Video", color: "#f472b6" }
 };
+function FullscreenHtmlPreview({ content }) {
+  const blobUrl = React16.useMemo(() => {
+    const processed = resolveHtmlAssetUrls(content);
+    const styleInjection = `
+<style>
+  html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; box-sizing: border-box; }
+  * { box-sizing: border-box; }
+</style>`;
+    let modified = processed;
+    if (processed.includes("<head>")) {
+      modified = processed.replace("<head>", "<head>" + styleInjection);
+    } else if (processed.includes("<html>")) {
+      modified = processed.replace("<html>", "<html><head>" + styleInjection + "</head>");
+    } else if (/<!(DOCTYPE|doctype)/i.test(processed)) {
+      modified = processed.replace(/(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i, "$1<html><head>" + styleInjection + "</head><body>") + "</body></html>";
+    } else {
+      modified = `<!DOCTYPE html><html><head>${styleInjection}</head><body>${processed}</body></html>`;
+    }
+    const blob = new Blob([modified], { type: "text/html" });
+    return URL.createObjectURL(blob);
+  }, [content]);
+  React16.useEffect(() => {
+    return () => URL.revokeObjectURL(blobUrl);
+  }, [blobUrl]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      src: blobUrl,
+      style: { display: "block", width: "100%", height: "100%", border: "none", background: "white" },
+      sandbox: "allow-scripts allow-same-origin allow-popups allow-forms allow-modals",
+      title: "HTML Preview"
+    }
+  );
+}
 function PublicArtifactPage({ shareToken, onNavigateBack }) {
   const [pageState, setPageState] = React16.useState("loading");
   const [error, setError] = React16.useState(null);
   const [artifact, setArtifact] = React16.useState(null);
+  const [isTheaterMode, setIsTheaterMode] = React16.useState(false);
+  const [isBrowserFullscreen, setIsBrowserFullscreen] = React16.useState(false);
+  const [showTheaterControls, setShowTheaterControls] = React16.useState(true);
+  const theaterTimerRef = React16.useRef(null);
+  const isFullscreenSupported = typeof document !== "undefined" && typeof document.documentElement?.requestFullscreen === "function";
   React16.useEffect(() => {
     if (!shareToken) {
       setPageState("not-found");
@@ -26980,31 +27558,13 @@ function PublicArtifactPage({ shareToken, onNavigateBack }) {
     }
     load();
   }, [shareToken]);
-  const handleShare = React16.useCallback(() => {
-    const url = window.location.href;
-    navigator.clipboard.writeText(url);
-    toast.success("\u94FE\u63A5\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F");
-  }, []);
   const handleDownload = React16.useCallback(() => {
     if (!artifact) return;
-    const extMap = {
-      html: "html",
-      svg: "svg",
-      markdown: "md",
-      json: "json",
-      code: artifact.language || "txt",
-      text: "txt"
-    };
-    const ext = extMap[artifact.type] || "txt";
-    const mimeMap = {
-      html: "text/html",
-      svg: "image/svg+xml",
-      markdown: "text/markdown",
-      json: "application/json",
-      code: "text/plain",
-      text: "text/plain"
-    };
-    const mime = mimeMap[artifact.type] || "text/plain";
+    const type = artifact.type?.toLowerCase() ?? "text";
+    const extMap = { html: "html", svg: "svg", markdown: "md", json: "json", code: artifact.language || "txt", text: "txt" };
+    const ext = extMap[type] || "txt";
+    const mimeMap = { html: "text/html", svg: "image/svg+xml", markdown: "text/markdown", json: "application/json", code: "text/plain", text: "text/plain" };
+    const mime = mimeMap[type] || "text/plain";
     const blob = new Blob([artifact.content], { type: mime });
     const url = URL.createObjectURL(blob);
     const link2 = document.createElement("a");
@@ -27015,15 +27575,85 @@ function PublicArtifactPage({ shareToken, onNavigateBack }) {
     document.body.removeChild(link2);
     URL.revokeObjectURL(url);
   }, [artifact]);
+  const toggleTheaterMode = React16.useCallback(() => {
+    setIsTheaterMode((prev) => !prev);
+    setShowTheaterControls(true);
+  }, []);
+  const exitTheaterMode = React16.useCallback(() => {
+    setIsTheaterMode(false);
+    setShowTheaterControls(true);
+  }, []);
+  const toggleBrowserFullscreen = React16.useCallback(() => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch(() => {
+      });
+    } else {
+      document.exitFullscreen().catch(() => {
+      });
+    }
+  }, []);
+  React16.useEffect(() => {
+    const handleFullscreenChange = () => {
+      const isFs = !!document.fullscreenElement;
+      setIsBrowserFullscreen(isFs);
+      if (isFs) {
+        setIsTheaterMode(true);
+        setShowTheaterControls(true);
+      } else {
+        setIsTheaterMode(false);
+      }
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+  React16.useEffect(() => {
+    if (!isTheaterMode) return;
+    const handleInteraction = () => {
+      setShowTheaterControls(true);
+      if (theaterTimerRef.current) clearTimeout(theaterTimerRef.current);
+      theaterTimerRef.current = setTimeout(() => setShowTheaterControls(false), 3e3);
+    };
+    theaterTimerRef.current = setTimeout(() => setShowTheaterControls(false), 3e3);
+    window.addEventListener("mousemove", handleInteraction);
+    window.addEventListener("touchstart", handleInteraction);
+    return () => {
+      window.removeEventListener("mousemove", handleInteraction);
+      window.removeEventListener("touchstart", handleInteraction);
+      if (theaterTimerRef.current) clearTimeout(theaterTimerRef.current);
+    };
+  }, [isTheaterMode]);
+  React16.useEffect(() => {
+    const handleKeyDown = (e) => {
+      const tag = e.target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+      if (e.key === "Escape") {
+        if (document.fullscreenElement) return;
+        if (isTheaterMode) exitTheaterMode();
+        return;
+      }
+      if ((e.key === "f" || e.key === "F") && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        e.preventDefault();
+        if (isFullscreenSupported) toggleBrowserFullscreen();
+        return;
+      }
+      if ((e.key === "t" || e.key === "T") && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        e.preventDefault();
+        toggleTheaterMode();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isTheaterMode, isFullscreenSupported, exitTheaterMode, toggleBrowserFullscreen, toggleTheaterMode]);
   const renderContent = () => {
     if (!artifact) return null;
     const content = artifact.content;
-    switch (artifact.type) {
+    const type = artifact.type?.toLowerCase() ?? "text";
+    switch (type) {
       case "html":
       case "svg":
-        return /* @__PURE__ */ jsxRuntime.jsx(HtmlPreview3, { content });
+        return /* @__PURE__ */ jsxRuntime.jsx(FullscreenHtmlPreview, { content });
       case "markdown":
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 max-w-4xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownPreview, { content }) });
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "agent-sdk-theme", style: { background: "transparent", height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 max-w-4xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownPreview, { content }) }) });
       case "image":
         return /* @__PURE__ */ jsxRuntime.jsx(ImageArtifactPreview, { content });
       case "video":
@@ -27032,73 +27662,90 @@ function PublicArtifactPage({ shareToken, onNavigateBack }) {
       case "code":
       case "text":
       default:
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          CodeBlock3,
-          {
-            code: content,
-            language: artifact.language || artifact.type
-          }
-        );
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "agent-sdk-theme", style: { background: "transparent", height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock3, { code: content, language: artifact.language || type }) });
     }
   };
   if (pageState === "loading") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-screen bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-8 h-8 animate-spin text-[#d8ff00]" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", background: "#09090b" }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 32, style: { color: "#d8ff00" }, className: "animate-spin" }) });
   }
   if (pageState === "not-found") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-screen bg-zinc-950 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 48, className: "text-zinc-600" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-zinc-400 text-lg", children: "\u4EA7\u7269\u4E0D\u5B58\u5728\u6216\u5DF2\u8BBE\u4E3A\u79C1\u6709" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-zinc-600 text-sm", children: "\u8BF7\u68C0\u67E5\u94FE\u63A5\u662F\u5426\u6B63\u786E\uFF0C\u6216\u8054\u7CFB\u4F5C\u8005\u91CD\u65B0\u5206\u4EAB" }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", background: "#09090b", gap: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 48, style: { color: "#52525b" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#a1a1aa", fontSize: 18, margin: 0 }, children: "\u4EA7\u7269\u4E0D\u5B58\u5728\u6216\u5DF2\u8BBE\u4E3A\u79C1\u6709" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#52525b", fontSize: 14, margin: 0 }, children: "\u8BF7\u68C0\u67E5\u94FE\u63A5\u662F\u5426\u6B63\u786E\uFF0C\u6216\u8054\u7CFB\u4F5C\u8005\u91CD\u65B0\u5206\u4EAB" }),
       onNavigateBack && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: onNavigateBack,
-          className: "mt-4 px-4 py-2 text-sm bg-zinc-800 text-white rounded-lg hover:bg-zinc-700 transition-colors",
+          style: { marginTop: 16, padding: "8px 16px", fontSize: 14, background: "#27272a", color: "white", border: "none", borderRadius: 8, cursor: "pointer" },
           children: "\u8FD4\u56DE"
         }
       )
     ] });
   }
   if (pageState === "error") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-screen bg-zinc-950 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 48, className: "text-red-400" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-400 text-lg", children: error || "\u52A0\u8F7D\u5931\u8D25" }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", background: "#09090b", gap: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 48, style: { color: "#f87171" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#f87171", fontSize: 18, margin: 0 }, children: error || "\u52A0\u8F7D\u5931\u8D25" }),
       onNavigateBack && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: onNavigateBack,
-          className: "mt-4 px-4 py-2 text-sm bg-zinc-800 text-white rounded-lg hover:bg-zinc-700 transition-colors",
+          style: { marginTop: 16, padding: "8px 16px", fontSize: 14, background: "#27272a", color: "white", border: "none", borderRadius: 8, cursor: "pointer" },
           children: "\u8FD4\u56DE"
         }
       )
     ] });
   }
   if (!artifact) return null;
-  const config = typeConfig[artifact.type] || typeConfig.text;
+  const normalizedType = artifact.type?.toLowerCase() ?? "text";
+  const config = typeConfig[normalizedType] || typeConfig.text;
   const TypeIcon = config.icon;
-  const canDownload = ["html", "svg", "markdown", "json", "code", "text"].includes(artifact.type);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-screen bg-zinc-950", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-sm flex-shrink-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+  const canDownload = ["html", "svg", "markdown", "json", "code", "text"].includes(normalizedType);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100vh", background: "#09090b" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: isTheaterMode ? "0 16px" : "10px 16px",
+      maxHeight: isTheaterMode ? 0 : 200,
+      overflow: "hidden",
+      opacity: isTheaterMode ? 0 : 1,
+      borderBottom: isTheaterMode ? "none" : "1px solid rgba(39, 39, 42, 0.5)",
+      background: "rgba(9, 9, 11, 0.8)",
+      backdropFilter: "blur(8px)",
+      flexShrink: 0,
+      transition: "max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, minWidth: 0 }, children: [
         onNavigateBack && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: onNavigateBack,
-            className: "p-1.5 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors flex-shrink-0",
+            style: { padding: 6, color: "#a1a1aa", background: "none", border: "none", borderRadius: 8, cursor: "pointer", flexShrink: 0 },
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { size: 18 })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-7 h-7 rounded-lg ${config.bgColor} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { size: 14, className: config.color }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-sm font-medium text-white truncate", children: artifact.title }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 text-[11px] text-zinc-500 mt-0.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: config.color, children: config.label }),
-              artifact.sharedAt && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            width: 28,
+            height: 28,
+            borderRadius: 8,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            background: `color-mix(in srgb, ${config.color} 15%, transparent)`
+          }, children: /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { size: 14, style: { color: config.color } }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: 14, fontWeight: 500, color: "white", margin: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: artifact.title }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 11, color: "#71717a", marginTop: 2 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: config.color }, children: config.label }),
+              artifact.sharedAt && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 10 }),
                 new Date(artifact.sharedAt).toLocaleDateString()
               ] }),
-              artifact.viewCount !== void 0 && artifact.viewCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+              artifact.viewCount !== void 0 && artifact.viewCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 10 }),
                 artifact.viewCount
               ] })
@@ -27106,29 +27753,120 @@ function PublicArtifactPage({ shareToken, onNavigateBack }) {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-        canDownload && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: handleDownload,
-            className: "p-2 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors",
-            title: "\u4E0B\u8F7D",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 16 })
+            onClick: toggleTheaterMode,
+            style: { padding: 8, color: "#a1a1aa", background: "none", border: "none", borderRadius: 8, cursor: "pointer" },
+            title: "\u6C89\u6D78\u6A21\u5F0F (T)",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorPlay, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        isFullscreenSupported && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: handleShare,
-            className: "p-2 text-zinc-400 hover:text-[#d8ff00] hover:bg-zinc-800 rounded-lg transition-colors",
-            title: "\u590D\u5236\u5206\u4EAB\u94FE\u63A5",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Share2, { size: 16 })
+            onClick: toggleBrowserFullscreen,
+            style: { padding: 8, color: "#a1a1aa", background: "none", border: "none", borderRadius: 8, cursor: "pointer" },
+            title: isBrowserFullscreen ? "\u9000\u51FA\u5168\u5C4F (F)" : "\u5168\u5C4F (F)",
+            children: isBrowserFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { size: 16 })
+          }
+        ),
+        canDownload && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleDownload,
+            style: { padding: 8, color: "#a1a1aa", background: "none", border: "none", borderRadius: 8, cursor: "pointer" },
+            title: "\u4E0B\u8F7D",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 16 })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: renderContent() }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-2 border-t border-zinc-800/30 bg-zinc-950/50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-600", children: "Powered by BISHAN Agent" }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflow: "hidden" }, children: renderContent() }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: isTheaterMode ? "0" : "8px 0",
+      maxHeight: isTheaterMode ? 0 : 50,
+      overflow: "hidden",
+      opacity: isTheaterMode ? 0 : 1,
+      borderTop: isTheaterMode ? "none" : "1px solid rgba(39, 39, 42, 0.3)",
+      background: "rgba(9, 9, 11, 0.5)",
+      flexShrink: 0,
+      transition: "max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease"
+    }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, color: "#52525b" }, children: "Powered by BISHAN Agent" }) }),
+    isTheaterMode && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onMouseEnter: () => setShowTheaterControls(true),
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 40,
+          zIndex: 99
+        }
+      }
+    ),
+    isTheaterMode && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      position: "fixed",
+      top: 16,
+      right: 16,
+      zIndex: 100,
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      opacity: showTheaterControls ? 1 : 0,
+      transform: showTheaterControls ? "translateY(0)" : "translateY(-8px)",
+      transition: "opacity 0.3s ease, transform 0.3s ease",
+      pointerEvents: showTheaterControls ? "auto" : "none"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: exitTheaterMode,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "8px 12px",
+            background: "rgba(39, 39, 42, 0.9)",
+            backdropFilter: "blur(8px)",
+            border: "1px solid rgba(63, 63, 70, 0.5)",
+            borderRadius: 8,
+            color: "#a1a1aa",
+            fontSize: 12,
+            cursor: "pointer",
+            whiteSpace: "nowrap"
+          },
+          title: "\u9000\u51FA\u6C89\u6D78\u6A21\u5F0F (ESC)",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 }),
+            "\u9000\u51FA\u6C89\u6D78"
+          ]
+        }
+      ),
+      isFullscreenSupported && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: toggleBrowserFullscreen,
+          style: {
+            padding: 8,
+            background: "rgba(39, 39, 42, 0.9)",
+            backdropFilter: "blur(8px)",
+            border: "1px solid rgba(63, 63, 70, 0.5)",
+            borderRadius: 8,
+            color: "#a1a1aa",
+            cursor: "pointer"
+          },
+          title: isBrowserFullscreen ? "\u9000\u51FA\u5168\u5C4F (F)" : "\u5168\u5C4F (F)",
+          children: isBrowserFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { size: 14 })
+        }
+      )
+    ] })
   ] });
 }
 var AgentSDKProvider = ({