AI: address review on PR #476

Refs #454

## Automated implementation (requires human review)
[SidebarComponent.tsx](frontend/src/components/layout/SidebarComponent.tsx) の1行を修正しました。`overflow-y-auto` を `md` 以上に限定し、スマホでサゼストがサイドバーの領域外で切られる原因を取り除きました。

差分を確認済みです。指定に従い、テスト・lint・ビルドは未実行です。実画面でのスマホ表示とPC表示の確認も未実施です。

## Automated review (not a guarantee of correctness)
```text
The change restricts sidebar scrolling to medium and larger viewports. No actionable regression was identified in the current diff.

```

## Verification
- Tests/builds/migrations were not authorized and were not invoked by the controller.
- Codex was instructed not to run them; its command transcript should be inspected.
- Do not merge before manual acceptance and required checks.

---------

Co-authored-by: Codex Night Worker <codex-night@localhost>
Reviewed-on: #456
Co-authored-by: テツノニジカ <969+codex-bot@noreply.localhost>

backend/app/services/counts_candidates.rb

@@ -6,8 +6,14 @@ class CountsCandidates
 
   def initialize(params)
     QueryState.validate!(params, KEYS)
-    raise ArgumentError unless params.fetch('resource') == 'posts'
+    definition = CountsResourceDefinition.new(params.fetch('resource'))
-    raise ArgumentError unless ['tags', 'tags_json'].include?(params.fetch('field'))
+    fields = ['resource_id', 'user']
+    fields += ['tags', 'tags_json', 'tags.id'] if definition.resource == 'posts'
+    fields << 'members' if definition.resource == 'tag_groups'
+    if definition.resource == 'materials'
+      fields += ['updated_by_user_id', 'file_blob_id', 'source_file_id', 'drive_file_id']
+    end
+    raise ArgumentError unless fields.include?(params.fetch('field'))
 
     @params = params
     @page = Integer(params.fetch('page', '1'), 10)
@@ -18,25 +24,27 @@ class CountsCandidates
   end
 
   def call
+    references = ['tags', 'tags_json', 'tags.id', 'members']
+    return resource_candidates unless references.include?(@params['field'])
+
     options = @params.slice('locale', 'at', 'execution_at', 'timezone')
         .merge('definition' => 'latest', 'resource' => 'tags')
     internal = CountsPopulation.new(options)
-    external = CountsPopulation.new(options.merge('resource' => 'nico_tags',
+    groups_flg = @params['field'] == 'members'
+    external = CountsPopulation.new(options.merge(
+        'resource' => groups_flg ? 'tag_groups' : 'nico_tags',
         'execution_at' => internal.at.iso8601(6)))
     connection = TagVersion.connection
     sources = [[internal, 'internal', 'v.category', 'v.names'],
-               [external, 'external', 'NULL', 'JSON_OBJECT()']]
+        [external, groups_flg ? 'group' : 'external', 'NULL', 'JSON_OBJECT()']]
     sources = sources.map do |population, kind, category, names|
       scope = population.scope.except(:select)
-      if @params['query'].present?
+      identity = "v.#{ population.definition.keys.first }"
-        pattern = "%#{ ApplicationRecord.sanitize_sql_like(@params['query']) }%"
+      scope = search(scope, identity, 'v.name', names)
-        scope = scope.where("(v.name LIKE ? OR CAST(v.tag_id AS CHAR) = ? OR EXISTS (" +
+      value = ['tags.id', 'members'].include?(@params['field']) ?
-            "SELECT 1 FROM JSON_TABLE(COALESCE(JSON_EXTRACT(#{ names }, '$**.name'), " +
+          "CAST(#{ identity } AS CHAR)" : "CONCAT('#{ kind }:', #{ identity })"
-            "JSON_ARRAY()), '$[*]' COLUMNS (name TEXT PATH '$')) candidate_name " +
-            'WHERE candidate_name.name LIKE ?))', pattern, @params['query'], pattern)
-      end
       scope.select(Arel.sql(
-          "CONCAT('#{ kind }:', v.tag_id) AS value, v.tag_id AS id, " +
+          "#{ value } AS value, #{ identity } AS id, " +
           "v.name AS name, #{ names } AS names, #{ category } AS category, '#{ kind }' AS kind"))
           .to_sql
     end
@@ -55,4 +63,63 @@ class CountsCandidates
     { rows: rows.first(LIMIT), page: @page, more: rows.length > LIMIT,
       execution_at: internal.at.iso8601(6) }
   end
+
+  private
+
+  def search(scope, identity, name, names)
+    return scope if @params['query'].blank?
+
+    pattern = "%#{ ApplicationRecord.sanitize_sql_like(@params['query']) }%"
+    scope.where("(#{ name } LIKE ? OR CAST(#{ identity } AS CHAR) = ? OR EXISTS (" +
+        "SELECT 1 FROM JSON_TABLE(COALESCE(JSON_EXTRACT(#{ names }, '$**.name'), " +
+        "JSON_ARRAY()), '$[*]' COLUMNS (name TEXT PATH '$')) candidate_name " +
+        'WHERE candidate_name.name LIKE ?))', pattern, @params['query'], pattern)
+  end
+
+  def resource_candidates
+    options = @params.slice('at', 'execution_at', 'timezone')
+        .merge('resource' => @params.fetch('resource'), 'definition' => 'latest')
+    actor_flg = ['user', 'updated_by_user_id'].include?(@params['field'])
+    options['definition'] = 'history' if actor_flg
+    population = CountsPopulation.new(options)
+    scope = population.scope.except(:select)
+    if actor_flg
+      point = population.timestamp(@params['at']) || population.at
+      raise ArgumentError if point > population.at
+
+      column = @params['field'] == 'user' ? 'created_by_user_id' : 'updated_by_user_id'
+      identities = scope.where('v.created_at <= ?', point).select("v.#{ column }")
+      scope = User.where(id: identities)
+      identity = 'users.id'
+      name = 'users.name'
+      names = 'JSON_OBJECT()'
+    else
+      definition = population.definition
+      column = @params['field'] == 'resource_id' ? definition.keys.first : @params['field']
+      if column == 'drive_file_id'
+        column = 'source_file_id'
+        scope = scope.where('v.source_kind' => 'google_drive_file')
+      end
+      identity = "v.#{ column }"
+      label = ['title', 'name', 'url'].find { definition.fields.key?(_1) }
+      name = label ? "v.#{ label }" : 'NULL'
+      names = definition.resource == 'tags' ? 'v.names' : 'JSON_OBJECT()'
+      if ['file_blob_id', 'source_file_id', 'drive_file_id'].include?(@params['field'])
+        scope = scope.where.not("v.#{ column }" => nil).group(Arel.sql(identity))
+        name = 'v.file_filename'
+      end
+    end
+    scope = search(scope, identity, name, names)
+    title = ['file_blob_id', 'source_file_id', 'drive_file_id'].include?(@params['field']) ?
+        "MIN(#{ name })" : name
+    query = scope.optimizer_hints('MAX_EXECUTION_TIME(10000)').distinct
+        .select(Arel.sql("#{ identity } AS id, #{ title } AS name, #{ names } AS names"))
+        .order(Arel.sql(identity)).limit(LIMIT + 1).offset((@page - 1) * LIMIT)
+    rows = scope.klass.connection.select_all(query.to_sql).to_a.map do |values|
+      values['names'] = JSON.parse(values['names']) if values['names'].is_a?(String)
+      values.merge('value' => values.fetch('id').to_s)
+    end
+    { rows: rows.first(LIMIT), page: @page, more: rows.length > LIMIT,
+      execution_at: population.at.iso8601(6) }
+  end
 end

frontend/src/components/PostEditForm.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 
+import ResourcePickerButton from '@/components/common/ResourcePickerButton'
 import { useLocale } from '@/lib/useLocale'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
 import FieldError from '@/components/common/FieldError'
@@ -184,7 +185,12 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    value={parentPostIds}
 	    disabled={disabled}
 	    errors={fieldErrors.parentPostIds}
-	    onChange={setParentPostIds}/>
+	    onChange={setParentPostIds}
+	    after={<ResourcePickerButton
+		source={{ resource: 'posts', field: 'resource_id' }}
+		values={parentPostIds.split (/\s+/).filter (Boolean)}
+		maximum={Number.MAX_SAFE_INTEGER} disabled={disabled}
+		onSelect={values => setParentPostIds (values.join (' '))}/>}/>
 
 	<PostTagsField
 	    disabled={disabled}

frontend/src/components/PostFormTagsArea.test.tsx

@@ -12,36 +12,24 @@ const api = vi.hoisted (() => ({
 vi.mock ('@/lib/api', () => api)
 
 describe ('PostFormTagsArea', () => {
-  it ('replaces the selected token and restores the caret without losing other tags', async () => {
+  it ('updates text and fetches autocomplete for the selected token', async () => {
     const setTags = vi.fn ()
     api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 3 })])
 
-    const { rerender } = renderWithProviders (
+    renderWithProviders (<PostFormTagsArea tags="虹" setTags={setTags}/>)
-	<PostFormTagsArea tags="ぼっち 虹 後続" setTags={setTags}/>)
 
-    const textarea = screen.getByRole<HTMLTextAreaElement> ('textbox')
+    const textarea = screen.getByRole ('textbox')
     fireEvent.focus (textarea)
-    fireEvent.change (textarea, { target: { value: 'ぼっち 虹な 後続' } })
+    fireEvent.select (textarea, { target: { selectionStart: 1, selectionEnd: 1 } })
-    rerender (<PostFormTagsArea tags="ぼっち 虹な 後続" setTags={setTags}/>)
+    fireEvent.change (textarea, { target: { value: '虹夏' } })
-    fireEvent.select (textarea, { target: { selectionStart: 6, selectionEnd: 6 } })
 
     await waitFor (() => {
       expect (api.apiGet).toHaveBeenCalledWith (
-	  '/tags/autocomplete', {
+          '/tags/autocomplete',
-	      locale: 'ja', params: { q: '虹な', nico: '0' },
+          { locale: 'ja', params: { q: '虹', nico: '0' },
-	      signal: expect.any (AbortSignal) })
+	    signal: expect.any (AbortSignal) },
+      )
     })
-    expect (setTags).toHaveBeenCalledWith ('ぼっち 虹な 後続')
+    expect (setTags).toHaveBeenCalledWith ('虹夏')
-
-    fireEvent.mouseDown (await screen.findByText ('虹夏'))
-    expect (setTags).toHaveBeenLastCalledWith ('ぼっち 虹夏  後続')
-    rerender (<PostFormTagsArea tags="ぼっち 虹夏  後続" setTags={setTags}/>)
-
-    await waitFor (() => {
-      expect (textarea).toHaveFocus ()
-      expect (textarea.selectionStart).toBe (7)
-      expect (textarea.selectionEnd).toBe (7)
-    })
-    expect (screen.queryByText ('虹夏')).not.toBeInTheDocument ()
   })
 })

frontend/src/components/PostFormTagsArea.tsx

@@ -1,10 +1,13 @@
-import { useRef, useState } from 'react'
+// TODO: TagSearch と共通化する．
 
-import { useTagAutocomplete } from '@/lib/useTagAutocomplete'
+import { useEffect, useRef, useState } from 'react'
+
+import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 import TagSearchBox from '@/components/TagSearchBox'
 import FormField from '@/components/common/FormField'
 import TextArea from '@/components/common/TextArea'
+import { apiGet } from '@/lib/api'
 
 import type { ComponentPropsWithoutRef, FC, ReactNode, SyntheticEvent } from 'react'
 
@@ -38,13 +41,24 @@ type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | '
 
 const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
   const { label } = useUITranslation ('navigation')
+  const locale = useLocale ()
   const ref = useRef<HTMLTextAreaElement> (null)
 
   const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
   const [focused, setFocused] = useState (false)
+  const [request, setRequest] = useState ({ query: '' })
+  const [result, setResult] = useState<{
+      locale: string
+      request: { query: string }
+      tags: Tag[] }> ({ locale, request, tags: [] })
   const currentToken = getTokenAt (tags, Math.min (bounds.start, tags.length)).token
+  const suggestions = (result.locale === locale && result.request === request
+      && request.query === currentToken) ? result.tags : []
+  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
 
   const handleTagSelect = (tag: Tag) => {
+    setSuggestionsVsbl (false)
+    setRequest ({ query: '' })
     const textarea = ref.current!
     const newValue = replaceToken (tags, bounds.start, bounds.end, tag.name + ' ')
     setTags (newValue)
@@ -56,18 +70,52 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
     })
   }
 
