npm - @malette/agent-sdk - Versions diffs - 0.1.3-beta.11 → 0.1.3-beta.12 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -26944,19 +26944,57 @@ 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 styleInjection = `
+<style>
+  html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; box-sizing: border-box; }
+  * { box-sizing: border-box; }
+</style>`;
+    let modified = content;
+    if (content.includes("<head>")) {
+      modified = content.replace("<head>", "<head>" + styleInjection);
+    } else if (content.includes("<html>")) {
+      modified = content.replace("<html>", "<html><head>" + styleInjection + "</head>");
+    } else if (/<!(DOCTYPE|doctype)/i.test(content)) {
+      modified = content.replace(/(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i, "$1<html><head>" + styleInjection + "</head><body>") + "</body></html>";
+    } else {
+      modified = `<!DOCTYPE html><html><head>${styleInjection}</head><body>${content}</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 +27018,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 +27035,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 +27122,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 +27213,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 = ({