import { useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from 'react' import type { FormEvent, KeyboardEvent, ReactNode, RefObject } from 'react' import type { Context } from '@deepseek-ai/cordis' import type { TypertClientRemote } from '@deepseek-ai/dsh-typert-protocol' import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots' import type {} from '@deepseek-ai/dsh-client-ui-layout/client' import type {} from '@deepseek-ai/dsh-client-ui-sidebar/client' import type { AutomationRule, AutomationRun, SavedWorkflow, TaskboardChangeWatchResult, TaskboardProject, TaskboardTask, TaskDetail as TaskDetailData, WorkflowDocument, } from '../domain/index.js' import { TASK_STATUSES } from '../domain/index.js' import type { TaskboardSnapshot } from '../service/index.js' import { addWorkflowTab, copyWorkflowNode, insertWorkflowNode, moveWorkflowNode, removeWorkflowNode, removeWorkflowTab, } from '../workflow/index.js' import { applyAutomationDefaults, BOARD_COLUMN_PAGE_SIZE, boardDropIntent, createdTaskId, descriptionComposerMode, humanQuickCreateRequest, isPreviewableAttachment, observeSnapshot, paginateBoardColumn, previewAutomationRuns, projectLabelCatalog, sortTaskList, TaskboardClientController, tasksForLabel, type TaskboardConnection, type TaskListSortKey } from './controller.js' import { PopoverShell, useExclusivePopover } from './popover.js' import { applyMarkdownEdit, parseMarkdown, type MarkdownBlock, type MarkdownEditAction, type MarkdownInline } from './markdown.js' import { bindTaskboardLocale, currentTaskboardLanguage, formatAutomationLog, formatOpenedAt, interpolate, priorityLabel, subscribeTaskboardLocale, TASKBOARD_LOCALE_NS, taskboardLocales, taskboardStrings, type TaskboardCopy, type TaskboardLocaleRuntime, } from './locales.js' import taskboardRemote from '../../generated/typert.remote-client.js' export { bindTaskboardLocale, taskboardStrings } from './locales.js' export const inject = ['slots', 'connection', 'sessions', 'workspaces', 'uiWorkspace', 'conversation', 'remote', 'locale'] interface InjectedProps { controller: TaskboardClientController } interface WorkspaceOption { readonly workspaceId: string readonly title: string readonly path: string } interface IWorkspaces { readonly list: { subscribe(listener: () => void): () => void getSnapshot(): { readonly items: readonly WorkspaceOption[] } } } interface ISessions { readonly list: { getSnapshot(): { readonly current?: string; readonly byId: Readonly> } subscribe(listener: () => void): () => void } refresh(): Promise open(sessionId: string): void scope(sessionId: string): unknown } interface ISlots { inject(key: string, callback: () => unknown): unknown register(options: { name: string; id: string }, component: unknown): unknown } interface UiWorkspace { connectWorkspace(workspaceId: string): Promise } interface PageInjectedProps extends InjectedProps { workspaces: IWorkspaces } interface TaskSessionNavigator { readonly list: { getSnapshot(): { readonly byId: Readonly> } } refresh(): Promise open(sessionId: string): void } /** A disposed automation Agent becomes a persisted cold Session. Refresh the native list before * selecting it: sessions.open intentionally rejects ids absent from the current list snapshot. */ export async function openTaskSession(navigator: TaskSessionNavigator, sessionId: string): Promise { if (navigator.list.getSnapshot().byId[sessionId] === undefined) await navigator.refresh() if (navigator.list.getSnapshot().byId[sessionId] === undefined) { throw new Error(`Session ${sessionId} is unavailable`) } navigator.open(sessionId) } /** Narrow structural face used at the plugin boundary; the service is provided by dsh-client-ui-conversation. */ interface ConversationDraftPort { readonly input: { for(ctx: unknown): { setDraft(text: string): void } } } type NavProps = PropsRuntime<'sidebar.footer.action'> & InjectedProps type PageProps = PropsRuntime<'shell.overlay'> & PageInjectedProps function useStrings(): TaskboardCopy { return taskboardStrings(useSyncExternalStore(subscribeTaskboardLocale, currentTaskboardLanguage, currentTaskboardLanguage)) } /** Kanban glyph in the DSH filled-outline family (same optical weight as the settings gear). */ function TaskboardIcon({ size }: { size: number }) { return ( ) } /** Filled floppy-disk glyph so the primary Save action stays recognizable at small sizes. */ function SaveIcon({ size }: { size: number }) { return ( ) } /** 14px stroke X matching the Harness settings/modal close glyph. */ function CloseIcon({ size }: { size: number }) { return ( ) } /** Downward chevron used as the board-column lazy-load affordance. */ function MoreIcon({ size }: { size: number }) { return ( ) } function actorName(value: string): string { return value.split(/[:/]/).pop() || value } function actorInitial(value: string): string { return (actorName(value).trim().slice(0, 1) || '?').toUpperCase() } function isClosedStatus(status: TaskboardTask['status']): boolean { return status === 'done' || status === 'canceled' } /** Backoff before the change poll is retried, and the idle delay before a truncated project's * search reaches SQLite. */ const WATCH_RETRY_MS = 2_000 const SEARCH_DEBOUNCE_MS = 250 function pause(ms: number, signal: AbortSignal): Promise { return new Promise(resolve => { const timer = window.setTimeout(() => { signal.removeEventListener('abort', onAbort); resolve() }, ms) function onAbort(): void { window.clearTimeout(timer); resolve() } signal.addEventListener('abort', onAbort, { once: true }) }) } const MARKDOWN_TOOLBAR: readonly { action: MarkdownEditAction; label: 'mdHeading' | 'mdBold' | 'mdItalic' | 'mdQuote' | 'mdCode' | 'mdLink' | 'mdBullet' | 'mdNumber'; glyph: string }[] = [ { action: 'heading', label: 'mdHeading', glyph: 'H' }, { action: 'bold', label: 'mdBold', glyph: 'B' }, { action: 'italic', label: 'mdItalic', glyph: 'I' }, { action: 'quote', label: 'mdQuote', glyph: '“' }, { action: 'code', label: 'mdCode', glyph: '' }, { action: 'link', label: 'mdLink', glyph: '[]' }, { action: 'ul', label: 'mdBullet', glyph: '•' }, { action: 'ol', label: 'mdNumber', glyph: '1.' }, ] function ComposerTabs({ mode, onChange }: { mode: 'write' | 'preview'; onChange: (mode: 'write' | 'preview') => void }) { const t = useStrings() return (

) } function MarkdownComposer({ value, onChange, mode, onModeChange, placeholder, emptyPreview, }: { value: string onChange: (value: string) => void mode: 'write' | 'preview' onModeChange: (mode: 'write' | 'preview') => void placeholder: string emptyPreview: ReactNode }) { const t = useStrings() const textareaRef = useRef(null) const run = (action: MarkdownEditAction): void => { const field = textareaRef.current const next = applyMarkdownEdit(value, field?.selectionStart ?? value.length, field?.selectionEnd ?? value.length, action) onChange(next.value) requestAnimationFrame(() => { textareaRef.current?.focus() textareaRef.current?.setSelectionRange(next.selectionStart, next.selectionEnd) }) } const onKeyDown = (event: KeyboardEvent): void => { if (!(event.metaKey || event.ctrlKey) || event.altKey) return const key = event.key.toLowerCase() const action = key === 'b' ? 'bold' : key === 'i' ? 'italic' : key === 'k' ? 'link' : key === 'e' ? 'code' : undefined if (action === undefined) return event.preventDefault() run(action) } return ( <>

{mode === 'write' && ( )}

{mode === 'write' ?

{ onChange(event.target.value) }} onKeyDown={onKeyDown} />
        : <div className="dsh-taskboard-composer-preview">{value.trim() === '' ? emptyPreview : <MarkdownText value={value} />}</div>}
    </>
  )
}

