AgentPanelRoot.vue

<script setup lang="ts">
import './agentPanel.css'

import { useClipboard } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import {
  computed,
  nextTick,
  onBeforeUnmount,
  provide,
  readonly,
  ref,
  watch
} from 'vue'
import { useI18n } from 'vue-i18n'

import { useCurrentUser } from '@/composables/auth/useCurrentUser'
import { fitGraphToView } from '@/composables/canvas/fitGraphToView'
import { useFocusNode } from '@/composables/canvas/useFocusNode'
import { useTelemetry } from '@/platform/telemetry'
import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
import type { ComfyWorkflow } from '@/platform/workflow/management/stores/comfyWorkflow'
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
import { validateComfyWorkflow } from '@/platform/workflow/validation/schemas/workflowSchema'
import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
import { useAppMode } from '@/composables/useAppMode'
import { MIME_ASSET_INFO } from '@/platform/assets/schemas/mediaAssetSchema'
import { assetService } from '@/platform/assets/services/assetService'
import {
  fetchDroppedAsset,
  getDroppedAsset,
  hasImageType,
  hasVideoType
} from '@/utils/eventUtils'
import { appendWorkflowJsonExt } from '@/utils/formatUtil'
import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
// eslint-disable-next-line import-x/no-restricted-paths
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { api } from '@/scripts/api'
import { app } from '@/scripts/app'
import { useAgentNodeSelectionStore } from '@/stores/agentNodeSelectionStore'
import { useExecutionErrorStore } from '@/stores/executionErrorStore'
import { useWorkflowTabActivityStore } from '@/stores/workflowTabActivityStore'
import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
import { isLGraphNode } from '@/utils/litegraphUtil'
import { useToastStore } from '@/platform/updates/common/toastStore'

import AgentPanel from './components/agent/AgentPanel.vue'
import OnboardingCoach from './components/agent/OnboardingCoach.vue'
import {
  MAX_ATTACHMENT_BYTES,
  useAttachment
} from './composables/agent/useAttachment'
import type { ActiveTab } from './types/activeTab'
import type { SelectedNode } from './composables/agent/useCanvasSelection'
import {
  selectedNodeKey,
  useCanvasSelection
} from './composables/agent/useCanvasSelection'
import type { CoachStep } from './composables/agent/useOnboarding'
import type { ComposerAttachment } from './composables/agent/useComposer'
import type {
  AgentActiveTabData,
  AgentDraftSnapshot,
  AgentThreadSummary
} from './schemas/agentApiSchema'
import type { ChatSession } from './stores/agent/agentChatHistoryStore'
import type { ConversationEntry } from './stores/agent/agentConversationStore'
import type { WorkflowTurnContext } from './composables/agent/useAgentSession'
import { useAgentSession } from './composables/agent/useAgentSession'
import { useAgentDraftStore } from './stores/agent/agentDraftStore'
import { useAgentWorkflowTabBindingStore } from './stores/agent/agentWorkflowTabBindingStore'
import {
  AgentApiError,
  createAgentRestClient
} from './services/agent/agentRestClient'
import type {
  DraftUpload,
  OpenTabsSnapshot
} from './services/agent/agentRestClient'
import { createAgentEventSource } from './services/agent/agentEventSource'
import { useAgentChatHistoryStore } from './stores/agent/agentChatHistoryStore'
import { useAgentPanelStore } from './stores/agent/agentPanelStore'

const { t } = useI18n()
const toast = useToastStore()
const sidebarTabStore = useSidebarTabStore()
const { isBuilderMode } = useAppMode()

const { userDisplayName } = useCurrentUser()
const userName = computed(
  () => userDisplayName.value?.trim().split(/\s+/)[0] || undefined
)

const rest = createAgentRestClient()

const events = createAgentEventSource(api)

const workflowStore = useWorkflowStore()
const workflowService = useWorkflowService()
const bindingStore = useAgentWorkflowTabBindingStore()
const draftStore = useAgentDraftStore()
const agentPanelStore = useAgentPanelStore()
const { dismissedSelectionSignature } = storeToRefs(agentPanelStore)
const agentNodeSelectionStore = useAgentNodeSelectionStore()
const tabActivity = useWorkflowTabActivityStore()
const CREATING_TAB_MIN_DURATION_MS = 500

const canvasStore = useCanvasStore()
const { focusNodeInstance } = useFocusNode()

function toSelectedNode(node: LGraphNode): SelectedNode {
  return {
    id: String(node.id),
    locatorId: workflowStore.nodeToNodeLocatorId(node),
    title: node.title || node.type
  }
}