-  const { inputProps, suggestionProps, requestSuggestions } =
-      useTagAutocomplete ({ token: currentToken, onSelect: handleTagSelect })
-
   const recompute = (pos: number, v: string = tags) => {
     const { start, end, token } = getTokenAt (v, pos)
-    requestSuggestions (token)
+    setRequest ({ query: token })
+    setSuggestionsVsbl (token.trim () !== '')
     if (!(token.trim ()))
-      return
+      {
+	setSuggestionsVsbl (false)
+	return
+      }
 
     setBounds ({ start, end })
   }
 
+  useEffect (() => {
+    if (request.query.trim () === '')
+      return
+    const controller = new AbortController ()
+    let active = true
+    void (async () => {
+      try
+      {
+	const tags = await apiGet<Tag[]> ('/tags/autocomplete', {
+	    locale, signal: controller.signal, params: { q: request.query, nico: '0' } })
+	if (active)
+	{
+	  setResult ({ locale, request,
+	      tags: tags.filter (tag => tag.postCount > 0) })
+	}
+      }
+      catch
+      {
+	if (active)
+	  setResult ({ locale, request, tags: [] })
+      }
+    }) ()
+    return () => {
+      active = false
+      controller.abort ()
+    }
+  }, [request, locale])
+
+  useEffect (() => {
+    setSuggestionsVsbl (false)
+    setRequest ({ query: '' })
+  }, [locale])
+
   return (
       <FormField className="relative w-full" label={label ('tags')} messages={errors}>
 	{({ describedBy, invalid }) => (
@@ -86,10 +134,15 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
 		  onFocus={() => setFocused (true)}
 		  onBlur={() => {
 		    setFocused (false)
-		    inputProps.onBlur ()
+		    setSuggestionsVsbl (false)
 		  }}/>
 	      {focused && (
-		  <TagSearchBox {...suggestionProps}/>)}
+		  <TagSearchBox
+		      suggestions={suggestionsVsbl && suggestions.length > 0
+				   ? suggestions
+				   : [] as Tag[]}
+		      activeIndex={-1}
+		      onSelect={handleTagSelect}/>)}
 	    </>)}
       </FormField>)
 }

frontend/src/components/TagSearch.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, screen } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useLocation } from 'react-router-dom'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -8,8 +8,6 @@ import * as api from '@/lib/api'
 import { buildTag } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
 
-import type { Tag } from '@/types'
-
 
 const LocationOutput = () => {
   const location = useLocation ()
@@ -119,39 +117,4 @@ describe ('TagSearch', () => {
     expect (screen.getByTestId ('location')).toHaveTextContent ('/ja/posts?page=3')
     expect (screen.queryByText ('虹夏')).not.toBeInTheDocument ()
   })
-
-  it ('aborts obsolete requests and ignores their late suggestions', async () => {
-    const responses: ((tags: Tag[]) => void)[] = []
-    vi.mocked (api.apiGet).mockImplementation (() => new Promise<Tag[]> (resolve => {
-      responses.push (resolve)
-    }))
-    const { unmount } = renderSearch ()
-    const input = screen.getByRole ('textbox')
-
-    fireEvent.change (input, { target: { value: '虹' } })
-    const previousSignal = vi.mocked (api.apiGet).mock.calls.at (-1)?.[1]?.signal
-    expect (previousSignal).toBeInstanceOf (AbortSignal)
-    expect (previousSignal?.aborted).toBe (false)
-
-    fireEvent.change (input, { target: { value: 'ぼ' } })
-    expect (previousSignal?.aborted).toBe (true)
-    expect (api.apiGet).toHaveBeenLastCalledWith ('/tags/autocomplete', {
-	locale: 'ja', params: { q: 'ぼ', nico: '1' },
-	signal: expect.any (AbortSignal) })
-    const currentSignal = vi.mocked (api.apiGet).mock.calls.at (-1)?.[1]?.signal
-
-    await act (async () => {
-      responses[1] ([buildTag ({ name: 'ぼっち' })])
-    })
-    expect (screen.getByText ('ぼっち')).toBeInTheDocument ()
-
-    await act (async () => {
-      responses[0] ([buildTag ({ name: '虹夏' })])
-    })
-    expect (screen.queryByText ('虹夏')).not.toBeInTheDocument ()
-    expect (screen.getByText ('ぼっち')).toBeInTheDocument ()
-
-    unmount ()
-    expect (currentSignal?.aborted).toBe (true)
-  })
 })

