@swarmclawai/swarmclaw 0.7.8 → 0.8.0

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

@@ -3,11 +3,13 @@
 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'
 
@@ -160,6 +162,15 @@ export function TaskBoard() {
   })
   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(() => {
@@ -185,7 +196,9 @@ export function TaskBoard() {
   }, [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
@@ -252,6 +265,59 @@ 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 scopedTasks) {
@@ -540,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)
@@ -743,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">

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

@@ -8,8 +8,8 @@ import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { BoardTask } from '@/types'
 
-function timeAgo(ts: number) {
-  const diff = Date.now() - ts
+function timeAgo(ts: number, now: number) {
+  const diff = now - ts
   if (diff < 60_000) return 'just now'
   if (diff < 3600_000) return `${Math.floor(diff / 60_000)}m ago`
   if (diff < 86400_000) return `${Math.floor(diff / 3600_000)}h ago`
@@ -35,13 +35,21 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
   const [dragging, setDragging] = useState(false)
   const [confirmArchive, setConfirmArchive] = useState(false)
   const [allowDrag, setAllowDrag] = useState(false)
+  const [now, setNow] = useState(() => Date.now())
 
   useEffect(() => {
     if (typeof window === 'undefined') return
-    const isCoarsePointer = typeof window.matchMedia === 'function'
-      ? window.matchMedia('(pointer: coarse)').matches
-      : 'ontouchstart' in window
-    setAllowDrag(!isCoarsePointer)
+    const frame = window.requestAnimationFrame(() => {
+      const isCoarsePointer = typeof window.matchMedia === 'function'
+        ? window.matchMedia('(pointer: coarse)').matches
+        : 'ontouchstart' in window
+      setAllowDrag(!isCoarsePointer)
+    })
+    const timer = window.setInterval(() => setNow(Date.now()), 60_000)
+    return () => {
+      window.cancelAnimationFrame(frame)
+      window.clearInterval(timer)
+    }
   }, [])
 
   const tasks = useAppStore((s) => s.tasks)
@@ -49,6 +57,7 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
   const project = task.projectId ? projects[task.projectId] : null
   const creatorAgent = task.createdByAgentId ? agents[task.createdByAgentId] : null
   const delegatorAgent = task.delegatedByAgentId ? agents[task.delegatedByAgentId] : null
+  const githubSource = task.externalSource?.source === 'github' ? task.externalSource : null
 
   const priorityConfig = {
     critical: { label: 'Critical', cls: 'bg-red-500/10 text-red-400' },
@@ -59,7 +68,7 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
   const prio = task.priority && priorityConfig[task.priority]
 
   const isBlocked = Array.isArray(task.blockedBy) && task.blockedBy.length > 0
-  const isOverdue = task.dueAt && task.dueAt < Date.now() && task.status !== 'completed' && task.status !== 'archived'
+  const isOverdue = task.dueAt && task.dueAt < now && task.status !== 'completed' && task.status !== 'archived'
   const borderColor = isBlocked ? 'border-l-rose-500'
     : task.pendingApproval ? 'border-l-amber-500'
     : task.status === 'running' ? 'border-l-emerald-500'
@@ -210,7 +219,7 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
         </div>
       )}
 
-      {(creatorAgent || delegatorAgent || task.sourceType === 'schedule') && (
+      {(creatorAgent || delegatorAgent || task.sourceType === 'schedule' || githubSource) && (
         <div className="flex flex-wrap gap-1.5 mb-3">
           {delegatorAgent && (
             <span className="inline-flex items-center gap-1.5 rounded-[7px] bg-amber-500/10 px-2 py-1 text-[10px] font-600 text-amber-300">
@@ -233,6 +242,26 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
               {task.sourceScheduleName ? `Scheduled via ${task.sourceScheduleName}` : 'Scheduled task'}
             </span>
           )}
+          {githubSource && (
+            githubSource.url ? (
+              <a
+                href={githubSource.url}
+                target="_blank"
+                rel="noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                className="inline-flex items-center gap-1.5 rounded-[7px] bg-sky-500/10 px-2 py-1 text-[10px] font-600 text-sky-300 hover:bg-sky-500/15"
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" className="shrink-0">
+                  <path d="M12 .5C5.65.5.5 5.65.5 12A11.5 11.5 0 0 0 8.36 22.9c.57.1.78-.25.78-.55 0-.27-.01-1.17-.02-2.13-3.2.69-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.68 0-1.25.45-2.27 1.18-3.07-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.17a10.9 10.9 0 0 1 5.73 0c2.18-1.48 3.14-1.17 3.14-1.17.63 1.57.24 2.73.12 3.02.74.8 1.18 1.82 1.18 3.07 0 4.41-2.7 5.38-5.27 5.66.42.36.78 1.06.78 2.14 0 1.55-.01 2.79-.01 3.17 0 .31.2.66.79.55A11.5 11.5 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5Z" />
+                </svg>
+                {githubSource.repo ? `${githubSource.repo}#${githubSource.number}` : `GitHub #${githubSource.number ?? githubSource.id}`}
+              </a>
+            ) : (
+              <span className="inline-flex items-center gap-1.5 rounded-[7px] bg-sky-500/10 px-2 py-1 text-[10px] font-600 text-sky-300">
+                GitHub {githubSource.repo ? `${githubSource.repo}#${githubSource.number}` : `#${githubSource.number ?? githubSource.id}`}
+              </span>
+            )
+          )}
         </div>
       )}
 
@@ -248,7 +277,7 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
             {project.name}
           </span>
         )}
-        <span className="text-[11px] text-text-3">{timeAgo(task.updatedAt)}</span>
+        <span className="text-[11px] text-text-3">{timeAgo(task.updatedAt, now)}</span>
         {task.comments && task.comments.length > 0 && (
           <span className="flex items-center gap-1 text-[11px] text-text-3">
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/60">

package/src/components/ui/dialog.tsx

@@ -39,7 +39,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/72 backdrop-blur-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1400] bg-black/72 backdrop-blur-md",
         className
       )}
       {...props}
@@ -61,7 +61,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[1400] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className
         )}
         style={{ animation: 'spring-in 0.4s var(--ease-spring)' }}

