From 1568fa40d1b1201ac75f5d9e14caef8bb0e8b304 Mon Sep 17 00:00:00 2001
From: Dan Piths <85949566+danpiths@users.noreply.github.com>
Date: Tue, 16 Jun 2026 16:24:40 +0530
Subject: [PATCH] fix: skills repo removes hydration and polishes the whole
 flow

---
 framework/configstore/skills.go               |   15 -
 .../components/fileManagerView.tsx            |  419 ++---
 .../skills-repo/components/filePreview.tsx    |  326 +++-
 .../skills-repo/components/helpers.ts         |   85 +-
 .../components/metadataEditorTableView.tsx    |   65 +-
 .../skills-repo/components/shared.tsx         |  392 +++--
 .../components/skillCreatorView.tsx           |    2 +-
 .../components/skillDetailsView.tsx           |   39 +-
 .../skills-repo/components/skillListView.tsx  |   46 +-
 .../dialogs/skillVersionDialog.tsx            |    2 +-
 .../dialogs/versionDetailsDialog.tsx          |   58 +-
 .../skills-repo/forms/skillEditForm.tsx       | 1374 ++++++++++-------
 .../skills-repo/forms/skillEditFormFields.tsx |   35 +-
 ui/app/workspace/skills-repo/page.tsx         |    8 +-
 ui/components/ui/treeView.tsx                 |   10 +-
 15 files changed, 1637 insertions(+), 1239 deletions(-)

diff --git a/framework/configstore/skills.go b/framework/configstore/skills.go
index 324cf227fb..68a2fc73bf 100644
--- a/framework/configstore/skills.go
+++ b/framework/configstore/skills.go
@@ -763,7 +763,6 @@ func (s *RDBConfigStore) GetSkillVersion(ctx context.Context, skillID, version s
 		}
 		return nil, err
 	}
-	hydrateInlineTextContent(v.Files)
 	return &v, nil
 }
 
@@ -1085,19 +1084,6 @@ func createSkillVersion(tx *gorm.DB, skill *tables.TableSkill, version string) (
 }
 
 // populateSkillFiles reloads the serving version's files into the transient skill.Files.
-// hydrateInlineTextContent fills InlineContent for text files from their DB blob
-// so GET responses return the editable content (the `content` field). Content kept
-// only in object storage is served via the file endpoint rather than inlined here.
-func hydrateInlineTextContent(files []tables.TableSkillFile) {
-	for i := range files {
-		file := &files[i]
-		if file.SourceType == tables.SkillSourceTypeText && file.InlineContent == nil && file.Blob != nil {
-			content := string(file.Blob.Data)
-			file.InlineContent = &content
-		}
-	}
-}
-
 func populateSkillFiles(tx *gorm.DB, skill *tables.TableSkill) error {
 	var version tables.TableSkillVersion
 	if err := tx.Preload("Files").
@@ -1110,7 +1096,6 @@ func populateSkillFiles(tx *gorm.DB, skill *tables.TableSkill) error {
 	}
 	skill.Files = version.Files
 	skill.FileCount = int64(len(version.Files))
-	hydrateInlineTextContent(skill.Files)
 	return nil
 }
 
diff --git a/ui/app/workspace/skills-repo/components/fileManagerView.tsx b/ui/app/workspace/skills-repo/components/fileManagerView.tsx
index 1ee31c86ad..836d125a91 100644
--- a/ui/app/workspace/skills-repo/components/fileManagerView.tsx
+++ b/ui/app/workspace/skills-repo/components/fileManagerView.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/dropdownMenu";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { ScrollBar } from "@/components/ui/scrollArea";
 import { Textarea } from "@/components/ui/textarea";
 import { Tree, type BaseNodeData, type TreeNode } from "@/components/ui/treeView";
 import { getErrorMessage } from "@/lib/store/apis/baseApi";