const selectedNodes = computed<SelectedNode[]>(() =>
  canvasStore.selectedItems.filter(isLGraphNode).map(toSelectedNode)
)
const {
  staged: selectionTags,
  consume: consumeSelection,
  remove: removeSelectionTag,
  add: addSelectionTag,
  replace: replaceSelectionTags
} = useCanvasSelection({
  selection: selectedNodes,
  isLive: () => agentPanelStore.isOpen,
  isTracking: () => agentNodeSelectionStore.isActive,
  isPaused: () => agentNodeSelectionStore.isLoadingWorkflow,
  scope: () => workflowStore.activeWorkflow?.path ?? null,
  dismissedSignature: dismissedSelectionSignature
})

function viewedGraphNodes() {
  return app.canvas?.graph?.nodes ?? app.graph?.nodes ?? []
}

function mentionableNodes(): SelectedNode[] {
  return viewedGraphNodes().map(toSelectedNode)
}

watch(
  selectionTags,
  (tags) => {
    if (!agentPanelStore.isOpen || agentNodeSelectionStore.isLoadingWorkflow)
      return
    agentNodeSelectionStore.saveNodeIds(
      workflowStore.activeWorkflow?.path,
      tags.map(selectedNodeKey)
    )
  },
  { deep: true }
)

watch(
  () => agentPanelStore.isOpen,
  (open) => {
    if (!open) return
    const locatorIds = new Set(
      agentNodeSelectionStore.nodeIds(workflowStore.activeWorkflow?.path)
    )
    replaceSelectionTags(
      [...locatorIds]
        .map((locatorId) => getNodeByLocatorId(app.rootGraph, locatorId))
        .filter((node): node is LGraphNode => node !== null)
        .map(toSelectedNode)
    )
  },
  { immediate: true }
)

function mentionableAssets() {
  return assetService.getInputAssetsIncludingPublic()
}

let cloudIdsByName = new Map<string, string>()

async function refreshCloudWorkflowIds(): Promise<void> {
  try {
    const workflows = await rest.listCloudWorkflows()
    const nameCounts = new Map<string, number>()
    for (const { name } of workflows) {
      if (name !== undefined)
        nameCounts.set(name, (nameCounts.get(name) ?? 0) + 1)
    }
    cloudIdsByName = new Map(
      workflows.flatMap(({ id, name }) =>
        name !== undefined && nameCounts.get(name) === 1
          ? [[name, id] as const]
          : []
      )
    )
  } catch (error) {
    console.warn('[agent] could not refresh cloud workflow ids', error)
  }
}

function openSavedTabsNamed(filename: string): ComfyWorkflow[] {
  return workflowStore.openWorkflows.filter(
    (tab) => !tab.isTemporary && tab.filename === filename
  )
}

function cloudIdFor(tab: ComfyWorkflow): string | undefined {
  const saved =
    !tab.isTemporary && openSavedTabsNamed(tab.filename).length === 1
      ? cloudIdsByName.get(tab.filename)
      : undefined
  return saved ?? bindingStore.workflowIdFor(tab.path)
}

let lastKnownGraph: { serialized: string; workflowId: string } | null = null

function reclaimMovedBinding(activePath: string): string | undefined {
  if (lastKnownGraph === null) return undefined
  const graph = app.graph?.serialize()
  if (
    !graph?.nodes?.length ||
    JSON.stringify(graph) !== lastKnownGraph.serialized
  )
    return undefined
  const { workflowId } = lastKnownGraph
  bindingStore.bind(workflowId, activePath)
  lastKnownGraph = null
  return workflowId
}

const workflowDetached = ref(false)

function activeWorkflowTurnContext(): WorkflowTurnContext | undefined {
  if (workflowDetached.value) return undefined
  const active = workflowStore.activeWorkflow
  if (!active) return undefined
  const bound = cloudIdFor(active) ?? reclaimMovedBinding(active.path)
  return bound === undefined ? undefined : { id: bound, tabPath: active.path }
}

const activeTab = computed<ActiveTab | null>(() => {
  const active = workflowStore.activeWorkflow
  return active
    ? {
        path: active.path,
        name: active.filename,
        isPersisted: active.isPersisted,
        modified: active.isModified
      }
    : null
})

const workflowTabs = computed<ActiveTab[]>(() =>
  workflowStore.openWorkflows.map((tab) => ({
    path: tab.path,
    name: tab.filename,
    isPersisted: tab.isPersisted,
    modified: tab.isModified
  }))
)

async function onSelectTab(path: string): Promise<void> {
  workflowDetached.value = false
  const tab = workflowStore.getWorkflowByPath(path)
  if (tab) await workflowService.openWorkflow(tab)
}

function onClearWorkflow(): void {
  workflowDetached.value = true
}

let lastSentGraph: string | null = null
let snapshotTabPath: string | null = null

function takeWorkflowSnapshot(): DraftUpload | undefined {
  if (workflowDetached.value) return undefined
  const graph = app.graph?.serialize()
  if (!graph) return undefined
  const serialized = JSON.stringify(graph)
  const active = workflowStore.activeWorkflow
  const activePath = active?.path ?? null
  const hasBoundWorkflow = active != null && cloudIdFor(active) !== undefined
  if (
    !graph.nodes?.length &&
    !hasBoundWorkflow &&
    (lastSentGraph === null || activePath !== snapshotTabPath)
  )
    return undefined
  lastSentGraph = serialized
  snapshotTabPath = activePath
  return { content: graph, version: draftStore.version }
}

