feat(ui): refresh chat and settings interactions

apps/ui/src/App.tsx

 import { useEffect, useMemo, useRef, useState } from "react";
 import brandIcon from "./assets/brand-icon.png";
-import type { ReactNode, ChangeEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
+import type { ReactNode, ChangeEvent, DragEvent as ReactDragEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
 import type {
   AppConfig,
   ChatAttachment,
@@ -34,6 +34,7 @@ type Tone = "positive" | "warning" | "info";
 type MessageStreamState = "streaming" | "error";
 type SendPhase = "idle" | "preparing" | "streaming" | "finalizing";
 type TraceTone = "info" | "error" | "success";
+type MessageReaction = "up" | "down";
 type MessagesBySession = Record<string, UiChatMessage[]>;
 
 type UiChatMessage = ChatMessage & {
@@ -564,7 +565,7 @@ const ui = {
   expertReady: "\u5df2\u5c31\u7eea",
   activeExpert: "\u5f53\u524d\u4e13\u5bb6",
   starterQuestionsHint: "\u70b9\u51fb\u95ee\u9898\u540e\u4f1a\u5148\u586b\u5165\u8f93\u5165\u6846\uff0c\u4f60\u53ef\u4ee5\u7ee7\u7eed\u8865\u5145\u540e\u518d\u53d1\u9001\u3002",
-  taskPlaceholder: "\u8f93\u5165\u4f60\u7684\u9700\u6c42\uff0c\u53ef\u7528 Ctrl+Enter \u53d1\u9001\u3002",
+  taskPlaceholder: "\u8f93\u5165\u4f60\u7684\u9700\u6c42\uff0cEnter \u53d1\u9001\uff0cShift+Enter \u6362\u884c\u3002",
   taskDisabledPlaceholder: "\u8bf7\u5148\u7ed1\u5b9a\u5458\u5de5\u5bc6\u94a5\u540e\u5f00\u59cb\u5bf9\u8bdd\u3002",
   send: "\u53d1\u9001",
   sending: "\u53d1\u9001\u4e2d...",
@@ -615,6 +616,9 @@ const ui = {
   suggestionDismiss: "暂不切换",
   suggestionSwitchAction: "切换并继续",
   saveSuccessPending: "\u5458\u5de5\u5bc6\u94a5\u5df2\u4fdd\u5b58\uff0c\u6b63\u5728\u540c\u6b65\u8fd0\u884c\u65f6\u914d\u7f6e\u3002",
+  saveSuccessApplied: "\u6a21\u578b\u914d\u7f6e\u5df2\u4fdd\u5b58\uff0c\u65b0\u7684\u914d\u7f6e\u5c06\u5728\u540e\u7eed\u6267\u884c\u4e2d\u751f\u6548\u3002",
+  copy: "\u590d\u5236",
+  copied: "\u5df2\u590d\u5236",
   bindFirst: "\u8bf7\u5148\u7ed1\u5b9a",
   bindFirstError: "\u8bf7\u5148\u7ed1\u5b9a\u5458\u5de5\u5bc6\u94a5\u540e\u518d\u53d1\u9001\u6d88\u606f\u3002",
   startingHint: "\u6b63\u5728\u51c6\u5907\u8fd0\u884c\u73af\u5883\uff0c\u8bf7\u7a0d\u5019\u3002",
@@ -1291,15 +1295,338 @@ type ExpertVisualKey =
   | "geo"
   | "leads";
 
-function SendArrowIcon() {
+function SendRocketIcon() {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <path d="M19 12H7" />
-      <path d="m12 7-5 5 5 5" />
+    <span className="send-rocket-pair" aria-hidden="true">
+      {[0, 1].map((index) => (
+        <svg key={index} viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+          <path d="M12.9 4.2c2.4 1.2 4.1 3.3 4.9 6.1-2.4.8-4.6 2.4-6.3 4.5l-1.9 2.5-1.9-.5.5-1.9 2.5-1.9c2.1-1.7 3.7-3.9 4.5-6.3-1.2-.3-2.4-.1-3.4.8l-4.2 4.2-2.6.7.7-2.6 4.2-4.2c1.6-1.6 3.9-2.1 6-1.4Z" fill="currentColor" />
+          <path d="M8.2 15.8 6 18l-1.6-1.6 2.2-2.2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M14.3 5.6 18.4 9.7" stroke="#ffffff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.72" />
+        </svg>
+      ))}
+    </span>
+  );
+}
+
+function AttachmentIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+      <path d="M8.5 12.7 14 7.2a3.5 3.5 0 1 1 5 5L11 20.1a5.5 5.5 0 0 1-7.8-7.8l8.2-8.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function CopyIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+      <rect x="9" y="9" width="10" height="10" rx="2" stroke="currentColor" strokeWidth="1.7" />
+      <path d="M6 15V7a2 2 0 0 1 2-2h8" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+      <path d="M5.5 12.5 10 17l8.5-9" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ArrowUpIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+      <path d="M12 18V6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <path d="m7 11 5-5 5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function RefreshIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+      <path d="M20 6v5h-5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M19 11a7 7 0 1 0 1.6 4.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 }
 
+function ThumbIcon({ direction }: { direction: MessageReaction }) {
+  return direction === "up" ? (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+      <path d="M7 11v9H4v-9h3Zm3 9h6.4c1.2 0 2.2-.8 2.5-1.9l1.3-4.6c.4-1.5-.7-3-2.3-3H14V5.8c0-1-.8-1.8-1.8-1.8a1 1 0 0 0-.9.5L8.1 11.1a2 2 0 0 0-.3 1V20h2.2Z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ) : (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+      <path d="M7 4v9H4V4h3Zm3 0h6.4c1.2 0 2.2.8 2.5 1.9l1.3 4.6c.4 1.5-.7 3-2.3 3H14v4.7c0 1-.8 1.8-1.8 1.8a1 1 0 0 1-.9-.5l-3.2-6.6a2 2 0 0 1-.3-1V4h2.2Z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function MoreIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
+      <circle cx="6.5" cy="12" r="1.5" />
+      <circle cx="12" cy="12" r="1.5" />
+      <circle cx="17.5" cy="12" r="1.5" />
+    </svg>
+  );
+}
+
+function formatCodeLanguageLabel(language: string): string {
+  const normalized = language.trim().toLowerCase();
+  if (!normalized) {
+    return "Text";
+  }
+
+  const aliases: Record<string, string> = {
+    js: "JavaScript",
+    ts: "TypeScript",
+    jsx: "React JSX",
+    tsx: "React TSX",
+    py: "Python",
+    sh: "Shell",
+    yml: "YAML",
+    md: "Markdown"
+  };
+
+  return aliases[normalized] ?? normalized.charAt(0).toUpperCase() + normalized.slice(1);
+}
+
+function renderMarkdownInline(text: string, keyPrefix: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  const pattern = /`([^`]+)`|\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*\n]+)\*|_([^_\n]+)_/g;
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+  let tokenIndex = 0;
+
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > cursor) {
+      nodes.push(text.slice(cursor, match.index));
+    }
+
+    const key = `${keyPrefix}-${tokenIndex}`;
+    if (match[1]) {
+      nodes.push(<code key={key} className="markdown-inline-code">{match[1]}</code>);
+    } else if (match[2] && match[3]) {
+      nodes.push(
+        <a key={key} href={match[3]} target="_blank" rel="noreferrer" className="markdown-link">
+          {renderMarkdownInline(match[2], `${key}-link`)}
+        </a>
+      );
+    } else if (match[4] || match[5]) {
+      nodes.push(<strong key={key}>{renderMarkdownInline(match[4] || match[5] || "", `${key}-strong`)}</strong>);
+    } else if (match[6] || match[7]) {
+      nodes.push(<em key={key}>{renderMarkdownInline(match[6] || match[7] || "", `${key}-em`)}</em>);
+    }
+
+    cursor = pattern.lastIndex;
+    tokenIndex += 1;
+  }
+
+  if (cursor < text.length) {
+    nodes.push(text.slice(cursor));
+  }
+
+  return nodes;
+}
+
+function renderParagraphLines(lines: string[], keyPrefix: string): ReactNode[] {
+  return lines.flatMap((line, lineIndex) => [
+    lineIndex > 0 ? <br key={`${keyPrefix}-br-${lineIndex}`} /> : null,
+    ...renderMarkdownInline(line, `${keyPrefix}-line-${lineIndex}`)
+  ]);
+}
+
+function renderMarkdownHeading(level: number, key: string, children: ReactNode[]) {
+  switch (level) {
+    case 1:
+      return <h1 key={key}>{children}</h1>;
+    case 2:
+      return <h2 key={key}>{children}</h2>;
+    case 3:
+      return <h3 key={key}>{children}</h3>;
+    case 4:
+      return <h4 key={key}>{children}</h4>;
+    case 5:
+      return <h5 key={key}>{children}</h5>;
+    default:
+      return <h6 key={key}>{children}</h6>;
+  }
+}
+
+function renderMarkdownBlocks(
+  text: string,
+  keyPrefix: string
+): ReactNode[] {
+  const normalized = text.replace(/\r\n?/g, "\n");
+  const lines = normalized.split("\n");
+  const blocks: ReactNode[] = [];
+  let index = 0;
+
+  const isBlockBoundary = (line: string) => {
+    const trimmed = line.trim();
+    return !trimmed
+      || /^#{1,6}\s+/.test(trimmed)
+      || /^>\s?/.test(trimmed)
+      || /^[-*_]{3,}\s*$/.test(trimmed)
+      || /^\s*[-*]\s+/.test(trimmed)
+      || /^\s*\d+\.\s+/.test(trimmed);
+  };
+
+  while (index < lines.length) {
+    const current = lines[index];
+    const trimmed = current.trim();
+
+    if (!trimmed) {
+      index += 1;
+      continue;
+    }
+
+    const headingMatch = /^(#{1,6})\s+(.*)$/.exec(trimmed);
+    if (headingMatch) {
+      const level = Math.min(headingMatch[1].length, 6);
+      blocks.push(
+        renderMarkdownHeading(
+          level,
+          `${keyPrefix}-heading-${index}`,
+          renderMarkdownInline(headingMatch[2], `${keyPrefix}-heading-${index}`)
+        )
+      );
+      index += 1;
+      continue;
+    }
+
+    if (/^[-*_]{3,}\s*$/.test(trimmed)) {
+      blocks.push(<hr key={`${keyPrefix}-rule-${index}`} className="markdown-rule" />);
+      index += 1;
+      continue;
+    }
+
+    if (/^>\s?/.test(trimmed)) {
+      const quoteLines: string[] = [];
+      while (index < lines.length && /^>\s?/.test(lines[index].trim())) {
+        quoteLines.push(lines[index].replace(/^\s*>\s?/, ""));
+        index += 1;
+      }
+      blocks.push(
+        <blockquote key={`${keyPrefix}-quote-${index}`} className="markdown-quote">
+          <p>{renderParagraphLines(quoteLines, `${keyPrefix}-quote-${index}`)}</p>
+        </blockquote>
+      );
+      continue;
+    }
+
+    if (/^\s*[-*]\s+/.test(trimmed)) {
+      const items: string[] = [];
+      while (index < lines.length && /^\s*[-*]\s+/.test(lines[index].trim())) {
+        items.push(lines[index].replace(/^\s*[-*]\s+/, ""));
+        index += 1;
+      }
+      blocks.push(
+        <ul key={`${keyPrefix}-ul-${index}`} className="markdown-list markdown-list-unordered">
+          {items.map((item, itemIndex) => (
+            <li key={`${keyPrefix}-ul-${index}-${itemIndex}`}>{renderMarkdownInline(item, `${keyPrefix}-ul-item-${itemIndex}`)}</li>
+          ))}
+        </ul>
+      );
+      continue;
+    }
+
+    if (/^\s*\d+\.\s+/.test(trimmed)) {
+      const items: string[] = [];
+      while (index < lines.length && /^\s*\d+\.\s+/.test(lines[index].trim())) {
+        items.push(lines[index].replace(/^\s*\d+\.\s+/, ""));
+        index += 1;
+      }
+      blocks.push(
+        <ol key={`${keyPrefix}-ol-${index}`} className="markdown-list markdown-list-ordered">
+          {items.map((item, itemIndex) => (
+            <li key={`${keyPrefix}-ol-${index}-${itemIndex}`}>{renderMarkdownInline(item, `${keyPrefix}-ol-item-${itemIndex}`)}</li>
+          ))}
+        </ol>
+      );
+      continue;
+    }
+
+    const paragraphLines: string[] = [];
+    while (index < lines.length && !isBlockBoundary(lines[index])) {
+      paragraphLines.push(lines[index]);
+      index += 1;
+    }
+    blocks.push(
+      <p key={`${keyPrefix}-p-${index}`} className="markdown-paragraph">
+        {renderParagraphLines(paragraphLines, `${keyPrefix}-p-${index}`)}
+      </p>
+    );
+  }
+
+  return blocks;
+}
+
+function renderMarkdownContent(
+  content: string,
+  options: {
+    messageId: string;
+    copiedToken: string;
+    onCopy: (token: string, text: string) => void | Promise<void>;
+  }
+): ReactNode[] {
+  const normalized = content.replace(/\r\n?/g, "\n");
+  const blocks: ReactNode[] = [];
+  const fencePattern = /```([^\n`]*)\n([\s\S]*?)```/g;
+  let cursor = 0;
+  let blockIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = fencePattern.exec(normalized)) !== null) {
+    const proseBeforeFence = normalized.slice(cursor, match.index);
+    if (proseBeforeFence.trim()) {
+      blocks.push(...renderMarkdownBlocks(proseBeforeFence, `${options.messageId}-md-${blockIndex}`));
+      blockIndex += 1;
+    }
+
+    const language = (match[1] || "").trim().split(/\s+/)[0] || "";
+    const code = match[2].replace(/\n$/, "");
+    const copyToken = `message:${options.messageId}:code:${blockIndex}`;
+    blocks.push(
+      <div key={`${options.messageId}-code-${blockIndex}`} className="markdown-code-block">
+        <div className="markdown-code-toolbar">
+          <span>{formatCodeLanguageLabel(language)}</span>
+          <button
+            type="button"
+            className={"markdown-code-copy" + (options.copiedToken === copyToken ? " copied" : "")}
+            aria-label="复制代码"
+            title="复制代码"
+            onClick={() => void options.onCopy(copyToken, code)}
+          >
+            {options.copiedToken === copyToken ? <CheckIcon /> : <CopyIcon />}
+          </button>
+        </div>
+        <pre className="markdown-code-pre">
+          <code>{code}</code>
+        </pre>
+      </div>
+    );
+    cursor = match.index + match[0].length;
+    blockIndex += 1;
+  }
+
+  const trailingProse = normalized.slice(cursor);
+  if (trailingProse.trim()) {
+    blocks.push(...renderMarkdownBlocks(trailingProse, `${options.messageId}-md-${blockIndex}`));
+  }
+
+  return blocks.length > 0
+    ? blocks
+    : [
+        <p key={`${options.messageId}-md-empty`} className="markdown-paragraph">
+          {renderParagraphLines([normalized], `${options.messageId}-md-empty`)}
+        </p>
+      ];
+}
+
 const SIDEBAR_EXPERT_ENTRY_ORDER = new Map<string, number>([
   ["xhs", 20],
   ["douyin", 21],
@@ -1670,16 +1997,21 @@ export default function App() {
   const [errorText, setErrorText] = useState("");
   const [infoText, setInfoText] = useState("");
   const [messageTraces, setMessageTraces] = useState<Record<string, MessageTraceState>>({});
+  const [messageReactions, setMessageReactions] = useState<Record<string, MessageReaction | undefined>>({});
   const [sidebarSessionTitles, setSidebarSessionTitles] = useState<Record<string, string>>({});
+  const [sessionActionMenuId, setSessionActionMenuId] = useState("");
   const [skillMenuOpen, setSkillMenuOpen] = useState(false);
+  const [isComposerDragOver, setIsComposerDragOver] = useState(false);
+  const [copiedToken, setCopiedToken] = useState("");
   const activeStreamRef = useRef<ActiveStreamState | null>(null);
   const skillMenuRef = useRef<HTMLDivElement | null>(null);
   const attachmentInputRef = useRef<HTMLInputElement | null>(null);
+  const copiedTokenResetRef = useRef<number | null>(null);
+  const composerDragDepthRef = useRef(0);
   const startupWarmupRequestedRef = useRef(false);
   const [streamSmoke, setStreamSmoke] = useState<SmokeStreamSnapshot | null>(null);
   const minimizeWindow = () => void desktopApi.window.minimize();
   const maximizeWindow = () => void desktopApi.window.maximize();
-  const closeWindow = () => void desktopApi.window.close();
   const catalogSkills = workspace?.skills ?? [];
   const readySkills = useMemo(() => catalogSkills.filter((skill) => skill.ready), [catalogSkills]);
   const effectiveSkills = useMemo(() => (readySkills.length ? [DEFAULT_SKILL, ...readySkills] : [DEFAULT_SKILL]), [readySkills]);
@@ -1771,6 +2103,16 @@ export default function App() {
   const showStartupOverlay = startupStateActive && !hasVisibleConversation;
   const sending = sendPhase !== "idle";
   const canSend = isBound && hasConversationProject && (prompt.trim().length > 0 || Boolean(composerAttachment)) && !sending && !saving;
+  const hasPendingLobsterKey = lobsterKeyDraft.trim().length > 0;
+  const hasPendingModelKeys = Boolean(
+    imageModelApiKeyDraft.trim()
+    || videoModelApiKeyDraft.trim()
+    || copywritingModelApiKeyDraft.trim()
+    || digitalHumanVolcAccessKeyDraft.trim()
+    || digitalHumanVolcSecretKeyDraft.trim()
+    || digitalHumanQiniuAccessKeyDraft.trim()
+    || digitalHumanQiniuSecretKeyDraft.trim()
+  );
   const sendButtonLabel = sendPhase === "preparing"
     ? ui.preparing
     : sendPhase === "streaming" || sendPhase === "finalizing"
@@ -1785,7 +2127,7 @@ export default function App() {
   const pluginGroups = useMemo(() => groupPluginsByStatus(workspace?.plugins), [workspace?.plugins]);
 
   useEffect(() => {
-    if (viewMode !== "experts") {
+    if (viewMode !== "chat" && viewMode !== "experts") {
       clearComposerAttachment();
     }
   }, [viewMode]);
@@ -1829,6 +2171,12 @@ export default function App() {
     return () => window.clearTimeout(timer);
   }, [infoText]);
 
+  useEffect(() => () => {
+    if (copiedTokenResetRef.current !== null) {
+      window.clearTimeout(copiedTokenResetRef.current);
+    }
+  }, []);
+
   function updateSessionMessages(sessionId: string, updater: (current: UiChatMessage[]) => UiChatMessage[]) {
     if (!sessionId) {
       return;
@@ -3060,7 +3408,7 @@ export default function App() {
       setDigitalHumanVolcSecretKeyDraft("");
       setDigitalHumanQiniuAccessKeyDraft("");
       setDigitalHumanQiniuSecretKeyDraft("");
-      setInfoText(trimmedLobsterKey ? ui.saveSuccessPending : "模型配置已保存。");
+      setInfoText(trimmedLobsterKey ? ui.saveSuccessPending : ui.saveSuccessApplied);
       void refresh(false);
     } catch (error) {
       setErrorText(err(error));
@@ -3351,16 +3699,37 @@ export default function App() {
   }
 
   async function handleComposerKeyDown(event: ReactKeyboardEvent<HTMLTextAreaElement>) {
-    if (event.key !== "Enter" || event.shiftKey || event.altKey) {
+    if (event.nativeEvent.isComposing || event.key !== "Enter" || event.shiftKey || event.altKey) {
       return;
     }
 
-    if (!(event.ctrlKey || event.metaKey)) {
+    event.preventDefault();
+    await sendPrompt();
+  }
+
+  async function closeWindow() {
+    await desktopApi.window.close();
+  }
+
+  async function handleCopyText(token: string, text: string) {
+    const resolved = text.trim();
+    if (!resolved) {
       return;
     }
 
-    event.preventDefault();
-    await sendPrompt();
+    try {
+      await navigator.clipboard.writeText(resolved);
+      setCopiedToken(token);
+      if (copiedTokenResetRef.current !== null) {
+        window.clearTimeout(copiedTokenResetRef.current);
+      }
+      copiedTokenResetRef.current = window.setTimeout(() => {
+        setCopiedToken("");
+        copiedTokenResetRef.current = null;
+      }, 2000);
+    } catch (error) {
+      setErrorText(err(error));
+    }
   }
 
   async function continuePendingHomePromptInHome() {
@@ -3433,6 +3802,72 @@ export default function App() {
     }
   }
 
+  function acceptComposerAttachmentFile(file: File) {
+    const localPath = (file as File & { path?: string }).path?.trim();
+    if (!localPath) {
+      setErrorText("当前客户端未提供本地图片路径，无法把图片透传到项目工作区。");
+      return;
+    }
+
+    if (file.type && !file.type.startsWith("image/")) {
+      setErrorText("当前附件只支持图片。");
+      return;
+    }
+
+    setErrorText("");
+    setComposerAttachment({
+      kind: "image",
+      name: file.name || localPath.split(/[\\/]/).pop() || "image",
+      mimeType: file.type || "application/octet-stream",
+      localPath
+    });
+  }
+
+  function handleComposerDragEnter(event: ReactDragEvent<HTMLFormElement>) {
+    if (!event.dataTransfer?.files?.length) {
+      return;
+    }
+
+    event.preventDefault();
+    composerDragDepthRef.current += 1;
+    setIsComposerDragOver(true);
+  }
+
+  function handleComposerDragOver(event: ReactDragEvent<HTMLFormElement>) {
+    if (!event.dataTransfer?.files?.length) {
+      return;
+    }
+
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  }
+
+  function handleComposerDragLeave(event: ReactDragEvent<HTMLFormElement>) {
+    if (!event.dataTransfer?.files?.length) {
+      return;
+    }
+
+    event.preventDefault();
+    composerDragDepthRef.current = Math.max(0, composerDragDepthRef.current - 1);
+    if (composerDragDepthRef.current === 0) {
+      setIsComposerDragOver(false);
+    }
+  }
+
+  function handleComposerDrop(event: ReactDragEvent<HTMLFormElement>) {
+    if (!event.dataTransfer?.files?.length) {
+      return;
+    }
+
+    event.preventDefault();
+    composerDragDepthRef.current = 0;
+    setIsComposerDragOver(false);
+    const file = event.dataTransfer.files[0];
+    if (file) {
+      acceptComposerAttachmentFile(file);
+    }
+  }
+
   async function openAttachmentPicker() {
     if (window.qjcDesktop) {
       const attachment = await desktopApi.chat.pickImageAttachment();
@@ -3453,6 +3888,11 @@ export default function App() {
       return;
     }
 
+    acceptComposerAttachmentFile(file);
+    event.target.value = "";
+    return;
+
+    /*
     const localPath = (file as File & { path?: string }).path?.trim();
     if (!localPath) {
       setErrorText("当前客户端未提供本地图片路径，无法把图片透传到项目工作区。");
@@ -3485,9 +3925,35 @@ export default function App() {
       mimeType: file.type || "application/octet-stream",
       localPath
     });
+    */
     event.target.value = "";
   }
 
+  async function regenerateAssistantMessage(messageId: string) {
+    if (sending || !visibleSessionId || !sessionScopeProjectId) {
+      return;
+    }
+
+    const targetIndex = messages.findIndex((message) => message.id === messageId);
+    if (targetIndex < 0) {
+      return;
+    }
+
+    const previousUserMessage = [...messages.slice(0, targetIndex)].reverse().find((message) => message.role === "user" && message.content.trim());
+    if (!previousUserMessage) {
+      return;
+    }
+
+    await submitPrompt(previousUserMessage.content, selectedSkill.id, visibleSessionId, sessionScopeProjectId);
+  }
+
+  function toggleMessageReaction(messageId: string, reaction: MessageReaction) {
+    setMessageReactions((current) => ({
+      ...current,
+      [messageId]: current[messageId] === reaction ? undefined : reaction
+    }));
+  }
+
   function chooseSkill(skillId: string) {
     setSelectedSkillId(skillId);
     setSkillMenuOpen(false);
@@ -3506,6 +3972,7 @@ export default function App() {
   function openSession(sessionId: string) {
     setViewMode((current) => (current === "experts" ? "experts" : "chat"));
     setActiveSessionId(sessionId);
+    setSessionActionMenuId("");
   }
 
   async function switchExpert(projectId: string) {
@@ -3587,14 +4054,15 @@ export default function App() {
 
   const sidebarSessionLabel = viewMode === "experts" ? "专家会话" : "会话管理";
   const selectedSkillBadge = selectedSkillId === DEFAULT_SKILL.id ? "千匠问天" : "@" + selectedSkill.name;
-  const panelNewSessionAction = (
+  const sidebarNewSessionAction = (
     <button
       type="button"
-      className="secondary conversation-new-session"
+      className="sidebar-new-session app-no-drag !flex !min-h-12 !items-center !justify-center !gap-2 !rounded-[18px] !border !border-[#d7e8ff] !bg-white !px-4 !text-[14px] !font-semibold !text-[#1d4ed8] !shadow-[0_14px_30px_rgba(59,130,246,0.08)] transition hover:!border-[#bfdbfe] hover:!bg-[#f8fbff]"
       disabled={projectActionPending || !isBound || !projects.length}
       onClick={() => void createProjectSession()}
     >
-      <span className="conversation-new-session-label">新建对话</span>
+      <span className="text-lg leading-none">+</span>
+      <span className="conversation-new-session-label">新对话</span>
     </button>
   );
   const conversationPanelTitle = viewMode === "experts" ? activeExpertName : "对话";
@@ -3603,7 +4071,7 @@ export default function App() {
       <span className="home-microcopy-icon">
         <LobsterClawIcon />
       </span>
-      <span className="home-microcopy-text">{homeChatCopy.microcopy}</span>
+      <span className="home-microcopy-text">当前对话</span>
       <span className="home-microcopy-tag">{selectedSkillBadge}</span>
     </div>
   ) : (
@@ -3636,11 +4104,7 @@ export default function App() {
     </div>
   );
   const isDouyinExpertGuide = viewMode === "experts" && activeExpertKey === "douyin";
-  const composerPlaceholder = isBound
-    ? viewMode === "experts"
-      ? activeExpertGuide.placeholder ?? ui.taskPlaceholder
-      : ui.taskPlaceholder
-    : ui.taskDisabledPlaceholder;
+  const composerPlaceholder = isBound ? "" : ui.taskDisabledPlaceholder;
   const activeEmptyState = viewMode === "experts" ? (
     isDouyinExpertGuide ? (
       <div className="empty-state expert-empty-state expert-empty-state-douyin">
@@ -3720,16 +4184,19 @@ export default function App() {
   );
 
   const messageListContent = (
-    <div className={"message-list" + (viewMode === "chat" ? " message-list-home" : "") + (viewMode === "experts" && activeExpertKey === "xiaohongshu" ? " message-list-xiaohongshu" : "")}>
+    <div className={"message-list chat-scroll-smooth !flex !min-h-0 !w-full !flex-1 !flex-col !gap-7 !overflow-y-auto !bg-transparent !px-0 !py-3" + (viewMode === "chat" ? " message-list-home" : "") + (viewMode === "experts" && activeExpertKey === "xiaohongshu" ? " message-list-xiaohongshu" : "")}>
       {messages.map((message) => {
         const showThinking = message.role === "assistant" && message.streamState === "streaming" && !message.content.trim();
         const videoStatusCard = showThinking ? buildDouyinVideoStatusCard(message, activeExpertKey) : null;
         const messageTrace = message.role === "assistant" ? messageTraces[message.id] : undefined;
         const hasTrace = Boolean(messageTrace?.items.length);
         const isTraceExpanded = Boolean(messageTrace?.expanded);
+        const canCopyMessage = Boolean(message.content.trim());
+        const copyToken = `message:${message.id}`;
+        const reaction = messageReactions[message.id];
         return (
-          <article key={message.id} className={"message-card " + message.role + (message.streamState ? " " + message.streamState : "")}>
-            <div className="message-bubble">
+          <article key={message.id} className={"message-card group relative !w-full !max-w-full !min-w-0 " + message.role + (message.streamState ? " " + message.streamState : "") + (message.role === "user" ? " !flex !justify-end" : " !flex !justify-start")}>
+            <div className={"message-bubble " + (message.role === "assistant" ? "!w-full !max-w-full !min-w-0 !rounded-none !border-0 !bg-transparent !pl-[2ch] !pr-0 !py-0 !shadow-none" : "animate-user-bubble-in !ml-auto !inline-flex !w-fit !max-w-[min(82%,720px)] !min-w-0 !flex-col !rounded-[20px] !border !border-[#dbeafe] !bg-[#f0f7ff] !px-5 !py-4 !shadow-[0_12px_30px_rgba(59,130,246,0.08)]")}>
               {showThinking ? (
                 videoStatusCard ? (
                   <div className="generation-status-card" aria-live="polite">
@@ -3752,10 +4219,21 @@ export default function App() {
                   </div>
                 )
               ) : message.content ? (
-                <p>
-                  {message.content}
-                  {message.streamState === "streaming" ? <span className="message-cursor" aria-hidden="true" /> : null}
-                </p>
+                message.role === "assistant" ? (
+                  <div className="markdown-body !gap-4 text-[15px] leading-8 text-[#0f172a]">
+                    {renderMarkdownContent(message.content, {
+                      messageId: message.id,
+                      copiedToken,
+                      onCopy: handleCopyText
+                    })}
+                    {message.streamState === "streaming" ? <span className="message-cursor" aria-hidden="true" /> : null}
+                  </div>
+                ) : (
+                  <p className="message-plain-text !m-0 text-[15px] leading-8 text-[#0f172a]">
+                    {message.content}
+                    {message.streamState === "streaming" ? <span className="message-cursor" aria-hidden="true" /> : null}
+                  </p>
+                )
               ) : null}
               {hasTrace ? (
                 <div className="message-trace">
@@ -3776,6 +4254,51 @@ export default function App() {
                 </div>
               ) : null}
             </div>
+            {message.role === "assistant" && canCopyMessage ? (
+              <div className="message-card-actions !mt-3 !justify-start !opacity-0 !transition !duration-150 group-hover:!opacity-100">
+                <button
+                  type="button"
+                  className={"message-action-icon !h-8 !w-8 !rounded-full !border-0 !bg-white !text-[#64748b] !shadow-[0_10px_24px_rgba(148,163,184,0.18)] hover:!bg-[#f8fbff] " + (copiedToken === copyToken ? " copied !bg-[#ecfdf3] !text-[#16a34a]" : "")}
+                  onClick={() => void handleCopyText(copyToken, message.content)}
+                  aria-label="复制消息"
+                  title="复制消息"
+                >
+                  {copiedToken === copyToken ? <CheckIcon /> : <CopyIcon />}
+                </button>
+                {message.role === "assistant" ? (
+                  <>
+                    <button
+                      type="button"
+                      className="hidden"
+                      onClick={() => void regenerateAssistantMessage(message.id)}
+                      disabled={sending}
+                      aria-label="重新生成"
+                      title="重新生成"
+                    >
+                      <RefreshIcon />
+                    </button>
+                    <button
+                      type="button"
+                      className="hidden"
+                      onClick={() => toggleMessageReaction(message.id, "up")}
+                      aria-label="赞"
+                      title="赞"
+                    >
+                      <ThumbIcon direction="up" />
+                    </button>
+                    <button
+                      type="button"
+                      className="hidden"
+                      onClick={() => toggleMessageReaction(message.id, "down")}
+                      aria-label="踩"
+                      title="踩"
+                    >
+                      <ThumbIcon direction="down" />
+                    </button>
+                  </>
+                ) : null}
+              </div>
+            ) : null}
           </article>
         );
       })}
@@ -3828,7 +4351,17 @@ export default function App() {
       : messageListContent;
 
   const composerContent = (
-    <div className={"composer-shell" + (viewMode === "chat" ? " composer-shell-home" : "") + (viewMode === "experts" && activeExpertKey === "xiaohongshu" ? " composer-shell-xiaohongshu" : "")}>
+    <form
+      className={"composer-shell relative !mt-2 !flex !w-full !flex-col !gap-3 !rounded-[24px] !border !border-[#d7e8ff] !bg-white !px-5 !py-4 !shadow-[0_24px_60px_rgba(148,163,184,0.14)]" + (isComposerDragOver ? " dragging !border-[#60a5fa] !bg-[#f8fbff]" : "") + (viewMode === "chat" ? " composer-shell-home" : "") + (viewMode === "experts" && activeExpertKey === "xiaohongshu" ? " composer-shell-xiaohongshu" : "")}
+      onSubmit={(event) => {
+        event.preventDefault();
+        void sendPrompt();
+      }}
+      onDragEnter={handleComposerDragEnter}
+      onDragOver={handleComposerDragOver}
+      onDragLeave={handleComposerDragLeave}
+      onDrop={handleComposerDrop}
+    >
       <input
         ref={attachmentInputRef}
         className="composer-attachment-input"
@@ -3837,18 +4370,20 @@ export default function App() {
         tabIndex={-1}
         onChange={handleAttachmentSelection}
       />
-      <label className="composer-field">
+      {isComposerDragOver ? <div className="composer-drop-indicator !min-h-14 !rounded-[18px] !border-dashed !border-[#93c5fd] !bg-[#f0f7ff] !text-[#2563eb]">释放以上传图片</div> : null}
+      <label className="composer-field !gap-0">
         <textarea
           value={prompt}
           disabled={!isBound}
           onChange={(event) => setPrompt(event.target.value)}
           onKeyDown={(event) => void handleComposerKeyDown(event)}
           placeholder={composerPlaceholder}
+          className="!min-h-[60px] !rounded-none !border-0 !bg-transparent !p-0 !text-[15px] !leading-8 !text-[#0f172a] placeholder:!text-transparent"
         />
       </label>
       {composerAttachment ? (
-        <div className="composer-attachment-strip">
-          <span className="composer-attachment-chip">
+        <div className="composer-attachment-strip !mt-0">
+          <span className="composer-attachment-chip !rounded-full !border !border-[#d7e8ff] !bg-[#f0f7ff] !px-3 !py-2">
             <span className="composer-attachment-chip-label">{composerAttachment.name}</span>
             <button type="button" className="composer-attachment-remove" onClick={() => clearComposerAttachment()} aria-label="移除图片附件">
               x
@@ -3856,14 +4391,17 @@ export default function App() {
           </span>
         </div>
       ) : null}
-      <div className="composer-footer">
-        <div className="composer-left-tools" ref={skillMenuRef}>
+      <div className="composer-footer !items-end !justify-between !gap-4">
+        <div className="composer-left-tools !flex-1 !items-center !gap-2" ref={skillMenuRef}>
+          <button type="button" className="attachment-trigger icon-only !h-11 !w-11 !rounded-full !border !border-[#d7e8ff] !bg-[#f0f7ff] !text-[#2563eb] hover:!bg-[#e0f2fe]" disabled={!isBound || sending} onClick={openAttachmentPicker} aria-label="上传图片" title="上传图片">
+            <AttachmentIcon />
+          </button>
           {viewMode === "experts" ? (
             <button type="button" className="attachment-trigger" disabled={!isBound || sending} onClick={openAttachmentPicker}>
               图片
             </button>
           ) : null}
-          <button type="button" className="skill-trigger" disabled={!isBound} aria-label={ui.skillMenuTitle} aria-expanded={skillMenuOpen} onClick={() => setSkillMenuOpen((current) => !current)}>
+          <button type="button" className="skill-trigger !h-11 !rounded-full !border !border-[#e2e8f0] !bg-white !px-4 !text-[#334155]" disabled={!isBound} aria-label={ui.skillMenuTitle} aria-expanded={skillMenuOpen} onClick={() => setSkillMenuOpen((current) => !current)}>
             @
           </button>
           {selectedSkillId !== DEFAULT_SKILL.id ? (
@@ -3892,16 +4430,23 @@ export default function App() {
             </div>
           ) : null}
         </div>
-        <button className="composer-submit" disabled={!canSend} onClick={() => void sendPrompt()} aria-label={sendButtonLabel} title={sendButtonLabel}>
-          <SendArrowIcon />
+        <button
+          type="submit"
+          className={"composer-submit !h-12 !w-12 !rounded-full !border-0 !bg-[#2563eb] !text-white !shadow-[0_16px_30px_rgba(37,99,235,0.28)] hover:!bg-[#1d4ed8] " + (sending ? " is-busy" : "")}
+          disabled={!canSend}
+          aria-label={sendButtonLabel}
+          title={sendButtonLabel}
+        >
+          {sending ? <span className="composer-submit-spinner" aria-hidden="true" /> : <ArrowUpIcon />}
           <span className="visually-hidden">{sendButtonLabel}</span>
         </button>
       </div>
-    </div>
+      <p className="composer-hint !m-0 !text-[11px] !text-[#94a3b8]">按 Enter 发送，Shift + Enter 换行</p>
+    </form>
   );
 
   return (
-    <div className="shell openclaw-theme">
+    <div className="shell openclaw-theme !grid !grid-cols-[280px_minmax(0,1fr)] !bg-[#f0f7ff]">
       <div className="window-controls" aria-label="窗口控制">
         <button type="button" className="window-control-button" aria-label="最小化窗口" onClick={minimizeWindow}>
           <WindowControlIcon kind="minimize" />
@@ -3913,9 +4458,9 @@ export default function App() {
           <WindowControlIcon kind="close" />
         </button>
       </div>
-      <aside className="sidebar">
-        <div className="sidebar-top">
-          <div className="sidebar-logo-block" aria-label="千匠问天">
+      <aside className="sidebar app-drag-region !w-[280px] !border-r !border-[#dbeafe] !bg-[#f9fbff] !px-4 !py-5">
+        <div className="sidebar-top !gap-4">
+          <div className="sidebar-logo-block !rounded-[20px] !border !border-[#dbeafe] !bg-white !px-4 !py-4 !shadow-[0_18px_36px_rgba(148,163,184,0.08)]" aria-label="千匠问天">
             <div className="sidebar-logo-mark-shell" aria-hidden="true">
               <img src={brandIcon} alt="" className="sidebar-logo-mark" />
             </div>
@@ -3923,14 +4468,14 @@ export default function App() {
               <strong>千匠问天</strong>
             </div>
           </div>
-          <nav className="nav-list">
+          <nav className="nav-list !gap-2">
             {[
               { id: "chat" as const, label: "对话" },
               { id: "experts" as const, label: ui.experts },
               { id: "plugins" as const, label: ui.plugins },
               { id: "settings" as const, label: ui.settings }
             ].map((item) => (
-              <button key={item.id} type="button" className={"nav-item" + (viewMode === item.id ? " active" : "")} onClick={() => void handleNavSelection(item.id)}>
+              <button key={item.id} type="button" className={"nav-item app-no-drag !min-h-12 !rounded-[18px] !px-4 !text-[14px] !font-medium !shadow-none transition " + (viewMode === item.id ? " active !bg-[#f0f7ff] !text-[#1d4ed8] !shadow-[inset_0_0_0_1px_rgba(191,219,254,0.95)]" : "!bg-transparent !text-[#334155] hover:!bg-white hover:!text-[#0f172a]")} onClick={() => void handleNavSelection(item.id)}>
                 <span className="nav-item-icon" aria-hidden="true">
                   <NavIcon kind={item.id} />
                 </span>
@@ -3938,12 +4483,13 @@ export default function App() {
               </button>
             ))}
           </nav>
+          {!showBindEntry ? sidebarNewSessionAction : null}
         </div>
-        <div className="sidebar-bottom">
-          <section className="sidebar-section compact sidebar-experts-entry">
+        <div className="sidebar-bottom !gap-4">
+          <section className="sidebar-section compact sidebar-experts-entry !rounded-[20px] !border !border-[#dbeafe] !bg-white !p-3 !shadow-[0_18px_36px_rgba(148,163,184,0.08)]">
             {sidebarExpertEntries.length ? (
               <div className="sidebar-expert-scroll">
-                <div className="expert-chip-list preview">
+                <div className="expert-chip-list preview !gap-2">
                   {sidebarExpertEntries.map((entry) => {
                     const expertVisualKey = resolveExpertVisualKey(entry.project, entry.definition);
                     const isStandalone = entry.definition.entryMode === "standalone";
@@ -3954,7 +4500,7 @@ export default function App() {
                       <button
                         key={entry.definition.id}
                         type="button"
-                        className={"expert-chip expert-chip-" + expertVisualKey + (isActive ? " active" : "")}
+                        className={"expert-chip expert-chip-" + expertVisualKey + " app-no-drag !min-h-14 !rounded-[18px] !border !px-3 !py-3 !shadow-none transition " + (isActive ? " active !border-[#bfdbfe] !bg-[#f0f7ff]" : "!border-transparent !bg-[#f8fbff] hover:!border-[#dbeafe] hover:!bg-white")}
                         disabled={projectActionPending || !entry.isAvailable}
                         onClick={() => {
                           if (isStandalone) {
@@ -3980,28 +4526,42 @@ export default function App() {
             ) : null}
           </section>
           {!showBindEntry ? (
-            <section className="sidebar-section sidebar-section-fill compact sidebar-session-section">
+            <section className="sidebar-section sidebar-section-fill compact sidebar-session-section !rounded-[20px] !border !border-[#dbeafe] !bg-white !p-3 !shadow-[0_18px_36px_rgba(148,163,184,0.08)]">
               <div className="sidebar-section-head sidebar-section-head-subtle">
                 <div className="sidebar-section-copy">
                   <span className="sidebar-section-label">{sidebarSessionLabel}</span>
                 </div>
               </div>
-              <div className="sidebar-session-list">
+              <div className="sidebar-session-list !gap-2">
                 {sessions.map((session, index) => (
-                  <div key={session.id} className={"sidebar-session-card" + (activeSessionId === session.id ? " active" : "")}>
-                    <button type="button" className="sidebar-session-main" disabled={projectActionPending} onClick={() => openSession(session.id)}>
+                  <div key={session.id} className={"sidebar-session-card !rounded-[16px]" + (activeSessionId === session.id ? " active !bg-[#f0f7ff]" : " hover:!bg-[#f8fbff]")}>
+                    <button type="button" className="sidebar-session-main app-no-drag !min-h-12 !rounded-[16px] !px-3 !text-left !shadow-none" disabled={projectActionPending} onClick={() => openSession(session.id)}>
                       <strong>{sidebarSessionTitles[session.id] ?? formatSessionTitle(session.title, index)}</strong>
                     </button>
                     {sessions.length > 1 ? (
-                      <button
-                        type="button"
-                        className="sidebar-session-close"
-                        aria-label={ui.closeSession}
-                        disabled={projectActionPending || (sendPhase !== "idle" && activeStreamRef.current?.sessionId === session.id)}
-                        onClick={() => void closeProjectSession(session.id)}
-                      >
-                        x
-                      </button>
+                      <div className="sidebar-session-actions">
+                        <button
+                          type="button"
+                          className={"sidebar-session-close" + (sessionActionMenuId === session.id ? " active" : "")}
+                          aria-label="会话操作"
+                          disabled={projectActionPending || (sendPhase !== "idle" && activeStreamRef.current?.sessionId === session.id)}
+                          onClick={() => setSessionActionMenuId((current) => current === session.id ? "" : session.id)}
+                        >
+                          <MoreIcon />
+                        </button>
+                        {sessionActionMenuId === session.id ? (
+                          <div className="sidebar-session-menu">
+                            <button
+                              type="button"
+                              className="sidebar-session-menu-item"
+                              disabled={projectActionPending || (sendPhase !== "idle" && activeStreamRef.current?.sessionId === session.id)}
+                              onClick={() => void closeProjectSession(session.id)}
+                            >
+                              {ui.closeSession}
+                            </button>
+                          </div>
+                        ) : null}
+                      </div>
                     ) : null}
                   </div>
                 ))}
@@ -4010,13 +4570,14 @@ export default function App() {
           ) : null}
         </div>
       </aside>
-      <div className="main-shell">
+      <div className="main-shell !bg-[#f0f7ff]">
         {!isConversationView ? (
           <div className="page-topbar">
             <div className="page-copy">
               <h2>{pageTitle}</h2>
               <p>{pageDesc}</p>
             </div>
+            <div className="page-drag-strip" aria-hidden="true" />
             <div className="header-actions">
               <StatusChip tone={workspaceStatusTone}>{workspaceStatusLabel}</StatusChip>
               {isMockDesktopApi ? <StatusChip tone="warning">Mock API</StatusChip> : null}
@@ -4027,18 +4588,18 @@ export default function App() {
         {errorText ? <div className="notice error">{errorText}</div> : null}
         <main className="content-area">
           {isConversationView ? (
-            <section className={"panel chat-panel conversation-panel" + (viewMode === "chat" ? " conversation-panel-home" : "") + (viewMode === "experts" && activeExpertKey === "xiaohongshu" ? " conversation-panel-xiaohongshu" : "")}>
-              <div className="conversation-panel-head">
+            <section className={"panel chat-panel conversation-panel !gap-5 !rounded-none !bg-transparent !px-7 !py-6" + (viewMode === "chat" ? " conversation-panel-home" : "") + (viewMode === "experts" && activeExpertKey === "xiaohongshu" ? " conversation-panel-xiaohongshu" : "")}>
+              <div className="conversation-panel-head conversation-panel-head-layout app-drag-region !grid !items-center !gap-4 !border-0 !pb-0">
                 <div className="conversation-panel-copy">
                   {conversationPanelLead}
                 </div>
-                <div className="conversation-panel-actions">
+                <div className="conversation-drag-strip" aria-hidden="true" />
+                <div className="conversation-panel-actions app-no-drag !flex !items-center !gap-2">
                   <StatusChip tone={workspaceStatusTone}>{workspaceStatusLabel}</StatusChip>
                   {isMockDesktopApi ? <StatusChip tone="warning">Mock API</StatusChip> : null}
-                  {!showBindEntry ? panelNewSessionAction : null}
                 </div>
               </div>
-              <div className={"conversation-panel-body" + (viewMode === "chat" ? " conversation-panel-body-home" : "") + (viewMode === "experts" && activeExpertKey === "xiaohongshu" ? " conversation-panel-body-xiaohongshu" : "")}>
+              <div className={"conversation-panel-body !flex !min-h-0 !flex-1 !flex-col !overflow-hidden !rounded-[28px] !border !border-[#dbeafe] !bg-white/78 !px-0 !py-6 !shadow-[0_24px_60px_rgba(148,163,184,0.12)] backdrop-blur" + (viewMode === "chat" ? " conversation-panel-body-home" : "") + (viewMode === "experts" && activeExpertKey === "xiaohongshu" ? " conversation-panel-body-xiaohongshu" : "")}>
                 {conversationStatusNotice}
                 {viewMode === "chat" ? homeIntentSuggestionNotice : null}
                 {conversationBodyContent}
@@ -4076,6 +4637,7 @@ export default function App() {
           ) : null}
           {viewMode === "settings" ? (
             <div className="page-stack settings-page-stack">
+              {showSettingsStatusHint ? <div className={"inline-hint settings-runtime-hint" + (chatLaunchState === "error" ? " error" : "")}>{startupMessage}</div> : null}
               <section className="panel settings-panel settings-panel-hero compact settings-panel-modern">
                 <div className="settings-section-card">
                   <div className="settings-section-headline">
@@ -4085,7 +4647,8 @@ export default function App() {
                     </div>
                   </div>
                   <div className="settings-field-grid single">
-                    <label>
+                    <label className="settings-input-label">
+                      <span className="settings-input-label-text">员工密钥</span>
                       <input
                         type="password"
                         value={lobsterKeyDraft}
@@ -4095,7 +4658,7 @@ export default function App() {
                     </label>
                   </div>
                   <div className="button-row settings-actions">
-                    <button disabled={saving || lobsterKeyDraft.trim().length === 0} onClick={() => void saveConfig({ lobsterKey: lobsterKeyDraft })}>{saving ? ui.saving : "保存龙虾密钥"}</button>
+                    <button disabled={saving || !hasPendingLobsterKey} onClick={() => void saveConfig({ lobsterKey: lobsterKeyDraft })}>{saving ? ui.saving : "保存龙虾密钥"}</button>
                   </div>
                 </div>
                 <div className="settings-section-card">
@@ -4116,8 +4679,8 @@ export default function App() {
                         <StatusChip tone={config?.expertModelConfig.copywriting.apiKeyConfigured ? "positive" : "warning"}>{config?.expertModelConfig.copywriting.apiKeyConfigured ? "已配置" : "未配置"}</StatusChip>
                       </div>
                       <div className="settings-field-grid single">
-                        <label>
-                          api_key
+                        <label className="settings-input-label">
+                          <span className="settings-input-label-text">API Key</span>
                           <input type="password" value={copywritingModelApiKeyDraft} placeholder={config?.expertModelConfig.copywriting.apiKeyConfigured ? "留空则保持当前已保存密钥" : "请输入文案模型 API Key"} onChange={(event) => setCopywritingModelApiKeyDraft(event.target.value)} />
                         </label>
                       </div>
@@ -4131,8 +4694,8 @@ export default function App() {
                         <StatusChip tone={config?.expertModelConfig.image.apiKeyConfigured ? "positive" : "warning"}>{config?.expertModelConfig.image.apiKeyConfigured ? "已配置" : "未配置"}</StatusChip>
                       </div>
                       <div className="settings-field-grid single">
-                        <label>
-                          api_key
+                        <label className="settings-input-label">
+                          <span className="settings-input-label-text">API Key</span>
                           <input type="password" value={imageModelApiKeyDraft} placeholder={config?.expertModelConfig.image.apiKeyConfigured ? "留空则保持当前已保存密钥" : "请输入生图模型 API Key"} onChange={(event) => setImageModelApiKeyDraft(event.target.value)} />
                         </label>
                       </div>
@@ -4146,8 +4709,8 @@ export default function App() {
                         <StatusChip tone={config?.expertModelConfig.video.apiKeyConfigured ? "positive" : "warning"}>{config?.expertModelConfig.video.apiKeyConfigured ? "已配置" : "未配置"}</StatusChip>
                       </div>
                       <div className="settings-field-grid single">
-                        <label>
-                          api_key
+                        <label className="settings-input-label">
+                          <span className="settings-input-label-text">API Key</span>
                           <input type="password" value={videoModelApiKeyDraft} placeholder={config?.expertModelConfig.video.apiKeyConfigured ? "留空则保持当前已保存密钥" : "请输入视频模型 API Key"} onChange={(event) => setVideoModelApiKeyDraft(event.target.value)} />
                         </label>
                       </div>
@@ -4175,27 +4738,27 @@ export default function App() {
                         </StatusChip>
                       </div>
                       <div className="settings-field-grid">
-                        <label>
-                          VOLC_ACCESS_KEY
+                        <label className="settings-input-label">
+                          <span className="settings-input-label-text">VOLC_ACCESS_KEY</span>
                           <input type="password" value={digitalHumanVolcAccessKeyDraft} placeholder={config?.expertModelConfig.digitalHuman.volcAccessKeyConfigured ? "留空则保持当前已保存密钥" : "请输入火山 ACCESS_KEY"} onChange={(event) => setDigitalHumanVolcAccessKeyDraft(event.target.value)} />
                         </label>
-                        <label>
-                          VOLC_SECRET_KEY
+                        <label className="settings-input-label">
+                          <span className="settings-input-label-text">VOLC_SECRET_KEY</span>
                           <input type="password" value={digitalHumanVolcSecretKeyDraft} placeholder={config?.expertModelConfig.digitalHuman.volcSecretKeyConfigured ? "留空则保持当前已保存密钥" : "请输入火山 SECRET_KEY"} onChange={(event) => setDigitalHumanVolcSecretKeyDraft(event.target.value)} />
                         </label>
-                        <label>
-                          QINIU_ACCESS_KEY
+                        <label className="settings-input-label">
+                          <span className="settings-input-label-text">QINIU_ACCESS_KEY</span>
                           <input type="password" value={digitalHumanQiniuAccessKeyDraft} placeholder={config?.expertModelConfig.digitalHuman.qiniuAccessKeyConfigured ? "留空则保持当前已保存密钥" : "请输入七牛 ACCESS_KEY"} onChange={(event) => setDigitalHumanQiniuAccessKeyDraft(event.target.value)} />
                         </label>
-                        <label>
-                          QINIU_SECRET_KEY
+                        <label className="settings-input-label">
+                          <span className="settings-input-label-text">QINIU_SECRET_KEY</span>
                           <input type="password" value={digitalHumanQiniuSecretKeyDraft} placeholder={config?.expertModelConfig.digitalHuman.qiniuSecretKeyConfigured ? "留空则保持当前已保存密钥" : "请输入七牛 SECRET_KEY"} onChange={(event) => setDigitalHumanQiniuSecretKeyDraft(event.target.value)} />
                         </label>
                       </div>
                     </article>
                   </div>
                   <div className="button-row settings-actions">
-                    <button disabled={saving} onClick={() => void saveConfig()}>{saving ? ui.saving : "保存模型配置"}</button>
+                    <button disabled={saving || !hasPendingModelKeys} onClick={() => void saveConfig()}>{saving ? ui.saving : "保存模型配置"}</button>
                   </div>
                 </div>
               </section>
@@ -4319,14 +4882,13 @@ export default function App() {
                       <p>{ui.diagnosticsDesc}</p>
                     </div>
                   </div>
-                  <div className="settings-field-grid single">
-                    <label>
-                      {ui.workspacePath}
-                      <input value={workspacePathDraft} onChange={(event) => setWorkspacePathDraft(event.target.value)} />
-                    </label>
+                  <div className="settings-static-list">
+                    <div className="settings-static-item">
+                      <span>{ui.workspacePath}</span>
+                      <strong>{config?.workspacePath || workspacePathDraft || ui.none}</strong>
+                    </div>
                   </div>
                   <div className="diagnostic-meta-list">
-                    <div className="mini-info"><span>{ui.workspacePath}</span><strong>{config?.workspacePath || workspacePathDraft || ui.none}</strong></div>
                     {runtimeCloudStatus ? (
                       <>
                         <div className="mini-info"><span>Runtime Cloud Target</span><strong>{runtimeCloudStatus.baseUrl || ui.none}</strong></div>
@@ -4336,7 +4898,9 @@ export default function App() {
                     ) : null}
                   </div>
                   <div className="button-row settings-actions">
-                    <button disabled={saving} onClick={() => void saveConfig()}>{saving ? ui.saving : "保存工作区设置"}</button>
+                    <button className="secondary" onClick={() => void handleCopyText("workspace-path", config?.workspacePath || workspacePathDraft || ui.none)}>
+                      {copiedToken === "workspace-path" ? ui.copied : ui.copy}
+                    </button>
                     <button className="secondary" onClick={() => void exportDiagnostics()}>{ui.export}</button>
                   </div>
                 </div>