@swarmclawai/swarmclaw 0.7.7 → 0.8.0

package/src/components/tasks/task-board.tsx

@@ -3,22 +3,36 @@
 import { useEffect, useCallback, useState, useRef, useMemo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
-import { updateTask, bulkUpdateTasks } from '@/lib/tasks'
+import { updateTask, bulkUpdateTasks, importGitHubIssues, type GitHubIssueImportResult } from '@/lib/tasks'
 import { TaskColumn } from './task-column'
 import { TaskCard } from './task-card'
 import { Skeleton } from '@/components/shared/skeleton'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { inputClass } from '@/components/shared/form-styles'
 import type { BoardTask, BoardTaskStatus } from '@/types'
 import { toast } from 'sonner'
 
 const ACTIVE_COLUMNS: BoardTaskStatus[] = ['backlog', 'queued', 'running', 'completed', 'failed']
 type BoardViewMode = 'board' | 'list'
 type AttentionFilter = 'all' | 'needs-attention' | 'approval' | 'blocked' | 'overdue' | 'failed'
+type TaskScopeFilter = 'user-facing' | 'all' | 'agent'
 
 function isTaskOverdue(task: BoardTask): boolean {
   return !!task.dueAt && task.dueAt < Date.now() && task.status !== 'completed' && task.status !== 'archived'
 }
 
+function isInternalAgentTask(task: BoardTask): boolean {
+  if (task.sourceType === 'schedule' || task.sourceType === 'delegation') return true
+  return Boolean(task.createdByAgentId || task.delegatedByAgentId)
+}
+
+function isTaskRelevantToAgent(task: BoardTask, agentId: string): boolean {
+  return task.agentId === agentId
+    || task.createdByAgentId === agentId
+    || task.delegatedByAgentId === agentId
+}
+
 function matchesAttentionFilter(task: BoardTask, filter: AttentionFilter): boolean {
   const blocked = !!task.blockedBy?.length
   const pendingApproval = !!task.pendingApproval
@@ -139,8 +153,24 @@ export function TaskBoard() {
     if (typeof window === 'undefined') return ''
     return new URLSearchParams(window.location.search).get('tag') || ''
   })
+  const [taskScopeFilter, setTaskScopeFilter] = useState<TaskScopeFilter>(() => {
+    if (typeof window === 'undefined') return 'user-facing'
+    const params = new URLSearchParams(window.location.search)
+    if (params.get('agent')) return 'agent'
+    const raw = params.get('taskView')
+    return raw === 'all' ? 'all' : 'user-facing'
+  })
   const [viewMode, setViewMode] = useState<BoardViewMode>('board')
   const [attentionFilter, setAttentionFilter] = useState<AttentionFilter>('all')
+  const [githubImportOpen, setGitHubImportOpen] = useState(false)
+  const [githubRepo, setGitHubRepo] = useState('')
+  const [githubToken, setGitHubToken] = useState('')
+  const [githubState, setGitHubState] = useState<'open' | 'closed' | 'all'>('open')
+  const [githubLimit, setGitHubLimit] = useState('25')
+  const [githubLabels, setGitHubLabels] = useState('')
+  const [githubImporting, setGitHubImporting] = useState(false)
+  const [githubImportError, setGitHubImportError] = useState<string | null>(null)
+  const [githubImportResult, setGitHubImportResult] = useState<GitHubIssueImportResult | null>(null)
 
   // Seed activeProjectFilter from URL on mount
   useEffect(() => {
@@ -156,16 +186,19 @@ export function TaskBoard() {
   useEffect(() => {
     if (typeof window === 'undefined') return
     const params = new URLSearchParams()
-    if (filterAgentId) params.set('agent', filterAgentId)
+    if (taskScopeFilter === 'agent' && filterAgentId) params.set('agent', filterAgentId)
+    else if (taskScopeFilter === 'all') params.set('taskView', 'all')
     if (filterTag) params.set('tag', filterTag)
     if (activeProjectFilter) params.set('project', activeProjectFilter)
     const qs = params.toString()
     const newUrl = `${window.location.pathname}${qs ? `?${qs}` : ''}`
     window.history.replaceState(null, '', newUrl)
-  }, [filterAgentId, filterTag, activeProjectFilter])
+  }, [filterAgentId, filterTag, activeProjectFilter, taskScopeFilter])
 
   const [loaded, setLoaded] = useState(Object.keys(tasks).length > 0)
-  useEffect(() => { Promise.all([loadTasks(), loadAgents(), loadProjects()]).then(() => setLoaded(true)) }, [])
+  useEffect(() => {
+    Promise.all([loadTasks(), loadAgents(), loadProjects()]).then(() => setLoaded(true))
+  }, [loadAgents, loadProjects, loadTasks])
   useWs('tasks', loadTasks, 5000)
 
   // Collect all unique tags across tasks
@@ -173,17 +206,28 @@ export function TaskBoard() {
 
   const columns: BoardTaskStatus[] = showArchived ? [...ACTIVE_COLUMNS, 'archived'] : ACTIVE_COLUMNS
 
-  const matchesBaseFilters = useCallback((task: BoardTask) => {
+  const matchesScopeFilters = useCallback((task: BoardTask) => {
     if (!showArchived && task.status === 'archived') return false
-    if (filterAgentId && task.agentId !== filterAgentId) return false
+    if (taskScopeFilter === 'user-facing' && isInternalAgentTask(task)) return false
+    if (taskScopeFilter === 'agent' && (!filterAgentId || !isTaskRelevantToAgent(task, filterAgentId))) return false
     if (filterTag && !(task.tags && task.tags.includes(filterTag))) return false
     if (activeProjectFilter && task.projectId !== activeProjectFilter) return false
+    return true
+  }, [activeProjectFilter, filterAgentId, filterTag, showArchived, taskScopeFilter])
+
+  const matchesBaseFilters = useCallback((task: BoardTask) => {
+    if (!matchesScopeFilters(task)) return false
     if (!matchesAttentionFilter(task, attentionFilter)) return false
     return true
-  }, [activeProjectFilter, attentionFilter, filterAgentId, filterTag, showArchived])
+  }, [attentionFilter, matchesScopeFilters])
+
+  const scopedTasks = useMemo(
+    () => Object.values(tasks).filter(matchesScopeFilters),
+    [tasks, matchesScopeFilters],
+  )
 
   const filteredTasks = useMemo(() => (
-    Object.values(tasks)
+    scopedTasks
       .filter(matchesBaseFilters)
       .sort((a, b) => {
         const rankDiff = attentionRank(a) - attentionRank(b)
@@ -192,7 +236,7 @@ export function TaskBoard() {
         if (dueDiff !== 0) return dueDiff
         return b.updatedAt - a.updatedAt
       })
-  ), [tasks, matchesBaseFilters])
+  ), [scopedTasks, matchesBaseFilters])
 
   const tasksByStatus = useCallback((status: BoardTaskStatus) =>
     filteredTasks
@@ -221,9 +265,62 @@ export function TaskBoard() {
 
   const archivedCount = Object.values(tasks).filter((t) => t.status === 'archived').length
 
+  const resetGitHubImportState = useCallback(() => {
+    setGitHubImportError(null)
+    setGitHubImportResult(null)
+  }, [])
+
+  const handleGitHubImport = useCallback(async () => {
+    if (!githubRepo.trim()) {
+      setGitHubImportError('Repository is required.')
+      return
+    }
+
+    setGitHubImporting(true)
+    setGitHubImportError(null)
+    setGitHubImportResult(null)
+
+    try {
+      const rawLimit = Number.parseInt(githubLimit, 10)
+      const limit = Number.isFinite(rawLimit) ? Math.max(1, Math.min(rawLimit, 200)) : 25
+      const result = await importGitHubIssues({
+        repo: githubRepo.trim(),
+        token: githubToken.trim() || undefined,
+        state: githubState,
+        limit,
+        labels: githubLabels
+          .split(',')
+          .map((value) => value.trim())
+          .filter(Boolean),
+        projectId: activeProjectFilter,
+      })
+      setGitHubImportResult(result)
+      await loadTasks()
+      const summary = result.created.length > 0
+        ? `Imported ${result.created.length} issue(s) from ${result.repo}`
+        : `No new issues imported from ${result.repo}`
+      const suffix = result.skipped.length > 0 ? `, skipped ${result.skipped.length} existing` : ''
+      toast.success(summary + suffix)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'GitHub import failed'
+      setGitHubImportError(message)
+      toast.error(message)
+    } finally {
+      setGitHubImporting(false)
+    }
+  }, [
+    activeProjectFilter,
+    githubLabels,
+    githubLimit,
+    githubRepo,
+    githubState,
+    githubToken,
+    loadTasks,
+  ])
+
   // Task counts per project (non-archived)
   const projectTaskCounts: Record<string, number> = {}
-  for (const t of Object.values(tasks)) {
+  for (const t of scopedTasks) {
     if (t.projectId && t.status !== 'archived') {
       projectTaskCounts[t.projectId] = (projectTaskCounts[t.projectId] || 0) + 1
     }
@@ -231,7 +328,7 @@ export function TaskBoard() {
 
   // Summary stats
   const stats = useMemo(() => {
-    const all = Object.values(tasks).filter((t) => t.status !== 'archived')
+    const all = scopedTasks.filter((t) => t.status !== 'archived')
     return {
       total: all.length,
       running: all.filter((t) => t.status === 'running').length,
@@ -242,7 +339,13 @@ export function TaskBoard() {
       approvals: all.filter((t) => !!t.pendingApproval).length,
       attention: all.filter((t) => matchesAttentionFilter(t, 'needs-attention')).length,
     }
-  }, [tasks])
+  }, [scopedTasks])
+
+  const activeScopeLabel = useMemo(() => {
+    if (taskScopeFilter === 'all') return 'All tasks'
+    if (taskScopeFilter === 'agent' && filterAgentId && agents[filterAgentId]) return `${agents[filterAgentId].name} activity`
+    return 'User-facing tasks'
+  }, [agents, filterAgentId, taskScopeFilter])
 
   const activeAttentionLabel = useMemo(() => {
     if (attentionFilter === 'all') return null
@@ -301,6 +404,16 @@ export function TaskBoard() {
             <p className="text-[13px] text-text-3">
               {stats.total} task{stats.total !== 1 ? 's' : ''}
             </p>
+            <span className="inline-flex items-center gap-1 rounded-full bg-white/[0.04] px-2 py-1 text-[11px] font-600 text-text-2">
+              {taskScopeFilter === 'agent' && filterAgentId && agents[filterAgentId] ? (
+                <>
+                  <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} avatarUrl={agents[filterAgentId].avatarUrl} name={agents[filterAgentId].name} size={14} />
+                  {activeScopeLabel}
+                </>
+              ) : (
+                activeScopeLabel
+              )}
+            </span>
             {stats.running > 0 && (
               <span className="inline-flex items-center gap-1 text-[11px] font-600 text-blue-400">
                 <span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
@@ -338,41 +451,83 @@ export function TaskBoard() {
             <button
               onClick={() => setAgentDropdownOpen(!agentDropdownOpen)}
               className={`flex items-center gap-2 px-3 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
-                ${filterAgentId
+                ${taskScopeFilter !== 'user-facing'
                   ? 'bg-white/[0.06] border-white/[0.1] text-text-2'
                   : 'bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03]'}`}
               style={{ fontFamily: 'inherit', minWidth: 130 }}
             >
-              {filterAgentId && agents[filterAgentId] ? (
+              {taskScopeFilter === 'agent' && filterAgentId && agents[filterAgentId] ? (
                 <>
                   <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} avatarUrl={agents[filterAgentId].avatarUrl} name={agents[filterAgentId].name} size={18} />
                   {agents[filterAgentId].name}
                 </>
-              ) : 'All Agents'}
+              ) : taskScopeFilter === 'all' ? 'All Tasks' : 'User View'}
               <svg width="10" height="10" viewBox="0 0 10 10" fill="none" className="ml-auto opacity-50">
                 <path d="M2.5 4L5 6.5L7.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
             </button>
             {agentDropdownOpen && (
-              <div className="absolute top-full right-0 mt-1 min-w-[200px] py-1 rounded-[12px] border border-white/[0.08] bg-surface-2 shadow-lg z-50">
+              <div className="absolute top-full right-0 mt-1 min-w-[240px] py-1 rounded-[12px] border border-white/[0.08] bg-surface-2 shadow-lg z-50">
+                <button
+                  onClick={() => {
+                    setTaskScopeFilter('user-facing')
+                    setFilterAgentId('')
+                    setAgentDropdownOpen(false)
+                  }}
+                  className={`w-full flex items-start gap-2.5 px-3 py-2.5 text-[13px] font-600 cursor-pointer border-none text-left transition-colors
+                    ${taskScopeFilter === 'user-facing' ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <span className="mt-0.5 inline-flex h-5 items-center rounded-full bg-emerald-500/12 px-1.5 text-[10px] font-700 uppercase tracking-[0.08em] text-emerald-400">
+                    Default
+                  </span>
+                  <span className="min-w-0">
+                    <span className="block">User-facing tasks</span>
+                    <span className="mt-0.5 block text-[11px] font-500 text-text-3/60">
+                      Hide scheduled, delegated, and agent-created internal work.
+                    </span>
+                  </span>
+                </button>
                 <button
-                  onClick={() => { setFilterAgentId(''); setAgentDropdownOpen(false) }}
-                  className={`w-full flex items-center gap-2.5 px-3 py-2 text-[13px] font-600 cursor-pointer border-none text-left transition-colors
-                    ${!filterAgentId ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
+                  onClick={() => {
+                    setTaskScopeFilter('all')
+                    setFilterAgentId('')
+                    setAgentDropdownOpen(false)
+                  }}
+                  className={`w-full flex items-start gap-2.5 px-3 py-2.5 text-[13px] font-600 cursor-pointer border-none text-left transition-colors
+                    ${taskScopeFilter === 'all' ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
                   style={{ fontFamily: 'inherit' }}
                 >
-                  All Agents
+                  <span className="mt-0.5 inline-flex h-5 items-center rounded-full bg-white/[0.06] px-1.5 text-[10px] font-700 uppercase tracking-[0.08em] text-text-3">
+                    All
+                  </span>
+                  <span className="min-w-0">
+                    <span className="block">All tasks</span>
+                    <span className="mt-0.5 block text-[11px] font-500 text-text-3/60">
+                      Include internal agent execution, schedules, and delegations.
+                    </span>
+                  </span>
                 </button>
+                <div className="my-1 border-t border-white/[0.06]" />
                 {Object.values(agents).sort((a, b) => a.name.localeCompare(b.name)).map((a) => (
                   <button
                     key={a.id}
-                    onClick={() => { setFilterAgentId(a.id); setAgentDropdownOpen(false) }}
+                    onClick={() => {
+                      setTaskScopeFilter('agent')
+                      setFilterAgentId(a.id)
+                      setAgentDropdownOpen(false)
+                    }}
                     className={`w-full flex items-center gap-2.5 px-3 py-2 text-[13px] font-600 cursor-pointer border-none text-left transition-colors
-                      ${filterAgentId === a.id ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
+                      ${taskScopeFilter === 'agent' && filterAgentId === a.id ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
                     style={{ fontFamily: 'inherit' }}
                   >
                     <AgentAvatar seed={a.avatarSeed || null} avatarUrl={a.avatarUrl} name={a.name} size={20} />
-                    {a.name}
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate">{a.name}</span>
+                      <span className="mt-0.5 block text-[11px] font-500 text-text-3/60">
+                        Assigned, created, or delegated by this agent
+                      </span>
+                    </span>
                   </button>
                 ))}
               </div>
@@ -451,6 +606,16 @@ export function TaskBoard() {
           >
             {showArchived ? 'Hide' : 'Show'} Archived{!showArchived && archivedCount > 0 ? ` (${archivedCount})` : ''}
           </button>
+          <button
+            onClick={() => {
+              resetGitHubImportState()
+              setGitHubImportOpen(true)
+            }}
+            className="px-4 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border border-white/[0.08] bg-white/[0.04] text-text-2 hover:bg-white/[0.08]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Import GitHub
+          </button>
           <button
             onClick={() => {
               setEditingTaskId(null)
@@ -520,8 +685,33 @@ export function TaskBoard() {
         ))}
       </div>
 
-      {(activeProjectFilter && projects[activeProjectFilter]) || activeAttentionLabel ? (
+      {(activeProjectFilter && projects[activeProjectFilter]) || activeAttentionLabel || taskScopeFilter !== 'all' ? (
         <div className="flex flex-wrap items-center gap-2 px-8 pb-3">
+          {taskScopeFilter !== 'all' && (
+            <span className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-[8px] border text-[12px] font-600 ${
+              taskScopeFilter === 'agent'
+                ? 'bg-accent-soft border-accent-bright/20 text-accent-bright'
+                : 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
+            }`}>
+              {taskScopeFilter === 'agent' && filterAgentId && agents[filterAgentId] ? (
+                <>
+                  <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} avatarUrl={agents[filterAgentId].avatarUrl} name={agents[filterAgentId].name} size={14} />
+                  {agents[filterAgentId].name} activity
+                </>
+              ) : (
+                'User-facing tasks'
+              )}
+              <button
+                onClick={() => {
+                  setTaskScopeFilter('all')
+                  setFilterAgentId('')
+                }}
+                className="ml-1 cursor-pointer border-none bg-transparent p-0 text-[14px] leading-none text-current opacity-80 hover:opacity-100"
+              >
+                &times;
+              </button>
+            </span>
+          )}
           {activeProjectFilter && projects[activeProjectFilter] && (
           <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-[8px] bg-white/[0.04] border border-white/[0.06] text-[12px] font-600 text-text-2">
             <span className="w-2 h-2 rounded-full" style={{ backgroundColor: projects[activeProjectFilter].color || '#6366F1' }} />
@@ -593,7 +783,7 @@ export function TaskBoard() {
           ) : filteredTasks.length === 0 ? (
             <div className="max-w-3xl mx-auto rounded-[16px] border border-dashed border-white/[0.08] px-6 py-14 text-center">
               <p className="text-[14px] font-600 text-text-2 mb-1">No tasks match this view</p>
-              <p className="text-[12px] text-text-3/60">Try clearing one of the active filters or switching back to the full board.</p>
+              <p className="text-[12px] text-text-3/60">Try clearing one of the active filters or switching back to all tasks.</p>
             </div>
           ) : (
             <div className="max-w-4xl mx-auto">
@@ -629,6 +819,201 @@ export function TaskBoard() {
         </div>
       )}
 
+      <BottomSheet
+        open={githubImportOpen}
+        onClose={() => {
+          setGitHubImportOpen(false)
+          setGitHubImportError(null)
+        }}
+        wide
+        title="Import GitHub Issues"
+        description="Pull issues from a GitHub repository into the task board as backlog items."
+      >
+        <div className="mx-auto w-full max-w-2xl">
+          <div className="mb-6">
+            <h2 className="font-display text-[24px] font-800 tracking-[-0.03em] text-text">Import GitHub Issues</h2>
+            <p className="mt-2 text-[14px] text-text-3">
+              Pull issues from a GitHub repository into the task board as backlog items.
+            </p>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_180px]">
+            <label className="block">
+              <span className="mb-2 block text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/70">Repository</span>
+              <input
+                value={githubRepo}
+                onChange={(e) => setGitHubRepo(e.target.value)}
+                placeholder="owner/repo or https://github.com/owner/repo"
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </label>
+            <label className="block">
+              <span className="mb-2 block text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/70">State</span>
+              <select
+                value={githubState}
+                onChange={(e) => setGitHubState(e.target.value as 'open' | 'closed' | 'all')}
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              >
+                <option value="open">Open issues</option>
+                <option value="closed">Closed issues</option>
+                <option value="all">All issues</option>
+              </select>
+            </label>
+          </div>
+
+          <div className="mt-4 grid gap-4 sm:grid-cols-2">
+            <label className="block">
+              <span className="mb-2 block text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/70">Limit</span>
+              <input
+                type="number"
+                min={1}
+                max={200}
+                value={githubLimit}
+                onChange={(e) => setGitHubLimit(e.target.value)}
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </label>
+            <label className="block">
+              <span className="mb-2 block text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/70">Labels</span>
+              <input
+                value={githubLabels}
+                onChange={(e) => setGitHubLabels(e.target.value)}
+                placeholder="bug, api, high priority"
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </label>
+          </div>
+
+          <label className="mt-4 block">
+            <span className="mb-2 block text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/70">GitHub token</span>
+            <input
+              type="password"
+              value={githubToken}
+              onChange={(e) => setGitHubToken(e.target.value)}
+              placeholder="Optional. Needed for private repos or higher rate limits."
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </label>
+
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            <span className="inline-flex items-center rounded-full bg-white/[0.05] px-3 py-1 text-[12px] font-600 text-text-2">
+              Imported tasks land in backlog
+            </span>
+            {activeProjectFilter && projects[activeProjectFilter] && (
+              <span className="inline-flex items-center gap-1.5 rounded-full bg-accent-soft px-3 py-1 text-[12px] font-600 text-accent-bright">
+                <span className="h-2 w-2 rounded-full" style={{ backgroundColor: projects[activeProjectFilter].color || '#6366F1' }} />
+                Project: {projects[activeProjectFilter].name}
+              </span>
+            )}
+          </div>
+
+          {githubImportError && (
+            <div className="mt-4 rounded-[14px] border border-red-500/20 bg-red-500/10 px-4 py-3 text-[13px] text-red-200">
+              {githubImportError}
+            </div>
+          )}
+
+          {githubImportResult && (
+            <div className="mt-5 rounded-[18px] border border-white/[0.08] bg-white/[0.03] p-4">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-[14px] font-700 text-text">{githubImportResult.repo}</span>
+                <span className="rounded-full bg-white/[0.05] px-2 py-1 text-[11px] font-600 text-text-3">
+                  {githubImportResult.fetched} fetched
+                </span>
+                <span className="rounded-full bg-emerald-500/10 px-2 py-1 text-[11px] font-600 text-emerald-300">
+                  {githubImportResult.created.length} created
+                </span>
+                <span className="rounded-full bg-amber-500/10 px-2 py-1 text-[11px] font-600 text-amber-300">
+                  {githubImportResult.skipped.length} skipped
+                </span>
+              </div>
+
+              {githubImportResult.created.length > 0 && (
+                <div className="mt-4">
+                  <p className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Created</p>
+                  <div className="mt-2 flex flex-col gap-2">
+                    {githubImportResult.created.slice(0, 8).map((item) => (
+                      item.url ? (
+                        <a
+                          key={`created-${item.taskId || item.number}`}
+                          href={item.url}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="rounded-[12px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 text-[13px] text-text-2 no-underline transition-colors hover:bg-white/[0.05]"
+                        >
+                          #{item.number} {item.title}
+                        </a>
+                      ) : (
+                        <div
+                          key={`created-${item.taskId || item.number}`}
+                          className="rounded-[12px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 text-[13px] text-text-2"
+                        >
+                          #{item.number} {item.title}
+                        </div>
+                      )
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {githubImportResult.skipped.length > 0 && (
+                <div className="mt-4">
+                  <p className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Skipped existing</p>
+                  <div className="mt-2 flex flex-col gap-2">
+                    {githubImportResult.skipped.slice(0, 8).map((item) => (
+                      item.url ? (
+                        <a
+                          key={`skipped-${item.taskId || item.number}`}
+                          href={item.url}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="rounded-[12px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 text-[13px] text-text-3 no-underline transition-colors hover:bg-white/[0.05] hover:text-text-2"
+                        >
+                          #{item.number} {item.title}
+                        </a>
+                      ) : (
+                        <div
+                          key={`skipped-${item.taskId || item.number}`}
+                          className="rounded-[12px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 text-[13px] text-text-3"
+                        >
+                          #{item.number} {item.title}
+                        </div>
+                      )
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="mt-6 flex items-center justify-end gap-3">
+            <button
+              onClick={() => {
+                setGitHubImportOpen(false)
+                setGitHubImportError(null)
+              }}
+              className="px-4 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-[13px] font-600 text-text-3 transition-colors hover:bg-white/[0.04] hover:text-text-2"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Close
+            </button>
+            <button
+              onClick={handleGitHubImport}
+              disabled={githubImporting}
+              className="px-5 py-2.5 rounded-[12px] border-none bg-accent-bright text-white text-[14px] font-700 transition-all disabled:cursor-not-allowed disabled:opacity-60"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {githubImporting ? 'Importing...' : 'Import issues'}
+            </button>
+          </div>
+        </div>
+      </BottomSheet>
+
       {/* Bulk action bar */}
       {selectionMode && (
         <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 px-4 py-3 rounded-[16px] bg-surface-2/95 backdrop-blur-xl border border-white/[0.1] shadow-[0_8px_40px_rgba(0,0,0,0.5)] z-50">