feat: Add Step Library core UI components (Phase 2: B.4-B.6)

Implements browsable step library interface:

Task B.4 - StepCard Component:
- Card layout displaying step metadata
- Step type badge (decision/action/solution) with icons
- Category name and tags (max 3 visible + overflow)
- Star rating display with count
- Author, date, and usage count
- Preview and Insert action buttons
- Featured badge for highlighted steps

Task B.5 - StepDetailModal:
- Full-screen modal with scrollable content
- Complete step details: title, type, category, tags
- Markdown-rendered instructions and help text
- Copyable command blocks with visual feedback
- Rating breakdown with star display
- Top 3 reviews with verified use badges
- Author and metadata display
- Insert Into Session and Cancel actions

Task B.6 - StepLibraryBrowser:
- Comprehensive search with debounced full-text query
- Filter controls: category, type, min rating, sort by
- Popular tags as clickable filter chips
- Grouped sections: My Steps, Team Steps, Community
- Collapsible sections with counts
- Empty states and loading skeletons
- Integrated preview modal
- Optional Create New Step button
- Clear filters functionality

All components follow existing design patterns.
Dark mode support via Tailwind classes.
Build tested successfully.

Related: Issue #10

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

frontend/src/components/step-library/StepCard.tsx

@@ -0,0 +1,144 @@
+import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { StepListItem } from '@/types/step'
+
+interface StepCardProps {
+  step: StepListItem
+  onPreview: (step: StepListItem) => void
+  onInsert: (step: StepListItem) => void
+}
+
+const stepTypeIcons = {
+  decision: HelpCircle,
+  action: Zap,
+  solution: CheckCircle
+}
+
+const stepTypeColors = {
+  decision: 'bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30',
+  action: 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400 border-yellow-500/30',
+  solution: 'bg-green-500/20 text-green-600 dark:text-green-400 border-green-500/30'
+}
+
+export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
+  const Icon = stepTypeIcons[step.step_type as keyof typeof stepTypeIcons] || HelpCircle
+  const hasRating = step.rating_count > 0
+  const visibleTags = step.tags.slice(0, 3)
+  const remainingTags = step.tags.length - 3
+
+  return (
+    <div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
+      {/* Header */}
+      <div className="mb-3 flex items-start justify-between gap-2">
+        <div className="flex-1">
+          <div className="mb-1.5 flex items-center gap-2">
+            {/* Step Type Badge */}
+            <span
+              className={cn(
+                'flex items-center gap-1 rounded border px-2 py-0.5 text-xs font-medium',
+                stepTypeColors[step.step_type as keyof typeof stepTypeColors]
+              )}
+            >
+              <Icon className="h-3 w-3" />
+              {step.step_type}
+            </span>
+
+            {/* Featured Badge */}
+            {step.is_featured && (
+              <span className="rounded bg-amber-500/20 px-2 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400">
+                Featured
+              </span>
+            )}
+          </div>
+
+          {/* Title */}
+          <h3 className="font-semibold text-foreground line-clamp-2">{step.title}</h3>
+        </div>
+      </div>
+
+      {/* Metadata */}
+      <div className="mb-3 space-y-1.5 text-sm text-muted-foreground">
+        {/* Category */}
+        {step.category_name && (
+          <div className="flex items-center gap-1.5">
+            <span className="text-xs">📁</span>
+            <span className="truncate">{step.category_name}</span>
+          </div>
+        )}
+
+        {/* Rating */}
+        <div className="flex items-center gap-1.5">
+          <Star className="h-3.5 w-3.5" />
+          {hasRating ? (
+            <span>
+              {step.rating_average.toFixed(1)} ({step.rating_count} {step.rating_count === 1 ? 'rating' : 'ratings'})
+            </span>
+          ) : (
+            <span className="italic">Not rated</span>
+          )}
+        </div>
+
+        {/* Usage Count */}
+        <div className="flex items-center gap-1.5">
+          <TrendingUp className="h-3.5 w-3.5" />
+          <span>Used {step.usage_count} {step.usage_count === 1 ? 'time' : 'times'}</span>
+        </div>
+
+        {/* Author & Date */}
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5">
+            <User className="h-3.5 w-3.5" />
+            <span className="truncate">{step.author_name || 'Unknown'}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Calendar className="h-3.5 w-3.5" />
+            <span>{new Date(step.created_at).toLocaleDateString()}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Tags */}
+      {step.tags.length > 0 && (
+        <div className="mb-3 flex flex-wrap gap-1.5">
+          {visibleTags.map(tag => (
+            <span
+              key={tag}
+              className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+            >
+              {tag}
+            </span>
+          ))}
+          {remainingTags > 0 && (
+            <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+              +{remainingTags} more
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex gap-2">
+        <button
+          onClick={() => onPreview(step)}
+          className={cn(
+            'flex flex-1 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium',
+            'hover:bg-accent hover:text-accent-foreground transition-colors'
+          )}
+        >
+          <Eye className="h-4 w-4" />
+          Preview
+        </button>
+        <button
+          onClick={() => onInsert(step)}
+          className={cn(
+            'flex flex-1 items-center justify-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground',
+            'hover:bg-primary/90 transition-colors'
+          )}
+        >
+          <Plus className="h-4 w-4" />
+          Insert
+        </button>
+      </div>
+    </div>
+  )
+}