@andypai/agent-kanban 0.2.0 → 0.3.1

package/src/server.ts

@@ -1,8 +1,8 @@
 import { existsSync } from 'node:fs'
 import { join } from 'node:path'
-import { handleRequest } from './api.ts'
+import { handleRequest } from './api'
 import type { ServerWebSocket } from 'bun'
-import type { KanbanProvider } from './providers/types.ts'
+import type { KanbanProvider } from './providers/types'
 
 const wsClients = new Set<ServerWebSocket<unknown>>()
 const CORS_HEADERS = {
@@ -10,6 +10,25 @@ const CORS_HEADERS = {
   'Access-Control-Allow-Methods': 'GET, POST, PATCH, DELETE, OPTIONS',
   'Access-Control-Allow-Headers': 'Content-Type',
 }
+const DEFAULT_BACKGROUND_SYNC_INTERVAL_MS = 30_000
+
+interface BackgroundSyncState {
+  enabled: boolean
+  inFlight: boolean
+  warm: boolean
+  lastAttemptAt: string | null
+  lastSuccessAt: string | null
+  lastError: string | null
+}
+
+export interface StartServerOptions {
+  syncIntervalMs?: number
+}
+
+export interface StartedServer {
+  port: number
+  stop(closeActiveConnections?: boolean): void
+}
 
 function broadcast(data: unknown): void {
   const msg = JSON.stringify(data)
@@ -24,11 +43,73 @@ function applyCorsHeaders(response: Response): void {
   }
 }
 
-export function startServer(provider: KanbanProvider, port: number): void {
+function jsonWithCors(body: unknown, status = 200): Response {
+  const response = Response.json(body, { status })
+  applyCorsHeaders(response)
+  return response
+}
+
+function errorMessage(err: unknown): string {
+  return err instanceof Error ? err.message : String(err)
+}
+
+function nowIso(): string {
+  return new Date().toISOString()
+}
+
+export function startServer(
+  provider: KanbanProvider,
+  port: number,
+  opts: StartServerOptions = {},
+): StartedServer {
   const distDir = join(import.meta.dir, '..', 'ui', 'dist')
   const hasStatic = existsSync(distDir)
+  const syncIntervalMs = opts.syncIntervalMs ?? DEFAULT_BACKGROUND_SYNC_INTERVAL_MS
+  const syncCache = provider.syncCache?.bind(provider)
+  const getSyncStatus = provider.getSyncStatus?.bind(provider)
+  const backgroundSync: BackgroundSyncState = {
+    enabled: typeof syncCache === 'function',
+    inFlight: false,
+    warm: typeof syncCache !== 'function',
+    lastAttemptAt: null,
+    lastSuccessAt: null,
+    lastError: null,
+  }
+  let closed = false
+  let syncTimer: ReturnType<typeof setTimeout> | null = null
+
+  const runBackgroundSync = async (reason: 'startup' | 'interval'): Promise<void> => {
+    if (!syncCache || backgroundSync.inFlight || closed) return
+    backgroundSync.inFlight = true
+    backgroundSync.lastAttemptAt = nowIso()
+    try {
+      await syncCache()
+      backgroundSync.warm = true
+      backgroundSync.lastSuccessAt = nowIso()
+      backgroundSync.lastError = null
+    } catch (err) {
+      backgroundSync.lastError = errorMessage(err)
+      console.warn(`[server] background ${reason} sync failed:`, err)
+    } finally {
+      backgroundSync.inFlight = false
+    }
+  }
 
-  Bun.serve({
+  const scheduleBackgroundSync = (): void => {
+    if (!syncCache || closed) return
+    syncTimer = setTimeout(async () => {
+      await runBackgroundSync('interval')
+      scheduleBackgroundSync()
+    }, syncIntervalMs)
+  }
+
+  if (syncCache) {
+    void runBackgroundSync('startup').finally(() => {
+      scheduleBackgroundSync()
+    })
+  }
+
+  const server = Bun.serve({
     port,
     websocket: {
       open(ws) {
@@ -43,6 +124,9 @@ export function startServer(provider: KanbanProvider, port: number): void {
     },
     async fetch(req, server) {
       const url = new URL(req.url)
+      const rawPath = url.pathname
+      const basePath = rawPath === '/kanban' || rawPath.startsWith('/kanban/') ? '/kanban' : ''
+      const pathname = basePath ? rawPath.slice(basePath.length) || '/' : rawPath
 
       // Handle OPTIONS preflight first (before /api routing)
       if (req.method === 'OPTIONS') {
@@ -50,31 +134,63 @@ export function startServer(provider: KanbanProvider, port: number): void {
       }
 
       // WebSocket upgrade
-      if (url.pathname === '/ws') {
+      if (pathname === '/ws') {
         const upgraded = server.upgrade(req)
         if (upgraded) return undefined as unknown as Response
         return new Response('WebSocket upgrade failed', { status: 400 })
       }
 
-      if (url.pathname === '/api/health') {
-        const context = await provider.getContext()
-        return Response.json({
+      if (pathname === '/api/health') {
+        return jsonWithCors({
+          ok: true,
+          data: { status: 'running', wsClients: wsClients.size, provider: provider.type },
+        })
+      }
+
+      if (pathname === '/api/ready') {
+        const ready = backgroundSync.warm
+        return jsonWithCors(
+          {
+            ok: ready,
+            data: {
+              ready,
+              provider: provider.type,
+              backgroundSync,
+            },
+          },
+          ready ? 200 : 503,
+        )
+      }
+
+      if (pathname === '/api/sync-status') {
+        const providerSync = (await getSyncStatus?.()) ?? null
+        return jsonWithCors({
           ok: true,
-          data: { status: 'running', wsClients: wsClients.size, provider: context.provider },
+          data: {
+            status: 'running',
+            provider: provider.type,
+            wsClients: wsClients.size,
+            backgroundSync,
+            providerSync,
+          },
         })
       }
 
-      if (url.pathname.startsWith('/api/')) {
-        const result = await handleRequest(provider, req)
+      if (pathname.startsWith('/api/')) {
+        const forwardedUrl = new URL(req.url)
+        forwardedUrl.pathname = pathname
+        const forwardedReq = new Request(forwardedUrl.toString(), req)
+        const result = await handleRequest(provider, forwardedReq)
         applyCorsHeaders(result.response)
         if (result.mutated && result.response.ok) {
-          broadcast({ type: 'refresh' })
+          broadcast(result.event ?? { type: 'refresh' })
         }
         return result.response
       }
 
       if (hasStatic) {
-        const filePath = join(distDir, url.pathname === '/' ? 'index.html' : url.pathname)
+        const assetPath = pathname === '/' ? '/index.html' : pathname
+        const filePath = join(distDir, assetPath.replace(/^\//, ''))
         const file = Bun.file(filePath)
         if (await file.exists()) return new Response(file)
         return new Response(Bun.file(join(distDir, 'index.html')))
@@ -88,4 +204,16 @@ export function startServer(provider: KanbanProvider, port: number): void {
   })
 
   console.info(`Dashboard running at http://localhost:${port}`)
+
+  return {
+    port: server.port ?? port,
+    stop(closeActiveConnections = true) {
+      closed = true
+      if (syncTimer) {
+        clearTimeout(syncTimer)
+        syncTimer = null
+      }
+      server.stop(closeActiveConnections)
+    },
+  }
 }

package/src/tunnel.ts

@@ -0,0 +1,79 @@
+import type { Subprocess } from 'bun'
+
+const TRYCLOUDFLARE_URL = /https:\/\/[a-z0-9-]+\.trycloudflare\.com/i
+
+export interface TunnelHandle {
+  process: Subprocess
+  stop: () => void
+}
+
+export interface TunnelOptions {
+  command?: string[]
+  onUrl?: (url: string) => void
+  log?: (message: string) => void
+  warn?: (message: string) => void
+}
+
+export function startCloudflareTunnel(port: number, opts: TunnelOptions = {}): TunnelHandle {
+  const command = opts.command ?? [
+    'bunx',
+    'cloudflared',
+    'tunnel',
+    '--url',
+    `http://localhost:${port}`,
+  ]
+  const log = opts.log ?? ((m: string) => console.info(m))
+  const warn = opts.warn ?? ((m: string) => console.warn(m))
+
+  let child: Subprocess
+  try {
+    child = Bun.spawn(command, { stdout: 'pipe', stderr: 'pipe' })
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err)
+    warn(
+      `Failed to start cloudflared: ${msg}. Install it with 'brew install cloudflared' or see docs/providers/linear.md for setup.`,
+    )
+    throw err
+  }
+
+  const stop = (): void => {
+    try {
+      child.kill()
+    } catch {
+      // best-effort teardown
+    }
+  }
+
+  let announced = false
+  const announce = (url: string): void => {
+    if (announced) return
+    announced = true
+    log(`Public tunnel URL: ${url}`)
+    opts.onUrl?.(url)
+  }
+
+  const scanForUrl = async (
+    stream: ReadableStream<Uint8Array> | null | undefined,
+  ): Promise<void> => {
+    if (!stream) return
+    const decoder = new TextDecoder()
+    for await (const chunk of stream) {
+      const text = decoder.decode(chunk as Uint8Array, { stream: true })
+      const match = text.match(TRYCLOUDFLARE_URL)
+      if (match) announce(match[0])
+    }
+  }
+
+  void scanForUrl(child.stdout as ReadableStream<Uint8Array>)
+  void scanForUrl(child.stderr as ReadableStream<Uint8Array>)
+
+  void child.exited.then((code) => {
+    if (!announced) {
+      warn(
+        `cloudflared exited (code ${code}) before a public URL was established. Is cloudflared installed? Try 'brew install cloudflared' or 'npm i -g cloudflared'.`,
+      )
+    }
+  })
+
+  return { process: child, stop }
+}

package/src/types.ts

@@ -20,8 +20,23 @@ export interface Task {
   position: number
   priority: Priority
   assignee: string
+  assignees: string[]
+  labels: string[]
+  comment_count: number
   project: string
   metadata: string
+  revision?: number
+  created_at: string
+  updated_at: string
+  version: string | null
+  source_updated_at: string | null
+}
+
+export interface TaskComment {
+  id: string
+  task_id: string
+  body: string
+  author: string | null
   created_at: string
   updated_at: string
 }
@@ -75,7 +90,7 @@ export interface ColumnTimeEntry {
 export interface BoardConfig {
   members: { name: string; role: 'human' | 'agent' }[]
   projects: string[]
-  provider?: 'local' | 'linear'
+  provider?: 'local' | 'linear' | 'jira'
   discoveredAssignees?: string[]
   discoveredProjects?: string[]
 }
@@ -99,6 +114,8 @@ export interface ProviderCapabilities {
   taskUpdate: boolean
   taskMove: boolean
   taskDelete: boolean
+  comment: boolean
+  /** True when provider-backed bootstrap/dashboard activity is exposed, not merely cached internally. */
   activity: boolean
   metrics: boolean
   columnCrud: boolean
@@ -113,7 +130,7 @@ export interface ProviderTeamInfo {
 }
 
 export interface BoardBootstrap {
-  provider: 'local' | 'linear'
+  provider: 'local' | 'linear' | 'jira'
   capabilities: ProviderCapabilities
   board: BoardView
   config: BoardConfig

package/src/webhooks.ts

@@ -0,0 +1,36 @@
+import { Buffer } from 'node:buffer'
+import { createHmac, timingSafeEqual } from 'node:crypto'
+
+export interface WebhookRequest {
+  headers: Record<string, string>
+  rawBody: string
+}
+
+export interface WebhookResult {
+  handled: boolean
+  unauthorized?: boolean
+  message?: string
+}
+
+export function verifyHmacSha256(
+  secret: string,
+  rawBody: string,
+  providedSignature: string | undefined | null,
+  encoding: 'hex' | 'base64' = 'hex',
+): boolean {
+  if (!providedSignature) return false
+  const mac = createHmac('sha256', secret).update(rawBody).digest(encoding)
+  const expected = providedSignature.replace(/^sha256=/, '')
+  const macBuf = Buffer.from(mac)
+  const expBuf = Buffer.from(expected)
+  if (macBuf.length !== expBuf.length) return false
+  return timingSafeEqual(macBuf, expBuf)
+}
+
+export function headerLower(headers: Record<string, string>, name: string): string | undefined {
+  const target = name.toLowerCase()
+  for (const [k, v] of Object.entries(headers)) {
+    if (k.toLowerCase() === target) return v
+  }
+  return undefined
+}

package/ui/dist/assets/index-DBnoKL_k.css

@@ -0,0 +1 @@
+*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--black: #000000;--surface: #111111;--surface-raised: #1a1a1a;--border: #222222;--border-visible: #333333;--text-disabled: #666666;--text-secondary: #999999;--text-muted: var(--text-disabled);--text-primary: #e8e8e8;--text-display: #ffffff;--accent: #d71921;--accent-subtle: rgba(215, 25, 33, .15);--success: #4a9e5c;--warning: #d4a843;--interactive: #5b9bf6;--priority-urgent: #d71921;--priority-high: #d4a843;--priority-medium: #999999;--priority-low: #4a9e5c;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--section-radius: 12px;--page-gutter: clamp(16px, 3vw, 32px);--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}html{background:var(--black)}body{font-family:Space Grotesk,system-ui,sans-serif;background:var(--black);color:var(--text-primary);min-height:100vh;overflow-x:hidden;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,select,input,textarea{font-family:inherit}#root{width:100%;max-width:1800px;margin:0 auto;padding-top:calc(var(--space-lg) + var(--safe-top));padding-right:max(var(--page-gutter),var(--safe-right));padding-bottom:calc(var(--space-lg) + var(--safe-bottom));padding-left:max(var(--page-gutter),var(--safe-left))}.header{padding:0 0 var(--space-xl);border-bottom:1px solid var(--border);margin-bottom:var(--space-lg)}.headerTop{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-lg)}.headerIdentity{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}.headerTitleRow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm)}.header h1{font-family:Space Grotesk,sans-serif;font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--text-display)}.header h1 span{color:var(--text-display)}.liveStatus,.providerBadge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border-radius:999px;border:1px solid var(--border-visible);background:transparent;color:var(--text-secondary);font-family:Space Mono,monospace;font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:uppercase}.providerBadge{max-width:fit-content}.newTaskBtn{min-height:44px;background:var(--text-display);color:var(--black);border:none;padding:10px 24px;border-radius:999px;font-family:Space Mono,monospace;font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:opacity .15s;white-space:nowrap}.newTaskBtn:hover{opacity:.85}.statsBar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-sm);margin-bottom:var(--space-lg)}.statCard{background:var(--surface);border:1px solid var(--border);border-radius:var(--section-radius);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}.statValue{font-family:Doto,Space Mono,monospace;font-size:36px;line-height:1;font-weight:400;color:var(--text-display);letter-spacing:-.02em}.statLabel{font-family:Space Mono,monospace;font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.filterBar{display:flex;align-items:center;gap:var(--space-md);min-width:0}.filterLabel{font-family:Space Mono,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-disabled);flex-shrink:0}.filterRow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;flex:1 1 auto}.filterGroup{display:flex;gap:6px;align-items:center;min-width:0}.filterScroller{display:flex;flex-wrap:wrap;gap:6px}.filterDivider{width:1px;align-self:stretch;background:var(--border-visible);margin:4px 6px}.filterBtn{min-height:36px;background:transparent;border:1px solid var(--border-visible);color:var(--text-secondary);padding:6px 16px;border-radius:999px;font-family:Space Mono,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .15s;white-space:nowrap}.filterBtn:hover{border-color:var(--text-secondary);color:var(--text-primary)}.filterBtn.active{background:var(--text-display);border-color:var(--text-display);color:var(--black)}.filterSelect{min-height:36px;background:transparent;border:1px solid var(--border-visible);color:var(--text-secondary);padding:6px 32px 6px 14px;border-radius:999px;font-family:Space Mono,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;white-space:nowrap;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .15s,color .15s}.filterSelect:hover{border-color:var(--text-secondary);color:var(--text-primary)}.filterSelect:focus{outline:none;border-color:var(--text-primary);color:var(--text-primary)}.filterSelect.active{border-color:var(--text-display);color:var(--text-display)}.filterReset{background:transparent;border:none;color:var(--text-disabled);padding:6px 10px;font-family:Space Mono,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .15s;margin-left:auto}.filterReset:hover{color:var(--text-primary)}.boardShell{min-height:calc(100vh - 280px - var(--safe-bottom))}.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:var(--space-sm);overflow-x:auto;overflow-y:visible;padding:var(--space-xs) 0 calc(var(--space-sm) + var(--safe-bottom));min-height:calc(100vh - 300px - var(--safe-bottom));scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent;scroll-padding-inline:2px}.board:after{content:"";width:2px}.column{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--section-radius);display:flex;flex-direction:column;min-height:100%}.columnHeader{padding:14px var(--space-md);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.columnHeaderMain,.columnHeaderActions{display:flex;align-items:center;gap:var(--space-sm);min-width:0}.columnDot{width:6px;height:6px;border-radius:50%;flex-shrink:0;opacity:.7}.columnName{font-family:Space Mono,monospace;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);flex:1;min-width:0}.columnCount{background:transparent;border:1px solid var(--border);color:var(--text-disabled);padding:2px 8px;border-radius:999px;font-family:Space Mono,monospace;font-size:11px;min-width:24px;text-align:center}.columnAddBtn{min-width:32px;min-height:32px;background:transparent;border:1px solid var(--border);border-radius:999px;color:var(--text-disabled);cursor:pointer;font-size:16px;line-height:1;transition:all .15s}.columnAddBtn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.columnBody{padding:var(--space-sm);display:flex;flex-direction:column;gap:6px;min-height:60px;flex:1}.emptyColumn{display:flex;align-items:center;justify-content:center;color:var(--text-disabled);font-family:Space Mono,monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;flex:1;min-height:96px}.taskCard{width:100%;text-align:left;background:var(--surface-raised);border:1px solid var(--border);border-radius:8px;padding:14px var(--space-md);cursor:pointer;transition:border-color .15s}.taskCard:hover{border-color:var(--border-visible)}.taskCard.selected{border-color:var(--text-secondary)}.taskCardHeader{display:flex;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-xs)}.taskTitle{font-family:Space Grotesk,sans-serif;font-size:14px;font-weight:500;line-height:1.4;color:var(--text-primary);flex:1}.taskDescription{font-size:13px;color:var(--text-disabled);line-height:1.45;margin-bottom:var(--space-sm);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.taskFooter{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.taskFooterLeft{display:flex;align-items:center;gap:var(--space-sm);min-width:0;flex-wrap:wrap}.assigneeAvatar{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Space Mono,monospace;font-size:10px;font-weight:700;color:var(--black);background:var(--text-disabled);flex-shrink:0;border:1px solid var(--border-visible)}.assigneeName{font-family:Space Mono,monospace;font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.projectTag{display:inline-flex;align-items:center;min-height:22px;font-family:Space Mono,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border-radius:999px;border:1px solid var(--border-visible);background:transparent;color:var(--text-secondary);white-space:nowrap}.taskLabels{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0}.taskLabel{display:inline-flex;align-items:center;font-family:Space Mono,monospace;font-size:10px;padding:1px 8px;border-radius:4px;background:var(--bg-tertiary);color:var(--text-secondary);white-space:nowrap}.commentCount{font-family:Space Mono,monospace;font-size:11px;color:var(--text-secondary);white-space:nowrap}.timestamp{font-family:Space Mono,monospace;font-size:11px;color:var(--text-disabled);white-space:nowrap;flex-shrink:0}.priorityDot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px}.priorityDot.urgent{background:var(--priority-urgent)}.priorityDot.high{background:var(--priority-high)}.priorityDot.medium{background:var(--priority-medium)}.priorityDot.low{background:var(--priority-low)}.taskDetailOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:9}.taskDetail{position:fixed;top:0;right:0;width:min(420px,100vw);height:100vh;background:var(--surface);border-left:1px solid var(--border-visible);padding:calc(var(--space-xl) + var(--safe-top)) max(var(--space-lg),var(--safe-right)) calc(var(--space-xl) + var(--safe-bottom)) var(--space-lg);overflow-y:auto;z-index:10}.taskDetail .closeBtn{position:absolute;top:calc(var(--space-md) + var(--safe-top));right:max(var(--space-md),var(--safe-right));min-width:40px;min-height:40px;background:var(--surface-raised);border:1px solid var(--border-visible);color:var(--text-secondary);cursor:pointer;padding:4px 10px;border-radius:999px;font-size:18px;transition:all .15s}.taskDetail .closeBtn:hover{border-color:var(--text-secondary);color:var(--text-primary)}.detailTitle{font-family:Space Grotesk,sans-serif;font-size:18px;font-weight:500;color:var(--text-display);margin-bottom:var(--space-lg);padding-right:56px;line-height:1.4}.detailField{margin-bottom:var(--space-md)}.detailLabel{font-family:Space Mono,monospace;font-size:11px;color:var(--text-disabled);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-xs)}.detailValue{font-family:Space Grotesk,sans-serif;font-size:14px;line-height:1.5;color:var(--text-primary)}.detailActions{display:flex;gap:var(--space-sm);margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid var(--border)}.detailSelect{background:var(--surface-raised);border:1px solid var(--border-visible);color:var(--text-primary);min-height:42px;padding:8px 14px;border-radius:8px;font-family:Space Grotesk,sans-serif;font-size:13px;flex:1}.detailSelect:focus{outline:none;border-color:var(--text-secondary)}.deleteBtn{background:transparent;border:1px solid var(--accent);color:var(--accent);min-height:42px;padding:8px 20px;border-radius:999px;font-family:Space Mono,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .15s}.deleteBtn:hover{background:var(--accent-subtle)}.modalOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:calc(var(--space-md) + var(--safe-top)) max(var(--space-md),var(--safe-right)) calc(var(--space-md) + var(--safe-bottom)) max(var(--space-md),var(--safe-left));z-index:20}.modal{background:var(--surface);border:1px solid var(--border-visible);border-radius:16px;padding:var(--space-lg);width:480px;max-width:100%;max-height:100%;overflow-y:auto}.modal h2{font-family:Space Grotesk,sans-serif;font-size:18px;font-weight:500;color:var(--text-display);margin-bottom:var(--space-lg)}.formField{margin-bottom:var(--space-md)}.formLabel{display:block;font-family:Space Mono,monospace;font-size:11px;color:var(--text-disabled);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.formInput{width:100%;background:var(--surface-raised);border:1px solid var(--border-visible);color:var(--text-primary);min-height:42px;padding:10px 14px;border-radius:8px;font-family:Space Grotesk,sans-serif;font-size:14px}.formInput::placeholder{color:var(--text-disabled)}.formInput:focus{outline:none;border-color:var(--text-secondary)}textarea.formInput{resize:vertical;min-height:96px}select.formInput{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.formRow{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}.modalActions{display:flex;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-lg)}.btnSecondary{background:transparent;border:1px solid var(--border-visible);color:var(--text-secondary);min-height:42px;padding:8px 24px;border-radius:999px;font-family:Space Mono,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .15s}.btnSecondary:hover{border-color:var(--text-secondary);color:var(--text-primary)}.btnPrimary{background:var(--text-display);border:none;color:var(--black);min-height:42px;padding:8px 24px;border-radius:999px;font-family:Space Mono,monospace;font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:opacity .15s}.btnPrimary:hover{opacity:.85}.btnPrimary:disabled{opacity:.3;cursor:not-allowed}.appLayout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0}.loading{display:flex;align-items:center;justify-content:center;padding:var(--space-2xl);color:var(--text-disabled);font-family:Space Mono,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase}.errorBanner{background:var(--accent-subtle);border:1px solid var(--accent);color:var(--accent);padding:10px var(--space-md);border-radius:8px;font-family:Space Mono,monospace;font-size:12px;margin-bottom:var(--space-md)}.wsIndicator{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}.wsIndicator.connected{background:var(--success)}.wsIndicator.disconnected{background:var(--text-disabled)}.mobileList{display:none}.mobileGroup{border-bottom:1px solid var(--border)}.mobileGroupHeader{display:flex;align-items:center;gap:var(--space-sm);min-height:48px;padding:0 var(--space-md);background:var(--surface)}.mobileGroupToggle{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-height:48px;padding:12px 0;background:transparent;border:none;color:var(--text-primary);font:inherit;cursor:pointer;text-align:left}.mobileGroupToggle:hover,.mobileGroupToggle:focus-visible{color:var(--text-display)}.mobileGroupChevron{font-size:12px;color:var(--text-disabled);transition:transform .15s;width:16px;text-align:center;flex-shrink:0}.mobileGroupChevron.collapsed{transform:rotate(-90deg)}.mobileGroupDot{width:6px;height:6px;border-radius:50%;flex-shrink:0;opacity:.6}.mobileGroupName{font-family:Space Mono,monospace;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}.mobileGroupCount{font-family:Space Mono,monospace;font-size:11px;color:var(--text-disabled);margin-right:auto}.mobileGroupAdd{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;border-radius:999px;font-size:16px;color:var(--text-disabled);cursor:pointer;flex-shrink:0;transition:color .15s}.mobileGroupAdd:hover{color:var(--text-primary)}.mobileGroupBody{padding-bottom:var(--space-xs)}.mobileGroupEmpty{padding:var(--space-md) var(--space-md) var(--space-md) 46px;font-family:Space Mono,monospace;font-size:11px;color:var(--text-disabled);letter-spacing:.04em;text-transform:uppercase}.mobileTaskRow{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:12px var(--space-md);background:none;border:none;border-top:1px solid var(--border);color:var(--text-primary);font:inherit;cursor:pointer;text-align:left;transition:background .1s}.mobileTaskRow:hover,.mobileTaskRow:focus-visible{background:var(--surface)}.mobileTaskRow.selected{background:var(--surface);border-left:2px solid var(--text-display)}.mobileTaskRow .priorityDot{flex-shrink:0}.mobileTaskTitle{flex:1;min-width:0;font-family:Space Grotesk,sans-serif;font-size:14px;font-weight:400;line-height:1.35;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobileTaskProject{font-family:Space Mono,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-disabled);border:1px solid var(--border-visible);border-radius:999px;padding:2px 10px;white-space:nowrap;flex-shrink:0}.mobileTaskAvatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Space Mono,monospace;font-size:10px;font-weight:700;color:var(--black);background:var(--text-disabled);flex-shrink:0;border:1px solid var(--border-visible)}@media(max-width:960px){.statsBar{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){:root{--page-gutter: 20px}#root{padding-top:max(var(--space-sm),var(--safe-top));padding-bottom:calc(var(--space-lg) + var(--safe-bottom));overflow-x:hidden}.header{padding:0;border-bottom:none;margin-bottom:var(--space-md)}.headerTop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-sm);margin-bottom:var(--space-md)}.headerIdentity{gap:6px}.headerTitleRow{align-items:center;gap:6px}.header h1{font-size:18px}.liveStatus,.providerBadge{min-height:24px;padding:3px 10px;font-size:10px}.newTaskBtn{min-width:44px;min-height:44px;padding:0 16px;align-self:start}.statsBar{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:var(--space-md)}.statCard{padding:12px;gap:var(--space-xs)}.statValue{font-size:28px}.statLabel{font-size:10px}.filterBar{display:flex;flex-direction:column;align-items:stretch;gap:10px}.filterRow{gap:6px}.filterLabel{font-size:10px}.filterGroup{gap:6px}.filterBtn{min-height:34px;padding:6px 12px;font-size:11px}.filterSelect{min-height:34px;font-size:11px;padding:6px 28px 6px 12px;flex:1 1 140px}.filterDivider{display:none}.filterReset{margin-left:auto;padding:6px 4px}.boardShell{display:none}.mobileList{display:block;border-top:1px solid var(--border)}.taskDetailOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9}.taskDetail{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;height:100dvh;border-left:none;padding:calc(var(--space-lg) + var(--safe-top)) max(var(--space-md),var(--safe-right)) calc(var(--space-lg) + var(--safe-bottom)) var(--space-md);z-index:10}.detailTitle{font-size:17px;margin-bottom:var(--space-md)}.detailActions{flex-direction:column}.deleteBtn,.detailSelect{width:100%}.modalOverlay{position:fixed;top:0;right:0;bottom:0;left:0;align-items:flex-end;padding:max(12px,var(--safe-top)) max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left));z-index:20}.modal{width:100%;max-height:85vh;max-height:85dvh;overflow-y:auto;border-radius:16px;padding:var(--space-lg)}.formRow{grid-template-columns:1fr;gap:0}.modalActions{flex-direction:column-reverse}.modalActions .btnPrimary,.modalActions .btnSecondary{width:100%}}@media(max-width:520px){.mobileTaskProject{display:none}.headerTop{grid-template-columns:minmax(0,1fr)}.newTaskBtn{width:100%;text-align:center}}