function resetSnapshotGuard(): void {
  lastSentGraph = null
  snapshotTabPath = null
  lastKnownGraph = null
}

function openTabsSnapshot(): OpenTabsSnapshot | undefined {
  const openTabs = workflowStore.openWorkflows.flatMap((tab) => {
    const workflowId = cloudIdFor(tab)
    return workflowId === undefined
      ? []
      : [{ workflow_id: workflowId, name: tab.filename }]
  })
  if (openTabs.length === 0) return undefined
  const active = workflowStore.activeWorkflow
  return {
    open_tabs: openTabs,
    current_tab:
      active && !workflowDetached.value ? cloudIdFor(active) : undefined
  }
}

function onWorkflowAdopted(
  workflowId: string,
  sent: WorkflowTurnContext | undefined,
  uploaded: boolean
): void {
  if (uploaded && lastSentGraph !== null)
    lastKnownGraph = { serialized: lastSentGraph, workflowId }
  if (sent !== undefined && sent.id === workflowId) {
    bindingStore.bind(workflowId, sent.tabPath)
    tabActivity.setEditing(sent.tabPath)
    return
  }
  if (uploaded && snapshotTabPath !== null) {
    bindingStore.bind(workflowId, snapshotTabPath)
    tabActivity.setEditing(snapshotTabPath)
  }
}

const {
  sendMessage,
  stopTurn,
  isSending,
  newChat,
  start,
  stop,
  entries,
  editableTurnId,
  isStreaming,
  status,
  notices,
  threadId,
  listThreads,
  loadThread
} = useAgentSession({
  rest,
  events,
  workflow: {
    current: activeWorkflowTurnContext,
    adopted: onWorkflowAdopted,
    prepare: refreshCloudWorkflowIds,
    snapshot: takeWorkflowSnapshot,
    uploadSkipped: resetSnapshotGuard,
    tabs: openTabsSnapshot,
    activeTab: enqueueActiveTab
  }
})

let autoFitPending = false

function fitDraftIntoView(): void {
  const canvas = canvasStore.canvas
  if (canvas) fitGraphToView(canvas)
}

// The agent's drafts often stack new nodes at one spot, so an added node
// triggers the layered arrange; running it after loadGraphData keeps the
// undo capture outside the loader's suppression window.
function arrangeAgentNodes(): void {
  app.graph?.arrange()
  workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
}

watch(isStreaming, (streaming) => {
  if (streaming || !autoFitPending) return
  autoFitPending = false
  fitDraftIntoView()
})

// The resumed turn's own workflow outlives a panel remount (draftStore
// binds it at ack; only newChat/loadThread reset it), while the active tab
// may have changed since - prefer the bound tab over active-tab derivation.
function resumedTurnTabPath(): string | null {
  if (workflowDetached.value) return null
  const bound = draftStore.workflowId
  if (bound === null) return activeWorkflowTurnContext()?.tabPath ?? null
  const boundPath = bindingStore.tabPathFor(bound)
  if (boundPath !== undefined) return boundPath
  const context = activeWorkflowTurnContext()
  return context?.id === bound ? context.tabPath : null
}

// Adoption (onWorkflowAdopted) and tab activation (onAgentActiveTab) are the
// primary spinner setters; the non-idle branch only re-arms it after the
// stash/resume flip of a panel remount, where those setters never run.
watch(status, (value) => {
  if (value === 'idle') {
    const completedPath = tabActivity.editingTabPath
    tabActivity.setEditing(null)
    if (completedPath !== null) tabActivity.markModified(completedPath)
  } else if (tabActivity.editingTabPath === null)
    tabActivity.setEditing(resumedTurnTabPath())
})

const executionErrorStore = useExecutionErrorStore()

function surfaceAgentError(
  type: 'agent_api_failed' | 'agent_draft_apply_failed',
  details: string
): void {
  executionErrorStore.recordPromptError({
    type,
    message: t(`errorCatalog.promptErrors.${type}.desc`),
    details
  })
  executionErrorStore.showErrorOverlay()
}

let noticesSeen = 0
watch(
  () => notices.value.length,
  (length) => {
    for (const notice of notices.value.slice(noticesSeen))
      surfaceAgentError('agent_api_failed', notice.text)
    noticesSeen = length
  }
)

let draftRejectionNotified = false

function surfaceDraftApplyFailure(details: string): void {
  console.warn(details)
  if (draftRejectionNotified) return
  draftRejectionNotified = true
  surfaceAgentError('agent_draft_apply_failed', details)
}