/** Attachment row with an inline preview for image types; other types stay download-only. */
function AttachmentRow({ attachment, download, preview, remove, showMeta = false }: {
  attachment: TaskDetailData['attachments'][number]
  download: (attachmentId: string, filename: string) => Promise<void>
  preview: (attachmentId: string) => Promise<string>
  remove: () => void
  showMeta?: boolean
}) {
  const t = useStrings()
  const [url, setUrl] = useState<string>()
  const previewable = isPreviewableAttachment(attachment.contentType)
  return (
    <article className="dsh-taskboard-attachment-row">
      <div>
        <button type="button" className="dsh-taskboard-link" onClick={() => { void download(attachment.id, attachment.filename) }}>{attachment.filename}</button>
        {showMeta && <small>{attachment.contentType} · {attachment.byteSize} {t.bytes}</small>}
        {previewable && <button type="button" className="dsh-taskboard-link" aria-expanded={url !== undefined} onClick={() => {
          if (url !== undefined) { setUrl(undefined); return }
          // Each ticket is single-use, so a fresh one is minted every time the preview reopens.
          void preview(attachment.id).then(setUrl)
        }}>{url === undefined ? t.showPreview : t.hidePreview}</button>}
        <button type="button" onClick={remove}>{t.delete}</button>
      </div>
      {url !== undefined && <img src={url} alt={attachment.filename} />}
    </article>
  )
}

function MetaField({ label, children, nested = false }: { label: string; children: ReactNode; nested?: boolean }) {
  return (
    <div className={nested ? 'dsh-taskboard-meta-field dsh-taskboard-meta-nested' : 'dsh-taskboard-meta-field'}>
      <span>{label}</span>
      <div>{children}</div>
    </div>
  )
}

/** Sidebar foot styles must live on the nav itself: the page style tag unmounts when the overlay is closed.
 *  Wide geometry matches Host Settings: 34px row, full column width, 12px radius, icon+label left-aligned.
 *  Pressed/hover fill is the only selected chrome; do not restore native button padding or grey inset. */
const NAV_STYLES = `
.dsh-taskboard-nav{-webkit-appearance:none;appearance:none;flex:none;display:flex;align-items:center;gap:8px;width:calc(100% + 8px);height:34px;margin:4px -4px;padding:6px 2px 6px 10px;box-sizing:border-box;border:none;border-radius:12px;background:transparent;box-shadow:none;color:var(--dsw-alias-label-primary,#0f1115);cursor:pointer;font:inherit;font-size:14px;line-height:22px;overflow:hidden}.dsh-taskboard-nav:hover,.dsh-taskboard-nav[aria-pressed=true]{background:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06))}.dsh-taskboard-nav-rail{width:36px;height:36px;margin:8px 0 10px;justify-content:center;gap:0;padding:0;border-radius:50%}.dsh-taskboard-nav-label{overflow:hidden;white-space:nowrap}
`

export function TaskboardNavButton({ wide, controller }: NavProps) {
  const route = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot)
  const t = useStrings()
  return (
    <>
      <style>{NAV_STYLES}</style>
      <button type="button" className={wide ? 'dsh-taskboard-nav' : 'dsh-taskboard-nav dsh-taskboard-nav-rail'} aria-pressed={route.open} aria-label={t.taskboard} onClick={() => { route.open ? controller.close() : controller.open() }}>
        <TaskboardIcon size={wide ? 16 : 18} />{wide && <span className="dsh-taskboard-nav-label">{t.taskboard}</span>}
      </button>
    </>
  )
}

/** Resolve the sidebar/detail column widths so the page fills only the center column. */
function useFrameInsets(ref: RefObject<HTMLDivElement | null>, active: boolean): { left: number; right: number } {
  const [insets, setInsets] = useState({ left: 0, right: 0 })
  useEffect(() => {
    if (!active || ref.current === null) return
    // DOM: page → [data-slot] anchor (display:contents) → shell.overlay layer → grid frame.
    const frame = ref.current.parentElement?.parentElement?.parentElement
    if (frame === null || frame === undefined) return
    const measure = (): void => {
      const tracks = getComputedStyle(frame).gridTemplateColumns.split(' ')
      const left = Number.parseFloat(tracks[0] ?? '0')
      const right = Number.parseFloat(tracks[tracks.length - 1] ?? '0')
      setInsets({
        left: Number.isFinite(left) ? left : 0,
        right: Number.isFinite(right) ? right : 0,
      })
    }
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(frame)
    return () => { observer.disconnect() }
  }, [active, ref])
  return insets
}

export function TaskboardPage({ controller, workspaces }: PageProps) {
  const route = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot)
  const workspaceList = useMemo(() => observeSnapshot(workspaces.list), [workspaces])
  const workspaceState = useSyncExternalStore(
    workspaceList.subscribe,
    workspaceList.getSnapshot,
    workspaceList.getSnapshot,
  )
  const root = useRef<HTMLDivElement>(null)
  const insets = useFrameInsets(root, route.open)
  const [snapshot, setSnapshot] = useState<TaskboardSnapshot>()
  const [detail, setDetail] = useState<TaskDetailData>()
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState<string>()
  const [refreshKey, setRefreshKey] = useState(0)
  const [query, setQuery] = useState('')
  /** Matches from SQLite for a project whose snapshot was truncated; the in-memory filter below
   *  can only ever see the rows the snapshot carried. */
  const [searchHits, setSearchHits] = useState<readonly TaskboardTask[]>([])
  const [statusFilter, setStatusFilter] = useState<string>('all')
  const [logOpen, setLogOpen] = useState(false)
  const [undo, setUndo] = useState<{ endpoint: string; payload: Record<string, unknown> }>()
  /** Newest globalRevision already rendered; the change poll uses it to skip redundant refetches. */
  const loadedRevision = useRef(0)
  /** Serializes writes so a double-click cannot duplicate a task or race the expected version. */
  const inFlight = useRef(false)
  /** Set by the open task dialog; title/description/meta edits live in local state until Save. */
  const detailDirty = useRef(false)
  const [discardPrompt, setDiscardPrompt] = useState(false)
  const t = useStrings()

