feat: implement My Trees, admin UI, rating modal, and bundle optimization (Issues #15, #18, #19, #31)

Frontend features:
- My Trees personal dashboard with fork tracking (Issue #15)
- Tree sharing UI with token generation and copy (Issue #16)
- Draft tree badges and validation UI (Issue #25)
- Save session as tree modal (Issue #17)
- Rate/review modal with localStorage tracking (Issue #19)
- Admin category management with drag-and-drop (Issue #18)
- Bundle size optimization with code splitting (Issue #31)

Components created:
- MyTreesPage: Personal tree organization
- AdminCategoriesPage: Category CRUD with @dnd-kit
- ShareTreeModal: Tree sharing interface
- SaveSessionAsTreeModal: Session conversion UI
- StepRatingModal: Post-session rating with stars
- StarRating: Reusable rating component
- PageLoader: Loading fallback for lazy routes
- CreateCategoryModal, EditCategoryModal: Admin modals

Bundle optimization:
- Reduced from 892 KB to 221 KB (75% reduction)
- Dynamic imports for 9 heavy pages
- Vendor chunk splitting for optimal caching
- 6 separate vendor chunks (react, markdown, utils, dnd, icons, state)

Dependencies added:
- @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities

API clients:
- stepCategories: Full CRUD for admin
- Enhanced sessions: saveAsTree endpoint
- Enhanced trees: share, fork, canPublish endpoints

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

frontend/src/components/admin/CategoryRow.tsx

@@ -0,0 +1,116 @@
+import { GripVertical, Edit, Archive, RotateCcw } from 'lucide-react'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { cn } from '@/lib/utils'
+import type { StepCategoryListItem } from '@/types'
+
+interface CategoryRowProps {
+  category: StepCategoryListItem
+  stepCount: number
+  onEdit: (category: StepCategoryListItem) => void
+  onArchive: (id: string) => void
+  onRestore: (id: string) => void
+}
+
+export function CategoryRow({
+  category,
+  stepCount,
+  onEdit,
+  onArchive,
+  onRestore
+}: CategoryRowProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: category.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'flex items-center gap-3 rounded-lg border border-border bg-card p-4',
+        isDragging && 'opacity-50'
+      )}
+    >
+      {/* Drag Handle */}
+      <button
+        type="button"
+        {...attributes}
+        {...listeners}
+        className="cursor-grab touch-none text-muted-foreground hover:text-foreground active:cursor-grabbing"
+        aria-label="Drag to reorder"
+      >
+        <GripVertical className="h-5 w-5" />
+      </button>
+
+      {/* Category Info */}
+      <div className="flex-1">
+        <div className="flex items-center gap-2">
+          <h3 className="font-medium text-foreground">{category.name}</h3>
+          {!category.is_active && (
+            <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+              Archived
+            </span>
+          )}
+        </div>
+        {category.description && (
+          <p className="mt-1 text-sm text-muted-foreground">{category.description}</p>
+        )}
+        <p className="mt-1 text-xs text-muted-foreground">
+          {stepCount} step{stepCount !== 1 ? 's' : ''}
+        </p>
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => onEdit(category)}
+          className={cn(
+            'rounded-md border border-input bg-background p-2 text-muted-foreground',
+            'hover:bg-accent hover:text-accent-foreground'
+          )}
+          title="Edit category"
+        >
+          <Edit className="h-4 w-4" />
+        </button>
+
+        {category.is_active ? (
+          <button
+            type="button"
+            onClick={() => onArchive(category.id)}
+            className={cn(
+              'rounded-md border border-input bg-background p-2 text-muted-foreground',
+              'hover:bg-accent hover:text-accent-foreground'
+            )}
+            title="Archive category"
+          >
+            <Archive className="h-4 w-4" />
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={() => onRestore(category.id)}
+            className={cn(
+              'rounded-md border border-input bg-background p-2 text-muted-foreground',
+              'hover:bg-accent hover:text-accent-foreground'
+            )}
+            title="Restore category"
+          >
+            <RotateCcw className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/admin/CreateCategoryModal.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface CreateCategoryModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: (data: { name: string; description: string }) => Promise<void>
+  isSaving?: boolean
+}
+
+export function CreateCategoryModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isSaving = false
+}: CreateCategoryModalProps) {
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [error, setError] = useState('')
+
+  if (!isOpen) return null
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+
+    if (!name.trim()) {
+      setError('Category name is required')
+      return
+    }
+
+    if (name.length > 100) {
+      setError('Category name must be 100 characters or less')
+      return
+    }
+
+    try {
+      await onSubmit({
+        name: name.trim(),
+        description: description.trim()
+      })
+      // Reset form on success
+      setName('')
+      setDescription('')
+    } catch (err) {
+      setError('Failed to create category')
+    }
+  }
+
+  const handleClose = () => {
+    if (!isSaving) {
+      setName('')
+      setDescription('')
+      setError('')
+      onClose()
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
+        {/* Header */}
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-foreground">Create Category</h2>
+          <button
+            onClick={handleClose}
+            disabled={isSaving}
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Error Message */}
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          {/* Name Field */}
+          <div>
+            <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
+              Category Name <span className="text-destructive">*</span>
+            </label>
+            <input
+              id="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              disabled={isSaving}
+              maxLength={100}
+              placeholder="e.g., Network Troubleshooting"
+              required
+              className={cn(
+                'w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                'disabled:opacity-50'
+              )}
+            />
+            <p className="mt-1 text-xs text-muted-foreground">
+              {name.length}/100 characters
+            </p>
+          </div>
+
+          {/* Description Field */}
+          <div>
+            <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
+            </label>
+            <textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              disabled={isSaving}
+              rows={3}
+              placeholder="Brief description of this category..."
+              className={cn(
+                'w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                'disabled:opacity-50'
+              )}
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={handleClose}
+              disabled={isSaving}
+              className={cn(
+                'rounded-md border border-input bg-background px-4 py-2 text-sm font-medium',
+                'hover:bg-accent hover:text-accent-foreground disabled:opacity-50'
+              )}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSaving || !name.trim()}
+              className={cn(
+                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+                'hover:bg-primary/90 disabled:opacity-50'
+              )}
+            >
+              {isSaving ? 'Creating...' : 'Create Category'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

frontend/src/components/admin/EditCategoryModal.tsx

@@ -0,0 +1,165 @@
+import { useState, useEffect } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { StepCategoryListItem } from '@/types'
+
+interface EditCategoryModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: (data: { name: string; description: string }) => Promise<void>
+  category: StepCategoryListItem | null
+  isSaving?: boolean
+}
+
+export function EditCategoryModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  category,
+  isSaving = false
+}: EditCategoryModalProps) {
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [error, setError] = useState('')
+
+  // Pre-populate form when category changes
+  useEffect(() => {
+    if (category) {
+      setName(category.name)
+      setDescription(category.description || '')
+    }
+  }, [category])
+
+  if (!isOpen || !category) return null
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+
+    if (!name.trim()) {
+      setError('Category name is required')
+      return
+    }
+
+    if (name.length > 100) {
+      setError('Category name must be 100 characters or less')
+      return
+    }
+
+    try {
+      await onSubmit({
+        name: name.trim(),
+        description: description.trim()
+      })
+    } catch (err) {
+      setError('Failed to update category')
+    }
+  }
+
+  const handleClose = () => {
+    if (!isSaving) {
+      setError('')
+      onClose()
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
+        {/* Header */}
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-foreground">Edit Category</h2>
+          <button
+            onClick={handleClose}
+            disabled={isSaving}
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Error Message */}
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          {/* Name Field */}
+          <div>
+            <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
+              Category Name <span className="text-destructive">*</span>
+            </label>
+            <input
+              id="edit-name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              disabled={isSaving}
+              maxLength={100}
+              placeholder="e.g., Network Troubleshooting"
+              required
+              className={cn(
+                'w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                'disabled:opacity-50'
+              )}
+            />
+            <p className="mt-1 text-xs text-muted-foreground">
+              {name.length}/100 characters
+            </p>
+          </div>
+
+          {/* Description Field */}
+          <div>
+            <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
+            </label>
+            <textarea
+              id="edit-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              disabled={isSaving}
+              rows={3}
+              placeholder="Brief description of this category..."
+              className={cn(
+                'w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                'disabled:opacity-50'
+              )}
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={handleClose}
+              disabled={isSaving}
+              className={cn(
+                'rounded-md border border-input bg-background px-4 py-2 text-sm font-medium',
+                'hover:bg-accent hover:text-accent-foreground disabled:opacity-50'
+              )}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSaving || !name.trim()}
+              className={cn(
+                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+                'hover:bg-primary/90 disabled:opacity-50'
+              )}
+            >
+              {isSaving ? 'Saving...' : 'Save Changes'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

frontend/src/components/common/PageLoader.tsx

@@ -0,0 +1,12 @@
+export function PageLoader() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-4">
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        <p className="text-sm text-muted-foreground">Loading...</p>
+      </div>
+    </div>
+  )
+}
+
+export default PageLoader

frontend/src/components/common/StarRating.tsx

@@ -0,0 +1,64 @@
+import { Star } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface StarRatingProps {
+  value: number
+  onChange?: (value: number) => void
+  readonly?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  showCount?: boolean
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6'
+}
+
+export function StarRating({
+  value,
+  onChange,
+  readonly = false,
+  size = 'md',
+  showCount = false
+}: StarRatingProps) {
+  const handleClick = (rating: number) => {
+    if (!readonly && onChange) {
+      onChange(rating)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      {[1, 2, 3, 4, 5].map((star) => (
+        <button
+          key={star}
+          type="button"
+          onClick={() => handleClick(star)}
+          disabled={readonly}
+          className={cn(
+            'transition-colors',
+            !readonly && 'hover:scale-110 cursor-pointer',
+            readonly && 'cursor-default'
+          )}
+          aria-label={`${star} star${star !== 1 ? 's' : ''}`}
+        >
+          <Star
+            className={cn(
+              sizeClasses[size],
+              star <= value
+                ? 'fill-yellow-400 text-yellow-400'
+                : 'fill-none text-muted-foreground',
+              !readonly && 'hover:text-yellow-300'
+            )}
+          />
+        </button>
+      ))}
+      {showCount && (
+        <span className="ml-1 text-sm text-muted-foreground">
+          ({value}/5)
+        </span>
+      )}
+    </div>
+  )
+}

frontend/src/components/layout/AppLayout.tsx

@@ -12,7 +12,7 @@ export function AppLayout() {
   const location = useLocation()
   const navigate = useNavigate()
   const { user, logout } = useAuthStore()
-  const { effectiveRole } = usePermissions()
+  const { effectiveRole, isSuperAdmin } = usePermissions()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   const handleLogout = async () => {
@@ -48,9 +48,11 @@ export function AppLayout() {
 
   const navItems = [
     { path: '/trees', label: 'Trees' },
+    { path: '/my-trees', label: 'My Trees' },
     { path: '/sessions', label: 'Sessions' },
     { path: '/account', label: 'Account' },
     { path: '/settings', label: 'Settings' },
+    ...(isSuperAdmin ? [{ path: '/admin/categories', label: 'Admin: Categories' }] : []),
   ]
 
   return (

frontend/src/components/library/ShareTreeModal.tsx

@@ -0,0 +1,279 @@
+import { useState, useEffect } from 'react'
+import { X, Copy, Check, Link2, Users, Lock, Globe } from 'lucide-react'
+import type { TreeListItem, TreeShare, TreeVisibility } from '@/types'
+import { treesApi } from '@/api'
+import { cn } from '@/lib/utils'
+import { toast } from '@/lib/toast'
+
+interface ShareTreeModalProps {
+  tree: TreeListItem
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [shares, setShares] = useState<TreeShare[]>([])
+  const [activeShare, setActiveShare] = useState<TreeShare | null>(null)
+  const [copied, setCopied] = useState(false)
+  const [allowForking, setAllowForking] = useState(true)
+  const [visibility, setVisibility] = useState<TreeVisibility>('private')
+
+  useEffect(() => {
+    if (isOpen) {
+      loadShares()
+      // Reset state
+      setCopied(false)
+      setAllowForking(true)
+    }
+  }, [isOpen, tree.id])
+
+  const loadShares = async () => {
+    try {
+      const sharesData = await treesApi.listShares(tree.id)
+      setShares(sharesData)
+      // Set active share to most recent
+      if (sharesData.length > 0) {
+        setActiveShare(sharesData[0])
+      }
+    } catch (err) {
+      console.error('Failed to load shares:', err)
+    }
+  }
+
+  const handleGenerateLink = async () => {
+    setIsGenerating(true)
+    try {
+      const newShare = await treesApi.createShare(tree.id, {
+        allow_forking: allowForking,
+      })
+      setShares([newShare, ...shares])
+      setActiveShare(newShare)
+      toast.success('Share link generated')
+    } catch (err) {
+      console.error('Failed to generate share link:', err)
+      toast.error('Failed to generate share link')
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  const handleCopyLink = async () => {
+    if (!activeShare) return
+    try {
+      await navigator.clipboard.writeText(activeShare.share_url)
+      setCopied(true)
+      toast.success('Link copied to clipboard')
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy link:', err)
+      toast.error('Failed to copy link')
+    }
+  }
+
+  const handleVisibilityChange = async (newVisibility: TreeVisibility) => {
+    try {
+      await treesApi.updateVisibility(tree.id, { visibility: newVisibility })
+      setVisibility(newVisibility)
+      toast.success('Visibility updated')
+    } catch (err) {
+      console.error('Failed to update visibility:', err)
+      toast.error('Failed to update visibility')
+    }
+  }
+
+  const getVisibilityIcon = (level: TreeVisibility) => {
+    switch (level) {
+      case 'private':
+        return <Lock className="h-4 w-4" />
+      case 'team':
+        return <Users className="h-4 w-4" />
+      case 'link':
+        return <Link2 className="h-4 w-4" />
+      case 'public':
+        return <Globe className="h-4 w-4" />
+    }
+  }
+
+  const getVisibilityDescription = (level: TreeVisibility) => {
+    switch (level) {
+      case 'private':
+        return 'Only you can access'
+      case 'team':
+        return 'Team members can access'
+      case 'link':
+        return 'Anyone with the link'
+      case 'public':
+        return 'Discoverable by everyone'
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-lg rounded-lg border border-border bg-card shadow-lg">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
+          <h2 className="text-lg font-semibold text-card-foreground">Share Tree</h2>
+          <button
+            onClick={onClose}
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-6 py-4 space-y-6">
+          {/* Tree Info */}
+          <div>
+            <h3 className="font-medium text-card-foreground">{tree.name}</h3>
+            {tree.description && (
+              <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+                {tree.description}
+              </p>
+            )}
+          </div>
+
+          {/* Visibility Settings */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-card-foreground">
+              Visibility
+            </label>
+            <div className="space-y-2">
+              {(['private', 'team', 'link', 'public'] as TreeVisibility[]).map((level) => (
+                <button
+                  key={level}
+                  onClick={() => handleVisibilityChange(level)}
+                  className={cn(
+                    'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
+                    visibility === level
+                      ? 'border-primary bg-primary/5 text-card-foreground'
+                      : 'border-border bg-background text-muted-foreground hover:border-primary/50 hover:bg-accent'
+                  )}
+                >
+                  {getVisibilityIcon(level)}
+                  <div className="flex-1">
+                    <div className="text-sm font-medium capitalize">{level}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {getVisibilityDescription(level)}
+                    </div>
+                  </div>
+                  {visibility === level && (
+                    <div className="h-2 w-2 rounded-full bg-primary" />
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Share Link Generation */}
+          {visibility !== 'private' && (
+            <div>
+              <label className="mb-2 block text-sm font-medium text-card-foreground">
+                Share Link
+              </label>
+
+              {/* Allow Forking Checkbox */}
+              <div className="mb-3 flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="allow-forking"
+                  checked={allowForking}
+                  onChange={(e) => setAllowForking(e.target.checked)}
+                  className="h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2"
+                />
+                <label
+                  htmlFor="allow-forking"
+                  className="text-sm text-muted-foreground cursor-pointer"
+                >
+                  Allow recipients to fork this tree
+                </label>
+              </div>
+
+              {/* Generate Button */}
+              {!activeShare && (
+                <button
+                  onClick={handleGenerateLink}
+                  disabled={isGenerating}
+                  className={cn(
+                    'w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+                    'hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed'
+                  )}
+                >
+                  {isGenerating ? 'Generating...' : 'Generate Share Link'}
+                </button>
+              )}
+
+              {/* Active Share Link */}
+              {activeShare && (
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2 rounded-md border border-border bg-background p-3">
+                    <input
+                      type="text"
+                      value={activeShare.share_url}
+                      readOnly
+                      className="flex-1 bg-transparent text-sm text-foreground outline-none"
+                    />
+                    <button
+                      onClick={handleCopyLink}
+                      className={cn(
+                        'flex items-center gap-2 rounded-md border border-input px-3 py-1.5 text-sm font-medium transition-colors',
+                        copied
+                          ? 'border-green-500 bg-green-500/10 text-green-600'
+                          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                      )}
+                    >
+                      {copied ? (
+                        <>
+                          <Check className="h-4 w-4" />
+                          Copied
+                        </>
+                      ) : (
+                        <>
+                          <Copy className="h-4 w-4" />
+                          Copy
+                        </>
+                      )}
+                    </button>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {activeShare.allow_forking
+                      ? 'Recipients can fork this tree'
+                      : 'Forking disabled for this share'}
+                  </p>
+                  {shares.length > 1 && (
+                    <p className="text-xs text-muted-foreground">
+                      {shares.length} active share links
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
+          <button
+            onClick={onClose}
+            className={cn(
+              'rounded-md border border-input px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-accent-foreground'
+            )}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/library/TreeGridView.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, Trash2 } from 'lucide-react'
+import { Pencil, Globe, Lock, Trash2, GitBranch, FileText } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { AddToFolderMenu } from './AddToFolderMenu'
@@ -12,6 +12,7 @@ interface TreeGridViewProps {
   onTagClick: (tag: string) => void
   onFolderCreated: (parentId?: string | null) => void
   onDeleteTree: (tree: TreeListItem) => void
+  onForkTree?: (treeId: string) => void
 }
 
 export function TreeGridView({
@@ -20,6 +21,7 @@ export function TreeGridView({
   onTagClick,
   onFolderCreated,
   onDeleteTree,
+  onForkTree,
 }: TreeGridViewProps) {
   const { canEditTree, canDeleteTree } = usePermissions()
 
@@ -31,7 +33,15 @@ export function TreeGridView({
           className="rounded-lg border border-border bg-card p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
         >
           <div className="mb-2 flex items-start justify-between gap-2">
-            <h3 className="font-semibold text-card-foreground">{tree.name}</h3>
+            <div className="flex items-center gap-2">
+              <h3 className="font-semibold text-card-foreground">{tree.name}</h3>
+              {tree.status === 'draft' && (
+                <span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+                  <FileText className="h-3 w-3" />
+                  Draft
+                </span>
+              )}
+            </div>
             <div className="flex items-center gap-2">
               {tree.is_public ? (
                 <span title="Public tree">
@@ -66,6 +76,19 @@ export function TreeGridView({
             </span>
             <div className="flex items-center gap-2">
               <AddToFolderMenu treeId={tree.id} onFolderCreated={onFolderCreated} />
+              {onForkTree && (
+                <button
+                  type="button"
+                  onClick={() => onForkTree(tree.id)}
+                  className={cn(
+                    'rounded-md border border-input p-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-accent-foreground'
+                  )}
+                  title="Fork tree"
+                >
+                  <GitBranch className="h-4 w-4" />
+                </button>
+              )}
               {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                 <Link
                   to={`/trees/${tree.id}/edit`}

frontend/src/components/library/TreeListView.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock } from 'lucide-react'
+import { Pencil, Globe, Lock, GitBranch, FileText } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { AddToFolderMenu } from './AddToFolderMenu'
@@ -12,6 +12,7 @@ interface TreeListViewProps {
   onTagClick: (tag: string) => void
   onFolderCreated: (parentId?: string | null) => void
   onDeleteTree: (tree: TreeListItem) => void
+  onForkTree?: (treeId: string) => void
 }
 
 export function TreeListView({
@@ -19,6 +20,7 @@ export function TreeListView({
   onStartSession,
   onTagClick,
   onFolderCreated,
+  onForkTree,
 }: TreeListViewProps) {
   const { canEditTree } = usePermissions()
 
@@ -33,6 +35,12 @@ export function TreeListView({
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
               <h3 className="font-semibold text-card-foreground truncate">{tree.name}</h3>
+              {tree.status === 'draft' && (
+                <span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 flex-shrink-0">
+                  <FileText className="h-3 w-3" />
+                  Draft
+                </span>
+              )}
               {tree.is_public ? (
                 <span title="Public tree">
                   <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
@@ -71,6 +79,19 @@ export function TreeListView({
 
             <div className="flex items-center gap-2">
               <AddToFolderMenu treeId={tree.id} onFolderCreated={onFolderCreated} />
+              {onForkTree && (
+                <button
+                  type="button"
+                  onClick={() => onForkTree(tree.id)}
+                  className={cn(
+                    'rounded-md border border-input p-1.5 text-muted-foreground',
+                    'hover:bg-accent hover:text-accent-foreground'
+                  )}
+                  title="Fork tree"
+                >
+                  <GitBranch className="h-4 w-4" />
+                </button>
+              )}
               {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                 <Link
                   to={`/trees/${tree.id}/edit`}

frontend/src/components/library/TreeTableView.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, ChevronUp, ChevronDown } from 'lucide-react'
+import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { AddToFolderMenu } from './AddToFolderMenu'
@@ -14,6 +14,7 @@ interface TreeTableViewProps {
   onFolderCreated: (parentId?: string | null) => void
   onDeleteTree: (tree: TreeListItem) => void
   onSortChange?: (sortBy: string) => void
+  onForkTree?: (treeId: string) => void
 }
 
 type SortColumn = 'name' | 'category' | 'version' | 'usage' | 'updated'
@@ -24,6 +25,7 @@ export function TreeTableView({
   onTagClick,
   onFolderCreated,
   onSortChange,
+  onForkTree,
 }: TreeTableViewProps) {
   const { canEditTree } = usePermissions()
   const [sortColumn, setSortColumn] = useState<SortColumn | null>(null)
@@ -135,6 +137,12 @@ export function TreeTableView({
                   <span className="font-medium text-card-foreground truncate max-w-[200px]">
                     {tree.name}
                   </span>
+                  {tree.status === 'draft' && (
+                    <span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 flex-shrink-0">
+                      <FileText className="h-3 w-3" />
+                      Draft
+                    </span>
+                  )}
                   {tree.is_public ? (
                     <span title="Public tree">
                       <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
@@ -175,6 +183,19 @@ export function TreeTableView({
               <td className="px-4 py-3">
                 <div className="flex items-center justify-end gap-2">
                   <AddToFolderMenu treeId={tree.id} onFolderCreated={onFolderCreated} />
+                  {onForkTree && (
+                    <button
+                      type="button"
+                      onClick={() => onForkTree(tree.id)}
+                      className={cn(
+                        'rounded-md border border-input p-1.5 text-muted-foreground',
+                        'hover:bg-accent hover:text-accent-foreground'
+                      )}
+                      title="Fork tree"
+                    >
+                      <GitBranch className="h-3.5 w-3.5" />
+                    </button>
+                  )}
                   {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                     <Link
                       to={`/trees/${tree.id}/edit`}

frontend/src/components/session/SaveSessionAsTreeModal.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface SaveSessionAsTreeModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: { tree_name?: string; description?: string; status: 'draft' | 'published' }) => Promise<void>
+  defaultTreeName?: string
+  isSaving?: boolean
+}
+
+export function SaveSessionAsTreeModal({
+  isOpen,
+  onClose,
+  onSave,
+  defaultTreeName,
+  isSaving = false
+}: SaveSessionAsTreeModalProps) {
+  const [treeName, setTreeName] = useState(defaultTreeName || '')
+  const [description, setDescription] = useState('')
+  const [status, setStatus] = useState<'draft' | 'published'>('draft')
+
+  if (!isOpen) return null
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await onSave({
+      tree_name: treeName.trim() || undefined,
+      description: description.trim() || undefined,
+      status
+    })
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+      <div className="w-full max-w-lg rounded-lg border border-border bg-card p-6 shadow-lg">
+        {/* Header */}
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-foreground">Save Session as Tree</h2>
+          <button
+            onClick={onClose}
+            disabled={isSaving}
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Info */}
+        <p className="mb-4 text-sm text-muted-foreground">
+          Create a new tree from this session's path. The tree will be linked to the original tree as a fork.
+        </p>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Tree Name */}
+          <div>
+            <label htmlFor="treeName" className="mb-1 block text-sm font-medium text-foreground">
+              Tree Name <span className="text-muted-foreground">(optional)</span>
+            </label>
+            <input
+              id="treeName"
+              type="text"
+              value={treeName}
+              onChange={(e) => setTreeName(e.target.value)}
+              placeholder={defaultTreeName || "Auto-generated if left blank"}
+              disabled={isSaving}
+              maxLength={255}
+              className={cn(
+                'w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                'disabled:opacity-50'
+              )}
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
+            </label>
+            <textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Add a description for this tree"
+              disabled={isSaving}
+              rows={3}
+              className={cn(
+                'w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                'disabled:opacity-50'
+              )}
+            />
+          </div>
+
+          {/* Status */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-foreground">Status</label>
+            <div className="flex gap-4">
+              <label className="flex cursor-pointer items-center gap-2">
+                <input
+                  type="radio"
+                  name="status"
+                  value="draft"
+                  checked={status === 'draft'}
+                  onChange={() => setStatus('draft')}
+                  disabled={isSaving}
+                  className="h-4 w-4 border-input text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2"
+                />
+                <span className="text-sm text-foreground">Draft</span>
+              </label>
+              <label className="flex cursor-pointer items-center gap-2">
+                <input
+                  type="radio"
+                  name="status"
+                  value="published"
+                  checked={status === 'published'}
+                  onChange={() => setStatus('published')}
+                  disabled={isSaving}
+                  className="h-4 w-4 border-input text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2"
+                />
+                <span className="text-sm text-foreground">Published</span>
+              </label>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isSaving}
+              className={cn(
+                'rounded-md border border-input bg-background px-4 py-2 text-sm font-medium',
+                'hover:bg-accent hover:text-accent-foreground disabled:opacity-50'
+              )}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSaving}
+              className={cn(
+                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+                'hover:bg-primary/90 disabled:opacity-50'
+              )}
+            >
+              {isSaving ? 'Saving...' : 'Save as Tree'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

frontend/src/components/session/StepRatingModal.tsx

@@ -0,0 +1,219 @@
+import { useState } from 'react'
+import { X, ThumbsUp, ThumbsDown } from 'lucide-react'
+import { StarRating } from '@/components/common/StarRating'
+import { cn } from '@/lib/utils'
+import type { Step } from '@/types'
+
+interface StepRatingData {
+  rating: number
+  helpful: boolean | null
+  review: string
+}
+
+interface StepRatingModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: (ratings: Map<string, StepRatingData>) => Promise<void>
+  librarySteps: Step[]
+  isSaving?: boolean
+}
+
+export function StepRatingModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  librarySteps,
+  isSaving = false
+}: StepRatingModalProps) {
+  // Store ratings for each step
+  const [ratings, setRatings] = useState<Map<string, StepRatingData>>(new Map())
+
+  if (!isOpen) return null
+
+  const handleRatingChange = (stepId: string, rating: number) => {
+    setRatings(prev => {
+      const updated = new Map(prev)
+      const existing = updated.get(stepId) || { rating: 0, helpful: null, review: '' }
+      updated.set(stepId, { ...existing, rating })
+      return updated
+    })
+  }
+
+  const handleHelpfulChange = (stepId: string, helpful: boolean) => {
+    setRatings(prev => {
+      const updated = new Map(prev)
+      const existing = updated.get(stepId) || { rating: 0, helpful: null, review: '' }
+      // Toggle: if clicking same button, set to null
+      const newHelpful = existing.helpful === helpful ? null : helpful
+      updated.set(stepId, { ...existing, helpful: newHelpful })
+      return updated
+    })
+  }
+
+  const handleReviewChange = (stepId: string, review: string) => {
+    setRatings(prev => {
+      const updated = new Map(prev)
+      const existing = updated.get(stepId) || { rating: 0, helpful: null, review: '' }
+      updated.set(stepId, { ...existing, review })
+      return updated
+    })
+  }
+
+  const handleSubmit = async () => {
+    // Filter out steps with no rating
+    const ratingsToSubmit = new Map(
+      Array.from(ratings.entries()).filter(([_, data]) => data.rating > 0)
+    )
+
+    if (ratingsToSubmit.size === 0) {
+      // No ratings to submit, just close
+      onClose()
+      return
+    }
+
+    await onSubmit(ratingsToSubmit)
+  }
+
+  const getRating = (stepId: string) => ratings.get(stepId)
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
+      <div className="w-full max-w-2xl max-h-[90vh] flex flex-col rounded-lg border border-border bg-card shadow-lg">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
+          <div>
+            <h2 className="text-lg font-semibold text-foreground">Rate Your Experience</h2>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Help others by rating the steps you used ({librarySteps.length} step{librarySteps.length !== 1 ? 's' : ''})
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            disabled={isSaving}
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Steps List */}
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          <div className="space-y-6">
+            {librarySteps.map((step) => {
+              const rating = getRating(step.id)
+              return (
+                <div key={step.id} className="rounded-lg border border-border bg-background p-4">
+                  {/* Step Title */}
+                  <h3 className="font-medium text-foreground">{step.title}</h3>
+                  <p className="mt-1 text-sm text-muted-foreground capitalize">{step.step_type}</p>
+
+                  {/* Star Rating */}
+                  <div className="mt-3">
+                    <label className="mb-1 block text-sm font-medium text-foreground">
+                      Rating
+                    </label>
+                    <StarRating
+                      value={rating?.rating || 0}
+                      onChange={(value) => handleRatingChange(step.id, value)}
+                      size="lg"
+                    />
+                  </div>
+
+                  {/* Was this helpful? */}
+                  <div className="mt-3">
+                    <label className="mb-2 block text-sm font-medium text-foreground">
+                      Was this helpful?
+                    </label>
+                    <div className="flex gap-2">
+                      <button
+                        type="button"
+                        onClick={() => handleHelpfulChange(step.id, true)}
+                        disabled={isSaving}
+                        className={cn(
+                          'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
+                          rating?.helpful === true
+                            ? 'border-green-500 bg-green-500/10 text-green-600 dark:text-green-400'
+                            : 'border-input bg-background text-foreground hover:bg-accent',
+                          'disabled:opacity-50'
+                        )}
+                      >
+                        <ThumbsUp className="h-4 w-4" />
+                        Yes
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleHelpfulChange(step.id, false)}
+                        disabled={isSaving}
+                        className={cn(
+                          'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
+                          rating?.helpful === false
+                            ? 'border-red-500 bg-red-500/10 text-red-600 dark:text-red-400'
+                            : 'border-input bg-background text-foreground hover:bg-accent',
+                          'disabled:opacity-50'
+                        )}
+                      >
+                        <ThumbsDown className="h-4 w-4" />
+                        No
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Optional Review */}
+                  <div className="mt-3">
+                    <label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-foreground">
+                      Review <span className="text-muted-foreground">(optional)</span>
+                    </label>
+                    <textarea
+                      id={`review-${step.id}`}
+                      value={rating?.review || ''}
+                      onChange={(e) => handleReviewChange(step.id, e.target.value)}
+                      disabled={isSaving}
+                      maxLength={500}
+                      rows={2}
+                      placeholder="Share your experience with this step..."
+                      className={cn(
+                        'w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+                        'placeholder:text-muted-foreground',
+                        'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                        'disabled:opacity-50'
+                      )}
+                    />
+                    <p className="mt-1 text-xs text-muted-foreground text-right">
+                      {rating?.review?.length || 0}/500
+                    </p>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isSaving}
+            className={cn(
+              'rounded-md border border-input bg-background px-4 py-2 text-sm font-medium',
+              'hover:bg-accent hover:text-accent-foreground disabled:opacity-50'
+            )}
+          >
+            Skip
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={isSaving}
+            className={cn(
+              'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+              'hover:bg-primary/90 disabled:opacity-50'
+            )}
+          >
+            {isSaving ? 'Submitting...' : 'Submit Ratings'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}