let lastApplied: { workflowId: string; version: number } | null = null
let applying = false
let reapplyQueued = false

function boundTabFor(workflowId: string): ComfyWorkflow | null {
  const path = bindingStore.tabPathFor(workflowId)
  const bound =
    path === undefined ? null : workflowStore.getWorkflowByPath(path)
  if (bound) return bound
  for (const [name, id] of cloudIdsByName) {
    if (id !== workflowId) continue
    const matches = openSavedTabsNamed(name)
    return matches.length === 1 ? matches[0] : null
  }
  return null
}

function unusedFilenameFor(tab: ComfyWorkflow): string {
  const takenByOther = (filename: string) => {
    const path =
      tab.directory +
      '/' +
      appendWorkflowJsonExt(filename, tab.initialMode === 'app')
    return path !== tab.path && workflowStore.getWorkflowByPath(path) !== null
  }
  if (!takenByOther(tab.filename)) return tab.filename
  let counter = 2
  while (takenByOther(`${tab.filename} (${counter})`)) counter++
  return `${tab.filename} (${counter})`
}

async function autosaveAppliedDraft(
  workflowId: string,
  tab: ComfyWorkflow
): Promise<void> {
  const preSavePath = tab.path
  const wasEditing = tabActivity.editingTabPath === preSavePath
  try {
    const saved = tab.isTemporary
      ? await workflowService.saveWorkflowAs(tab, {
          filename: unusedFilenameFor(tab)
        })
      : await workflowService.saveWorkflow(tab)
    if (!saved) console.error(`Agent draft autosave failed for ${tab.path}`)
  } catch (error) {
    console.error(`Agent draft autosave failed for ${tab.path}:`, error)
  } finally {
    bindingStore.bind(workflowId, tab.path)
    const editing = tabActivity.editingTabPath
    if (
      wasEditing &&
      (editing === preSavePath || editing === null) &&
      status.value !== 'idle'
    )
      tabActivity.setEditing(tab.path)
  }
}

let activeTabGeneration = 0
let activeTabChain: Promise<void> = Promise.resolve()
const lastRenderedVersions = new Map<string, number>()

function enqueueActiveTab(data: AgentActiveTabData): void {
  const generation = ++activeTabGeneration
  activeTabChain = activeTabChain.then(() => onAgentActiveTab(data, generation))
}

function agentTabFilename(name: string | undefined): string | undefined {
  const cleaned = [
    ...(name ?? '')
      .replace(/[/\\\p{Cc}]/gu, '-')
      .replace(/\.json$/i, '')
      .trim()
      .replace(/^\.+/, '')
  ]
    .slice(0, 80)
    .join('')
    .replace(/^[\s.]+/u, '')
    .trim()
  return cleaned.length === 0 ? undefined : `${cleaned}.json`
}

async function fetchDraftSnapshot(
  workflowId: string
): Promise<AgentDraftSnapshot | null> {
  try {
    return await rest.getDraft(workflowId)
  } catch (error) {
    if (error instanceof AgentApiError && error.status === 404) return null
    throw error
  }
}

function recordRenderedVersion(nextWorkflowId: string): void {
  const leaving = draftStore.workflowId
  if (leaving === null || leaving === nextWorkflowId) return
  if (lastApplied?.workflowId === leaving)
    lastRenderedVersions.set(leaving, lastApplied.version)
  else lastRenderedVersions.delete(leaving)
}

async function adoptDraftBase(
  workflowId: string,
  snapshot: AgentDraftSnapshot,
  armVersion: number = snapshot.version
): Promise<void> {
  draftStore.bind(workflowId)
  await nextTick()
  if (
    !(
      lastApplied?.workflowId === workflowId && lastApplied.version > armVersion
    )
  )
    lastApplied = { workflowId, version: armVersion }
  draftStore.adoptSnapshot(snapshot)
}

async function onAgentActiveTab(
  data: AgentActiveTabData,
  generation: number
): Promise<void> {
  const stale = () => generation !== activeTabGeneration
  if (stale()) return
  try {
    recordRenderedVersion(data.workflow_id)
    const bound = boundTabFor(data.workflow_id)
    if (bound) {
      const alreadyCurrent =
        draftStore.workflowId === data.workflow_id &&
        draftStore.version !== null
      await workflowService.openWorkflow(bound)
      if (stale()) return
      // boundTabFor can resolve by cloud name, which leaves no binding behind
      // for everything downstream that only reads tabPathFor.
      bindingStore.bind(data.workflow_id, bound.path)
      if (status.value !== 'idle') tabActivity.setEditing(bound.path)
      draftStore.bind(data.workflow_id)
      const snapshot = await fetchDraftSnapshot(data.workflow_id)
      if (stale()) return
      if (
        snapshot !== null &&
        !(alreadyCurrent && (draftStore.version ?? -1) >= snapshot.version)
      )
        await adoptDraftBase(
          data.workflow_id,
          snapshot,
          lastRenderedVersions.get(data.workflow_id) ?? -1
        )
      useTelemetry()?.trackAgentWorkflowApplied({
        workflow_id: data.workflow_id,
        target: 'active_tab_switch'
      })
      return
    }
    const creatingStartedAt = Date.now()
    tabActivity.setCreating(true)
    const snapshot = await fetchDraftSnapshot(data.workflow_id)
    if (stale()) return
    let validationError = ''
    const workflow =
      snapshot === null
        ? null
        : await validateComfyWorkflow(snapshot.content, (error) => {
            validationError = error
          })
    if (stale()) return
    if (snapshot !== null && !workflow) {
      surfaceDraftApplyFailure(validationError)
      draftStore.bind(data.workflow_id)
      return
    }
    const remainingCreatingTime =
      CREATING_TAB_MIN_DURATION_MS - (Date.now() - creatingStartedAt)
    if (remainingCreatingTime > 0)
      await new Promise((resolve) => setTimeout(resolve, remainingCreatingTime))
    if (stale()) return
    const tab = workflowStore.createTemporary(
      agentTabFilename(data.name),
      workflow ?? undefined
    )
    tabActivity.setCreating(false)
    await workflowService.openWorkflow(tab)
    if (stale()) return
    if (status.value !== 'idle') tabActivity.setEditing(tab.path)
    await autosaveAppliedDraft(data.workflow_id, tab)
    if (stale()) return
    if (snapshot === null) draftStore.bind(data.workflow_id)
    else await adoptDraftBase(data.workflow_id, snapshot)
    useTelemetry()?.trackAgentWorkflowApplied({
      workflow_id: data.workflow_id,
      target: 'active_tab_open'
    })
  } catch (error) {
    if (stale()) return
    draftStore.bind(data.workflow_id)
    surfaceAgentError(
      'agent_api_failed',
      error instanceof Error ? error.message : String(error)
    )
  } finally {
    tabActivity.setCreating(false)
  }
}

async function loadDraft(
  workflowId: string,
  version: number,
  content: Record<string, unknown>,
  tab: ComfyWorkflow | null
): Promise<void> {
  const workflow = await validateComfyWorkflow(content, (error) => {
    surfaceDraftApplyFailure(error)
  })
  if (!workflow) return
  const openBefore = new Set(workflowStore.openWorkflows.map((w) => w.path))
  const knownIds =
    tab === null
      ? new Set<string>()
      : new Set((app.graph?.nodes ?? []).map((node) => String(node.id)))
  try {
    await app.loadGraphData(workflow, true, true, tab)
    draftRejectionNotified = false
    lastApplied = { workflowId, version }
    if (workflow.nodes.some((node) => !knownIds.has(String(node.id))))
      arrangeAgentNodes()
    if (isStreaming.value) autoFitPending = true
    else fitDraftIntoView()
    const rendered = app.graph?.serialize()
    if (rendered)
      lastKnownGraph = { serialized: JSON.stringify(rendered), workflowId }
    useTelemetry()?.trackAgentWorkflowApplied({
      workflow_id: workflowId,
      target: tab === null ? 'new_tab' : 'existing_tab'
    })
    if (tab === null) {
      const opened = workflowStore.openWorkflows.find(
        (w) => !openBefore.has(w.path)
      )
      if (opened) {
        bindingStore.bind(workflowId, opened.path)
        await autosaveAppliedDraft(workflowId, opened)
      }
      return
    }
    await autosaveAppliedDraft(workflowId, tab)
  } catch (error) {
    surfaceDraftApplyFailure(
      error instanceof Error ? error.message : String(error)
    )
  }
}

async function applyDraft(): Promise<void> {
  if (applying) {
    reapplyQueued = true
    return
  }
  applying = true
  try {
    const workflowId = draftStore.workflowId
    const version = draftStore.version
    const content = draftStore.content
    if (workflowId === null || version === null || content === null) return
    if (
      lastApplied !== null &&
      lastApplied.workflowId === workflowId &&
      lastApplied.version >= version
    )
      return
    const nodes = (content as { nodes?: unknown }).nodes
    if (!Array.isArray(nodes) || nodes.length === 0) return
    const boundTab = boundTabFor(workflowId)
    if (boundTab) {
      if (workflowStore.activeWorkflow?.path !== boundTab.path) {
        tabActivity.markModified(boundTab.path)
        return
      }
      await loadDraft(workflowId, version, content, boundTab)
      return
    }
    await loadDraft(workflowId, version, content, null)
  } finally {
    applying = false
    if (reapplyQueued) {
      reapplyQueued = false
      void applyDraft()
    }
  }
}

watch(
  () => draftStore.version,
  (version) => {
    if (version === null || draftStore.content === null) return
    void applyDraft()
  }
)
watch(
  () => workflowStore.activeWorkflow?.path,
  () => void applyDraft()
)
watch(
  () => draftStore.workflowId,
  () => {
    lastApplied = null
  }
)

start()
void refreshCloudWorkflowIds()
onBeforeUnmount(() => {
  exitNodeSelectionMode()
  stop()
  tabActivity.setEditing(null)
  tabActivity.setCreating(false)
})

const history = useAgentChatHistoryStore()

const { copy } = useClipboard({ legacy: true })

function onFeedback(turnId: string, vote: 'up' | 'down' | null): void {
  useTelemetry()?.trackAgentMessageFeedback({
    message_id: turnId,
    vote,
    workflow_id: draftStore.workflowId
  })
}

function toChatSession(thread: AgentThreadSummary): ChatSession {
  const stamp = thread.last_message_at ?? thread.updated_at ?? thread.created_at
  const updatedAt = stamp ? Date.parse(stamp) : Date.now()
  return {
    id: thread.id,
    title: thread.title || thread.preview || t('agent.untitledChat'),
    updatedAt: Number.isNaN(updatedAt) ? Date.now() : updatedAt
  }
}

async function refreshHistory(): Promise<void> {
  try {
    history.replaceAll((await listThreads()).map(toChatSession))
  } catch (error) {
    surfaceAgentError(
      'agent_api_failed',
      error instanceof Error ? error.message : String(error)
    )
  }
}

watch(threadId, (id) => history.setActive(id), { immediate: true })

void refreshHistory()

async function onSelectHistory(id: string): Promise<void> {
  exitNodeSelectionMode()
  resetSnapshotGuard()
  workflowDetached.value = false
  await loadThread(id)
  void refreshHistory()
}

function buildTranscriptMarkdown(entries: ConversationEntry[]): string {
  return entries
    .map((entry) => {
      if (entry.role === 'user') return `**You:** ${entry.text}`
      const text = entry.parts
        .filter((part) => part.type === 'text')
        .map((part) => part.text)
        .join('')
      return `**Agent:** ${text}`
    })
    .join('\n\n')
}

function onCopyMarkdown(id: string): void {
  if (id === history.activeId) void copy(buildTranscriptMarkdown(entries.value))
  else toast.add({ severity: 'info', summary: t('agent.copyUnavailable') })
}

const coachStep: CoachStep = {
  target: '#agent-panel-root',
  title: t('agent.coachTitle'),
  body: t('agent.coachBody')
}

function onSend(text: string, attachments: ComposerAttachment[]): void {
  exitNodeSelectionMode()
  void applyDraft()
  const nodeTags = consumeSelection()
  useTelemetry()?.trackAgentMessageSent({
    attachment_count: attachments.length,
    node_tag_count: nodeTags.length
  })
  void sendMessage(text, attachments, nodeTags).then((ok) => {
    if (!ok) resetSnapshotGuard()
  })
}

function onStop(): void {
  void stopTurn()
}

function onRenameChat(title: string): void {
  if (threadId.value !== null) history.rename(threadId.value, title)
}

function onRenameHistory(id: string, title: string): void {
  history.rename(id, title)
}

function onDeleteHistory(id: string): void {
  history.remove(id)
  // Deleting the open chat also ends it; a dead thread must not stay editable.
  if (id === threadId.value) onNewChat()
}

function onNewChat(): void {
  exitNodeSelectionMode()
  resetSnapshotGuard()
  workflowDetached.value = true
  newChat()
}

const panelRef = ref<InstanceType<typeof AgentPanel>>()
const fileInput = ref<HTMLInputElement>()
const assetDragActive = ref(false)
let assetDragDepth = 0
provide('agentAssetDragActive', readonly(assetDragActive))
let selectingNodes = false
let nodeSelectionCanvas: LGraphCanvas | undefined
let selectedGraphNodes = new Map<string, LGraphNode>()
let restoreAllowDragNodes: boolean | undefined
let restoreSelectOnly: boolean | undefined

watch(
  () => canvasStore.selectedItems,
  (items) => {
    const nodes = items.filter(isLGraphNode)
    if (agentNodeSelectionStore.restoredNodeIds !== null) {
      selectedGraphNodes = new Map(
        nodes.map(
          (node) => [workflowStore.nodeToNodeLocatorId(node), node] as const
        )
      )
      replaceSelectionTags(nodes.map(toSelectedNode))
      agentNodeSelectionStore.finishWorkflowLoad()
      return
    }
    if (!selectingNodes || agentNodeSelectionStore.isLoadingWorkflow) return
    const currentNodes = new Map<string, LGraphNode>(
      nodes.map(
        (node) => [workflowStore.nodeToNodeLocatorId(node), node] as const
      )
    )
    selectedGraphNodes = currentNodes
  },
  { immediate: true }
)

