From d573e7c9e1639d7c98c02f3face6f599464f8758 Mon Sep 17 00:00:00 2001
From: emozilla <emozilla@nousresearch.com>
Date: Thu, 18 Jun 2026 16:00:26 -0400
Subject: [PATCH] fix(dashboard): use DS Button prefix/size API instead of
 inline icons

@nous-research/ui@0.18.2 Button is grid-based: size=xs is an
aspect-square icon-only box, and icons belong in prefix/suffix.
The dashboard used shadcn-style size=xs + inline <Icon/> text
children, which forced text buttons into broken tall squares
(Configure, Run setup, Select, Save keys) and split icon/label
across grid columns elsewhere (Schedule it, Prune/Delete actions).

Move leading icons to prefix and size text buttons as sm/default.
For the post-setup spinner, drive the spin from a button-level
[&_svg]:animate-spin selector since the prefix slot clones the
icon and overwrites its className.

- ToolsetConfigDrawer: Select, Save keys, Run setup
- SkillsPage: New skill, Configure
- AutomationBlueprints: Schedule it
- SessionsPage: Prune old sessions, Delete empty, Delete selected
---
 web/src/components/AutomationBlueprints.tsx |  7 +++--
 web/src/components/ToolsetConfigDrawer.tsx  | 32 ++++++++++++---------
 web/src/pages/SessionsPage.tsx              |  7 ++---
 web/src/pages/SkillsPage.tsx                |  7 ++---
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/web/src/components/AutomationBlueprints.tsx b/web/src/components/AutomationBlueprints.tsx
index 10d1270fa05..209c75e0682 100644
--- a/web/src/components/AutomationBlueprints.tsx
+++ b/web/src/components/AutomationBlueprints.tsx
@@ -149,8 +149,11 @@ function BlueprintCard({
               </p>
             ) : null}
             <div className="flex items-center gap-2">
-              <Button onClick={() => void submit()} disabled={submitting}>
-                {submitting ? <Spinner className="h-4 w-4" /> : <Clock className="h-4 w-4" />}
+              <Button
+                onClick={() => void submit()}
+                disabled={submitting}
+                prefix={submitting ? <Spinner /> : <Clock />}
+              >
                 Schedule it
               </Button>
             </div>
diff --git a/web/src/components/ToolsetConfigDrawer.tsx b/web/src/components/ToolsetConfigDrawer.tsx
index 792393c9285..a042a780ad5 100644
--- a/web/src/components/ToolsetConfigDrawer.tsx
+++ b/web/src/components/ToolsetConfigDrawer.tsx
@@ -309,7 +309,7 @@ export function ToolsetConfigDrawer({ toolset, profile, onClose, onChanged }: Pr
                       </Badge>
                     ) : (
                       <Button
-                        size="xs"
+                        size="sm"
                         outlined
                         onClick={() => void handleSelectProvider(provider)}
                         disabled={selecting !== null}
@@ -376,7 +376,7 @@ export function ToolsetConfigDrawer({ toolset, profile, onClose, onChanged }: Pr
                         </div>
                       ))}
                       <Button
-                        size="xs"
+                        size="sm"
                         onClick={() => void handleSaveKeys(provider)}
                         disabled={savingProvider !== null}
                       >
@@ -401,22 +401,28 @@ export function ToolsetConfigDrawer({ toolset, profile, onClose, onChanged }: Pr
                         . Runs on this host — may take a few minutes.
                       </p>
                       <Button
-                        size="xs"
+                        size="sm"
                         outlined
+                        className={cn(
+                          postSetupRunning &&
+                            postSetupKey === provider.post_setup &&
+                            "[&_svg]:animate-spin",
+                        )}
                         onClick={() => void handleRunPostSetup(provider)}
                         disabled={postSetupRunning}
+                        prefix={
+                          postSetupRunning &&
+                          postSetupKey === provider.post_setup ? (
+                            <Loader2 />
+                          ) : (
+                            <Terminal />
+                          )
+                        }
                       >
                         {postSetupRunning &&
-                        postSetupKey === provider.post_setup ? (
-                          <>
-                            <Loader2 className="h-3 w-3 animate-spin mr-1" />
-                            Installing…
-                          </>
-                        ) : (
-                          <>
-                            <Terminal className="h-3 w-3 mr-1" /> Run setup
-                          </>
-                        )}
+                        postSetupKey === provider.post_setup
+                          ? "Installing…"
+                          : "Run setup"}
                       </Button>
                     </div>
                   )}
diff --git a/web/src/pages/SessionsPage.tsx b/web/src/pages/SessionsPage.tsx
index c48d2453876..2d70c399af2 100644
--- a/web/src/pages/SessionsPage.tsx
+++ b/web/src/pages/SessionsPage.tsx
@@ -794,10 +794,9 @@ export default function SessionsPage() {
       <Button
         outlined
         size="sm"
-        className="gap-1.5"
         onClick={() => setPruneOpen(true)}
+        prefix={<Archive />}
       >
-        <Archive className="h-3.5 w-3.5" />
         Prune old sessions
       </Button>,
     );
@@ -1491,8 +1490,8 @@ export default function SessionsPage() {
                 onClick={() => setDeleteEmptyOpen(true)}
                 aria-label={t.sessions.deleteEmpty}
                 title={t.sessions.deleteEmpty}
+                prefix={<Eraser />}
               >
-                <Eraser className="h-3.5 w-3.5" />
                 <span className="font-mondwest normal-case text-xs">
                   {t.sessions.deleteEmpty} ({emptyCount})
                 </span>
@@ -1565,8 +1564,8 @@ export default function SessionsPage() {
               "{count}",
               String(selectedIds.size),
             )}
+            prefix={<Trash2 />}
           >
-            <Trash2 className="h-3.5 w-3.5" />
             <span className="font-mondwest normal-case text-xs">
               {t.sessions.deleteSelected.replace(
                 "{count}",
diff --git a/web/src/pages/SkillsPage.tsx b/web/src/pages/SkillsPage.tsx
index e8f764d8e86..cb6beef22fa 100644
--- a/web/src/pages/SkillsPage.tsx
+++ b/web/src/pages/SkillsPage.tsx
@@ -493,9 +493,8 @@ export default function SkillsPage() {
                         .replace("{s}", activeSkills.length !== 1 ? "s" : "")}
                     </Badge>
                     <Button
-                      size="xs"
+                      size="sm"
                       outlined
-                      className="uppercase"
                       onClick={openCreateEditor}
                       prefix={<Plus />}
                     >
@@ -594,11 +593,11 @@ export default function SkillsPage() {
                               )}
                               <div className="mt-3">
                                 <Button
-                                  size="xs"
+                                  size="sm"
                                   outlined
                                   onClick={() => setConfigToolset(ts)}
+                                  prefix={<Wrench />}
                                 >
-                                  <Wrench className="h-3 w-3 mr-1" />
                                   Configure
                                 </Button>
                               </div>