refactor: extract MobileTabs shared component, replace in all 8 tools

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/ui/code-snippet.tsx

@@ -29,7 +29,7 @@ export function CodeSnippet({ code, maxHeight }: CodeSnippetProps) {
         {copied ? 'Copied' : 'Copy'}
       </button>
       <pre
-        className="p-4 overflow-x-auto font-mono text-[11px] text-white/55 leading-relaxed scrollbar-thin"
+        className="p-4 overflow-x-auto font-mono text-[11px] text-white/55 leading-relaxed"
         style={maxHeight ? { maxHeight, overflowY: 'auto' } : undefined}
       >
         <code>{code}</code>

components/ui/mobile-tabs.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils/cn';
+
+interface Tab {
+  value: string;
+  label: string;
+}
+
+interface MobileTabsProps {
+  tabs: Tab[];
+  active: string;
+  onChange: (value: string) => void;
+}
+
+export function MobileTabs({ tabs, active, onChange }: MobileTabsProps) {
+  return (
+    <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+      {tabs.map(({ value, label }) => (
+        <button
+          key={value}
+          onClick={() => onChange(value)}
+          className={cn(
+            'flex-1 py-2.5 rounded-lg text-sm font-medium transition-all',
+            active === value
+              ? 'bg-primary text-primary-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}