function exitNodeSelectionMode(): void {
  const canvas = nodeSelectionCanvas
  if (canvas) {
    canvas.multi_select = false
    canvas.allow_dragnodes = restoreAllowDragNodes ?? true
    canvas.selectOnly = restoreSelectOnly ?? false
  }
  nodeSelectionCanvas = undefined
  restoreAllowDragNodes = undefined
  restoreSelectOnly = undefined
  selectedGraphNodes.clear()
  selectingNodes = false
  if (agentNodeSelectionStore.isActive) agentNodeSelectionStore.exit()
  if (canvas) {
    canvas.deselectAll()
    canvasStore.updateSelectedItems()
  }
}

watch(
  () => agentNodeSelectionStore.isActive,
  (active) => {
    if (!active) exitNodeSelectionMode()
  }
)

watch(
  () => agentNodeSelectionStore.restoredNodeIds,
  (nodeIds) => {
    if (nodeIds === null) return
    selectedGraphNodes = new Map(
      [...(app.canvas?.selectedItems ?? [])]
        .filter(isLGraphNode)
        .map((node) => [workflowStore.nodeToNodeLocatorId(node), node] as const)
    )
  }
)

watch(
  [() => workflowStore.activeWorkflow?.path, () => canvasStore.currentGraph],
  () => {
    if (!agentNodeSelectionStore.isLoadingWorkflow) exitNodeSelectionMode()
  }
)

function onSelectNodes(): void {
  if (selectingNodes) return
  const canvas = app.canvas
  if (!canvas) return

  const merged = new Map<string, LGraphNode>(
    [...canvas.selectedItems]
      .filter(isLGraphNode)
      .map((node) => [workflowStore.nodeToNodeLocatorId(node), node] as const)
  )
  for (const tag of selectionTags.value) {
    const key = selectedNodeKey(tag)
    const node = getNodeByLocatorId(app.rootGraph, key)
    if (node) merged.set(key, node)
  }
  selectedGraphNodes = merged
  if (merged.size) {
    canvas.selectItems([...merged.values()])
    canvasStore.updateSelectedItems()
  }
  restoreAllowDragNodes = canvas.allow_dragnodes
  restoreSelectOnly = canvas.selectOnly
  canvas.allow_dragnodes = false
  canvas.selectOnly = true
  canvas.multi_select = true
  nodeSelectionCanvas = canvas
  selectingNodes = true
  agentNodeSelectionStore.enter()
  void nextTick(() => {
    if (selectingNodes) canvas.canvas.focus()
  })
}

const attachment = useAttachment({
  upload: async (file) => ({
    ref: (await rest.uploadImage(file, file.name)).name
  }),
  maxBytes: (file) => {
    const serverLimit = api.getServerFeature(
      'max_upload_size',
      MAX_ATTACHMENT_BYTES
    )
    return hasVideoType(file)
      ? serverLimit
      : Math.min(MAX_ATTACHMENT_BYTES, serverLimit)
  },
  // A rejected file is the user's problem to fix, not an agent failure, so it
  // must not raise the server-error overlay.
  onError: (message) =>
    toast.add({ severity: 'warn', detail: message, life: 5000 }),
  stage: (staged) => panelRef.value?.addAttachment(staged),
  update: (id, patch) => panelRef.value?.updateAttachment(id, patch),
  remove: (id) => panelRef.value?.removeAttachment(id)
})

function onAttach(): void {
  exitNodeSelectionMode()
  useTelemetry()?.trackAgentAttachButtonClicked()
  fileInput.value?.click()
}

function onOpenAssets(): void {
  exitNodeSelectionMode()
  sidebarTabStore.activeSidebarTabId = 'assets'
}

function onMentionPick(node: SelectedNode): void {
  const stagedBefore = selectionTags.value.length
  addSelectionTag(node)
  const canvas = app.canvas
  const graphNode = viewedGraphNodes().find(
    (candidate) =>
      workflowStore.nodeToNodeLocatorId(candidate) === selectedNodeKey(node)
  )
  if (canvas && graphNode) {
    canvas.selectItems([graphNode], true)
    canvasStore.updateSelectedItems()
  }
  if (selectionTags.value.length > stagedBefore)
    useTelemetry()?.trackAgentNodeTagged({ source: 'mention_picker' })
}

function onRemoveSelectionTag(id: string): void {
  const canvas = app.canvas
  const node = getNodeByLocatorId(app.rootGraph, id)
  if (canvas && node && canvas.selectedItems.has(node)) {
    canvas.deselect(node)
    canvasStore.updateSelectedItems()
  }
  removeSelectionTag(id)
}

function onFocusSelectionTag(id: string): void {
  const node = getNodeByLocatorId(app.rootGraph, id)
  if (node) void focusNodeInstance(node)
}

function onClosePanel(): void {
  exitNodeSelectionMode()
  useTelemetry()?.trackAgentCloseButtonClicked()
  agentPanelStore.close('close_button')
}

async function onFilesPicked(event: Event): Promise<void> {
  const input = event.target as HTMLInputElement
  const files = input.files
  if (files && files.length > 0) await attachment.addFiles(Array.from(files))
  input.value = ''
}

function isAssetDrag(event: DragEvent): boolean {
  // Bare text/uri-list matches any dragged hyperlink; only claim real asset
  // cards, which always carry the asset-info payload.
  return (event.dataTransfer?.types ?? []).includes(MIME_ASSET_INFO)
}

function isAttachableDrag(event: DragEvent): boolean {
  return (
    (event.dataTransfer?.types ?? []).includes('Files') || isAssetDrag(event)
  )
}

function clearAssetDrag(): void {
  assetDragDepth = 0
  assetDragActive.value = false
}

function onPanelDragEnter(event: DragEvent): void {
  if (!isAttachableDrag(event)) return
  assetDragDepth += 1
  assetDragActive.value = true
}

function onPanelDragLeave(): void {
  if (assetDragDepth === 0) return
  assetDragDepth -= 1
  if (assetDragDepth === 0) assetDragActive.value = false
}

async function attachDroppedAsset(event: DragEvent): Promise<void> {
  const asset = event.dataTransfer && getDroppedAsset(event.dataTransfer)
  if (!asset) {
    toast.add({
      severity: 'warn',
      detail: t('agent.assetNotAttachable'),
      life: 5000
    })
    return
  }

  if (asset.ref && (asset.kind === 'image' || asset.kind === 'video')) {
    panelRef.value?.addAttachment({
      id: `asset:${asset.ref}`,
      name: asset.name,
      ref: asset.ref,
      previewUrl: asset.previewUrl
    })
    return
  }

  const file = await attachment.addDeferredFile(asset.name, async () => {
    const file = await fetchDroppedAsset(asset)
    return file && (hasImageType(file) || hasVideoType(file)) ? file : undefined
  })
  if (!file)
    toast.add({
      severity: 'warn',
      detail: t('agent.assetNotAttachable'),
      life: 5000
    })
}

function onPanelDragOver(event: DragEvent): void {
  if (isAttachableDrag(event)) event.preventDefault()
}

function onPanelDrop(event: DragEvent): void {
  clearAssetDrag()
  // A dropped asset card carries a URI, not a File, so the claim must happen
  // before the async fetch resolves it into one.
  if ((event.dataTransfer?.files.length ?? 0) === 0 && isAssetDrag(event)) {
    event.preventDefault()
    void attachDroppedAsset(event)
    return
  }
  // Anything the composer cannot attach still belongs to the graph loader, which
  // only runs while the drop is unclaimed, so claim the attachable files alone.
  const files = Array.from(event.dataTransfer?.files ?? []).filter(
    (file) => hasImageType(file) || hasVideoType(file)
  )
  if (files.length === 0) return
  event.preventDefault()
  void attachment.addFiles(files)
}
</script>

<template>
  <div
    id="agent-panel-root"
    class="size-full"
    @dragenter="onPanelDragEnter"
    @dragleave="onPanelDragLeave"
    @dragover="onPanelDragOver"
    @drop="onPanelDrop"
  >
    <input
      ref="fileInput"
      type="file"
      accept="image/*,video/*"
      multiple
      class="hidden"
      data-testid="agent-file-input"
      @change="onFilesPicked"
    />
    <AgentPanel
      ref="panelRef"
      :entries
      :editable-turn-id="editableTurnId"
      :user-name="userName"
      :streaming="isStreaming"
      :submitting="isSending || status === 'thinking'"
      :can-attach="true"
      :can-open-assets="!isBuilderMode"
      :is-maximized="agentPanelStore.isMaximized"
      :history-groups="history.grouped"
      :session-id="threadId"
      :custom-title="history.titleFor(threadId)"
      :selection-tags="selectionTags"
      :active-tab="activeTab"
      :workflow-tabs="workflowTabs"
      :workflow-detached="workflowDetached"
      :get-mention-nodes="mentionableNodes"
      :get-mention-assets="mentionableAssets"
      @select-tab="onSelectTab"
      @clear-workflow="onClearWorkflow"
      @send="onSend"
      @stop="onStop"
      @attach="onAttach"
      @open-assets="onOpenAssets"
      @select-nodes="onSelectNodes"
      @remove-tag="onRemoveSelectionTag"
      @focus-tag="onFocusSelectionTag"
      @mention-pick="onMentionPick"
      @feedback="onFeedback"
      @new-chat="onNewChat"
      @toggle-size="agentPanelStore.toggleMaximize()"
      @close="onClosePanel"
      @open-history="refreshHistory()"
      @select-history="onSelectHistory"
      @delete-history="onDeleteHistory"
      @rename-history="onRenameHistory"
      @rename-chat="onRenameChat"
      @copy-history="onCopyMarkdown"
    />
    <OnboardingCoach
      :step="coachStep"
      storage-key="Comfy.AgentPanel.onboarded"
    />
  </div>
</template>