diff --git a/BitFun-Installer/src/styles/global.css b/BitFun-Installer/src/styles/global.css
index 7f766960..e67fbccd 100644
--- a/BitFun-Installer/src/styles/global.css
+++ b/BitFun-Installer/src/styles/global.css
@@ -85,7 +85,7 @@ html, body, #root {
   padding: 6px 10px;
   min-height: 28px;
   background: transparent;
-  border: none;
+  border: 1px dashed var(--border-base);
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
   font-size: 13px; font-weight: 500;
@@ -93,7 +93,9 @@ html, body, #root {
   cursor: pointer;
   box-shadow: none;
   transition: background var(--motion-base) var(--easing-standard),
-              color var(--motion-base) var(--easing-standard);
+              color var(--motion-base) var(--easing-standard),
+              border-color var(--motion-base) var(--easing-standard),
+              border-style var(--motion-base) var(--easing-standard);
 }
 .btn svg {
   color: var(--color-text-muted);
@@ -102,6 +104,8 @@ html, body, #root {
 .btn:hover:not(:disabled) {
   background: var(--element-bg-subtle);
   color: var(--color-text-primary);
+  border-style: solid;
+  border-color: var(--border-medium);
   box-shadow: none;
 }
 .btn:hover:not(:disabled) svg { color: var(--color-accent-500); }
@@ -135,12 +139,12 @@ html, body, #root {
 
 .btn-ghost {
   min-height: 28px;
-  border: none; padding: 6px 10px;
+  padding: 6px 10px;
   box-shadow: none;
   color: var(--color-text-muted);
 }
 .btn-ghost:hover:not(:disabled) {
-  background: var(--element-bg-subtle); border: none;
+  background: var(--element-bg-subtle);
   color: var(--color-text-secondary);
 }
 
@@ -149,16 +153,18 @@ html, body, #root {
   padding: 14px 16px;
   min-height: 68px;
   width: 100%;
-  background: rgba(148, 163, 184, 0.08);
-  border: none;
+  background: transparent;
+  border: 1px dashed var(--border-base);
   border-radius: var(--radius-sm);
   cursor: pointer; text-align: left;
   box-shadow: none;
-  transition: background 0.25s ease, transform 0.2s ease;
+  transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease, border-style 0.25s ease;
   position: relative; overflow: hidden;
 }
 .card-btn:hover {
-  background: rgba(148, 163, 184, 0.14);
+  background: rgba(148, 163, 184, 0.08);
+  border-style: solid;
+  border-color: var(--border-medium);
   transform: translateY(-1px);
   box-shadow: none;
 }
@@ -390,12 +396,3 @@ html, body, #root {
   right: 24px;
   bottom: 18px;
 }
-
-.uninstall-actions .btn {
-  border: 1px dashed var(--border-base);
-}
-
-.uninstall-actions .btn:hover:not(:disabled) {
-  border-style: solid;
-  border-color: var(--border-medium);
-}
diff --git a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss
index f1add210..f1c570ed 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss
@@ -95,6 +95,11 @@
     transition: color 0.15s ease, font-weight 0.15s ease;
   }
 
+  // Keep title visually centered when tab is not hovered.
+  &:not(:hover) &__title {
+    text-align: center;
+  }
+
   // Active state title color is brighter
   &.is-active &__title {
     color: var(--color-text-primary, rgba(255, 255, 255, 0.95));
diff --git a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.tsx b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.tsx
index 25a4c3f2..eb2415f3 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.tsx
+++ b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.tsx
@@ -119,8 +119,8 @@ export const Tab: React.FC<TabProps> = ({
     getStateClassName(tab.state),
   ].filter(Boolean).join(' ');
 
-  // Show close button (hidden in preview, shown on hover)
-  const showCloseButton = tab.state !== 'preview' || isHovered;
+  // Show close button only while hovering to avoid reserving layout space.
+  const showCloseButton = isHovered;
 
   return (
     <Tooltip content={tooltipText} placement="bottom">
diff --git a/src/web-ui/src/component-library/components/Button/Button.scss b/src/web-ui/src/component-library/components/Button/Button.scss
index 7d4a6bea..778e46ff 100644
--- a/src/web-ui/src/component-library/components/Button/Button.scss
+++ b/src/web-ui/src/component-library/components/Button/Button.scss
@@ -105,6 +105,24 @@
     }
   }
 
+  &-dashed {
+    background: transparent;
+    color: var(--color-text-secondary, #e5e5e5);
+    border: 1px dashed var(--border-base, rgba(255, 255, 255, 0.16));
+
+    &:hover:not(:disabled) {
+      background: var(--element-bg-subtle, rgba(255, 255, 255, 0.08));
+      color: var(--color-text-primary, #ffffff);
+      border-style: solid;
+      border-color: var(--border-medium, rgba(255, 255, 255, 0.24));
+    }
+
+    &:active:not(:disabled) {
+      background: var(--element-bg-base, rgba(255, 255, 255, 0.1));
+      border-color: var(--border-strong, rgba(255, 255, 255, 0.32));
+    }
+  }
+
   &-icon-only {
     padding: 0;
     width: var(--button-height-base, 40px);
diff --git a/src/web-ui/src/component-library/components/Button/Button.tsx b/src/web-ui/src/component-library/components/Button/Button.tsx
index 3421086c..dd1040fe 100644
--- a/src/web-ui/src/component-library/components/Button/Button.tsx
+++ b/src/web-ui/src/component-library/components/Button/Button.tsx
@@ -6,7 +6,7 @@ import React, { forwardRef } from 'react';
 import './Button.scss';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent' | 'ai';
+  variant?: 'primary' | 'secondary' | 'ghost' | 'dashed' | 'danger' | 'success' | 'accent' | 'ai';
   size?: 'small' | 'medium' | 'large';
   isLoading?: boolean;
   iconOnly?: boolean;
@@ -43,6 +43,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
         return 'btn-action btn-action-success';
       case 'ghost':
         return 'btn-ghost';
+      case 'dashed':
+        return 'btn-dashed';
       default:
         return 'btn-secondary';
     }
diff --git a/src/web-ui/src/infrastructure/config/components/MCPConfig.tsx b/src/web-ui/src/infrastructure/config/components/MCPConfig.tsx
index aae7af82..59df8379 100644
--- a/src/web-ui/src/infrastructure/config/components/MCPConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/MCPConfig.tsx
@@ -676,9 +676,8 @@ export const MCPConfig: React.FC<MCPConfigProps> = () => {
           <div className="empty-icon">
             <Plug size={28} />
           </div>
-          <p>{searchKeyword ? t('empty.noMatchingServers') : t('empty.noServers')}</p>
           {!searchKeyword && (
-            <Button onClick={() => setShowJsonEditor(true)}>
+            <Button variant="dashed" onClick={() => setShowJsonEditor(true)}>
               {t('actions.jsonConfig')}
             </Button>
           )}
diff --git a/src/web-ui/src/infrastructure/config/components/PromptTemplateConfig.tsx b/src/web-ui/src/infrastructure/config/components/PromptTemplateConfig.tsx
index 88e63995..efa32ae9 100644
--- a/src/web-ui/src/infrastructure/config/components/PromptTemplateConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/PromptTemplateConfig.tsx
@@ -315,9 +315,8 @@ export const PromptTemplateConfig: React.FC = () => {
               <div className="prompt-template-config__templates">
                 {sortedTemplates.length === 0 && (
                   <div className="prompt-template-config__empty">
-                    <p>{t('empty.noTemplates')}</p>
                     <Button
-                      variant="primary"
+                      variant="dashed"
                       size="medium"
                       onClick={handleCreateTemplate}
                     >
diff --git a/src/web-ui/src/locales/en-US/tools.json b/src/web-ui/src/locales/en-US/tools.json
index a865f012..38f0c986 100644
--- a/src/web-ui/src/locales/en-US/tools.json
+++ b/src/web-ui/src/locales/en-US/tools.json
@@ -35,7 +35,12 @@
       "fileNotFound": "File not found",
       "permissionDenied": "Permission denied",
       "networkError": "Network error",
-      "saveFailedWithMessage": "Failed to save file: {{message}}"
+      "saveFailedWithMessage": "Failed to save file: {{message}}",
+      "save": "Save",
+      "cancel": "Cancel",
+      "edit": "Edit",
+      "add": "Add",
+      "delete": "Delete"
     },
     "codeEditor": {
       "loadingFile": "Loading file...",
diff --git a/src/web-ui/src/locales/zh-CN/tools.json b/src/web-ui/src/locales/zh-CN/tools.json
index ebd0d58a..13fd6bfc 100644
--- a/src/web-ui/src/locales/zh-CN/tools.json
+++ b/src/web-ui/src/locales/zh-CN/tools.json
@@ -35,7 +35,12 @@
       "fileNotFound": "文件不存在",
       "permissionDenied": "权限不足",
       "networkError": "网络错误",
-      "saveFailedWithMessage": "保存文件失败: {{message}}"
+      "saveFailedWithMessage": "保存文件失败: {{message}}",
+      "save": "保存",
+      "cancel": "取消",
+      "edit": "编辑",
+      "add": "新增",
+      "delete": "删除"
     },
     "codeEditor": {
       "loadingFile": "正在加载文件...",
diff --git a/src/web-ui/src/tools/editor/components/PlanViewer.tsx b/src/web-ui/src/tools/editor/components/PlanViewer.tsx
index 9b2ab171..a73ac69b 100644
--- a/src/web-ui/src/tools/editor/components/PlanViewer.tsx
+++ b/src/web-ui/src/tools/editor/components/PlanViewer.tsx
@@ -6,7 +6,7 @@ import yaml from 'yaml';
 import { MEditor } from '../meditor';
 import type { EditorInstance } from '../meditor';
 import { createLogger } from '@/shared/utils/logger';
-import { CubeLoading, Button } from '@/component-library';
+import { CubeLoading, Button, Tooltip } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import { workspaceAPI } from '@/infrastructure/api/service-api/WorkspaceAPI';
 import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
@@ -33,6 +33,8 @@ interface PlanData {
   todos: PlanTodo[];
 }
 
+type YamlEditorPlacement = 'none' | 'inline' | 'trailing';
+
 export interface PlanViewerProps {
   /** File path */
   filePath: string;
@@ -64,15 +66,21 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
   });
   const [originalContent, setOriginalContent] = useState('');
   // Edit mode: display raw yaml frontmatter
-  const [isEditingYaml, setIsEditingYaml] = useState(false);
+  const [yamlEditorPlacement, setYamlEditorPlacement] = useState<YamlEditorPlacement>('none');
   const [yamlContent, setYamlContent] = useState<string>('');
   const [originalYamlContent, setOriginalYamlContent] = useState<string>('');
   // Todos list expand/collapse state (collapsed by default)
   const [isTodosExpanded, setIsTodosExpanded] = useState(false);
+  const [isInlineTodoEditing, setIsInlineTodoEditing] = useState(false);
+  const [inlineTodoDrafts, setInlineTodoDrafts] = useState<Record<string, string>>({});
+  const [inlineDeletedTodoKeys, setInlineDeletedTodoKeys] = useState<string[]>([]);
+  const [inlineAddedTodos, setInlineAddedTodos] = useState<PlanTodo[]>([]);
   const [isTrailingTodoEditing, setIsTrailingTodoEditing] = useState(false);
   const [trailingTodoDrafts, setTrailingTodoDrafts] = useState<Record<string, string>>({});
   const [trailingDeletedTodoKeys, setTrailingDeletedTodoKeys] = useState<string[]>([]);
   const [trailingAddedTodos, setTrailingAddedTodos] = useState<PlanTodo[]>([]);
+
+  const isEditingYaml = yamlEditorPlacement !== 'none';
   
   const editorRef = useRef<EditorInstance>(null);
   const yamlEditorRef = useRef<EditorInstance>(null);
@@ -299,18 +307,56 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
     saveFileContent();
   }, [saveFileContent]);
 
-  const startTrailingTodoEdit = useCallback(() => {
-    if (!planData?.todos?.length) return;
+  const buildTodoDraftsFromPlan = useCallback((todos: PlanTodo[]) => {
     const drafts: Record<string, string> = {};
-    planData.todos.forEach((todo, index) => {
+    todos.forEach((todo, index) => {
       const key = todo.id || String(index);
       drafts[key] = todo.content;
     });
-    setTrailingTodoDrafts(drafts);
+    return drafts;
+  }, []);
+
+  const startInlineTodoEdit = useCallback(() => {
+    if (!planData?.todos?.length) return;
+    setInlineTodoDrafts(buildTodoDraftsFromPlan(planData.todos));
+    setInlineDeletedTodoKeys([]);
+    setInlineAddedTodos([]);
+    setIsInlineTodoEditing(true);
+  }, [buildTodoDraftsFromPlan, planData]);
+
+  const cancelInlineTodoEdit = useCallback(() => {
+    setIsInlineTodoEditing(false);
+    setInlineTodoDrafts({});
+    setInlineDeletedTodoKeys([]);
+    setInlineAddedTodos([]);
+  }, []);
+
+  const handleAddInlineTodo = useCallback(() => {
+    const id = `new-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    const newTodo: PlanTodo = { id, content: '', status: 'pending' };
+    setInlineAddedTodos(prev => [...prev, newTodo]);
+    setInlineTodoDrafts(prev => ({ ...prev, [id]: '' }));
+  }, []);
+
+  const handleDeleteInlineTodo = useCallback((todoKey: string) => {
+    if (todoKey.startsWith('new-')) {
+      setInlineAddedTodos(prev => prev.filter(todo => todo.id !== todoKey));
+      setInlineTodoDrafts(prev => {
+        const { [todoKey]: _removed, ...rest } = prev;
+        return rest;
+      });
+      return;
+    }
+    setInlineDeletedTodoKeys(prev => (prev.includes(todoKey) ? prev : [...prev, todoKey]));
+  }, []);
+
+  const startTrailingTodoEdit = useCallback(() => {
+    if (!planData?.todos?.length) return;
+    setTrailingTodoDrafts(buildTodoDraftsFromPlan(planData.todos));
     setTrailingDeletedTodoKeys([]);
     setTrailingAddedTodos([]);
     setIsTrailingTodoEditing(true);
-  }, [planData]);
+  }, [buildTodoDraftsFromPlan, planData]);
 
   const cancelTrailingTodoEdit = useCallback(() => {
     setIsTrailingTodoEditing(false);
@@ -321,36 +367,25 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
 
   const handleAddTrailingTodo = useCallback(() => {
     const id = `new-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-    const newTodo: PlanTodo = {
-      id,
-      content: '',
-      status: 'pending',
-    };
+    const newTodo: PlanTodo = { id, content: '', status: 'pending' };
     setTrailingAddedTodos(prev => [...prev, newTodo]);
     setTrailingTodoDrafts(prev => ({ ...prev, [id]: '' }));
   }, []);
 
-  const saveTrailingTodoEdit = useCallback(async () => {
-    if (!planData?.todos?.length || !filePath) return;
+  const handleDeleteTrailingTodo = useCallback((todoKey: string) => {
+    if (todoKey.startsWith('new-')) {
+      setTrailingAddedTodos(prev => prev.filter(todo => todo.id !== todoKey));
+      setTrailingTodoDrafts(prev => {
+        const { [todoKey]: _removed, ...rest } = prev;
+        return rest;
+      });
+      return;
+    }
+    setTrailingDeletedTodoKeys(prev => (prev.includes(todoKey) ? prev : [...prev, todoKey]));
+  }, []);
 
-    const nextTodos = planData.todos
-      .map((todo, index) => ({ todo, key: todo.id || String(index) }))
-      .filter(({ key }) => !trailingDeletedTodoKeys.includes(key))
-      .map(({ todo, key }) => {
-        const nextContent = (trailingTodoDrafts[key] ?? todo.content).trim();
-        return {
-          ...todo,
-          content: nextContent || todo.content,
-        };
-      })
-      .concat(
-        trailingAddedTodos
-          .map(todo => ({
-            ...todo,
-            content: (trailingTodoDrafts[todo.id] ?? todo.content).trim(),
-          }))
-          .filter(todo => !!todo.content)
-      );
+  const saveTodoEdits = useCallback(async (nextTodos: PlanTodo[]) => {
+    if (!filePath || !planData) return;
 
     let nextYamlContent = yamlContent;
     if (yamlContent) {
@@ -359,7 +394,7 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
         parsed.todos = nextTodos;
         nextYamlContent = yaml.stringify(parsed).trimEnd();
       } catch (e) {
-        log.warn('Failed to parse yaml while saving trailing todo edit', e);
+        log.warn('Failed to parse yaml while saving todo edit', e);
       }
     }
 
@@ -372,28 +407,88 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
       setYamlContent(nextYamlContent);
       setOriginalYamlContent(nextYamlContent);
       setOriginalContent(planContent);
+    } catch (err) {
+      log.error('Failed to save todo edit', err);
+    }
+  }, [filePath, planContent, planData, workspacePath, yamlContent]);
+
+  const saveInlineTodoEdit = useCallback(async () => {
+    if (!planData?.todos?.length) return;
+    const nextTodos = planData.todos
+      .map((todo, index) => ({ todo, key: todo.id || String(index) }))
+      .filter(({ key }) => !inlineDeletedTodoKeys.includes(key))
+      .map(({ todo, key }) => {
+        const nextContent = (inlineTodoDrafts[key] ?? todo.content).trim();
+        return { ...todo, content: nextContent || todo.content };
+      })
+      .concat(
+        inlineAddedTodos
+          .map(todo => ({ ...todo, content: (inlineTodoDrafts[todo.id] ?? todo.content).trim() }))
+          .filter(todo => !!todo.content)
+      );
+    await saveTodoEdits(nextTodos);
+    setIsInlineTodoEditing(false);
+    setInlineTodoDrafts({});
+    setInlineDeletedTodoKeys([]);
+    setInlineAddedTodos([]);
+  }, [inlineAddedTodos, inlineDeletedTodoKeys, inlineTodoDrafts, planData, saveTodoEdits]);
+
+  const saveTrailingTodoEdit = useCallback(async () => {
+    if (!planData?.todos?.length) return;
+    const nextTodos = planData.todos
+      .map((todo, index) => ({ todo, key: todo.id || String(index) }))
+      .filter(({ key }) => !trailingDeletedTodoKeys.includes(key))
+      .map(({ todo, key }) => {
+        const nextContent = (trailingTodoDrafts[key] ?? todo.content).trim();
+        return { ...todo, content: nextContent || todo.content };
+      })
+      .concat(
+        trailingAddedTodos
+          .map(todo => ({ ...todo, content: (trailingTodoDrafts[todo.id] ?? todo.content).trim() }))
+          .filter(todo => !!todo.content)
+      );
+    await saveTodoEdits(nextTodos);
+    setIsTrailingTodoEditing(false);
+    setTrailingTodoDrafts({});
+    setTrailingDeletedTodoKeys([]);
+    setTrailingAddedTodos([]);
+  }, [planData, saveTodoEdits, trailingAddedTodos, trailingDeletedTodoKeys, trailingTodoDrafts]);
+
+  const openYamlEditor = useCallback((source: 'inline' | 'trailing' | 'unknown' = 'unknown') => {
+    if (source === 'inline') {
+      setIsInlineTodoEditing(false);
+      setInlineTodoDrafts({});
+      setInlineDeletedTodoKeys([]);
+      setInlineAddedTodos([]);
+      setIsTodosExpanded(true);
+      setYamlEditorPlacement('inline');
+      return;
+    }
+    if (source === 'trailing') {
       setIsTrailingTodoEditing(false);
       setTrailingTodoDrafts({});
       setTrailingDeletedTodoKeys([]);
       setTrailingAddedTodos([]);
-    } catch (err) {
-      log.error('Failed to save trailing todo edit', err);
-    }
-  }, [planData, trailingAddedTodos, trailingDeletedTodoKeys, trailingTodoDrafts, yamlContent, planContent, workspacePath, filePath]);
-
-  const handleDeleteTrailingTodo = useCallback((todoKey: string) => {
-    if (todoKey.startsWith('new-')) {
-      setTrailingAddedTodos(prev => prev.filter(todo => todo.id !== todoKey));
-      setTrailingTodoDrafts(prev => {
-        const { [todoKey]: _removed, ...rest } = prev;
-        return rest;
-      });
+      setYamlEditorPlacement('trailing');
       return;
     }
-    setTrailingDeletedTodoKeys(prev => (prev.includes(todoKey) ? prev : [...prev, todoKey]));
+    setYamlEditorPlacement('inline');
+  }, [isInlineTodoEditing, isTodosExpanded, isTrailingTodoEditing, yamlEditorPlacement]);
+
+  const closeYamlEditor = useCallback(() => {
+    setYamlEditorPlacement('none');
   }, []);
 
-  const displayedTodos = useMemo(() => {
+  const displayedInlineTodos = useMemo(() => {
+    if (!planData?.todos) return [];
+    if (!isInlineTodoEditing) return planData.todos;
+    return [
+      ...planData.todos.filter((todo, index) => !inlineDeletedTodoKeys.includes(todo.id || String(index))),
+      ...inlineAddedTodos,
+    ];
+  }, [inlineAddedTodos, inlineDeletedTodoKeys, isInlineTodoEditing, planData]);
+
+  const displayedTrailingTodos = useMemo(() => {
     if (!planData?.todos) return [];
     if (!isTrailingTodoEditing) return planData.todos;
     return [
@@ -403,6 +498,17 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
   }, [isTrailingTodoEditing, planData, trailingAddedTodos, trailingDeletedTodoKeys]);
 
   const renderSharedTodoPanel = useCallback((placement: 'inline' | 'trailing') => {
+    const isInline = placement === 'inline';
+    const isYamlEditingInPanel = yamlEditorPlacement === placement;
+    const isPanelEditing = isInline ? isInlineTodoEditing : isTrailingTodoEditing;
+    const panelTodos = isInline ? displayedInlineTodos : displayedTrailingTodos;
+    const panelDrafts = isInline ? inlineTodoDrafts : trailingTodoDrafts;
+    const startEdit = isInline ? startInlineTodoEdit : startTrailingTodoEdit;
+    const cancelEdit = isInline ? cancelInlineTodoEdit : cancelTrailingTodoEdit;
+    const addTodo = isInline ? handleAddInlineTodo : handleAddTrailingTodo;
+    const saveEdit = isInline ? saveInlineTodoEdit : saveTrailingTodoEdit;
+    const deleteTodo = isInline ? handleDeleteInlineTodo : handleDeleteTrailingTodo;
+
     const panelClassName = placement === 'trailing'
       ? `plan-viewer-todos plan-viewer-todos--trailing ${isEditingYaml ? 'plan-viewer-todos--yaml-editing' : ''}`
       : `plan-viewer-todos ${isTodosExpanded ? 'plan-viewer-todos--expanded' : ''} ${isEditingYaml ? 'plan-viewer-todos--yaml-editing' : ''}`;
@@ -411,65 +517,71 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
     return (
       <div className={panelClassName}>
         <div className={toolbarClassName}>
-          {isEditingYaml ? (
-            <button
-              type="button"
-              className="edit-btn"
-              onClick={() => setIsEditingYaml(false)}
-              title={t('editor.planViewer.toggleYamlEditOff')}
-            >
-              <X size={14} />
-            </button>
-          ) : isTrailingTodoEditing ? (
-            <>
-              <button
-                type="button"
-                className="edit-btn"
-                onClick={handleAddTrailingTodo}
-                title={t('editor.common.add')}
-              >
-                <Plus size={14} />
-              </button>
-              <button
-                type="button"
-                className="edit-btn edit-btn--confirm"
-                onClick={saveTrailingTodoEdit}
-                title={t('editor.common.save')}
-              >
-                <Check size={14} />
-              </button>
+          {isYamlEditingInPanel ? (
+            <Tooltip content={t('editor.planViewer.toggleYamlEditOff')} placement="top">
               <button
                 type="button"
                 className="edit-btn"
-                onClick={cancelTrailingTodoEdit}
-                title={t('editor.common.cancel')}
+                onClick={closeYamlEditor}
               >
                 <X size={14} />
               </button>
+            </Tooltip>
+          ) : isPanelEditing ? (
+            <>
+              <Tooltip content={t('editor.common.add')} placement="top">
+                <button
+                  type="button"
+                  className="edit-btn"
+                  onClick={addTodo}
+                >
+                  <Plus size={14} />
+                </button>
+              </Tooltip>
+              <Tooltip content={t('editor.common.save')} placement="top">
+                <button
+                  type="button"
+                  className="edit-btn edit-btn--confirm"
+                  onClick={saveEdit}
+                >
+                  <Check size={14} />
+                </button>
+              </Tooltip>
+              <Tooltip content={t('editor.common.cancel')} placement="top">
+                <button
+                  type="button"
+                  className="edit-btn"
+                  onClick={cancelEdit}
+                >
+                  <X size={14} />
+                </button>
+              </Tooltip>
             </>
           ) : (
             <>
-              <button
-                type="button"
-                className="edit-btn"
-                onClick={() => setIsEditingYaml(true)}
-                title={t('editor.planViewer.toggleYamlEditOn')}
-              >
-                <FileText size={14} />
-              </button>
-              <button
-                type="button"
-                className="edit-btn"
-                onClick={startTrailingTodoEdit}
-                title={t('editor.common.edit')}
-              >
-                <Pencil size={14} />
-              </button>
+              <Tooltip content={t('editor.planViewer.toggleYamlEditOn')} placement="top">
+                <button
+                  type="button"
+                  className="edit-btn"
+                  onClick={() => openYamlEditor(placement)}
+                >
+                  <FileText size={14} />
+                </button>
+              </Tooltip>
+              <Tooltip content={t('editor.common.edit')} placement="top">
+                <button
+                  type="button"
+                  className="edit-btn"
+                  onClick={startEdit}
+                >
+                  <Pencil size={14} />
+                </button>
+              </Tooltip>
             </>
           )}
         </div>
 
-        {isEditingYaml ? (
+        {isYamlEditingInPanel ? (
           <div className="yaml-editor-section">
             <div className="yaml-editor-content">
               <MEditor
@@ -490,33 +602,35 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
           </div>
         ) : (
           <div className="todos-list">
-            {displayedTodos.map((todo, index) => (
+            {panelTodos.map((todo, index) => (
               <div
                 key={todo.id || index}
                 className={`todo-item status-${todo.status || 'pending'}`}
               >
                 {getTodoIcon(todo.status)}
-                {isTrailingTodoEditing ? (
+                {isPanelEditing ? (
                   <>
                     <input
                       className="todo-content-input"
-                      value={trailingTodoDrafts[todo.id || String(index)] ?? todo.content}
+                      value={panelDrafts[todo.id || String(index)] ?? todo.content}
                       onChange={(e) => {
                         const key = todo.id || String(index);
-                        setTrailingTodoDrafts(prev => ({
-                          ...prev,
-                          [key]: e.target.value,
-                        }));
+                        if (isInline) {
+                          setInlineTodoDrafts(prev => ({ ...prev, [key]: e.target.value }));
+                        } else {
+                          setTrailingTodoDrafts(prev => ({ ...prev, [key]: e.target.value }));
+                        }
                       }}
                     />
-                    <button
-                      type="button"
-                      className="todo-delete-btn"
-                      onClick={() => handleDeleteTrailingTodo(todo.id || String(index))}
-                      title={t('editor.common.delete')}
-                    >
-                      <Trash2 size={13} />
-                    </button>
+                    <Tooltip content={t('editor.common.delete')} placement="top">
+                      <button
+                        type="button"
+                        className="todo-delete-btn"
+                        onClick={() => deleteTodo(todo.id || String(index))}
+                      >
+                        <Trash2 size={13} />
+                      </button>
+                    </Tooltip>
                   </>
                 ) : (
                   <span className="todo-content">{todo.content}</span>
@@ -528,20 +642,31 @@ const PlanViewer: React.FC<PlanViewerProps> = ({
       </div>
     );
   }, [
+    cancelInlineTodoEdit,
     cancelTrailingTodoEdit,
-    displayedTodos,
+    closeYamlEditor,
+    displayedInlineTodos,
+    displayedTrailingTodos,
+    handleAddInlineTodo,
     handleAddTrailingTodo,
+    handleDeleteInlineTodo,
     handleDeleteTrailingTodo,
     handleSave,
     handleYamlChange,
+    isInlineTodoEditing,
     isEditingYaml,
     isTodosExpanded,
     isTrailingTodoEditing,
+    openYamlEditor,
+    saveInlineTodoEdit,
     saveTrailingTodoEdit,
+    startInlineTodoEdit,
     startTrailingTodoEdit,
     t,
+    inlineTodoDrafts,
     trailingTodoDrafts,
     yamlContent,
+    yamlEditorPlacement,
   ]);
 
   // Build button click handler
@@ -669,7 +794,7 @@ ${JSON.stringify(simpleTodos, null, 2)}
         </div>
       </div>
 
-      {hasTodos && (isEditingYaml || isTodosExpanded) && renderSharedTodoPanel('inline')}
+      {hasTodos && (yamlEditorPlacement === 'inline' || isTodosExpanded) && renderSharedTodoPanel('inline')}
 
       <div className="plan-viewer-content">
         <div className="plan-markdown">
@@ -688,7 +813,7 @@ ${JSON.stringify(simpleTodos, null, 2)}
             basePath={basePath}
           />
         </div>
-        {hasTodos && isTodosExpanded && !isEditingYaml && renderSharedTodoPanel('trailing')}
+        {hasTodos && yamlEditorPlacement !== 'inline' && renderSharedTodoPanel('trailing')}
       </div>
     </div>
   );
diff --git a/src/web-ui/src/tools/lsp/components/LspPluginList/LspPluginList.tsx b/src/web-ui/src/tools/lsp/components/LspPluginList/LspPluginList.tsx
index 65b9a405..245f1d0d 100644
--- a/src/web-ui/src/tools/lsp/components/LspPluginList/LspPluginList.tsx
+++ b/src/web-ui/src/tools/lsp/components/LspPluginList/LspPluginList.tsx
@@ -130,11 +130,9 @@ export const LspPluginList: React.FC<LspPluginListProps> = ({
         {renderHeader()}
         <div className="lsp-plugin-list__empty">
           <Package size={64} />
-          <p>{t('pluginList.empty.title')}</p>
-          <p className="hint">{t('pluginList.empty.hint')}</p>
           {onInstallPlugin && (
             <Button
-              variant="primary"
+              variant="dashed"
               size="medium"
               onClick={onInstallPlugin}
               disabled={isInstalling}