Add feature label component

frontend/src/components/ui/FeatureLabel.tsx

@@ -0,0 +1,35 @@
+import type { FeatureMeta } from '../../types';
+import { InfoIcon } from './icons';
+
+interface FeatureLabelProps {
+  feature: FeatureMeta;
+  onShowInfo?: (feature: FeatureMeta) => void;
+  className?: string;
+  size?: 'xs' | 'sm';
+}
+
+export function FeatureLabel({
+  feature,
+  onShowInfo,
+  className = '',
+  size = 'xs',
+}: FeatureLabelProps) {
+  const textClass = size === 'sm' ? 'text-sm' : 'text-xs';
+
+  return (
+    <div className={`flex items-center gap-1 min-w-0 ${className}`}>
+      <span className={`${textClass} text-warm-700 dark:text-warm-300 truncate`}>
+        {feature.name}
+      </span>
+      {feature.detail && onShowInfo && (
+        <button
+          onClick={() => onShowInfo(feature)}
+          className="p-1 -m-0.5 rounded text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 hover:bg-warm-100 dark:hover:bg-warm-700 shrink-0"
+          title="Feature info"
+        >
+          <InfoIcon className="w-3.5 h-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/TabButton.tsx

@@ -5,7 +5,7 @@ interface TabButtonProps {
   onClick: () => void;
 }
 
-export function TabButton({ label, count, isActive, onClick }: TabButtonProps) {
+export function TabButton({ label, isActive, onClick }: TabButtonProps) {
   return (
     <button
       className={`flex-1 p-3 ${
@@ -16,7 +16,6 @@ export function TabButton({ label, count, isActive, onClick }: TabButtonProps) {
       onClick={onClick}
     >
       {label}
-      {count !== undefined && count > 0 && ` (${count})`}
     </button>
   );
 }