@prmichaelsen/acp-visualizer 0.10.3 → 0.13.0

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) {
@@ -111,6 +112,7 @@ function RootLayout() {
   )
   const [initialLoadDone, setInitialLoadDone] = useState(false)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
 
   // On mount, check for ?repo= param and auto-load
   useEffect(() => {
@@ -120,7 +122,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 +133,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 +148,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)
@@ -193,6 +197,8 @@ function RootLayout() {
             onProjectSelect={handleProjectSwitch}
             onGitHubLoad={handleGitHubLoad}
             onClose={() => setMobileMenuOpen(false)}
+            isCollapsed={sidebarCollapsed}
+            onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
           />
         </div>
 

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