// route.view is deliberately absent: every view renders the same snapshot, so switching tabs
  // must not refetch it.
  useEffect(() => {
    if (!route.open) return
    const abort = new AbortController()
    setBusy(true)
    controller.snapshot(route.projectId, abort.signal).then(next => {
      controller.recordSnapshotRevision(next.globalRevision)
      loadedRevision.current = next.globalRevision
      setSnapshot(next)
      setError(undefined)
      if (route.projectId === undefined && next.projects[0] !== undefined) controller.select(next.projects[0].id, route.view)
    }).catch((cause: unknown) => {
      if (!abort.signal.aborted) setError(cause instanceof Error ? cause.message : String(cause))
    }).finally(() => { if (!abort.signal.aborted) setBusy(false) })
    return () => { abort.abort() }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [controller, refreshKey, route.open, route.projectId])

useEffect(() => {
    if (!route.open || route.taskId === undefined) { setDetail(undefined); return }
    const abort = new AbortController()
    controller.detail(route.taskId, abort.signal).then(value => {
      if (!abort.signal.aborted) setDetail(value)
    }).catch((cause: unknown) => {
      if (!abort.signal.aborted) setError(cause instanceof Error ? cause.message : String(cause))
    })
    return () => { abort.abort() }
  }, [controller, refreshKey, route.open, route.taskId])

useEffect(() => {
    if (!route.open) return
    return controller.subscribeConnection(() => { setRefreshKey(value => value + 1) })
  }, [controller, route.open])

useEffect(() => {
    if (!route.open || snapshot === undefined) return
    const timer = window.setInterval(() => { setRefreshKey(value => value + 1) }, snapshot.refreshIntervalMs)
    return () => { window.clearInterval(timer) }
  }, [route.open, snapshot?.refreshIntervalMs])

useEffect(() => {
    if (!route.open || snapshot === undefined) return
    const abort = new AbortController()
    const watch = async (): Promise<void> => {
      let revision = snapshot.globalRevision
      while (!abort.signal.aborted) {
        let result: TaskboardChangeWatchResult
        try {
          result = await controller.watchChanges(revision, abort.signal)
        } catch (cause) {
          if (abort.signal.aborted) return
          setError(cause instanceof Error ? cause.message : String(cause))
          // Leaving the loop here left the page on the 15s periodic refetch until the revision
          // happened to move, which is exactly when it could not move on its own.
          await pause(WATCH_RETRY_MS, abort.signal)
          continue
        }
        if (abort.signal.aborted) return
        if (result.changed || result.globalRevision !== revision) {
          // A local mutation already refreshes on its own. Without this guard its committed
          // revision wakes the poll too and the same snapshot is fetched a second time.
          if (result.globalRevision > loadedRevision.current) setRefreshKey(value => value + 1)
          return
        }
        revision = result.globalRevision
      }
    }
    void watch()
    return () => { abort.abort() }
  }, [controller, route.open, snapshot?.globalRevision])

// Only a truncated project needs SQLite: otherwise the snapshot already holds every task the
  // in-memory filter below could match.
  useEffect(() => {
    const needle = query.trim()
    const projectId = route.projectId
    if (!route.open || snapshot?.tasksTruncated !== true || needle === '' || projectId === undefined) {
      setSearchHits([])
      return
    }
    const abort = new AbortController()
    const timer = window.setTimeout(() => {
      controller.searchTasks(projectId, needle, abort.signal).then(hits => {
        if (!abort.signal.aborted) setSearchHits(hits)
      }, () => { /* the local filter still answers for everything the snapshot holds */ })
    }, SEARCH_DEBOUNCE_MS)
    return () => { abort.abort(); window.clearTimeout(timer) }
  }, [controller, query, route.open, route.projectId, snapshot?.tasksTruncated, refreshKey])

useEffect(() => {
    if (!route.open) return
    const onKey = (event: globalThis.KeyboardEvent): void => {
      if (event.key !== 'Escape') return
      if (discardPrompt) {
        event.preventDefault()
        setDiscardPrompt(false)
        return
      }
      if (logOpen) {
        event.preventDefault()
        setLogOpen(false)
        return
      }
      if (route.taskId !== undefined) {
        event.preventDefault()
        // Escape used to discard unsaved title/description edits without a word.
        if (detailDirty.current) setDiscardPrompt(true)
        else controller.select(route.projectId, route.view)
        return
      }
      controller.close()
    }
    document.addEventListener('keydown', onKey)
    return () => { document.removeEventListener('keydown', onKey) }
  }, [controller, discardPrompt, logOpen, route.open, route.projectId, route.taskId, route.view])

if (!route.open) return null
  const selected = snapshot?.projects.find(project => project.id === route.projectId) ?? snapshot?.projects[0]
  const tasks = snapshot?.tasks ?? []
  const searchable = searchHits.length === 0
    ? tasks
    : [...tasks, ...searchHits.filter(hit => !tasks.some(task => task.id === hit.id))]
  const visibleTasks = searchable.filter(task => {
    if (statusFilter !== 'all' && task.status !== statusFilter) return false
    const needle = query.trim().toLocaleLowerCase()
    return needle === ''
      || `${task.identifier} ${task.title} ${task.description} ${task.labels.join(' ')}`.toLocaleLowerCase().includes(needle)
  })
  // A deep link can name a task the snapshot never carried. The detail fetch is keyed on
  // route.taskId alone, so open the dialog on whichever of the two resolved it.
  const selectedTask = tasks.find(task => task.id === route.taskId)
    ?? (detail !== undefined && detail.task.id === route.taskId ? detail.task : undefined)
  const refresh = (): void => { setRefreshKey(value => value + 1) }
  const closeDetail = (): void => {
    detailDirty.current = false
    setDiscardPrompt(false)
    controller.select(selected?.id, route.view)
  }
  /** Every path that closes the task dialog goes through here so unsaved edits are never dropped. */
  const requestCloseDetail = (): void => {
    if (detailDirty.current) setDiscardPrompt(true)
    else closeDetail()
  }
  const mutate = async (endpoint: string, payload: Record<string, unknown>): Promise<unknown> => {
    // One in-flight write at a time. Without this a double-click either creates a duplicate task
    // (task.create carries no expected version) or fails the second attempt on a stale version.
    if (inFlight.current) return undefined
    inFlight.current = true
    setBusy(true)
    try {
      const prior = endpoint === 'task.update' && typeof payload['taskId'] === 'string'
        ? tasks.find(task => task.id === payload['taskId'])
        : undefined
      const request = payload['request'] as Record<string, unknown> | undefined
      const value = await controller.mutate(endpoint, payload)
      if (prior !== undefined && request !== undefined && typeof value === 'object' && value !== null && 'version' in value) {
        const inverse: Record<string, unknown> = {}
        for (const key of Object.keys(request)) inverse[key] = (prior as unknown as Record<string, unknown>)[key] ?? null
        setUndo({ endpoint: 'task.update', payload: { taskId: prior.id, expectedVersion: Number((value as { version: unknown }).version), request: inverse } })
      } else if ((endpoint === 'task.archive' || endpoint === 'task.restore') && typeof value === 'object' && value !== null && 'version' in value && typeof payload['taskId'] === 'string') {
        setUndo({
          endpoint: endpoint === 'task.archive' ? 'task.restore' : 'task.archive',
          payload: { taskId: payload['taskId'], expectedVersion: Number((value as { version: unknown }).version) },
        })
      }
      if (endpoint === 'task.create' && createdTaskId(value) !== undefined) {
        const created = value as TaskboardTask
        setSnapshot(prev => {
          if (prev === undefined || prev.tasks.some(task => task.id === created.id)) return prev
          return { ...prev, tasks: [created, ...prev.tasks] }
        })
      }
      setError(undefined); refresh()
      return value
    }
    catch (cause) {
      const message = cause instanceof Error ? cause.message : String(cause)
      setError(message)
      if (message.includes('TASK_STALE_VERSION')) refresh()
      return undefined
    }
    finally { inFlight.current = false; setBusy(false) }
  }
  const performUndo = async (): Promise<void> => {
    if (undo === undefined || inFlight.current) return
    inFlight.current = true
    setBusy(true)
    try {
      // Re-read the version at click time: any write since the undo was recorded moved it on, and
      // replaying the captured one only produced a stale-version error.
      const current = tasks.find(task => task.id === undo.payload['taskId'])
      const payload = current === undefined ? undo.payload : { ...undo.payload, expectedVersion: current.version }
      await controller.mutate(undo.endpoint, payload)
      setUndo(undefined); setError(undefined); refresh()
    }
    catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)) }
    finally { inFlight.current = false; setBusy(false) }
  }

