import { useEffect, useMemo, useRef, useState, type ReactElement, type ReactNode } from 'react'
import { useBridge, useData, usePanelState, usePublish, type PanelRef } from '@jaspers-ai/sdk'
import { agentIdFrom, emptySearch, ORIGINS, type Agent } from './agents'
import { companiesUsed, type AgentMessage, type Chat, type Message, type Passage, type Search } from './chat'
import type { CompanyStatus } from './sec'
import { CompanyChip, useCompanyCard } from './Company'
import { AddButton, CopyButton, EditButton, IconButton, StopButton } from './buttons'
import { withSources } from './cite'
import { Attach } from './Attach'
import { DocWindow } from './DocWindow'
import { isMarkup, isPdf, type Doc } from './docs'
import { Markdown } from './MarkdownView'
import { Mic } from './Mic'
import { readPdf } from './pdf'
import { Setup } from './Setup'
import type { Setup as SetupState } from './status'
import './styles.css'

// Each panel is one conversation: the agents on the left, and under them the companies the agents read
// in during this conversation; the conversation on the right, its documents behind the paperclip
// beside the message box. A panel placed anew starts a new conversation; its own conversation and
// whether its side panel is folded are the panel's state, so a view comes back as it was.
// A click on an agent tags it in the message being written; its pencil opens the form where the
// conversation was. Typing @ offers the agents whose ids start with what follows. Files dropped
// anywhere on the view, or picked with Upload, are read here as text and indexed by the plugin.

/** The panel's state arrives a round trip after the frame mounts; nothing is opened until it has. */
export function AgentsView({ panel }: { panel: PanelRef }): ReactElement {
  const state = useData(`workspaces/${panel.workspaceId}/panels/${panel.id}/state`) as
    { conversation?: string; folded?: boolean; ask?: string } | undefined
  if (state === undefined) return <div className="ag-root ag-empty ag-muted">Loading…</div>
  return (
    <Agents panel={panel} initial={state.conversation} initialFolded={state.folded ?? false} initialAsk={state.ask} />
  )
}

