feat(webapp): AI agent logo experiments

apps/webapp/app/components/primitives/Buttons.tsx

@@ -97,6 +97,16 @@ const theme = {
       "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
     icon: "text-blue-500",
   },
+  // Reserved for the AI agent's "Ask AI" affordance: secondary styling with a
+  // softened trigger-green border.
+  "ask-ai": {
+    textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
+    button:
+      "bg-secondary border border-[#41FF54]/25 group-hover/button:bg-surface-control group-hover/button:border-[#41FF54]/40 group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
+    shortcut:
+      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
+    icon: "text-text-bright",
+  },
 };
 
 type Theme = keyof typeof theme;
@@ -112,6 +122,14 @@ function createVariant(sizeName: Size, themeName: Theme) {
   };
 }
 
+// The ask-ai button always leads with the square agent logo, so its padding is
+// tuned per size around it: small = 16px logo, 4px left / 6px right; medium
+// 32/16 -> 8px; large 40/20 -> 10px.
+function createAskAiVariant(sizeName: Size, opticalPadding: string) {
+  const base = createVariant(sizeName, "ask-ai");
+  return { ...base, button: cn(base.button, opticalPadding) };
+}
+
 const variant = {
   "primary/small": createVariant("small", "primary"),
   "primary/medium": createVariant("medium", "primary"),
@@ -137,6 +155,9 @@ const variant = {
   "docs/medium": createVariant("medium", "docs"),
   "docs/large": createVariant("large", "docs"),
   "docs/extra-large": createVariant("extra-large", "docs"),
+  "ask-ai/small": createAskAiVariant("small", "px-1 pr-1.5"),
+  "ask-ai/medium": createAskAiVariant("medium", "px-2"),
+  "ask-ai/large": createAskAiVariant("large", "px-2.5"),
   "menu-item": {
     textColor: "text-text-bright px-1",
     button: