fix(gui): replace question-mark help glyphs

Author: lidge-jun

docs-site/src/assets/dashboard.png

@@ -21,6 +21,7 @@ export const IconPlus = (p: P) => (<svg {...S(p)}><path d="M12 5v14M5 12h14"/></
 export const IconRefresh = (p: P) => (<svg {...S(p)}><path d="M21 12a9 9 0 0 1-9 9 9.8 9.8 0 0 1-6.7-2.7L3 16M3 21v-5h5M3 12a9 9 0 0 1 9-9 9.8 9.8 0 0 1 6.7 2.7L21 8M21 3v5h-5"/></svg>);
 export const IconTrash = (p: P) => (<svg {...S(p)}><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>);
 export const IconAlert = (p: P) => (<svg {...S(p)}><path d="M10.3 3.7 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4M12 17h.01"/></svg>);
+export const IconInfo = (p: P) => (<svg {...S(p)}><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>);
 export const IconSearch = (p: P) => (<svg {...S(p)}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>);
 export const IconArrowUp = (p: P) => (<svg {...S(p)}><path d="M12 19V5M5 12l7-7 7 7"/></svg>);
 export const IconArrowDown = (p: P) => (<svg {...S(p)}><path d="M12 5v14M19 12l-7 7-7-7"/></svg>);

gui/src/icons.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { formatUptime } from "../formatUptime";
-import { IconAlert, IconExternal, IconRefresh, IconX } from "../icons";
+import { IconAlert, IconExternal, IconInfo, IconRefresh, IconX } from "../icons";
 import { useI18n, Trans } from "../i18n";
 import { formatTokens } from "../format-tokens";
 import { EmptyState, Select } from "../ui";
@@ -377,10 +377,13 @@ export default function Dashboard({ apiBase }: { apiBase: string }) {
             <button
               type="button"
               className="btn btn-ghost btn-sm"
-              style={{ width: 18, height: 18, padding: 0, borderRadius: 999, fontSize: 11, fontWeight: 700, color: "var(--muted)", lineHeight: 1 }}
+              style={{ width: 24, height: 24, minWidth: 24, flex: "0 0 24px", padding: 0, borderRadius: 999, color: "var(--muted)" }}
               onClick={() => setMaHelpOpen(true)}
-              aria-label="Help"
-            >?</button>
+              aria-label={t("dash.multiAgent")}
+              aria-haspopup="dialog"
+            >
+              <IconInfo width={14} height={14} aria-hidden="true" />
+            </button>
           </div>
           <div className="value" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
             <div role="radiogroup" aria-label={t("dash.multiAgent")} style={{ display: "inline-flex", borderRadius: 999, background: "var(--surface-soft, var(--raised))", padding: 3, gap: 2 }}>

gui/src/pages/Dashboard.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Switch, Notice, EmptyState, Select } from "../ui";
-import { IconChevron, IconBoxes } from "../icons";
+import { IconChevron, IconBoxes, IconInfo } from "../icons";
 import { useT } from "../i18n";
 import { modelLabel } from "../model-display";
 
@@ -361,10 +361,13 @@ export default function Models({ apiBase }: { apiBase: string }) {
           <button
             type="button"
             className="btn btn-ghost btn-sm"
-            style={{ width: 22, height: 22, padding: 0, borderRadius: 999, fontSize: 12, fontWeight: 700, color: "var(--muted)" }}
+            style={{ width: 24, height: 24, minWidth: 24, flex: "0 0 24px", padding: 0, borderRadius: 999, color: "var(--muted)" }}
             onClick={() => setV2HelpOpen(true)}
-            aria-label="Help"
-          >?</button>
+            aria-label={t("models.v2Label")}
+            aria-haspopup="dialog"
+          >
+            <IconInfo width={14} height={14} aria-hidden="true" />
+          </button>
           {v2.enabled && (
             <>
               <span className="muted" style={{ fontSize: 13, marginLeft: 8 }}>{t("models.v2ThreadsLabel")}</span>