feat: session sharing frontend (#76)

* feat: add session sharing types, API client, and utilities

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

* feat: add SessionTimeline and ActionMenu reusable components

SessionTimeline extracts timeline/checklist rendering from SessionDetailPage
into a reusable component for both authenticated and public session views.
ActionMenu provides a dropdown action menu with keyboard/click-outside dismiss.

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

* feat: add ShareSessionModal and integrate into SessionDetailPage

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

* feat: add Share Progress popover to TreeNavigationPage

Replace the single "Copy for Ticket" button with a "Share Progress"
popover that offers three actions: Copy Progress Summary (existing PSA
export flow), Copy Share Link (auto-creates account-only share if
needed), and Manage Share Links (opens ShareSessionModal).

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

* feat: add public SharedSessionPage with tree preview

Add the public-facing shared session page at /share/:shareToken that
renders shared sessions without authentication. Includes error handling
for 401 (redirect to login), 403 (access denied), 404 (not found),
and 410 (expired). The page features a minimal header, session metadata,
SessionTimeline component, and a new SharedSessionTreePreview component
that renders the decision tree structure with the path taken highlighted.

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

* feat: add My Shares management page with nav link

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

* fix: address code review issues in session sharing

- Add useCallback for loadShares in ShareSessionModal (React hook deps)
- Use TreeStructure type instead of Record<string, unknown> for type safety
- Fix login redirect format to match LoginPage's expected state shape

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

* test: add focused tests for session sharing utilities and API

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

* fix: resolve tree_structure type compatibility for shared session views

- Use TreeStructure & Record<string, unknown> intersection for JSONB flexibility
- Add explicit cast in SharedSessionTreePreview for recursive node rendering

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

* docs: add session sharing learnings to CLAUDE.md

Add gotchas #12 (TreeStructure vs Tree types) and #13 (login redirect
state format), note about npm run build strictness, and public route
pattern to Common Tasks.

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

* feat: procedural editor UX improvements

Add URL intake field type, fix variable name editing collapsing fields
(index-based keys/updates), auto-generate variable names by field type,
add section header as first-class step type, and simplify step editor
with "More Options" collapsible for advanced fields.

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

* fix: allow section_header step type in validation, improve tag input

- Add 'section_header' to VALID_STEP_TYPES in backend validation so
  procedural flows with section headers can be published
- Replace procedural editor's inline tag input with TagInput component
  (supports autocomplete, Tab, comma, semicolon, and paste splitting)
- Add semicolon delimiter support to TagInput component

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

* fix: add type-aware routing for procedural flows

Centralizes tree navigation routing via getTreeNavigatePath helper.
Fixes all pages to route procedural sessions to /flows/:id/navigate
instead of /trees/:id/navigate. Adds safety redirect in troubleshooting
navigator and resume support in procedural navigator.

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

* fix: remove unused index prop from IntakeFieldEditor

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

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/ProceduralNavigationPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
+import { useParams, useNavigate, useLocation } from 'react-router-dom'
 import { ChevronLeft, ChevronRight, ListOrdered, Settings2, X } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
@@ -21,6 +21,8 @@ interface StepState {
 export function ProceduralNavigationPage() {
   const { id: treeId } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const location = useLocation()
+  const locationState = location.state as { sessionId?: string } | undefined
 
   const [tree, setTree] = useState<Tree | null>(null)
   const [session, setSession] = useState<Session | null>(null)
@@ -98,6 +100,12 @@ export function ProceduralNavigationPage() {
       }
       setTree(treeData)
 
+      // If resuming an existing session
+      if (locationState?.sessionId) {
+        await resumeSession(treeData, locationState.sessionId)
+        return
+      }
+
       // Check if intake form exists
       if (treeData.intake_form && treeData.intake_form.length > 0) {
         setShowIntakeForm(true)
@@ -134,6 +142,42 @@ export function ProceduralNavigationPage() {
     }
   }
 
+  const resumeSession = async (treeData: Tree, sessionId: string) => {
+    try {
+      const sessionData = await sessionsApi.get(sessionId)
+      setSession(sessionData)
+      setSessionVariables(sessionData.session_variables || {})
+      setShowIntakeForm(false)
+
+      // Initialize step states from session decisions
+      const allSteps = getStepsFromTree(treeData)
+      const initialStates = new Map<string, StepState>()
+      for (const step of allSteps) {
+        initialStates.set(step.id, { notes: '', verificationValue: '', completedAt: null })
+      }
+
+      // Hydrate completed steps from decisions
+      for (const decision of sessionData.decisions || []) {
+        if (decision.answer === 'completed' && initialStates.has(decision.node_id)) {
+          initialStates.set(decision.node_id, {
+            notes: decision.notes || '',
+            verificationValue: decision.command_output || '',
+            completedAt: decision.exited_at || decision.timestamp,
+          })
+        }
+      }
+      setStepStates(initialStates)
+
+      // Set current step to first incomplete step
+      const pSteps = allSteps.filter((s) => s.type === 'procedure_step')
+      const firstIncomplete = pSteps.findIndex((s) => !initialStates.get(s.id)?.completedAt)
+      setCurrentStepIndex(firstIncomplete >= 0 ? firstIncomplete : pSteps.length - 1)
+    } catch {
+      toast.error('Failed to resume session')
+      navigate('/my-trees')
+    }
+  }
+
   const getStepsFromTree = (t: Tree): ProceduralStep[] => {
     const structure = t.tree_structure as unknown as { steps?: ProceduralStep[] }
     return structure.steps || []