return (
    <div ref={root} className="dsh-taskboard-page" style={{ left: insets.left, right: insets.right }} role="main" aria-label={t.taskboard}>
      <style>{STYLES}</style>
      <header className="dsh-taskboard-header">
        <div className="dsh-taskboard-brand"><TaskboardIcon size={16} /><strong>{t.taskboard}</strong></div>
        <select aria-label={t.project} value={selected?.id ?? ''} onChange={event => { controller.select(event.target.value || undefined, route.view) }}>
          {snapshot?.projects.map(project => <option key={project.id} value={project.id}>{project.key} · {project.name}</option>)}
        </select>
        <ProjectCreate controller={controller} refresh={refresh} workspaces={workspaceState.items} />
        {selected !== undefined && <ProjectActions project={selected} controller={controller} refresh={refresh} workspaces={workspaceState.items} />}
        <button type="button" onClick={refresh}>{t.refresh}</button>
        {selected !== undefined && <AutomationActions project={selected} automations={snapshot?.automations ?? []} defaults={snapshot?.automationDefaults} mutate={mutate} />}
        <button type="button" className="dsh-taskboard-icon-close" aria-label={t.close} onClick={() => { controller.close() }}><CloseIcon size={14} /></button>
      </header>
      <div className="dsh-taskboard-filters">
        <input aria-label={t.search} placeholder={t.search} value={query} onChange={event => { setQuery(event.target.value) }} />
        <select aria-label={t.allStatuses} value={statusFilter} onChange={event => { setStatusFilter(event.target.value) }}>
          <option value="all">{t.allStatuses}</option>
          {(['backlog', 'todo', 'in_progress', 'in_review', 'blocked', 'done', 'canceled'] as const).map(status => <option key={status} value={status}>{t[status]}</option>)}
        </select>
        <button type="button" disabled={undo === undefined || busy} onClick={() => { void performUndo() }}>{t.undo}</button>
      </div>
      <nav className="dsh-taskboard-tabs" aria-label={t.taskboard}>
        {(['dashboard', 'board', 'list', 'labels', 'gantt', 'workflows'] as const).map(view => (
          <button key={view} type="button" aria-current={route.view === view ? 'page' : undefined} onClick={() => { controller.select(selected?.id, view) }}>{t[view]}</button>
        ))}
      </nav>
      {error !== undefined && <div className="dsh-taskboard-error" role="alert"><span>{error}</span><button type="button" aria-label={t.dismiss} onClick={() => { setError(undefined) }}><CloseIcon size={12} /></button></div>}
      {snapshot?.tasksTruncated === true && <div className="dsh-taskboard-notice" role="status">{interpolate(t.tasksTruncated, { shown: snapshot.tasks.length, total: snapshot.taskTotal })}</div>}
      {busy && snapshot === undefined
        ? <div className="dsh-taskboard-loading">{t.loading}</div>
        : <div className="dsh-taskboard-content">
          <main className="dsh-taskboard-view">
            {selected === undefined
              ? <div className="dsh-taskboard-empty"><p>{t.noProject}</p><ProjectCreate controller={controller} refresh={refresh} workspaces={workspaceState.items} /></div>
              : <>
                <TaskCreate project={selected} mutate={mutate} onCreated={taskId => { controller.select(selected.id, route.view, taskId) }} />
                {route.view === 'dashboard' && <Dashboard tasks={visibleTasks} runs={snapshot?.automationRuns ?? []} project={selected} storage={snapshot?.storageHealth} open={task => { controller.select(selected?.id, route.view, task.id) }} openLog={() => { setLogOpen(true) }} mutate={mutate} />}
                {route.view === 'board' && <Board key={selected?.id ?? 'none'} tasks={visibleTasks} open={task => { controller.select(selected?.id, route.view, task.id) }} mutate={mutate} />}
                {route.view === 'list' && <ListView tasks={visibleTasks} open={task => { controller.select(selected?.id, route.view, task.id) }} />}
                {route.view === 'labels' && <LabelsView project={selected} tasks={visibleTasks} open={task => { controller.select(selected?.id, route.view, task.id) }} mutate={mutate} />}
                {route.view === 'gantt' && <Gantt tasks={visibleTasks} open={task => { controller.select(selected?.id, route.view, task.id) }} />}
                {route.view === 'workflows' && <WorkflowEditor project={selected} workflows={snapshot?.workflows ?? []} catalog={snapshot?.workflowCatalog ?? []} capabilities={snapshot?.workflowCapabilities} mutate={mutate} />}
              </>}
          </main>
        </div>}
      {logOpen && <AutomationLogDialog runs={snapshot?.automationRuns ?? []} tasks={tasks} close={() => { setLogOpen(false) }} />}
      {discardPrompt && <div className="dsh-taskboard-dialog-backdrop" onClick={event => { if (event.target === event.currentTarget) setDiscardPrompt(false) }}>
        <div className="dsh-taskboard-discard-dialog" role="alertdialog" aria-modal="true" aria-label={t.unsavedChanges}>
          <h2>{t.unsavedChanges}</h2>
          <p>{t.unsavedBody}</p>
          <div>
            <button type="button" autoFocus onClick={() => { setDiscardPrompt(false) }}>{t.keepEditing}</button>
            <button type="button" onClick={closeDetail}>{t.discardChanges}</button>
          </div>
        </div>
      </div>}
      {selectedTask !== undefined && <TaskDetail key={selectedTask.id} project={selected} task={selectedTask} tasks={tasks} workflows={snapshot?.workflows ?? []} detail={detail} mutate={mutate} upload={async (file, commentId) => { setBusy(true); try { await controller.uploadAttachment(selectedTask.id, detail?.task.version ?? selectedTask.version, file, commentId); refresh() } catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)) } finally { setBusy(false) } }} download={(id, filename) => controller.downloadAttachment(id, filename)} preview={id => controller.previewAttachmentUrl(id)} openSession={async sessionId => { setBusy(true); try { await controller.openSession(sessionId) } catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)) } finally { setBusy(false) } }} openNewSession={async () => { if (selected?.workspaceId === undefined || detail === undefined) return; setBusy(true); try { await controller.openNewSession(selected.workspaceId, detail) } catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)) } finally { setBusy(false) } }} close={requestCloseDetail} onDirtyChange={value => { detailDirty.current = value }} />}
    </div>
  )
}

function ProjectActions({ project, controller, refresh, workspaces }: {
  project: TaskboardProject
  controller: TaskboardClientController
  refresh: () => void
  workspaces: readonly WorkspaceOption[]
}) {
  const t = useStrings()
  const editPopover = useExclusivePopover()
  const deletePopover = useExclusivePopover()
  const [name, setName] = useState(project.name)
  const [workspace, setWorkspace] = useState(project.workspaceId ?? '')
  const [labels, setLabels] = useState(project.labels.join(', '))
  useEffect(() => { setName(project.name); setWorkspace(project.workspaceId ?? ''); setLabels(project.labels.join(', ')) }, [project])
  const edit = async (event: FormEvent): Promise<void> => {
    event.preventDefault()
    if (name.trim() === '') return
    await controller.mutate('project.update', {
      projectId: project.id,
      expectedVersion: project.version,
      request: { name: name.trim(), workspaceId: workspace.trim() || null, labels: labels.split(',').map(value => value.trim()).filter(Boolean) },
    })
    editPopover.setOpen(false)
    refresh()
  }
  const remove = async (): Promise<void> => {
    await controller.mutate('project.delete', { projectId: project.id, expectedVersion: project.version })
    deletePopover.setOpen(false)
    controller.select(undefined, 'dashboard')
    refresh()
  }
  return (
    <>
      <PopoverShell open={editPopover.open} onToggle={editPopover.toggle} onDismiss={() => { editPopover.setOpen(false) }} label={t.editProject}>
        <form onSubmit={event => { void edit(event) }}>
          <label>{t.projectName}<input autoFocus value={name} onChange={event => { setName(event.target.value) }} /></label>
          <label>{t.workspaceId}<select value={workspace} onChange={event => { setWorkspace(event.target.value) }}><option value="">{t.blankGlobal}</option>{project.workspaceId !== undefined && !workspaces.some(item => item.workspaceId === project.workspaceId) && <option value={project.workspaceId}>{project.workspaceId}</option>}{workspaces.map(item => <option key={item.workspaceId} value={item.workspaceId}>{item.title} · {item.path}</option>)}</select></label>
          <label>{t.labels}<input value={labels} onChange={event => { setLabels(event.target.value) }} /></label>
          <div>
            <button type="submit">{t.save}</button>
            <button type="button" onClick={() => { editPopover.setOpen(false) }}>{t.cancel}</button>
          </div>
        </form>
      </PopoverShell>
      <PopoverShell open={deletePopover.open} onToggle={deletePopover.toggle} onDismiss={() => { deletePopover.setOpen(false) }} label={t.deleteProject}>
        <div className="dsh-taskboard-confirm" role="alert">
          <span>{t.deleteProject}: {project.key} · {project.name}?</span>
          <button type="button" onClick={() => { void remove() }}>{t.deleteProject}</button>
          <button type="button" onClick={() => { deletePopover.setOpen(false) }}>{t.cancel}</button>
        </div>
      </PopoverShell>
    </>
  )
}

function TaskCreate({ project, mutate, onCreated }: {
  project: TaskboardProject | undefined
  mutate: (endpoint: string, payload: Record<string, unknown>) => Promise<unknown>
  onCreated: (taskId: string) => void
}) {
  const [title, setTitle] = useState('')
  const t = useStrings()
  const submit = (event: FormEvent): void => {
    event.preventDefault()
    if (project === undefined || title.trim() === '') return
    void mutate('task.create', { request: humanQuickCreateRequest(project.id, title) }).then(value => {
      const taskId = createdTaskId(value)
      if (taskId === undefined) return
      setTitle('')
      onCreated(taskId)
    })
  }
  return <form className="dsh-taskboard-create" onSubmit={submit}><input value={title} onChange={event => { setTitle(event.target.value) }} placeholder={t.newTask} aria-label={t.title} /><button type="submit" disabled={project === undefined}>{t.create}</button></form>
}

/** The integrity scan reads every database page, so it is an explicit action, never part of a refresh. */
function StorageHealthPanel({ storage, mutate }: {
  storage: TaskboardSnapshot['storageHealth']
  mutate: (endpoint: string, payload: Record<string, unknown>) => Promise<unknown>
}) {
  const t = useStrings()
  const [checking, setChecking] = useState(false)
  return (
    <section className="dsh-taskboard-storage" data-status={storage.status}>
      <header>
        <h2>{t.storageHealth}</h2>
        <div className="dsh-taskboard-storage-actions">
          <strong>{storage.status === 'ok' ? t.healthy : t.degraded}</strong>
          <button type="button" disabled={checking} onClick={() => {
            setChecking(true)
            void mutate('storage.check-integrity', {}).finally(() => { setChecking(false) })
          }}>{t.recheckIntegrity}</button>
        </div>
      </header>
      <span>SQLite: {storage.integrity} · schema v{storage.schemaVersion} · revision {storage.globalRevision}</span>
      <span>{storage.taskCount} {t.tasksWord} · {storage.attachmentCount} {t.attachments} · {storage.attachmentBytes} {t.bytes}</span>
      <span>{t.cleanupPending}: {storage.cleanupPending} · {t.cleanupStalled}: {storage.cleanupStalled} · {t.orphanedClaims}: {storage.orphanedClaims}</span>
      <span>{t.lastChecked}: {storage.integrityCheckedAt === 0 ? t.never : new Date(storage.integrityCheckedAt).toLocaleString()}</span>
    </section>
  )
}

function Dashboard({ tasks, runs, project, storage, open, openLog, mutate }: {
  tasks: readonly TaskboardTask[]
  runs: readonly AutomationRun[]
  project: TaskboardProject | undefined
  storage: TaskboardSnapshot['storageHealth'] | undefined
  open: (task: TaskboardTask) => void
  openLog: () => void
  mutate: (endpoint: string, payload: Record<string, unknown>) => Promise<unknown>
}) {
  const t = useStrings()
  const counts = useMemo(() => {
    const tally: Partial<Record<TaskboardTask['status'], number>> = {}
    for (const task of tasks) tally[task.status] = (tally[task.status] ?? 0) + 1
    return tally
  }, [tasks])
  const dueTasks = useMemo(() => [...tasks]
    .filter(task => task.dueDate !== undefined && task.status !== 'done' && task.status !== 'canceled')
    .sort((left, right) => String(left.dueDate).localeCompare(String(right.dueDate)))
    .slice(0, 8), [tasks])
  const recentTasks = useMemo(() => [...tasks]
    .sort((left, right) => right.createdAt - left.createdAt)
    .slice(0, 8), [tasks])
  return <><div className="dsh-taskboard-dashboard">{(['todo', 'in_progress', 'in_review', 'blocked'] as const).map(status => <div key={status}><strong>{counts[status] ?? 0}</strong><span>{t[status]}</span></div>)}</div><section className="dsh-taskboard-summary"><h2>{project?.key ?? '—'} · {project?.name ?? t.project}</h2><span>{project?.workspaceId === undefined ? t.globalProject : `${t.workspace}: ${project.workspaceId}`}</span><span>{project?.labels.length === 0 ? t.noProjectLabels : `${t.labels}: ${project?.labels.join(', ')}`}</span><span>{tasks.length} {t.tasksWord} · {counts['in_progress'] ?? 0} {t.activeWord} · {counts['in_review'] ?? 0} {t.in_review}</span></section><section className="dsh-taskboard-due"><h2>{t.recentTasks}</h2>{recentTasks.length === 0 ? <p>{t.empty}</p> : recentTasks.map(task => <button type="button" key={task.id} onClick={() => { open(task) }}><strong>{task.identifier} · {task.title}</strong><span>{t[task.status]}</span></button>)}</section><section className="dsh-taskboard-due"><h2>{t.due}</h2>{dueTasks.length === 0 ? <p>{t.empty}</p> : dueTasks.map(task => <button type="button" key={task.id} onClick={() => { open(task) }}><strong>{task.identifier} · {task.title}</strong><span>{task.dueDate} · {t[task.status]}</span></button>)}</section>{storage !== undefined && <StorageHealthPanel storage={storage} mutate={mutate} />}<AutomationLog runs={runs} tasks={tasks} openLog={openLog} /></>
}

function automationRunLabel(run: AutomationRun, tasks: readonly TaskboardTask[]): string | undefined {
  const task = run.decision.taskId === undefined ? undefined : tasks.find(item => item.id === run.decision.taskId)
  return task === undefined ? run.decision.taskId : `${task.identifier} · ${task.title}`
}

function AutomationLogItems({ runs, tasks }: { runs: readonly AutomationRun[]; tasks: readonly TaskboardTask[] }) {
  const t = useStrings()
  return <ol>{runs.map(run => (
    <li key={run.id} data-kind={run.decision.kind}>
      <time dateTime={new Date(run.createdAt).toISOString()}>{new Date(run.createdAt).toLocaleString()}</time>
      <span>{formatAutomationLog(t, run.decision, automationRunLabel(run, tasks))}</span>
    </li>
  ))}</ol>
}

function AutomationLog({ runs, tasks, openLog }: { runs: readonly AutomationRun[]; tasks: readonly TaskboardTask[]; openLog: () => void }) {
  const t = useStrings()
  const { preview, remaining } = previewAutomationRuns(runs)
  return <section className="dsh-taskboard-log"><header><h2>{t.automationLog}</h2>{remaining > 0 && <button type="button" className="dsh-taskboard-link" onClick={openLog}>{t.more}</button>}</header>{runs.length === 0 ? <p>{t.empty}</p> : <AutomationLogItems runs={preview} tasks={tasks} />}</section>
}

function AutomationLogDialog({ runs, tasks, close }: { runs: readonly AutomationRun[]; tasks: readonly TaskboardTask[]; close: () => void }) {
  const t = useStrings()
  const titleId = useId()
  const dialogRef = useRef<HTMLDivElement>(null)
  useEffect(() => { dialogRef.current?.focus() }, [])
  return (
    <div className="dsh-taskboard-dialog-backdrop" onClick={event => { if (event.target === event.currentTarget) close() }}>
      <div ref={dialogRef} className="dsh-taskboard-log-dialog" role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}>
        <header>
          <h2 id={titleId}>{t.automationLog}</h2>
          <button type="button" className="dsh-taskboard-detail-close" aria-label={t.closeDetail} onClick={close}><CloseIcon size={14} /></button>
        </header>
        {runs.length === 0 ? <p>{t.empty}</p> : <AutomationLogItems runs={runs} tasks={tasks} />}
      </div>
    </div>
  )
}

function AutomationEditor({ rule, defaults, minimumIntervalSeconds, mutate }: {
  rule: AutomationRule
  defaults: TaskboardSnapshot['automationDefaults'] | undefined
  minimumIntervalSeconds: number
  mutate: (endpoint: string, payload: Record<string, unknown>) => Promise<unknown>
}) {
  const t = useStrings()
  const [editing, setEditing] = useState(false)
  const [config, setConfig] = useState(() => applyAutomationDefaults(rule.config, defaults))
  useEffect(() => { setConfig(applyAutomationDefaults(rule.config, defaults)) }, [rule.version, defaults?.modelRoute, defaults?.reasoning])
  const update = (next: AutomationRule['config']): void => { setConfig(next) }
  const setOptional = (key: 'modelRoute' | 'reasoning', value: string): void => {
    const { modelRoute, reasoning, ...required } = config
    update({ ...required, ...(key === 'modelRoute' && value !== '' ? { modelRoute: value } : {}), ...(key === 'reasoning' && value !== '' ? { reasoning: value } : {}), ...(key !== 'modelRoute' && modelRoute !== undefined ? { modelRoute } : {}), ...(key !== 'reasoning' && reasoning !== undefined ? { reasoning } : {}) })
  }
  return <article><div><strong>{rule.config.agentPreset}</strong><span>{rule.state === 'enabled' ? t.enabled : t.paused} · {rule.config.concurrencyLimit} {t.workers} · {rule.config.intervalMs / 1000}s</span></div><div><small>{t.nextRun}: {rule.nextEligibleAt === undefined ? '—' : new Date(rule.nextEligibleAt).toLocaleString()}</small><small>{t.lastDecision}: {rule.lastDecision === undefined ? '—' : formatAutomationLog(t, rule.lastDecision)}</small><small>{t.model}: {rule.config.modelRoute ?? defaults?.modelRoute ?? t.hostDefault} · {t.reasoning}: {rule.config.reasoning ?? defaults?.reasoning ?? t.hostDefault} · {t.quota}: {rule.config.quotaPolicy} · {t.empty}: {rule.config.autoPauseOnEmpty ? t.pause : t.stayEnabled}</small></div><div><button type="button" onClick={() => { void mutate('automation.run-now', { automationId: rule.id }) }}>{t.runNow}</button><button type="button" onClick={() => { void mutate('automation.update', { automationId: rule.id, expectedVersion: rule.version, update: { state: rule.state === 'enabled' ? 'paused' : 'enabled' } }) }}>{rule.state === 'enabled' ? t.pause : t.enable}</button><button type="button" aria-expanded={editing} onClick={() => { setEditing(value => !value) }}>{t.modify}</button></div>{editing && <form className="dsh-taskboard-automation-form" onSubmit={event => { event.preventDefault(); void mutate('automation.update', { automationId: rule.id, expectedVersion: rule.version, update: { config } }).then(() => { setEditing(false) }) }}><label>{t.agentPreset}<input value={config.agentPreset} onChange={event => { update({ ...config, agentPreset: event.target.value }) }} /></label><label>{t.modelRoute}<input value={config.modelRoute ?? ''} onChange={event => { setOptional('modelRoute', event.target.value.trim()) }} /></label><label>{t.reasoning}<input value={config.reasoning ?? ''} onChange={event => { setOptional('reasoning', event.target.value.trim()) }} /></label><label>{t.intervalSeconds}<input type="number" min={minimumIntervalSeconds} value={config.intervalMs / 1000} onChange={event => { update({ ...config, intervalMs: Math.max(minimumIntervalSeconds, Number(event.target.value) || minimumIntervalSeconds) * 1000 }) }} /></label><label>{t.workers}<input type="number" min="1" value={config.concurrencyLimit} onChange={event => { update({ ...config, concurrencyLimit: Math.max(1, Number(event.target.value) || 1) }) }} /></label><label>{t.quota}<select value={config.quotaPolicy} onChange={event => { update({ ...config, quotaPolicy: event.target.value as AutomationRule['config']['quotaPolicy'] }) }}><option value="pause-on-uncertain">{t.pauseUncertain}</option><option value="ignore">{t.ignore}</option></select></label><label><input type="checkbox" checked={config.autoPauseOnEmpty} onChange={event => { update({ ...config, autoPauseOnEmpty: event.target.checked }) }} />{t.autoPauseEmpty}</label><button type="submit" disabled={config.agentPreset.trim() === ''}>{t.save}</button><button type="button" onClick={() => { setEditing(false); setConfig(applyAutomationDefaults(rule.config, defaults)) }}>{t.cancel}</button></form>}</article>
}

function Board({ tasks, open, mutate }: {
  tasks: readonly TaskboardTask[]
  open: (task: TaskboardTask) => void
  mutate: (endpoint: string, payload: Record<string, unknown>) => Promise<unknown>
}) {
  const t = useStrings()
  const [draggedId, setDraggedId] = useState<string>()
  const draggingRef = useRef(false)
  const dragged = tasks.find(task => task.id === draggedId)
  const applyDrop = (status: typeof TASK_STATUSES[number], target?: TaskboardTask): void => {
    const column = tasks.filter(task => task.status === status && task.archivedAt === undefined)
    const intent = boardDropIntent(dragged, status, column, target)
    setDraggedId(undefined)
    if (intent.kind === 'reorder') {
      void mutate('task.update', {
        taskId: intent.taskId,
        expectedVersion: intent.expectedVersion,
        request: { sortOrder: intent.sortOrder },
      })
    } else if (intent.kind === 'move') {
      void mutate('task.move', {
        taskId: intent.taskId,
        expectedVersion: intent.expectedVersion,
        status: intent.status,
        ...(intent.sortOrder === undefined ? {} : { sortOrder: intent.sortOrder }),
      })
    }
  }
  const archived = tasks.filter(task => task.archivedAt !== undefined)
  return <>
    <div className="dsh-taskboard-board">
      {TASK_STATUSES.map(status => (
        <BoardColumn
          key={status}
          status={status}
          tasks={tasks}
          open={open}
          applyDrop={applyDrop}
          draggingRef={draggingRef}
          setDraggedId={setDraggedId}
        />
      ))}
    </div>
    {archived.length > 0 && <section className="dsh-taskboard-other"><h2>{t.other}</h2>{archived.map(task => <TaskCard key={task.id} task={task} open={open} />)}</section>}
  </>
}

function ListView({ tasks, open }: { tasks: readonly TaskboardTask[]; open: (task: TaskboardTask) => void }) {
  const t = useStrings()
  const [sort, setSort] = useState<TaskListSortKey>('identifier')
  const [direction, setDirection] = useState<'asc' | 'desc'>('asc')
  const ordered = useMemo(() => sortTaskList(tasks, sort, direction), [tasks, sort, direction])
  const heading = (key: TaskListSortKey, label: string) => (
    <th aria-sort={sort === key ? (direction === 'asc' ? 'ascending' : 'descending') : 'none'}>
      <button type="button" onClick={() => {
        if (sort === key) setDirection(current => current === 'asc' ? 'desc' : 'asc')
        else { setSort(key); setDirection('asc') }
      }}>{label}{sort === key ? (direction === 'asc' ? ' ↑' : ' ↓') : ''}</button>
    </th>
  )
  return <div className="dsh-taskboard-table-wrap"><table><thead><tr>{heading('identifier', 'ID')}{heading('title', t.title)}{heading('status', t.status)}{heading('priority', t.priority)}{heading('dueDate', t.due)}</tr></thead><tbody>{ordered.map(task => <tr key={task.id}><td><button type="button" className="dsh-taskboard-row-open" onClick={() => { open(task) }}>{task.identifier}</button></td><td>{task.title}</td><td>{t[task.status]}</td><td>{priorityLabel(t, task.priority)}</td><td>{task.dueDate ?? '—'}</td></tr>)}</tbody></table></div>
}

function Gantt({ tasks, open }: { tasks: readonly TaskboardTask[]; open: (task: TaskboardTask) => void }) {
  const t = useStrings()
  const [zoom, setZoom] = useState<'month' | 'quarter' | 'year'>('quarter')
  const [showCompleted, setShowCompleted] = useState(false)
  const [anchor, setAnchor] = useState(() => Date.now())
  const rows = useRef<HTMLDivElement>(null)
  // The bars are a percentage of the middle grid column, so the "today" line has to be placed in
  // that column's own pixels. Anchoring it to 50% of the whole component dropped it between the
  // title column and the track.
  const [todayLeft, setTodayLeft] = useState<number>()
  const days = zoom === 'month' ? 30 : zoom === 'quarter' ? 90 : 365
  const start = anchor - ((days / 2) * 86_400_000)
  // Task dates are calendar days validated in UTC by the provider. Parsing them at local midnight
  // shifted every bar a day west of UTC.
  const point = (value: string | undefined, fallback: number): number => value === undefined ? fallback : new Date(`${value}T00:00:00Z`).getTime()
  const end = start + (days * 86_400_000)
  const dated = tasks.filter(task => {
    if (task.startDate === undefined && task.dueDate === undefined) return false
    if (!showCompleted && task.status === 'done') return false
    // A task entirely outside the window used to be clamped to the left edge, drawing a bar that
    // looked like work happening now. Leave it out of the window instead.
    const taskStart = point(task.startDate, point(task.dueDate, anchor))
    const taskEnd = Math.max(point(task.dueDate, taskStart + 86_400_000), taskStart + 86_400_000)
    return taskEnd >= start && taskStart <= end
  })
  useEffect(() => {
    const container = rows.current
    if (container === null) return
    const measure = (): void => {
      const track = container.querySelector('.dsh-taskboard-gantt-track')
      if (track === null) { setTodayLeft(undefined); return }
      const trackBox = track.getBoundingClientRect()
      const containerBox = container.getBoundingClientRect()
      setTodayLeft(trackBox.left - containerBox.left + (trackBox.width / 2))
    }
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(container)
    return () => { observer.disconnect() }
  }, [dated.length, zoom])
  return <div className="dsh-taskboard-gantt"><header><button type="button" onClick={() => { setAnchor(Date.now()) }}>{t.today}</button><select aria-label={t.ganttZoom} value={zoom} onChange={event => { setZoom(event.target.value as typeof zoom) }}><option value="month">{t.days30}</option><option value="quarter">{t.days90}</option><option value="year">{t.oneYear}</option></select><label><input type="checkbox" checked={showCompleted} onChange={event => { setShowCompleted(event.target.checked) }} />{t.showCompleted}</label></header><div className="dsh-taskboard-gantt-rows" ref={rows}>{todayLeft !== undefined && <div className="dsh-taskboard-today" style={{ left: `${String(todayLeft)}px` }} aria-hidden="true" />}{dated.length === 0 ? <div className="dsh-taskboard-empty">{t.noDatedTasks}</div> : dated.map(task => {
    const taskStart = point(task.startDate, point(task.dueDate, anchor))
    const taskEnd = point(task.dueDate, taskStart + 86_400_000)
    const left = Math.max(0, Math.min(100, ((taskStart - start) / (days * 86_400_000)) * 100))
    const width = Math.max(1.5, Math.min(100 - left, ((Math.max(taskEnd, taskStart + 86_400_000) - taskStart) / (days * 86_400_000)) * 100))
    const repeat = task.recurrence === undefined ? '' : ` · ${task.recurrence.frequency}/${task.recurrence.interval}${task.recurrence.until === undefined ? '' : ` until ${task.recurrence.until}`}`
    return <button type="button" key={task.id} onClick={() => { open(task) }}><span>{task.identifier} · {task.title}</span><span className="dsh-taskboard-gantt-track"><i style={{ left: `${left}%`, width: `${width}%` }} /></span><small>{task.startDate ?? '…'} → {task.dueDate ?? '…'}{repeat}</small></button>
  })}</div></div>
}

function WorkflowEditor({ project, workflows, catalog, capabilities, mutate }: {
  project: TaskboardProject | undefined
  workflows: readonly SavedWorkflow[]
  catalog: TaskboardSnapshot['workflowCatalog']
  capabilities: TaskboardSnapshot['workflowCapabilities'] | undefined
  mutate: (endpoint: string, payload: Record<string, unknown>) => Promise<unknown>
}) {
  const t = useStrings()
  const [selectedId, setSelectedId] = useState<string>()
  const selected = workflows.find(item => item.id === selectedId) ?? workflows[0]
  const [name, setName] = useState('')
  const [document, setDocument] = useState<WorkflowDocument>()
  const stepEntries = catalog.filter(item => item.category !== 'trigger')
  const triggerEntries = catalog.filter(item => item.category === 'trigger')
  const [newWorkflowName, setNewWorkflowName] = useState('')
  const [nodeKind, setNodeKind] = useState('tests')
  const [newTabName, setNewTabName] = useState('')
  const [triggerKind, setTriggerKind] = useState('issue-trigger')
  const [confirmDelete, setConfirmDelete] = useState(false)
  useEffect(() => {
    setSelectedId(selected?.id)
    setName(selected?.name ?? '')
    setDocument(selected?.document)
  }, [selected?.id, selected?.name, selected?.version])
  const create = (event: FormEvent): void => {
    event.preventDefault()
    if (project === undefined || newWorkflowName.trim() === '') return
    const trigger = catalog.find(item => item.kind === 'issue-trigger' && item.category === 'trigger')
    if (trigger === undefined) return
    void mutate('workflow.create', {
      projectId: project.id,
      name: newWorkflowName.trim(),
      document: { tabs: [{ id: 'main', name: 'Main', trigger: { id: 'trigger', kind: trigger.kind, execution: trigger.execution, config: {} }, steps: [] }] },
    }).then(() => { setNewWorkflowName('') })
  }
  const addStep = (): void => {
    if (document === undefined) return
    const entry = catalog.find(item => item.kind === nodeKind)
    if (entry === undefined || entry.category === 'trigger') return
    const first = document.tabs[0]
    if (first === undefined) return
    const node = { id: `${nodeKind}-${Date.now()}`, kind: nodeKind, execution: entry.execution, config: {} } as const
    setDocument(insertWorkflowNode(document, first.id, node))
  }
  const addTab = (): void => {
    if (document === undefined || newTabName.trim() === '') return
    const entry = catalog.find(item => item.kind === triggerKind && item.category === 'trigger')
    if (entry === undefined) return
    const suffix = Date.now()
    setDocument(addWorkflowTab(document, { id: `tab-${suffix}`, name: newTabName.trim(), trigger: { id: `trigger-${suffix}`, kind: triggerKind, execution: entry.execution, config: {} }, steps: [] }))
    setNewTabName('')
  }
  const editNode = (action: 'up' | 'down' | 'copy' | 'delete' | 'true' | 'false', tabId: string, nodeId: string): void => {
    if (document === undefined) return
    if (action === 'up' || action === 'down') setDocument(moveWorkflowNode(document, nodeId, action === 'up' ? -1 : 1))
    else if (action === 'copy') {
      const suffix = Date.now()
      setDocument(copyWorkflowNode(document, nodeId, source => `${source}-copy-${suffix}`))
    } else if (action === 'delete') setDocument(removeWorkflowNode(document, nodeId))
    else {
      const entry = catalog.find(item => item.kind === nodeKind && item.category !== 'trigger')
      if (entry === undefined) return
      setDocument(insertWorkflowNode(document, tabId, { id: `${nodeKind}-${Date.now()}`, kind: nodeKind, execution: entry.execution, config: {} }, nodeId, action === 'true' ? 'trueBranch' : 'falseBranch'))
    }
  }
  const addCapability = (kind: 'skill' | 'mcp', target: string): void => {
    if (document === undefined || document.tabs[0] === undefined) return
    const entry = catalog.find(item => item.kind === kind)
    if (entry === undefined) return
    setDocument(insertWorkflowNode(document, document.tabs[0].id, {
      id: `${kind}-${Date.now()}`, kind, execution: entry.execution, config: { target },
    }))
  }
  return <div className="dsh-taskboard-workflows"><aside><form className="dsh-taskboard-workflow-create" onSubmit={create}><input aria-label={t.workflowName} value={newWorkflowName} onChange={event => { setNewWorkflowName(event.target.value) }} placeholder={t.workflowName} /><button type="submit" disabled={project === undefined || newWorkflowName.trim() === ''}>＋ {t.addWorkflow}</button></form>{workflows.map(item => <button type="button" className={item.id === selected?.id ? 'active' : ''} key={item.id} onClick={() => { setSelectedId(item.id) }}><strong>{item.name}</strong><small>v{item.version}</small></button>)}</aside><section>{selected === undefined || document === undefined ? <div className="dsh-taskboard-empty">{t.workflowNote}</div> : <><header><input aria-label={t.workflowName} value={name} onChange={event => { setName(event.target.value) }} /><select aria-label={t.nodeKind} value={nodeKind} onChange={event => { setNodeKind(event.target.value) }}>{stepEntries.map(item => <option key={item.kind} value={item.kind}>{item.kind}</option>)}</select><button type="button" onClick={addStep}>＋ {t.addStep}</button><input aria-label={t.newTabName} value={newTabName} onChange={event => { setNewTabName(event.target.value) }} placeholder={t.newTabName} /><select aria-label={t.triggerKind} value={triggerKind} onChange={event => { setTriggerKind(event.target.value) }}>{triggerEntries.map(item => <option key={item.kind} value={item.kind}>{item.kind}</option>)}</select><button type="button" disabled={newTabName.trim() === ''} onClick={addTab}>＋ {t.tab}</button><button type="button" onClick={() => { void mutate('workflow.update', { workflowId: selected.id, expectedVersion: selected.version, name, document }) }}>{t.save}</button><button type="button" aria-expanded={confirmDelete} onClick={() => { setConfirmDelete(value => !value) }}>×</button>{confirmDelete && <div className="dsh-taskboard-confirm" role="alert"><span>{t.deleteWorkflow}?</span><button type="button" onClick={() => { void mutate('workflow.delete', { workflowId: selected.id, expectedVersion: selected.version }); setConfirmDelete(false) }}>{t.delete}</button><button type="button" onClick={() => { setConfirmDelete(false) }}>{t.close}</button></div>}</header><div className="dsh-taskboard-workflow-tabs">{document.tabs.map(tab => <article key={tab.id}><header><h3>{tab.name}</h3><button type="button" disabled={document.tabs.length <= 1} onClick={() => { setDocument(removeWorkflowTab(document, tab.id)) }}>× {t.tab}</button></header><WorkflowNodeCard node={tab.trigger} tabId={tab.id} edit={editNode} trigger /><div className="dsh-taskboard-flow-line" />{tab.steps.map(node => <WorkflowNodeCard key={node.id} node={node} tabId={tab.id} edit={editNode} />)}</article>)}</div><footer>{catalog.map(item => <span key={item.kind} data-execution={item.execution}>{item.kind} · {item.execution === 'executable' ? t.executable : t.designOnly}</span>)}</footer><section className="dsh-taskboard-capabilities"><h3>{t.installedCapabilities}</h3><small>{t.skillDiscovery}: {capabilities?.skillDiscoveryComplete === true ? t.completeWord : t.refreshing}</small><div>{capabilities?.skills.map(skill => <button type="button" key={`skill-${skill.name}`} title={skill.description} onClick={() => { addCapability('skill', skill.name) }}>＋ {t.skill} · {skill.name}</button>)}</div><div>{capabilities?.mcpTools.map(tool => <button type="button" key={`mcp-${tool.name}`} title={tool.description} onClick={() => { addCapability('mcp', tool.name) }}>＋ {t.mcp} · {tool.name}</button>)}</div></section></>}</section></div>
}

function MarkdownText({ value }: { value: string }) {
  const blocks = useMemo(() => parseMarkdown(value), [value])
  return <div className="dsh-taskboard-markdown">{blocks.map((block, index) => <MarkdownBlockView key={index} block={block} />)}</div>
}

function MarkdownBlockView({ block }: { block: MarkdownBlock }) {
  if (block.type === 'heading') {
    const children = <MarkdownInlines nodes={block.children} />
    if (block.level === 1) return <h1>{children}</h1>
    if (block.level === 2) return <h2>{children}</h2>
    if (block.level === 3) return <h3>{children}</h3>
    return <h4>{children}</h4>
  }
  if (block.type === 'paragraph') return <p><MarkdownInlines nodes={block.children} /></p>
  if (block.type === 'code') return <pre><code>{block.value}</code></pre>
  if (block.type === 'blockquote') return <blockquote>{block.children.map((child, index) => <MarkdownBlockView key={index} block={child} />)}</blockquote>
  if (block.type === 'list') {
    const items = block.items.map((item, index) => <li key={index}><MarkdownInlines nodes={item} /></li>)
    return block.ordered ? <ol>{items}</ol> : <ul>{items}</ul>
  }
  return <hr />
}

function MarkdownInlines({ nodes }: { nodes: readonly MarkdownInline[] }) {
  return nodes.map((node, index) => {
    if (node.type === 'text') return <span key={index}>{node.value}</span>
    if (node.type === 'code') return <code key={index}>{node.value}</code>
    if (node.type === 'strong') return <strong key={index}><MarkdownInlines nodes={node.children} /></strong>
    if (node.type === 'em') return <em key={index}><MarkdownInlines nodes={node.children} /></em>
    if (node.type === 'del') return <del key={index}><MarkdownInlines nodes={node.children} /></del>
    if (node.type === 'image') return <img key={index} src={node.src} alt={node.alt} />
    const external = /^https?:/i.test(node.href)
    return <a key={index} href={node.href} {...(external ? { target: '_blank', rel: 'noreferrer noopener' } : {})}><MarkdownInlines nodes={node.children} /></a>
  })
}

/** Browser plugin registration; generated Remote contribution and both slots unwind together. */
export async function apply(ctx: Context): Promise<() => Promise<void>> {
  const connection = ctx.get('connection') as unknown as TaskboardConnection
  const remote = ctx.get('remote') as unknown as TypertClientRemote
  const locale = ctx.get('locale') as unknown as TaskboardLocaleRuntime
  const unbindLocale = bindTaskboardLocale(locale)
  const unregisterCopy = locale.register(TASKBOARD_LOCALE_NS, taskboardLocales)
  const unmountRemote = await remote.$mount(taskboardRemote)
  ctx.inject(['remote.taskboard', 'uiWorkspace'], (remoteCtx) => {
    const sessions = remoteCtx.get('sessions') as unknown as ISessions
    const workspaces = remoteCtx.get('workspaces') as unknown as IWorkspaces
    const uiWorkspace = remoteCtx.get('uiWorkspace') as unknown as UiWorkspace
    const conversation = remoteCtx.get('conversation') as unknown as ConversationDraftPort
    const mountedRemote = remoteCtx.get('remote') as unknown as TypertClientRemote
    const sessionNavigator: TaskSessionNavigator = {
      list: { getSnapshot: () => sessions.list.getSnapshot() },
      refresh: () => sessions.refresh(),
      open: sessionId => { sessions.open(sessionId) },
    }
    const controller = new TaskboardClientController(
      connection,
      mountedRemote.taskboard,
      sessionId => openTaskSession(sessionNavigator, sessionId),
      async (workspaceId, draft) => {
        const sessionId = await uiWorkspace.connectWorkspace(workspaceId)
        const scoped = sessions.scope(sessionId)
        if (scoped === undefined) throw new Error(`Unable to resolve the new Session ${sessionId}`)
        conversation.input.for(scoped).setDraft(draft)
        sessions.open(sessionId)
        return sessionId
      },
    )
    // Close the page when the user navigates to another Session: the shell's
    // session navigation is store-based (not hash-based), so it never clears
    // the Taskboard hash on its own.
    const sessionList = sessions.list
    let previousSession = sessionList.getSnapshot().current
    const offSessions = sessionList.subscribe(() => {
      const next = sessionList.getSnapshot().current
      if (next !== previousSession) {
        previousSession = next
        if (controller.getSnapshot().open) controller.close()
      }
    })
    remoteCtx.effect(() => () => { controller.dispose(); offSessions() }, 'taskboard client controller')
    const slots = remoteCtx.get('slots') as ISlots
    const Nav = (props: PropsRuntime<'sidebar.footer.action'>) => <TaskboardNavButton {...props} controller={controller} />
    const Page = (props: PropsRuntime<'shell.overlay'>) => <TaskboardPage {...props} controller={controller} workspaces={workspaces} />
    slots.inject('sidebar.footer.action', () => slots.register({ name: 'sidebar.footer.action', id: 'taskboard.navigation' }, Nav))
    slots.inject('shell.overlay', () => slots.register({ name: 'shell.overlay', id: 'taskboard.page' }, Page))
  })
  return async () => {
    unbindLocale()
    unregisterCopy()
    await unmountRemote()
  }
}