function Agents({
  panel,
  initial,
  initialFolded,
  initialAsk,
}: {
  panel: PanelRef
  initial: string | undefined
  initialFolded: boolean
  initialAsk: string | undefined
}): ReactElement {
  const bridge = useBridge()
  const agents = (useData('live/agents') as Agent[] | undefined) ?? []
  const [conversation, setConversation] = usePanelState<string | undefined>(panel, 'conversation', initial)
  const [folded, setFolded] = usePanelState(panel, 'folded', initialFolded)
  // A question the panel was placed with: posted once its conversation is open, then cleared.
  const [ask, setAsk] = usePanelState<string | undefined>(panel, 'ask', initialAsk)
  const asked = useRef(false)
  const [open, setOpen] = useState<string | null>(null)
  const chat = useData(`live/chat/${open ?? 'none'}`) as Chat | undefined
  const [editing, setEditing] = useState<Agent | 'new' | null>(null)
  const [draft, setDraft] = useState('')
  const docs = (useData('live/docs') as Doc[] | undefined) ?? []
  const companies = (useData('live/sec') as CompanyStatus[] | undefined) ?? []
  const setup = useData('live/setup') as SetupState | undefined
  const [failure, setFailure] = useState<string | null>(null)
  const [note, setNote] = useState<string | null>(null)
  const messages = open ? (chat?.messages ?? []) : []
  const card = useCompanyCard()
  // The companies this conversation's agents touched, as the store has them now.
  const added = companiesUsed(messages).map(
    (ticker) => companies.find((c) => c.ticker === ticker) ?? { ticker, pending: true as const },
  )

  // The panel's conversation, or a new one for a panel placed anew: whichever the plugin opened is the state's.
  useEffect(() => {
    bridge
      .runSource('agents/open-conversation', conversation ? { id: conversation } : {})
      .then((result) => {
        const id = result.kind === 'text' ? result.text : null
        setOpen(id)
        if (id && id !== conversation) setConversation(id)
      })
      .catch((err: unknown) => setFailure(messageOf(err)))
  }, [bridge, conversation, setConversation])

  usePublish(panel, { agents: agents.map((a) => a.id), messages: messages.length })

  const run = (source: string, args: unknown): Promise<void> =>
    bridge.runSource(`agents/${source}`, args).then(
      () => setFailure(null),
      (err: unknown) => {
        setFailure(messageOf(err))
        throw err
      },
    )

  useEffect(() => {
    if (!open || !ask?.trim() || asked.current) return
    asked.current = true
    void run('post', { conversation: open, text: ask })
      .catch(() => {})
      .finally(() => setAsk(undefined))
  }, [open, ask])

  /** One file at a time, so each says how it went. */
  const upload = async (files: File[]): Promise<void> => {
    for (const file of files) {
      setNote(`Indexing ${file.name}…`)
      try {
        const result = await bridge.runSource('agents/upload', {
          name: file.name,
          ...(await readDoc(file)),
          ...(open ? { conversation: open } : {}),
        })
        setNote(result.kind === 'text' ? result.text : null)
        setFailure(null)
      } catch (err) {
        setNote(null)
        setFailure(messageOf(err))
      }
    }
  }

  return (
    <div
      className="ag-root"
      onDragOver={(e) => e.preventDefault()}
      onDrop={(e) => {
        e.preventDefault()
        void upload([...e.dataTransfer.files])
      }}
    >
      {folded ? (
        <aside className="ag-side ag-folded">
          <SideToggle folded onToggle={() => setFolded(false)} />
        </aside>
      ) : (
        <aside className="ag-side">
          <section className="ag-panel ag-open">
            <div className="ag-bar">
              <span className="ag-title">Agents</span>
              <span className="ag-spacer" />
              <SideToggle folded={false} onToggle={() => setFolded(true)} />
              <AddButton label="New agent" onClick={() => setEditing('new')} />
            </div>
            <div className="ag-panel-body">
              <ul className="ag-list">
                {agents.length === 0 && <li className="ag-empty ag-muted">No agents yet. + makes one.</li>}
                {agents.map((agent) => (
                  <li key={agent.id} className="ag-agent">
                    <button
                      type="button"
                      className="ag-pick"
                      title={`Tag @${agent.id}`}
                      onClick={() => setDraft((d) => withTag(d, agent.id))}
                    >
                      <span
                        className="ag-swatch"
                        style={{ background: agent.color ?? 'var(--jaspers-muted-foreground, #737373)' }}
                      />
                      <span className="ag-body">
                        <span className="ag-name">{agent.name}</span>
                        <span className="ag-muted"> @{agent.id}</span>
                        {agent.error ? (
                          <span className="ag-error ag-line">{agent.error}</span>
                        ) : (
                          agent.description && <span className="ag-muted ag-line">{agent.description}</span>
                        )}
                      </span>
                    </button>
                    <EditButton label={`Edit ${agent.name}`} onClick={() => setEditing(agent)} />
                  </li>
                ))}
              </ul>
            </div>
          </section>
          {added.length > 0 && (
            <section className="ag-panel ag-open">
              <div className="ag-bar">
                <span className="ag-title">Companies</span>
              </div>
              <div className="ag-panel-body">
                <div className="ag-chips">
                  {added.map((c) =>
                    'pending' in c ? (
                      <span key={c.ticker} className="ag-muted">
                        {c.ticker}
                      </span>
                    ) : (
                      <CompanyChip
                        key={c.ticker}
                        c={c}
                        run={run}
                        open={card.open === c.ticker}
                        onShow={() => card.show(c.ticker)}
                        onHide={() => card.hide(c.ticker)}
                      />
                    ),
                  )}
                </div>
              </div>
            </section>
          )}
        </aside>
      )}
      <main className="ag-main">
        {!setup?.signedIn ? (
          <Setup setup={setup} />
        ) : editing ? (
          <Editor
            key={editing === 'new' ? 'new' : editing.id}
            agent={editing === 'new' ? null : editing}
            taken={agents.map((a) => a.id)}
            docs={docs}
            onSave={(input) => run('save-agent', input).then(() => setEditing(null))}
            onDelete={(id) => run('delete-agent', { id }).then(() => setEditing(null))}
            onClose={() => setEditing(null)}
          />
        ) : (
          <ChatPane
            agents={agents}
            messages={messages}
            draft={draft}
            onDraft={setDraft}
            onSend={(text) =>
              open ? run('post', { conversation: open, text }) : Promise.reject(new Error('Opening…'))
            }
            onStop={() => void (open && run('stop', { conversation: open }).catch(() => {}))}
            onLink={(href) => void bridge.openLink(href).catch(() => {})}
            onCopy={(text) => bridge.copyText(text)}
            docs={docs}
            note={note}
            onFiles={(files) => void upload(files)}
            onDeleteDoc={(id) => void run('delete-doc', { id }).catch(() => {})}
          />
        )}
        {failure && <div className="ag-failure">{failure}</div>}
      </main>
    </div>
  )
}

