From 7cdbd0d2a8db7d82db8b8534bb8e61a0ab697230 Mon Sep 17 00:00:00 2001
From: Dev Lead Agent <agent@molecule.ai>
Date: Tue, 14 Apr 2026 07:27:49 +0000
Subject: [PATCH] fix: workspace parent combobox, WCAG button text minimum 11px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace raw Parent Workspace ID text input with a <select> populated
from GET /workspaces (T{tier} · {name} format, graceful fallback on
fetch error). Raise all interactive button text from text-[8px]/[9px]
to text-[11px] across SkillsTab, ScheduleTab, secrets-section,
ActivityTab, SidePanel, ChatTab; non-interactive labels/badges to
text-[10px]. Adds 7 CreateWorkspaceDialog unit tests (372/372 passing).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/CreateWorkspaceDialog.tsx  |  35 ++++-
 canvas/src/components/SidePanel.tsx           |   2 +-
 .../__tests__/CreateWorkspaceDialog.test.tsx  | 130 ++++++++++++++++++
 canvas/src/components/tabs/ActivityTab.tsx    |  10 +-
 canvas/src/components/tabs/ChatTab.tsx        |   2 +-
 canvas/src/components/tabs/ScheduleTab.tsx    |  28 ++--
 canvas/src/components/tabs/SkillsTab.tsx      |  30 ++--
 .../tabs/config/secrets-section.tsx           |  12 +-
 8 files changed, 203 insertions(+), 46 deletions(-)
 create mode 100644 canvas/src/components/__tests__/CreateWorkspaceDialog.test.tsx

diff --git a/canvas/src/components/CreateWorkspaceDialog.tsx b/canvas/src/components/CreateWorkspaceDialog.tsx
index 23496405..1e1b35e5 100644
--- a/canvas/src/components/CreateWorkspaceDialog.tsx
+++ b/canvas/src/components/CreateWorkspaceDialog.tsx
@@ -1,8 +1,14 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { api } from "@/lib/api";
 
