Add seed script with 7 trees, markdown rendering, and dark mode docs

- Add comprehensive seed script with 7 troubleshooting decision trees
  - Tier 1: Password Reset, Outlook/Email, VPN, Printer Problems
  - Tier 2: Slow Computer, Network Connectivity
  - Tier 3: File Share Access Problems
- Add markdown rendering with react-markdown package
  - MarkdownContent component for session player and node editor
  - Preview toggle in description fields
- Update documentation to reflect dark mode is complete
- Update all progress tracking docs with recent changes

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

frontend/package.json

@@ -17,6 +17,7 @@
     "lucide-react": "^0.563.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.13.0",
     "tailwind-merge": "^3.4.0",
     "zundo": "^2.3.0",

frontend/src/components/tree-editor/NodeFormAction.tsx

@@ -1,6 +1,8 @@
+import { useState } from 'react'
 import { DynamicArrayField } from './DynamicArrayField'
 import { NodePicker } from './NodePicker'
 import { useTreeEditorStore } from '@/store/treeEditorStore'
+import { MarkdownContent } from '@/components/ui/MarkdownContent'
 import type { TreeStructure } from '@/types'
 import { cn } from '@/lib/utils'
 
@@ -11,6 +13,7 @@ interface NodeFormActionProps {
 
 export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
   const { validationErrors } = useTreeEditorStore()
+  const [showPreview, setShowPreview] = useState(false)
 
   const titleError = validationErrors.find(
     e => e.nodeId === node.id && e.field === 'title'
@@ -71,20 +74,46 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 
       {/* Description */}
       <div>
-        <label className="block text-sm font-medium text-foreground">
-          Description
-        </label>
-        <textarea
-          value={node.description || ''}
-          onChange={(e) => onUpdate({ description: e.target.value })}
-          placeholder="Detailed instructions for this action..."
-          rows={3}
-          className={cn(
-            'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
-            'bg-background text-foreground placeholder:text-muted-foreground',
-            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+        <div className="flex items-center justify-between">
+          <label className="block text-sm font-medium text-foreground">
+            Description
+          </label>
+          {node.description && (
+            <button
+              type="button"
+              onClick={() => setShowPreview(!showPreview)}
+              className="text-xs text-primary hover:underline"
+            >
+              {showPreview ? 'Edit' : 'Preview'}
+            </button>
           )}
-        />
+        </div>
+        <p className="mb-1 text-xs text-muted-foreground">
+          Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`
+        </p>
+        {showPreview && node.description ? (
+          <div className="mt-1 rounded-md border border-input bg-muted/50 p-3 text-sm">
+            <MarkdownContent content={node.description} />
+          </div>
+        ) : (
+          <textarea
+            value={node.description || ''}
+            onChange={(e) => onUpdate({ description: e.target.value })}
+            placeholder="Detailed instructions for this action...
+
+**Example formatting:**
+1. First step
+2. Second step
+
+**Note:** Important information here"
+            rows={5}
+            className={cn(
+              'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
+              'bg-background text-foreground placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+            )}
+          />
+        )}
       </div>
 
       {/* Commands */}

frontend/src/components/tree-editor/NodeFormResolution.tsx

@@ -1,5 +1,7 @@
+import { useState } from 'react'
 import { DynamicArrayField } from './DynamicArrayField'
 import { useTreeEditorStore } from '@/store/treeEditorStore'
+import { MarkdownContent } from '@/components/ui/MarkdownContent'
 import type { TreeStructure } from '@/types'
 import { cn } from '@/lib/utils'
 
@@ -10,6 +12,7 @@ interface NodeFormResolutionProps {
 
 export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps) {
   const { validationErrors } = useTreeEditorStore()
+  const [showPreview, setShowPreview] = useState(false)
 
   const titleError = validationErrors.find(
     e => e.nodeId === node.id && e.field === 'title'
@@ -66,20 +69,45 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
 
       {/* Description */}
       <div>
-        <label className="block text-sm font-medium text-foreground">
-          Description
-        </label>
-        <textarea
-          value={node.description || ''}
-          onChange={(e) => onUpdate({ description: e.target.value })}
-          placeholder="Summary of the resolution and any follow-up recommendations..."
-          rows={3}
-          className={cn(
-            'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
-            'bg-background text-foreground placeholder:text-muted-foreground',
-            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+        <div className="flex items-center justify-between">
+          <label className="block text-sm font-medium text-foreground">
+            Description
+          </label>
+          {node.description && (
+            <button
+              type="button"
+              onClick={() => setShowPreview(!showPreview)}
+              className="text-xs text-primary hover:underline"
+            >
+              {showPreview ? 'Edit' : 'Preview'}
+            </button>
           )}
-        />
+        </div>
+        <p className="mb-1 text-xs text-muted-foreground">
+          Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`
+        </p>
+        {showPreview && node.description ? (
+          <div className="mt-1 rounded-md border border-input bg-muted/50 p-3 text-sm">
+            <MarkdownContent content={node.description} />
+          </div>
+        ) : (
+          <textarea
+            value={node.description || ''}
+            onChange={(e) => onUpdate({ description: e.target.value })}
+            placeholder="Summary of the resolution and any follow-up recommendations...
+
+**Ticket Notes:**
+Document what was done and the outcome.
+
+**Close ticket as:** Resolved"
+            rows={5}
+            className={cn(
+              'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
+              'bg-background text-foreground placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+            )}
+          />
+        )}
       </div>
 
       {/* Resolution Steps */}

frontend/src/components/ui/MarkdownContent.tsx

@@ -0,0 +1,94 @@
+import ReactMarkdown from 'react-markdown'
+import { cn } from '@/lib/utils'
+
+interface MarkdownContentProps {
+  content: string
+  className?: string
+}
+
+/**
+ * Renders markdown content with proper styling.
+ * Supports: bold, italic, lists, code blocks, headers, etc.
+ */
+export function MarkdownContent({ content, className }: MarkdownContentProps) {
+  return (
+    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)}>
+      <ReactMarkdown
+        components={{
+        // Style paragraphs
+        p: ({ children }) => (
+          <p className="mb-3 last:mb-0">{children}</p>
+        ),
+        // Style bold text
+        strong: ({ children }) => (
+          <strong className="font-semibold text-foreground">{children}</strong>
+        ),
+        // Style ordered lists
+        ol: ({ children }) => (
+          <ol className="mb-3 ml-4 list-decimal space-y-1 last:mb-0">{children}</ol>
+        ),
+        // Style unordered lists
+        ul: ({ children }) => (
+          <ul className="mb-3 ml-4 list-disc space-y-1 last:mb-0">{children}</ul>
+        ),
+        // Style list items
+        li: ({ children }) => (
+          <li className="text-muted-foreground">{children}</li>
+        ),
+        // Style inline code
+        code: ({ className, children, ...props }) => {
+          // Check if it's a code block (has language class) or inline code
+          const isBlock = className?.includes('language-')
+          if (isBlock) {
+            return (
+              <code
+                className={cn(
+                  'block rounded bg-muted p-3 font-mono text-sm overflow-x-auto',
+                  className
+                )}
+                {...props}
+              >
+                {children}
+              </code>
+            )
+          }
+          return (
+            <code
+              className="rounded bg-muted px-1.5 py-0.5 font-mono text-sm"
+              {...props}
+            >
+              {children}
+            </code>
+          )
+        },
+        // Style code blocks (pre)
+        pre: ({ children }) => (
+          <pre className="mb-3 overflow-x-auto rounded bg-muted p-0 last:mb-0">
+            {children}
+          </pre>
+        ),
+        // Style headers
+        h1: ({ children }) => (
+          <h1 className="mb-3 text-lg font-bold text-foreground">{children}</h1>
+        ),
+        h2: ({ children }) => (
+          <h2 className="mb-2 text-base font-bold text-foreground">{children}</h2>
+        ),
+        h3: ({ children }) => (
+          <h3 className="mb-2 text-sm font-bold text-foreground">{children}</h3>
+        ),
+        // Style horizontal rules
+        hr: () => <hr className="my-4 border-border" />,
+        // Style blockquotes
+        blockquote: ({ children }) => (
+          <blockquote className="mb-3 border-l-4 border-primary/50 pl-4 italic text-muted-foreground last:mb-0">
+            {children}
+          </blockquote>
+        ),
+      }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

frontend/src/pages/TreeNavigationPage.tsx

@@ -4,6 +4,7 @@ import { treesApi, sessionsApi } from '@/api'
 import { useTreeNavigationShortcuts } from '@/hooks/useKeyboardShortcuts'
 import type { Tree, Session, DecisionRecord, TreeStructure } from '@/types'
 import { cn } from '@/lib/utils'
+import { MarkdownContent } from '@/components/ui/MarkdownContent'
 
 interface LocationState {
   sessionId?: string
@@ -380,7 +381,9 @@ export function TreeNavigationPage() {
               {currentNode.question}
             </h2>
             {currentNode.help_text && (
-              <p className="mb-4 text-sm text-muted-foreground">{currentNode.help_text}</p>
+              <div className="mb-4 text-sm text-muted-foreground">
+                <MarkdownContent content={currentNode.help_text} />
+              </div>
             )}
             <div className="mb-4 space-y-2">
               {currentNode.options?.map((option, index) => (
@@ -411,7 +414,11 @@ export function TreeNavigationPage() {
             <h2 className="mb-2 text-xl font-semibold text-card-foreground">
               {currentNode.title}
             </h2>
-            <p className="mb-4 text-muted-foreground">{currentNode.description}</p>
+            {currentNode.description && (
+              <div className="mb-4 text-muted-foreground">
+                <MarkdownContent content={currentNode.description} />
+              </div>
+            )}
             {currentNode.commands && currentNode.commands.length > 0 && (
               <div className="mb-4">
                 <p className="mb-2 text-sm font-medium text-foreground">Commands:</p>
@@ -457,7 +464,11 @@ export function TreeNavigationPage() {
             <h2 className="mb-2 text-xl font-semibold text-card-foreground">
               {currentNode.title}
             </h2>
-            <p className="mb-4 text-muted-foreground">{currentNode.description}</p>
+            {currentNode.description && (
+              <div className="mb-4 text-muted-foreground">
+                <MarkdownContent content={currentNode.description} />
+              </div>
+            )}
             {currentNode.resolution_steps && currentNode.resolution_steps.length > 0 && (
               <div className="mb-4">
                 <p className="mb-2 text-sm font-medium text-foreground">Resolution steps:</p>