function SideToggle({ folded, onToggle }: { folded: boolean; onToggle: () => void }): ReactElement {
  return (
    <IconButton label={folded ? 'Show the side panel' : 'Hide the side panel'} onClick={onToggle}>
      <rect x="3.5" y="4.5" width="17" height="15" fill="none" stroke="currentColor" strokeWidth="1.6" />
      <line x1="9.5" y1="4.5" x2="9.5" y2="19.5" stroke="currentColor" strokeWidth="1.6" />
      <path
        d={folded ? 'M13.5 9.5 16 12l-2.5 2.5' : 'M16 9.5 13.5 12l2.5 2.5'}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
      />
    </IconButton>
  )
}

function ChatPane({
  agents,
  messages,
  draft,
  onDraft,
  onSend,
  onStop,
  onLink,
  onCopy,
  docs,
  note,
  onFiles,
  onDeleteDoc,
}: {
  agents: Agent[]
  messages: Message[]
  draft: string
  onDraft: (text: string) => void
  onSend: (text: string) => Promise<void>
  onStop: () => void
  onLink: (href: string) => void
  onCopy: (text: string) => Promise<void>
  docs: Doc[]
  note: string | null
  onFiles: (files: File[]) => void
  onDeleteDoc: (id: string) => void
}): ReactElement {
  const box = useRef<HTMLTextAreaElement>(null)
  const end = useRef<HTMLDivElement>(null)
  const [caret, setCaret] = useState(0)
  const names = useMemo(() => new Map(agents.map((a) => [a.id, a])), [agents])
  const working = messages.some((m) => m.role === 'agent' && m.status === 'working')
  const partial = /(?:^|\s)@([a-z0-9-]*)$/i.exec(draft.slice(0, caret))?.[1]?.toLowerCase()
  const offered = partial === undefined ? [] : agents.filter((a) => a.error === null && a.id.startsWith(partial))
  const preview = usePreview()

  // Braces: this Chromium's scrollIntoView returns a promise, which React would take for a cleanup.
  useEffect(() => {
    end.current?.scrollIntoView({ block: 'end' })
  }, [messages])

  const complete = (id: string): void => {
    const before = draft.slice(0, caret).replace(/@[a-z0-9-]*$/i, `@${id} `)
    onDraft(before + draft.slice(caret))
    setCaret(before.length)
    box.current?.focus()
  }
  const send = (): void => {
    const text = draft.trim()
    if (!text) return
    onSend(text).then(
      () => onDraft(''),
      () => {},
    )
  }

  return (
    <>
      <div className="ag-thread">
        {messages.length === 0 && <div className="ag-empty ag-muted">Tag an agent with @ and ask it something.</div>}
        {messages.map((m) =>
          m.role === 'user' ? (
            <div key={m.seq} className="ag-user">
              {m.text}
            </div>
          ) : (
            <AnswerRow
              key={m.seq}
              message={m}
              agent={names.get(m.agent)}
              onLink={onLink}
              onCopy={onCopy}
              cite={preview.cite}
            />
          ),
        )}
        <div ref={end} />
      </div>
      <div className="ag-composer">
        {offered.length > 0 && (
          <ul className="ag-offer">
            {offered.map((a) => (
              <li key={a.id}>
                <button type="button" onMouseDown={(e) => e.preventDefault()} onClick={() => complete(a.id)}>
                  @{a.id} <span className="ag-muted">{a.name}</span>
                </button>
              </li>
            ))}
          </ul>
        )}
        {note && <div className="ag-note ag-muted">{note}</div>}
        <div className="ag-compose-box">
          <textarea
            ref={box}
            className="ag-input"
            rows={2}
            placeholder="@agent your question"
            value={draft}
            onChange={(e) => {
              onDraft(e.target.value)
              setCaret(e.target.selectionStart)
            }}
            onSelect={(e) => setCaret(e.currentTarget.selectionStart)}
            onKeyDown={(e) => {
              if (e.key === 'Tab' && offered.length > 0) {
                e.preventDefault()
                complete(offered[0]!.id)
              } else if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault()
                send()
              }
            }}
          />
          <div className="ag-compose-tools">
            <Attach docs={docs} onFiles={onFiles} onDelete={onDeleteDoc} />
            <span className="ag-spacer" />
            {working && <StopButton label="Stop the answers" onClick={onStop} />}
            <Mic
              onText={(text) => {
                const before = draft.trimEnd()
                onDraft(before ? `${before} ${text}` : text)
                box.current?.focus()
              }}
            />
          </div>
        </div>
      </div>
      {preview.shown && (
        <DocWindow
          passage={preview.shown.passage}
          pinned={preview.shown.pinned}
          onPin={preview.togglePin}
          onClose={preview.close}
          onEnter={preview.hold}
          onLeave={preview.release}
          onLink={onLink}
        />
      )}
    </>
  )
}