+interface WorkspaceOption {
+  id: string;
+  name: string;
+  tier: number;
+}
+
 export function CreateWorkspaceButton() {
   const [open, setOpen] = useState(false);
 
@@ -31,6 +37,13 @@ function CreateDialog({ onClose }: { onClose: () => void }) {
   const [parentId, setParentId] = useState("");
   const [creating, setCreating] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [workspaces, setWorkspaces] = useState<WorkspaceOption[]>([]);
+
+  useEffect(() => {
+    api.get<WorkspaceOption[]>("/workspaces")
+      .then((ws) => setWorkspaces(ws))
+      .catch(() => {});
+  }, []);
 
   const handleCreate = async () => {
     if (!name.trim()) {
@@ -47,7 +60,7 @@ function CreateDialog({ onClose }: { onClose: () => void }) {
         role: role.trim() || undefined,
         template: template.trim() || undefined,
         tier,
-        parent_id: parentId.trim() || undefined,
+        parent_id: parentId || undefined,
         canvas: { x: Math.random() * 400 + 100, y: Math.random() * 300 + 100 },
       });
       onClose();
@@ -87,13 +100,27 @@ function CreateDialog({ onClose }: { onClose: () => void }) {
                   }`}
                 >
                   <div className="text-xs font-mono font-semibold">{t.label}</div>
-                  <div className="text-[9px] mt-0.5 opacity-70">{t.desc}</div>
+                  <div className="text-[10px] mt-0.5 opacity-70">{t.desc}</div>
                 </button>
               ))}
             </div>
           </div>
 
-          <InputField label="Parent Workspace ID" value={parentId} onChange={setParentId} placeholder="Leave empty for root-level" mono />
+          <div>
+            <label className="text-[11px] text-zinc-400 block mb-1">Parent Workspace</label>
+            <select
+              value={parentId}
+              onChange={(e) => setParentId(e.target.value)}
+              className="w-full bg-zinc-800/60 border border-zinc-700/50 rounded-lg px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:border-blue-500/60 focus:ring-1 focus:ring-blue-500/20 transition-colors"
+            >
+              <option value="">None (root level)</option>
+              {workspaces.map((ws) => (
+                <option key={ws.id} value={ws.id}>
+                  T{ws.tier} · {ws.name}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
 
         {error && (
diff --git a/canvas/src/components/SidePanel.tsx b/canvas/src/components/SidePanel.tsx
index 0a18358b..7ba93f62 100644
--- a/canvas/src/components/SidePanel.tsx
+++ b/canvas/src/components/SidePanel.tsx
@@ -163,7 +163,7 @@ export function SidePanel() {
             onClick={() => {
               useCanvasStore.getState().restartWorkspace(selectedNodeId).catch(() => showToast("Restart failed", "error"));
             }}
-            className="text-[9px] px-2 py-1 bg-sky-800/40 hover:bg-sky-700/50 text-sky-200 rounded transition-colors"
+            className="text-[11px] px-2 py-1 bg-sky-800/40 hover:bg-sky-700/50 text-sky-200 rounded transition-colors"
           >
             Restart Now
           </button>
diff --git a/canvas/src/components/__tests__/CreateWorkspaceDialog.test.tsx b/canvas/src/components/__tests__/CreateWorkspaceDialog.test.tsx
new file mode 100644
index 00000000..38de7a8c
--- /dev/null
+++ b/canvas/src/components/__tests__/CreateWorkspaceDialog.test.tsx
@@ -0,0 +1,130 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
+import { CreateWorkspaceButton } from "../CreateWorkspaceDialog";
+
+vi.mock("@/lib/api", () => ({
+  api: {
+    get: vi.fn(),
+    post: vi.fn(),
+  },
+}));
+
+import { api } from "@/lib/api";
+
+const mockGet = vi.mocked(api.get);
+const mockPost = vi.mocked(api.post);
+
+const SAMPLE_WORKSPACES = [
+  { id: "ws-1", name: "Platform Team", tier: 1 },
+  { id: "ws-2", name: "Research Agent", tier: 2 },
+];
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mockGet.mockResolvedValue(SAMPLE_WORKSPACES as any);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mockPost.mockResolvedValue({} as any);
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+async function openDialog() {
+  render(<CreateWorkspaceButton />);
+  const btn = screen.getAllByRole("button").find((b) => b.textContent?.includes("New Workspace"));
+  expect(btn).toBeTruthy();
+  fireEvent.click(btn!);
+  await waitFor(() => expect(screen.getByText("Create Workspace")).toBeTruthy());
+}
+
+describe("CreateWorkspaceDialog", () => {
+  it("opens the dialog when New Workspace button is clicked", async () => {
+    await openDialog();
+    expect(screen.getByText("Create Workspace")).toBeTruthy();
+  });
+
+  it("renders a <select> for parent workspace — not a text input", async () => {
+    await openDialog();
+    const selects = document.querySelectorAll("select");
+    expect(selects.length).toBeGreaterThanOrEqual(1);
+    // The old raw UUID text input is gone
+    expect(screen.queryByPlaceholderText("Leave empty for root-level")).toBeNull();
+  });
+
+  it('first option is "None (root level)" with empty value', async () => {
+    await openDialog();
+    const select = document.querySelector("select") as HTMLSelectElement;
+    expect(select).toBeTruthy();
+    const firstOption = select.options[0];
+    expect(firstOption.value).toBe("");
+    expect(firstOption.text.trim()).toBe("None (root level)");
+  });
+
+  it("populates select with workspace names from GET /workspaces", async () => {
+    await openDialog();
+    await waitFor(() => {
+      const select = document.querySelector("select") as HTMLSelectElement;
+      const optionValues = Array.from(select.options).map((o) => o.value);
+      expect(optionValues).toContain("ws-1");
+      expect(optionValues).toContain("ws-2");
+    });
+    const select = document.querySelector("select") as HTMLSelectElement;
+    const optionTexts = Array.from(select.options).map((o) => o.text.trim());
+    expect(optionTexts.some((t) => t.includes("Platform Team"))).toBe(true);
+    expect(optionTexts.some((t) => t.includes("Research Agent"))).toBe(true);
+  });
+
+  it("sends parent_id in POST body when a workspace is selected", async () => {
+    await openDialog();
+    await waitFor(() => {
+      const select = document.querySelector("select") as HTMLSelectElement;
+      expect(select.options.length).toBeGreaterThan(1);
+    });
+
+    fireEvent.change(screen.getByPlaceholderText("e.g. SEO Agent"), {
+      target: { value: "My Agent" },
+    });
+
+    const select = document.querySelector("select") as HTMLSelectElement;
+    fireEvent.change(select, { target: { value: "ws-1" } });
+
+    const createBtn = screen.getAllByRole("button").find((b) => b.textContent === "Create");
+    fireEvent.click(createBtn!);
+
+    await waitFor(() => expect(mockPost).toHaveBeenCalled());
+    const body = mockPost.mock.calls[0][1] as Record<string, unknown>;
+    expect(body.parent_id).toBe("ws-1");
+  });
+
+  it("sends parent_id as undefined when None (root level) is selected", async () => {
+    await openDialog();
+    fireEvent.change(screen.getByPlaceholderText("e.g. SEO Agent"), {
+      target: { value: "Root Agent" },
+    });
+
+    const select = document.querySelector("select") as HTMLSelectElement;
+    fireEvent.change(select, { target: { value: "" } });
+
+    const createBtn = screen.getAllByRole("button").find((b) => b.textContent === "Create");
+    fireEvent.click(createBtn!);
+
+    await waitFor(() => expect(mockPost).toHaveBeenCalled());
+    const body = mockPost.mock.calls[0][1] as Record<string, unknown>;
+    expect(body.parent_id).toBeUndefined();
+  });
+
+  it("renders gracefully when GET /workspaces fails", async () => {
+    mockGet.mockRejectedValueOnce(new Error("Network error"));
+    await openDialog();
+
+    // Dialog still renders; select exists with only the root option
+    await waitFor(() => {
+      const select = document.querySelector("select") as HTMLSelectElement;
+      expect(select.options.length).toBe(1);
+      expect(select.options[0].value).toBe("");
+    });
+  });
+});
diff --git a/canvas/src/components/tabs/ActivityTab.tsx b/canvas/src/components/tabs/ActivityTab.tsx
index 13f3c8e6..d61b0660 100644
--- a/canvas/src/components/tabs/ActivityTab.tsx
+++ b/canvas/src/components/tabs/ActivityTab.tsx
@@ -80,7 +80,7 @@ export function ActivityTab({ workspaceId }: Props) {
             <button
               key={f.id}
               onClick={() => setFilter(f.id)}
-              className={`px-2 py-1 text-[9px] rounded-md font-medium transition-all ${
+              className={`px-2 py-1 text-[11px] rounded-md font-medium transition-all ${
                 filter === f.id
                   ? "bg-zinc-700 text-zinc-100 ring-1 ring-zinc-600"
                   : "text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/60"
@@ -92,7 +92,7 @@ export function ActivityTab({ workspaceId }: Props) {
           <div className="ml-auto flex items-center gap-2">
             <button
               onClick={() => setAutoRefresh(!autoRefresh)}
-              className={`text-[9px] px-1.5 py-0.5 rounded ${
+              className={`text-[11px] px-1.5 py-0.5 rounded ${
                 autoRefresh ? "text-emerald-400 bg-emerald-950/30" : "text-zinc-500"
               }`}
               title={autoRefresh ? "Auto-refresh ON" : "Auto-refresh OFF"}
@@ -101,20 +101,20 @@ export function ActivityTab({ workspaceId }: Props) {
             </button>
             <button
               onClick={() => setTraceOpen(true)}
-              className="px-2 py-1 bg-blue-900/40 hover:bg-blue-800/50 text-[9px] rounded text-blue-300 border border-blue-800/30"
+              className="px-2 py-1 bg-blue-900/40 hover:bg-blue-800/50 text-[11px] rounded text-blue-300 border border-blue-800/30"
               title="View full conversation trace across all workspaces"
             >
               Full Trace
             </button>
             <button
               onClick={loadActivities}
-              className="px-2 py-1 bg-zinc-700 hover:bg-zinc-600 text-[9px] rounded text-zinc-300"
+              className="px-2 py-1 bg-zinc-700 hover:bg-zinc-600 text-[11px] rounded text-zinc-300"
             >
               Refresh
             </button>
           </div>
         </div>
-        <div className="mt-1.5 text-[9px] text-zinc-500">
+        <div className="mt-1.5 text-[10px] text-zinc-500">
           {activities.length} {filter === "all" ? "activities" : filter.replace("_", " ") + " entries"}
         </div>
       </div>
diff --git a/canvas/src/components/tabs/ChatTab.tsx b/canvas/src/components/tabs/ChatTab.tsx
index 0eceecf2..94d7818e 100644
--- a/canvas/src/components/tabs/ChatTab.tsx
+++ b/canvas/src/components/tabs/ChatTab.tsx
@@ -395,7 +395,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
             {!isOnline && (
               <button
                 onClick={() => setConfirmRestart(true)}
-                className="text-[9px] px-2 py-0.5 bg-red-800/40 text-red-300 rounded hover:bg-red-700/50"
+                className="text-[11px] px-2 py-0.5 bg-red-800/40 text-red-300 rounded hover:bg-red-700/50"
               >
                 Restart
               </button>
diff --git a/canvas/src/components/tabs/ScheduleTab.tsx b/canvas/src/components/tabs/ScheduleTab.tsx
index 0dc4e9bd..f82f6f86 100644
--- a/canvas/src/components/tabs/ScheduleTab.tsx
+++ b/canvas/src/components/tabs/ScheduleTab.tsx
@@ -179,7 +179,7 @@ export function ScheduleTab({ workspaceId }: Props) {
         </span>
         <button
           onClick={() => { resetForm(); setShowForm(true); }}
-          className="text-[9px] px-2 py-0.5 bg-blue-600/20 text-blue-400 rounded hover:bg-blue-600/30 transition-colors"
+          className="text-[11px] px-2 py-0.5 bg-blue-600/20 text-blue-400 rounded hover:bg-blue-600/30 transition-colors"
         >
           + Add Schedule
         </button>
@@ -197,23 +197,23 @@ export function ScheduleTab({ workspaceId }: Props) {
           />
           <div className="flex gap-2">
             <div className="flex-1">
-              <label className="text-[8px] text-zinc-500 block mb-0.5">Cron Expression</label>
+              <label className="text-[10px] text-zinc-500 block mb-0.5">Cron Expression</label>
               <input
                 type="text"
                 value={formCron}
                 onChange={(e) => setFormCron(e.target.value)}
                 className="w-full text-[10px] bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-200 font-mono"
               />
-              <div className="text-[8px] text-zinc-600 mt-0.5">
+              <div className="text-[10px] text-zinc-600 mt-0.5">
                 {cronToHuman(formCron)}
               </div>
             </div>
             <div className="w-24">
-              <label className="text-[8px] text-zinc-500 block mb-0.5">Timezone</label>
+              <label className="text-[10px] text-zinc-500 block mb-0.5">Timezone</label>
               <select
                 value={formTimezone}
                 onChange={(e) => setFormTimezone(e.target.value)}
-                className="w-full text-[9px] bg-zinc-800 border border-zinc-700 rounded px-1 py-1 text-zinc-200"
+                className="w-full text-[10px] bg-zinc-800 border border-zinc-700 rounded px-1 py-1 text-zinc-200"
               >
                 <option value="UTC">UTC</option>
                 <option value="America/New_York">US Eastern</option>
@@ -229,7 +229,7 @@ export function ScheduleTab({ workspaceId }: Props) {
             </div>
           </div>
           <div>
-            <label className="text-[8px] text-zinc-500 block mb-0.5">Prompt / Task</label>
+            <label className="text-[10px] text-zinc-500 block mb-0.5">Prompt / Task</label>
             <textarea
               value={formPrompt}
               onChange={(e) => setFormPrompt(e.target.value)}
@@ -239,7 +239,7 @@ export function ScheduleTab({ workspaceId }: Props) {
             />
           </div>
           <div className="flex items-center gap-2">
-            <label className="flex items-center gap-1.5 text-[9px] text-zinc-400 cursor-pointer">
+            <label className="flex items-center gap-1.5 text-[10px] text-zinc-400 cursor-pointer">
               <input
                 type="checkbox"
                 checked={formEnabled}
@@ -249,23 +249,23 @@ export function ScheduleTab({ workspaceId }: Props) {
               Enabled
             </label>
           </div>
-          {error && <div className="text-[9px] text-red-400">{error}</div>}
+          {error && <div className="text-[10px] text-red-400">{error}</div>}
           <div className="flex gap-2">
             <button
               onClick={handleSubmit}
               disabled={!formCron || !formPrompt}
-              className="text-[9px] px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-500 disabled:opacity-40 transition-colors"
+              className="text-[11px] px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-500 disabled:opacity-40 transition-colors"
             >
               {editId ? "Update" : "Create"}
             </button>
             <button
               onClick={resetForm}
-              className="text-[9px] px-3 py-1 bg-zinc-800 text-zinc-400 rounded hover:bg-zinc-700 transition-colors"
+              className="text-[11px] px-3 py-1 bg-zinc-800 text-zinc-400 rounded hover:bg-zinc-700 transition-colors"
             >
               Cancel
             </button>
           </div>
-          <div className="text-[8px] text-zinc-600 space-y-0.5">
+          <div className="text-[10px] text-zinc-600 space-y-0.5">
             <div>Common patterns:</div>
             <div className="font-mono">{"0 9 * * *"} — Daily at 9:00 AM</div>
             <div className="font-mono">{"*/30 * * * *"} — Every 30 minutes</div>
@@ -334,21 +334,21 @@ export function ScheduleTab({ workspaceId }: Props) {
                 <div className="flex items-center gap-1 flex-shrink-0">
                   <button
                     onClick={() => handleRunNow(sched)}
-                    className="text-[8px] px-1.5 py-0.5 text-blue-400 hover:bg-blue-600/20 rounded transition-colors"
+                    className="text-[11px] px-1.5 py-0.5 text-blue-400 hover:bg-blue-600/20 rounded transition-colors"
                     title="Run now"
                   >
                     ▶
                   </button>
                   <button
                     onClick={() => handleEdit(sched)}
-                    className="text-[8px] px-1.5 py-0.5 text-zinc-400 hover:bg-zinc-700 rounded transition-colors"
+                    className="text-[11px] px-1.5 py-0.5 text-zinc-400 hover:bg-zinc-700 rounded transition-colors"
                     title="Edit"
                   >
                     ✎
                   </button>
                   <button
                     onClick={() => setPendingDelete({ id: sched.id, name: sched.name })}
-                    className="text-[8px] px-1.5 py-0.5 text-red-400 hover:bg-red-600/20 rounded transition-colors"
+                    className="text-[11px] px-1.5 py-0.5 text-red-400 hover:bg-red-600/20 rounded transition-colors"
                     title="Delete"
                   >
                     ✕
diff --git a/canvas/src/components/tabs/SkillsTab.tsx b/canvas/src/components/tabs/SkillsTab.tsx
index 5eefad55..86bd9eca 100644
--- a/canvas/src/components/tabs/SkillsTab.tsx
+++ b/canvas/src/components/tabs/SkillsTab.tsx
@@ -175,9 +175,9 @@ export function SkillsTab({ data }: Props) {
                   <div className="min-w-0">
                     <div className="flex items-center gap-2">
                       <span className="text-[11px] font-medium text-zinc-200">{p.name}</span>
-                      {p.version && <span className="text-[9px] text-zinc-600">v{p.version}</span>}
+                      {p.version && <span className="text-[10px] text-zinc-600">v{p.version}</span>}
                       {inert && (
-                        <span className="rounded-full border border-amber-700/50 bg-amber-950/30 px-1.5 py-0.5 text-[8px] text-amber-300">
+                        <span className="rounded-full border border-amber-700/50 bg-amber-950/30 px-1.5 py-0.5 text-[10px] text-amber-300">
                           inert on this runtime
                         </span>
                       )}
@@ -186,10 +186,10 @@ export function SkillsTab({ data }: Props) {
                     {p.skills && p.skills.length > 0 && (
                       <div className="mt-1 flex flex-wrap gap-1">
                         {p.skills.slice(0, 4).map((s) => (
-                          <span key={s} className="rounded-full bg-zinc-800/60 px-1.5 py-0.5 text-[8px] text-zinc-400">{s}</span>
+                          <span key={s} className="rounded-full bg-zinc-800/60 px-1.5 py-0.5 text-[10px] text-zinc-400">{s}</span>
                         ))}
                         {p.skills.length > 4 && (
-                          <span className="text-[8px] text-zinc-600">+{p.skills.length - 4}</span>
+                          <span className="text-[10px] text-zinc-600">+{p.skills.length - 4}</span>
                         )}
                       </div>
                     )}
@@ -197,7 +197,7 @@ export function SkillsTab({ data }: Props) {
                   <button
                     onClick={() => handleUninstall(p.name)}
                     disabled={uninstalling === p.name}
-                    className="shrink-0 rounded-full border border-red-800/40 bg-red-950/20 px-2 py-0.5 text-[9px] text-red-400 hover:bg-red-900/30 disabled:opacity-30"
+                    className="shrink-0 rounded-full border border-red-800/40 bg-red-950/20 px-2 py-0.5 text-[11px] text-red-400 hover:bg-red-900/30 disabled:opacity-30"
                   >
                     {uninstalling === p.name ? "..." : "Remove"}
                   </button>
@@ -213,7 +213,7 @@ export function SkillsTab({ data }: Props) {
             {/* Install from any source (github://, clawhub://, …) */}
             <div className="mb-3 rounded-lg border border-zinc-800/60 bg-zinc-950/40 p-2.5">
               <div className="flex items-center justify-between gap-2 mb-1.5">
-                <div className="text-[9px] uppercase tracking-[0.2em] text-zinc-600">
+                <div className="text-[10px] uppercase tracking-[0.2em] text-zinc-600">
                   Install from source
                 </div>
                 {sourceSchemes.length > 0 && (
@@ -221,7 +221,7 @@ export function SkillsTab({ data }: Props) {
                     {sourceSchemes.map((s) => (
                       <span
                         key={s}
-                        className="rounded-full border border-zinc-700/50 bg-zinc-900/50 px-1.5 py-0.5 text-[8px] text-zinc-500"
+                        className="rounded-full border border-zinc-700/50 bg-zinc-900/50 px-1.5 py-0.5 text-[10px] text-zinc-500"
                       >
                         {s}://
                       </span>
@@ -244,16 +244,16 @@ export function SkillsTab({ data }: Props) {
                 <button
                   onClick={handleInstallCustom}
                   disabled={!customSource.trim() || installing !== null}
-                  className="shrink-0 rounded-full border border-violet-700/50 bg-violet-950/30 px-2.5 py-1 text-[9px] text-violet-300 hover:bg-violet-900/40 disabled:opacity-30"
+                  className="shrink-0 rounded-full border border-violet-700/50 bg-violet-950/30 px-2.5 py-1 text-[11px] text-violet-300 hover:bg-violet-900/40 disabled:opacity-30"
                 >
                   {installing === customSource.trim() ? "Installing..." : "Install"}
                 </button>
               </div>
-              <div className="mt-1 text-[9px] text-zinc-600">
+              <div className="mt-1 text-[10px] text-zinc-600">
                 Local registry plugins below; paste any scheme URL above for GitHub or other sources.
               </div>
             </div>
-            <div className="text-[9px] uppercase tracking-[0.2em] text-zinc-600 mb-2">Available plugins</div>
+            <div className="text-[10px] uppercase tracking-[0.2em] text-zinc-600 mb-2">Available plugins</div>
             {registry.length === 0 ? (
               <div className="text-[10px] text-zinc-600">No plugins in registry</div>
             ) : (
@@ -265,31 +265,31 @@ export function SkillsTab({ data }: Props) {
                       <div className="min-w-0">
                         <div className="flex items-center gap-2">
                           <span className="text-[11px] text-zinc-300">{p.name}</span>
-                          {p.version && <span className="text-[9px] text-zinc-600">v{p.version}</span>}
+                          {p.version && <span className="text-[10px] text-zinc-600">v{p.version}</span>}
                         </div>
                         {p.description && <div className="text-[10px] text-zinc-500 truncate">{p.description}</div>}
                         {p.tags && p.tags.length > 0 && (
                           <div className="mt-1 flex flex-wrap gap-1">
                             {p.tags.map((t) => (
-                              <span key={t} className="rounded-full border border-zinc-700/40 px-1.5 py-0.5 text-[8px] text-zinc-500">{t}</span>
+                              <span key={t} className="rounded-full border border-zinc-700/40 px-1.5 py-0.5 text-[10px] text-zinc-500">{t}</span>
                             ))}
                           </div>
                         )}
                         {p.runtimes && p.runtimes.length > 0 && (
                           <div className="mt-1 flex flex-wrap gap-1">
                             {p.runtimes.map((r) => (
-                              <span key={r} className="rounded-full border border-blue-800/40 bg-blue-950/20 px-1.5 py-0.5 text-[8px] text-blue-300">{r}</span>
+                              <span key={r} className="rounded-full border border-blue-800/40 bg-blue-950/20 px-1.5 py-0.5 text-[10px] text-blue-300">{r}</span>
                             ))}
                           </div>
                         )}
                       </div>
                       {isInstalled ? (
-                        <span className="shrink-0 text-[9px] text-emerald-500">Installed</span>
+                        <span className="shrink-0 text-[10px] text-emerald-500">Installed</span>
                       ) : (
                         <button
                           onClick={() => handleInstall(p.name)}
                           disabled={installing === p.name}
-                          className="shrink-0 rounded-full border border-violet-700/50 bg-violet-950/30 px-2.5 py-0.5 text-[9px] text-violet-300 hover:bg-violet-900/40 disabled:opacity-30"
+                          className="shrink-0 rounded-full border border-violet-700/50 bg-violet-950/30 px-2.5 py-0.5 text-[11px] text-violet-300 hover:bg-violet-900/40 disabled:opacity-30"
                         >
                           {installing === p.name ? "Installing..." : "Install"}
                         </button>
diff --git a/canvas/src/components/tabs/config/secrets-section.tsx b/canvas/src/components/tabs/config/secrets-section.tsx
index e7c074b9..33b8ccbb 100644
--- a/canvas/src/components/tabs/config/secrets-section.tsx
+++ b/canvas/src/components/tabs/config/secrets-section.tsx
@@ -65,12 +65,12 @@ function SecretRow({ label, secretKey, isSet, scope, globalMode, onSave, onDelet
           </div>
         </div>
         <div className="flex items-center gap-2 shrink-0">
-          {isSet && <span className="text-[8px] text-green-500 bg-green-900/30 px-1.5 py-0.5 rounded">Set</span>}
+          {isSet && <span className="text-[10px] text-green-500 bg-green-900/30 px-1.5 py-0.5 rounded">Set</span>}
           {scope && <ScopeBadge scope={scope} />}
           {!editing && isSet && (globalMode || scope !== "global") && (
-            <button onClick={onDelete} className="text-[9px] text-red-400 hover:text-red-300">Remove</button>
+            <button onClick={onDelete} className="text-[11px] text-red-400 hover:text-red-300">Remove</button>
           )}
-          <button onClick={() => setEditing(!editing)} className="text-[9px] text-blue-400 hover:text-blue-300">
+          <button onClick={() => setEditing(!editing)} className="text-[11px] text-blue-400 hover:text-blue-300">
             {actionLabel()}
           </button>
         </div>
@@ -117,13 +117,13 @@ function CustomSecretRow({ secretKey, scope, globalMode, onSave, onDelete }: {
           <span className="text-[9px] font-mono text-zinc-500 tracking-widest ml-2">•••••</span>
         </div>
         <div className="flex items-center gap-2 shrink-0">
-          <span className="text-[8px] text-green-500">Set</span>
+          <span className="text-[10px] text-green-500">Set</span>
           {!globalMode && <ScopeBadge scope={scope} />}
           {canDelete && !editing && (
-            <button onClick={onDelete} className="text-[9px] text-red-400 hover:text-red-300">Remove</button>
+            <button onClick={onDelete} className="text-[11px] text-red-400 hover:text-red-300">Remove</button>
           )}
           {(canDelete || showOverride) && (
-            <button onClick={() => setEditing(!editing)} className="text-[9px] text-blue-400 hover:text-blue-300">
+            <button onClick={() => setEditing(!editing)} className="text-[11px] text-blue-400 hover:text-blue-300">
               {editing ? "Cancel" : showOverride ? "Override" : "Update"}
             </button>
           )}