@prmichaelsen/acp-visualizer 0.10.3 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.10.3",
+  "version": "0.13.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, ChevronLeft, ChevronRight } 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 {
@@ -20,28 +22,50 @@ interface SidebarProps {
   onProjectSelect?: (projectId: string) => void
   onGitHubLoad?: (owner: string, repo: string) => Promise<void>
   onClose?: () => void
+  isCollapsed?: boolean
+  onToggleCollapse?: () => void
 }
 
-export function Sidebar({ projects = [], currentProject = null, onProjectSelect, onGitHubLoad, onClose }: SidebarProps) {
+export function Sidebar({ projects = [], currentProject = null, onProjectSelect, onGitHubLoad, onClose, isCollapsed = false, onToggleCollapse }: SidebarProps) {
   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 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 transition-all duration-300 ${
+      isCollapsed ? 'lg:w-16' : 'lg:w-56'
+    }`}>
       <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
-        </span>
-        {onClose && (
-          <button
-            onClick={onClose}
-            className="lg:hidden p-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
-            aria-label="Close menu"
-          >
-            <X className="w-4 h-4 text-gray-700 dark:text-gray-300" />
-          </button>
+        {!isCollapsed && (
+          <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 tracking-wide">
+            ACP Visualizer
+          </span>
         )}
+        <div className="flex items-center gap-2">
+          {onToggleCollapse && (
+            <button
+              onClick={onToggleCollapse}
+              className="hidden lg:block p-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
+              aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+            >
+              {isCollapsed ? (
+                <ChevronRight className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+              ) : (
+                <ChevronLeft className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+              )}
+            </button>
+          )}
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="lg:hidden p-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
+              aria-label="Close menu"
+            >
+              <X className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+            </button>
+          )}
+        </div>
       </div>
-      {projects.length > 1 && onProjectSelect && (
+      {projects.length > 1 && onProjectSelect && !isCollapsed && (
         <div className="px-3 pt-3">
           <ProjectSelector
             projects={projects}
@@ -50,7 +74,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 === '/'
@@ -61,32 +85,39 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
             <Link
               key={item.to}
               to={item.to}
-              className={`flex items-center gap-3 px-4 py-2 text-sm transition-colors ${
+              className={`flex items-center gap-3 py-2 text-sm transition-colors ${
+                isCollapsed ? 'px-4 justify-center' : 'px-4'
+              } ${
                 isActive
                   ? 'text-gray-900 dark:text-gray-100 bg-gray-200 dark:bg-gray-800/50'
                   : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-800/30'
               }`}
               onClick={onClose}
+              title={isCollapsed ? item.label : undefined}
             >
               <item.icon className="w-4 h-4" />
-              {item.label}
+              {!isCollapsed && item.label}
             </Link>
           )
         })}
       </div>
-      <div className="p-3 border-t border-gray-200 dark:border-gray-800 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"
-          onClick={onClose}
-        >
-          <Search className="w-4 h-4" />
-          Search...
-        </Link>
-        {onGitHubLoad && (
-          <GitHubInput onLoad={onGitHubLoad} />
-        )}
-      </div>
+      {!isCollapsed && <hr className="border-gray-200 dark:border-gray-800" />}
+      {!isCollapsed && (
+        <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"
+            onClick={onClose}
+          >
+            <Search className="w-4 h-4" />
+            Search...
+          </Link>
+          <GitHubAuth />
+          {onGitHubLoad && (
+            <GitHubInput onLoad={onGitHubLoad} />
+          )}
+        </div>
+      )}
     </nav>
   )
 }

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
+}