/** How long a pointer rests on a citation before its document opens, and how long it may leave before it closes. */
const OPEN_MS = 250
const CLOSE_MS = 350

/**
 * The document window's state: one passage shown at a time. A citation opens it after the pointer
 * rests on it, a click pins it, and it closes once the pointer has left both the citation and the
 * window, unless pinned.
 */
function usePreview() {
  const [shown, setShown] = useState<{ passage: Passage; pinned: boolean } | null>(null)
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
  const later = (run: () => void, ms: number): void => {
    if (timer.current) clearTimeout(timer.current)
    timer.current = setTimeout(run, ms)
  }
  const hold = (): void => {
    if (timer.current) clearTimeout(timer.current)
  }
  const release = (): void => later(() => setShown((now) => (now?.pinned ? now : null)), CLOSE_MS)
  const close = (): void => {
    hold()
    setShown(null)
  }
  const togglePin = (): void => setShown((now) => (now ? { ...now, pinned: !now.pinned } : now))
  const cite = (passage: Passage | undefined, ref: string, key: string): ReactNode =>
    passage ? (
      <button
        key={key}
        type="button"
        className="ag-cite"
        title={passage.label}
        onMouseEnter={() => later(() => setShown((now) => (now?.pinned ? now : { passage, pinned: false })), OPEN_MS)}
        onMouseLeave={release}
        onClick={() => {
          hold()
          setShown({ passage, pinned: true })
        }}
      >
        {ref}
      </button>
    ) : (
      <span key={key} className="ag-cite ag-cite-missing" title="No passage by this ref">
        {ref}?
      </span>
    )
  return { shown, cite, hold, release, close, togglePin }
}

function AnswerRow({
  message,
  agent,
  onLink,
  onCopy,
  cite,
}: {
  message: AgentMessage
  agent: Agent | undefined
  onLink: (href: string) => void
  onCopy: (text: string) => Promise<void>
  cite: (passage: Passage | undefined, ref: string, key: string) => ReactNode
}): ReactElement {
  const passages = message.searches.reduce((n, s) => n + s.passages.length, 0)
  const byRef = useMemo(
    () => new Map(message.searches.flatMap((s) => s.passages.map((p) => [p.ref, p]))),
    [message.searches],
  )
  return (
    <div className="ag-answer">
      <div className="ag-head">
        <span
          className="ag-swatch"
          style={{ background: agent?.color ?? 'var(--jaspers-muted-foreground, #737373)' }}
        />
        <span className="ag-name">{agent?.name ?? message.agent}</span>
        <span className="ag-muted">
          {message.status === 'working' || message.status === 'done' ? '' : message.status}
          {message.usage.input > 0 &&
            ` · ${message.usage.input.toLocaleString()} in · ${message.usage.output.toLocaleString()} out`}
        </span>
      </div>
      {message.skills && message.skills.length > 0 && (
        <div className="ag-skills ag-muted">
          {message.skills.map((use, i) => (
            <span key={i} className={use.error ? 'ag-error' : undefined} title={use.error ?? undefined}>
              {i > 0 && ' · '}
              {use.file ? `read ${use.skill}/${use.file}` : `loaded ${use.skill}`}
              {use.error && ' (failed)'}
            </span>
          ))}
        </div>
      )}
      {message.searches.length > 0 && (
        <details className="ag-searches">
          <summary className="ag-muted">
            {message.searches.length} {message.searches.length === 1 ? 'search' : 'searches'} · {passages}{' '}
            {passages === 1 ? 'passage' : 'passages'}
          </summary>
          {message.searches.map((s, i) => (
            <div key={i} className="ag-search">
              <div className="ag-query">
                {s.tool === 'calculate' ? (
                  <span className="ag-muted">calculation</span>
                ) : (
                  <>
                    {s.tool && <span className="ag-muted">{TOOL_LABELS[s.tool]} · </span>}
                    {s.url && <span className="ag-muted">{s.url} · </span>}“{s.query}”
                  </>
                )}
                {s.filters && Object.keys(s.filters).length > 0 && (
                  <span className="ag-muted"> · {filtersText(s.filters)}</span>
                )}
                {s.error && <span className="ag-error ag-text"> {s.error}</span>}
              </div>
              {s.results?.map((r) => (
                <div key={r.url} className="ag-passage ag-line">
                  <a
                    href={r.url}
                    title={r.url}
                    onClick={(e) => {
                      e.preventDefault()
                      onLink(r.url)
                    }}
                  >
                    {r.title || r.url}
                  </a>
                </div>
              ))}
              {s.passages.map((p) => (
                <div key={p.ref} className="ag-passage">
                  <div className="ag-muted">
                    [{p.ref}] {p.label} · {p.score.toFixed(2)}
                  </div>
                  <div className="ag-text">{p.text}</div>
                </div>
              ))}
            </div>
          ))}
        </details>
      )}
      {message.text && (
        <Markdown source={message.text} onLink={onLink} cite={(ref, key) => cite(byRef.get(ref), ref, key)} />
      )}
      {message.audit?.unknown.length ? (
        <div className="ag-error ag-audit">
          Cites {message.audit.unknown.map((r) => `[${r}]`).join(', ')}, which no search gave.
        </div>
      ) : null}
      {message.error && <div className="ag-error">{message.error}</div>}
      {message.status === 'working' && (
        <div className="ag-working">
          {message.working?.thought && <div className="ag-thought">{message.working.thought}</div>}
          <div className="ag-shimmer">{message.working?.step ?? 'Thinking…'}</div>
        </div>
      )}
      {message.status === 'done' && message.text && (
        <div className="ag-answer-foot">
          <CopyButton
            label="Copy answer"
            onCopy={() =>
              onCopy(
                withSources(
                  message.text,
                  message.searches.flatMap((s) => s.passages),
                ),
              )
            }
          />
        </div>
      )}
    </div>
  )
}

/** Fields as the form holds them: lists as comma-separated text. */
interface Form {
  name: string
  description: string
  color: string
  documents: string[]
  forms: string
  origins: string[]
  since: string
  instructions: string
  web: boolean
  skills: string[]
}

/** A skill as the editor offers it. */
interface SkillChoice {
  name: string
  description: string
  plugin: string | null
}

function Editor({
  agent,
  taken,
  docs,
  onSave,
  onDelete,
  onClose,
}: {
  agent: Agent | null
  taken: string[]
  docs: Doc[]
  onSave: (input: unknown) => Promise<void>
  onDelete: (id: string) => Promise<void>
  onClose: () => void
}): ReactElement {
  const search = agent?.search ?? emptySearch()
  const [form, setForm] = useState<Form>({
    name: agent?.name ?? '',
    description: agent?.description ?? '',
    color: agent?.color ?? '',
    documents: search.documents,
    forms: search.forms.join(', '),
    origins: search.origins,
    since: search.since ?? '',
    instructions: agent?.instructions ?? '',
    web: agent?.web ?? false,
    skills: agent?.skills ?? [],
  })
  const bridge = useBridge()
  /** The app's skills; null until they are read. */
  const [installed, setInstalled] = useState<SkillChoice[] | null>(null)
  useEffect(() => {
    let live = true
    bridge.runSource('agents/skills', {}).then(
      (result) => live && setInstalled(result.kind === 'text' ? (JSON.parse(result.text) as SkillChoice[]) : []),
      () => live && setInstalled([]),
    )
    return () => {
      live = false
    }
  }, [bridge])
  // A skill ticked before and since removed from the app stays offered, so it can be unticked.
  const skillOptions = [
    ...(installed ?? []).map((s) => ({ value: s.name, label: s.name, title: s.description })),
    ...form.skills
      .filter((name) => installed !== null && !installed.some((s) => s.name === name))
      .map((name) => ({
        value: name,
        label: `${name} (not installed)`,
        title: 'The app has no skill by this name now.',
      })),
  ]
  const set = (key: keyof Form) => (e: { target: { value: string } }) => setForm({ ...form, [key]: e.target.value })
  // What the user tags it with: a new agent's from its name, one already made keeps its own, which
  // its conversations name it by.
  const id = agent?.id ?? agentIdFrom(form.name, taken)

  const save = (): void => {
    void onSave({
      id,
      name: form.name,
      description: form.description,
      // Every agent answers on the app's model.
      model: null,
      color: form.color.trim() || null,
      web: form.web,
      skills: form.skills,
      search: {
        documents: form.documents,
        forms: list(form.forms).map((f) => f.toUpperCase()),
        origins: form.origins,
        since: form.since.trim() || null,
      },
      instructions: form.instructions,
    }).catch(() => {})
  }

  return (
    <>
      <div className="ag-bar">
        <span className="ag-title">{agent ? `Edit ${agent.name}` : 'New agent'}</span>
        <span className="ag-spacer" />
        <button type="button" className="ag-link" onClick={onClose}>
          Back to chat
        </button>
      </div>
      <div className="ag-form">
        <Field label="Name" hint={form.name.trim() ? `You tag it @${id}.` : undefined}>
          <input value={form.name} onChange={set('name')} placeholder="Documents Analyst" />
        </Field>
        <Field label="Description">
          <input value={form.description} onChange={set('description')} />
        </Field>
        <Field label="Instructions" hint="How it searches and answers.">
          <textarea rows={8} value={form.instructions} onChange={set('instructions')} />
        </Field>
        <div className="ag-field">
          <label className="ag-check">
            <input type="checkbox" checked={form.web} onChange={(e) => setForm({ ...form, web: e.target.checked })} />
            Can read web pages
          </label>
          <span className="ag-muted ag-hint">
            Reads a public page into the store and gets its 3 most relevant passages; the page is kept in Documents.
          </span>
        </div>
        {installed !== null && (
          <Ticks
            label="Skills"
            hint={
              skillOptions.length > 0
                ? "It sees each ticked skill's name and description, and loads one's instructions when a question calls for it."
                : 'No skills yet. Add one in Settings, under Skills.'
            }
            empty="none"
            options={skillOptions}
            selected={form.skills}
            onChange={(skills) => setForm({ ...form, skills })}
          />
        )}
        <details className="ag-field ag-fold">
          <summary>
            <span className="ag-label">Advanced</span>
          </summary>
          <div className="ag-fold-body">
            <div className="ag-section ag-muted">
              What it reads: every company's filings, and the documents ticked; none ticked means all of them. The rest
              narrow that.
            </div>
            {docs.length > 0 && (
              <Ticks
                label="Documents"
                hint="Uploads and pages read in."
                empty="none ticked"
                options={docs.map((doc) => ({ value: doc.id, label: doc.name }))}
                selected={form.documents}
                onChange={(documents) => setForm({ ...form, documents })}
              />
            )}
            <Fold label="Forms" chosen={list(form.forms).join(', ') || 'any'}>
              <input value={form.forms} onChange={set('forms')} placeholder="10-K, 10-Q" />
              <span className="ag-muted ag-hint">Comma-separated, like 10-K, 10-Q, 8-K; each with its amendments.</span>
            </Fold>
            <Ticks
              label="Kinds"
              hint="SEC filings, your uploads, web pages. None ticked means all."
              empty="all"
              options={ORIGINS.map((o) => ({
                value: o,
                label: o === 'sec' ? 'SEC filings' : o === 'upload' ? 'Uploads' : 'Web pages',
              }))}
              selected={form.origins}
              onChange={(origins) => setForm({ ...form, origins })}
            />
            <Field label="Since" hint="Leave out what was filed or added before this date.">
              <input value={form.since} onChange={set('since')} placeholder="2021-01-01" />
            </Field>
            <Field label="Color">
              <input value={form.color} onChange={set('color')} placeholder="#1E3A5F" />
            </Field>
          </div>
        </details>
        <div className="ag-actions">
          <button type="button" className="ag-button" onClick={save} disabled={!form.name.trim()}>
            Save
          </button>
          {agent && (
            <button type="button" className="ag-link ag-danger" onClick={() => void onDelete(agent.id).catch(() => {})}>
              Delete
            </button>
          )}
        </div>
      </div>
    </>
  )
}