package/src/components/wallets/wallet-approval-dialog.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback } from 'react'
 import { api } from '@/lib/api-client'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import type { WalletTransaction } from '@/types'
+import { formatWalletAmount, getWalletAssetSymbol, getWalletAtomicAmount } from '@/lib/wallet'
 
 interface WalletApprovalDialogProps {
   transaction: WalletTransaction
@@ -33,7 +34,8 @@ export function WalletApprovalDialog({ transaction, walletAddress, onClose, onRe
     }
   }, [transaction, onResolved, onClose])
 
-  const amountSol = transaction.amountLamports / 1e9
+  const amountFormatted = formatWalletAmount(transaction.chain, getWalletAtomicAmount(transaction), { minFractionDigits: 4, maxFractionDigits: 6 })
+  const symbol = getWalletAssetSymbol(transaction.chain)
 
   return (
     <Dialog open onOpenChange={(nextOpen) => { if (!nextOpen) onClose() }}>
@@ -57,7 +59,7 @@ export function WalletApprovalDialog({ transaction, walletAddress, onClose, onRe
           <div className="rounded-[14px] border border-white/[0.06] bg-black/20 p-4 space-y-3">
             <div className="flex items-center justify-between">
               <span className="text-[11px] uppercase tracking-wide text-text-3/70">Amount</span>
-              <span className="text-[16px] font-600 text-text-1">{amountSol.toFixed(4)} SOL</span>
+              <span className="text-[16px] font-600 text-text-1">{amountFormatted} {symbol}</span>
             </div>
             <div>
               <span className="mb-1 block text-[11px] uppercase tracking-wide text-text-3/70">From</span>