@prmichaelsen/acp-visualizer 0.13.2 → 0.14.0

package/package.json

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

package/src/components/DocumentDetail.tsx

@@ -3,6 +3,7 @@ import { Breadcrumb } from './Breadcrumb'
 import { MarkdownContent, buildLinkMap } from './MarkdownContent'
 import { getMarkdownContent, listAgentDirectory } from '../services/markdown.service'
 import { useProgressData } from '../contexts/ProgressContext'
+import { getGitHubParams } from '../lib/github-auth'
 import type { MarkdownResult, AgentFile } from '../services/markdown.service'
 
 interface DocumentDetailProps {
@@ -12,17 +13,6 @@ interface DocumentDetailProps {
   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)

package/src/components/DocumentList.tsx

@@ -2,6 +2,8 @@ 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 { getGitHubParams } from '../lib/github-auth'
+import { PreviewButton } from './PreviewButton'
 import { FileText } from 'lucide-react'
 
 interface DocumentListProps {
@@ -11,13 +13,14 @@ interface DocumentListProps {
   github?: { owner: string; repo: string; branch?: string; token?: string }
 }
 
-export function DocumentList({ title, dirPath, baseTo, github }: DocumentListProps) {
+export function DocumentList({ title, dirPath, baseTo, github: githubProp }: DocumentListProps) {
   const [files, setFiles] = useState<AgentFile[]>([])
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
   const [directoryExists, setDirectoryExists] = useState(true)
 
   useEffect(() => {
+    const github = githubProp ?? getGitHubParams()
     setLoading(true)
     setDirectoryExists(true)
     listAgentDirectory({ data: { dirPath, github } })
@@ -31,7 +34,7 @@ export function DocumentList({ title, dirPath, baseTo, github }: DocumentListPro
       })
       .catch((err: Error) => setError(err.message))
       .finally(() => setLoading(false))
-  }, [dirPath, github])
+  }, [dirPath, githubProp])
 
   if (loading) {
     return (
@@ -57,7 +60,7 @@ export function DocumentList({ title, dirPath, baseTo, github }: DocumentListPro
     return (
       <div className="p-6">
         <h2 className="text-lg font-semibold mb-4">{title}</h2>
-        {!directoryExists && github ? (
+        {!directoryExists && (githubProp || getGitHubParams()) ? (
           <div className="bg-yellow-900/20 border border-yellow-800/30 rounded-lg p-4">
             <p className="text-sm text-yellow-300 mb-2">
               Directory <code className="text-yellow-400 bg-yellow-900/30 px-1.5 py-0.5 rounded">{dirPath}/</code> not found in this repository.
@@ -78,15 +81,20 @@ export function DocumentList({ title, dirPath, baseTo, github }: DocumentListPro
       <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
+          <div
             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>
+            <Link
+              to={baseTo + '/$slug'}
+              params={{ slug: file.name }}
+              className="flex items-center gap-3 flex-1 min-w-0"
+            >
+              <FileText className="w-4 h-4 text-gray-500 shrink-0" />
+              <span className="text-gray-200">{formatName(file.name)}</span>
+            </Link>
+            <PreviewButton type="document" dirPath={dirPath} slug={file.name} />
+          </div>
         ))}
       </div>
       <p className="text-xs text-gray-600 mt-3">{files.length} document{files.length !== 1 ? 's' : ''}</p>

package/src/components/DocumentPreview.tsx

@@ -0,0 +1,123 @@
+import { Link } from '@tanstack/react-router'
+import { useState, useEffect, useMemo } from 'react'
+import { Maximize2 } from 'lucide-react'
+import { useProgressData } from '../contexts/ProgressContext'
+import { useSidePanel } from '../contexts/SidePanelContext'
+import { MarkdownContent, buildLinkMap } from './MarkdownContent'
+import { getMarkdownContent, listAgentDirectory } from '../services/markdown.service'
+import { getGitHubParams } from '../lib/github-auth'
+import type { MarkdownResult, AgentFile } from '../services/markdown.service'
+
+interface DocumentPreviewProps {
+  dirPath: string
+  slug: string
+}
+
+/** Map dirPath to route base path */
+function dirToRoute(dirPath: string): string {
+  if (dirPath.includes('design')) return '/designs'
+  if (dirPath.includes('pattern')) return '/patterns'
+  if (dirPath.includes('artifact')) return '/artifacts'
+  return '/designs'
+}
+
+/** Map dirPath to section label */
+function dirToLabel(dirPath: string): string {
+  if (dirPath.includes('design')) return 'Design'
+  if (dirPath.includes('pattern')) return 'Pattern'
+  if (dirPath.includes('artifact')) return 'Artifact'
+  return 'Document'
+}
+
+/** Turn "local.dashboard-layout-routing" into "Dashboard Layout Routing" */
+function formatName(name: string): string {
+  const stripped = name.replace(/^[a-z0-9-]+\./, '')
+  return stripped
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+export function DocumentPreview({ dirPath, slug }: DocumentPreviewProps) {
+  const data = useProgressData()
+  const { close } = useSidePanel()
+  const [markdown, setMarkdown] = useState<string | null>(null)
+  const [markdownError, setMarkdownError] = useState<string | null>(null)
+  const [filePath, setFilePath] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const linkMap = useMemo(() => (data ? buildLinkMap(data) : {}), [data])
+
+  const routeBase = dirToRoute(dirPath)
+  const sectionLabel = dirToLabel(dirPath)
+  const displayName = formatName(slug)
+
+  useEffect(() => {
+    setLoading(true)
+    setMarkdown(null)
+    setMarkdownError(null)
+    setFilePath(null)
+
+    const github = getGitHubParams()
+    const relativePath = `${dirPath}/${slug}.md`
+
+    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 {
+                      setMarkdownError(mdResult.error)
+                    }
+                  })
+              }
+            }
+            setMarkdownError(result.error)
+          })
+        }
+      })
+      .catch((err: Error) => setMarkdownError(err.message))
+      .finally(() => setLoading(false))
+  }, [dirPath, slug])
+
+  return (
+    <div>
+      <div className="flex items-start justify-between mb-4">
+        <div>
+          <p className="text-xs text-gray-500 dark:text-gray-500 uppercase tracking-wider mb-1">{sectionLabel}</p>
+          <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{displayName}</h1>
+        </div>
+        <Link
+          to={routeBase + '/$slug'}
+          params={{ slug }}
+          className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          title="Open full view"
+          onClick={close}
+        >
+          <Maximize2 className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+        </Link>
+      </div>
+
+      {loading ? (
+        <p className="text-sm text-gray-600 dark:text-gray-500">Loading document...</p>
+      ) : markdown ? (
+        <div className="prose-sm">
+          <MarkdownContent content={markdown} basePath={filePath ?? 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}
+    </div>
+  )
+}

package/src/components/FilterBar.tsx

@@ -15,12 +15,12 @@ interface FilterBarProps {
 
 export function FilterBar({ status, onStatusChange }: FilterBarProps) {
   return (
-    <div className="flex flex-wrap gap-2 p-2 bg-gray-800/50 rounded-lg">
+    <div className="flex gap-1 p-1 bg-gray-800/50 rounded-lg overflow-x-auto scrollbar-hide">
       {statusOptions.map((opt) => (
         <button
           key={opt.value}
           onClick={() => onStatusChange(opt.value)}
-          className={`px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap min-w-[44px] min-h-[44px] flex items-center justify-center ${
+          className={`flex-shrink-0 px-3 py-1.5 text-sm font-medium rounded-md transition-all whitespace-nowrap min-w-[44px] min-h-[44px] flex items-center justify-center ${
             status === opt.value
               ? 'bg-gray-700 text-gray-100 shadow-sm'
               : 'text-gray-500 hover:text-gray-300'

package/src/components/MilestonePreview.tsx

@@ -9,6 +9,7 @@ import { StatusDot } from './StatusDot'
 import { PriorityBadge } from './PriorityBadge'
 import { MarkdownContent, buildLinkMap } from './MarkdownContent'
 import { getMarkdownContent, resolveMilestoneFile } from '../services/markdown.service'
+import { getGitHubParams } from '../lib/github-auth'
 import { formatMilestoneName } from '../lib/display'
 import type { MarkdownResult, ResolveFileResult } from '../services/markdown.service'
 
@@ -16,16 +17,6 @@ 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 { close } = useSidePanel()

package/src/components/PreviewButton.tsx

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

package/src/components/SearchInput.tsx

@@ -1,19 +1,38 @@
 import { Search } from 'lucide-react'
+import { useState, useEffect, useRef } from 'react'
 
 interface SearchInputProps {
   value: string
   onChange: (value: string) => void
   placeholder?: string
+  debounceMs?: number
 }
 
-export function SearchInput({ value, onChange, placeholder = 'Search...' }: SearchInputProps) {
+export function SearchInput({ value, onChange, placeholder = 'Search...', debounceMs = 250 }: SearchInputProps) {
+  const [localValue, setLocalValue] = useState(value)
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(null)
+
+  // Sync local value when external value changes (e.g. URL navigation)
+  useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  const handleChange = (next: string) => {
+    setLocalValue(next)
+    if (timerRef.current) clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => onChange(next), debounceMs)
+  }
+
+  // Cleanup timer on unmount
+  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current) }, [])
+
   return (
     <div className="relative">
       <Search className="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
       <input
         type="text"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
+        value={localValue}
+        onChange={(e) => handleChange(e.target.value)}
         placeholder={placeholder}
         className="w-full bg-gray-900 border border-gray-800 rounded-md pl-10 pr-3 py-2 text-base text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-600 transition-colors"
       />

package/src/components/SidePanel.tsx

@@ -1,13 +1,30 @@
 import { X } from 'lucide-react'
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useCallback } from 'react'
 import { useSidePanel } from '../contexts/SidePanelContext'
 import { MilestonePreview } from './MilestonePreview'
 import { TaskPreview } from './TaskPreview'
+import { DocumentPreview } from './DocumentPreview'
+
+function useIsDesktop() {
+  const [isDesktop, setIsDesktop] = useState(() =>
+    typeof window !== 'undefined' ? window.matchMedia('(min-width: 1024px)').matches : true
+  )
+
+  useEffect(() => {
+    const mql = window.matchMedia('(min-width: 1024px)')
+    const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches)
+    mql.addEventListener('change', handler)
+    return () => mql.removeEventListener('change', handler)
+  }, [])
+
+  return isDesktop
+}
 
 export function SidePanel() {
   const { content, isOpen, width, close, setWidth } = useSidePanel()
   const [isResizing, setIsResizing] = useState(false)
   const panelRef = useRef<HTMLDivElement>(null)
+  const isDesktop = useIsDesktop()
 
   // Handle resize drag
   useEffect(() => {
@@ -44,45 +61,84 @@ export function SidePanel() {
     }
   }, [isResizing])
 
+  // Lock body scroll when bottom sheet is open on mobile
+  useEffect(() => {
+    if (!isOpen || isDesktop) return
+    document.body.style.overflow = 'hidden'
+    return () => { document.body.style.overflow = '' }
+  }, [isOpen, isDesktop])
+
   // Don't render at all until first open
   if (!content && !isOpen) {
     return null
   }
 
+  // Desktop: inline width for resizable side panel
+  // Mobile: no inline width, full-width via fixed positioning
+  const panelStyle = isDesktop
+    ? { width: isOpen ? `${width}px` : '0px' }
+    : undefined
+
   return (
-    <div
-      ref={panelRef}
-      className={`relative h-full bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-lg overflow-hidden transition-all duration-300 flex-shrink-0 ${
-        isOpen ? 'opacity-100' : 'opacity-0 w-0 border-l-0'
-      }`}
-      style={{ width: isOpen ? `${width}px` : '0px' }}
-    >
-      {/* Resize Handle */}
-      <div
-        className={`absolute top-0 left-0 bottom-0 w-1 cursor-ew-resize hover:bg-blue-500 hover:w-1 transition-all z-20 ${
-          isResizing ? 'bg-blue-500 w-1' : 'bg-transparent'
-        }`}
-        onMouseDown={() => setIsResizing(true)}
-        aria-label="Resize panel"
-      />
-
-      {/* 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
+    <>
+      {/* Mobile backdrop */}
+      {isOpen && !isDesktop && (
+        <div
+          className="fixed inset-0 bg-black/40 backdrop-blur-sm z-40"
           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>
+        />
+      )}
+
+      {/* Desktop: side panel | Mobile: bottom sheet */}
+      <div
+        ref={panelRef}
+        className={[
+          // Base
+          'bg-white dark:bg-gray-900 shadow-lg overflow-hidden transition-all duration-300 flex-shrink-0',
+          // Mobile: bottom sheet
+          'fixed bottom-0 left-0 right-0 z-50 rounded-t-2xl max-h-[85vh] border-t border-gray-200 dark:border-gray-800',
+          // Desktop: side panel
+          'lg:relative lg:bottom-auto lg:left-auto lg:right-auto lg:z-auto lg:rounded-none lg:max-h-none lg:h-full lg:border-t-0 lg:border-l',
+          // Open/close states
+          isOpen
+            ? 'opacity-100 translate-y-0'
+            : 'opacity-0 translate-y-full lg:translate-y-0 lg:w-0 lg:border-l-0',
+        ].join(' ')}
+        style={panelStyle}
+      >
+        {/* Resize Handle — desktop only */}
+        <div
+          className={`hidden lg:block absolute top-0 left-0 bottom-0 w-1 cursor-ew-resize hover:bg-blue-500 hover:w-1 transition-all z-20 ${
+            isResizing ? 'bg-blue-500 w-1' : 'bg-transparent'
+          }`}
+          onMouseDown={() => setIsResizing(true)}
+          aria-label="Resize panel"
+        />
+
+        {/* Drag indicator — mobile only */}
+        <div className="lg:hidden flex justify-center pt-2 pb-1">
+          <div className="w-10 h-1 rounded-full bg-gray-300 dark:bg-gray-600" />
+        </div>
+
+        {/* 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 overflow-auto h-[calc(100%-57px)]">
-        {content?.type === 'milestone' && <MilestonePreview milestoneId={content.id} />}
-        {content?.type === 'task' && <TaskPreview taskId={content.id} />}
+        {/* Content */}
+        <div className="p-6 overflow-auto h-[60vh] lg:h-[calc(100%-57px)]">
+          {content?.type === 'milestone' && <MilestonePreview milestoneId={content.id} />}
+          {content?.type === 'task' && <TaskPreview taskId={content.id} />}
+          {content?.type === 'document' && <DocumentPreview dirPath={content.dirPath} slug={content.slug} />}
+        </div>
       </div>
-    </div>
+    </>
   )
 }

package/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Link, useRouterState } from '@tanstack/react-router'
-import { LayoutDashboard, Flag, CheckSquare, Clock, Search, PenTool, Puzzle, FileBarChart, Github, X, ChevronLeft, ChevronRight } from 'lucide-react'
+import { LayoutDashboard, Flag, CheckSquare, Clock, Search, PenTool, Puzzle, Archive, FileBarChart, Github, X, ChevronLeft, ChevronRight } from 'lucide-react'
 import { ProjectSelector } from './ProjectSelector'
 import { GitHubInput } from './GitHubInput'
 import { GitHubAuth } from './GitHubAuth'
@@ -12,6 +12,7 @@ const navItems = [
   { to: '/activity' as const, icon: Clock, label: 'Activity' },
   { to: '/designs' as const, icon: PenTool, label: 'Designs' },
   { to: '/patterns' as const, icon: Puzzle, label: 'Patterns' },
+  { to: '/artifacts' as const, icon: Archive, label: 'Artifacts' },
   { to: '/reports' as const, icon: FileBarChart, label: 'Reports' },
   { to: '/github' as const, icon: Github, label: 'GitHub' },
 ]

package/src/components/TaskPreview.tsx

@@ -7,6 +7,7 @@ import { DetailHeader } from './DetailHeader'
 import { PriorityBadge } from './PriorityBadge'
 import { MarkdownContent, buildLinkMap } from './MarkdownContent'
 import { getMarkdownContent, resolveTaskFile } from '../services/markdown.service'
+import { getGitHubParams } from '../lib/github-auth'
 import { formatTaskName, formatMilestoneName } from '../lib/display'
 import type { MarkdownResult } from '../services/markdown.service'
 
@@ -14,16 +15,6 @@ interface TaskPreviewProps {
   taskId: 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 TaskPreview({ taskId }: TaskPreviewProps) {
   const data = useProgressData()
   const { close } = useSidePanel()

package/src/contexts/SidePanelContext.tsx

@@ -3,6 +3,7 @@ import { createContext, useContext, useState, ReactNode } from 'react'
 type PanelContent =
   | { type: 'milestone'; id: string }
   | { type: 'task'; id: string }
+  | { type: 'document'; dirPath: string; slug: string }
   | null
 
 interface SidePanelContextValue {
@@ -11,6 +12,7 @@ interface SidePanelContextValue {
   width: number
   openMilestone: (id: string) => void
   openTask: (id: string) => void
+  openDocument: (dirPath: string, slug: string) => void
   close: () => void
   setWidth: (width: number) => void
 }
@@ -46,6 +48,11 @@ export function SidePanelProvider({ children }: { children: ReactNode }) {
     setIsOpen(true)
   }
 
+  const openDocument = (dirPath: string, slug: string) => {
+    setContent({ type: 'document', dirPath, slug })
+    setIsOpen(true)
+  }
+
   const close = () => {
     setIsOpen(false)
     setTimeout(() => setContent(null), 300) // Wait for animation
@@ -58,7 +65,7 @@ export function SidePanelProvider({ children }: { children: ReactNode }) {
   }
 
   return (
-    <SidePanelContext.Provider value={{ content, isOpen, width, openMilestone, openTask, close, setWidth }}>
+    <SidePanelContext.Provider value={{ content, isOpen, width, openMilestone, openTask, openDocument, close, setWidth }}>
       {children}
     </SidePanelContext.Provider>
   )

package/src/lib/github-auth.ts

@@ -39,6 +39,17 @@ export function setStoredUser(user: GitHubUser) {
   localStorage.setItem(USER_KEY, JSON.stringify(user))
 }
 
+/** Read ?repo=owner/repo from URL search params */
+export 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 getGitHubAuthUrl(clientId: string, redirectUri: string): string {
   const state = crypto.randomUUID()
   sessionStorage.setItem('github_oauth_state', state)

package/src/routeTree.gen.ts

@@ -16,6 +16,7 @@ import { Route as PatternsRouteImport } from './routes/patterns'
 import { Route as MilestonesRouteImport } from './routes/milestones'
 import { Route as GithubRouteImport } from './routes/github'
 import { Route as DesignsRouteImport } from './routes/designs'
+import { Route as ArtifactsRouteImport } from './routes/artifacts'
 import { Route as ActivityRouteImport } from './routes/activity'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as TasksIndexRouteImport } from './routes/tasks.index'
@@ -23,11 +24,13 @@ import { Route as ReportsIndexRouteImport } from './routes/reports.index'
 import { Route as PatternsIndexRouteImport } from './routes/patterns.index'
 import { Route as MilestonesIndexRouteImport } from './routes/milestones.index'
 import { Route as DesignsIndexRouteImport } from './routes/designs.index'
+import { Route as ArtifactsIndexRouteImport } from './routes/artifacts.index'
 import { Route as TasksTaskIdRouteImport } from './routes/tasks.$taskId'
 import { Route as ReportsSlugRouteImport } from './routes/reports.$slug'
 import { Route as PatternsSlugRouteImport } from './routes/patterns.$slug'
 import { Route as MilestonesMilestoneIdRouteImport } from './routes/milestones.$milestoneId'
 import { Route as DesignsSlugRouteImport } from './routes/designs.$slug'
+import { Route as ArtifactsSlugRouteImport } from './routes/artifacts.$slug'
 import { Route as ApiWatchRouteImport } from './routes/api/watch'
 import { Route as AuthGithubCallbackRouteImport } from './routes/auth/github/callback'
 
@@ -66,6 +69,11 @@ const DesignsRoute = DesignsRouteImport.update({
   path: '/designs',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ArtifactsRoute = ArtifactsRouteImport.update({
+  id: '/artifacts',
+  path: '/artifacts',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ActivityRoute = ActivityRouteImport.update({
   id: '/activity',
   path: '/activity',
@@ -101,6 +109,11 @@ const DesignsIndexRoute = DesignsIndexRouteImport.update({
   path: '/',
   getParentRoute: () => DesignsRoute,
 } as any)
+const ArtifactsIndexRoute = ArtifactsIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ArtifactsRoute,
+} as any)
 const TasksTaskIdRoute = TasksTaskIdRouteImport.update({
   id: '/$taskId',
   path: '/$taskId',
@@ -126,6 +139,11 @@ const DesignsSlugRoute = DesignsSlugRouteImport.update({
   path: '/$slug',
   getParentRoute: () => DesignsRoute,
 } as any)
+const ArtifactsSlugRoute = ArtifactsSlugRouteImport.update({
+  id: '/$slug',
+  path: '/$slug',
+  getParentRoute: () => ArtifactsRoute,
+} as any)
 const ApiWatchRoute = ApiWatchRouteImport.update({
   id: '/api/watch',
   path: '/api/watch',
@@ -140,6 +158,7 @@ const AuthGithubCallbackRoute = AuthGithubCallbackRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/activity': typeof ActivityRoute
+  '/artifacts': typeof ArtifactsRouteWithChildren
   '/designs': typeof DesignsRouteWithChildren
   '/github': typeof GithubRoute
   '/milestones': typeof MilestonesRouteWithChildren
@@ -148,11 +167,13 @@ export interface FileRoutesByFullPath {
   '/search': typeof SearchRoute
   '/tasks': typeof TasksRouteWithChildren
   '/api/watch': typeof ApiWatchRoute
+  '/artifacts/$slug': typeof ArtifactsSlugRoute
   '/designs/$slug': typeof DesignsSlugRoute
   '/milestones/$milestoneId': typeof MilestonesMilestoneIdRoute
   '/patterns/$slug': typeof PatternsSlugRoute
   '/reports/$slug': typeof ReportsSlugRoute
   '/tasks/$taskId': typeof TasksTaskIdRoute
+  '/artifacts/': typeof ArtifactsIndexRoute
   '/designs/': typeof DesignsIndexRoute
   '/milestones/': typeof MilestonesIndexRoute
   '/patterns/': typeof PatternsIndexRoute
@@ -166,11 +187,13 @@ export interface FileRoutesByTo {
   '/github': typeof GithubRoute
   '/search': typeof SearchRoute
   '/api/watch': typeof ApiWatchRoute
+  '/artifacts/$slug': typeof ArtifactsSlugRoute
   '/designs/$slug': typeof DesignsSlugRoute
   '/milestones/$milestoneId': typeof MilestonesMilestoneIdRoute
   '/patterns/$slug': typeof PatternsSlugRoute
   '/reports/$slug': typeof ReportsSlugRoute
   '/tasks/$taskId': typeof TasksTaskIdRoute
+  '/artifacts': typeof ArtifactsIndexRoute
   '/designs': typeof DesignsIndexRoute
   '/milestones': typeof MilestonesIndexRoute
   '/patterns': typeof PatternsIndexRoute
@@ -182,6 +205,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/activity': typeof ActivityRoute
+  '/artifacts': typeof ArtifactsRouteWithChildren
   '/designs': typeof DesignsRouteWithChildren
   '/github': typeof GithubRoute
   '/milestones': typeof MilestonesRouteWithChildren
@@ -190,11 +214,13 @@ export interface FileRoutesById {
   '/search': typeof SearchRoute
   '/tasks': typeof TasksRouteWithChildren
   '/api/watch': typeof ApiWatchRoute
+  '/artifacts/$slug': typeof ArtifactsSlugRoute
   '/designs/$slug': typeof DesignsSlugRoute
   '/milestones/$milestoneId': typeof MilestonesMilestoneIdRoute
   '/patterns/$slug': typeof PatternsSlugRoute
   '/reports/$slug': typeof ReportsSlugRoute
   '/tasks/$taskId': typeof TasksTaskIdRoute
+  '/artifacts/': typeof ArtifactsIndexRoute
   '/designs/': typeof DesignsIndexRoute
   '/milestones/': typeof MilestonesIndexRoute
   '/patterns/': typeof PatternsIndexRoute
@@ -207,6 +233,7 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/activity'
+    | '/artifacts'
     | '/designs'
     | '/github'
     | '/milestones'
@@ -215,11 +242,13 @@ export interface FileRouteTypes {
     | '/search'
     | '/tasks'
     | '/api/watch'
+    | '/artifacts/$slug'
     | '/designs/$slug'
     | '/milestones/$milestoneId'
     | '/patterns/$slug'
     | '/reports/$slug'
     | '/tasks/$taskId'
+    | '/artifacts/'
     | '/designs/'
     | '/milestones/'
     | '/patterns/'
@@ -233,11 +262,13 @@ export interface FileRouteTypes {
     | '/github'
     | '/search'
     | '/api/watch'
+    | '/artifacts/$slug'
     | '/designs/$slug'
     | '/milestones/$milestoneId'
     | '/patterns/$slug'
     | '/reports/$slug'
     | '/tasks/$taskId'
+    | '/artifacts'
     | '/designs'
     | '/milestones'
     | '/patterns'
@@ -248,6 +279,7 @@ export interface FileRouteTypes {
     | '__root__'
     | '/'
     | '/activity'
+    | '/artifacts'
     | '/designs'
     | '/github'
     | '/milestones'
@@ -256,11 +288,13 @@ export interface FileRouteTypes {
     | '/search'
     | '/tasks'
     | '/api/watch'
+    | '/artifacts/$slug'
     | '/designs/$slug'
     | '/milestones/$milestoneId'
     | '/patterns/$slug'
     | '/reports/$slug'
     | '/tasks/$taskId'
+    | '/artifacts/'
     | '/designs/'
     | '/milestones/'
     | '/patterns/'
@@ -272,6 +306,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ActivityRoute: typeof ActivityRoute
+  ArtifactsRoute: typeof ArtifactsRouteWithChildren
   DesignsRoute: typeof DesignsRouteWithChildren
   GithubRoute: typeof GithubRoute
   MilestonesRoute: typeof MilestonesRouteWithChildren
@@ -334,6 +369,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DesignsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/artifacts': {
+      id: '/artifacts'
+      path: '/artifacts'
+      fullPath: '/artifacts'
+      preLoaderRoute: typeof ArtifactsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/activity': {
       id: '/activity'
       path: '/activity'
@@ -383,6 +425,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DesignsIndexRouteImport
       parentRoute: typeof DesignsRoute
     }
+    '/artifacts/': {
+      id: '/artifacts/'
+      path: '/'
+      fullPath: '/artifacts/'
+      preLoaderRoute: typeof ArtifactsIndexRouteImport
+      parentRoute: typeof ArtifactsRoute
+    }
     '/tasks/$taskId': {
       id: '/tasks/$taskId'
       path: '/$taskId'
@@ -418,6 +467,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DesignsSlugRouteImport
       parentRoute: typeof DesignsRoute
     }
+    '/artifacts/$slug': {
+      id: '/artifacts/$slug'
+      path: '/$slug'
+      fullPath: '/artifacts/$slug'
+      preLoaderRoute: typeof ArtifactsSlugRouteImport
+      parentRoute: typeof ArtifactsRoute
+    }
     '/api/watch': {
       id: '/api/watch'
       path: '/api/watch'
@@ -435,6 +491,20 @@ declare module '@tanstack/react-router' {
   }
 }
 
+interface ArtifactsRouteChildren {
+  ArtifactsSlugRoute: typeof ArtifactsSlugRoute
+  ArtifactsIndexRoute: typeof ArtifactsIndexRoute
+}
+
+const ArtifactsRouteChildren: ArtifactsRouteChildren = {
+  ArtifactsSlugRoute: ArtifactsSlugRoute,
+  ArtifactsIndexRoute: ArtifactsIndexRoute,
+}
+
+const ArtifactsRouteWithChildren = ArtifactsRoute._addFileChildren(
+  ArtifactsRouteChildren,
+)
+
 interface DesignsRouteChildren {
   DesignsSlugRoute: typeof DesignsSlugRoute
   DesignsIndexRoute: typeof DesignsIndexRoute
@@ -504,6 +574,7 @@ const TasksRouteWithChildren = TasksRoute._addFileChildren(TasksRouteChildren)
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ActivityRoute: ActivityRoute,
+  ArtifactsRoute: ArtifactsRouteWithChildren,
   DesignsRoute: DesignsRouteWithChildren,
   GithubRoute: GithubRoute,
   MilestonesRoute: MilestonesRouteWithChildren,

package/src/routes/__root.tsx

@@ -121,12 +121,19 @@ function RootLayout() {
 
     const repoParam = getRepoFromUrl()
     // Repo param takes precedence over default local data
-    if (repoParam) {
+    // In hosted mode with no repo param, default to prmichaelsen/agent-context-protocol
+    const target = repoParam
+      || (import.meta.env.VITE_HOSTED && !context.progressData
+        ? { owner: 'prmichaelsen', repo: 'agent-context-protocol' }
+        : null)
+
+    if (target) {
       const token = getStoredToken()
-      void (fetchGitHubProgress({ data: { ...repoParam, token: token || undefined } }) as Promise<GitHubResult>).then((result) => {
+      void (fetchGitHubProgress({ data: { ...target, token: token || undefined } }) as Promise<GitHubResult>).then((result) => {
         if (result.ok) {
           setProgressData(result.data)
-          setCurrentProject(`${repoParam.owner}/${repoParam.repo}`)
+          setCurrentProject(`${target.owner}/${target.repo}`)
+          setRepoInUrl(`${target.owner}/${target.repo}`)
         }
       })
     }

package/src/routes/artifacts.$slug.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DocumentDetail } from '../components/DocumentDetail'
+
+export const Route = createFileRoute('/artifacts/$slug')({
+  component: ArtifactDetailPage,
+})
+
+function ArtifactDetailPage() {
+  const { slug } = Route.useParams()
+  return (
+    <DocumentDetail
+      slug={slug}
+      dirPath="agent/artifacts"
+      sectionLabel="Artifacts"
+      sectionHref="/artifacts"
+    />
+  )
+}

package/src/routes/artifacts.index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DocumentList } from '../components/DocumentList'
+
+export const Route = createFileRoute('/artifacts/')({
+  component: ArtifactsPage,
+})
+
+function ArtifactsPage() {
+  return <DocumentList title="Artifacts" dirPath="agent/artifacts" baseTo="/artifacts" />
+}

package/src/routes/artifacts.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/artifacts')({
+  component: ArtifactsLayout,
+})
+
+function ArtifactsLayout() {
+  return <Outlet />
+}

package/src/routes/milestones.index.tsx

@@ -49,39 +49,41 @@ function MilestonesPage() {
 
   if (!filtered) {
     return (
-      <div className="p-6">
+      <div className="py-4 px-4 lg:p-6">
         <p className="text-gray-600 text-sm">No data loaded</p>
       </div>
     )
   }
 
   return (
-    <div className="p-6">
-      <div className="flex items-center justify-between mb-4">
+    <div className="py-4 lg:p-6">
+      <div className="flex items-center justify-between mb-4 px-4 lg:px-0">
         <h2 className="text-lg font-semibold">Milestones</h2>
         <ViewToggle value={view} onChange={setView} />
       </div>
       {view !== 'kanban' && (
-        <div className="flex items-center gap-3 mb-4">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-4 px-4 lg:px-0">
           <FilterBar status={status} onStatusChange={setStatus} />
-          <div className="w-64">
+          <div className="w-full sm:w-64">
             <SearchInput value={search} onChange={setSearch} placeholder="Filter milestones..." />
           </div>
         </div>
       )}
-      {view === 'table' ? (
-        <MilestoneTable milestones={filtered.milestones} tasks={filtered.tasks} />
-      ) : view === 'tree' ? (
-        <MilestoneTree milestones={filtered.milestones} tasks={filtered.tasks} />
-      ) : view === 'kanban' ? (
-        <MilestoneKanban milestones={filtered.milestones} tasks={filtered.tasks} />
-      ) : view === 'gantt' ? (
-        <MilestoneGantt milestones={filtered.milestones} tasks={filtered.tasks} />
-      ) : (
-        <Suspense fallback={<p className="text-gray-500 text-sm">Loading graph...</p>}>
-          <DependencyGraph data={filtered} />
-        </Suspense>
-      )}
+      <div className="overflow-x-auto">
+        {view === 'table' ? (
+          <MilestoneTable milestones={filtered.milestones} tasks={filtered.tasks} />
+        ) : view === 'tree' ? (
+          <MilestoneTree milestones={filtered.milestones} tasks={filtered.tasks} />
+        ) : view === 'kanban' ? (
+          <MilestoneKanban milestones={filtered.milestones} tasks={filtered.tasks} />
+        ) : view === 'gantt' ? (
+          <MilestoneGantt milestones={filtered.milestones} tasks={filtered.tasks} />
+        ) : (
+          <Suspense fallback={<p className="text-gray-500 text-sm">Loading graph...</p>}>
+            <DependencyGraph data={filtered} />
+          </Suspense>
+        )}
+      </div>
     </div>
   )
 }