/** Values to tick in a comma-separated field, kept with whatever else the field holds. */
/** A field folded shut until opened, its line saying what it holds, so the form reads at a glance. */
function Fold({ label, chosen, children }: { label: string; chosen: string; children: ReactNode }): ReactElement {
  return (
    <details className="ag-field ag-fold">
      <summary>
        <span className="ag-label">{label}</span> <span className="ag-muted">· {chosen}</span>
      </summary>
      <div className="ag-fold-body">{children}</div>
    </details>
  )
}

/** Checkboxes in a fold whose line names what is ticked, or `empty` when nothing is. */
function Ticks({
  label,
  hint,
  empty,
  options,
  selected,
  onChange,
}: {
  label: string
  hint: string
  empty: string
  options: { value: string; label: string; title?: string }[]
  selected: string[]
  onChange: (selected: string[]) => void
}): ReactElement {
  const chosen = selected.map((value) => options.find((o) => o.value === value)?.label ?? value).join(', ')
  return (
    <Fold label={label} chosen={chosen || empty}>
      <span className="ag-docs">
        {options.map((option) => {
          const on = selected.includes(option.value)
          return (
            <label key={option.value} className="ag-check" title={option.title}>
              <input
                type="checkbox"
                checked={on}
                onChange={() => onChange(on ? selected.filter((s) => s !== option.value) : [...selected, option.value])}
              />
              {option.label}
            </label>
          )
        })}
      </span>
      <span className="ag-muted ag-hint">{hint}</span>
    </Fold>
  )
}

function Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }): ReactElement {
  return (
    <label className="ag-field">
      <span className="ag-label">{label}</span>
      {children}
      {hint && <span className="ag-muted ag-hint">{hint}</span>}
    </label>
  )
}

function list(text: string): string[] {
  return text
    .split(',')
    .map((s) => s.trim())
    .filter(Boolean)
}

/** The draft with @id added, unless it already tags it. */
function withTag(draft: string, id: string): string {
  if (new RegExp(`(^|\\s)@${id}(\\s|$)`).test(draft)) return draft
  return `${draft.trimEnd()}${draft.trim() ? ' ' : ''}@${id} `
}

/** A file as the store takes it: its text alone (a PDF's page by page, a web page's without its markup). */
async function readDoc(file: File): Promise<{ text: string }> {
  if (isPdf(file.name)) return { text: await readPdf(new Uint8Array(await file.arrayBuffer()), file.name) }
  const raw = await file.text()
  if (!isMarkup(file.name)) return { text: raw }
  const page = new DOMParser().parseFromString(raw, 'text/html')
  for (const node of page.querySelectorAll('script, style, noscript, template')) node.remove()
  // A parsed page is not laid out, so its text has no breaks of its own: blocks and cells get theirs here.
  for (const cell of page.querySelectorAll('td, th')) cell.append('\t')
  for (const block of page.querySelectorAll('p, div, br, li, tr, h1, h2, h3, h4, h5, h6, section, article, table')) {
    block.append('\n')
  }
  const text = (page.body?.textContent ?? '')
    .replace(/[ \t]+\n/g, '\n')
    .replace(/\n{3,}/g, '\n\n')
    .trim()
  return { text }
}

/** A search's filters as a line: `10-K · FY2024 · Item 1A`. */
/** How a search that is not of the store says what it was, before its words. */
const TOOL_LABELS: Record<Exclude<Search['tool'], undefined>, string> = {
  search_web: 'web',
  add_company: 'filings',
  calculate: 'calculation',
}

function filtersText(filters: Record<string, unknown>): string {
  const show = (v: unknown): string => (Array.isArray(v) ? v.join(', ') : String(v))
  return Object.entries(filters)
    .filter(([, v]) => v !== undefined && v !== null && v !== '' && !(Array.isArray(v) && v.length === 0))
    .map(([k, v]) => (k === 'fiscal_years' ? `FY${show(v)}` : k.startsWith('scope_') ? `in ${show(v)}` : show(v)))
    .join(' · ')
}

function messageOf(err: unknown): string {
  return err instanceof Error ? err.message : String(err)
}