@@ -36,22 +37,15 @@ import {
 	Check,
 	ChevronDown,
 	ChevronRight,
-	ChevronsDownUp,
-	ChevronsUpDown,
 	FileText,
 	Folder,
-	FolderPlus,
 	Info,
 	Loader2,
 	MoreHorizontal,
-	MoveRight,
-	Pencil,
 	Plus,
-	Trash2,
-	Upload,
 	X,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
 import { formatFileSize } from "./helpers";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -125,17 +119,17 @@ function FileAddForm({ folderPath, initialSourceType, initialEntry, submitLabel,
 	const [error, setError] = useState<string | null>(null);
 
 	const locationLabel = folderPath ? `${folderPath}/` : "root";
-	// Adding a new text file only asks for a name; its content is edited in the
-	// right-hand pane afterwards. (Editing an existing entry keeps the full form.)
-	const isTextNameOnly = sourceType === "text" && !initialEntry;
+	// Adding a new file asks for its name in-tree first; source-specific fields
+	// are edited in the right-hand pane after the file is inserted.
+	const isNewFileNameOnly = !initialEntry;
 	const nameInputRef = useRef<HTMLInputElement | null>(null);
 
 	// Grab focus after the menu that opened this draft has returned focus to its trigger.
 	useEffect(() => {
-		if (!isTextNameOnly) return;
+		if (!isNewFileNameOnly) return;
 		const id = window.setTimeout(() => nameInputRef.current?.focus(), 0);
 		return () => window.clearTimeout(id);
-	}, [isTextNameOnly]);
+	}, [isNewFileNameOnly]);
 
 	const handleUploadFileChange = (file: File | null) => {
 		setSelectedFile(file);
@@ -160,7 +154,7 @@ function FileAddForm({ folderPath, initialSourceType, initialEntry, submitLabel,
 		const pathErr = validateFilePath(fullPath);
 		if (pathErr) return setError(pathErr);
 
-		if (!isTextNameOnly) {
+		if (!isNewFileNameOnly) {
 			const srcErr = validateSourceType(sourceType, {
 				url,
 				dataurl,
@@ -201,49 +195,58 @@ function FileAddForm({ folderPath, initialSourceType, initialEntry, submitLabel,
 		onAdd(entry);
 	};
 
-	// Name-only add: a single full-width input. Enter adds, Escape/empty-blur cancels.
-	if (isTextNameOnly) {
+	// Name-only add: input with check/cross like folder add.
+	if (isNewFileNameOnly) {
 		return (
-			<div className={cn("w-full", className)}>
-				<Input
-					ref={nameInputRef}
-					autoFocus
-					data-testid="skill-file-filename-input"
-					value={filename}
-					onChange={(e) => {
-						setFilename(e.target.value);
-						setError(null);
-					}}
-					onKeyDown={(e) => {
-						if (e.key === "Enter") {
-							e.preventDefault();
-							handleSubmit();
-						} else if (e.key === "Escape") {
-							e.preventDefault();
-							onCancel();
-						}
-					}}
-					placeholder="filename.ext (press Enter to add, Esc to cancel)"
-					className="h-8 w-full font-mono text-xs"
-					aria-label="Filename"
-				/>
+			<div className={cn("flex flex-col gap-1.5 py-1", className)}>
+				<div className="flex items-center gap-2">
+					<Input
+						ref={nameInputRef}
+						autoFocus
+						data-testid="skill-file-filename-input"
+						value={filename}
+						onChange={(e) => {
+							setFilename(e.target.value);
+							setError(null);
+						}}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+								handleSubmit();
+							} else if (e.key === "Escape") {
+								e.preventDefault();
+								onCancel();
+							}
+						}}
+						placeholder="filename.ext"
+						className="h-7 max-w-xs font-mono text-xs"
+						aria-label="Filename"
+					/>
+					<Button variant="ghost" size="sm" className="h-7 w-7 p-0" data-testid="skill-file-confirm-btn" onClick={handleSubmit}>
+						<Check className="h-3 w-3" />
+					</Button>
+					<Button variant="ghost" size="sm" className="h-7 w-7 p-0" data-testid="skill-file-cancel-btn" onClick={onCancel}>
+						<X className="h-3 w-3" />
+					</Button>
+				</div>
 				{error && (
-					<p className="text-destructive mt-1 text-xs" role="alert">
+					<div className="text-destructive flex items-center gap-2 text-xs" role="alert">
+						<AlertCircle className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
 						{error}
-					</p>
+					</div>
 				)}
 			</div>
 		);
 	}
 
 	return (
-		<div className={cn("w-full rounded-sm border border-dashed p-2 space-y-3", className)}>
-			{!isTextNameOnly && (
+		<div className={cn("w-full rounded-sm border border-dashed p-2 flex flex-col gap-3", className)}>
+			{!isNewFileNameOnly && (
 				<div className="flex items-center gap-3">
-					<span className="border-border/60 text-muted-foreground inline-flex h-5 shrink-0 items-center rounded-full border bg-transparent px-2 text-[10px] leading-none font-medium">
+					<span className="border-border/60 text-muted-foreground inline-flex h-5 shrink-0 items-center rounded-full border bg-transparent px-2 text-xs leading-none font-medium">
 						{sourceOption.label}
 					</span>
-					<span className="text-muted-foreground font-mono text-[10px]">Location: {locationLabel}</span>
+					<span className="text-muted-foreground font-mono text-xs">Location: {locationLabel}</span>
 				</div>
 			)}
 
@@ -268,13 +271,13 @@ function FileAddForm({ folderPath, initialSourceType, initialEntry, submitLabel,
 					aria-label="Source URL"
 				/>
 			)}
-			{sourceType === "text" && !isTextNameOnly && (
+			{sourceType === "text" && !isNewFileNameOnly && (
 				<Textarea
 					data-testid="skill-file-content-textarea"
 					value={content}
 					onChange={(e) => setContent(e.target.value)}
 					placeholder="File content..."
-					className="min-h-[80px] font-mono text-xs"
+					className="min-h-20 font-mono text-xs"
 					rows={4}
 					aria-label="File content"
 				/>
@@ -291,7 +294,7 @@ function FileAddForm({ folderPath, initialSourceType, initialEntry, submitLabel,
 				/>
 			)}
 			{sourceType === "upload" && (
-				<div className="space-y-1.5">
+				<div className="flex flex-col gap-1.5">
 					<Input
 						data-testid="skill-file-upload-input"
 						type="file"
@@ -300,7 +303,7 @@ function FileAddForm({ folderPath, initialSourceType, initialEntry, submitLabel,
 						aria-label="Choose file to upload"
 					/>
 					{selectedFile && (
-						<div className="text-muted-foreground flex items-center gap-2 text-[10px]">
+						<div className="text-muted-foreground flex items-center gap-2 text-xs">
 							<span className="truncate font-mono">{selectedFile.name}</span>
 							<span>{formatFileSize(selectedFile.size)}</span>
 							{selectedFile.type && <span>{selectedFile.type}</span>}
@@ -380,14 +383,14 @@ function buildTree(files: SkillFileEntry[]) {
 }
 
 interface FileTreeNodeData extends BaseNodeData {
-	kind: "root" | "folder" | "file" | "skillmd" | "add-file" | "add-folder" | "edit-file" | "empty-folder";
+	kind: "root" | "folder" | "file" | "skillmd" | "add-file" | "add-folder" | "empty-folder";
 	path: string;
 	folder?: TreeFolder;
 	file?: SkillFileEntry;
 	fileIndex?: number;
 }
 
-function folderToTreeNode(folder: TreeFolder, editingFullFileIndex: number | null): TreeNode<FileTreeNodeData> {
+function folderToTreeNode(folder: TreeFolder): TreeNode<FileTreeNodeData> {
 	const childFolders = [...folder.folders.values()].sort((a, b) => a.name.localeCompare(b.name));
 	const childFiles = [...folder.files].sort((a, b) => basename(a.entry.path).localeCompare(basename(b.entry.path)));
 
@@ -400,12 +403,12 @@ function folderToTreeNode(folder: TreeFolder, editingFullFileIndex: number | nul
 			folder,
 		},
 		children: [
-			...childFolders.map((childFolder) => folderToTreeNode(childFolder, editingFullFileIndex)),
+			...childFolders.map((childFolder) => folderToTreeNode(childFolder)),
 			...childFiles.map(({ entry, index }) => ({
 				data: {
-					id: editingFullFileIndex === index ? `draft-edit:${index}:${entry.path}` : `file:${index}:${entry.path}`,
+					id: `file:${index}:${entry.path}`,
 					name: basename(entry.path),
-					kind: editingFullFileIndex === index ? ("edit-file" as const) : ("file" as const),
+					kind: "file" as const,
 					path: entry.path,
 					file: entry,
 					fileIndex: index,
@@ -441,6 +444,7 @@ export function FileManagerSection({
 	onSelectFile,
 	bodySelected,
 	onSelectBody,
+	hasBodyError,
 }: {
 	files: SkillFileEntry[];
 	onAddFile: (entry: SkillFileEntry) => void;
@@ -454,6 +458,8 @@ export function FileManagerSection({
 	// calls onSelectBody (the body is edited in the external pane).
 	bodySelected?: boolean;
 	onSelectBody?: () => void;
+	// When true, the SKILL.md label renders red to indicate missing body.
+	hasBodyError?: boolean;
 }) {
 	const [uploadSkillFile] = useUploadSkillFileMutation();
 	const folderUploadInputRef = useRef<HTMLInputElement | null>(null);
@@ -470,7 +476,7 @@ export function FileManagerSection({
 	const [editingFileOriginal, setEditingFileOriginal] = useState<{
 		path: string;
 	} | null>(null);
-	const [editingFullFileIndex, setEditingFullFileIndex] = useState<number | null>(null);
+	const [searchQuery, setSearchQuery] = useState("");
 	const [addingFile, setAddingFile] = useState<{
 		folderPath: string;
 		sourceType: string;
@@ -499,10 +505,7 @@ export function FileManagerSection({
 		});
 	}, [files]);
 
-	const treeStates = useMemo(() => ({ expandedNodes, setExpandedNodes }), [expandedNodes]);
-
-	const expandFolder = useCallback((folderPath: string) => {
-		// Expand root, the target folder, and all its ancestors
+	const expandFolder = (folderPath: string) => {
 		const normalizedFolderPath = folderPath === "root" ? "" : folderPath;
 		const ancestors = normalizedFolderPath.split("/").filter(Boolean);
 		setExpandedNodes((prev) => {
@@ -514,13 +517,19 @@ export function FileManagerSection({
 			}
 			return next;
 		});
-	}, []);
+	};
 
 	const isFolderUploading = folderUploadState !== null;
 
+	const filteredFiles = searchQuery.trim() ? files.filter((file) => file.path.toLowerCase().includes(searchQuery.toLowerCase())) : files;
+
 	const treeData = useMemo(() => {
-		const rootFolder = buildTree(files);
+		const rootFolder = buildTree(filteredFiles);
 		for (const folderPath of folders) {
+			if (searchQuery.trim()) {
+				const hasMatchingFile = filteredFiles.some((f) => f.path.startsWith(`${folderPath}/`));
+				if (!hasMatchingFile) continue;
+			}
 			const segments = folderPath.split("/").filter(Boolean);
 			let folder = rootFolder;
 			let currentPath = "";
@@ -531,11 +540,16 @@ export function FileManagerSection({
 			}
 		}
 
-		const rootNode = folderToTreeNode(rootFolder, editingFullFileIndex);
+		const rootNode = folderToTreeNode(rootFolder);
 
 		// SKILL.md sits at the top of the tree (under root), selecting the body pane.
 		if (onSelectBody) {
-			rootNode.children = [{ data: { id: "skillmd", name: "SKILL.md", kind: "skillmd", path: "" } }, ...(rootNode.children ?? [])];
+			rootNode.children = [
+				{
+					data: { id: "skillmd", name: "SKILL.md", kind: "skillmd", path: "" },
+				},
+				...(rootNode.children ?? []),
+			];
 		}
 
 		if (newFolderParent !== null) {
@@ -589,9 +603,9 @@ export function FileManagerSection({
 		addEmptyFolderDrafts(rootNode);
 
 		return [rootNode];
-	}, [addingFile, editingFullFileIndex, files, folders, newFolderParent, onSelectBody]);
+	}, [addingFile, filteredFiles, files, folders, newFolderParent, onSelectBody, searchQuery]);
 
-	const availableFolderPaths = useMemo(() => {
+	const availableFolderPaths = (() => {
 		const folderSet = new Set<string>([""]);
 		folders.forEach((folder) => folderSet.add(folder));
 		files.forEach((file) => {
@@ -602,7 +616,7 @@ export function FileManagerSection({
 			if (b === "") return 1;
 			return a.localeCompare(b);
 		});
-	}, [files, folders]);
+	})();
 
 	const handleFolderUploadClick = (folderPath: string) => {
 		if (isFolderUploading) return;
@@ -618,7 +632,6 @@ export function FileManagerSection({
 		setAddingFile(null);
 		setEditingFileIndex(null);
 		setEditingFileOriginal(null);
-		setEditingFullFileIndex(null);
 		fileUploadInputRef.current?.click();
 	};
 
@@ -644,7 +657,11 @@ export function FileManagerSection({
 			return;
 		}
 
-		setFolderUploadState({ folderPath: targetFolderPath, total: 1, completed: 0 });
+		setFolderUploadState({
+			folderPath: targetFolderPath,
+			total: 1,
+			completed: 0,
+		});
 		try {
 			const upload = await uploadSkillFile({ file }).unwrap();
 			onAddFile({
@@ -681,7 +698,6 @@ export function FileManagerSection({
 		setAddingFile(null);
 		setEditingFileIndex(null);
 		setEditingFileOriginal(null);
-		setEditingFullFileIndex(null);
 
 		setFolderUploadState({
 			folderPath: targetFolderPath,
@@ -809,16 +825,9 @@ export function FileManagerSection({
 				setEditingFileIndex(editingFileIndex - 1);
 			}
 		}
-		if (editingFullFileIndex !== null) {
-			if (editingFullFileIndex === index) {
-				setEditingFullFileIndex(null);
-			} else if (index < editingFullFileIndex) {
-				setEditingFullFileIndex(editingFullFileIndex - 1);
-			}
-		}
 	};
 
-	const folderDeleteImpact = useMemo(() => {
+	const folderDeleteImpact = (() => {
 		if (!folderToDelete) return null;
 		const nestedFiles = files
 			.filter((file) => file.path.startsWith(`${folderToDelete}/`))
@@ -829,7 +838,7 @@ export function FileManagerSection({
 			.sort((a, b) => a.localeCompare(b));
 
 		return { nestedFiles, nestedFolders };
-	}, [files, folderToDelete, folders]);
+	})();
 
 	const removeFolder = (folderPath: string) => {
 		setFolders((prev) => prev.filter((folder) => folder !== folderPath && !folder.startsWith(`${folderPath}/`)));
@@ -855,7 +864,6 @@ export function FileManagerSection({
 			}
 			return nextIndex;
 		});
-		setEditingFullFileIndex(adjustIndexAfterBatchRemove);
 		if (addingFile?.folderPath === folderPath || addingFile?.folderPath.startsWith(`${folderPath}/`)) setAddingFile(null);
 		if (newFolderParent === folderPath || newFolderParent?.startsWith(`${folderPath}/`)) {
 			setNewFolderParent(null);
@@ -886,7 +894,6 @@ export function FileManagerSection({
 		const folder = dirname(entry.path);
 		expandFolder(folder || "root");
 		setAddingFile(null);
-		setEditingFullFileIndex(null);
 		// Select the new file (appended at the end) so its editor opens immediately.
 		onSelectFile?.(files.length);
 	};
@@ -936,6 +943,7 @@ export function FileManagerSection({
 	}) => {
 		if (item.kind === "skillmd") {
 			const selected = !!bodySelected;
+			const showError = !selected && !!hasBodyError;
 			return (
 				<div
 					data-selected={selected || undefined}
@@ -949,19 +957,23 @@ export function FileManagerSection({
 						}
 					}}
 					className={cn(
-						"flex min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-sm px-1.5 py-1 text-sm transition-colors hover:bg-muted/50",
+						"flex h-7 min-w-0 cursor-pointer items-center gap-2 rounded-sm px-1.5 text-sm transition-colors hover:bg-muted/50",
 						selected && "bg-primary/10 text-primary hover:bg-primary/10",
 					)}
 				>
-					<BookOpen className={cn("h-3.5 w-3.5 shrink-0", selected ? "text-primary" : "text-muted-foreground")} />
-					<span className="min-w-0 flex-1 truncate font-mono text-xs">SKILL.md</span>
+					<BookOpen
+						className={cn("h-3.5 w-3.5 shrink-0", selected ? "text-primary" : showError ? "text-destructive" : "text-muted-foreground")}
+					/>
+					<span className={cn("min-w-0 flex-1 truncate font-mono text-xs", showError && "text-destructive")} title="SKILL.md">
+						SKILL.md
+					</span>
 				</div>
 			);
 		}
 
 		if (item.kind === "add-folder") {
 			return (
-				<div className="ml-1 space-y-1.5 py-1">
+				<div className="ml-1 flex flex-col gap-1.5 py-1">
 					<div className="flex items-center gap-2">
 						<Input
 							data-testid="skill-file-folder-name-input"
@@ -1018,32 +1030,11 @@ export function FileManagerSection({
 			);
 		}
 
-		if (item.kind === "edit-file" && item.file && item.fileIndex != null) {
-			return (
-				<FileAddForm
-					className="ml-1"
-					folderPath={dirname(item.file.path)}
-					initialSourceType={item.file.source_type}
-					initialEntry={item.file}
-					submitLabel="Update"
-					onAdd={(entry) => {
-						if (files.some((f, i) => i !== item.fileIndex && f.path === entry.path)) {
-							toast.error("A file already exists at that path");
-							return;
-						}
-						onUpdateFile(item.fileIndex!, entry);
-						setEditingFullFileIndex(null);
-					}}
-					onCancel={() => setEditingFullFileIndex(null)}
-				/>
-			);
-		}
-
 		if (item.kind === "empty-folder") {
 			return (
 				<div className="text-muted-foreground ml-1 flex items-center gap-2 py-1 text-xs">
 					<span>Empty folder</span>
-					<span className="text-muted-foreground/60 text-[10px]">Not saved until it contains a file.</span>
+					<span className="text-muted-foreground/60 text-xs">Not saved until it contains a file.</span>
 				</div>
 			);
 		}
@@ -1051,85 +1042,29 @@ export function FileManagerSection({
 		if (item.kind === "file" && item.file && item.fileIndex != null) {
 			const file = item.file;
 			const index = item.fileIndex;
-			const canFullEdit = !!file.__local && file.source_type !== "upload";
 			const fileMoveTargets = availableFolderPaths.filter((folderPath) => folderPath !== dirname(file.path));
 			const fileMeta = [file.source_type, file.mime_type, file.file_size_bytes ? formatFileSize(file.file_size_bytes) : null]
 				.filter(Boolean)
-				.join(" · ");
-
-			if (editingFileIndex === index) {
-				return (
-					<div className="ml-1 space-y-2 rounded-sm border border-dashed p-1">
-						<div className="flex items-center gap-2">
-							<FileText className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
-							<Input
-								value={basename(file.path)}
-								onChange={(e) => {
-									const newPath = joinPath(dirname(file.path), e.target.value);
-									if (files.some((f, i) => i !== index && f.path === newPath)) {
-										toast.error("A file already exists at that path");
-										return;
-									}
-									onUpdateFile(index, { path: newPath });
-								}}
-								placeholder="filename.ext"
-								className="h-7 font-mono text-xs"
-								aria-label="File name"
-							/>
-							<Button
-								variant="ghost"
-								size="sm"
-								className="text-muted-foreground hover:text-destructive h-7 w-7 p-0"
-								onClick={() => {
-									if (editingFileOriginal) onUpdateFile(index, { path: editingFileOriginal.path });
-									setEditingFileIndex(null);
-									setEditingFileOriginal(null);
-								}}
-							>
-								<X className="h-3 w-3" />
-							</Button>
-							<Button
-								variant="ghost"
-								size="sm"
-								className="text-muted-foreground h-7 w-7 p-0"
-								onClick={() => {
-									const err = validateFilePath(file.path);
-									const filenameErr = validateFilename(basename(file.path));
-									if (!err && !filenameErr) {
-										setEditingFileIndex(null);
-										setEditingFileOriginal(null);
-									}
-								}}
-							>
-								<Check className="h-3 w-3" />
-							</Button>
-						</div>
-						<div className="flex items-start gap-2 rounded-sm border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-900 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-200">
-							<Info className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" />
-							<span>Committed files keep their stored reference. Rename here; use Move to place the file in another folder.</span>
-						</div>
-					</div>
-				);
-			}
+				.join(" \u00b7 ");
 
 			const fileDropdownActive = activeDropdownNodeId === item.id;
-
 			const isSelected = onSelectFile != null && selectedIndex === index;
+			const isRenaming = editingFileIndex === index;
 
 			return (
 				<div
 					data-selected={isSelected || undefined}
 					className={cn(
-						"group flex min-w-0 items-center gap-2 overflow-hidden rounded-sm px-1.5 py-1 text-sm transition-colors hover:bg-muted/50",
+						"group flex min-w-0 items-center gap-2 rounded-sm px-1.5 py-1 text-sm transition-colors hover:bg-muted/50",
 						fileDropdownActive && "bg-muted/50",
 						isSelected && "bg-primary/10 hover:bg-primary/10",
 					)}
 				>
 					<div
-						className={cn("flex min-w-0 flex-1 items-center gap-2 overflow-hidden", onSelectFile && "cursor-pointer")}
-						onClick={onSelectFile ? () => onSelectFile(index) : undefined}
+						className={cn("flex min-w-0 flex-1 items-center gap-2", onSelectFile && !isRenaming && "cursor-pointer")}
+						onClick={!isRenaming && onSelectFile ? () => onSelectFile(index) : undefined}
 						onKeyDown={
-							onSelectFile
+							!isRenaming && onSelectFile
 								? (e) => {
 										if (e.key === "Enter" || e.key === " ") {
 											e.preventDefault();
@@ -1138,18 +1073,61 @@ export function FileManagerSection({
 									}
 								: undefined
 						}
-						role={onSelectFile ? "button" : undefined}
-						tabIndex={onSelectFile ? 0 : undefined}
+						role={!isRenaming && onSelectFile ? "button" : undefined}
+						tabIndex={!isRenaming && onSelectFile ? 0 : undefined}
 					>
 						<FileText className={cn("h-3.5 w-3.5 shrink-0", isSelected ? "text-primary" : "text-muted-foreground")} />
-						<span className="min-w-0 flex-1 truncate font-mono text-xs" title={basename(file.path)}>
-							{basename(file.path)}
-						</span>
+						{isRenaming ? (
+							<Input
+								autoFocus
+								value={basename(file.path)}
+								onChange={(e) => {
+									const newPath = joinPath(dirname(file.path), e.target.value);
+									if (files.some((f, i) => i !== index && f.path === newPath)) {
+										toast.error("A file already exists at that path");
+										return;
+									}
+									onUpdateFile(index, { path: newPath });
+								}}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") {
+										e.preventDefault();
+										const err = validateFilePath(file.path);
+										const filenameErr = validateFilename(basename(file.path));
+										if (!err && !filenameErr) {
+											setEditingFileIndex(null);
+											setEditingFileOriginal(null);
+										}
+									} else if (e.key === "Escape") {
+										e.preventDefault();
+										if (editingFileOriginal) onUpdateFile(index, { path: editingFileOriginal.path });
+										setEditingFileIndex(null);
+										setEditingFileOriginal(null);
+									}
+								}}
+								onBlur={() => {
+									const err = validateFilePath(file.path);
+									const filenameErr = validateFilename(basename(file.path));
+									if (err || filenameErr) {
+										if (editingFileOriginal) onUpdateFile(index, { path: editingFileOriginal.path });
+									}
+									setEditingFileIndex(null);
+									setEditingFileOriginal(null);
+								}}
+								placeholder="filename.ext"
+								className="h-7 min-w-0 flex-1 font-mono text-xs"
+								aria-label="Rename file"
+							/>
+						) : (
+							<span className="min-w-0 flex-1 truncate font-mono text-xs" title={basename(file.path)}>
+								{basename(file.path)}
+							</span>
+						)}
 					</div>
 					{!readOnly && (
 						<div
 							className={cn(
-								"flex shrink-0 items-center justify-end gap-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100",
+								"sticky right-1 z-10 ml-auto flex shrink-0 items-center justify-end gap-1 rounded-sm bg-muted px-0.5 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100",
 								fileDropdownActive && "md:opacity-100",
 							)}
 						>
@@ -1159,7 +1137,7 @@ export function FileManagerSection({
 										variant="ghost"
 										size="icon"
 										className="text-muted-foreground h-6 w-6"
-										data-testid={`skill-file-actions-${index}`}
+										data-testid={`skill-file-actions-${basename(file.path)}`}
 										aria-label={`Actions for ${file.path}`}
 									>
 										<MoreHorizontal className="h-3.5 w-3.5" />
@@ -1168,32 +1146,22 @@ export function FileManagerSection({
 								<DropdownMenuContent align="end" className="w-48">
 									{fileMeta && (
 										<>
-											<DropdownMenuLabel className="text-muted-foreground text-[10px] font-normal break-all">{fileMeta}</DropdownMenuLabel>
+											<DropdownMenuLabel className="text-muted-foreground text-xs font-normal break-all">{fileMeta}</DropdownMenuLabel>
 											<DropdownMenuSeparator />
 										</>
 									)}
 									<DropdownMenuItem
 										className="cursor-pointer"
 										onSelect={() => {
-											if (canFullEdit) {
-												setAddingFile(null);
-												setEditingFileIndex(null);
-												setEditingFileOriginal(null);
-												setEditingFullFileIndex(index);
-												return;
-											}
-											setEditingFullFileIndex(null);
 											setEditingFileIndex(index);
 											setEditingFileOriginal({ path: file.path });
 										}}
 									>
-										{canFullEdit ? "Edit source" : "Rename"}
+										Rename
 									</DropdownMenuItem>
 									{fileMoveTargets.length > 0 && (
 										<DropdownMenuSub>
-											<DropdownMenuSubTrigger>
-												Move to…
-											</DropdownMenuSubTrigger>
+											<DropdownMenuSubTrigger>Move to…</DropdownMenuSubTrigger>
 											<DropdownMenuSubContent>
 												{fileMoveTargets.map((folderPath) => (
 													<DropdownMenuItem
@@ -1202,7 +1170,6 @@ export function FileManagerSection({
 														onSelect={() => {
 															setEditingFileIndex(null);
 															setEditingFileOriginal(null);
-															setEditingFullFileIndex(null);
 															moveFileToFolder(index, folderPath);
 														}}
 													>
@@ -1216,7 +1183,13 @@ export function FileManagerSection({
 									<DropdownMenuItem
 										variant="destructive"
 										className="cursor-pointer"
-										onSelect={() => setFileToRemove({ index, path: file.path, isLocal: !!file.__local })}
+										onSelect={() =>
+											setFileToRemove({
+												index,
+												path: file.path,
+												isLocal: !!file.__local,
+											})
+										}
 									>
 										Delete
 									</DropdownMenuItem>
@@ -1239,7 +1212,7 @@ export function FileManagerSection({
 		return (
 			<div
 				className={cn(
-					"group flex min-w-0 items-center gap-2 overflow-hidden rounded-sm px-2 py-1.5 text-sm hover:bg-muted/40",
+					"group flex min-w-0 items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-muted/40",
 					hasChildren && "cursor-pointer",
 					folderDropdownActive && "bg-muted/40",
 				)}
@@ -1267,10 +1240,10 @@ export function FileManagerSection({
 				<span className="min-w-0 flex-1 truncate font-mono text-xs font-medium" title={isRoot ? "root" : `${item.name}/`}>
 					{isRoot ? "root" : `${item.name}/`}
 				</span>
-				{!readOnly && editingFullFileIndex == null && (
+				{!readOnly && (
 					<div
 						className={cn(
-							"ml-auto flex shrink-0 items-center gap-1 opacity-100 transition-opacity",
+							"sticky right-1 z-10 ml-auto flex shrink-0 items-center gap-1 rounded-sm px-0.5 opacity-100 transition-opacity",
 							// Root keeps its actions always visible; folders reveal on hover/focus.
 							!isRoot && "md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100",
 							!isRoot && folderDropdownActive && "md:opacity-100",
@@ -1305,7 +1278,10 @@ export function FileManagerSection({
 											className="cursor-pointer"
 											onSelect={() => {
 												expandFolder(item.path || "root");
-												setAddingFile({ folderPath: item.path, sourceType: "text" });
+												setAddingFile({
+													folderPath: item.path,
+													sourceType: "text",
+												});
 												setEditingFileIndex(null);
 												setEditingFileOriginal(null);
 											}}
@@ -1316,7 +1292,10 @@ export function FileManagerSection({
 											className="cursor-pointer"
 											onSelect={() => {
 												expandFolder(item.path || "root");
-												setAddingFile({ folderPath: item.path, sourceType: "url" });
+												setAddingFile({
+													folderPath: item.path,
+													sourceType: "url",
+												});
 												setEditingFileIndex(null);
 												setEditingFileOriginal(null);
 											}}
@@ -1327,7 +1306,10 @@ export function FileManagerSection({
 											className="cursor-pointer"
 											onSelect={() => {
 												expandFolder(item.path || "root");
-												setAddingFile({ folderPath: item.path, sourceType: "dataurl" });
+												setAddingFile({
+													folderPath: item.path,
+													sourceType: "dataurl",
+												});
 												setEditingFileIndex(null);
 												setEditingFileOriginal(null);
 											}}
@@ -1369,9 +1351,7 @@ export function FileManagerSection({
 										<DropdownMenuSeparator />
 										{folderMoveTargets.length > 0 && (
 											<DropdownMenuSub>
-												<DropdownMenuSubTrigger>
-													Move to…
-												</DropdownMenuSubTrigger>
+												<DropdownMenuSubTrigger>Move to…</DropdownMenuSubTrigger>
 												<DropdownMenuSubContent>
 													{folderMoveTargets.map((folderPath) => (
 														<DropdownMenuItem
@@ -1380,7 +1360,6 @@ export function FileManagerSection({
 															onSelect={() => {
 																setEditingFileIndex(null);
 																setEditingFileOriginal(null);
-																setEditingFullFileIndex(null);
 																moveFolderToFolder(item.path, folderPath);
 															}}
 														>
@@ -1444,7 +1423,37 @@ export function FileManagerSection({
 					{folderUploadError}
 				</div>
 			)}
-			<Tree data={treeData} renderItem={renderItem} indentSize={22} levelsToExpandByDefault={1} states={treeStates} />
+			<div className="mb-2">
+				<Input
+					value={searchQuery}
+					onChange={(e) => {
+						setSearchQuery(e.target.value);
+						if (e.target.value.trim()) {
+							// Expand all folders when searching so results are visible
+							setExpandedNodes((prev) => {
+								const next: Record<string, boolean> = { ...prev, root: true };
+								folders.forEach((f) => {
+									next[f] = true;
+								});
+								return next;
+							});
+						}
+					}}
+					placeholder="Search files..."
+					className="h-7 font-mono text-xs"
+					aria-label="Search files"
+				/>
+			</div>
+			<div className="min-w-max pr-2">
+				<Tree
+					data={treeData}
+					renderItem={renderItem}
+					indentSize={22}
+					levelsToExpandByDefault={1}
+					states={{ expandedNodes, setExpandedNodes }}
+				/>
+			</div>
+			<ScrollBar orientation="horizontal" />
 
 			<AlertDialog
 				open={folderToDelete !== null}
@@ -1474,10 +1483,10 @@ export function FileManagerSection({
 					</AlertDialogHeader>
 
 					{folderDeleteImpact?.nestedFiles.length ? (
-						<div className="bg-muted/20 space-y-3 rounded-sm border p-3 text-xs">
-							<div className="space-y-1">
-								<div className="text-muted-foreground text-[10px] font-medium tracking-wide uppercase">Files</div>
-								<ul className="text-muted-foreground max-h-32 space-y-1 overflow-auto font-mono">
+						<div className="bg-muted/20 flex flex-col gap-3 rounded-sm border p-3 text-xs">
+							<div className="flex flex-col gap-1">
+								<div className="text-muted-foreground text-xs font-medium tracking-wide uppercase">Files</div>
+								<ul className="text-muted-foreground flex max-h-32 flex-col gap-1 overflow-auto font-mono">
 									{folderDeleteImpact.nestedFiles.map((file) => (
 										<li key={file}>{file}</li>
 									))}
diff --git a/ui/app/workspace/skills-repo/components/filePreview.tsx b/ui/app/workspace/skills-repo/components/filePreview.tsx
index 7a028af0a2..10ea020163 100644
--- a/ui/app/workspace/skills-repo/components/filePreview.tsx
+++ b/ui/app/workspace/skills-repo/components/filePreview.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scrollArea";
 import { Textarea } from "@/components/ui/textarea";
 import { SkillFileEntry } from "@/lib/types/skills";
 import { getApiBaseUrl } from "@/lib/utils/port";
-import { cn } from "@/lib/utils";
-import { Download, File as FileIcon, Loader2, Save } from "lucide-react";
+import { Download, File as FileIcon, Info, Loader2, Save } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatFileSize } from "./helpers";
 
@@ -34,7 +35,10 @@ const TEXT_MIME_HINTS = [
   "toml",
 ];
 
-function isTextLikeMime(mime: string, sourceType: SkillFileEntry["source_type"]) {
+function isTextLikeMime(
+  mime: string,
+  sourceType: SkillFileEntry["source_type"],
+) {
   if (sourceType === "text") return true;
   if (!mime) return false;
   if (mime.startsWith("text/")) return true;
@@ -55,6 +59,12 @@ function detectKind(file: SkillFileEntry): FileKind {
 /**
  * Resolves what the preview needs: inline text, a media URL, or nothing
  * (e.g. an upload that hasn't been saved yet, so there's no serve URL).
+ *
+ * text / dataurl: saved files are fetched from the serve endpoint (content
+ *   is NOT inlined in the API response). Local/unsaved files use the
+ *   in-memory content or data URI directly.
+ * upload: same serve-endpoint approach for saved files.
+ * url: uses the external source_url directly.
  */
 function resolveSource(
   file: SkillFileEntry,
@@ -62,8 +72,15 @@ function resolveSource(
 ): { url?: string; inlineText?: string; unavailable?: boolean } {
   switch (file.source_type) {
     case "text":
-      return { inlineText: file.content ?? "" };
     case "dataurl":
+      // Saved text/dataurl files: fetch content from the serve endpoint.
+      if (!file.__local && skillName && file.path) {
+        return { url: getFileServeUrl(skillName, file.path) };
+      }
+      // Local/unsaved: use in-memory content.
+      if (file.source_type === "text") {
+        return { inlineText: file.content ?? "" };
+      }
       return file.dataurl ? { url: file.dataurl } : { unavailable: true };
     case "url":
       return file.source_url ? { url: file.source_url } : { unavailable: true };
@@ -86,6 +103,7 @@ export function FilePreview({
   skillName,
   mode,
   onContentChange,
+  onFileUpdate,
   editValue,
   onEditChange,
   downloadUrl,
@@ -93,8 +111,9 @@ export function FilePreview({
   file: SkillFileEntry;
   skillName: string;
   mode: "view" | "edit";
-  // Editing only applies to locally-held text (source_type "text").
+  // Editing applies to text and dataurl source types (text-like content only).
   onContentChange?: (content: string) => void;
+  onFileUpdate?: (updates: Partial<SkillFileEntry>) => void;
   // Controlled buffer for the text editor (used by FilePreviewPane to defer commits).
   editValue?: string;
   onEditChange?: (content: string) => void;
@@ -106,12 +125,21 @@ export function FilePreview({
   const fileName = file.path.split("/").filter(Boolean).pop() || file.path;
   const resolvedDownloadUrl = downloadUrl ?? source.url;
 
-  // The only inline-editable case is locally-held text content.
-  const canEditText = mode === "edit" && file.source_type === "text";
+  if (mode === "edit") {
+    return <FileSourceEditor file={file} skillName={skillName} onFileUpdate={onFileUpdate} />;
+  }
+
+  // text and dataurl are editable when the content is text-like.
+  const canEdit =
+    mode === "edit" &&
+    (file.source_type === "text" || file.source_type === "dataurl") &&
+    kind === "text";
 
-  // Text fetched from a URL/serve endpoint (view-only for non-local text).
+  // Text fetched from a URL/serve endpoint (for both view and edit modes).
   const [fetchedText, setFetchedText] = useState<string | null>(null);
-  const [fetchState, setFetchState] = useState<"idle" | "loading" | "error">("idle");
+  const [fetchState, setFetchState] = useState<"idle" | "loading" | "error">(
+    "idle",
+  );
 
   useEffect(() => {
     if (kind !== "text" || source.inlineText != null || !source.url) {
@@ -143,7 +171,11 @@ export function FilePreview({
   // ---- Unavailable (e.g. unsaved upload) ----
   if (source.unavailable && kind !== "text") {
     return (
-      <FallbackBlock fileName={fileName} file={file} downloadUrl={resolvedDownloadUrl}>
+      <FallbackBlock
+        fileName={fileName}
+        file={file}
+        downloadUrl={resolvedDownloadUrl}
+      >
         Preview available after saving.
       </FallbackBlock>
     );
@@ -152,9 +184,13 @@ export function FilePreview({
   // ---- Image ----
   if (kind === "image" && source.url) {
     return (
-      <div className="bg-muted/20 flex h-full items-center justify-center overflow-auto p-4">
+      <div className="bg-muted/20 flex items-center justify-center p-4">
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src={source.url} alt={fileName} className="max-h-full max-w-full object-contain" />
+        <img
+          src={source.url}
+          alt={fileName}
+          className="max-h-full max-w-full object-contain"
+        />
       </div>
     );
   }
@@ -164,7 +200,9 @@ export function FilePreview({
     return (
       <div className="flex h-full flex-col items-center justify-center gap-4 p-6">
         <FileIcon className="text-muted-foreground h-10 w-10" />
-        <span className="text-muted-foreground max-w-full truncate font-mono text-xs">{fileName}</span>
+        <span className="text-muted-foreground max-w-full truncate font-mono text-xs">
+          {fileName}
+        </span>
         <audio controls src={source.url} className="w-full max-w-md" />
       </div>
     );
@@ -181,21 +219,7 @@ export function FilePreview({
 
   // ---- Text ----
   if (kind === "text") {
-    const inline = source.inlineText;
-    if (canEditText) {
-      const value = editValue ?? inline ?? "";
-      const handleChange = onEditChange ?? onContentChange;
-      return (
-        <Textarea
-          value={value}
-          onChange={(e) => handleChange?.(e.target.value)}
-          placeholder="File content..."
-          className="h-full w-full resize-none rounded-none border-0 font-mono text-xs focus-visible:ring-0"
-          aria-label={`Edit ${fileName}`}
-        />
-      );
-    }
-
+    // Show loading state before content is available (applies to both view and edit).
     if (fetchState === "loading") {
       return (
         <div className="text-muted-foreground flex h-full items-center justify-center gap-2 text-xs">
@@ -206,22 +230,51 @@ export function FilePreview({
     }
     if (fetchState === "error") {
       return (
-        <FallbackBlock fileName={fileName} file={file} downloadUrl={resolvedDownloadUrl}>
+        <FallbackBlock
+          fileName={fileName}
+          file={file}
+          downloadUrl={resolvedDownloadUrl}
+        >
           Could not load file contents.
         </FallbackBlock>
       );
     }
 
-    const text = inline ?? fetchedText ?? "";
+    const textContent = source.inlineText ?? fetchedText ?? "";
+
+    if (canEdit) {
+      // editValue is set once the user starts typing (controlled by FilePreviewPane).
+      // Before that it is undefined, so the textarea shows the fetched/inline content.
+      const value = editValue ?? textContent;
+      const handleChange = onEditChange ?? onContentChange;
+      return (
+        <Textarea
+          value={value}
+          onChange={(e) => handleChange?.(e.target.value)}
+          placeholder="File content..."
+          className="h-full w-full resize-none rounded-none border-0 font-mono text-xs focus-visible:ring-0"
+          aria-label={`Edit ${fileName}`}
+        />
+      );
+    }
+
     return (
       <ScrollArea className="h-full">
-        <pre className="p-4 font-mono text-xs leading-5 whitespace-pre-wrap">{text || "(empty)"}</pre>
+        <pre className="p-4 font-mono text-xs leading-5 whitespace-pre-wrap">
+          {textContent || "(empty)"}
+        </pre>
       </ScrollArea>
     );
   }
 
   // ---- Fallback (binary / unknown) ----
-  return <FallbackBlock fileName={fileName} file={file} downloadUrl={resolvedDownloadUrl} />;
+  return (
+    <FallbackBlock
+      fileName={fileName}
+      file={file}
+      downloadUrl={resolvedDownloadUrl}
+    />
+  );
 }
 
 // ---------- FilePreviewPane ----------
@@ -232,6 +285,7 @@ export function FilePreviewPane({
   skillName,
   mode,
   onContentChange,
+  onFileUpdate,
   downloadUrl,
   registerFlush,
 }: {
@@ -239,22 +293,25 @@ export function FilePreviewPane({
   skillName: string;
   mode: "view" | "edit";
   onContentChange?: (content: string) => void;
+  onFileUpdate?: (updates: Partial<SkillFileEntry>) => void;
   downloadUrl?: string;
   // Lets the parent commit a pending buffer (e.g. before a version save).
   registerFlush?: (flush: (() => void) | null) => void;
 }) {
-  const resolved = downloadUrl ?? resolveSource(file, skillName).url;
+  const resolved = mode === "view" ? (downloadUrl ?? resolveSource(file, skillName).url) : undefined;
   const fileName = file.path.split("/").filter(Boolean).pop() || file.path;
 
-  // Editable text is buffered so "Save file" is an explicit, version-free commit.
-  const isEditableText = mode === "edit" && file.source_type === "text";
-  const [draft, setDraft] = useState(file.content ?? "");
-  const committedRef = useRef(file.content ?? "");
+  // text and dataurl are editable (when content is text-like).
+  const isEditable = false;
+  // Draft starts null — before the user types, FilePreview shows the fetched/inline
+  // content directly. Once the user types, the draft takes over.
+  const [draft, setDraft] = useState<string | null>(null);
+  const committedRef = useRef<string | null>(null);
   const draftRef = useRef(draft);
   draftRef.current = draft;
 
   const saveFile = useCallback(() => {
-    if (draftRef.current !== committedRef.current) {
+    if (draftRef.current != null && draftRef.current !== committedRef.current) {
       committedRef.current = draftRef.current;
       onContentChange?.(draftRef.current);
     }
@@ -263,25 +320,33 @@ export function FilePreviewPane({
   // Flush on unmount (the pane is keyed by path, so switching files commits)
   // and expose the flush to the parent for save-time commits.
   useEffect(() => {
-    if (!isEditableText) return;
+    if (!isEditable) return;
     registerFlush?.(saveFile);
     return () => {
       saveFile();
       registerFlush?.(null);
     };
-  }, [isEditableText, saveFile, registerFlush]);
+  }, [isEditable, saveFile, registerFlush]);
 
-  const dirty = isEditableText && draft !== committedRef.current;
+  const dirty = isEditable && draft != null && draft !== committedRef.current;
 
   return (
-    <div className="flex min-h-[320px] min-h-0 flex-1 flex-col overflow-hidden rounded-sm border">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-sm border">
       <div className="bg-muted/30 flex h-9 shrink-0 items-center justify-between gap-2 border-b px-3">
-        <span className="flex min-w-0 items-center gap-1.5 truncate font-mono text-xs" title={file.path}>
+        <span
+          className="flex min-w-0 items-center gap-1.5 truncate font-mono text-xs"
+          title={file.path}
+        >
           {file.path}
-          {dirty && <span className="bg-primary inline-block size-1.5 shrink-0 rounded-full" aria-label="Unsaved changes" />}
+          {dirty && (
+            <span
+              className="bg-primary inline-block size-1.5 shrink-0 rounded-full"
+              aria-label="Unsaved changes"
+            />
+          )}
         </span>
         <div className="flex shrink-0 items-center gap-1">
-          {isEditableText && (
+          {isEditable && (
             <Button
               variant="ghost"
               size="sm"
@@ -295,21 +360,31 @@ export function FilePreviewPane({
             </Button>
           )}
           {resolved && (
-            <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground h-7 px-2" asChild>
-              <a href={resolved} download={fileName} aria-label={`Download ${fileName}`}>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-muted-foreground hover:text-foreground h-7 px-2"
+              asChild
+            >
+              <a
+                href={resolved}
+                download={fileName}
+                aria-label={`Download ${fileName}`}
+              >
                 <Download className="h-3.5 w-3.5" />
               </a>
             </Button>
           )}
         </div>
       </div>
-      <div className="min-h-0 flex-1">
+      <div className="min-h-0 grow overflow-y-auto">
         <FilePreview
           file={file}
           skillName={skillName}
           mode={mode}
-          editValue={isEditableText ? draft : undefined}
-          onEditChange={isEditableText ? setDraft : undefined}
+          onFileUpdate={onFileUpdate}
+          editValue={isEditable && draft != null ? draft : undefined}
+          onEditChange={isEditable ? (v) => setDraft(v) : undefined}
           onContentChange={onContentChange}
           downloadUrl={resolved}
         />
@@ -318,6 +393,149 @@ export function FilePreviewPane({
   );
 }
 
+function FileSourceEditor({
+  file,
+  skillName,
+  onFileUpdate,
+}: {
+  file: SkillFileEntry;
+  skillName: string;
+  onFileUpdate?: (updates: Partial<SkillFileEntry>) => void;
+}) {
+  const fileName = file.path.split("/").filter(Boolean).pop() || file.path;
+  const source = resolveSource(file, skillName);
+  const kind = detectKind(file);
+
+  // For saved text/dataurl files, content lives on the serve endpoint.
+  // Fetch it on mount and seed a local editable buffer.
+  const [fetchedContent, setFetchedContent] = useState<string | null>(null);
+  const [fetchState, setFetchState] = useState<"idle" | "loading" | "error">("idle");
+  const needsFetch =
+    (file.source_type === "text" ||
+      (file.source_type === "dataurl" && kind === "text")) &&
+    !file.__local &&
+    source.url != null &&
+    source.inlineText == null;
+
+  useEffect(() => {
+    if (!needsFetch || !source.url) return;
+    let cancelled = false;
+    setFetchState("loading");
+    fetch(source.url)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.text();
+      })
+      .then((text) => {
+        if (cancelled) return;
+        setFetchedContent(text);
+        setFetchState("idle");
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setFetchState("error");
+      });
+    return () => { cancelled = true; };
+  }, [needsFetch, source.url]);
+
+  if (file.source_type === "upload") {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
+        <FileIcon className="text-muted-foreground h-12 w-12" />
+        <div className="flex flex-col gap-0.5">
+          <p className="max-w-full truncate font-mono text-sm">{fileName}</p>
+          <p className="text-muted-foreground text-xs">
+            {file.mime_type || "uploaded file"}
+            {file.file_size_bytes ? ` · ${formatFileSize(file.file_size_bytes)}` : ""}
+          </p>
+        </div>
+        <p className="text-muted-foreground max-w-md text-xs">
+          Uploaded files cannot be edited here. The preview is available on the view page; to change this file, delete it and upload a replacement.
+        </p>
+      </div>
+    );
+  }
+
+  if (file.source_type === "url") {
+    return (
+      <div className="flex h-full flex-col gap-4 p-4">
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-muted-foreground text-xs">Source URL</Label>
+          <Input
+            data-testid="skill-file-url-input"
+            value={file.source_url ?? ""}
+            onChange={(e) => onFileUpdate?.({ source_url: e.target.value })}
+            placeholder="https://example.com/file.py"
+            className="font-mono text-xs"
+          />
+        </div>
+        <div className="flex items-start gap-2 rounded-sm border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-900 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-200">
+          <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+          <span>This source is saved as a live reference. Bifrost reads from this URL when the skill file is retrieved.</span>
+        </div>
+      </div>
+    );
+  }
+
+  // text and dataurl: show loading while fetching saved content
+  if (needsFetch && fetchState === "loading") {
+    return (
+      <div className="text-muted-foreground flex h-full items-center justify-center gap-2 text-xs">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        Loading…
+      </div>
+    );
+  }
+  if (needsFetch && fetchState === "error") {
+    return (
+      <div className="text-muted-foreground flex h-full items-center justify-center gap-2 text-xs">
+        Could not load file contents.
+      </div>
+    );
+  }
+
+  if (file.source_type === "dataurl") {
+    // Saved binary data URLs are not text-decodable: reading them through
+    // res.text() and re-encoding would corrupt the bytes, and an editable
+    // textarea would persist that corruption. Show a read-only file card.
+    if (!file.dataurl && kind !== "text") {
+      return (
+        <FallbackBlock fileName={fileName} file={file} downloadUrl={source.url}>
+          Binary data URLs can&apos;t be edited as text. Download to inspect, or
+          delete and re-upload to replace this file.
+        </FallbackBlock>
+      );
+    }
+    // Text data URLs: the fetched content is the decoded text; local files
+    // carry file.dataurl directly.
+    const currentValue = file.dataurl ?? (fetchedContent != null ? `data:${file.mime_type || "text/plain"};base64,${btoa(unescape(encodeURIComponent(fetchedContent)))}` : "");
+    return (
+      <div className="flex h-full min-h-0 flex-col gap-2 p-4">
+        <Label className="text-muted-foreground text-xs">Data URL</Label>
+        <Textarea
+          data-testid="skill-file-dataurl-textarea"
+          value={currentValue}
+          onChange={(e) => onFileUpdate?.({ dataurl: e.target.value, blob_id: undefined, storage_key: undefined })}
+          placeholder="data:text/plain;base64,..."
+          className="min-h-0 flex-1 resize-none font-mono text-xs"
+        />
+      </div>
+    );
+  }
+
+  // text source
+  const currentContent = file.content ?? source.inlineText ?? fetchedContent ?? "";
+  return (
+    <Textarea
+      data-testid="skill-file-content-textarea"
+      value={currentContent}
+      onChange={(e) => onFileUpdate?.({ content: e.target.value, blob_id: undefined, storage_key: undefined })}
+      placeholder="File content..."
+      className="h-full w-full resize-none rounded-none border-0 font-mono text-xs focus-visible:ring-0"
+    />
+  );
+}
+
 function FallbackBlock({
   fileName,
   file,
@@ -330,13 +548,15 @@ function FallbackBlock({
   children?: React.ReactNode;
 }) {
   return (
-    <div className={cn("flex h-full flex-col items-center justify-center gap-3 p-6 text-center")}>
+    <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
       <FileIcon className="text-muted-foreground h-12 w-12" />
-      <div className="space-y-0.5">
+      <div className="flex flex-col gap-0.5">
         <p className="max-w-full truncate font-mono text-sm">{fileName}</p>
         <p className="text-muted-foreground text-xs">
           {file.mime_type || "unknown type"}
-          {file.file_size_bytes ? ` · ${formatFileSize(file.file_size_bytes)}` : ""}
+          {file.file_size_bytes
+            ? ` · ${formatFileSize(file.file_size_bytes)}`
+            : ""}
         </p>
       </div>
       {children && <p className="text-muted-foreground text-xs">{children}</p>}
diff --git a/ui/app/workspace/skills-repo/components/helpers.ts b/ui/app/workspace/skills-repo/components/helpers.ts
index f8f8e2ef38..2658319550 100644
--- a/ui/app/workspace/skills-repo/components/helpers.ts
+++ b/ui/app/workspace/skills-repo/components/helpers.ts
@@ -10,7 +10,7 @@ import {
   validateSkillName,
   validateVersion,
 } from "@/lib/validators/skills";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 // ---------- Constants ----------
 
@@ -103,13 +103,6 @@ function yamlMetadataBlock(value: unknown, indent = 0): string[] {
   return [`${pad}${yamlMetadataScalar(value)}`];
 }
 
-function yamlMetadataField(key: string, value: unknown): string[] {
-  if (value !== null && typeof value === "object") {
-    return [`${key}:`, ...yamlMetadataBlock(value, 2)];
-  }
-  return [`${key}: ${yamlMetadataScalar(value)}`];
-}
-
 export function composeFrontmatter(data: {
   name: string;
   description: string;
@@ -147,8 +140,13 @@ export function composeFrontmatter(data: {
   if (data.metadata_json.trim()) {
     try {
       const md = JSON.parse(data.metadata_json) as Record<string, string>;
-      if (Object.keys(md).length > 0)
-        lines.push(...yamlMetadataField("metadata", md));
+      if (Object.keys(md).length > 0) {
+        if (typeof md === "object" && md !== null) {
+          lines.push("metadata:", ...yamlMetadataBlock(md, 2));
+        } else {
+          lines.push(`metadata: ${yamlMetadataScalar(md)}`);
+        }
+      }
     } catch {
       /* skip if invalid */
     }
@@ -220,32 +218,21 @@ export function useSkillForm(initial?: SkillFormState) {
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [bodyWarning, setBodyWarning] = useState<string | null>(null);
 
-  const validateField = useCallback((field: string, value: string) => {
+  const validateField = (field: string, value: string) => {
     let err: string | null = null;
-    switch (field) {
-      case "name":
-        err = validateSkillName(value);
-        break;
-      case "description":
-        err = validateDescription(value);
-        break;
-      case "version":
-        err = validateVersion(value);
-        break;
-      case "extra_frontmatter":
-        err = validateExtraFrontmatter(value);
-        break;
-      case "metadata":
-        err = validateMetadata(value);
-        break;
-    }
+    if (field === "name") err = validateSkillName(value);
+    else if (field === "description") err = validateDescription(value);
+    else if (field === "version") err = validateVersion(value);
+    else if (field === "extra_frontmatter") err = validateExtraFrontmatter(value);
+    else if (field === "metadata") err = validateMetadata(value);
+
     setErrors((prev) => {
       const next = { ...prev };
       if (err) next[field] = err;
       else delete next[field];
       return next;
     });
-  }, []);
+  };
 
   useEffect(() => {
     const result = validateSkillMdBody(skillMdBody);
@@ -260,22 +247,30 @@ export function useSkillForm(initial?: SkillFormState) {
 
   const hasErrors = Object.keys(errors).length > 0;
 
-  const getPayload = () => ({
-    name,
-    description,
-    license: license || undefined,
-    compatibility: compatibility || undefined,
-    metadata: metadataJson.trim()
-      ? (() => { try { return JSON.parse(metadataJson); } catch { return undefined; } })()
-      : undefined,
-    extra_frontmatter: extraFrontmatterJson.trim()
-      ? (() => { try { return JSON.parse(extraFrontmatterJson); } catch { return undefined; } })()
-      : undefined,
-    allowed_tools: allowedTools || undefined,
-    skill_md_body: skillMdBody,
-    version,
-    files: files.map(({ __local, ...file }) => file),
-  });
+  const getPayload = () => {
+    let parsedMetadata: Record<string, string> | undefined;
+    if (metadataJson.trim()) {
+      try { parsedMetadata = JSON.parse(metadataJson) as Record<string, string>; } catch { /* skip */ }
+    }
+
+    let parsedExtraFrontmatter: Record<string, unknown> | undefined;
+    if (extraFrontmatterJson.trim()) {
+      try { parsedExtraFrontmatter = JSON.parse(extraFrontmatterJson) as Record<string, unknown>; } catch { /* skip */ }
+    }
+
+    return {
+      name,
+      description,
+      license: license || undefined,
+      compatibility: compatibility || undefined,
+      metadata: parsedMetadata,
+      extra_frontmatter: parsedExtraFrontmatter,
+      allowed_tools: allowedTools || undefined,
+      skill_md_body: skillMdBody,
+      version,
+      files: files.map(({ __local, ...file }) => file),
+    };
+  };
 
   const runValidation = () => {
     const validationErrors = validateSkillForm({
diff --git a/ui/app/workspace/skills-repo/components/metadataEditorTableView.tsx b/ui/app/workspace/skills-repo/components/metadataEditorTableView.tsx
index ea7432eb60..83d790d822 100644
--- a/ui/app/workspace/skills-repo/components/metadataEditorTableView.tsx
+++ b/ui/app/workspace/skills-repo/components/metadataEditorTableView.tsx
@@ -4,37 +4,6 @@ import { HeadersTable } from "@/components/ui/headersTable";
 
 // ---------- MetadataTableEditor ----------
 
-function parseMetadataValue(metadataJson: string): Record<string, string> {
-  if (!metadataJson.trim()) {
-    return {};
-  }
-
-  try {
-    const parsed = JSON.parse(metadataJson) as unknown;
-    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
-      return {};
-    }
-
-    return Object.fromEntries(
-      Object.entries(parsed as Record<string, unknown>).map(([key, value]) => [
-        key,
-        String(value ?? ""),
-      ]),
-    );
-  } catch {
-    return {};
-  }
-}
-
-function serializeMetadataValue(value: Record<string, string>): string {
-  const validEntries = Object.entries(value).filter(([key]) => key.trim());
-  if (validEntries.length === 0) {
-    return "";
-  }
-
-  return JSON.stringify(Object.fromEntries(validEntries), null, 2);
-}
-
 export function MetadataTableEditor({
   metadataJson,
   onChange,
@@ -44,12 +13,40 @@ export function MetadataTableEditor({
   onChange: (json: string) => void;
   error?: string;
 }) {
+  // Parse JSON string into key-value pairs for the table
+  let parsedValue: Record<string, string> = {};
+  if (metadataJson.trim()) {
+    try {
+      const parsed = JSON.parse(metadataJson) as unknown;
+      if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+        parsedValue = Object.fromEntries(
+          Object.entries(parsed as Record<string, unknown>).map(([key, value]) => [
+            key,
+            String(value ?? ""),
+          ]),
+        );
+      }
+    } catch {
+      // Invalid JSON, fall back to empty
+    }
+  }
+
+  const handleChange = (next: Record<string, string>) => {
+    // Serialize key-value pairs back to JSON, filtering out empty keys
+    const validEntries = Object.entries(next).filter(([key]) => key.trim());
+    if (validEntries.length === 0) {
+      onChange("");
+      return;
+    }
+    onChange(JSON.stringify(Object.fromEntries(validEntries), null, 2));
+  };
+
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-2">
       <HeadersTable
         label=""
-        value={parseMetadataValue(metadataJson)}
-        onChange={(next) => onChange(serializeMetadataValue(next))}
+        value={parsedValue}
+        onChange={handleChange}
         keyPlaceholder="Metadata key"
         valuePlaceholder="Metadata value"
       />
diff --git a/ui/app/workspace/skills-repo/components/shared.tsx b/ui/app/workspace/skills-repo/components/shared.tsx
index 2396762376..e62156ccda 100644
--- a/ui/app/workspace/skills-repo/components/shared.tsx
+++ b/ui/app/workspace/skills-repo/components/shared.tsx
@@ -4,7 +4,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdownMenu";
-import { ScrollArea } from "@/components/ui/scrollArea";
+import { ScrollArea, ScrollBar } from "@/components/ui/scrollArea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Markdown } from "@/components/ui/markdown";
@@ -29,14 +29,13 @@ import {
 	Folder,
 	FolderOpen,
 	Hammer,
-	Maximize2,
 	MoreHorizontal,
 	PanelLeftClose,
 	PanelLeftOpen,
 	Scale,
 	X,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useState, useMemo } from "react";
 import { formatYamlRecord } from "./helpers";
 import { FilePreviewPane, getFileServeUrl } from "./filePreview";
 
@@ -156,23 +155,20 @@ export function SkillHeader({
 						)}
 					</div>
 				</div>
-				<div className={cn("w-full", onBack && "ml-10")}>
-					<p className="text-muted-foreground max-w-3xl text-xs">{description}</p>
-					<TooltipProvider>
-						<div className="mt-3 flex flex-wrap items-center gap-2 pb-2">
-							<HeaderMetaItem label="License" value={license} missingText="No license defined" icon={Scale} />
-							<HeaderMetaItem label="Compatibility" value={compatibility} missingText="No compatibility defined" icon={Bot} />
-							<HeaderMetaItem label="Allowed tools" value={allowedTools} missingText="No allowed tools defined" icon={Hammer} />
-						</div>
-					</TooltipProvider>
-				</div>
+			</div>
+			<div className="w-full">
+				<p className="text-muted-foreground max-w-3xl text-xs">{description}</p>
+				<TooltipProvider>
+					<div className="mt-3 flex flex-wrap items-center gap-2 pb-2">
+						<HeaderMetaItem label="License" value={license} missingText="No license defined" icon={Scale} />
+						<HeaderMetaItem label="Compatibility" value={compatibility} missingText="No compatibility defined" icon={Bot} />
+						<HeaderMetaItem label="Allowed tools" value={allowedTools} missingText="No allowed tools defined" icon={Hammer} />
+					</div>
+				</TooltipProvider>
 			</div>
 			{composedSkillMd && (
 				<Dialog open={showRawDialog} onOpenChange={setShowRawDialog}>
-					<DialogContent
-						showCloseButton={false}
-						className="h-[90vh] max-h-[90vh] w-[95vw] max-w-[95vw] min-w-0 overflow-hidden border-0 bg-transparent p-0 shadow-none sm:w-[80vw] sm:max-w-[80vw] md:w-[50vw] md:max-w-[50vw]"
-					>
+					<DialogContent showCloseButton={false} className="w-full max-w-full border-0 p-0 sm:w-4/5 sm:max-w-4xl md:w-1/2 md:max-w-3xl">
 						<DialogHeader className="sr-only">
 							<DialogTitle>Raw SKILL.md</DialogTitle>
 						</DialogHeader>
@@ -192,8 +188,8 @@ export function SkillHeader({
 									<span className="sr-only">Close</span>
 								</DialogClose>
 							</div>
-							<ScrollArea className="h-[90vh]" viewportClassName="bg-muted">
-								<pre className="bg-muted min-h-[420px] p-5 pr-24 font-mono text-xs leading-5 whitespace-pre-wrap">{composedSkillMd}</pre>
+							<ScrollArea className="h-screen" viewportClassName="bg-muted">
+								<pre className="bg-muted min-h-96 p-5 pr-24 font-mono text-xs leading-5 whitespace-pre-wrap">{composedSkillMd}</pre>
 							</ScrollArea>
 						</div>
 					</DialogContent>
@@ -217,7 +213,7 @@ export function FormSection({
 	helperText?: React.ReactNode;
 }) {
 	return (
-		<section className={cn("space-y-3", className)}>
+		<section className={cn("flex flex-col gap-3", className)}>
 			<div className="flex items-baseline gap-2 pb-1">
 				<h2 className="text-foreground text-base font-semibold tracking-tight">{title}</h2>
 				{optional && <span className="text-muted-foreground text-xs">optional</span>}
@@ -229,12 +225,12 @@ export function FormSection({
 }
 
 // ---------- ReadOnlyYamlBlock ----------
-export function ReadOnlyYamlBlock({ title, value }: { title: string; value: Record<string, unknown> }) {
+export function ReadOnlyYamlBlock({ title, value, className }: { title: string; value: Record<string, unknown>; className?: string }) {
 	const yaml = formatYamlRecord(value);
 
 	return (
-		<FormSection title={title}>
-			<div>
+		<FormSection title={title} className={cn("flex flex-1 flex-col", className)}>
+			<div className="bg-muted/10 flex-1 overflow-y-auto rounded-sm border p-3">
 				<Markdown content={`\`\`\`yaml\n${yaml}\n\`\`\``} />
 			</div>
 		</FormSection>
@@ -242,17 +238,17 @@ export function ReadOnlyYamlBlock({ title, value }: { title: string; value: Reco
 }
 
 // ---------- ReadOnlyMetadataTable ----------
-export function ReadOnlyMetadataTable({ value }: { value: Record<string, unknown> }) {
+export function ReadOnlyMetadataTable({ value, className }: { value: Record<string, unknown>; className?: string }) {
 	const entries = Object.entries(value);
 
 	return (
-		<FormSection title="Metadata">
-			<div className="rounded-sm border">
-				<div className="bg-muted/30 grid grid-cols-2 border-b px-3 py-2 text-sm font-medium">
+		<FormSection title="Metadata" className={cn("flex flex-1 flex-col", className)}>
+			<div className="flex flex-1 flex-col rounded-sm border">
+				<div className="bg-muted/30 sticky top-0 z-10 grid grid-cols-2 border-b px-3 py-2 text-sm font-medium">
 					<span>Key</span>
 					<span>Value</span>
 				</div>
-				<div className="text-muted-foreground divide-y">
+				<div className="text-muted-foreground flex-1 divide-y overflow-y-auto">
 					{entries.map(([key, item]) => (
 						<div key={key} className="grid grid-cols-2 gap-3 px-3 py-2.5 text-sm">
 							<p className="min-w-0 truncate font-mono text-xs">{key}</p>
@@ -268,60 +264,47 @@ export function ReadOnlyMetadataTable({ value }: { value: Record<string, unknown
 
 export function ReadOnlySkillBody({ body }: { body: string }) {
 	const [activeTab, setActiveTab] = useState("rendered");
-	const [dialogTab, setDialogTab] = useState("rendered");
-	const [expandOpen, setExpandOpen] = useState(false);
-	const [externalLink, setExternalLink] = useState<{ href: string; label: string } | null>(null);
+	const [externalLink, setExternalLink] = useState<{
+		href: string;
+		label: string;
+	} | null>(null);
 
-	const markdownComponents = useMemo(
-		() => ({
-			a: ({ href, children, ...props }: React.ComponentProps<"a">) => {
-				const isExternal = Boolean(href && /^https?:\/\//i.test(href));
-				const label = typeof children === "string" ? children : href || "external link";
-
-				if (!isExternal || !href) {
-					return (
-						<a href={href} {...props}>
-							{children}
-						</a>
-					);
-				}
+	const markdownComponents = {
+		a: ({ href, children, ...props }: React.ComponentProps<"a">) => {
+			const isExternal = Boolean(href && /^https?:\/\//i.test(href));
+			const label = typeof children === "string" ? children : href || "external link";
 
+			if (!isExternal || !href) {
 				return (
-					<a
-						href={href}
-						{...props}
-						onClick={(event) => {
-							props.onClick?.(event);
-							if (event.defaultPrevented) return;
-							event.preventDefault();
-							setExternalLink({ href, label });
-						}}
-					>
+					<a href={href} {...props}>
 						{children}
 					</a>
 				);
-			},
-		}),
-		[],
-	);
+			}
 
-	const openExternalLink = () => {
-		if (!externalLink) return;
-		window.open(externalLink.href, "_blank", "noopener,noreferrer");
-		setExternalLink(null);
+			return (
+				<a
+					href={href}
+					{...props}
+					onClick={(event) => {
+						props.onClick?.(event);
+						if (event.defaultPrevented) return;
+						event.preventDefault();
+						setExternalLink({ href, label });
+					}}
+				>
+					{children}
+				</a>
+			);
+		},
 	};
 
 	return (
 		<FormSection title="SKILL.md Body" className="flex min-h-0 flex-1 flex-col">
 			<Tabs defaultValue="rendered" onValueChange={setActiveTab} className="flex min-h-0 w-full flex-1 flex-col">
-				<div
-					className={cn(
-						"relative min-h-[320px] flex-1 overflow-hidden rounded-sm border",
-						activeTab === "raw" ? "bg-muted" : "bg-background",
-					)}
-				>
+				<div className={cn("relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-sm border")}>
 					<div className="absolute top-3 right-3 z-10 flex items-center gap-1.5">
-						<TabsList className="bg-card h-8 shadow-sm backdrop-blur">
+						<TabsList className="bg-muted h-8 shadow-sm backdrop-blur">
 							<TabsTrigger value="rendered" className="h-6 px-2.5 text-xs">
 								Rendered
 							</TabsTrigger>
@@ -329,90 +312,22 @@ export function ReadOnlySkillBody({ body }: { body: string }) {
 								Raw
 							</TabsTrigger>
 						</TabsList>
-						<button
-							type="button"
-							className="bg-card text-muted-foreground hover:text-foreground inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm shadow-sm backdrop-blur transition-colors"
-							onClick={() => setExpandOpen(true)}
-							aria-label="Expand SKILL.md body"
-						>
-							<Maximize2 className="h-3.5 w-3.5" />
-						</button>
 					</div>
-					<TabsContent value="rendered" className="absolute inset-0 m-0 overflow-hidden">
-						<ScrollArea className="h-full">
-							<div className="min-w-0 p-4">
-								<Markdown
-									content={body || ""}
-									className="max-w-full text-sm break-words [&_*]:max-w-full [&_*]:break-words [&_a]:break-all [&_code]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:whitespace-pre-wrap [&_table]:table-fixed"
-									components={markdownComponents}
-								/>
-							</div>
-						</ScrollArea>
+					<TabsContent value="rendered" className="m-0 flex-1 overflow-y-auto">
+						<div className="min-w-0 p-4">
+							<Markdown
+								content={body || ""}
+								className="max-w-full text-sm break-words [&_*]:max-w-full [&_*]:break-words [&_a]:break-all [&_code]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:whitespace-pre-wrap [&_table]:table-fixed"
+								components={markdownComponents}
+							/>
+						</div>
 					</TabsContent>
-					<TabsContent value="raw" className="bg-muted absolute inset-0 m-0 overflow-hidden">
-						<ScrollArea className="h-full" viewportClassName="bg-muted">
-							<pre className="bg-muted min-h-full p-4 font-mono text-xs leading-5 whitespace-pre-wrap">{body || "(empty)"}</pre>
-						</ScrollArea>
+					<TabsContent value="raw" className="m-0 flex-1 overflow-y-auto">
+						<pre className="min-h-full p-4 font-mono text-xs leading-5 whitespace-pre-wrap">{body || "(empty)"}</pre>
 					</TabsContent>
 				</div>
 			</Tabs>
 
-			<Dialog
-				open={expandOpen}
-				onOpenChange={(open) => {
-					setExpandOpen(open);
-					if (open) setDialogTab(activeTab);
-				}}
-			>
-				<DialogContent
-					showCloseButton={false}
-					className="h-[90vh] max-h-[90vh] w-[95vw] max-w-[95vw] min-w-0 overflow-hidden border-0 bg-transparent p-0 shadow-none sm:w-[80vw] sm:max-w-[80vw] md:w-[50vw] md:max-w-[50vw]"
-				>
-					<DialogHeader className="sr-only">
-						<DialogTitle>SKILL.md Body</DialogTitle>
-					</DialogHeader>
-					<Tabs value={dialogTab} onValueChange={setDialogTab} className="h-full">
-						<div
-							className={cn(
-								"relative h-full overflow-hidden rounded-sm border shadow-lg",
-								dialogTab === "raw" ? "bg-muted" : "bg-background",
-							)}
-						>
-							<div className="absolute top-3 right-3 z-10 flex items-center gap-1.5">
-								<TabsList className="bg-card h-8 shadow-sm backdrop-blur">
-									<TabsTrigger value="rendered" className="h-6 px-2.5 text-xs">
-										Rendered
-									</TabsTrigger>
-									<TabsTrigger value="raw" className="h-6 px-2.5 text-xs">
-										Raw
-									</TabsTrigger>
-								</TabsList>
-								<DialogClose className="bg-card text-muted-foreground hover:text-foreground inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm shadow-sm backdrop-blur transition-colors">
-									<X className="h-4 w-4" />
-									<span className="sr-only">Close</span>
-								</DialogClose>
-							</div>
-							<TabsContent value="rendered" className="absolute inset-0 m-0 overflow-hidden">
-								<ScrollArea className="h-full">
-									<div className="min-w-0 p-5">
-										<Markdown
-											content={body || ""}
-											className="max-w-full text-sm break-words [&_*]:max-w-full [&_*]:break-words [&_a]:break-all [&_code]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:whitespace-pre-wrap [&_table]:table-fixed"
-											components={markdownComponents}
-										/>
-									</div>
-								</ScrollArea>
-							</TabsContent>
-							<TabsContent value="raw" className="bg-muted absolute inset-0 m-0 overflow-hidden">
-								<ScrollArea className="h-full" viewportClassName="bg-muted">
-									<pre className="bg-muted min-h-full p-5 font-mono text-xs leading-5 whitespace-pre-wrap">{body || "(empty)"}</pre>
-								</ScrollArea>
-							</TabsContent>
-						</div>
-					</Tabs>
-				</DialogContent>
-			</Dialog>
-
 			<Dialog open={externalLink != null} onOpenChange={(open) => !open && setExternalLink(null)}>
 				<DialogContent>
 					<DialogHeader>
@@ -427,7 +342,13 @@ export function ReadOnlySkillBody({ body }: { body: string }) {
 						<Button variant="outline" onClick={() => setExternalLink(null)}>
 							Cancel
 						</Button>
-						<Button onClick={openExternalLink}>
+						<Button
+							onClick={() => {
+								if (!externalLink) return;
+								window.open(externalLink.href, "_blank", "noopener,noreferrer");
+								setExternalLink(null);
+							}}
+						>
 							<ExternalLink className="h-4 w-4" />
 							Open link
 						</Button>
@@ -465,6 +386,32 @@ function fileNameFromPath(filePath: string) {
 	return filePath.split("/").filter(Boolean).pop() || filePath;
 }
 
+// Simple helper components to avoid nested ternaries in the file tree rows.
+
+function TreeRowChevron({ hasChildren, isExpanded }: { hasChildren: boolean; isExpanded: boolean }) {
+	if (!hasChildren) return <span className="w-3.5 shrink-0" />;
+	if (isExpanded) return <ChevronDown className="text-muted-foreground h-3.5 w-3.5 shrink-0" />;
+	return <ChevronRight className="text-muted-foreground h-3.5 w-3.5 shrink-0" />;
+}
+
+function TreeRowIcon({
+	isSkillMd,
+	isFile,
+	isFolder,
+	isExpanded,
+}: {
+	isSkillMd: boolean;
+	isFile: boolean;
+	isFolder: boolean;
+	isExpanded: boolean;
+}) {
+	if (isSkillMd) return <BookOpen className="text-muted-foreground h-4 w-4 shrink-0" />;
+	if (isFile) return <FileText className="text-muted-foreground h-4 w-4 shrink-0" />;
+	if (isFolder && isExpanded) return <FolderOpen className="text-muted-foreground h-4 w-4 shrink-0" />;
+	if (isFolder) return <Folder className="text-muted-foreground h-4 w-4 shrink-0" />;
+	return null;
+}
+
 export function ReadOnlyFileTree({
 	skillName,
 	files,
@@ -597,7 +544,7 @@ export function ReadOnlyFileTree({
 							data-selected={isSelected || undefined}
 							className={cn(
 								"group flex h-7 min-w-0 items-center gap-1.5 rounded-sm px-1.5 text-sm transition-colors",
-								(hasChildren || isDownloadable) && "cursor-pointer hover:bg-muted/50",
+								(hasChildren || isDownloadable) && "cursor-pointer hover:bg-muted",
 								isSelected && "bg-primary/10 text-primary hover:bg-primary/10",
 							)}
 							onClick={handleClick}
@@ -611,36 +558,15 @@ export function ReadOnlyFileTree({
 							tabIndex={hasChildren || isDownloadable ? 0 : undefined}
 							aria-label={isFolder ? `${isExpanded ? "Collapse" : "Expand"} ${item.name}` : item.name}
 						>
-							{hasChildren ? (
-								isExpanded ? (
-									<ChevronDown className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
-								) : (
-									<ChevronRight className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
-								)
-							) : (
-								<span className="w-3.5 shrink-0" />
-							)}
-
-							{isDownloadable ? (
-								isSkillMd ? (
-									<BookOpen className="text-muted-foreground h-4 w-4 shrink-0" />
-								) : (
-									<FileText className="text-muted-foreground h-4 w-4 shrink-0" />
-								)
-							) : isFolder ? (
-								isExpanded ? (
-									<FolderOpen className="text-muted-foreground h-4 w-4 shrink-0" />
-								) : (
-									<Folder className="text-muted-foreground h-4 w-4 shrink-0" />
-								)
-							) : null}
+							<TreeRowChevron hasChildren={hasChildren} isExpanded={isExpanded} />
+							<TreeRowIcon isSkillMd={isSkillMd} isFile={isFile} isFolder={isFolder} isExpanded={isExpanded} />
 
 							<span className={cn("min-w-0 flex-1 truncate font-mono text-xs", isFolder && "font-medium")} title={item.name}>
 								{item.name}
 							</span>
 
 							{isFolder && !isExpanded && item.childCount != null && item.childCount > 0 && (
-								<span className="text-muted-foreground text-[10px]">
+								<span className="text-muted-foreground text-xs">
 									{item.childCount} item{item.childCount !== 1 ? "s" : ""}
 								</span>
 							)}
@@ -649,21 +575,14 @@ export function ReadOnlyFileTree({
 							{isDownloadable && (
 								<div
 									className={cn(
-										"shrink-0 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
-										isSelected && "opacity-100",
+										"sticky right-1 z-10 ml-auto shrink-0 rounded-sm bg-muted px-0.5 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
 									)}
 									onClick={(e) => e.stopPropagation()}
 									onKeyDown={(e) => e.stopPropagation()}
 								>
 									<DropdownMenu>
 										<DropdownMenuTrigger asChild>
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-6 w-6"
-												data-testid="skill-file-row-actions"
-												aria-label={`Actions for ${item.name}`}
-											>
+											<Button variant="ghost" size="icon" className="h-6 w-6" aria-label={`Actions for ${item.name}`}>
 												<MoreHorizontal className="h-3.5 w-3.5" />
 											</Button>
 										</DropdownMenuTrigger>
@@ -678,16 +597,14 @@ export function ReadOnlyFileTree({
 							)}
 
 							{item.type === "root" && (
-								<div className="ml-auto" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
+								<div
+									className="sticky right-1 z-10 ml-auto rounded-sm px-0.5"
+									onClick={(e) => e.stopPropagation()}
+									onKeyDown={(e) => e.stopPropagation()}
+								>
 									<DropdownMenu>
 										<DropdownMenuTrigger asChild>
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-6 w-6"
-												data-testid="skill-files-tree-actions"
-												aria-label="File actions"
-											>
+											<Button variant="ghost" size="icon" className="h-6 w-6" aria-label="File actions">
 												<MoreHorizontal className="h-3.5 w-3.5" />
 											</Button>
 										</DropdownMenuTrigger>
@@ -729,6 +646,7 @@ export function SkillReadOnlyContent({
 	extraFrontmatter,
 	metadata,
 	composedSkillMd,
+	className,
 }: {
 	skillName: string;
 	skillMdBody: string;
@@ -736,27 +654,75 @@ export function SkillReadOnlyContent({
 	extraFrontmatter: Record<string, unknown> | null;
 	metadata: Record<string, unknown> | null;
 	composedSkillMd: string;
+	className?: string;
 }) {
+	const METADATA_KEY = "__metadata__";
+	const FRONTMATTER_KEY = "__extra_frontmatter__";
+
 	// Default selection is the SKILL.md body, preserving the prior default view.
 	const [selected, setSelected] = useState<string>(SKILLMD_KEY);
-	const selectedFile = selected === SKILLMD_KEY ? null : (files.find((f) => f.path === selected) ?? null);
+	const selectedFile =
+		selected === SKILLMD_KEY || selected === METADATA_KEY || selected === FRONTMATTER_KEY
+			? null
+			: (files.find((f) => f.path === selected) ?? null);
+
+	const hasMetadata = metadata && Object.keys(metadata).length > 0;
+	const hasFrontmatter = extraFrontmatter && Object.keys(extraFrontmatter).length > 0;
 
 	return (
-		<div className="flex h-full min-h-0 w-full gap-3">
-			{/* Left: collapsible files sidebar */}
-			<SkillFilesSidebar
-				skillName={skillName}
-				files={files}
-				composedSkillMd={composedSkillMd}
-				selectedPath={selected}
-				onSelectPath={setSelected}
-			/>
+		<div className={cn("flex min-h-0 w-full gap-3", className)}>
+			<div className="flex w-72 shrink-0 flex-col gap-2">
+				{/* Metadata & Frontmatter buttons */}
+				{(hasMetadata || hasFrontmatter) && (
+					<div className="flex gap-1.5">
+						{hasMetadata && (
+							<button
+								type="button"
+								data-testid="skill-readonly-metadata-pane-btn"
+								onClick={() => setSelected(METADATA_KEY)}
+								className={cn(
+									"flex-1 rounded-md border px-3 py-2 text-left text-xs font-medium transition-colors",
+									selected === METADATA_KEY ? "border-primary/20 bg-primary/10 text-primary hover:bg-primary/10" : "bg-card hover:bg-muted",
+								)}
+							>
+								Metadata
+							</button>
+						)}
+						{hasFrontmatter && (
+							<button
+								type="button"
+								data-testid="skill-readonly-frontmatter-pane-btn"
+								onClick={() => setSelected(FRONTMATTER_KEY)}
+								className={cn(
+									"flex-1 rounded-md border px-3 py-2 text-left text-xs font-medium transition-colors",
+									selected === FRONTMATTER_KEY
+										? "border-primary/20 bg-primary/10 text-primary hover:bg-primary/10"
+										: "bg-card hover:bg-muted",
+								)}
+							>
+								Extra Frontmatter
+							</button>
+						)}
+					</div>
+				)}
+
+				{/* Files sidebar */}
+				<SkillFilesSidebar
+					skillName={skillName}
+					files={files}
+					composedSkillMd={composedSkillMd}
+					selectedPath={selected === METADATA_KEY || selected === FRONTMATTER_KEY ? undefined : selected}
+					onSelectPath={setSelected}
+				/>
+			</div>
 
-			{/* Right: skill content — frontmatter/metadata, then the selected file or SKILL.md body */}
-			<div className="flex min-h-0 min-w-0 flex-1 flex-col gap-6 pr-1 pb-1">
-				{extraFrontmatter && <ReadOnlyYamlBlock title="Extra Frontmatter" value={extraFrontmatter} />}
-				{metadata && <ReadOnlyMetadataTable value={metadata} />}
-				{selectedFile ? (
+			{/* Right: content pane */}
+			<div className="flex grow flex-col overflow-auto">
+				{selected === METADATA_KEY && metadata ? (
+					<ReadOnlyMetadataTable value={metadata} />
+				) : selected === FRONTMATTER_KEY && extraFrontmatter ? (
+					<ReadOnlyYamlBlock title="Extra Frontmatter" value={extraFrontmatter} />
+				) : selectedFile ? (
 					<FilePreviewPane file={selectedFile} skillName={skillName} mode="view" />
 				) : (
 					<ReadOnlySkillBody body={skillMdBody} />
@@ -781,16 +747,12 @@ function SkillFilesSidebar({
 	selectedPath?: string;
 	onSelectPath?: (path: string) => void;
 }) {
-	const [collapsed, setCollapsed] = useState(false);
-
-	// Load persisted collapsed state on mount
-	useEffect(() => {
-		if (typeof window === "undefined") return;
-		const stored = window.localStorage.getItem(FILES_COLLAPSE_STORAGE_KEY);
-		if (stored === "true") setCollapsed(true);
-	}, []);
+	const [collapsed, setCollapsed] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return window.localStorage.getItem(FILES_COLLAPSE_STORAGE_KEY) === "true";
+	});
 
-	const toggleCollapsed = useCallback(() => {
+	const toggleCollapsed = () => {
 		setCollapsed((prev) => {
 			const next = !prev;
 			if (typeof window !== "undefined") {
@@ -798,7 +760,7 @@ function SkillFilesSidebar({
 			}
 			return next;
 		});
-	}, []);
+	};
 
 	// Collapsed: thin rail with a vertical "Files" label — the whole rail expands on click
 	if (collapsed) {
diff --git a/ui/app/workspace/skills-repo/components/skillCreatorView.tsx b/ui/app/workspace/skills-repo/components/skillCreatorView.tsx
index 145f8f273e..757d54d277 100644
--- a/ui/app/workspace/skills-repo/components/skillCreatorView.tsx
+++ b/ui/app/workspace/skills-repo/components/skillCreatorView.tsx
@@ -31,7 +31,7 @@ export function SkillCreateView({ onCreated, onBack }: { onCreated: (id: string)
 
 	if (!hasCreateAccess) {
 		return (
-			<div className="flex h-[calc(100vh_-_50px)] items-center justify-center">
+			<div className="flex h-full items-center justify-center">
 				<p className="text-muted-foreground">You do not have permission to create skills.</p>
 			</div>
 		);
diff --git a/ui/app/workspace/skills-repo/components/skillDetailsView.tsx b/ui/app/workspace/skills-repo/components/skillDetailsView.tsx
index a57c727a75..8aa899d711 100644
--- a/ui/app/workspace/skills-repo/components/skillDetailsView.tsx
+++ b/ui/app/workspace/skills-repo/components/skillDetailsView.tsx
@@ -20,7 +20,7 @@ import { validateVersionBump } from "@/lib/validators/skills";
 import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
 import { ArrowLeft, Download, MoreHorizontal, Plus, Loader2, Trash2 } from "lucide-react";
 import { getApiBaseUrl } from "@/lib/utils/port";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { type SkillFormState, composeFrontmatter, useSkillForm } from "./helpers";
 import { SkillHeader } from "./shared";
@@ -57,9 +57,10 @@ export function SkillDetailView({
 
 	const highestVersion = skill?.highest_version || skill?.latest_version || "0.0.0";
 
-	const getSkillFormState = useMemo(() => {
+	/** Build a SkillFormState from the current skill data. Returns null if skill isn't loaded yet. */
+	function buildFormState(): SkillFormState | null {
 		if (!skill) return null;
-		const state: SkillFormState = {
+		return {
 			name: skill.name,
 			description: skill.description,
 			license: skill.license || "",
@@ -84,14 +85,24 @@ export function SkillDetailView({
 					}))
 				: [],
 		};
-		return state;
-	}, [highestVersion, skill]);
+	}
+
+	// Tracks the skill we last seeded the form from, so switching to a different
+	// skill still resets even while another skill was being edited.
+	const lastResetSkillIdRef = useRef<string | null>(null);
 
-	// Populate form when skill loads
+	// Populate form when skill data loads or changes. Skip resets during an
+	// active edit of the same skill so a background refetch can't wipe unsaved
+	// changes.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(() => {
-		if (getSkillFormState) form.reset(getSkillFormState);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [getSkillFormState]);
+		const state = buildFormState();
+		const isNewSkill = lastResetSkillIdRef.current !== skillId;
+		if (state && (!isEditing || isNewSkill)) {
+			form.reset(state);
+			lastResetSkillIdRef.current = skillId;
+		}
+	}, [skill, highestVersion, isEditing, skillId]);
 
 	const handleSave = async (serve: boolean) => {
 		if (!form.runValidation()) return;
@@ -129,7 +140,8 @@ export function SkillDetailView({
 	};
 
 	const handleCancelEdit = () => {
-		if (getSkillFormState) form.reset(getSkillFormState);
+		const state = buildFormState();
+		if (state) form.reset(state);
 		setIsEditing(false);
 	};
 
@@ -139,7 +151,7 @@ export function SkillDetailView({
 
 	if (!skill) {
 		return (
-			<div className="flex min-h-0 w-full flex-1 flex-col items-center justify-center p-4">
+			<div className="flex w-full flex-1 flex-col items-center justify-center p-4">
 				<p className="text-muted-foreground text-sm">Skill not found</p>
 				<Button variant="outline" size="sm" className="mt-3" onClick={onBack}>
 					<ArrowLeft className="h-3.5 w-3.5" />
@@ -150,8 +162,7 @@ export function SkillDetailView({
 	}
 
 	return (
-		<div className="relative flex w-full flex-1 flex-col">
-			{/* Content */}
+		<div className="relative flex w-full min-h-0 flex-1 flex-col">
 			{isEditing ? (
 				<SkillEditView
 					form={form}
@@ -252,7 +263,7 @@ export function SkillDetailView({
 						}
 					/>
 
-					<div className="mt-3 min-h-0 flex-1 overflow-hidden">
+					<div className="mt-3 min-h-0 flex-1 flex flex-col">
 						<SkillFormFields skill={skill} />
 					</div>
 				</>
diff --git a/ui/app/workspace/skills-repo/components/skillListView.tsx b/ui/app/workspace/skills-repo/components/skillListView.tsx
index 34fdf3893d..72c710999f 100644
--- a/ui/app/workspace/skills-repo/components/skillListView.tsx
+++ b/ui/app/workspace/skills-repo/components/skillListView.tsx
@@ -65,7 +65,6 @@ import {
   FileText,
   MoreHorizontal,
   Package,
-  Pencil,
   Plus,
   Search,
   Trash2,
@@ -139,7 +138,7 @@ function MarketplacePopover() {
             >
               <div className="min-w-0 flex-1">
                 <p className="text-xs font-medium">{item.label}</p>
-                <p className="text-[11px] font-mono text-muted-foreground truncate mt-0.5">
+                <p className="text-xs font-mono text-muted-foreground truncate mt-0.5">
                   {item.command}
                 </p>
               </div>
@@ -175,11 +174,9 @@ function SortableHeader({
   onToggle: (column: SortColumn) => void;
 }) {
   const isActive = sortBy === column;
-  const Icon = isActive
-    ? order === "desc"
-      ? ArrowDown
-      : ArrowUp
-    : ArrowUpDown;
+  let Icon = ArrowUpDown;
+  if (isActive && order === "desc") Icon = ArrowDown;
+  else if (isActive) Icon = ArrowUp;
   return (
     <Button
       variant="ghost"
@@ -271,19 +268,6 @@ function SkillActionsMenu({
             )}
             {isDownloading ? "Downloading..." : "Download ZIP"}
           </DropdownMenuItem>
-          <DropdownMenuItem
-            className="cursor-pointer"
-            data-testid={`skill-edit-btn-${skill.name}`}
-            disabled={!hasEditAccess}
-            onSelect={(e) => {
-              e.preventDefault();
-              onEdit(skill.id);
-              setIsOpen(false);
-            }}
-          >
-            <Pencil className="h-4 w-4" />
-            Edit
-          </DropdownMenuItem>
           <DropdownMenuItem
             variant="destructive"
             className="cursor-pointer"
@@ -436,17 +420,17 @@ export function SkillsListView({
   if (total === 0 && !search && !isFetching) {
     return (
       <div
-        className="flex min-h-[80vh] w-full flex-col items-center justify-center gap-4 py-16 text-center"
+        className="flex h-full w-full flex-col items-center justify-center gap-4 py-16 text-center"
         data-testid="skills-repo-empty-state"
       >
         <div className="text-muted-foreground">
-          <BookOpenText className="h-[5.5rem] w-[5.5rem]" strokeWidth={1} />
+          <BookOpenText className="h-24 w-24" strokeWidth={1} />
         </div>
         <div className="flex flex-col gap-1">
           <h1 className="text-muted-foreground text-xl font-medium">
             Create, version, and share Agent Skills from Bifrost
           </h1>
-          <div className="text-muted-foreground mx-auto mt-2 max-w-[600px] text-sm font-normal">
+          <div className="text-muted-foreground mx-auto mt-2 max-w-xl text-sm font-normal">
             Manage SKILL.md instructions and supporting files in one place,
             publish immutable versions, and expose them as installable plugins
             for Claude Code, Codex, and other skill-aware clients.
@@ -483,7 +467,7 @@ export function SkillsListView({
   }
 
   return (
-    <div className="w-full min-h-0 flex-1 flex flex-col overflow-hidden">
+    <div className="w-full flex-1 flex flex-col">
       {/* Header */}
       <div className="flex shrink-0 items-center justify-between mb-4">
         <div>
@@ -643,14 +627,14 @@ export function SkillsListView({
       </div>
 
       {/* Table */}
-      <div className="min-h-0 grow overflow-hidden rounded-sm border">
+      <div className="grow overflow-hidden rounded-sm border">
         <Table
           containerClassName="h-full overflow-auto"
           className="w-full table-fixed"
         >
           <TableHeader className="bg-muted sticky top-0 z-20">
             <TableRow className="hover:bg-transparent">
-              <TableHead className="w-[240px]">
+              <TableHead className="w-60">
                 <SortableHeader
                   column="name"
                   label="Name"
@@ -660,9 +644,9 @@ export function SkillsListView({
                 />
               </TableHead>
               <TableHead>Description</TableHead>
-              <TableHead className="w-[140px]">Version</TableHead>
-              <TableHead className="w-[140px]">Files</TableHead>
-              <TableHead className="w-[170px]">
+              <TableHead className="w-36">Version</TableHead>
+              <TableHead className="w-36">Files</TableHead>
+              <TableHead className="w-44">
                 <SortableHeader
                   column="updated_at"
                   label="Updated"
@@ -672,7 +656,7 @@ export function SkillsListView({
                 />
               </TableHead>
               <TableHead
-                className={`bg-muted sticky right-0 z-30 w-[56px] text-right ${PIN_SHADOW_RIGHT}`}
+                className={`bg-muted sticky right-0 z-30 w-14 text-right ${PIN_SHADOW_RIGHT}`}
               >
                 <span className="sr-only">Actions</span>
               </TableHead>
@@ -721,7 +705,7 @@ export function SkillsListView({
                       }
                     }}
                   >
-                    <TableCell className="w-[240px] max-w-[240px] overflow-hidden font-medium font-mono text-sm">
+                    <TableCell className="w-60 max-w-60 overflow-hidden font-medium font-mono text-sm">
                       <div className="max-w-full truncate" title={skill.name}>
                         {skill.name}
                       </div>
diff --git a/ui/app/workspace/skills-repo/dialogs/skillVersionDialog.tsx b/ui/app/workspace/skills-repo/dialogs/skillVersionDialog.tsx
index d39dc383d9..b0b4253b60 100644
--- a/ui/app/workspace/skills-repo/dialogs/skillVersionDialog.tsx
+++ b/ui/app/workspace/skills-repo/dialogs/skillVersionDialog.tsx
@@ -118,7 +118,7 @@ useEffect(() => {
 										{isServing && (
 											<Badge
 												variant="secondary"
-												className="bg-emerald-100 text-[10px] text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
+												className="bg-emerald-100 text-xs text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
 											>
 												Serving
 											</Badge>
diff --git a/ui/app/workspace/skills-repo/dialogs/versionDetailsDialog.tsx b/ui/app/workspace/skills-repo/dialogs/versionDetailsDialog.tsx
index 847d88665d..75df922e61 100644
--- a/ui/app/workspace/skills-repo/dialogs/versionDetailsDialog.tsx
+++ b/ui/app/workspace/skills-repo/dialogs/versionDetailsDialog.tsx
@@ -6,9 +6,8 @@ import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle } from "@
 import { useGetSkillQuery, useShiftSkillVersionMutation } from "@/lib/store/apis/skillsApi";
 import { getErrorMessage } from "@/lib/store/apis/baseApi";
 import { getApiBaseUrl } from "@/lib/utils/port";
-import { SkillFile, SkillFileEntry } from "@/lib/types/skills";
+import type { SkillFile, SkillFileEntry } from "@/lib/types/skills";
 import { Loader2, RefreshCw, Download, X } from "lucide-react";
-import { useMemo } from "react";
 import { toast } from "sonner";
 import { composeFrontmatter } from "../components/helpers";
 import { SkillHeader, SkillReadOnlyContent } from "../components/shared";
@@ -33,20 +32,12 @@ export function VersionDetailDialog({
 
 	const skill = versionData?.skill;
 
-	const extraFrontmatter = useMemo(() => {
-		if (!skill?.extra_frontmatter || Object.keys(skill.extra_frontmatter).length === 0) return null;
-		return skill.extra_frontmatter;
-	}, [skill]);
+	const extraFrontmatter = skill?.extra_frontmatter && Object.keys(skill.extra_frontmatter).length > 0 ? skill.extra_frontmatter : null;
 
-	const metadata = useMemo(() => {
-		if (!skill?.metadata || Object.keys(skill.metadata).length === 0) return null;
-		return skill.metadata as Record<string, unknown>;
-	}, [skill]);
+	const metadata = skill?.metadata && Object.keys(skill.metadata).length > 0 ? (skill.metadata as Record<string, unknown>) : null;
 
-	const composedSkillMd = useMemo(() => {
-		if (!skill) return "";
-		return (
-			composeFrontmatter({
+	const composedSkillMd = skill
+		? composeFrontmatter({
 				name: skill.name,
 				description: skill.description,
 				license: skill.license || "",
@@ -57,23 +48,21 @@ export function VersionDetailDialog({
 			}) +
 			"\n\n" +
 			skill.skill_md_body
-		);
-	}, [skill]);
+		: "";
 
-	const fileEntries: SkillFileEntry[] = useMemo(() => {
-		if (!skill?.files) return [];
-		return skill.files.map((f: SkillFile) => ({
-			path: f.path,
-			source_type: f.source_type,
-			content: f.content,
-			source_url: f.source_url,
-			dataurl: f.dataurl,
-			storage_key: f.storage_key,
-			blob_id: f.blob_id,
-			mime_type: f.mime_type,
-			file_size_bytes: f.file_size_bytes,
-		}));
-	}, [skill]);
+	const fileEntries: SkillFileEntry[] = skill?.files
+		? skill.files.map((f: SkillFile) => ({
+				path: f.path,
+				source_type: f.source_type,
+				content: f.content,
+				source_url: f.source_url,
+				dataurl: f.dataurl,
+				storage_key: f.storage_key,
+				blob_id: f.blob_id,
+				mime_type: f.mime_type,
+				file_size_bytes: f.file_size_bytes,
+			}))
+		: [];
 
 	const downloadUrl = skill
 		? `${getApiBaseUrl()}/skills/serve/${encodeURIComponent(skill.name)}/download.zip?version=${encodeURIComponent(version)}`
@@ -103,7 +92,14 @@ export function VersionDetailDialog({
 					</DialogHeader>
 					<div className="flex items-center gap-1.5">
 						{downloadUrl && (
-							<Button variant="ghost" size="icon" className="h-8 w-8" asChild data-testid="skill-version-download-zip" aria-label="Download ZIP">
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-8 w-8"
+								asChild
+								data-testid="skill-version-download-zip"
+								aria-label="Download ZIP"
+							>
 								<a href={downloadUrl} download>
 									<Download className="h-4 w-4" />
 									<span className="sr-only">Download ZIP</span>
diff --git a/ui/app/workspace/skills-repo/forms/skillEditForm.tsx b/ui/app/workspace/skills-repo/forms/skillEditForm.tsx
index de72d29bbb..54e297a437 100644
--- a/ui/app/workspace/skills-repo/forms/skillEditForm.tsx
+++ b/ui/app/workspace/skills-repo/forms/skillEditForm.tsx
@@ -1,605 +1,855 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scrollArea";
+import { ScrollArea, ScrollBar } from "@/components/ui/scrollArea";
 import { Textarea } from "@/components/ui/textarea";
 import { Markdown } from "@/components/ui/markdown";
 import { CodeEditor, type CompletionItem } from "@/components/ui/codeEditor";
 import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
 import { validateVersionBump } from "@/lib/validators/skills";
 import { cn } from "@/lib/utils";
-import { AlertTriangle, ArrowLeft, Check, ChevronDown, Copy, Eye, Loader2, Plus, Save, X } from "lucide-react";
-import { useMemo, useRef, useState } from "react";
-import { type SkillFormReturn, composeFrontmatter } from "../components/helpers";
+import type { SkillFileEntry } from "@/lib/types/skills";
+import {
+  AlertTriangle,
+  ArrowLeft,
+  Check,
+  Copy,
+  Eye,
+  Loader2,
+  Plus,
+  Save,
+  X,
+} from "lucide-react";
+import { useRef, useState } from "react";
+import {
+  type SkillFormReturn,
+  composeFrontmatter,
+} from "../components/helpers";
 import { FormSection } from "../components/shared";
 import { FilePreviewPane } from "../components/filePreview";
 import { FileManagerSection } from "../components/fileManagerView";
 import { MetadataTableEditor } from "../components/metadataEditorTableView";
 
 export function SkillEditView({
-	form,
-	skillName,
-	previousVersion,
-	onSave,
-	onCancel,
-	onBack,
-	isSaving,
-	mode = "edit",
+  form,
+  skillName,
+  previousVersion,
+  onSave,
+  onCancel,
+  onBack,
+  isSaving,
+  mode = "edit",
 }: {
-	form: SkillFormReturn;
-	skillName?: string;
-	previousVersion?: string;
-	onSave: (serve: boolean) => void;
-	onCancel: () => void;
-	onBack: () => void;
-	isSaving: boolean;
-	mode?: "edit" | "create";
+  form: SkillFormReturn;
+  skillName?: string;
+  previousVersion?: string;
+  onSave: (serve: boolean) => void;
+  onCancel: () => void;
+  onBack: () => void;
+  isSaving: boolean;
+  mode?: "edit" | "create";
 }) {
-	const isCreate = mode === "create";
-	const [bodyTab, setBodyTab] = useState<"edit" | "preview">("edit");
-	const [showPreviewDialog, setShowPreviewDialog] = useState(false);
-	// The description/spec/frontmatter/metadata block collapses as a unit (collapsed by default).
-	const [detailsOpen, setDetailsOpen] = useState(false);
-	// Metadata starts expanded only when the skill already has metadata.
-	const [metadataOpen, setMetadataOpen] = useState(() => {
-		const json = form.metadataJson?.trim();
-		return !!json && json !== "{}";
-	});
-	// Two-pane workspace selection: null = SKILL.md body, otherwise a file index.
-	const [selectedFileIndex, setSelectedFileIndex] = useState<number | null>(null);
-	const selectedFile = selectedFileIndex != null ? (form.files[selectedFileIndex] ?? null) : null;
+  const isCreate = mode === "create";
+  const [bodyTab, setBodyTab] = useState<"edit" | "preview">("edit");
+  const [showPreviewDialog, setShowPreviewDialog] = useState(false);
+  // Two-pane workspace selection: null = SKILL.md body, otherwise a file index.
+  const [selectedFileIndex, setSelectedFileIndex] = useState<number | null>(
+    null,
+  );
+  const [selectedDetailsPane, setSelectedDetailsPane] = useState<
+    "details" | "metadata" | "frontmatter" | null
+  >("details");
+  const selectedFile =
+    selectedFileIndex != null ? (form.files[selectedFileIndex] ?? null) : null;
 
-	// The version is asked for in a dialog at save time (not in the form).
-	const [versionDialog, setVersionDialog] = useState<{ serve: boolean } | null>(null);
+  // The version is asked for in a dialog at save time (not in the form).
+  const [versionDialog, setVersionDialog] = useState<{ serve: boolean } | null>(
+    null,
+  );
 
-	// Lets the file editor commit any buffered ("Save file") content before a version save.
-	const flushFileEditRef = useRef<(() => void) | null>(null);
+  // Lets the file editor commit any buffered ("Save file") content before a version save.
+  const flushFileEditRef = useRef<(() => void) | null>(null);
 
-	const openVersionDialog = (serve: boolean) => {
-		flushFileEditRef.current?.();
-		// Suggest a patch bump for edits when the version still equals the previous one.
-		if (!isCreate && previousVersion) {
-			const match = previousVersion.match(/^(\d+)\.(\d+)\.(\d+)$/);
-			if (match && (form.version === previousVersion || !form.version.trim())) {
-				const suggested = `${match[1]}.${match[2]}.${Number(match[3]) + 1}`;
-				form.setVersion(suggested);
-				form.validateField("version", suggested);
-			}
-		}
-		setVersionDialog({ serve });
-	};
+  const openVersionDialog = (serve: boolean) => {
+    flushFileEditRef.current?.();
+    // Suggest a patch bump for edits when the version still equals the previous one.
+    if (!isCreate && previousVersion) {
+      const match = previousVersion.match(/^(\d+)\.(\d+)\.(\d+)$/);
+      if (match && (form.version === previousVersion || !form.version.trim())) {
+        const suggested = `${match[1]}.${match[2]}.${Number(match[3]) + 1}`;
+        form.setVersion(suggested);
+        form.validateField("version", suggested);
+      }
+    }
+    setVersionDialog({ serve });
+  };
 
-	// Closing the dialog restores a valid version so a half-typed value can't
-	// leave the footer Save buttons stuck disabled via form.hasErrors.
-	const closeVersionDialog = () => {
-		if (form.errors.version) {
-			const restore = !isCreate && previousVersion ? previousVersion : "1.0.0";
-			form.setVersion(restore);
-			form.validateField("version", restore);
-		}
-		setVersionDialog(null);
-	};
-	const { copy: copyPreviewContent, copied: copiedPreviewContent } = useCopyToClipboard({
-		successMessage: "Copied raw SKILL.md",
-		errorMessage: "Failed to copy raw SKILL.md",
-	});
+  // Closing the dialog restores a valid version so a half-typed value can't
+  // leave the footer Save buttons stuck disabled via form.hasErrors.
+  const closeVersionDialog = () => {
+    if (form.errors.version) {
+      const restore = !isCreate && previousVersion ? previousVersion : "1.0.0";
+      form.setVersion(restore);
+      form.validateField("version", restore);
+    }
+    setVersionDialog(null);
+  };
+  const { copy: copyPreviewContent, copied: copiedPreviewContent } =
+    useCopyToClipboard({
+      successMessage: "Copied raw SKILL.md",
+      errorMessage: "Failed to copy raw SKILL.md",
+    });
 
-	const previewContent = useMemo(() => {
-		return (
-			composeFrontmatter({
-				name: form.name,
-				description: form.description,
-				license: form.license,
-				compatibility: form.compatibility,
-				allowed_tools: form.allowedTools,
-				extra_frontmatter_json: form.extraFrontmatterJson,
-				metadata_json: form.metadataJson,
-			}) +
-			"\n\n" +
-			form.skillMdBody
-		);
-	}, [
-		form.name,
-		form.description,
-		form.license,
-		form.compatibility,
-		form.allowedTools,
-		form.extraFrontmatterJson,
-		form.metadataJson,
-		form.skillMdBody,
-	]);
+  const previewContent =
+    composeFrontmatter({
+      name: form.name,
+      description: form.description,
+      license: form.license,
+      compatibility: form.compatibility,
+      allowed_tools: form.allowedTools,
+      extra_frontmatter_json: form.extraFrontmatterJson,
+      metadata_json: form.metadataJson,
+    }) +
+    "\n\n" +
+    form.skillMdBody;
 
-	const filePathCompletions = useMemo<CompletionItem[]>(() => {
-		const completions: CompletionItem[] = [];
-		const folderPaths = new Set<string>();
+  const filePathCompletions = buildFilePathCompletions(form.files);
 
-		form.files
-			.filter((file) => file.path)
-			.forEach((file) => {
-				const pathParts = file.path.split("/").filter(Boolean);
-				const fileName = pathParts.at(-1) ?? file.path;
-				const rootRelativePath = `./${file.path}`;
+  const descriptionLength = form.description.length;
+  let descriptionLimitColor = "text-muted-foreground";
+  if (descriptionLength > 1024) {
+    descriptionLimitColor = "text-destructive";
+  } else if (descriptionLength > 900) {
+    descriptionLimitColor = "text-yellow-600 dark:text-yellow-500";
+  }
 
-				pathParts.slice(0, -1).forEach((_, index) => {
-					folderPaths.add(pathParts.slice(0, index + 1).join("/"));
-				});
+  return (
+    <div className="animate-in fade-in flex h-full min-h-0 flex-col duration-200 overflow-hidden">
+      <div className="shrink-0 overflow-y-auto px-4">
+        {/* Top bar with back button integrated */}
+        <div className="dark:bg-card flex items-center gap-3 bg-white py-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            data-testid="skill-back-btn"
+            onClick={onBack}
+            aria-label="Go back"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div className="text-muted-foreground flex min-w-0 items-center gap-2 text-sm">
+            <span>{isCreate ? "Creating" : "Editing"}</span>
+            <span className="text-foreground truncate font-mono">
+              {isCreate ? form.name || "<new-skill>" : skillName}
+            </span>
+          </div>
+        </div>
 
-				completions.push({
-					label: fileName,
-					insertText: `@[${fileName}](${rootRelativePath})`,
-					type: "object" as const,
-					description: rootRelativePath,
-					documentation: `Full path: ${rootRelativePath}`,
-				});
-			});
+        <div className="mb-6 flex gap-3 rounded-sm border border-amber-500/40 bg-amber-50/80 p-3 text-sm text-amber-900 dark:border-amber-400/30 dark:bg-amber-950/40 dark:text-amber-200">
+          <AlertTriangle
+            className="mt-0.5 h-4 w-4 shrink-0"
+            aria-hidden="true"
+          />
+          <p>
+            Files added to a skill can be downloaded from marketplace URLs
+            without logging in. Anyone who can reach this Bifrost server can
+            request them directly, so do not upload secrets, credentials,
+            private code, or other sensitive files.
+          </p>
+        </div>
 
-		folderPaths.forEach((folderPath) => {
-			const folderName = folderPath.split("/").filter(Boolean).pop() ?? folderPath;
-			const rootRelativePath = `./${folderPath}/`;
-			completions.push({
-				label: folderName,
-				insertText: `@[${folderName}](${rootRelativePath})`,
-				type: "folder" as const,
-				description: rootRelativePath,
-				documentation: `Full path: ${rootRelativePath}`,
-			});
-		});
+        {/* Edit sections */}
+        <div className="flex flex-col gap-8">
+          {isCreate && (
+            <FormSection title="Name">
+              <Input
+                data-testid="skill-name-input"
+                value={form.name}
+                onChange={(e) => {
+                  form.setName(e.target.value);
+                  form.validateField("name", e.target.value);
+                }}
+                placeholder="my-skill-name"
+                className={cn(
+                  "font-mono",
+                  form.errors.name && "border-destructive",
+                )}
+              />
+              {form.errors.name && (
+                <p className="text-destructive text-xs" role="alert">
+                  {form.errors.name}
+                </p>
+              )}
+              <p className="text-muted-foreground text-xs">
+                Lowercase letters, numbers, and hyphens only.{" "}
+                <span className="font-bold">
+                  Cannot be changed after creation.
+                </span>
+              </p>
+            </FormSection>
+          )}
 
-		return completions.sort((a, b) => a.description?.localeCompare(b.description ?? "") ?? 0);
-	}, [form.files]);
+          {/* Details now render in the right pane, selected from above the file tree. */}
+        </div>
+      </div>
 
-	const descriptionLength = form.description.length;
-	const descriptionLimitColor =
-		descriptionLength > 1024
-			? "text-destructive"
-			: descriptionLength > 900
-				? "text-yellow-600 dark:text-yellow-500"
-				: "text-muted-foreground";
+      {/* Files + SKILL.md two-pane workspace */}
+      <div className="min-h-0 flex-1 px-4 pt-4 pb-2">
+        <div className="flex h-full min-h-0 gap-3">
+          {/* Left: files panel */}
+          <div className="bg-card flex min-h-0 w-72 shrink-0 flex-col gap-2">
+            <div className="grid gap-1.5">
+              <div className="grid grid-cols-2 gap-1.5">
+                {[
+                  ["details", "Details"],
+                  ["metadata", "Metadata"],
+                ].map(([pane, label]) => (
+                  <button
+                    key={pane}
+                    type="button"
+                    data-testid={`skill-${pane}-pane-btn`}
+                    onClick={() => {
+                      setSelectedDetailsPane(pane as "details" | "metadata");
+                      setSelectedFileIndex(null);
+                    }}
+                    className={cn(
+                      "rounded-md border px-3 py-2 text-left text-xs font-medium transition-colors",
+                      selectedDetailsPane === pane
+                        ? "border-primary/20 bg-primary/10 text-primary hover:bg-primary/10"
+                        : "bg-card hover:bg-muted",
+                    )}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+              <button
+                type="button"
+                data-testid="skill-frontmatter-pane-btn"
+                onClick={() => {
+                  setSelectedDetailsPane("frontmatter");
+                  setSelectedFileIndex(null);
+                }}
+                className={cn(
+                  "rounded-md border px-3 py-2 text-left text-xs font-medium transition-colors",
+                  selectedDetailsPane === "frontmatter"
+                    ? "border-primary/20 bg-primary/10 text-primary hover:bg-primary/10"
+                    : "bg-card hover:bg-muted",
+                )}
+              >
+                Extra Frontmatter
+              </button>
+            </div>
+            <div className="bg-card flex min-h-0 flex-1 flex-col rounded-md border">
+              <div className="flex py-2 items-center border-b px-3">
+                <span className="text-sm font-semibold">Files</span>
+              </div>
+              <ScrollArea
+                className="min-h-0 flex-1 p-1"
+                viewportClassName="overflow-x-auto"
+              >
+                <FileManagerSection
+                  files={form.files}
+                  onAddFile={form.addFile}
+                  onRemoveFile={form.removeFile}
+                  onUpdateFile={form.updateFile}
+                  readOnly={false}
+                  selectedIndex={
+                    selectedDetailsPane == null ? selectedFileIndex : null
+                  }
+                  onSelectFile={(index) => {
+                    setSelectedDetailsPane(null);
+                    setSelectedFileIndex(index);
+                  }}
+                  bodySelected={
+                    selectedFile == null && selectedDetailsPane == null
+                  }
+                  hasBodyError={!form.skillMdBody.trim()}
+                  onSelectBody={() => {
+                    setSelectedDetailsPane(null);
+                    setSelectedFileIndex(null);
+                  }}
+                />
+                <ScrollBar orientation="horizontal" />
+              </ScrollArea>
+            </div>
+          </div>
 
-	return (
-		<div className="animate-in fade-in flex min-h-0 flex-1 flex-col duration-200">
-			<div className="shrink-0 px-4">
-				{/* Top bar with back button integrated */}
-				<div className="dark:bg-card flex items-center gap-3 bg-white py-4">
-					<Button variant="ghost" size="sm" data-testid="skill-back-btn" onClick={onBack} aria-label="Go back">
-						<ArrowLeft className="h-4 w-4" />
-					</Button>
-					<div className="text-muted-foreground flex min-w-0 items-center gap-2 text-sm">
-						<span>{isCreate ? "Creating" : "Editing"}</span>
-						<span className="text-foreground truncate font-mono">{isCreate ? form.name || "<new-skill>" : skillName}</span>
-					</div>
-				</div>
+          {/* Right: editor for the selected item */}
+          <div className="flex min-h-0 grow flex-col overflow-auto">
+            {selectedDetailsPane === "details" ? (
+              <DetailsEditorPane
+                form={form}
+                descriptionLength={descriptionLength}
+                descriptionLimitColor={descriptionLimitColor}
+              />
+            ) : selectedDetailsPane === "metadata" ? (
+              <MetadataEditorPane form={form} />
+            ) : selectedDetailsPane === "frontmatter" ? (
+              <ExtraFrontmatterEditorPane form={form} />
+            ) : selectedFile ? (
+              <FilePreviewPane
+                key={selectedFile.path}
+                file={selectedFile}
+                skillName={skillName ?? form.name ?? ""}
+                mode="edit"
+                registerFlush={(flush) => {
+                  flushFileEditRef.current = flush;
+                }}
+                onFileUpdate={(updates) => {
+                  if (selectedFileIndex == null) return;
+                  form.updateFile(selectedFileIndex, updates);
+                }}
+                onContentChange={(editedText) => {
+                  if (selectedFileIndex == null) return;
+                  if (selectedFile.source_type === "dataurl") {
+                    // Re-encode edited text as a data URI; drop old storage refs
+                    // so the backend creates a new blob for the new version.
+                    const dataurl = `data:${selectedFile.mime_type || "text/plain"};base64,${btoa(unescape(encodeURIComponent(editedText)))}`;
+                    form.updateFile(selectedFileIndex, {
+                      dataurl,
+                      blob_id: undefined,
+                      storage_key: undefined,
+                    });
+                  } else {
+                    // text source: submit raw content; drop old storage refs.
+                    form.updateFile(selectedFileIndex, {
+                      content: editedText,
+                      blob_id: undefined,
+                      storage_key: undefined,
+                    });
+                  }
+                }}
+              />
+            ) : (
+              <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-sm border">
+                <div
+                  className="flex h-9 shrink-0 items-center gap-1 border-b px-2"
+                  role="tablist"
+                  aria-label="Body editor tabs"
+                >
+                  <button
+                    type="button"
+                    className={cn(
+                      "px-3 py-1 text-xs rounded-sm transition-colors cursor-pointer",
+                      bodyTab === "edit"
+                        ? "bg-muted font-medium"
+                        : "text-muted-foreground hover:text-foreground",
+                    )}
+                    data-testid="skill-body-tab-edit"
+                    onClick={() => setBodyTab("edit")}
+                    role="tab"
+                    aria-selected={bodyTab === "edit"}
+                  >
+                    Edit
+                  </button>
+                  <button
+                    type="button"
+                    className={cn(
+                      "px-3 py-1 text-xs rounded-sm transition-colors cursor-pointer",
+                      bodyTab === "preview"
+                        ? "bg-muted font-medium"
+                        : "text-muted-foreground hover:text-foreground",
+                    )}
+                    data-testid="skill-body-tab-preview"
+                    onClick={() => setBodyTab("preview")}
+                    role="tab"
+                    aria-selected={bodyTab === "preview"}
+                  >
+                    Preview
+                  </button>
+                  <span className="text-muted-foreground ml-auto pr-1 text-xs">
+                    Use <code className="font-mono">@</code> to reference files
+                  </span>
+                </div>
+                <div className="min-h-0 grow overflow-y-auto">
+                  {bodyTab === "edit" ? (
+                    <CodeEditor
+                      className="z-0 w-full"
+                      code={form.skillMdBody}
+                      lang="markdown"
+                      onChange={(value: string) => form.setSkillMdBody(value)}
+                      height="100%"
+                      wrap
+                      customCompletions={filePathCompletions}
+                      options={{
+                        showVerticalScrollbar: true,
+                        scrollBeyondLastLine: false,
+                        lineNumbers: "on",
+                        alwaysConsumeMouseWheel: false,
+                        quickSuggestions: false,
+                      }}
+                    />
+                  ) : (
+                    <div className="p-4">
+                      <Markdown
+                        content={form.skillMdBody || ""}
+                        className="text-sm"
+                      />
+                    </div>
+                  )}
+                </div>
+                {(form.errors.skill_md_body || form.bodyWarning) && (
+                  <div className="shrink-0 border-t px-3 py-1.5">
+                    {form.errors.skill_md_body && (
+                      <p className="text-destructive text-xs" role="alert">
+                        {form.errors.skill_md_body}
+                      </p>
+                    )}
+                    {form.bodyWarning && (
+                      <p
+                        className="text-xs text-yellow-600 dark:text-yellow-500"
+                        role="status"
+                      >
+                        {form.bodyWarning}
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
 
-				<div className="mb-6 flex gap-3 rounded-sm border border-amber-500/40 bg-amber-50/80 p-3 text-sm text-amber-900 dark:border-amber-400/30 dark:bg-amber-950/40 dark:text-amber-200">
-					<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
-					<p>
-						Files added to a skill can be downloaded from marketplace URLs without logging in. Anyone who can reach this Bifrost server can
-						request them directly, so do not upload secrets, credentials, private code, or other sensitive files.
-					</p>
-				</div>
+      <div className="dark:bg-card/95 sticky bottom-0 z-20 mt-4 flex items-center justify-end gap-2 border-t bg-white/95 px-1 py-3 backdrop-blur">
+        <Button
+          variant="ghost"
+          size="sm"
+          data-testid="skill-cancel-btn"
+          onClick={onCancel}
+          className="text-muted-foreground hover:bg-transparent hover:text-red-600 dark:hover:text-red-400"
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          data-testid="skill-preview-btn"
+          onClick={() => setShowPreviewDialog(true)}
+        >
+          <Eye className="h-3.5 w-3.5" />
+          Preview Raw SKILL.md
+        </Button>
+        {isCreate ? (
+          <Button
+            size="sm"
+            data-testid="skill-create-save-btn"
+            onClick={() => openVersionDialog(true)}
+            disabled={isSaving || form.hasErrors}
+          >
+            {isSaving ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <Plus className="h-3.5 w-3.5" />
+            )}
+            {isSaving ? "Creating..." : "Create Skill"}
+          </Button>
+        ) : (
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              data-testid="skill-save-btn"
+              onClick={() => openVersionDialog(false)}
+              disabled={isSaving || form.hasErrors}
+            >
+              {isSaving ? (
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <Save className="h-3.5 w-3.5" />
+              )}
+              {isSaving ? "Saving..." : "Save"}
+            </Button>
+            <Button
+              size="sm"
+              data-testid="skill-save-serve-btn"
+              onClick={() => openVersionDialog(true)}
+              disabled={isSaving || form.hasErrors}
+            >
+              {isSaving ? (
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <Save className="h-3.5 w-3.5" />
+              )}
+              {isSaving ? "Saving..." : "Save & Serve"}
+            </Button>
+          </>
+        )}
+      </div>
 
-				{/* Edit sections */}
-				<div className="flex flex-col gap-8">
-					{isCreate && (
-						<FormSection title="Name">
-							<Input
-								data-testid="skill-name-input"
-								value={form.name}
-								onChange={(e) => {
-									form.setName(e.target.value);
-									form.validateField("name", e.target.value);
-								}}
-								placeholder="my-skill-name"
-								className={cn("font-mono", form.errors.name && "border-destructive")}
-							/>
-							{form.errors.name && (
-								<p className="text-destructive text-xs" role="alert">
-									{form.errors.name}
-								</p>
-							)}
-							<p className="text-muted-foreground text-xs">
-								Lowercase letters, numbers, and hyphens only. <span className="font-bold">Cannot be changed after creation.</span>
-							</p>
-						</FormSection>
-					)}
+      {/* Preview SKILL.md Dialog */}
+      <Dialog open={showPreviewDialog} onOpenChange={setShowPreviewDialog}>
+        <DialogContent
+          showCloseButton={false}
+          className="border-0 p-0 shadow-none sm:w-4/5 sm:max-w-4xl md:w-1/2 md:max-w-3xl"
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>SKILL.md Preview</DialogTitle>
+          </DialogHeader>
+          <div className="bg-muted relative overflow-hidden rounded-sm border shadow-lg">
+            <div className="absolute top-3 right-3 z-10 flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                data-testid="skill-preview-copy-btn"
+                className="bg-background/70 text-muted-foreground hover:bg-background/90 hover:text-foreground h-8 w-8 rounded-sm"
+                onClick={() => copyPreviewContent(previewContent)}
+                aria-label={
+                  copiedPreviewContent
+                    ? "Raw SKILL.md copied"
+                    : "Copy raw SKILL.md"
+                }
+              >
+                {copiedPreviewContent ? (
+                  <Check className="h-4 w-4" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+              <DialogClose className="text-muted-foreground hover:bg-background/80 hover:text-foreground cursor-pointer rounded-sm p-1.5 transition-colors">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </DialogClose>
+            </div>
+            <ScrollArea className="h-dvh" viewportClassName="bg-muted">
+              <pre className="bg-muted min-h-96 p-5 pr-24 font-mono text-xs leading-5 whitespace-pre-wrap">
+                {previewContent}
+              </pre>
+            </ScrollArea>
+          </div>
+        </DialogContent>
+      </Dialog>
 
-					{/* Details (collapsible): description, spec, frontmatter, metadata */}
-					<Collapsible open={detailsOpen} onOpenChange={setDetailsOpen} className="rounded-sm border">
-						<CollapsibleTrigger className="flex w-full items-center gap-2 px-3 py-2.5 text-left" data-testid="skill-details-toggle">
-							<ChevronDown className={cn("size-4 shrink-0 transition-transform", detailsOpen ? "rotate-0" : "-rotate-90")} />
-							<h2 className="text-foreground text-base font-semibold tracking-tight">Details</h2>
-							<span className="text-muted-foreground text-xs">description, spec, metadata</span>
-						</CollapsibleTrigger>
-						<CollapsibleContent className="flex flex-col gap-8 px-3 pb-4">
-							{/* Description */}
-							<FormSection title="Description">
-								<Textarea
-									data-testid="skill-description-input"
-									value={form.description}
-									onChange={(e) => {
-										form.setDescription(e.target.value);
-										form.validateField("description", e.target.value);
-									}}
-									placeholder="What does this skill do?"
-									rows={3}
-									className={cn(form.errors.description && "border-destructive")}
-								/>
-								<div className="flex justify-between">
-									<span className={cn("text-xs tabular-nums transition-colors", descriptionLimitColor)}>{descriptionLength}/1024</span>
-									{form.errors.description ? (
-										<p className="text-destructive text-xs" role="alert">
-											{form.errors.description}
-										</p>
-									) : (
-										<span />
-									)}
-								</div>
-							</FormSection>
+      {/* Version dialog — asked for at save time */}
+      <Dialog
+        open={versionDialog != null}
+        onOpenChange={(open) => !open && closeVersionDialog()}
+      >
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>
+              {isCreate ? "Create skill" : "Save new version"}
+            </DialogTitle>
+          </DialogHeader>
+          <VersionDialogBody
+            form={form}
+            isCreate={isCreate}
+            previousVersion={previousVersion}
+            isSaving={isSaving}
+            serve={versionDialog?.serve ?? false}
+            onClose={closeVersionDialog}
+            onSave={(serve) => {
+              setVersionDialog(null);
+              onSave(serve);
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
 
-							{/* Spec Fields */}
-							<FormSection title="Spec Fields">
-								<div className="grid grid-cols-3 gap-4">
-									<div className="space-y-1.5">
-										<Label className="text-muted-foreground text-xs">License</Label>
-										<Input
-											data-testid="skill-license-input"
-											value={form.license}
-											onChange={(e) => form.setLicense(e.target.value)}
-											placeholder="MIT (optional)"
-											className="text-sm"
-										/>
-									</div>
-									<div className="space-y-1.5">
-										<Label className="text-muted-foreground text-xs">Compatibility</Label>
-										<Input
-											data-testid="skill-compatibility-input"
-											value={form.compatibility}
-											onChange={(e) => form.setCompatibility(e.target.value)}
-											placeholder="Claude Code, Codex (optional)"
-											className="text-sm"
-										/>
-									</div>
-									<div className="space-y-1.5">
-										<Label className="text-muted-foreground text-xs">Allowed Tools</Label>
-										<Input
-											data-testid="skill-allowed-tools-input"
-											value={form.allowedTools}
-											onChange={(e) => form.setAllowedTools(e.target.value)}
-											placeholder="Bash Read Grep (optional)"
-											className="text-sm"
-										/>
-									</div>
-								</div>
-							</FormSection>
+/** Build autocomplete items for referencing skill files with @[name](path) syntax. */
+function buildFilePathCompletions(files: SkillFileEntry[]): CompletionItem[] {
+  const completions: CompletionItem[] = [];
+  const folderPaths = new Set<string>();
 
-							{/* Extra Frontmatter */}
-							<FormSection title="Extra Frontmatter" optional>
-								<p className="text-muted-foreground -mt-1 text-xs">
-									Enter valid JSON. Its top-level keys are merged into the SKILL.md YAML frontmatter.
-								</p>
-								<div className="overflow-hidden rounded-sm border">
-									<CodeEditor
-										className="z-0 w-full"
-										code={form.extraFrontmatterJson}
-										lang="json"
-										onChange={(value: string) => {
-											form.setExtraFrontmatterJson(value);
-											form.validateField("extra_frontmatter", value);
-										}}
-										autoResize
-										minHeight={80}
-										maxHeight={300}
-										wrap
-										options={{
-											scrollBeyondLastLine: false,
-											lineNumbers: "on",
-											alwaysConsumeMouseWheel: false,
-										}}
-									/>
-								</div>
-								{form.errors.extra_frontmatter && (
-									<p className="text-destructive text-xs" role="alert">
-										{form.errors.extra_frontmatter}
-									</p>
-								)}
-							</FormSection>
+  for (const file of files) {
+    if (!file.path) continue;
+    const pathParts = file.path.split("/").filter(Boolean);
+    const fileName = pathParts.at(-1) ?? file.path;
+    const rootRelativePath = `./${file.path}`;
 
-							{/* Metadata (collapsible) */}
-							<Collapsible open={metadataOpen} onOpenChange={setMetadataOpen} className="space-y-3">
-								<CollapsibleTrigger className="flex w-full items-center gap-2 text-left" data-testid="skill-metadata-toggle">
-									<ChevronDown className={cn("size-4 shrink-0 transition-transform", metadataOpen ? "rotate-0" : "-rotate-90")} />
-									<h2 className="text-foreground text-base font-semibold tracking-tight">Metadata</h2>
-									<span className="text-muted-foreground text-xs">optional</span>
-								</CollapsibleTrigger>
-								<CollapsibleContent className="space-y-3">
-									<p className="text-muted-foreground text-xs">
-										Flat key-value pairs nested under <code className="font-mono">metadata:</code> in SKILL.md
-									</p>
-									<MetadataTableEditor
-										metadataJson={form.metadataJson}
-										onChange={(json) => {
-											form.setMetadataJson(json);
-											form.validateField("metadata", json);
-										}}
-										error={form.errors.metadata}
-									/>
-								</CollapsibleContent>
-							</Collapsible>
-						</CollapsibleContent>
-					</Collapsible>
-				</div>
-			</div>
+    for (let i = 0; i < pathParts.length - 1; i++) {
+      folderPaths.add(pathParts.slice(0, i + 1).join("/"));
+    }
 
-			{/* Files + SKILL.md two-pane workspace — fills remaining height */}
-			<div className="min-h-0 flex-1 px-4 pt-4 pb-2">
-				<div className="flex h-full gap-3">
-					{/* Left: files panel */}
-					<div className="bg-card flex w-72 shrink-0 flex-col rounded-md border">
-						<div className="flex h-9 items-center border-b px-3">
-							<span className="text-sm font-semibold">Files</span>
-						</div>
-						<ScrollArea className="min-h-0 flex-1" viewportClassName="[&>div]:!block">
-							<div className="p-1">
-								<FileManagerSection
-									files={form.files}
-									onAddFile={form.addFile}
-									onRemoveFile={form.removeFile}
-									onUpdateFile={form.updateFile}
-									readOnly={false}
-									selectedIndex={selectedFileIndex}
-									onSelectFile={setSelectedFileIndex}
-									bodySelected={selectedFile == null}
-									onSelectBody={() => setSelectedFileIndex(null)}
-								/>
-							</div>
-						</ScrollArea>
-					</div>
+    completions.push({
+      label: fileName,
+      insertText: `@[${fileName}](${rootRelativePath})`,
+      type: "object" as const,
+      description: rootRelativePath,
+      documentation: `Full path: ${rootRelativePath}`,
+    });
+  }
 
-					{/* Right: editor for the selected item */}
-					<div className="flex min-w-0 flex-1 flex-col">
-						{selectedFile ? (
-							<FilePreviewPane
-								key={selectedFile.path}
-								file={selectedFile}
-								skillName={skillName ?? form.name ?? ""}
-								mode="edit"
-								registerFlush={(flush) => {
-									flushFileEditRef.current = flush;
-								}}
-								onContentChange={(content) => {
-									if (selectedFileIndex != null) form.updateFile(selectedFileIndex, { content });
-								}}
-							/>
-						) : (
-							<div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-sm border">
-								<div className="flex h-9 shrink-0 items-center gap-1 border-b px-2" role="tablist" aria-label="Body editor tabs">
-									<button
-										type="button"
-										className={cn(
-											"px-3 py-1 text-xs rounded-sm transition-colors cursor-pointer",
-											bodyTab === "edit" ? "bg-muted font-medium" : "text-muted-foreground hover:text-foreground",
-										)}
-										data-testid="skill-body-tab-edit"
-										onClick={() => setBodyTab("edit")}
-										role="tab"
-										aria-selected={bodyTab === "edit"}
-									>
-										Edit
-									</button>
-									<button
-										type="button"
-										className={cn(
-											"px-3 py-1 text-xs rounded-sm transition-colors cursor-pointer",
-											bodyTab === "preview" ? "bg-muted font-medium" : "text-muted-foreground hover:text-foreground",
-										)}
-										data-testid="skill-body-tab-preview"
-										onClick={() => setBodyTab("preview")}
-										role="tab"
-										aria-selected={bodyTab === "preview"}
-									>
-										Preview
-									</button>
-									<span className="text-muted-foreground ml-auto pr-1 text-[11px]">
-										Use <code className="font-mono">@</code> to reference files
-									</span>
-								</div>
-								<div className="min-h-0 flex-1 overflow-auto">
-									{bodyTab === "edit" ? (
-										<CodeEditor
-											className="z-0 w-full"
-											code={form.skillMdBody}
-											lang="markdown"
-											onChange={(value: string) => form.setSkillMdBody(value)}
-											autoResize
-											minHeight={300}
-											maxHeight={2000}
-											wrap
-											customCompletions={filePathCompletions}
-											options={{
-												scrollBeyondLastLine: false,
-												lineNumbers: "on",
-												alwaysConsumeMouseWheel: false,
-												quickSuggestions: false,
-											}}
-										/>
-									) : (
-										<div className="p-4">
-											<Markdown content={form.skillMdBody || ""} className="text-sm" />
-										</div>
-									)}
-								</div>
-								{(form.errors.skill_md_body || form.bodyWarning) && (
-									<div className="shrink-0 border-t px-3 py-1.5">
-										{form.errors.skill_md_body && (
-											<p className="text-destructive text-xs" role="alert">
-												{form.errors.skill_md_body}
-											</p>
-										)}
-										{form.bodyWarning && (
-											<p className="text-xs text-yellow-600 dark:text-yellow-500" role="status">
-												{form.bodyWarning}
-											</p>
-										)}
-									</div>
-								)}
-							</div>
-						)}
-					</div>
-				</div>
-			</div>
+  for (const folderPath of folderPaths) {
+    const folderName =
+      folderPath.split("/").filter(Boolean).pop() ?? folderPath;
+    const rootRelativePath = `./${folderPath}/`;
+    completions.push({
+      label: folderName,
+      insertText: `@[${folderName}](${rootRelativePath})`,
+      type: "folder" as const,
+      description: rootRelativePath,
+      documentation: `Full path: ${rootRelativePath}`,
+    });
+  }
 
-			<div className="dark:bg-card/95 sticky bottom-0 z-20 mt-4 flex items-center justify-end gap-2 border-t bg-white/95 px-1 py-3 backdrop-blur">
-				<Button
-					variant="ghost"
-					size="sm"
-					data-testid="skill-cancel-btn"
-					onClick={onCancel}
-					className="text-muted-foreground hover:bg-transparent hover:text-red-600 dark:hover:text-red-400"
-				>
-					Cancel
-				</Button>
-				<Button variant="outline" size="sm" data-testid="skill-preview-btn" onClick={() => setShowPreviewDialog(true)}>
-					<Eye className="h-3.5 w-3.5" />
-					Preview Raw SKILL.md
-				</Button>
-				{isCreate ? (
-					<Button
-						size="sm"
-						data-testid="skill-create-save-btn"
-						onClick={() => openVersionDialog(true)}
-						disabled={isSaving || form.hasErrors}
-					>
-						{isSaving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
-						{isSaving ? "Creating..." : "Create Skill"}
-					</Button>
-				) : (
-					<>
-						<Button
-							variant="outline"
-							size="sm"
-							data-testid="skill-save-btn"
-							onClick={() => openVersionDialog(false)}
-							disabled={isSaving || form.hasErrors}
-						>
-							{isSaving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Save className="h-3.5 w-3.5" />}
-							{isSaving ? "Saving..." : "Save"}
-						</Button>
-						<Button
-							size="sm"
-							data-testid="skill-save-serve-btn"
-							onClick={() => openVersionDialog(true)}
-							disabled={isSaving || form.hasErrors}
-						>
-							{isSaving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Save className="h-3.5 w-3.5" />}
-							{isSaving ? "Saving..." : "Save & Serve"}
-						</Button>
-					</>
-				)}
-			</div>
+  return completions.sort(
+    (a, b) => a.description?.localeCompare(b.description ?? "") ?? 0,
+  );
+}
 
-			{/* Preview SKILL.md Dialog */}
-			<Dialog open={showPreviewDialog} onOpenChange={setShowPreviewDialog}>
-				<DialogContent
-					showCloseButton={false}
-					className="h-[90vh] max-h-[90vh] w-[95vw] max-w-[95vw] min-w-0 overflow-hidden border-0 bg-transparent p-0 shadow-none sm:w-[80vw] sm:max-w-[80vw] md:w-[50vw] md:max-w-[50vw]"
-				>
-					<DialogHeader className="sr-only">
-						<DialogTitle>SKILL.md Preview</DialogTitle>
-					</DialogHeader>
-					<div className="bg-muted relative overflow-hidden rounded-sm border shadow-lg">
-						<div className="absolute top-3 right-3 z-10 flex items-center gap-1">
-							<Button
-								variant="ghost"
-								size="icon"
-								data-testid="skill-preview-copy-btn"
-								className="bg-background/70 text-muted-foreground hover:bg-background/90 hover:text-foreground h-8 w-8 rounded-sm"
-								onClick={() => copyPreviewContent(previewContent)}
-								aria-label={copiedPreviewContent ? "Raw SKILL.md copied" : "Copy raw SKILL.md"}
-							>
-								{copiedPreviewContent ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-							</Button>
-							<DialogClose className="text-muted-foreground hover:bg-background/80 hover:text-foreground cursor-pointer rounded-sm p-1.5 transition-colors">
-								<X className="h-4 w-4" />
-								<span className="sr-only">Close</span>
-							</DialogClose>
-						</div>
-						<ScrollArea className="h-[90vh]" viewportClassName="bg-muted">
-							<pre className="bg-muted min-h-[420px] p-5 pr-24 font-mono text-xs leading-5 whitespace-pre-wrap">{previewContent}</pre>
-						</ScrollArea>
-					</div>
-				</DialogContent>
-			</Dialog>
+function DetailsEditorPane({
+  form,
+  descriptionLength,
+  descriptionLimitColor,
+}: {
+  form: SkillFormReturn;
+  descriptionLength: number;
+  descriptionLimitColor: string;
+}) {
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+      <div className="flex h-9 shrink-0 items-center gap-2 px-1">
+        <span className="text-sm font-semibold">Details</span>
+        <span className="text-muted-foreground text-xs">
+          Edit the skill description and spec fields
+        </span>
+      </div>
+      <ScrollArea className="min-h-0 flex-1 rounded-sm border">
+        <div className="flex flex-col gap-8 p-4">
+          <FormSection title="Description">
+            <div className="flex flex-col gap-2">
+              <Textarea
+                data-testid="skill-description-input"
+                value={form.description}
+                onChange={(e) => {
+                  form.setDescription(e.target.value);
+                  form.validateField("description", e.target.value);
+                }}
+                placeholder="What does this skill do?"
+                rows={3}
+                className={
+                  form.errors.description ? "border-destructive" : undefined
+                }
+              />
+              <div className="flex justify-between">
+                <span
+                  className={`text-xs tabular-nums transition-colors ${descriptionLimitColor}`}
+                >
+                  {descriptionLength}/1024
+                </span>
+                {form.errors.description ? (
+                  <p className="text-destructive text-xs" role="alert">
+                    {form.errors.description}
+                  </p>
+                ) : (
+                  <span />
+                )}
+              </div>
+            </div>
+          </FormSection>
+
+          <FormSection title="Spec Fields">
+            <div className="grid grid-cols-3 gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-muted-foreground text-xs">License</Label>
+                <Input
+                  data-testid="skill-license-input"
+                  value={form.license}
+                  onChange={(e) => form.setLicense(e.target.value)}
+                  placeholder="MIT (optional)"
+                  className="text-sm"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-muted-foreground text-xs">
+                  Compatibility
+                </Label>
+                <Input
+                  data-testid="skill-compatibility-input"
+                  value={form.compatibility}
+                  onChange={(e) => form.setCompatibility(e.target.value)}
+                  placeholder="Claude Code, Codex (optional)"
+                  className="text-sm"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-muted-foreground text-xs">
+                  Allowed Tools
+                </Label>
+                <Input
+                  data-testid="skill-allowed-tools-input"
+                  value={form.allowedTools}
+                  onChange={(e) => form.setAllowedTools(e.target.value)}
+                  placeholder="Bash Read Grep (optional)"
+                  className="text-sm"
+                />
+              </div>
+            </div>
+          </FormSection>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+function MetadataEditorPane({ form }: { form: SkillFormReturn }) {
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+      <div className="flex h-9 shrink-0 items-center gap-2 px-1">
+        <span className="text-sm font-semibold">Metadata</span>
+        <span className="text-muted-foreground text-xs">
+          Flat key-value pairs nested under{" "}
+          <code className="font-mono">metadata:</code> in SKILL.md
+        </span>
+      </div>
+      <ScrollArea className="min-h-0 flex-1 rounded-sm border">
+        <div className="p-3">
+          <MetadataTableEditor
+            metadataJson={form.metadataJson}
+            onChange={(json) => {
+              form.setMetadataJson(json);
+              form.validateField("metadata", json);
+            }}
+            error={form.errors.metadata}
+          />
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+function ExtraFrontmatterEditorPane({ form }: { form: SkillFormReturn }) {
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+      <div className="flex h-9 shrink-0 items-center gap-2 px-1">
+        <span className="text-sm font-semibold">Extra Frontmatter</span>
+        <span className="text-muted-foreground text-xs">
+          Valid JSON merged into the SKILL.md YAML frontmatter
+        </span>
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col gap-2 rounded-sm border p-3">
+        <div className="min-h-0 flex-1 overflow-hidden">
+          <CodeEditor
+            className="z-0 w-full"
+            code={form.extraFrontmatterJson}
+            lang="json"
+            onChange={(value: string) => {
+              form.setExtraFrontmatterJson(value);
+              form.validateField("extra_frontmatter", value);
+            }}
+            height="100%"
+            wrap
+            options={{
+              showVerticalScrollbar: true,
+              scrollBeyondLastLine: false,
+              lineNumbers: "on",
+              alwaysConsumeMouseWheel: false,
+            }}
+          />
+        </div>
+        {form.errors.extra_frontmatter && (
+          <p className="text-destructive shrink-0 text-xs" role="alert">
+            {form.errors.extra_frontmatter}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** The version input + confirm/cancel inside the version dialog. */
+function VersionDialogBody({
+  form,
+  isCreate,
+  previousVersion,
+  isSaving,
+  serve,
+  onClose,
+  onSave,
+}: {
+  form: SkillFormReturn;
+  isCreate: boolean;
+  previousVersion?: string;
+  isSaving: boolean;
+  serve: boolean;
+  onClose: () => void;
+  onSave: (serve: boolean) => void;
+}) {
+  const bumpError =
+    !isCreate && previousVersion
+      ? validateVersionBump(form.version, previousVersion)
+      : null;
+  const versionError = form.errors.version || bumpError;
+  const canSave = !!form.version.trim() && !versionError && !isSaving;
+
+  const submit = () => {
+    if (!canSave) return;
+    onSave(serve);
+  };
 
-			{/* Version dialog — asked for at save time */}
-			<Dialog open={versionDialog != null} onOpenChange={(open) => !open && closeVersionDialog()}>
-				<DialogContent className="sm:max-w-sm">
-					<DialogHeader>
-						<DialogTitle>{isCreate ? "Create skill" : "Save new version"}</DialogTitle>
-					</DialogHeader>
-					{(() => {
-						const serve = versionDialog?.serve ?? false;
-						const bumpError = !isCreate && previousVersion ? validateVersionBump(form.version, previousVersion) : null;
-						const versionError = form.errors.version || bumpError;
-						const canSave = !!form.version.trim() && !versionError && !isSaving;
-						const submit = () => {
-							if (!canSave) return;
-							setVersionDialog(null);
-							onSave(serve);
-						};
-						return (
-							<>
-								<div className="space-y-1.5">
-									<Label className="text-muted-foreground text-xs">Version</Label>
-									<div className="flex items-center gap-2">
-										{!isCreate && previousVersion && (
-											<>
-												<span className="text-muted-foreground font-mono text-sm">{previousVersion}</span>
-												<span className="text-muted-foreground/50">→</span>
-											</>
-										)}
-										<Input
-											autoFocus
-											data-testid="skill-version-input"
-											value={form.version}
-											onChange={(e) => {
-												form.setVersion(e.target.value);
-												form.validateField("version", e.target.value);
-											}}
-											onKeyDown={(e) => {
-												if (e.key === "Enter") {
-													e.preventDefault();
-													submit();
-												}
-											}}
-											placeholder="1.0.0"
-											className={cn("max-w-[180px] font-mono text-sm", versionError && "border-destructive")}
-										/>
-									</div>
-									{versionError ? (
-										<p className="text-destructive text-xs" role="alert">
-											{versionError}
-										</p>
-									) : (
-										!isCreate && <p className="text-muted-foreground text-xs">Bump major (2.x.x), minor (1.1.x), or patch (1.0.1).</p>
-									)}
-								</div>
-								<div className="mt-4 flex justify-end gap-2">
-									<Button variant="ghost" size="sm" onClick={closeVersionDialog}>
-										Cancel
-									</Button>
-									<Button size="sm" data-testid="skill-version-confirm-btn" disabled={!canSave} onClick={submit}>
-										{isCreate ? "Create" : serve ? "Save & Serve" : "Save"}
-									</Button>
-								</div>
-							</>
-						);
-					})()}
-				</DialogContent>
-			</Dialog>
-		</div>
-	);
-}
\ No newline at end of file
+  return (
+    <>
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-muted-foreground text-xs">Version</Label>
+        <div className="flex items-center gap-2">
+          {!isCreate && previousVersion && (
+            <>
+              <span className="text-muted-foreground font-mono text-sm">
+                {previousVersion}
+              </span>
+              <span className="text-muted-foreground/50">→</span>
+            </>
+          )}
+          <Input
+            autoFocus
+            data-testid="skill-version-input"
+            value={form.version}
+            onChange={(e) => {
+              form.setVersion(e.target.value);
+              form.validateField("version", e.target.value);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                submit();
+              }
+            }}
+            placeholder="1.0.0"
+            className={cn(
+              "max-w-44 font-mono text-sm",
+              versionError && "border-destructive",
+            )}
+          />
+        </div>
+        {versionError ? (
+          <p className="text-destructive text-xs" role="alert">
+            {versionError}
+          </p>
+        ) : (
+          !isCreate && (
+            <p className="text-muted-foreground text-xs">
+              Bump major (2.x.x), minor (1.1.x), or patch (1.0.1).
+            </p>
+          )
+        )}
+      </div>
+      <div className="mt-4 flex justify-end gap-2">
+        <Button variant="ghost" size="sm" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          size="sm"
+          data-testid="skill-version-confirm-btn"
+          disabled={!canSave}
+          onClick={submit}
+        >
+          {isCreate ? "Create" : serve ? "Save & Serve" : "Save"}
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/ui/app/workspace/skills-repo/forms/skillEditFormFields.tsx b/ui/app/workspace/skills-repo/forms/skillEditFormFields.tsx
index a2140989f1..051a7649e9 100644
--- a/ui/app/workspace/skills-repo/forms/skillEditFormFields.tsx
+++ b/ui/app/workspace/skills-repo/forms/skillEditFormFields.tsx
@@ -1,31 +1,25 @@
 "use client";
 
-import { Skill, SkillFileEntry } from "@/lib/types/skills";
+import { Skill } from "@/lib/types/skills";
 import { composeFrontmatter } from "../components/helpers";
 import { SkillReadOnlyContent } from "../components/shared";
 
-// ---------- SkillFormFields ----------
+function hasKeys(obj: Record<string, unknown> | null | undefined): obj is Record<string, unknown> {
+	return obj != null && Object.keys(obj).length > 0;
+}
 
 export function SkillFormFields({ skill }: { skill: Skill }) {
-	const files: SkillFileEntry[] = (skill.files ?? []).map((file) => ({
-		path: file.path,
-		source_type: file.source_type,
-		content: file.content,
-		source_url: file.source_url,
-		dataurl: file.dataurl,
-		storage_key: file.storage_key,
-		blob_id: file.blob_id,
-		mime_type: file.mime_type,
-		file_size_bytes: file.file_size_bytes,
-	}));
+	const extraFrontmatter = hasKeys(skill.extra_frontmatter) ? skill.extra_frontmatter : null;
+	const metadata = hasKeys(skill.metadata) ? skill.metadata : null;
 
 	return (
 		<SkillReadOnlyContent
+			className="min-h-0 flex-1"
 			skillName={skill.name}
 			skillMdBody={skill.skill_md_body}
-			files={files}
-			extraFrontmatter={skill.extra_frontmatter && Object.keys(skill.extra_frontmatter).length > 0 ? skill.extra_frontmatter : null}
-			metadata={skill.metadata && Object.keys(skill.metadata).length > 0 ? skill.metadata : null}
+			files={skill.files ?? []}
+			extraFrontmatter={extraFrontmatter}
+			metadata={metadata}
 			composedSkillMd={
 				composeFrontmatter({
 					name: skill.name,
@@ -33,15 +27,12 @@ export function SkillFormFields({ skill }: { skill: Skill }) {
 					license: skill.license || "",
 					compatibility: skill.compatibility || "",
 					allowed_tools: skill.allowed_tools || "",
-					extra_frontmatter_json:
-						skill.extra_frontmatter && Object.keys(skill.extra_frontmatter).length > 0
-							? JSON.stringify(skill.extra_frontmatter, null, 2)
-							: "",
-					metadata_json: skill.metadata && Object.keys(skill.metadata).length > 0 ? JSON.stringify(skill.metadata, null, 2) : "",
+					extra_frontmatter_json: extraFrontmatter ? JSON.stringify(extraFrontmatter, null, 2) : "",
+					metadata_json: metadata ? JSON.stringify(metadata, null, 2) : "",
 				}) +
 				"\n\n" +
 				skill.skill_md_body
 			}
 		/>
 	);
-}
\ No newline at end of file
+}
diff --git a/ui/app/workspace/skills-repo/page.tsx b/ui/app/workspace/skills-repo/page.tsx
index 3770379635..664401c0cc 100644
--- a/ui/app/workspace/skills-repo/page.tsx
+++ b/ui/app/workspace/skills-repo/page.tsx
@@ -4,8 +4,6 @@ import { useQueryStates, parseAsBoolean, parseAsString } from "nuqs";
 import { SkillCreateView } from "./components/skillCreatorView";
 import { SkillDetailView } from "./components/skillDetailsView";
 import { SkillsListView } from "./components/skillListView";
-import { cn } from "@/lib/utils";
-
 export default function SkillsRepoPage() {
 	const [urlState, setUrlState] = useQueryStates(
 		{
@@ -35,7 +33,7 @@ export default function SkillsRepoPage() {
 	// Create view
 	if (urlState.create) {
 		return (
-			<div className="no-padding-parent flex h-[calc(100dvh-1rem)] min-h-0 w-full flex-col">
+			<div className="no-padding-parent flex h-full w-full flex-col p-0">
 				<SkillCreateView onCreated={handleCreated} onBack={handleBack} />
 			</div>
 		);
@@ -44,7 +42,7 @@ export default function SkillsRepoPage() {
 	// Detail view when skillId is set
 	if (urlState.skillId) {
 		return (
-			<div className={cn("no-padding-parent flex h-[calc(100dvh-1rem)] min-h-0 w-full flex-col p-4 pt-0", urlState.edit && "p-0")}>
+			<div className={urlState.edit ? "no-padding-parent flex h-full w-full flex-col p-0" : "no-padding-parent flex h-full w-full flex-col p-4 pt-0"}>
 				<SkillDetailView skillId={urlState.skillId} isEditing={urlState.edit} setIsEditing={setIsEditing} onBack={handleBack} />
 			</div>
 		);
@@ -52,7 +50,7 @@ export default function SkillsRepoPage() {
 
 	// List view
 	return (
-		<div className="no-padding-parent flex h-[calc(100dvh-1rem)] min-h-0 w-full flex-col p-4">
+		<div className="no-padding-parent flex w-full flex-col p-4">
 			<SkillsListView onSelectSkill={handleSelectSkill} onCreateNew={() => setUrlState({ create: true, skillId: null, edit: false })} />
 		</div>
 	);
diff --git a/ui/components/ui/treeView.tsx b/ui/components/ui/treeView.tsx
index 50e6642098..6fb507a74f 100644
--- a/ui/components/ui/treeView.tsx
+++ b/ui/components/ui/treeView.tsx
@@ -102,7 +102,7 @@ function TreeNodeComponent<T extends BaseNodeData>({
 	const isExpanded = expandedNodes[node.data.id] ?? false;
 
 	return (
-		<div className="relative min-w-0 overflow-hidden">
+		<div className="relative min-w-max">
 			{/* Vertical line from parent — spans the full node height (row + children) for sibling continuation */}
 			{level > 0 && !isLast && (
 				<div
@@ -118,7 +118,7 @@ function TreeNodeComponent<T extends BaseNodeData>({
 			)}
 
 			{/* Row wrapper — horizontal line positions relative to just this row */}
-			<div className="relative min-w-0 overflow-hidden">
+			<div className="relative min-w-max">
 				{/* Vertical line stub for last child — only goes to row center */}
 				{level > 0 && isLast && (
 					<div
@@ -148,7 +148,7 @@ function TreeNodeComponent<T extends BaseNodeData>({
 				)}
 
 				{/* Node content */}
-				<div className="relative min-w-0 overflow-hidden" style={{ paddingLeft: `${level * indentSize}px` }}>
+				<div className="relative min-w-max" style={{ paddingLeft: `${level * indentSize}px` }}>
 					<div className="py-0.5">
 						{renderItem({
 							item: node.data,
@@ -167,7 +167,7 @@ function TreeNodeComponent<T extends BaseNodeData>({
 
 			{/* Children */}
 			{isExpanded && node.children && (
-				<div className="relative min-w-0 overflow-hidden">
+				<div className="relative min-w-max">
 					{node.children.map((child, idx) => (
 						<TreeNodeComponent
 							key={child.data.id}
@@ -274,7 +274,7 @@ export function Tree<T extends BaseNodeData>({
 	}, [dataFingerprint, levelsToExpandByDefault]);
 
 	return (
-		<div className={cn("min-w-0 overflow-hidden", className)}>
+		<div className={cn("min-w-max", className)}>
 			{data.map((node, idx) => (
 				<TreeNodeComponent
 					key={node.data.id}