Sort top level files based on directory or not; fix task header styles

src/ClaudeDev.ts

@@ -449,7 +449,20 @@ export class ClaudeDev {
 	async listFilesTopLevel(dirPath: string): Promise<string> {
 		try {
 			const files = await listFiles(dirPath, false)
-			const result = files.map((file) => path.relative(dirPath, file)).join("\n")
+			const result = files
+				.map((file) => {
+					const relativePath = path.relative(dirPath, file)
+					return file.endsWith("/") ? relativePath + "/" : relativePath
+				})
+				.sort((a, b) => {
+					const aIsDir = a.endsWith("/")
+					const bIsDir = b.endsWith("/")
+					if (aIsDir !== bIsDir) {
+						return aIsDir ? -1 : 1
+					}
+					return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" })
+				})
+				.join("\n")
 			const { response, text } = await this.ask(
 				"tool",
 				JSON.stringify({ tool: "listFilesTopLevel", path: dirPath, content: result } as ClaudeSayTool)

webview-ui/src/components/TaskHeader.tsx

@@ -141,7 +141,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({ taskText, tokensIn, tokensOut,
 					)}
 				</div>
 				<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
-					<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+					<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
 						<span style={{ fontWeight: "bold" }}>Tokens:</span>
 						<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
 							<i
@@ -158,23 +158,29 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({ taskText, tokensIn, tokensOut,
 							{tokensIn.toLocaleString()}
 						</span>
 					</div>
+					<div
+						style={{
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
+						}}>
 						<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
 							<span style={{ fontWeight: "bold" }}>API Cost:</span>
 							<span>${totalCost.toFixed(4)}</span>
 						</div>
-				</div>
 						<VSCodeButton
 							appearance="icon"
 							onClick={handleDownload}
 							style={{
-						position: "absolute",
+								marginBottom: "-2px",
-						bottom: "9.5px",
+								marginRight: "-2.5px",
-						right: "9px",
 							}}>
 							<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT .MD</div>
 						</VSCodeButton>
 					</div>
 				</div>
+			</div>
+		</div>
 	)
 }