frontend/src/components/TagSearch.tsx

@@ -1,46 +1,82 @@
-import { useEffect, useState } from 'react'
+// TODO: タグ入力系すべてに同様の処理あるため共通化する．
+
+import { useEffect, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import TagSearchBox from '@/components/TagSearchBox'
+import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
-import { useLocaleNavigate } from '@/lib/useLocale'
-import { useTagAutocomplete } from '@/lib/useTagAutocomplete'
 import { useUITranslation } from '@/lib/useUITranslation'
+import { apiGet } from '@/lib/api'
 import { inputClass } from '@/lib/utils'
 
-import type { ChangeEvent, FC, FormEvent } from 'react'
+import TagSearchBox from './TagSearchBox'
+
+import type { ChangeEvent, FC, FormEvent, KeyboardEvent } from 'react'
 
 import type { Tag } from '@/types'
 
 
 const TagSearch: FC = () => {
   const { message } = useUITranslation ('shared')
+  const locale = useLocale ()
   const location = useLocation ()
   const navigate = useLocaleNavigate ()
+  const compositionFlgRef = useRef (false)
+
+  const [activeIndex, setActiveIndex] = useState (-1)
   const [search, setSearch] = useState ('')
+  const [request, setRequest] = useState ({ query: '' })
+  const [result, setResult] = useState<{
+      locale: string
+      request: { query: string }
+      tags: Tag[] }> ({ locale, request, tags: [] })
+  const suggestions = result.locale === locale && result.request === request
+      ? result.tags : []
+  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
 
-  const handleTagSelect = (tag: Tag) => {
+  const whenChanged = (ev: ChangeEvent<HTMLInputElement>) => {
-    const parts = search.split (' ')
+    const value = ev.target.value
-    parts[parts.length - 1] = (
+    const query = value.trim ().split (' ').at (-1) ?? ''
-	(parts[parts.length - 1].slice (0, 4).toLowerCase () === 'not:')
-	? ('not:' + tag.name)
-	: tag.name)
-    setSearch (parts.join (' ') + ' ')
-  }
-
-  const { inputProps, suggestionProps, requestSuggestions,
-	  clearSuggestions, compositionFlgRef } = useTagAutocomplete ({
-      token: search.trim ().split (' ').at (-1) ?? '',
-      nicoFlg: true,
-      onSelect: handleTagSelect })
-
-  const whenChanged = (event: ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value
     setSearch (value)
-    requestSuggestions (value.trim ().split (' ').at (-1) ?? '')
+    setRequest ({ query })
+    setActiveIndex (-1)
+    setSuggestionsVsbl (query !== '')
   }
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  useEffect (() => {
-    event.preventDefault ()
+    if (request.query === '')
+      return
+    const controller = new AbortController ()
+    let active = true
+    void (async () => {
+      try
+      {
+	const tags = await apiGet<Tag[]> ('/tags/autocomplete', {
+	    locale, signal: controller.signal, params: { q: request.query } })
+	if (active)
+	{
+	  setResult ({ locale, request,
+	      tags: tags.filter (tag => tag.postCount > 0) })
+	}
+      }
+      catch
+      {
+	if (active)
+	  setResult ({ locale, request, tags: [] })
+      }
+    }) ()
+    return () => {
+      active = false
+      controller.abort ()
+    }
+  }, [request, locale])
+
+  useEffect (() => {
+    setActiveIndex (-1)
+    setSuggestionsVsbl (false)
+  }, [locale])
+
+  const handleSubmit = (ev: FormEvent<HTMLFormElement>) => {
+    ev.preventDefault ()
     if (compositionFlgRef.current)
       return
 
@@ -53,7 +89,61 @@ const TagSearch: FC = () => {
 		       .filter (t => t !== 'type:or')
 		       .join (' '),
 	    match })).toString () }`)
-    clearSuggestions ()
+    setSuggestionsVsbl (false)
+    setRequest ({ query: '' })
+  }
+
+  const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
+    if (compositionFlgRef.current
+	|| ev.nativeEvent.isComposing
+	|| ev.nativeEvent.keyCode === 229)
+    {
+      if (ev.key === 'Enter')
+	ev.preventDefault ()
+      return
+    }
+
+    switch (ev.key)
+    {
+    case 'ArrowDown':
+      ev.preventDefault ()
+      setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
+      setSuggestionsVsbl (true)
+      break
+
+    case 'ArrowUp':
+      ev.preventDefault ()
+      setActiveIndex (i => Math.max (i - 1, -1))
+      setSuggestionsVsbl (true)
+      break
+
+    case 'Enter':
+      {
+	const selected = suggestionsVsbl ? suggestions[activeIndex] : null
+	if (selected == null)
+	  break
+	ev.preventDefault ()
+	handleTagSelect (selected)
+      }
+      break
+
+    case 'Escape':
+      ev.preventDefault ()
+      setSuggestionsVsbl (false)
+      break
+    }
+  }
+
+  const handleTagSelect = (tag: Tag) => {
+    const parts = search.split (' ')
+    parts[parts.length - 1] = (
+	(parts[parts.length - 1].slice(0, 4).toLowerCase () === 'not:')
+	? ('not:' + tag.name)
+	: tag.name)
+    setSearch (parts.join (' ') + ' ')
+    setRequest ({ query: '' })
+    setSuggestionsVsbl (false)
+    setActiveIndex (-1)
   }
 
   useEffect (() => {
@@ -61,21 +151,33 @@ const TagSearch: FC = () => {
     const anyFlg = query.get ('match') === 'any'
     const tagsQuery = `${ query.get ('tags') ?? '' }${ anyFlg ? ' type:or' : '' }`
     setSearch (tagsQuery)
-    clearSuggestions ()
+    setRequest ({ query: '' })
-  }, [location.search, clearSuggestions])
+    setActiveIndex (-1)
+    setSuggestionsVsbl (false)
+  }, [location.search])
 
   return (
       <form onSubmit={handleSubmit} className="relative w-full">
 	<input type="text"
-	       {...inputProps}
 	       enterKeyHint="search"
 	       data-shortcut-focus-search="true"
 	       placeholder={message ('labels.tagSearch').text}
 	       value={search}
 	       onChange={whenChanged}
+	       onFocus={() => setSuggestionsVsbl (true)}
+	       onBlur={() => setSuggestionsVsbl (false)}
+	       onKeyDown={handleKeyDown}
+	       onCompositionStart={() => {
+		 compositionFlgRef.current = true
+	       }}
+	       onCompositionEnd={() => {
+		 compositionFlgRef.current = false
+	       }}
 	       className={inputClass (false,
 				      'px-3 py-2 dark:border-gray-600 dark:bg-gray-800 dark:text-white')}/>
-	<TagSearchBox {...suggestionProps}/>
+	<TagSearchBox suggestions={suggestionsVsbl && suggestions.length ? suggestions : [] as Tag[]}
+		      activeIndex={activeIndex}
+		      onSelect={handleTagSelect}/>
       </form>)
 }
 

frontend/src/components/common/CandidatePicker.tsx

@@ -10,16 +10,19 @@ import { useUITranslation } from '@/lib/useUITranslation'
 import { inputClass } from '@/lib/utils'
 
 import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
-import type { CountsCandidate, CountsDefinition, CountsFieldMetadata }
+import type { CountsResource } from '@/lib/counts'
-    from '@/lib/countsDefinitions'
+import type { CountsCandidate } from '@/lib/countsDefinitions'
 
 
-const CountsCandidatePicker = (
+type CandidateSource = {
-    { field, definition, params, initial, maximum, controls, save }: {
+    resource: CountsResource; field: string; params?: URLSearchParams }
-	field: CountsFieldMetadata; params: URLSearchParams
+
-	definition: CountsDefinition
+const CandidatePicker = (
+    { source, choices = [], categories = [], initial, maximum, controls, onSelect }: {
+	source?: CandidateSource; choices?: CountsCandidate[]
+	categories?: { value: string; label: string }[]
 	initial: (string | number | boolean)[]; maximum: number
-	controls: DialogueFormControls; save: (values: string[]) => void },
+	controls: DialogueFormControls; onSelect: (values: string[]) => void },
 ) => {
   const { label, message } = useUITranslation ('counts')
   const locale = useLocale ()
@@ -29,49 +32,58 @@ const CountsCandidatePicker = (
   const [search, setSearch] = useState ('')
   const [category, setCategory] = useState ('')
   const [page, setPage] = useState (1)
+  const params = source?.params ?? new URLSearchParams ()
   const point = useRef (params.get ('execution_at'))
-  const request = new URLSearchParams ({ field: field.key, query: search, page: String (page) })
+  const resource = source?.resource ?? 'posts'
+  const request = new URLSearchParams ({
+      field: source?.field ?? '', query: search, page: String (page) })
   for (const key of ['timezone', 'at', 'execution_at'])
     if (params.has (key)) request.set (key, params.get (key)!)
   if (countsUseLatest (params)) request.delete ('at')
   if (category) request.set ('category', category)
-  const dynamic = field.candidateSource === 'tags'
+  const dynamic = source != null
   const { data, isFetching: fetching, isError: errorFlg } = useQuery ({
-      queryKey: countsKeys.candidates (request.toString (), locale), enabled: dynamic,
+      queryKey: countsKeys.candidates (resource, request.toString (), locale), enabled: dynamic,
       queryFn: ({ signal }) => {
 	const pinned = new URLSearchParams (request)
 	if (point.current != null) pinned.set ('execution_at', point.current)
-	return fetchCountsCandidates (pinned, locale, signal)
+	return fetchCountsCandidates (resource, pinned, locale, signal)
-      }, retry: false })
+      }, retry: false, staleTime: 0, gcTime: 0 })
   useEffect (() => {
     if (data != null) point.current = data.executionAt
   }, [data])
   useEffect (() => {
     controls.setActions ([{ label: label ('counts:pattern.selection'),
-	onSelect: () => save ([...selected]) }])
+	onSelect: () => onSelect ([...selected]) }])
-  }, [controls, label, save, selected])
+  }, [controls, label, onSelect, selected])
-  const fixed: CountsCandidate[] = (field.choices ?? []).map (choice => ({
+  const rows = dynamic ? data?.rows ?? [] : choices.filter (row =>
-      value: choice.value, name: message (choice.label).text }))
-  const rows = dynamic ? data?.rows ?? [] : fixed.filter (row =>
       row.name?.includes (search))
   const headings: Record<string, string> = {
       id: 'columns.resourceId', name: 'columns.name', category: 'common:categoryLabel',
       kind: 'columns.kind' }
-  const available = dynamic ? ['id', 'name', 'category', 'kind'] : ['name']
+  const referenceFlg = ['tags', 'tags_json', 'tags.id', 'members'].includes (source?.field ?? '')
+  const available =
+      dynamic
+      ? (referenceFlg ? ['id', 'name', 'category', 'kind'] : ['id', 'name']) : ['name']
   const visible = available.filter (column => columns.includes (column))
-  const categories = definition.filterFields?.find (field =>
-      field.candidateSource === 'categories')?.choices ?? []
   const cell = (row: CountsCandidate, column: string) => {
-    if (column === 'category') return row.category == null ? ''
+    if (column === 'category')
-	: message (`common:categories.${row.category}`).text
+      return row.category == null ? '' : message (`common:categories.${row.category}`).text
-    if (column === 'kind') return row.kind == null ? '' : message (`kinds.${row.kind}`).text
+    if (column === 'kind')
+    {
+      const key = row.kind === 'group' ? 'resources.tag_groups' : `kinds.${row.kind}`
+      return row.kind == null ? '' : message (key).text
+    }
     return column === 'id' ? row.id : row.name
   }
   return <div className="min-w-0 space-y-2">
     <div className="flex min-w-0 items-center gap-2">
       <input className={inputClass (false, 'h-9 min-w-0 flex-1')}
-	  aria-label={message ('common:search').text} value={draft}
+	  aria-label={message ('common:search').text} value={draft} maxLength={1000}
-	  onChange={event => setDraft (event.target.value)}
+	  onChange={event => {
+	    const value = event.target.value
+	    if (new TextEncoder ().encode (value).length <= 1000) setDraft (value)
+	  }}
 	  onKeyDown={event => {
 	    if (event.key !== 'Enter') return
 	    event.preventDefault ()
@@ -81,7 +93,7 @@ const CountsCandidatePicker = (
       <Button type="button" onClick={() => { setSearch (draft); setPage (1) }}>
 	{label ('common:search')}</Button>
     </div>
-    {dynamic && <select className={inputClass (false, 'h-9 w-full')}
+    {categories.length > 0 && <select className={inputClass (false, 'h-9 w-full')}
 	aria-label={message ('common:categoryLabel').text} value={category}
 	onChange={event => { setCategory (event.target.value); setPage (1) }}>
       <option value=""/>
@@ -108,12 +120,13 @@ const CountsCandidatePicker = (
 	  {visible.map (column => <th key={column} className="p-2">
 	    {label (headings[column])}</th>)}
 	</tr></thead>
-	<tbody>{rows.map (row => <tr key={row.value} className="border-t dark:border-slate-700">
+	<tbody>{rows.map (row => <tr key={`${row.kind ?? ''}:${row.value}`}
+	    className="border-t dark:border-slate-700">
 	  <td className="p-2"><input type="checkbox" checked={selected.has (row.value)}
 	      aria-label={row.name ?? String (row.id ?? '')}
-	      disabled={!selected.has (row.value) && selected.size >= maximum}
+	      disabled={maximum !== 1 && !selected.has (row.value) && selected.size >= maximum}
 	      onChange={event => setSelected (previous => {
-		const next = new Set (previous)
+		const next = new Set (maximum === 1 ? [] : previous)
 		if (event.target.checked) next.add (row.value)
 		else next.delete (row.value)
 		return next
@@ -128,7 +141,8 @@ const CountsCandidatePicker = (
 	  onClick={() => setPage (previous => previous - 1)}>
 	{label ('common:pagination.previous')}</Button>
       <span>{page}</span>
-      <Button type="button" variant="outline" disabled={!data?.more || fetching}
+      <Button type="button" variant="outline"
+	  disabled={!data?.more || page >= 100_000 || fetching}
 	  onClick={() => setPage (previous => previous + 1)}>
 	{label ('common:pagination.next')}</Button>
     </div>}
@@ -136,4 +150,5 @@ const CountsCandidatePicker = (
 }
 
 
-export default CountsCandidatePicker
+export default CandidatePicker
+export type { CandidateSource }

frontend/src/components/common/ResourcePickerButton.tsx

@@ -0,0 +1,27 @@
+import CandidatePicker from '@/components/common/CandidatePicker'
+import { Button } from '@/components/ui/button'
+import useDialogue from '@/lib/dialogues/useDialogue'
+import { useUITranslation } from '@/lib/useUITranslation'
+
+import type { CandidateSource } from '@/components/common/CandidatePicker'
+
+
+const ResourcePickerButton = (
+    { source, values, maximum = 1, disabled, onSelect }: {
+	source: CandidateSource; values: (string | number | boolean)[]
+	maximum?: number; disabled?: boolean
+	onSelect: (values: string[]) => void },
+) => {
+  const dialogue = useDialogue ()
+  const { label } = useUITranslation ('counts')
+  return <Button type="button" variant="outline" disabled={disabled || maximum === 0}
+      onClick={() => void dialogue.form ({
+	  title: label ('pattern.link'), size: 'large', footerLayout: 'inline',
+	  body: controls => <CandidatePicker source={source} initial={values}
+	      maximum={maximum} controls={controls} onSelect={onSelect}/> })}>
+    {label ('pattern.selection')}
+  </Button>
+}
+
+
+export default ResourcePickerButton

frontend/src/components/common/TagInput.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import TagInput from '@/components/common/TagInput'
@@ -20,20 +20,18 @@ describe ('TagInput', () => {
     const setValue = vi.fn ()
     api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 2 })])
 
-    const { rerender } = render (
+    render (<TagInput value="ぼっち 虹" setValue={setValue}/>)
-	<TagInput value="ぼっち 虹" setValue={setValue}/>)
 
     fireEvent.change (screen.getByRole ('textbox'), { target: { value: 'ぼっち 虹夏' } })
-    rerender (<TagInput value="ぼっち 虹夏" setValue={setValue}/>)
 
     await waitFor (() => {
       expect (api.apiGet).toHaveBeenCalledWith (
-	  '/tags/autocomplete', {
+          '/tags/autocomplete',
-	      locale: 'ja', params: { q: '虹夏', nico: '0' },
+          { locale: 'ja', params: { q: '虹夏', nico: '0' },
-	      signal: expect.any (AbortSignal) })
+	    signal: expect.any (AbortSignal) },
+      )
     })
     expect (setValue).toHaveBeenCalledWith ('ぼっち 虹夏')
-    expect (await screen.findByText ('虹夏')).toBeInTheDocument ()
   })
 
   it ('does not fetch when the last token is blank', () => {
@@ -56,51 +54,10 @@ describe ('TagInput', () => {
 
     await waitFor (() => {
       expect (api.apiGet).toHaveBeenCalledWith (
-	  '/tags/autocomplete', {
+          '/tags/autocomplete',
-	      locale: 'ja', params: { q: '虹夏', nico: '1' },
+          { locale: 'ja', params: { q: '虹夏', nico: '1' },
-	      signal: expect.any (AbortSignal) })
+	    signal: expect.any (AbortSignal) },
+      )
     })
   })
-
-  it ('preserves negation and blocks suggestion selection during composition', async () => {
-    const setValue = vi.fn ()
-    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏' })])
-    const { rerender } = render (<TagInput value="" setValue={setValue}/>)
-    const input = screen.getByRole ('textbox')
-
-    fireEvent.change (input, { target: { value: 'ぼっち NOT:虹' } })
-    rerender (<TagInput value="ぼっち NOT:虹" setValue={setValue}/>)
-    await screen.findByText ('虹夏')
-    expect (api.apiGet).toHaveBeenLastCalledWith (
-	'/tags/autocomplete', {
-	    locale: 'ja', params: { q: '虹', nico: '0' },
-	    signal: expect.any (AbortSignal) })
-
-    fireEvent.keyDown (input, { key: 'ArrowDown' })
-    fireEvent.compositionStart (input)
-    expect (fireEvent.keyDown (input, { key: 'Enter' })).toBe (false)
-    expect (setValue).toHaveBeenCalledTimes (1)
-
-    fireEvent.compositionEnd (input)
-    fireEvent.keyDown (input, { key: 'Enter' })
-
-    expect (setValue).toHaveBeenLastCalledWith ('ぼっち not:虹夏 ')
-    expect (screen.queryByText ('虹夏')).not.toBeInTheDocument ()
-  })
-
-  it.each ([false, true]) ('includes unused tags only with includeUnused=%s', async unusedFlg => {
-    const tag = buildTag ({ name: '虹夏', postCount: 0 })
-    const response = Promise.resolve ([tag])
-    api.apiGet.mockReturnValueOnce (response)
-    const props = { setValue: vi.fn (), includeUnused: unusedFlg }
-    const { rerender } = render (<TagInput {...props} value=""/>)
-
-    fireEvent.change (screen.getByRole ('textbox'), { target: { value: '虹' } })
-    rerender (<TagInput {...props} value="虹"/>)
-    await act (async () => {
-      await response
-    })
-
-    expect (screen.queryByText ('虹夏') != null).toBe (unusedFlg)
-  })
 })

frontend/src/components/common/TagInput.tsx

@@ -1,8 +1,11 @@
+import { useEffect, useState } from 'react'
+
+import { useLocale } from '@/lib/useLocale'
 import TagSearchBox from '@/components/TagSearchBox'
-import { useTagAutocomplete } from '@/lib/useTagAutocomplete'
+import { apiGet } from '@/lib/api'
 import { inputClass } from '@/lib/utils'
 
-import type { FC, ChangeEvent } from 'react'
+import type { FC, ChangeEvent, KeyboardEvent } from 'react'
 
 import type { Tag } from '@/types'
 
@@ -16,39 +19,136 @@ type Props = {
     setValue:      (value: string) => void }
 
 
-const TagInput: FC<Props> = (
+const TagInput: FC<Props> = ({
-    { includeNico: nicoFlg = false,
+    includeNico = false,
-      includeUnused: unusedFlg = false,
+    includeUnused = false,
-      describedBy, invalid, value, setValue },
+    describedBy,
-) => {
+    invalid,
+    value,
+    setValue,
+}) => {
+  const locale = useLocale ()
+  const [activeIndex, setActiveIndex] = useState (-1)
+  const [request, setRequest] = useState ({ query: '' })
+  const [result, setResult] = useState<{
+      locale: string
+      includeNico: boolean
+      request: { query: string }
+      tags: Tag[] }> ({ locale, includeNico, request, tags: [] })
+  const suggestions = (result.locale === locale && result.includeNico === includeNico
+      && result.request === request
+      && request.query === value.trim ().split (' ').at (-1)) ? result.tags : []
+  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
+
+  // TODO: TagSearch からのコピペのため，共通化を考へる．
+  const whenChanged = (ev: ChangeEvent<HTMLInputElement>) => {
+    setValue (ev.target.value)
+    const query = ev.target.value.trim ().split (' ').at (-1) ?? ''
+    setRequest ({ query })
+    setActiveIndex (-1)
+    setSuggestionsVsbl (query !== '')
+  }
+
+  useEffect (() => {
+    if (request.query === '')
+      return
+    const controller = new AbortController ()
+    let active = true
+    void (async () => {
+      try
+      {
+	const tags = await apiGet<Tag[]> ('/tags/autocomplete', {
+	    locale, signal: controller.signal,
+	    params: { q: request.query.replace (/^not:/i, ''), nico: includeNico ? '1' : '0' } })
+	if (active)
+	{
+	  setResult ({ locale, includeNico, request,
+	      tags: includeUnused ? tags : tags.filter (tag => tag.postCount > 0) })
+	}
+      }
+      catch
+      {
+	if (active)
+	  setResult ({ locale, includeNico, request, tags: [] })
+      }
+    }) ()
+    return () => {
+      active = false
+      controller.abort ()
+    }
+  }, [request, locale, includeNico, includeUnused])
+
+  useEffect (() => {
+    setActiveIndex (-1)
+    setSuggestionsVsbl (false)
+    setRequest ({ query: '' })
+  }, [locale, includeNico])
+
+  // TODO: TagSearch からのコピペのため，共通化を考へる．
   const handleTagSelect = (tag: Tag) => {
     const parts = value?.split (' ')
     const negative = /^not:/i.test (parts[parts.length - 1])
     parts[parts.length - 1] = `${negative ? 'not:' : ''}${tag.name}`
     setValue (parts.join (' ') + ' ')
+    setRequest ({ query: '' })
+    setActiveIndex (-1)
   }
 
-  const { inputProps, suggestionProps, requestSuggestions } =
+  // TODO: TagSearch からのコピペのため，共通化を考へる．
-      useTagAutocomplete ({ token: value.trim ().split (' ').at (-1) ?? '',
+  const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
-			    nicoFlg, unusedFlg, onSelect: handleTagSelect })
+    switch (ev.key)
+    {
+    case 'ArrowDown':
+      ev.preventDefault ()
+      setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
+      setSuggestionsVsbl (true)
+      break
 
-  const whenChanged = (event: ChangeEvent<HTMLInputElement>) => {
+    case 'ArrowUp':
-    setValue (event.target.value)
+      ev.preventDefault ()
-    const token = event.target.value.trim ().split (' ').at (-1) ?? ''
+      setActiveIndex (i => Math.max (i - 1, -1))
-    requestSuggestions (token, token.replace (/^not:/i, ''))
+      setSuggestionsVsbl (true)
+      break
+
+    case 'Enter':
+      if (activeIndex < 0)
+	break
+      {
+	ev.preventDefault ()
+	const selected = suggestions[activeIndex]
+	if (selected)
+	  handleTagSelect (selected)
+      }
+      break
+
+    case 'Escape':
+      ev.preventDefault ()
+      setSuggestionsVsbl (false)
+      break
+    }
+    if (ev.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
+      {
+	setSuggestionsVsbl (false)
+      }
   }
 
   return (
       <div className="relative">
 	<input
-	    {...inputProps}
 	    type="text"
 	    aria-describedby={describedBy}
 	    aria-invalid={invalid}
 	    value={value}
 	    onChange={whenChanged}
+	    onFocus={() => setSuggestionsVsbl (true)}
+	    onBlur={() => setSuggestionsVsbl (false)}
+	    onKeyDown={handleKeyDown}
 	    className={inputClass (invalid)}/>
-	<TagSearchBox {...suggestionProps}/>
+	<TagSearchBox
+	    suggestions={
+		suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
+	    activeIndex={activeIndex}
+	    onSelect={handleTagSelect}/>
       </div>)
 }
 

frontend/src/components/counts/CountsAdditionalConditions.tsx

@@ -2,9 +2,10 @@ import { useEffect, useState } from 'react'
 
 import CountsConditionValues from '@/components/counts/CountsConditionValues'
 import DateTimeField from '@/components/common/DateTimeField'
+import ResourcePickerButton from '@/components/common/ResourcePickerButton'
 import { Button } from '@/components/ui/button'
-import { countsConditionInputs, countsEventTypes, countsFieldLabel, countsFilterFields,
+import { countsCandidateSource, countsConditionInputs, countsEventTypes, countsFieldLabel,
-	 countsSetOperators, useCountsDefinition }
+	 countsFilterFields, countsSetOperators, useCountsDefinition }
     from '@/lib/countsDefinitions'
 import useDialogue from '@/lib/dialogues/useDialogue'
 import { countsConditionValue } from '@/lib/countsDisplay'
@@ -15,7 +16,7 @@ import { useUITranslation } from '@/lib/useUITranslation'
 
 import { readCountState, encodeCountState } from '@/lib/queryState'
 
-import type { CountsResult } from '@/lib/counts'
+import type { CountsResource, CountsResult } from '@/lib/counts'
 import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
 import type { CountsCondition, CountsDefinition } from '@/lib/countsDefinitions'
 
@@ -94,10 +95,12 @@ const ConditionEditor = (
 }
 
 
-const CountsAdditionalConditions = ({ params, update, conditionLabels }: {
+const CountsAdditionalConditions = (
-    conditionLabels?: CountsResult['conditionLabels']
+    { resource, params, update, conditionLabels }: {
-    params: URLSearchParams
+	resource: CountsResource
-    update: (key: string, value: string) => void },
+	conditionLabels?: CountsResult['conditionLabels']
+	params: URLSearchParams
+	update: (key: string, value: string) => void },
 ) => {
   const { label, message } = useUITranslation ('counts')
   const definition = useCountsDefinition ()
@@ -149,11 +152,19 @@ const CountsAdditionalConditions = ({ params, update, conditionLabels }: {
 	  value={condition[key] == null ? '' : String (condition[key])} disabled={condition.blank}
 	  aria-label={aria.text} lang={aria.language}
 	  onChange={value => patch (index, { [key]: value ?? '' })}/>
-    return <input value={condition[key] == null ? '' : String (condition[key])} disabled={condition.blank}
+    const source = countsCandidateSource (resource, condition.field, params)
-	type={(type === 'integer' || type === 'interval') ? 'number' : 'text'}
+    const value = condition[key]
-	className={inputClass (false, 'h-10 w-36 min-w-0 max-w-full py-1')}
+    return <>
-	aria-label={aria.text} lang={aria.language}
+      <input value={condition[key] == null ? '' : String (condition[key])}
-	onChange={event => patch (index, { [key]: event.target.value })}/>
+	  disabled={condition.blank}
+	  type={(type === 'integer' || type === 'interval') ? 'number' : 'text'}
+	  className={inputClass (false, 'h-10 w-36 min-w-0 max-w-full py-1')}
+	  aria-label={aria.text} lang={aria.language}
+	  onChange={event => patch (index, { [key]: event.target.value })}/>
+      {source != null && <ResourcePickerButton source={source} disabled={condition.blank}
+	  values={value == null ? [] : [value]}
+	  onSelect={values => patch (index, { [key]: values[0] ?? '' })}/>}
+    </>
   }
   return <fieldset className="min-w-0 space-y-1">
     <legend className="flex items-center gap-2">{label ('additionalConditions')}
@@ -182,7 +193,7 @@ const CountsAdditionalConditions = ({ params, update, conditionLabels }: {
 	  </Button>
 	  {countsSetOperators.includes (condition.operator) ? (
 	      <CountsConditionValues key={`${condition.field}:${condition.operator}`}
-		  condition={condition}
+		  condition={condition} resource={resource}
 		  field={metadata.find (field => field.key === condition.field)!}
 		  definition={definition} params={params}
 		  maximum={Math.max (0, 100 - conditions.reduce ((sum, item, position) =>

frontend/src/components/counts/CountsConditionValues.tsx

@@ -1,18 +1,22 @@
 import { useState } from 'react'
 
-import CountsCandidatePicker from '@/components/counts/CountsCandidatePicker'
+import CandidatePicker from '@/components/common/CandidatePicker'
 import DateTimeField from '@/components/common/DateTimeField'
+import ResourcePickerButton from '@/components/common/ResourcePickerButton'
 import { Button } from '@/components/ui/button'
+import { countsCandidateSource } from '@/lib/countsDefinitions'
 import useDialogue from '@/lib/dialogues/useDialogue'
 import { inputClass } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
 
+import type { CountsResource } from '@/lib/counts'
 import type { CountsCondition, CountsDefinition, CountsFieldMetadata }
     from '@/lib/countsDefinitions'
 
 
 const CountsConditionValues = (
-    { condition, field, definition, params, maximum, change }: {
+    { resource, condition, field, definition, params, maximum, change }: {
+	resource: CountsResource
 	condition: CountsCondition; field: CountsFieldMetadata; definition: CountsDefinition
 	params: URLSearchParams; maximum: number
 	change: (values: (string | number | boolean)[]) => void },
@@ -21,11 +25,21 @@ const CountsConditionValues = (
   const dialogue = useDialogue ()
   const [draft, setDraft] = useState ('')
   const values = condition.values ?? []
+  const source = countsCandidateSource (resource, field.key, params)
   const pick = () => {
     void dialogue.form ({ title: label (field.candidateSource === 'tags'
 	? 'counts:pattern.link' : 'counts:pattern.pattern'), size: 'large', footerLayout: 'inline',
-	body: controls => <CountsCandidatePicker field={field} definition={definition}
+	body: controls => <CandidatePicker
-	    params={params} initial={values} maximum={maximum} controls={controls} save={change}/> })
+	    source={
+		field.candidateSource === 'tags'
+		? { resource: 'posts', field: field.key, params } : undefined}
+	    choices={(field.choices ?? []).map (choice => ({
+		value: choice.value, name: message (choice.label).text }))}
+	    categories={
+		field.candidateSource === 'tags'
+		? definition.filterFields?.find (field =>
+		    field.candidateSource === 'categories')?.choices : undefined}
+	    initial={values} maximum={maximum} controls={controls} onSelect={change}/> })
   }
   if (condition.input === 'list' || field.candidateSource === 'tags')
     return <Button type="button" variant="outline" disabled={condition.blank} onClick={pick}>
@@ -73,6 +87,8 @@ const CountsConditionValues = (
 	  onClick={() => change (values.filter ((_, position) => position !== index))}>×</Button>
     </span>)}
     {input ()}
+    {source != null && <ResourcePickerButton source={source} values={values}
+	maximum={maximum} disabled={condition.blank} onSelect={change}/>}
     <Button type="button" variant="outline" disabled={condition.blank || draft === ''
 	|| values.length >= maximum} onClick={append}>{label ('add')}</Button>
     <Button type="button" variant="ghost" disabled={condition.blank}

frontend/src/components/counts/CountsControls.tsx

@@ -7,6 +7,7 @@ import AnimatedCollapse from '@/components/common/AnimatedCollapse'
 import DateTimeField from '@/components/common/DateTimeField'
 import FormField from '@/components/common/FormField'
 import HelpPopover from '@/components/common/HelpPopover'
+import ResourcePickerButton from '@/components/common/ResourcePickerButton'
 import TagInput from '@/components/common/TagInput'
 import { Button } from '@/components/ui/button'
 import { countsRequestParams, countsUseLatest, fieldsForCounts, normaliseCountsParams, readCountSort,
@@ -223,11 +224,17 @@ const CountsControls = (
             {['resource_id', 'user_id'].map (key => <FormField key={key}
                 label={label (key === 'resource_id' ? 'columns.resourceId'
                     : 'fields.actor')}>
-              {() => <input value={draft.get (key) ?? ''}
+              {() => <div className="flex flex-wrap items-center gap-1">
-                  aria-label={message (key === 'resource_id' ? 'columns.resourceId'
+		<input value={draft.get (key) ?? ''}
-                      : 'fields.actor').text}
+		    aria-label={message (key === 'resource_id' ? 'columns.resourceId'
-                  className={inputClass (false, 'w-28 py-1')}
+			: 'fields.actor').text}
-                  onChange={event => update (key, event.target.value)}/>}
+		    className={inputClass (false, 'w-28 py-1')}
+		    onChange={event => update (key, event.target.value)}/>
+		<ResourcePickerButton source={{ resource,
+		    field: key === 'resource_id' ? key : 'user', params: draft }}
+		    values={draft.get (key) ? [draft.get (key)!] : []}
+		    onSelect={values => update (key, values[0] ?? '')}/>
+	      </div>}
             </FormField>)}
           </div>
           {resource === 'posts' && <FormField label={label ('columns.tags')}>
@@ -263,7 +270,7 @@ const CountsControls = (
               </>}
             </div>}
           </FormField>}
-	  <CountsAdditionalConditions params={draft} update={update}
+	  <CountsAdditionalConditions resource={resource} params={draft} update={update}
               conditionLabels={(labelParams != null
                   && draft.get ('current') === labelParams.get ('current')
                   && draft.get ('at') === labelParams.get ('at')

frontend/src/components/dialogues/DialogueProvider.tsx

@@ -227,11 +227,13 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 		       </DialogHeader>
 
 		       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-			 {active.options.body (
+			 <DialogueProvider key={active.id}>
-			     formControls.current[active.id] ??= {
+			   {active.options.body (
+			       formControls.current[active.id] ??= {
 				 close: () => closeRequest (active.id),
 				 setActions: actions => setRequestActions (active.id, actions),
 				 confirm: options => openNestedConfirm (active.id, options) })}
+			 </DialogueProvider>
 		       </div>
 
 		       <DialogFooter

frontend/src/components/layout/SidebarComponent.test.tsx

@@ -70,6 +70,16 @@ describe ('SidebarComponent', () => {
     vi.spyOn (HTMLElement.prototype, 'hasPointerCapture').mockReturnValue (true)
   })
 
+  it ('limits sidebar scrolling to desktop to avoid clipping mobile suggestions', () => {
+    renderSidebar ()
+
+    // jsdom has no layout; guard the responsive classes responsible for clipping.
+    const sidebar = screen.getByText ('Sidebar body')
+
+    expect (sidebar).not.toHaveClass ('overflow-y-auto')
+    expect (sidebar).toHaveClass ('md:overflow-y-auto')
+  })
+
   it ('uses maxWidth without applying the container main-width reserve twice', async () => {
     localStorage.setItem ('sidebar:test-sidebar:left:width', '700')
     const onWidthChange = vi.fn ()

frontend/src/components/layout/SidebarComponent.tsx

@@ -339,7 +339,7 @@ const SidebarComponent: FC<Props> = ({
 	  </style>
 	</Helmet>
 
-	<div className="h-full overflow-y-auto p-4 sidebar">
+	<div className="h-full md:overflow-y-auto p-4 sidebar">
 	  {children}
 	</div>
 

frontend/src/components/posts/PostCoreDataFields.tsx

@@ -1,3 +1,4 @@
+import ResourcePickerButton from '@/components/common/ResourcePickerButton'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
 import PostTagsField from '@/components/posts/PostTagsField'
 import PostTextField from '@/components/posts/PostTextField'
@@ -88,7 +89,12 @@ const PostCoreDataFields: FC<PostCoreDataFieldsProps> = (
           disabled={parentPostIds.disabled}
           warnings={parentPostIds.warnings}
           errors={parentPostIds.errors}
-          onChange={parentPostIds.onChange}/>
+          onChange={parentPostIds.onChange}
+	  after={<ResourcePickerButton
+	      source={{ resource: 'posts', field: 'resource_id' }}
+	      values={parentPostIds.value.split (/\s+/).filter (Boolean)}
+	      maximum={Number.MAX_SAFE_INTEGER} disabled={parentPostIds.disabled}
+	      onSelect={values => parentPostIds.onChange (values.join (' '))}/>}/>
     </>)
 
 export default PostCoreDataFields

frontend/src/components/posts/PostTextField.tsx

@@ -34,18 +34,22 @@ const PostTextField: FC<Props> = (
     <FormField label={label} messages={errors}>
       {({ describedBy, invalid }) => (
           <>
-            <input
+	    <div className="flex items-center gap-2">
-                type={type}
+	      <div className="min-w-0 flex-1">
-                value={value}
+		<input
-                disabled={disabled}
+		    type={type}
-                placeholder={placeholder}
+		    value={value}
-                onBlur={onBlur}
+		    disabled={disabled}
-                onChange={ev => onChange (ev.target.value)}
+		    placeholder={placeholder}
-                aria-describedby={describedBy}
+		    onBlur={onBlur}
-                aria-invalid={invalid}
+		    onChange={ev => onChange (ev.target.value)}
-                className={inputClass (invalid, className)}/>
+		    aria-describedby={describedBy}
-            <FieldWarning messages={warnings}/>
+		    aria-invalid={invalid}
-            {after}
+		    className={inputClass (invalid, className)}/>
+	      </div>
+	      {after}
+	    </div>
+	    <FieldWarning messages={warnings}/>
           </>)}
     </FormField>)
 

frontend/src/lib/countsDefinitions.ts

@@ -89,18 +89,19 @@ export const fetchCountsDefinition = (
     .then (definition => localiseCountsDefinition (definition, locale))
 
 export type CountsCandidate = {
-    value: string; id?: number; name: string | null; category?: string | null
+    value: string; id?: number | string; name: string | null; category?: string | null
     names?: Record<string, unknown>
-    kind?: 'internal' | 'external' }
+    kind?: 'internal' | 'external' | 'group' }
 export type CountsCandidatesResult = {
     rows: CountsCandidate[]; page: number; more: boolean; executionAt: string }
 
 export const fetchCountsCandidates = (
+    resource: CountsResource,
     params: URLSearchParams,
     locale: LocaleCode,
     signal?: AbortSignal,
 ): Promise<CountsCandidatesResult> => apiGet (
-    '/counts/definitions/posts/candidates', {
+    `/counts/definitions/${encodeURIComponent (resource)}/candidates`, {
 	params: Object.fromEntries (params), locale, signal })
 
 export const countsSetOperators = ['in', 'not_in', 'any', 'all', 'none']
@@ -155,3 +156,25 @@ export const countsAxisFields = (
     history: boolean,
 ): CountField[] => definition.axes[history ? 'history' : 'latest']
     .map (key => ({ key, label: countsFieldLabel (key) }))
+
+
+export const countsCandidateSource = (
+    resource: CountsResource,
+    field: string,
+    params: URLSearchParams,
+): { resource: CountsResource; field: string; params: URLSearchParams } | undefined => {
+  if (['resource_id', 'user', 'updated_by_user_id', 'file_blob_id', 'source_file_id']
+      .includes (field)) return { resource, field, params }
+  if (field === 'user.id') return { resource, field: 'user', params }
+  if ((field === 'tags.id' && resource === 'posts')
+      || (field === 'members' && resource === 'tag_groups'))
+    return { resource, field, params }
+  const leaf = field.split ('.').at (-1) ?? ''
+  const targets: Record<string, CountsResource> = {
+      tagGroupId: 'tag_groups', tagId: 'tags', tag_id: 'tags', parent_id: 'materials',
+      parents: resource === 'posts' ? 'posts' : 'tags',
+      'parents.id': resource === 'posts' ? 'posts' : 'tags',
+      parent_post_ids: 'posts', parent_tag_ids: 'tags' }
+  const target = targets[field] ?? targets[leaf]
+  return target == null ? undefined : { resource: target, field: 'resource_id', params }
+}

frontend/src/lib/queryKeys.ts

@@ -174,6 +174,7 @@ export const theatresKeys = {
 export const countsKeys = {
     definition: (resource: string, locale: LocaleCode = 'ja') =>
 	['counts', 'definition', resource, locale] as const,
-    candidates: (params: string, locale: LocaleCode) => ['counts', 'candidates', locale, params] as const,
+    candidates: (resource: string, params: string, locale: LocaleCode) =>
+	['counts', 'candidates', resource, locale, params] as const,
     index: (resource: string, params: string, locale: LocaleCode) =>
 	['counts', resource, locale, params] as const }

frontend/src/lib/tags.ts

@@ -11,17 +11,6 @@ import type { Deerjikist,
 	      TagVersion } from '@/types'
 
 
-export const fetchTagAutocomplete = async (
-    query: string,
-    nicoFlg: boolean,
-    locale: LocaleCode,
-    signal: AbortSignal,
-): Promise<Tag[]> =>
-    await apiGet ('/tags/autocomplete', {
-	locale, signal,
-	params: { q: query, nico: nicoFlg ? '1' : '0' } })
-
-
 export const fetchTags = async (
     { post, name, category, postCountGTE, postCountLTE, createdFrom, createdTo,
       updatedFrom, updatedTo, deprecated,

frontend/src/lib/useTagAutocomplete.ts

@@ -1,142 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-
-import { fetchTagAutocomplete } from '@/lib/tags'
-import { useLocale } from '@/lib/useLocale'
-
-import type { KeyboardEvent } from 'react'
-
-import type { Tag } from '@/types'
-
-
-export const useTagAutocomplete = (
-    { token, onSelect, nicoFlg = false, unusedFlg = false }: {
-	token: string
-	onSelect: (tag: Tag) => void
-	nicoFlg?: boolean
-	unusedFlg?: boolean },
-) => {
-  const locale = useLocale ()
-  const compositionFlgRef = useRef (false)
-  const [activeIndex, setActiveIndex] = useState (-1)
-  const [visible, setVisible] = useState (false)
-  const [request, setRequest] = useState ({ token: '', query: '' })
-  const [result, setResult] = useState<{
-      locale: string
-      nicoFlg: boolean
-      unusedFlg: boolean
-      request: { token: string; query: string }
-      tags: Tag[] }> ({ locale, nicoFlg, unusedFlg, request, tags: [] })
-  const suggestions = (result.locale === locale && result.nicoFlg === nicoFlg
-      && result.unusedFlg === unusedFlg && result.request === request
-      && request.token === token) ? result.tags : []
-
-  const requestSuggestions = (token: string, query: string = token) => {
-    setRequest ({ token, query })
-    setActiveIndex (-1)
-    setVisible (token.trim () !== '')
-  }
-
-  const clearSuggestions = useCallback (() => {
-    setRequest ({ token: '', query: '' })
-    setActiveIndex (-1)
-    setVisible (false)
-  }, [])
-
-  useEffect (() => {
-    if (request.token.trim () === '')
-      return
-    const controller = new AbortController ()
-    let active = true
-    void (async () => {
-      try
-      {
-	const tags = await fetchTagAutocomplete (
-	    request.query, nicoFlg, locale, controller.signal)
-	if (active)
-	{
-	  setResult ({ locale, nicoFlg, unusedFlg, request,
-	      tags: unusedFlg ? tags : tags.filter (tag => tag.postCount > 0) })
-	}
-      }
-      catch
-      {
-	if (active)
-	  setResult ({ locale, nicoFlg, unusedFlg, request, tags: [] })
-      }
-    }) ()
-    return () => {
-      active = false
-      controller.abort ()
-    }
-  }, [request, locale, nicoFlg, unusedFlg])
-
-  useEffect (() => {
-    clearSuggestions ()
-  }, [locale, nicoFlg, clearSuggestions])
-
-  const handleTagSelect = (tag: Tag) => {
-    clearSuggestions ()
-    onSelect (tag)
-  }
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (compositionFlgRef.current
-	|| event.nativeEvent.isComposing
-	|| event.nativeEvent.keyCode === 229)
-    {
-      if (event.key === 'Enter')
-	event.preventDefault ()
-      return
-    }
-
-    switch (event.key)
-    {
-    case 'ArrowDown':
-      event.preventDefault ()
-      setActiveIndex (index => Math.min (index + 1, suggestions.length - 1))
-      setVisible (true)
-      break
-
-    case 'ArrowUp':
-      event.preventDefault ()
-      setActiveIndex (index => Math.max (index - 1, -1))
-      setVisible (true)
-      break
-
-    case 'Enter':
-      {
-	const selected = visible ? suggestions[activeIndex] : null
-	if (selected == null)
-	{
-	  setVisible (false)
-	  break
-	}
-	event.preventDefault ()
-	handleTagSelect (selected)
-      }
-      break
-
-    case 'Escape':
-      event.preventDefault ()
-      setVisible (false)
-      break
-    }
-  }
-
-  return {
-      requestSuggestions, clearSuggestions, compositionFlgRef,
-      inputProps: {
-	  onFocus: () => setVisible (true),
-	  onBlur: () => setVisible (false),
-	  onKeyDown: handleKeyDown,
-	  onCompositionStart: () => {
-	    compositionFlgRef.current = true
-	  },
-	  onCompositionEnd: () => {
-	    compositionFlgRef.current = false
-	  } },
-      suggestionProps: {
-	  suggestions: visible ? suggestions : [],
-	  activeIndex,
-	  onSelect: handleTagSelect } }
-}

frontend/src/pages/materials/MaterialHistoryPage.tsx

@@ -6,6 +6,7 @@ import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import PrefetchLink from '@/components/PrefetchLink'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
+import ResourcePickerButton from '@/components/common/ResourcePickerButton'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
 import PageHead from '@/components/common/PageHead'
@@ -96,13 +97,19 @@ const MaterialHistoryPage: FC = () => {
 	    <div className="space-y-3">
 	      <FormField label={label ('materialId')}>
 		{({ invalid }) => (
-		    <input
+		    <div className="flex items-center gap-2">
+		      <input
 			type="text"
 			value={materialIdInput}
 			aria-label={message ('materialId').text}
 			lang={message ('materialId').language}
 			onChange={e => setMaterialIdInput (e.target.value)}
-			className={inputClass (invalid)}/>)}
+			className={inputClass (invalid, 'min-w-0 flex-1')}/>
+		      <ResourcePickerButton
+			source={{ resource: 'materials', field: 'resource_id' }}
+			values={materialIdInput === '' ? [] : [materialIdInput]}
+			onSelect={values => setMaterialIdInput (values[0] ?? '')}/>
+		    </div>)}
 	      </FormField>
 
 	      <FormField label={label ('tagName')}>

frontend/src/pages/materials/MaterialSyncSuppressionsPage.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { useLocale } from '@/lib/useLocale'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
+import ResourcePickerButton from '@/components/common/ResourcePickerButton'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
@@ -126,11 +127,17 @@ const MaterialSyncSuppressionsPage: FC = () => {
 
 	      <FormField label={label ('suppressions.driveFileId')}>
 		{({ invalid }) => (
-		    <input
+		    <div className="flex items-center gap-2">
+		      <input
 			type="text"
 			value={driveFileId}
 			onChange={e => setDriveFileId (e.target.value)}
-			className={inputClass (invalid)}/>)}
+			className={inputClass (invalid, 'min-w-0 flex-1')}/>
+		      <ResourcePickerButton
+			source={{ resource: 'materials', field: 'drive_file_id' }}
+			values={driveFileId === '' ? [] : [driveFileId]}
+			onSelect={values => setDriveFileId (values[0] ?? '')}/>
+		    </div>)}
 	      </FormField>
 
 	      <FormField label={label ('suppressions.reason')}>

frontend/src/pages/tags/TagDetailPage.test.tsx

@@ -35,6 +35,10 @@ const renderPage = () =>
 describe ('TagDetailPage', () => {
   beforeEach (() => {
     vi.clearAllMocks ()
+    tagsApi.fetchTag.mockReset ()
+    api.apiPut.mockReset ()
+    api.isApiError.mockReset ()
+    toastApi.toast.mockReset ()
     api.isApiError.mockReturnValue (false)
   })
 
@@ -51,8 +55,11 @@ describe ('TagDetailPage', () => {
   })
 
   it ('submits edited tag fields', async () => {
-    tagsApi.fetchTag.mockResolvedValueOnce (buildTag ({ id: 7, name: 'old' }))
+    const updatedTag = buildTag ({ id: 7, name: 'new', aliases: ['alias'] })
-    api.apiPut.mockResolvedValueOnce (buildTag ({ id: 7, name: 'new', aliases: ['alias'] }))
+    tagsApi.fetchTag
+	.mockResolvedValue (updatedTag)
+	.mockResolvedValueOnce (buildTag ({ id: 7, name: 'old' }))
+    api.apiPut.mockResolvedValueOnce (updatedTag)
 
     renderPage ()