@prmichaelsen/acp-visualizer 0.10.3 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.10.3",
+  "version": "0.12.0",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {
@@ -18,6 +18,7 @@
     "serve": "vite preview",
     "deploy": "export $(cat .env.cloudflare.local | xargs) && VITE_HOSTED=true npm run build && wrangler deploy",
     "tail": "export $(cat .env.cloudflare.local | xargs) && wrangler tail",
+    "wrangler": "export $(cat .env.cloudflare.local | xargs) && wrangler",
     "test": "vitest",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",

package/src/components/DocumentList.tsx

@@ -15,13 +15,16 @@ export function DocumentList({ title, dirPath, baseTo, github }: DocumentListPro
   const [files, setFiles] = useState<AgentFile[]>([])
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
+  const [directoryExists, setDirectoryExists] = useState(true)
 
   useEffect(() => {
     setLoading(true)
+    setDirectoryExists(true)
     listAgentDirectory({ data: { dirPath, github } })
       .then((result) => {
         if (result.ok) {
           setFiles(result.files)
+          setDirectoryExists(result.directoryExists !== false)
         } else {
           setError(result.error)
         }
@@ -54,7 +57,18 @@ export function DocumentList({ title, dirPath, baseTo, github }: DocumentListPro
     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>
+        {!directoryExists && github ? (
+          <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.
+            </p>
+            <p className="text-xs text-yellow-400/80">
+              This repository may not follow the standard ACP structure. You can create this directory and add .md files to populate this section.
+            </p>
+          </div>
+        ) : (
+          <p className="text-sm text-gray-500">No documents found in <code className="text-gray-400">{dirPath}/</code></p>
+        )}
       </div>
     )
   }

package/src/components/GitHubAuth.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react'
+import { LogIn, LogOut } from 'lucide-react'
+import { getStoredToken, getStoredUser, clearStoredToken, getGitHubAuthUrl } from '../lib/github-auth'
+import type { GitHubUser } from '../lib/github-auth'
+
+export function GitHubAuth() {
+  const [token, setToken] = useState<string | null>(null)
+  const [user, setUser] = useState<GitHubUser | null>(null)
+
+  useEffect(() => {
+    setToken(getStoredToken())
+    setUser(getStoredUser())
+  }, [])
+
+  const handleLogin = () => {
+    const clientId = import.meta.env.VITE_GITHUB_CLIENT_ID
+    if (!clientId) {
+      alert('GitHub OAuth not configured')
+      return
+    }
+
+    const redirectUri = `${window.location.origin}/auth/github/callback`
+    const authUrl = getGitHubAuthUrl(clientId, redirectUri)
+    window.location.href = authUrl
+  }
+
+  const handleLogout = () => {
+    clearStoredToken()
+    setToken(null)
+    setUser(null)
+  }
+
+  if (token && user) {
+    return (
+      <div className="flex items-center gap-2 p-2 bg-gray-900 border border-gray-800 rounded-md">
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          {user.avatar_url && (
+            <img
+              src={user.avatar_url}
+              alt={user.login}
+              className="w-6 h-6 rounded-full"
+            />
+          )}
+          <div className="flex-1 min-w-0">
+            <p className="text-xs font-medium text-gray-200 truncate">{user.name || user.login}</p>
+            <p className="text-xs text-gray-500 truncate">@{user.login}</p>
+          </div>
+        </div>
+        <button
+          onClick={handleLogout}
+          className="p-1.5 text-gray-400 hover:text-gray-200 hover:bg-gray-800 rounded transition-colors"
+          title="Sign out"
+        >
+          <LogOut className="w-4 h-4" />
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      onClick={handleLogin}
+      className="flex items-center justify-center gap-2 w-full px-3 py-2 text-sm text-gray-300 bg-gray-800 border border-gray-700 rounded-md hover:bg-gray-700 transition-colors"
+    >
+      <LogIn className="w-4 h-4" />
+      Sign in with GitHub
+    </button>
+  )
+}

package/src/components/GitHubInput.tsx

@@ -1,19 +1,86 @@
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Github, Loader2 } from 'lucide-react'
+import { getStoredToken } from '../lib/github-auth'
+import { searchGitHubRepos } from '../services/github-oauth.service'
 
 interface GitHubInputProps {
   onLoad: (owner: string, repo: string) => Promise<void>
 }
 
+interface RepoSuggestion {
+  full_name: string
+  description: string | null
+  private: boolean
+}
+
 export function GitHubInput({ onLoad }: GitHubInputProps) {
   const [value, setValue] = useState('')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [suggestions, setSuggestions] = useState<RepoSuggestion[]>([])
+  const [showSuggestions, setShowSuggestions] = useState(false)
+  const [searchLoading, setSearchLoading] = useState(false)
+  const [dropdownStyle, setDropdownStyle] = useState<{ top: number; left: number; width: number }>({ top: 0, left: 0, width: 0 })
+  const inputRef = useRef<HTMLDivElement>(null)
+
+  const token = getStoredToken()
+
+  // Update dropdown position when shown
+  useEffect(() => {
+    if (showSuggestions && inputRef.current) {
+      const rect = inputRef.current.getBoundingClientRect()
+      setDropdownStyle({
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+      })
+    }
+  }, [showSuggestions])
+
+  // Search for repos when user types (authenticated only)
+  useEffect(() => {
+    if (!token || !value.trim() || value.includes('/')) {
+      setSuggestions([])
+      return
+    }
+
+    const timeoutId = setTimeout(async () => {
+      setSearchLoading(true)
+      try {
+        const result = await searchGitHubRepos({ data: { token, query: value } })
+        if (result.ok) {
+          setSuggestions(result.repos)
+          setShowSuggestions(true)
+        }
+      } catch {
+        // Silently fail - not critical
+      } finally {
+        setSearchLoading(false)
+      }
+    }, 300)
+
+    return () => clearTimeout(timeoutId)
+  }, [value, token])
 
-  const handleSubmit = async () => {
+  // Close suggestions when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (inputRef.current && !inputRef.current.contains(event.target as Node)) {
+        setShowSuggestions(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const handleSubmit = async (repoFullName?: string) => {
     setError(null)
+    setShowSuggestions(false)
+
+    const input = repoFullName || value.trim()
+
     // Parse owner/repo from various formats
-    const cleaned = value.trim()
+    const cleaned = input
       .replace(/^https?:\/\/github\.com\//, '')
       .replace(/\.git$/, '')
       .replace(/\/$/, '')
@@ -28,6 +95,7 @@ export function GitHubInput({ onLoad }: GitHubInputProps) {
     try {
       await onLoad(parts[0], parts[1])
       setValue('')
+      setSuggestions([])
     } catch {
       setError('Failed to load')
     } finally {
@@ -36,7 +104,7 @@ export function GitHubInput({ onLoad }: GitHubInputProps) {
   }
 
   return (
-    <div>
+    <div ref={inputRef} className="relative">
       <div className="flex gap-1">
         <div className="relative flex-1">
           <Github className="absolute left-2 top-2 w-4 h-4 text-gray-500" />
@@ -44,19 +112,60 @@ export function GitHubInput({ onLoad }: GitHubInputProps) {
             type="text"
             value={value}
             onChange={(e) => { setValue(e.target.value); setError(null) }}
-            onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
-            placeholder="owner/repo"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleSubmit()
+              } else if (e.key === 'Escape') {
+                setShowSuggestions(false)
+              }
+            }}
+            onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
+            placeholder={token ? "Search your repos..." : "owner/repo"}
             className="w-full bg-gray-900 border border-gray-800 rounded-md pl-8 pr-2 py-2 text-base text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-600 transition-colors"
           />
+          {searchLoading && (
+            <Loader2 className="absolute right-2 top-2 w-4 h-4 text-gray-500 animate-spin" />
+          )}
         </div>
         <button
-          onClick={handleSubmit}
+          onClick={() => handleSubmit()}
           disabled={loading || !value.trim()}
           className="px-3 py-2 bg-gray-800 border border-gray-700 rounded-md text-sm text-gray-300 hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
         >
           {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Go'}
         </button>
       </div>
+
+      {/* Suggestions dropdown - using fixed positioning to avoid clipping */}
+      {showSuggestions && suggestions.length > 0 && (
+        <div
+          className="fixed z-[100] bg-gray-900 border border-gray-800 rounded-md shadow-lg max-h-60 overflow-y-auto"
+          style={{
+            top: `${dropdownStyle.top}px`,
+            left: `${dropdownStyle.left}px`,
+            width: `${dropdownStyle.width}px`,
+          }}
+        >
+          {suggestions.map((repo) => (
+            <button
+              key={repo.full_name}
+              onClick={() => handleSubmit(repo.full_name)}
+              className="w-full text-left px-3 py-2 hover:bg-gray-800 transition-colors border-b border-gray-800 last:border-b-0"
+            >
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-gray-200 font-medium">{repo.full_name}</span>
+                {repo.private && (
+                  <span className="text-xs px-1.5 py-0.5 bg-yellow-900/30 text-yellow-500 rounded">Private</span>
+                )}
+              </div>
+              {repo.description && (
+                <p className="text-xs text-gray-500 mt-0.5 truncate">{repo.description}</p>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+
       {error && (
         <p className="text-xs text-red-400 mt-1">{error}</p>
       )}

package/src/components/SidePanel.tsx

@@ -1,10 +1,48 @@
 import { X } from 'lucide-react'
+import { useRef, useState, useEffect } from 'react'
 import { useSidePanel } from '../contexts/SidePanelContext'
 import { MilestonePreview } from './MilestonePreview'
 import { TaskPreview } from './TaskPreview'
 
 export function SidePanel() {
-  const { content, isOpen, close } = useSidePanel()
+  const { content, isOpen, width, close, setWidth } = useSidePanel()
+  const [isResizing, setIsResizing] = useState(false)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  // Handle resize drag
+  useEffect(() => {
+    if (!isResizing) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!panelRef.current) return
+      const panelRect = panelRef.current.getBoundingClientRect()
+      const newWidth = panelRect.right - e.clientX
+      setWidth(newWidth)
+    }
+
+    const handleMouseUp = () => {
+      setIsResizing(false)
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isResizing, setWidth])
+
+  // Prevent text selection while resizing
+  useEffect(() => {
+    if (isResizing) {
+      document.body.style.userSelect = 'none'
+      document.body.style.cursor = 'ew-resize'
+    } else {
+      document.body.style.userSelect = ''
+      document.body.style.cursor = ''
+    }
+  }, [isResizing])
 
   // Don't render at all until first open
   if (!content && !isOpen) {
@@ -12,39 +50,39 @@ export function SidePanel() {
   }
 
   return (
-    <>
-      {/* Backdrop */}
+    <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={`fixed inset-0 bg-black/30 backdrop-blur-sm z-40 transition-opacity duration-300 ${
-          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        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'
         }`}
-        onClick={close}
+        onMouseDown={() => setIsResizing(true)}
+        aria-label="Resize panel"
       />
 
-      {/* Panel */}
-      <div
-        className={`fixed top-0 right-0 h-full w-full lg:max-w-2xl bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-2xl z-50 overflow-auto transition-transform duration-300 ${
-          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>
+      {/* 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} />}
       </div>
-    </>
+    </div>
   )
 }

package/src/components/Sidebar.tsx

@@ -1,7 +1,8 @@
 import { Link, useRouterState } from '@tanstack/react-router'
-import { LayoutDashboard, Flag, CheckSquare, Clock, Search, PenTool, Puzzle, FileBarChart, X } from 'lucide-react'
+import { LayoutDashboard, Flag, CheckSquare, Clock, Search, PenTool, Puzzle, FileBarChart, Github, X } from 'lucide-react'
 import { ProjectSelector } from './ProjectSelector'
 import { GitHubInput } from './GitHubInput'
+import { GitHubAuth } from './GitHubAuth'
 import type { AcpProject } from '../services/projects.service'
 
 const navItems = [
@@ -12,6 +13,7 @@ const navItems = [
   { to: '/designs' as const, icon: PenTool, label: 'Designs' },
   { to: '/patterns' as const, icon: Puzzle, label: 'Patterns' },
   { to: '/reports' as const, icon: FileBarChart, label: 'Reports' },
+  { to: '/github' as const, icon: Github, label: 'GitHub' },
 ]
 
 interface SidebarProps {
@@ -26,7 +28,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
   const location = useRouterState({ select: (s) => s.location })
 
   return (
-    <nav className="w-full lg:w-56 h-auto max-h-[80vh] lg:h-full border-t lg:border-t-0 lg:border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0 rounded-t-2xl lg:rounded-none overflow-hidden">
+    <nav className="w-full lg:w-56 h-auto max-h-[80vh] lg:h-full border-t lg:border-t-0 lg:border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0 rounded-t-2xl lg:rounded-none overflow-y-auto">
       <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
         <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 tracking-wide">
           ACP Visualizer
@@ -50,7 +52,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
           />
         </div>
       )}
-      <div className="flex-1 py-2 overflow-y-auto">
+      <div className="py-2">
         {navItems.map((item) => {
           const isActive =
             item.to === '/'
@@ -74,7 +76,8 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
           )
         })}
       </div>
-      <div className="p-3 border-t border-gray-200 dark:border-gray-800 space-y-2">
+      <hr className="border-gray-200 dark:border-gray-800" />
+      <div className="p-3 space-y-2">
         <Link
           to="/search"
           className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-500 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-800 rounded-md hover:text-gray-900 dark:hover:text-gray-300 hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
@@ -83,6 +86,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
           <Search className="w-4 h-4" />
           Search...
         </Link>
+        <GitHubAuth />
         {onGitHubLoad && (
           <GitHubInput onLoad={onGitHubLoad} />
         )}

package/src/contexts/SidePanelContext.tsx

@@ -8,16 +8,23 @@ type PanelContent =
 interface SidePanelContextValue {
   content: PanelContent
   isOpen: boolean
+  width: number
   openMilestone: (id: string) => void
   openTask: (id: string) => void
   close: () => void
+  setWidth: (width: number) => void
 }
 
 const SidePanelContext = createContext<SidePanelContextValue | undefined>(undefined)
 
+const MIN_WIDTH = 300
+const MAX_WIDTH = 800
+const DEFAULT_WIDTH = 500
+
 export function SidePanelProvider({ children }: { children: ReactNode }) {
   const [content, setContent] = useState<PanelContent>(null)
   const [isOpen, setIsOpen] = useState(false)
+  const [width, setWidthState] = useState(DEFAULT_WIDTH)
 
   const openMilestone = (id: string) => {
     setContent({ type: 'milestone', id })
@@ -34,8 +41,13 @@ export function SidePanelProvider({ children }: { children: ReactNode }) {
     setTimeout(() => setContent(null), 300) // Wait for animation
   }
 
+  const setWidth = (newWidth: number) => {
+    const clampedWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, newWidth))
+    setWidthState(clampedWidth)
+  }
+
   return (
-    <SidePanelContext.Provider value={{ content, isOpen, openMilestone, openTask, close }}>
+    <SidePanelContext.Provider value={{ content, isOpen, width, openMilestone, openTask, close, setWidth }}>
       {children}
     </SidePanelContext.Provider>
   )

package/src/lib/github-auth.ts

@@ -0,0 +1,60 @@
+const TOKEN_KEY = 'github_access_token'
+const USER_KEY = 'github_user'
+
+export interface GitHubUser {
+  login: string
+  name: string | null
+  avatar_url: string
+}
+
+export function getStoredToken(): string | null {
+  if (typeof window === 'undefined') return null
+  return localStorage.getItem(TOKEN_KEY)
+}
+
+export function setStoredToken(token: string) {
+  if (typeof window === 'undefined') return
+  localStorage.setItem(TOKEN_KEY, token)
+}
+
+export function clearStoredToken() {
+  if (typeof window === 'undefined') return
+  localStorage.removeItem(TOKEN_KEY)
+  localStorage.removeItem(USER_KEY)
+}
+
+export function getStoredUser(): GitHubUser | null {
+  if (typeof window === 'undefined') return null
+  const stored = localStorage.getItem(USER_KEY)
+  if (!stored) return null
+  try {
+    return JSON.parse(stored)
+  } catch {
+    return null
+  }
+}
+
+export function setStoredUser(user: GitHubUser) {
+  if (typeof window === 'undefined') return
+  localStorage.setItem(USER_KEY, JSON.stringify(user))
+}
+
+export function getGitHubAuthUrl(clientId: string, redirectUri: string): string {
+  const state = crypto.randomUUID()
+  sessionStorage.setItem('github_oauth_state', state)
+
+  const params = new URLSearchParams({
+    client_id: clientId,
+    redirect_uri: redirectUri,
+    scope: 'repo',
+    state,
+  })
+
+  return `https://github.com/login/oauth/authorize?${params.toString()}`
+}
+
+export function validateOAuthState(receivedState: string): boolean {
+  const storedState = sessionStorage.getItem('github_oauth_state')
+  sessionStorage.removeItem('github_oauth_state')
+  return storedState === receivedState
+}

package/src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as SearchRouteImport } from './routes/search'
 import { Route as ReportsRouteImport } from './routes/reports'
 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 ActivityRouteImport } from './routes/activity'
 import { Route as IndexRouteImport } from './routes/index'
@@ -28,6 +29,7 @@ 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 ApiWatchRouteImport } from './routes/api/watch'
+import { Route as AuthGithubCallbackRouteImport } from './routes/auth/github/callback'
 
 const TasksRoute = TasksRouteImport.update({
   id: '/tasks',
@@ -54,6 +56,11 @@ const MilestonesRoute = MilestonesRouteImport.update({
   path: '/milestones',
   getParentRoute: () => rootRouteImport,
 } as any)
+const GithubRoute = GithubRouteImport.update({
+  id: '/github',
+  path: '/github',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DesignsRoute = DesignsRouteImport.update({
   id: '/designs',
   path: '/designs',
@@ -124,11 +131,17 @@ const ApiWatchRoute = ApiWatchRouteImport.update({
   path: '/api/watch',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AuthGithubCallbackRoute = AuthGithubCallbackRouteImport.update({
+  id: '/auth/github/callback',
+  path: '/auth/github/callback',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/activity': typeof ActivityRoute
   '/designs': typeof DesignsRouteWithChildren
+  '/github': typeof GithubRoute
   '/milestones': typeof MilestonesRouteWithChildren
   '/patterns': typeof PatternsRouteWithChildren
   '/reports': typeof ReportsRouteWithChildren
@@ -145,10 +158,12 @@ export interface FileRoutesByFullPath {
   '/patterns/': typeof PatternsIndexRoute
   '/reports/': typeof ReportsIndexRoute
   '/tasks/': typeof TasksIndexRoute
+  '/auth/github/callback': typeof AuthGithubCallbackRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/activity': typeof ActivityRoute
+  '/github': typeof GithubRoute
   '/search': typeof SearchRoute
   '/api/watch': typeof ApiWatchRoute
   '/designs/$slug': typeof DesignsSlugRoute
@@ -161,12 +176,14 @@ export interface FileRoutesByTo {
   '/patterns': typeof PatternsIndexRoute
   '/reports': typeof ReportsIndexRoute
   '/tasks': typeof TasksIndexRoute
+  '/auth/github/callback': typeof AuthGithubCallbackRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/activity': typeof ActivityRoute
   '/designs': typeof DesignsRouteWithChildren
+  '/github': typeof GithubRoute
   '/milestones': typeof MilestonesRouteWithChildren
   '/patterns': typeof PatternsRouteWithChildren
   '/reports': typeof ReportsRouteWithChildren
@@ -183,6 +200,7 @@ export interface FileRoutesById {
   '/patterns/': typeof PatternsIndexRoute
   '/reports/': typeof ReportsIndexRoute
   '/tasks/': typeof TasksIndexRoute
+  '/auth/github/callback': typeof AuthGithubCallbackRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -190,6 +208,7 @@ export interface FileRouteTypes {
     | '/'
     | '/activity'
     | '/designs'
+    | '/github'
     | '/milestones'
     | '/patterns'
     | '/reports'
@@ -206,10 +225,12 @@ export interface FileRouteTypes {
     | '/patterns/'
     | '/reports/'
     | '/tasks/'
+    | '/auth/github/callback'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/activity'
+    | '/github'
     | '/search'
     | '/api/watch'
     | '/designs/$slug'
@@ -222,11 +243,13 @@ export interface FileRouteTypes {
     | '/patterns'
     | '/reports'
     | '/tasks'
+    | '/auth/github/callback'
   id:
     | '__root__'
     | '/'
     | '/activity'
     | '/designs'
+    | '/github'
     | '/milestones'
     | '/patterns'
     | '/reports'
@@ -243,18 +266,21 @@ export interface FileRouteTypes {
     | '/patterns/'
     | '/reports/'
     | '/tasks/'
+    | '/auth/github/callback'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ActivityRoute: typeof ActivityRoute
   DesignsRoute: typeof DesignsRouteWithChildren
+  GithubRoute: typeof GithubRoute
   MilestonesRoute: typeof MilestonesRouteWithChildren
   PatternsRoute: typeof PatternsRouteWithChildren
   ReportsRoute: typeof ReportsRouteWithChildren
   SearchRoute: typeof SearchRoute
   TasksRoute: typeof TasksRouteWithChildren
   ApiWatchRoute: typeof ApiWatchRoute
+  AuthGithubCallbackRoute: typeof AuthGithubCallbackRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -294,6 +320,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MilestonesRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/github': {
+      id: '/github'
+      path: '/github'
+      fullPath: '/github'
+      preLoaderRoute: typeof GithubRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/designs': {
       id: '/designs'
       path: '/designs'
@@ -392,6 +425,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiWatchRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/auth/github/callback': {
+      id: '/auth/github/callback'
+      path: '/auth/github/callback'
+      fullPath: '/auth/github/callback'
+      preLoaderRoute: typeof AuthGithubCallbackRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
@@ -465,12 +505,14 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ActivityRoute: ActivityRoute,
   DesignsRoute: DesignsRouteWithChildren,
+  GithubRoute: GithubRoute,
   MilestonesRoute: MilestonesRouteWithChildren,
   PatternsRoute: PatternsRouteWithChildren,
   ReportsRoute: ReportsRouteWithChildren,
   SearchRoute: SearchRoute,
   TasksRoute: TasksRouteWithChildren,
   ApiWatchRoute: ApiWatchRoute,
+  AuthGithubCallbackRoute: AuthGithubCallbackRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

package/src/routes/__root.tsx

@@ -1,13 +1,14 @@
-import { HeadContent, Scripts, createRootRoute, Outlet, useRouter, useRouterState } from '@tanstack/react-router'
+import { HeadContent, Scripts, createRootRoute, Outlet } from '@tanstack/react-router'
 import { useState, useCallback, useEffect } from 'react'
 import { Menu, X } from 'lucide-react'
 import { useAutoRefresh } from '../lib/useAutoRefresh'
 import { Sidebar } from '../components/Sidebar'
 import { Header } from '../components/Header'
 import { SidePanel } from '../components/SidePanel'
-import { getProgressData } from '../services/progress-database.service'
+import { getProgressData, type ProgressResult } from '../services/progress-database.service'
 import { listProjects, getProjectProgressPath } from '../services/projects.service'
-import { fetchGitHubProgress } from '../services/github.service'
+import { fetchGitHubProgress, type GitHubResult } from '../services/github.service'
+import { getStoredToken } from '../lib/github-auth'
 import type { ProgressData } from '../lib/types'
 import type { AcpProject } from '../services/projects.service'
 import { ProgressProvider } from '../contexts/ProgressContext'
@@ -28,7 +29,7 @@ export const Route = createRootRoute({
     if (!import.meta.env.VITE_HOSTED) {
       try {
         const [result, projectList] = await Promise.all([
-          getProgressData({ data: {} }),
+          getProgressData({ data: {} }) as Promise<ProgressResult>,
           listProjects(),
         ])
         if (result.ok) {
@@ -120,7 +121,8 @@ function RootLayout() {
     const repoParam = getRepoFromUrl()
     // Repo param takes precedence over default local data
     if (repoParam) {
-      fetchGitHubProgress({ data: repoParam }).then((result) => {
+      const token = getStoredToken()
+      void (fetchGitHubProgress({ data: { ...repoParam, token: token || undefined } }) as Promise<GitHubResult>).then((result) => {
         if (result.ok) {
           setProgressData(result.data)
           setCurrentProject(`${repoParam.owner}/${repoParam.repo}`)
@@ -130,7 +132,8 @@ function RootLayout() {
   }, [initialLoadDone])
 
   const handleGitHubLoad = useCallback(async (owner: string, repo: string) => {
-    const result = await fetchGitHubProgress({ data: { owner, repo } })
+    const token = getStoredToken()
+    const result = await (fetchGitHubProgress({ data: { owner, repo, token: token || undefined } }) as Promise<GitHubResult>)
     if (result.ok) {
       setProgressData(result.data)
       setCurrentProject(`${owner}/${repo}`)
@@ -144,7 +147,7 @@ function RootLayout() {
     try {
       const path = await getProjectProgressPath({ data: { projectId } })
       if (path) {
-        const result = await getProgressData({ data: { path } })
+        const result = await (getProgressData({ data: { path } }) as Promise<ProgressResult>)
         if (result.ok) {
           setProgressData(result.data)
           setCurrentProject(projectId)

package/src/routes/auth/github/callback.tsx

@@ -0,0 +1,86 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+import { exchangeOAuthCode, fetchGitHubUser } from '../../../services/github-oauth.service'
+import { setStoredToken, setStoredUser, validateOAuthState } from '../../../lib/github-auth'
+
+export const Route = createFileRoute('/auth/github/callback')({
+  component: GitHubCallback,
+})
+
+function GitHubCallback() {
+  const navigate = useNavigate()
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const code = params.get('code')
+    const state = params.get('state')
+    const errorParam = params.get('error')
+
+    if (errorParam) {
+      setError(`GitHub OAuth error: ${errorParam}`)
+      return
+    }
+
+    if (!code || !state) {
+      setError('Missing OAuth parameters')
+      return
+    }
+
+    if (!validateOAuthState(state)) {
+      setError('Invalid OAuth state - possible CSRF attack')
+      return
+    }
+
+    exchangeOAuthCode({ data: { code } })
+      .then(async (result) => {
+        if (!result.ok) {
+          setError(result.error)
+          return
+        }
+
+        // Store token
+        setStoredToken(result.token)
+
+        // Fetch user info
+        const userResult = await fetchGitHubUser({ data: { token: result.token } })
+        if (userResult.ok) {
+          setStoredUser(userResult.user)
+        }
+
+        // Redirect back to home
+        navigate({ to: '/' })
+      })
+      .catch((err) => {
+        setError(err instanceof Error ? err.message : 'Unknown error')
+      })
+  }, [navigate])
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-50 dark:bg-gray-900">
+        <div className="text-center max-w-md p-6">
+          <h2 className="text-xl font-semibold text-red-600 dark:text-red-400 mb-2">
+            Authentication Failed
+          </h2>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{error}</p>
+          <button
+            onClick={() => navigate({ to: '/' })}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          >
+            Return Home
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="text-center">
+        <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+        <p className="text-sm text-gray-600 dark:text-gray-400">Connecting to GitHub...</p>
+      </div>
+    </div>
+  )
+}

package/src/routes/github.tsx

@@ -0,0 +1,213 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { Github, Lock, Star, GitFork, Loader2, LogIn } from 'lucide-react'
+import { getStoredToken, getStoredUser } from '../lib/github-auth'
+import { searchGitHubRepos } from '../services/github-oauth.service'
+
+export const Route = createFileRoute('/github')({
+  component: GitHubRepoList,
+})
+
+interface Repo {
+  full_name: string
+  description: string | null
+  private: boolean
+  stargazers_count?: number
+  forks_count?: number
+  language?: string | null
+  updated_at?: string
+}
+
+function GitHubRepoList() {
+  const navigate = useNavigate()
+  const [repos, setRepos] = useState<Repo[]>([])
+  const [filteredRepos, setFilteredRepos] = useState<Repo[]>([])
+  const [searchQuery, setSearchQuery] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const token = getStoredToken()
+  const user = getStoredUser()
+
+  useEffect(() => {
+    if (!token) {
+      setLoading(false)
+      return
+    }
+
+    searchGitHubRepos({ data: { token, query: '' } })
+      .then((result) => {
+        if (result.ok) {
+          setRepos(result.repos as Repo[])
+          setFilteredRepos(result.repos as Repo[])
+        } else {
+          setError(result.error)
+        }
+      })
+      .catch((err) => {
+        setError(err instanceof Error ? err.message : 'Failed to load repos')
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [token])
+
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setFilteredRepos(repos)
+      return
+    }
+
+    const query = searchQuery.toLowerCase()
+    const filtered = repos.filter((repo) =>
+      repo.full_name.toLowerCase().includes(query) ||
+      (repo.description && repo.description.toLowerCase().includes(query))
+    )
+    setFilteredRepos(filtered)
+  }, [searchQuery, repos])
+
+  const handleRepoClick = async (repo: Repo) => {
+    const [owner, repoName] = repo.full_name.split('/')
+    window.location.href = `/?repo=${owner}/${repoName}`
+  }
+
+  if (!token) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center max-w-md p-6">
+          <Github className="w-16 h-16 mx-auto mb-4 text-gray-400" />
+          <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">
+            Sign in Required
+          </h2>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            Sign in with GitHub to view and load your repositories.
+          </p>
+          <button
+            onClick={() => navigate({ to: '/' })}
+            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          >
+            <LogIn className="w-4 h-4" />
+            Go to Home
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <Loader2 className="w-12 h-12 animate-spin mx-auto mb-4 text-blue-600" />
+          <p className="text-sm text-gray-600 dark:text-gray-400">Loading repositories...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center max-w-md p-6">
+          <h2 className="text-xl font-semibold text-red-600 dark:text-red-400 mb-2">
+            Error Loading Repositories
+          </h2>
+          <p className="text-sm text-gray-600 dark:text-gray-400">{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 p-4 lg:p-6">
+        <div className="max-w-5xl mx-auto">
+          <div className="flex items-center gap-3 mb-4">
+            <Github className="w-6 h-6 text-gray-700 dark:text-gray-300" />
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              GitHub Repositories
+            </h1>
+          </div>
+          {user && (
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              Showing repositories for <span className="font-medium text-gray-800 dark:text-gray-200">@{user.login}</span>
+            </p>
+          )}
+          {/* Search */}
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search repositories..."
+            className="w-full px-4 py-2 text-base bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-800 rounded-md text-gray-900 dark:text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          />
+        </div>
+      </div>
+
+      {/* Repo List */}
+      <div className="flex-1 overflow-auto">
+        <div className="max-w-5xl mx-auto p-4 lg:p-6">
+          {filteredRepos.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-gray-600 dark:text-gray-400">
+                {searchQuery ? 'No repositories match your search.' : 'No repositories found.'}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {filteredRepos.map((repo) => (
+                <button
+                  key={repo.full_name}
+                  onClick={() => handleRepoClick(repo)}
+                  className="w-full text-left p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-gray-300 dark:hover:border-gray-700 hover:shadow-md transition-all"
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-2">
+                        <h3 className="text-base font-semibold text-blue-600 dark:text-blue-400 truncate">
+                          {repo.full_name}
+                        </h3>
+                        {repo.private && (
+                          <span className="flex items-center gap-1 px-2 py-0.5 text-xs bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-500 rounded-full shrink-0">
+                            <Lock className="w-3 h-3" />
+                            Private
+                          </span>
+                        )}
+                      </div>
+                      {repo.description && (
+                        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">
+                          {repo.description}
+                        </p>
+                      )}
+                      <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
+                        {repo.language && (
+                          <span className="flex items-center gap-1">
+                            <span className="w-3 h-3 rounded-full bg-blue-500" />
+                            {repo.language}
+                          </span>
+                        )}
+                        {repo.stargazers_count !== undefined && (
+                          <span className="flex items-center gap-1">
+                            <Star className="w-3 h-3" />
+                            {repo.stargazers_count}
+                          </span>
+                        )}
+                        {repo.forks_count !== undefined && (
+                          <span className="flex items-center gap-1">
+                            <GitFork className="w-3 h-3" />
+                            {repo.forks_count}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/services/github-oauth.service.ts

@@ -0,0 +1,128 @@
+import { createServerFn } from '@tanstack/react-start'
+import type { GitHubUser } from '../lib/github-auth'
+
+export type OAuthTokenResult =
+  | { ok: true; token: string }
+  | { ok: false; error: string }
+
+export type GitHubUserResult =
+  | { ok: true; user: GitHubUser }
+  | { ok: false; error: string }
+
+export type GitHubRepoSearchResult =
+  | { ok: true; repos: Array<{ full_name: string; description: string | null; private: boolean; stargazers_count?: number; forks_count?: number; language?: string | null; updated_at?: string }> }
+  | { ok: false; error: string }
+
+export const exchangeOAuthCode = createServerFn({ method: 'POST' })
+  .inputValidator((input: { code: string }) => input)
+  .handler(async ({ data: input }): Promise<OAuthTokenResult> => {
+    const clientId = import.meta.env.VITE_GITHUB_CLIENT_ID || ''
+    const clientSecret = import.meta.env.VITE_GITHUB_CLIENT_SECRET || ''
+
+    if (!clientId || !clientSecret) {
+      return { ok: false, error: 'GitHub OAuth not configured' }
+    }
+
+    try {
+      const response = await fetch('https://github.com/login/oauth/access_token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        },
+        body: JSON.stringify({
+          client_id: clientId,
+          client_secret: clientSecret,
+          code: input.code,
+        }),
+      })
+
+      if (!response.ok) {
+        return { ok: false, error: `OAuth token exchange failed: ${response.statusText}` }
+      }
+
+      const data = await response.json() as { access_token?: string; error?: string }
+
+      if (data.error || !data.access_token) {
+        return { ok: false, error: data.error || 'No access token returned' }
+      }
+
+      return { ok: true, token: data.access_token }
+    } catch (err) {
+      return { ok: false, error: err instanceof Error ? err.message : 'Unknown error' }
+    }
+  })
+
+export const fetchGitHubUser = createServerFn({ method: 'GET' })
+  .inputValidator((input: { token: string }) => input)
+  .handler(async ({ data: input }): Promise<GitHubUserResult> => {
+    try {
+      const response = await fetch('https://api.github.com/user', {
+        headers: {
+          'Authorization': `token ${input.token}`,
+          'User-Agent': 'acp-visualizer',
+        },
+      })
+
+      if (!response.ok) {
+        return { ok: false, error: `Failed to fetch user: ${response.statusText}` }
+      }
+
+      const data = await response.json() as { login: string; name: string | null; avatar_url: string }
+
+      return {
+        ok: true,
+        user: {
+          login: data.login,
+          name: data.name,
+          avatar_url: data.avatar_url,
+        },
+      }
+    } catch (err) {
+      return { ok: false, error: err instanceof Error ? err.message : 'Unknown error' }
+    }
+  })
+
+export const searchGitHubRepos = createServerFn({ method: 'GET' })
+  .inputValidator((input: { token: string; query: string }) => input)
+  .handler(async ({ data: input }): Promise<GitHubRepoSearchResult> => {
+    try {
+      const response = await fetch(
+        `https://api.github.com/user/repos?per_page=100&sort=updated`,
+        {
+          headers: {
+            'Authorization': `token ${input.token}`,
+            'User-Agent': 'acp-visualizer',
+          },
+        }
+      )
+
+      if (!response.ok) {
+        return { ok: false, error: `Failed to fetch repos: ${response.statusText}` }
+      }
+
+      const data = await response.json() as Array<{
+        full_name: string
+        description: string | null
+        private: boolean
+        stargazers_count?: number
+        forks_count?: number
+        language?: string | null
+        updated_at?: string
+      }>
+
+      // Filter by query
+      const filtered = input.query
+        ? data.filter((r) =>
+            r.full_name.toLowerCase().includes(input.query.toLowerCase())
+          )
+        : data
+
+      return {
+        ok: true,
+        repos: filtered.slice(0, 20),
+      }
+    } catch (err) {
+      return { ok: false, error: err instanceof Error ? err.message : 'Unknown error' }
+    }
+  })

package/src/services/markdown.service.ts

@@ -124,7 +124,7 @@ export type AgentFile = {
 }
 
 export type ListDirResult =
-  | { ok: true; files: AgentFile[] }
+  | { ok: true; files: AgentFile[]; directoryExists?: boolean }
   | { ok: false; files: []; error: string }
 
 export const listAgentDirectory = createServerFn({ method: 'GET' })
@@ -197,7 +197,7 @@ async function listDirFromGitHub(
 
     if (!response.ok) {
       if (response.status === 404) {
-        return { ok: true, files: [] }
+        return { ok: true, files: [], directoryExists: false }
       }
       return { ok: false, files: [], error: `GitHub returned ${response.status}` }
     }