@prmichaelsen/acp-visualizer 0.8.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

package/src/components/DocumentDetail.tsx

@@ -0,0 +1,100 @@
+import { useState, useEffect, useMemo } from 'react'
+import { Breadcrumb } from './Breadcrumb'
+import { MarkdownContent, buildLinkMap } from './MarkdownContent'
+import { getMarkdownContent, listAgentDirectory } from '../services/markdown.service'
+import { useProgressData } from '../contexts/ProgressContext'
+import type { MarkdownResult, AgentFile } from '../services/markdown.service'
+
+interface DocumentDetailProps {
+  slug: string
+  dirPath: string
+  sectionLabel: string
+  sectionHref: string
+}
+
+/** Read ?repo=owner/repo from URL */
+function getGitHubParams(): { owner: string; repo: string } | undefined {
+  if (typeof window === 'undefined') return undefined
+  const params = new URLSearchParams(window.location.search)
+  const repo = params.get('repo')
+  if (!repo) return undefined
+  const parts = repo.split('/')
+  if (parts.length < 2) return undefined
+  return { owner: parts[0], repo: parts[1] }
+}
+
+export function DocumentDetail({ slug, dirPath, sectionLabel, sectionHref }: DocumentDetailProps) {
+  const data = useProgressData()
+  const [markdown, setMarkdown] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [filePath, setFilePath] = useState<string | null>(null)
+  const linkMap = useMemo(() => (data ? buildLinkMap(data) : {}), [data])
+
+  useEffect(() => {
+    setLoading(true)
+    setMarkdown(null)
+    setError(null)
+
+    const github = getGitHubParams()
+    const relativePath = `${dirPath}/${slug}.md`
+
+    // Try the direct path first, fallback to directory listing if needed
+    getMarkdownContent({ data: { filePath: relativePath, github } })
+      .then((result: MarkdownResult) => {
+        if (result.ok) {
+          setMarkdown(result.content)
+          setFilePath(result.filePath)
+        } else {
+          // Fallback: search directory for a file containing the slug
+          return listAgentDirectory({ data: { dirPath, github } }).then((listResult) => {
+            if (listResult.ok) {
+              const match = listResult.files.find((f: AgentFile) => f.name === slug)
+              if (match) {
+                return getMarkdownContent({ data: { filePath: match.relativePath, github } })
+                  .then((mdResult: MarkdownResult) => {
+                    if (mdResult.ok) {
+                      setMarkdown(mdResult.content)
+                      setFilePath(mdResult.filePath)
+                    } else {
+                      setError(mdResult.error)
+                    }
+                  })
+              }
+            }
+            setError(result.error)
+          })
+        }
+      })
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [slug, dirPath])
+
+  const displayName = slug
+    .replace(/^[a-z0-9-]+\./, '')
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+
+  return (
+    <div className="p-6 max-w-4xl">
+      <Breadcrumb
+        items={[
+          { label: sectionLabel, href: sectionHref },
+          { label: displayName },
+        ]}
+      />
+
+      <h1 className="text-xl font-semibold text-gray-100 mb-6">{displayName}</h1>
+
+      {loading ? (
+        <p className="text-sm text-gray-600">Loading document...</p>
+      ) : markdown ? (
+        <MarkdownContent content={markdown} basePath={filePath ?? undefined} linkMap={linkMap} />
+      ) : error ? (
+        <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4 text-sm text-gray-500">
+          No document found — {error}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/DocumentList.tsx

@@ -0,0 +1,90 @@
+import { Link } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { listAgentDirectory } from '../services/markdown.service'
+import type { AgentFile } from '../services/markdown.service'
+import { FileText } from 'lucide-react'
+
+interface DocumentListProps {
+  title: string
+  dirPath: string
+  baseTo: string
+  github?: { owner: string; repo: string; branch?: string; token?: string }
+}
+
+export function DocumentList({ title, dirPath, baseTo, github }: DocumentListProps) {
+  const [files, setFiles] = useState<AgentFile[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    listAgentDirectory({ data: { dirPath, github } })
+      .then((result) => {
+        if (result.ok) {
+          setFiles(result.files)
+        } else {
+          setError(result.error)
+        }
+      })
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [dirPath, github])
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <h2 className="text-lg font-semibold mb-4">{title}</h2>
+        <p className="text-sm text-gray-600">Loading...</p>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <h2 className="text-lg font-semibold mb-4">{title}</h2>
+        <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4 text-sm text-gray-500">
+          {error}
+        </div>
+      </div>
+    )
+  }
+
+  if (files.length === 0) {
+    return (
+      <div className="p-6">
+        <h2 className="text-lg font-semibold mb-4">{title}</h2>
+        <p className="text-sm text-gray-500">No documents found in <code className="text-gray-400">{dirPath}/</code></p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-semibold mb-4">{title}</h2>
+      <div className="bg-gray-900/50 border border-gray-800 rounded-xl divide-y divide-gray-800">
+        {files.map((file) => (
+          <Link
+            key={file.name}
+            to={baseTo + '/$slug'}
+            params={{ slug: file.name }}
+            className="flex items-center gap-3 px-4 py-3 text-sm hover:bg-gray-800/50 transition-colors first:rounded-t-xl last:rounded-b-xl"
+          >
+            <FileText className="w-4 h-4 text-gray-500 shrink-0" />
+            <span className="text-gray-200">{formatName(file.name)}</span>
+          </Link>
+        ))}
+      </div>
+      <p className="text-xs text-gray-600 mt-3">{files.length} document{files.length !== 1 ? 's' : ''}</p>
+    </div>
+  )
+}
+
+/** Turn "local.dashboard-layout-routing" into "Dashboard Layout Routing" */
+function formatName(name: string): string {
+  // Strip common prefixes like "local." or "core-sdk."
+  const stripped = name.replace(/^[a-z0-9-]+\./, '')
+  return stripped
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+}

package/src/components/Header.tsx

@@ -1,5 +1,7 @@
+import { Moon, Sun } from 'lucide-react'
 import { StatusBadge } from './StatusBadge'
 import { ProgressBar } from './ProgressBar'
+import { useTheme } from '../lib/useTheme'
 import type { ProgressData } from '../lib/types'
 
 interface HeaderProps {
@@ -7,16 +9,31 @@ interface HeaderProps {
 }
 
 export function Header({ data }: HeaderProps) {
+  const { theme, toggleTheme } = useTheme()
+
   if (!data) return null
 
   return (
-    <header className="h-14 border-b border-gray-800 flex items-center px-6 gap-4 shrink-0">
-      <h1 className="text-sm font-medium text-gray-200">{data.project.name}</h1>
-      <span className="text-xs text-gray-500 font-mono">v{data.project.version}</span>
+    <header className="h-14 border-b border-gray-200 dark:border-gray-800 flex items-center px-6 gap-4 shrink-0 bg-white dark:bg-gray-950">
+      <h1 className="text-sm font-medium text-gray-900 dark:text-gray-200">{data.project.name}</h1>
+      <span className="text-xs text-gray-500 dark:text-gray-500 font-mono">v{data.project.version}</span>
       <StatusBadge status={data.project.status} />
-      <div className="ml-auto flex items-center gap-3 w-48">
-        <ProgressBar value={data.progress.overall} size="sm" />
-        <span className="text-xs text-gray-400 font-mono">{data.progress.overall}%</span>
+      <div className="ml-auto flex items-center gap-4">
+        <div className="flex items-center gap-3 w-48">
+          <ProgressBar value={data.progress.overall} size="sm" />
+          <span className="text-xs text-gray-600 dark:text-gray-400 font-mono">{data.progress.overall}%</span>
+        </div>
+        <button
+          onClick={toggleTheme}
+          className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          aria-label="Toggle theme"
+        >
+          {theme === 'dark' ? (
+            <Moon className="w-4 h-4 text-gray-400" />
+          ) : (
+            <Sun className="w-4 h-4 text-gray-600" />
+          )}
+        </button>
       </div>
     </header>
   )

package/src/components/MilestoneKanban.tsx

@@ -1,6 +1,8 @@
 import { Link } from '@tanstack/react-router'
 import { StatusBadge } from './StatusBadge'
+import { PriorityBadge } from './PriorityBadge'
 import { ProgressBar } from './ProgressBar'
+import { PreviewButton } from './PreviewButton'
 import { TaskList } from './TaskList'
 import type { Milestone, Task, Status } from '../lib/types'
 import { useState } from 'react'
@@ -28,15 +30,19 @@ function KanbanCard({
   const [expanded, setExpanded] = useState(false)
 
   return (
-    <div className="bg-gray-900/50 border border-gray-800 rounded-lg p-3 hover:border-gray-700 transition-colors">
+    <div className="bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-lg p-3 hover:border-gray-300 dark:hover:border-gray-700 transition-colors group">
       <div className="flex items-start justify-between gap-2 mb-2">
-        <Link
-          to="/milestones/$milestoneId"
-          params={{ milestoneId: milestone.id }}
-          className="text-sm font-medium leading-tight hover:text-blue-400 transition-colors"
-        >
-          {milestone.name}
-        </Link>
+        <div className="flex items-center gap-2 flex-1">
+          <Link
+            to="/milestones/$milestoneId"
+            params={{ milestoneId: milestone.id }}
+            className="text-sm font-medium leading-tight text-gray-900 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+          >
+            {milestone.name}
+          </Link>
+          <PreviewButton type="milestone" id={milestone.id} />
+        </div>
+        <PriorityBadge priority={milestone.priority} />
       </div>
       <div className="flex items-center gap-2 mb-2">
         <div className="flex-1">

package/src/components/MilestonePreview.tsx

@@ -0,0 +1,162 @@
+import { Link } from '@tanstack/react-router'
+import { useState, useEffect, useMemo } from 'react'
+import { ExternalLink } from 'lucide-react'
+import { useProgressData } from '../contexts/ProgressContext'
+import { DetailHeader } from './DetailHeader'
+import { ProgressBar } from './ProgressBar'
+import { StatusDot } from './StatusDot'
+import { PriorityBadge } from './PriorityBadge'
+import { MarkdownContent, buildLinkMap } from './MarkdownContent'
+import { getMarkdownContent, resolveMilestoneFile } from '../services/markdown.service'
+import type { MarkdownResult, ResolveFileResult } from '../services/markdown.service'
+
+interface MilestonePreviewProps {
+  milestoneId: string
+}
+
+function getGitHubParams(): { owner: string; repo: string } | undefined {
+  if (typeof window === 'undefined') return undefined
+  const params = new URLSearchParams(window.location.search)
+  const repo = params.get('repo')
+  if (!repo) return undefined
+  const parts = repo.split('/')
+  if (parts.length < 2) return undefined
+  return { owner: parts[0], repo: parts[1] }
+}
+
+export function MilestonePreview({ milestoneId }: MilestonePreviewProps) {
+  const data = useProgressData()
+  const [markdown, setMarkdown] = useState<string | null>(null)
+  const [markdownError, setMarkdownError] = useState<string | null>(null)
+  const [markdownFilePath, setMarkdownFilePath] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const milestone = data?.milestones.find((m) => m.id === milestoneId)
+  const tasks = data?.tasks[milestoneId] || []
+  const linkMap = useMemo(() => (data ? buildLinkMap(data) : {}), [data])
+
+  useEffect(() => {
+    if (!milestoneId) return
+
+    setLoading(true)
+    setMarkdown(null)
+    setMarkdownError(null)
+    setMarkdownFilePath(null)
+
+    const github = getGitHubParams()
+
+    resolveMilestoneFile({ data: { milestoneId, github } })
+      .then((resolveResult: ResolveFileResult) => {
+        if (!resolveResult.ok) {
+          setMarkdownError(resolveResult.error)
+          setLoading(false)
+          return
+        }
+
+        setMarkdownFilePath(resolveResult.filePath)
+        return getMarkdownContent({ data: { filePath: resolveResult.filePath, github } })
+          .then((mdResult: MarkdownResult) => {
+            if (mdResult.ok) {
+              setMarkdown(mdResult.content)
+            } else {
+              setMarkdownError(mdResult.error)
+            }
+          })
+      })
+      .catch((err: Error) => {
+        setMarkdownError(err.message)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [milestoneId])
+
+  if (!data || !milestone) {
+    return (
+      <div className="text-center py-8">
+        <p className="text-gray-500 dark:text-gray-400 text-sm">Milestone not found: {milestoneId}</p>
+      </div>
+    )
+  }
+
+  const fields = [
+    ...(milestone.started ? [{ label: 'Started', value: milestone.started }] : []),
+    ...(milestone.completed ? [{ label: 'Completed', value: milestone.completed }] : []),
+    { label: 'Est', value: `${milestone.estimated_weeks} week${milestone.estimated_weeks === '1' ? '' : 's'}` },
+    { label: 'Tasks', value: `${milestone.tasks_completed}/${milestone.tasks_total}` },
+  ]
+
+  return (
+    <div>
+      <div className="flex items-start justify-between mb-4">
+        <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{milestone.name}</h1>
+        <Link
+          to="/milestones/$milestoneId"
+          params={{ milestoneId }}
+          className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          title="Open full view"
+        >
+          <ExternalLink className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+        </Link>
+      </div>
+
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex-1 max-w-xs">
+          <ProgressBar value={milestone.progress} size="sm" />
+        </div>
+        <span className="text-xs text-gray-600 dark:text-gray-500">{milestone.progress}%</span>
+      </div>
+
+      <div className="flex items-center gap-2 mb-4">
+        <PriorityBadge priority={milestone.priority} />
+      </div>
+
+      <DetailHeader status={milestone.status} fields={fields} />
+
+      {milestone.notes && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">{milestone.notes}</p>
+      )}
+
+      {/* Markdown content */}
+      {loading ? (
+        <p className="text-sm text-gray-600 dark:text-gray-500">Loading document...</p>
+      ) : markdown ? (
+        <div className="prose-sm">
+          <MarkdownContent content={markdown} basePath={markdownFilePath ?? undefined} linkMap={linkMap} />
+        </div>
+      ) : markdownError ? (
+        <div className="bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-xl p-4 text-sm text-gray-600 dark:text-gray-500">
+          No document found — {markdownError}
+        </div>
+      ) : null}
+
+      {/* Task list */}
+      {tasks.length > 0 && (
+        <div className="mt-8">
+          <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-400 uppercase tracking-wider mb-3">
+            Tasks
+          </h2>
+          <div className="bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-xl divide-y divide-gray-200 dark:divide-gray-800">
+            {tasks.map((task) => (
+              <Link
+                key={task.id}
+                to="/tasks/$taskId"
+                params={{ taskId: task.id }}
+                className="flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-gray-200/50 dark:hover:bg-gray-800/50 transition-colors first:rounded-t-xl last:rounded-b-xl"
+              >
+                <StatusDot status={task.status} />
+                <span className={task.status === 'completed' ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-200'}>
+                  {task.name}
+                </span>
+                <PriorityBadge priority={task.priority} />
+                {task.estimated_hours && (
+                  <span className="text-xs text-gray-600 dark:text-gray-600 ml-auto">{task.estimated_hours}h</span>
+                )}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/MilestoneTable.tsx

@@ -10,7 +10,9 @@ import {
 } from '@tanstack/react-table'
 import { ChevronDown, ChevronRight, ArrowUpDown } from 'lucide-react'
 import { StatusBadge } from './StatusBadge'
+import { PriorityBadge } from './PriorityBadge'
 import { ProgressBar } from './ProgressBar'
+import { PreviewButton } from './PreviewButton'
 import { TaskList } from './TaskList'
 import type { Milestone, Task } from '../lib/types'
 
@@ -53,14 +55,17 @@ export function MilestoneTable({ milestones, tasks }: MilestoneTableProps) {
     columnHelper.accessor('name', {
       header: 'Milestone',
       cell: (info) => (
-        <Link
-          to="/milestones/$milestoneId"
-          params={{ milestoneId: info.row.original.id }}
-          className="text-sm font-medium text-gray-200 hover:text-blue-400 transition-colors"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {info.getValue()}
-        </Link>
+        <div className="flex items-center gap-2 group">
+          <Link
+            to="/milestones/$milestoneId"
+            params={{ milestoneId: info.row.original.id }}
+            className="text-sm font-medium text-gray-900 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {info.getValue()}
+          </Link>
+          <PreviewButton type="milestone" id={info.row.original.id} />
+        </div>
       ),
     }),
     columnHelper.accessor('status', {
@@ -68,6 +73,11 @@ export function MilestoneTable({ milestones, tasks }: MilestoneTableProps) {
       cell: (info) => <StatusBadge status={info.getValue()} />,
       size: 120,
     }),
+    columnHelper.accessor('priority', {
+      header: 'Priority',
+      cell: (info) => <PriorityBadge priority={info.getValue()} />,
+      size: 100,
+    }),
     columnHelper.accessor('progress', {
       header: 'Progress',
       cell: (info) => (

package/src/components/MilestoneTree.tsx

@@ -2,7 +2,9 @@ import { useState } from 'react'
 import { Link } from '@tanstack/react-router'
 import { ChevronDown, ChevronRight } from 'lucide-react'
 import { StatusBadge } from './StatusBadge'
+import { PriorityBadge } from './PriorityBadge'
 import { ProgressBar } from './ProgressBar'
+import { PreviewButton } from './PreviewButton'
 import { TaskList } from './TaskList'
 import { useCollapse } from '../lib/useCollapse'
 import type { Milestone, Task } from '../lib/types'
@@ -26,29 +28,33 @@ function MilestoneTreeRow({
   const collapse = useCollapse(expanded)
 
   return (
-    <div className="border-b border-gray-800/50">
+    <div className="border-b border-gray-200 dark:border-gray-800/50 group">
       <button
         onClick={onToggle}
-        className="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-800/30 transition-colors text-left"
+        className="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-200/50 dark:hover:bg-gray-800/30 transition-colors text-left"
       >
         {expanded ? (
-          <ChevronDown className="w-4 h-4 text-gray-500 shrink-0" />
+          <ChevronDown className="w-4 h-4 text-gray-500 dark:text-gray-500 shrink-0" />
         ) : (
-          <ChevronRight className="w-4 h-4 text-gray-500 shrink-0" />
+          <ChevronRight className="w-4 h-4 text-gray-500 dark:text-gray-500 shrink-0" />
         )}
-        <Link
-          to="/milestones/$milestoneId"
-          params={{ milestoneId: milestone.id }}
-          className="flex-1 text-sm font-medium hover:text-blue-400 transition-colors"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {milestone.name}
-        </Link>
+        <div className="flex items-center gap-2 flex-1">
+          <Link
+            to="/milestones/$milestoneId"
+            params={{ milestoneId: milestone.id }}
+            className="text-sm font-medium text-gray-900 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {milestone.name}
+          </Link>
+          <PreviewButton type="milestone" id={milestone.id} />
+        </div>
         <StatusBadge status={milestone.status} />
+        <PriorityBadge priority={milestone.priority} />
         <div className="w-20">
           <ProgressBar value={milestone.progress} size="sm" />
         </div>
-        <span className="text-xs text-gray-500 font-mono w-12 text-right">
+        <span className="text-xs text-gray-500 dark:text-gray-500 font-mono w-12 text-right">
           {milestone.tasks_completed}/{milestone.tasks_total}
         </span>
       </button>

package/src/components/PreviewButton.tsx

@@ -0,0 +1,33 @@
+import { Eye } from 'lucide-react'
+import { useSidePanel } from '../contexts/SidePanelContext'
+
+interface PreviewButtonProps {
+  type: 'milestone' | 'task'
+  id: string
+  className?: string
+}
+
+export function PreviewButton({ type, id, className = '' }: PreviewButtonProps) {
+  const { openMilestone, openTask } = useSidePanel()
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (type === 'milestone') {
+      openMilestone(id)
+    } else {
+      openTask(id)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`p-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors opacity-0 group-hover:opacity-100 ${className}`}
+      title={`Preview ${type}`}
+      aria-label={`Preview ${type}`}
+    >
+      <Eye className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" />
+    </button>
+  )
+}

package/src/components/PriorityBadge.tsx

@@ -0,0 +1,20 @@
+import type { Priority } from '../lib/types'
+
+const priorityStyles: Record<Priority, string> = {
+  critical: 'bg-rose-500/20 text-rose-400',
+  high: 'bg-amber-500/20 text-amber-400',
+  medium: 'bg-blue-500/20 text-blue-400',
+  low: 'bg-zinc-500/20 text-zinc-400',
+}
+
+export function PriorityBadge({ priority }: { priority: Priority | undefined }) {
+  if (!priority) return null
+
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium uppercase ${priorityStyles[priority] ?? priorityStyles.medium}`}
+    >
+      {priority}
+    </span>
+  )
+}

package/src/components/SidePanel.tsx

@@ -0,0 +1,45 @@
+import { X } from 'lucide-react'
+import { useSidePanel } from '../contexts/SidePanelContext'
+import { MilestonePreview } from './MilestonePreview'
+import { TaskPreview } from './TaskPreview'
+
+export function SidePanel() {
+  const { content, isOpen, close } = useSidePanel()
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={`fixed inset-0 bg-black/30 backdrop-blur-sm z-40 transition-opacity duration-300 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={close}
+      />
+
+      {/* Panel */}
+      <div
+        className={`fixed top-0 right-0 h-full w-full max-w-2xl bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-2xl z-50 transition-transform duration-300 overflow-auto ${
+          isOpen ? 'translate-x-0' : 'translate-x-full'
+        }`}
+      >
+        {/* Header */}
+        <div className="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 px-6 py-4 flex items-center justify-between z-10">
+          <h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100">Preview</h2>
+          <button
+            onClick={close}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            aria-label="Close panel"
+          >
+            <X className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          {content?.type === 'milestone' && <MilestonePreview milestoneId={content.id} />}
+          {content?.type === 'task' && <TaskPreview taskId={content.id} />}
+        </div>
+      </div>
+    </>
+  )
+}