merge: integrate dhk-dev into dhk-1

frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -11,6 +11,7 @@ import {
   LoaderIcon,
   PackageIcon,
   SaveIcon,
+  SparklesIcon,
   UploadCloudIcon,
   XIcon,
 } from "lucide-react";
@@ -37,6 +38,7 @@ import {
 } from "@/components/ui/select";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { CodeEditor } from "@/components/workspace/code-editor";
+import { MarkdownAiEditor } from "@/open-canvas/components/artifact/MarkdownAiEditor";
 import { publishArtifactToKnowledge } from "@/core/agents/api";
 import { useAgent } from "@/core/agents/hooks";
 import { apiFetch } from "@/core/api";
@@ -216,6 +218,10 @@ export function ArtifactFileDetail({
     !useWriteFileStreaming &&
     !isSkillFile &&
     !isMock;
+  // 「AI 写作」md 展示开关：只要是可编辑的 markdown 就提供「AI 写作」视图（在 源码/预览 旁多一个
+  // 切换项），用户可随时切过去体验划词「AI 改写」。默认仍是「预览」，避免编辑器在内容加载期间
+  // 挂载导致白屏 + 避免复杂 md(表格/公式/HTML)误入有损编辑。
+  const canUseAiEditor = canEditArtifact;
   const [draftContent, setDraftContent] = useState("");
   const [hasLocalEdits, setHasLocalEdits] = useState(false);
   const updateArtifact = useUpdateArtifactContent();
@@ -234,7 +240,7 @@ export function ArtifactFileDetail({
     return "FILE";
   }, [filepath, isSkillFile, isSpreadsheetFile, language]);
 
-  const [viewMode, setViewMode] = useState<"code" | "preview">("code");
+  const [viewMode, setViewMode] = useState<"code" | "preview" | "edit">("code");
   const [allowAutoViewSwitch, setAllowAutoViewSwitch] = useState(true);
   const [installDialogOpen, setInstallDialogOpen] = useState(false);
   const [showPreviewSwitchPulse, setShowPreviewSwitchPulse] = useState(false);
@@ -274,13 +280,18 @@ export function ArtifactFileDetail({
       return;
     }
 
-    if (isSupportPreview) {
-      setViewMode("preview");
-      return;
-    }
+    if (language === "html") {
+      setViewMode(thread.isLoading ? "code" : "preview");
+      return;
+    }
+
+    if (isSupportPreview) {
+      setViewMode("preview");
+      return;
+    }
 
     setViewMode("code");
-  }, [isPreviewStreaming, isSupportPreview]);
+  }, [isPreviewStreaming, isSupportPreview, language, thread.isLoading]);
 
   useEffect(() => {
     if (!allowAutoViewSwitch || !isAutoPreviewLanguage) {
@@ -583,28 +594,30 @@ export function ArtifactFileDetail({
               {fileTypeLabel}
             </span>
             {!hideFileName && (
-              <ArtifactTitle className="min-w-0">
-                {useWriteFileStreaming ? (
-                  <div className="truncate px-3">{getFileName(filepath)}</div>
-                ) : hasMultipleArtifacts ? (
-                  <Select value={filepath} onValueChange={select}>
-                    <SelectTrigger className="text-foreground h-8 min-w-0 max-w-[16rem] border-none bg-transparent! px-3 shadow-none select-none focus-visible:ring-0 focus:outline-0 active:outline-0">
-                      <SelectValue placeholder="Select a file" />
-                    </SelectTrigger>
-                    <SelectContent className="select-none">
-                      <SelectGroup>
-                        {(artifacts ?? []).map((artifactPath) => (
-                          <SelectItem key={artifactPath} value={artifactPath}>
-                            {getFileName(artifactPath)}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                ) : (
-                  <div className="truncate px-3">{getFileName(filepath)}</div>
-                )}
-              </ArtifactTitle>
+            <ArtifactTitle className="min-w-0">
+              {/* markdown：隐藏文件名（仅留 MD 徽标），把横向空间让给工具栏，避免窄面板下
+                  工具栏换行错位；多文件仍保留切换下拉（靠它切文件）。文件名仍可在下载/另存为时取到。 */}
+              {language === "markdown" && !hasMultipleArtifacts ? null : useWriteFileStreaming ? (
+                <div className="truncate px-3">{getFileName(filepath)}</div>
+              ) : hasMultipleArtifacts ? (
+                <Select value={filepath} onValueChange={select}>
+                  <SelectTrigger className="text-foreground h-8 min-w-0 max-w-[16rem] border-none bg-transparent! px-3 shadow-none select-none focus-visible:ring-0 focus:outline-0 active:outline-0">
+                    <SelectValue placeholder="Select a file" />
+                  </SelectTrigger>
+                  <SelectContent className="select-none">
+                    <SelectGroup>
+                      {(artifacts ?? []).map((artifactPath) => (
+                        <SelectItem key={artifactPath} value={artifactPath}>
+                          {getFileName(artifactPath)}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              ) : (
+                <div className="truncate px-3">{getFileName(filepath)}</div>
+              )}
+            </ArtifactTitle>
             )}
           </div>
         </div>
@@ -625,10 +638,19 @@ export function ArtifactFileDetail({
                 onValueChange={(value) => {
                   if (value) {
                     setAllowAutoViewSwitch(false);
-                    setViewMode(value as "code" | "preview");
+                    setViewMode(value as "code" | "preview" | "edit");
                   }
                 }}
               >
+                {canUseAiEditor && (
+                  <ToggleGroupItem
+                    className="text-muted-foreground h-8 min-w-10 rounded-full border-0 bg-transparent px-3 shadow-none data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-[0_6px_14px_-10px_rgba(15,23,42,0.35)]"
+                    value="edit"
+                    aria-label="AI 写作编辑"
+                  >
+                    <SparklesIcon />
+                  </ToggleGroupItem>
+                )}
                 <ToggleGroupItem
                   className="text-muted-foreground h-8 min-w-10 rounded-full border-0 bg-transparent px-3 shadow-none data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-[0_6px_14px_-10px_rgba(15,23,42,0.35)]"
                   value="code"
@@ -789,6 +811,17 @@ export function ArtifactFileDetail({
             滑动到底部并继续自动下滑
           </button>
         )}
+        {viewMode === "edit" && canUseAiEditor && (
+          <MarkdownAiEditor
+            // 编辑用原始内容（与源码模式一致，不脱敏）；保存仍走头部「保存 Markdown」按钮。
+            markdown={displayContent ?? ""}
+            onChange={(value) => {
+              setDraftContent(value);
+              setHasLocalEdits(true);
+            }}
+            threadId={threadId}
+          />
+        )}
         {isSupportPreview &&
           viewMode === "preview" &&
           (language === "markdown" ||