From fd1308110904a49b2f2c4644afe314a369efbdeb Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Wed, 31 Jul 2024 13:28:00 -0400
Subject: [PATCH] Sort top level files based on directory or not; fix task
 header styles

---
 src/ClaudeDev.ts                         | 15 ++++++++++-
 webview-ui/src/components/TaskHeader.tsx | 34 ++++++++++++++----------
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/ClaudeDev.ts b/src/ClaudeDev.ts
index 43e466ba3..dc666e3d2 100644
--- a/src/ClaudeDev.ts
+++ b/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)
diff --git a/webview-ui/src/components/TaskHeader.tsx b/webview-ui/src/components/TaskHeader.tsx
index 4d1cd278c..3c734916a 100644
--- a/webview-ui/src/components/TaskHeader.tsx
+++ b/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,21 +158,27 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({ taskText, tokensIn, tokensOut,
 							{tokensIn.toLocaleString()}
 						</span>
 					</div>
-					<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-						<span style={{ fontWeight: "bold" }}>API Cost:</span>
-						<span>${totalCost.toFixed(4)}</span>
+					<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>
+						<VSCodeButton
+							appearance="icon"
+							onClick={handleDownload}
+							style={{
+								marginBottom: "-2px",
+								marginRight: "-2.5px",
+							}}>
+							<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT .MD</div>
+						</VSCodeButton>
 					</div>
 				</div>
-				<VSCodeButton
-					appearance="icon"
-					onClick={handleDownload}
-					style={{
-						position: "absolute",
-						bottom: "9.5px",
-						right: "9px",
-					}}>
-					<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT .MD</div>
-				</VSCodeButton>
 			</div>
 		</div>
 	)