広場投稿追加画面の刷新 (#399) (#413)

Reviewed-on: #413
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/App.tsx

@@ -1,8 +1,9 @@
 import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
 import { Fragment, useEffect, useMemo, useState } from 'react'
-import { BrowserRouter,
+import { createBrowserRouter,
 	 Navigate,
 	 Route,
+	 RouterProvider,
 	 Routes,
 	 useLocation } from 'react-router-dom'
 
@@ -41,8 +42,8 @@ import NotFound from '@/pages/NotFound'
 import TOSPage from '@/pages/TOSPage.mdx'
 import PostDetailPage from '@/pages/posts/PostDetailPage'
 import PostHistoryPage from '@/pages/posts/PostHistoryPage'
-import PostListPage from '@/pages/posts/PostListPage'
 import PostNewPage from '@/pages/posts/PostNewPage'
+import PostListPage from '@/pages/posts/PostListPage'
 import PostSearchPage from '@/pages/posts/PostSearchPage'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
 import SettingPage from '@/pages/users/SettingPage'
@@ -154,7 +155,7 @@ const PostDetailRoute = ({ user }: { user: User | null }) => {
 }
 
 
-const App: FC = () => {
+const RoutedApp: FC = () => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
   const behaviourSettings = useClientBehaviourSettings ()
@@ -253,42 +254,46 @@ const App: FC = () => {
   }
 
   return (
-      <>
-	<RouteBlockerOverlay/>
-	{import.meta.env.DEV && <DevModeWatermark/>}
+      <DialogueProvider>
+	<UnsavedChangesGuardProvider>
+	  <KeyboardShortcutsProvider>
+	  <MotionConfig
+	      reducedMotion={
+		  animationMode === 'normal'
+		  ? 'never'
+		  : animationMode === 'reduced'
+		    ? 'user'
+		    : 'always'
+	      }>
+	    <LayoutWrapper>
+	      <motion.div
+		  layout={animationMode === 'off' ? false : 'position'}
+		  transition={{ layout: appLayoutTransition }}
+		  className="relative flex h-dvh w-full flex-col overflow-y-hidden">
+		<TopNav user={user}/>
+		<RouteTransitionWrapper
+		    animationMode={animationMode}
+		    user={user}
+		    setUser={setUser}/>
+	      </motion.div>
+	    </LayoutWrapper>
+	  </MotionConfig>
 
-	<BrowserRouter>
-	  <DialogueProvider>
-	    <UnsavedChangesGuardProvider>
-	      <KeyboardShortcutsProvider>
-	      <MotionConfig
-		  reducedMotion={
-		      animationMode === 'normal'
-		      ? 'never'
-		      : animationMode === 'reduced'
-			? 'user'
-			: 'always'
-		  }>
-		<LayoutWrapper>
-		  <motion.div
-		      layout={animationMode === 'off' ? false : 'position'}
-		      transition={{ layout: appLayoutTransition }}
-		      className="relative flex flex-col h-dvh w-full overflow-y-hidden">
-		    <TopNav user={user}/>
-		    <RouteTransitionWrapper
-			animationMode={animationMode}
-			user={user}
-			setUser={setUser}/>
-		  </motion.div>
-		</LayoutWrapper>
-	      </MotionConfig>
-
-	      <Toaster/>
-	      </KeyboardShortcutsProvider>
-	    </UnsavedChangesGuardProvider>
-	  </DialogueProvider>
-	</BrowserRouter>
-      </>)
+	  <Toaster/>
+	  </KeyboardShortcutsProvider>
+	</UnsavedChangesGuardProvider>
+      </DialogueProvider>)
 }
 
+const router = createBrowserRouter ([{
+    path: '*',
+    element: <RoutedApp/> }])
+
+const App: FC = () => (
+    <>
+      <RouteBlockerOverlay/>
+      {import.meta.env.DEV && <DevModeWatermark/>}
+      <RouterProvider router={router}/>
+    </>)
+
 export default App

frontend/src/components/PostEditForm.test.tsx

@@ -19,8 +19,8 @@ const toastApi = vi.hoisted (() => ({
 vi.mock ('@/lib/posts', () => postsApi)
 vi.mock ('@/lib/api', () => api)
 vi.mock ('@/components/ui/use-toast', () => toastApi)
-vi.mock ('@/components/dialogues/DialogueProvider', () => ({
-  useDialogue: () => ({
+vi.mock ('@/lib/dialogues/useDialogue', () => ({
+  default: () => ({
     choice: vi.fn (),
   }),
 }))
@@ -78,15 +78,43 @@ describe ('PostEditForm', () => {
 
     render (<PostEditForm post={post} onSave={vi.fn ()}/>)
 
-    expect (screen.getByRole ('spinbutton')).toHaveValue (180.5)
+    expect (screen.getByText ('動画時間').parentElement?.querySelector ('input'))
+	.toHaveValue ('180.5')
 
     const tags = screen.getAllByRole ('textbox')[2]
     fireEvent.change (tags, { target: { value: 'general-tag' } })
-    expect (screen.queryByRole ('spinbutton')).not.toBeInTheDocument ()
+    expect (screen.queryByText ('動画時間')).not.toBeInTheDocument ()
 
     fireEvent.change (tags, {
       target: { value: '動画 general-tag' },
     })
-    expect (screen.getByRole ('spinbutton')).toHaveValue (180.5)
+    expect (screen.getByText ('動画時間').parentElement?.querySelector ('input'))
+	.toHaveValue ('180.5')
   })
+
+  it (
+      'shows deduplicated original-created endpoint errors on the shared datetime field',
+      async () => {
+    const post = buildPost ()
+    api.isApiError.mockReturnValue (true)
+    postsApi.updatePost.mockRejectedValueOnce ({
+      response: {
+        status: 422,
+        data:   {
+          type: 'validation_error',
+          errors: {
+            original_created_at: ['日時を確認してください．'],
+            original_created_from: ['日時を確認してください．'],
+            original_created_before: ['終了を確認してください．'] },
+        },
+      },
+    })
+
+    render (<PostEditForm post={post} onSave={vi.fn ()}/>)
+    fireEvent.submit (screen.getByRole ('button', { name: '更新' }).closest ('form')!)
+
+    expect (await screen.findByText ('日時を確認してください．')).toBeInTheDocument ()
+    expect (screen.getByText ('終了を確認してください．')).toBeInTheDocument ()
+    expect (screen.getAllByText ('日時を確認してください．')).toHaveLength (1)
+      })
 })

frontend/src/components/PostEditForm.tsx

@@ -1,15 +1,16 @@
 import { useEffect, useMemo, useState } from 'react'
 
-import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
 import FieldError from '@/components/common/FieldError'
-import FormField from '@/components/common/FormField'
-import { useDialogue } from '@/components/dialogues/DialogueProvider'
+import PostDurationField from '@/components/posts/PostDurationField'
+import PostTagsField from '@/components/posts/PostTagsField'
+import PostTextField from '@/components/posts/PostTextField'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { isApiError } from '@/lib/api'
+import useDialogue from '@/lib/dialogues/useDialogue'
 import { updatePost } from '@/lib/posts'
-import { inputClass, msToTime } from '@/lib/utils'
+import { msToTime } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC, FormEvent } from 'react'
@@ -17,7 +18,11 @@ import type { FC, FormEvent } from 'react'
 import type { Post, TagWithSections } from '@/types'
 
 type PostFormField =
-    'parentPostIds' | 'tags' | 'videoMs' | 'originalCreatedAt'
+    'parentPostIds' | 'tags' | 'videoMs'
+    | 'originalCreatedAt' | 'originalCreatedFrom' | 'originalCreatedBefore'
+
+const groupedMessages = (...values: (string[] | undefined)[]): string[] =>
+    [...new Set (values.flatMap (value => value ?? []))]
 
 const videoMsToDurationValue = (videoMs: number | null): string =>
     videoMs == null ? '' : String (videoMs / 1_000)
@@ -157,32 +162,20 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
       <form onSubmit={handleSubmit} className="max-w-xl pt-2 space-y-4">
 	<FieldError messages={baseErrors}/>
 
-	{/* タイトル */}
-	<FormField label="タイトル">
-	  {({ invalid }) => (
-	      <input
-		  type="text"
-		  disabled={disabled}
-		  className={inputClass (invalid)}
-		  value={title ?? ''}
-		  onChange={e => setTitle (e.target.value)}/>)}
-	</FormField>
+	<PostTextField
+	    label="タイトル"
+	    value={title ?? ''}
+	    disabled={disabled}
+	    onChange={setTitle}/>
 
-	{/* 親投稿 */}
-	<FormField label="親投稿" messages={fieldErrors.parentPostIds}>
-	  {({ describedBy, invalid }) => (
-	      <input
-		  type="text"
-		  disabled={disabled}
-		  value={parentPostIds}
-		  onChange={e => setParentPostIds (e.target.value)}
-		  aria-describedby={describedBy}
-		  aria-invalid={invalid}
-		  className={inputClass (invalid)}/>)}
-	</FormField>
+	<PostTextField
+	    label="親投稿"
+	    value={parentPostIds}
+	    disabled={disabled}
+	    errors={fieldErrors.parentPostIds}
+	    onChange={setParentPostIds}/>
 
-	{/* タグ */}
-	<PostFormTagsArea
+	<PostTagsField
 	    disabled={disabled}
 	    tags={tags}
 	    setTags={setTags}
@@ -195,21 +188,17 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    setOriginalCreatedFrom={setOriginalCreatedFrom}
 	    originalCreatedBefore={originalCreatedBefore}
 	    setOriginalCreatedBefore={setOriginalCreatedBefore}
-	    errors={fieldErrors.originalCreatedAt}/>
+	    errors={groupedMessages (
+		fieldErrors.originalCreatedAt,
+		fieldErrors.originalCreatedFrom,
+		fieldErrors.originalCreatedBefore)}/>
 
-	{/* 動画時間 */}
 	{videoFlg && (
-	    <FormField label="動画時間" messages={fieldErrors.videoMs}>
-	      {({ invalid }) => (
-		  <input
-		      type="number"
-		      min="0.001"
-		      step="0.001"
-		      disabled={disabled}
-		      className={inputClass (invalid)}
-		      value={duration}
-		      onChange={e => setDuration (e.target.value)}/>)}
-	    </FormField>)}
+	    <PostDurationField
+		value={duration}
+		disabled={disabled}
+		errors={fieldErrors.videoMs}
+		onChange={setDuration}/>)}
 
 	{/* 送信 */}
 	<Button type="submit" disabled={disabled}>

frontend/src/components/PostOriginalCreatedTimeField.test.tsx

@@ -20,8 +20,10 @@ describe ('PostOriginalCreatedTimeField', () => {
     fireEvent.change (inputs[0], { target: { value: '2026-01-02T03:04' } })
     fireEvent.change (inputs[1], { target: { value: '2026-01-03T03:04' } })
 
-    expect (setFrom).toHaveBeenCalledWith (expect.any (String))
-    expect (setBefore).toHaveBeenCalledWith (expect.any (String))
+    expect (setFrom).toHaveBeenCalledWith (expect.stringMatching (
+	/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}Z$/))
+    expect (setBefore).toHaveBeenCalledWith (expect.stringMatching (
+	/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}Z$/))
   })
 
   it ('infers an exclusive before value on blur', () => {
@@ -38,7 +40,43 @@ describe ('PostOriginalCreatedTimeField', () => {
     const input = screen.getAllByDisplayValue ('')[0]
     fireEvent.blur (input, { target: { value: '2026-01-02T03:04' } })
 
-    expect (setBefore).toHaveBeenCalledWith (expect.any (String))
+    const value = setBefore.mock.calls.at (-1)?.[0]
+    expect (value).toMatch (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}Z$/)
+    expect (new Date (value).getTime () - new Date ('2026-01-02T03:04').getTime ())
+	.toBe (60_000)
+  })
+
+  it ('does not rewrite mounted values that only differ by offset notation', () => {
+    const setFrom = vi.fn ()
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom="2024-01-01T12:34+09:00"
+            setOriginalCreatedFrom={setFrom}
+            originalCreatedBefore="2024-01-01T12:35+09:00"
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    expect (setFrom).not.toHaveBeenCalled ()
+    expect (setBefore).not.toHaveBeenCalled ()
+  })
+
+  it ('emits minute-precision UTC values only when the user edits the input', () => {
+    const setFrom = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom="2024-01-01T12:34+09:00"
+            setOriginalCreatedFrom={setFrom}
+            originalCreatedBefore={null}
+            setOriginalCreatedBefore={vi.fn ()}/>,
+    )
+
+    const input = screen.getByDisplayValue ('2024-01-01T12:34')
+    fireEvent.change (input, { target: { value: '2024-01-01T12:35' } })
+
+    expect (setFrom).toHaveBeenCalledWith ('2024-01-01T03:35Z')
   })
 
   it ('resets both values', () => {

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -1,4 +1,4 @@
-import DateTimeField from '@/components/common/DateTimeField'
+import DateTimeField, { toMinutePrecisionIsoUtc } from '@/components/common/DateTimeField'
 import FormField from '@/components/common/FormField'
 import { Button } from '@/components/ui/button'
 
@@ -19,70 +19,74 @@ const PostOriginalCreatedTimeField: FC<Props> = (
       setOriginalCreatedFrom,
       originalCreatedBefore,
       setOriginalCreatedBefore,
-      errors }: Props) => (
-    <FormField label="オリジナルの作成日時" messages={errors}>
-      {({ describedBy, invalid }) => (
-	  <>
-	    <div className="my-1 flex">
-	      <div className="w-80">
-		<DateTimeField
-		    className="mr-2"
-		    disabled={disabled ?? false}
-		    aria-describedby={describedBy}
-		    aria-invalid={invalid}
-		    invalid={invalid}
-		    value={originalCreatedFrom ?? undefined}
-		    onChange={setOriginalCreatedFrom}
-		    onBlur={ev => {
-		      const v = ev.target.value
-		      if (!(v))
-			return
+      errors }: Props) => {
+  return (
+      <FormField label="オリジナルの作成日時" messages={errors}>
+	  {({ describedBy, invalid }) => (
+	      <>
+		<div className="my-1 flex">
+		  <div className="w-80">
+		    <DateTimeField
+			className="mr-2"
+			disabled={disabled ?? false}
+			aria-describedby={describedBy}
+			aria-invalid={invalid}
+			invalid={invalid}
+			value={originalCreatedFrom ?? undefined}
+			onChange={setOriginalCreatedFrom}
+			onBlur={ev => {
+			  const v = ev.target.value
+			  if (!(v))
+			    return
 
-		      const d = new Date (v)
-		      if (d.getMinutes () === 0 && d.getHours () === 0)
-			d.setDate (d.getDate () + 1)
-		      else
-			d.setMinutes (d.getMinutes () + 1)
-		      setOriginalCreatedBefore (d.toISOString ())
-		    }}/>
-		以降
-	      </div>
-	      <div>
-		<Button
-		    className="bg-gray-600 text-white rounded"
-		    disabled={disabled}
-		    onClick={() => {
-		      setOriginalCreatedFrom (null)
-		    }}>
-		  リセット
-		</Button>
-	      </div>
-	    </div>
+			  const d = new Date (v)
+			  if (d.getMinutes () === 0 && d.getHours () === 0)
+			    d.setDate (d.getDate () + 1)
+			  else
+			    d.setMinutes (d.getMinutes () + 1)
+			  setOriginalCreatedBefore (toMinutePrecisionIsoUtc (d.toISOString ()))
+			}}/>
+		    以降
+		  </div>
+		  <div>
+		    <Button
+			type="button"
+			className="bg-gray-600 text-white rounded"
+			disabled={disabled}
+			onClick={() => {
+			  setOriginalCreatedFrom (null)
+			}}>
+		      リセット
+		    </Button>
+		  </div>
+		</div>
 
-	    <div className="my-1 flex">
-	      <div className="w-80">
-		<DateTimeField
-		    className="mr-2"
-		    disabled={disabled}
-		    aria-describedby={describedBy}
-		    aria-invalid={invalid}
-		    invalid={invalid}
-		    value={originalCreatedBefore ?? undefined}
-		    onChange={setOriginalCreatedBefore}/>
-		より前
-	      </div>
-	      <div>
-		<Button
-		    className="bg-gray-600 text-white rounded"
-		    disabled={disabled}
-		    onClick={() => {
-		      setOriginalCreatedBefore (null)
-		    }}>
-		  リセット
-		</Button>
-	      </div>
-	    </div>
-	  </>)}
-    </FormField>)
+		<div className="my-1 flex">
+		  <div className="w-80">
+		    <DateTimeField
+			className="mr-2"
+			disabled={disabled}
+			aria-describedby={describedBy}
+			aria-invalid={invalid}
+			invalid={invalid}
+			value={originalCreatedBefore ?? undefined}
+			onChange={setOriginalCreatedBefore}/>
+		    より前
+		  </div>
+		  <div>
+		    <Button
+			type="button"
+			className="bg-gray-600 text-white rounded"
+			disabled={disabled}
+			onClick={() => {
+			  setOriginalCreatedBefore (null)
+			}}>
+		      リセット
+		    </Button>
+		  </div>
+		</div>
+	      </>)}
+      </FormField>)
+}
 
 export default PostOriginalCreatedTimeField

frontend/src/components/PrefetchLink.tsx

@@ -6,7 +6,6 @@ import { createPath, useNavigate } from 'react-router-dom'
 import { useOverlayStore } from '@/components/RouteBlockerOverlay'
 import { prefetchForURL } from '@/lib/prefetchers'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
-import { useUnsavedChangesGuard } from '@/lib/useUnsavedChangesGuard'
 import { cn } from '@/lib/utils'
 
 import type { AnchorHTMLAttributes, MouseEvent, TouchEvent } from 'react'
@@ -36,7 +35,6 @@ export default forwardRef<HTMLAnchorElement, Props> (({
   const navigate = useNavigate ()
   const qc = useQueryClient ()
   const behaviourSettings = useClientBehaviourSettings ()
-  const { confirmDiscardNavigation } = useUnsavedChangesGuard ()
   const linkPreloadMode = behaviourSettings.linkPreload ?? 'intent'
   const path = useMemo (
       () => typeof to === 'string' ? to : createPath (to),
@@ -45,10 +43,6 @@ export default forwardRef<HTMLAnchorElement, Props> (({
   const url = useMemo (() => {
     return (new URL (path, window.location.origin)).toString ()
   }, [path])
-  const nextPathname = useMemo (
-      () => (new URL (path, window.location.origin)).pathname,
-      [path],
-  )
   const setOverlay = useOverlayStore (s => s.setActive)
 
   const doPrefetch = async () => {
@@ -93,13 +87,6 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 
       ev.preventDefault ()
 
-      if (nextPathname !== window.location.pathname)
-	{
-	  const confirmed = await confirmDiscardNavigation ()
-	  if (!(confirmed))
-	    return
-	}
-
       flushSync (() => {
 	setOverlay (true)
       })

frontend/src/components/TagLink.tsx

@@ -4,9 +4,13 @@ import { cn } from '@/lib/utils'
 
 import type { ComponentProps, CSSProperties, FC, HTMLAttributes } from 'react'
 
-import type { Tag } from '@/types'
+import type { Category, Tag } from '@/types'
 
-type CommonProps = { 
+type LightweightTag = {
+    name:     string
+    category: Category }
+
+type FullCommonProps = {
     tag:        Tag
     nestLevel?: number
     truncateOnMobile?: boolean
@@ -14,18 +18,43 @@ type CommonProps = {
     withCount?: boolean }
 
 type PropsWithLink =
-    & CommonProps
+    & FullCommonProps
     & { linkFlg?: true }
     & Partial<ComponentProps<typeof PrefetchLink>>
 
 type PropsWithoutLink =
-    & CommonProps
+    & FullCommonProps
     & { linkFlg: false }
     & Partial<HTMLAttributes<HTMLSpanElement>>
 
+type LightweightPropsWithLink =
+    & {
+	tag:              LightweightTag
+	nestLevel?:       number
+	truncateOnMobile?: boolean
+	withWiki:         false
+	withCount:        false
+	linkFlg?:         true }
+    & Partial<ComponentProps<typeof PrefetchLink>>
+
+type LightweightPropsWithoutLink =
+    & {
+	tag:              LightweightTag
+	nestLevel?:       number
+	truncateOnMobile?: boolean
+	withWiki:         false
+	withCount:        false
+	linkFlg:          false }
+    & Partial<HTMLAttributes<HTMLSpanElement>>
+
 type Props =
     | PropsWithLink
     | PropsWithoutLink
+    | LightweightPropsWithLink
+    | LightweightPropsWithoutLink
+
+const isFullTag = (tag: Tag | LightweightTag): tag is Tag =>
+    'id' in tag
 
 
 const TagLink: FC<Props> = ({ tag,
@@ -46,16 +75,18 @@ const TagLink: FC<Props> = ({ tag,
   const spanClass = 'tag-link-colour'
   const linkClass = 'tag-link-colour tag-link-hover-colour'
   const textClass = 'group min-w-0 max-w-full overflow-hidden align-bottom'
-  const rootClass =
-      'inline-flex min-w-0 max-w-full flex-nowrap items-stretch align-baseline gap-x-1 md:items-baseline'
   const markerWrapClass = 'shrink-0 self-start md:self-auto'
   const countClass = 'shrink-0 self-end md:self-auto'
+  const matchedAlias = isFullTag (tag) ? tag.matchedAlias : null
   const textTitle = title
-      ?? (tag.matchedAlias == null ? tag.name : `${ tag.matchedAlias } → ${ tag.name }`)
+      ?? (matchedAlias == null ? tag.name : `${ matchedAlias } → ${ tag.name }`)
 
   return (
-      <span className={rootClass}>
-	{(linkFlg && withWiki) && (
+      <span
+	  className={cn (
+	      'inline-flex min-w-0 max-w-full flex-nowrap items-stretch align-baseline',
+	      'gap-x-1 md:items-baseline')}>
+	{(linkFlg && withWiki && isFullTag (tag)) && (
 	    <span className={markerWrapClass}>
 	      {(tag.materialId != null || tag.hasWiki || tag.hasDeerjikists)
 	       ? (
@@ -118,7 +149,7 @@ const TagLink: FC<Props> = ({ tag,
 		style={{ paddingLeft: `${ (nestLevel - 1) }rem` }}>
 	      ↳
 	    </span>)}
-	{tag.matchedAlias != null && (
+	{matchedAlias != null && (
 	    <>
 	      <span
 		  title={textTitle}
@@ -126,7 +157,7 @@ const TagLink: FC<Props> = ({ tag,
 		  style={colourStyle}
 		  {...props}>
 		<ResponsiveMarqueeText
-		    text={tag.matchedAlias}
+		    text={matchedAlias}
 		    title={textTitle}
 		    truncateOnMobile={truncateOnMobile}/>
 	      </span>
@@ -156,7 +187,7 @@ const TagLink: FC<Props> = ({ tag,
 		  title={textTitle}
 		  truncateOnMobile={truncateOnMobile}/>
 	    </span>)}
-	{withCount && (
+	{(withCount && isFullTag (tag)) && (
 	    <span className={countClass}>{tag.postCount}</span>)}
       </span>)
 }

frontend/src/components/TopNav.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+
+import { menuOutline } from '@/components/TopNav'
+import { buildUser } from '@/test/factories'
+
+const submenuItem = (role: 'guest' | 'member' | 'admin', section: string, item: string) => {
+  const menu = menuOutline ({
+    user: buildUser ({ role }),
+    wikiId: section === 'Wiki' ? 10 : null,
+    pathName: section === 'Wiki' ? '/wiki/page' : '/posts' })
+  return menu.find (entry => entry.name === section)?.subMenu.find (
+      subMenuItem => subMenuItem.name === item)
+}
+
+describe ('menuOutline', () => {
+  it ('uses content-edit permission for post, material, and Wiki actions', () => {
+    for (const role of ['member', 'admin'] as const)
+      {
+	expect (submenuItem (role, '広場', '追加')?.visible).toBe (true)
+	expect (submenuItem (role, '素材', '追加')?.visible).toBe (true)
+	expect (submenuItem (role, 'Wiki', '新規')?.visible).toBe (true)
+	expect (submenuItem (role, 'Wiki', '編輯')?.visible).toBe (true)
+      }
+
+    expect (submenuItem ('guest', '広場', '追加')?.visible).toBe (false)
+    expect (submenuItem ('guest', '素材', '追加')?.visible).toBe (false)
+    expect (submenuItem ('guest', 'Wiki', '新規')?.visible).toBe (false)
+    expect (submenuItem ('guest', 'Wiki', '編輯')?.visible).toBe (false)
+  })
+
+  it ('uses /posts/new as the post creation entrypoint', () => {
+    expect (submenuItem ('member', '広場', '追加')?.to).toBe ('/posts/new')
+  })
+
+  it ('keeps material suppression admin-only', () => {
+    expect (submenuItem ('member', '素材', '抑止')?.visible).toBe (false)
+    expect (submenuItem ('admin', '素材', '抑止')?.visible).toBe (true)
+  })
+})

frontend/src/components/TopNav.tsx

@@ -9,6 +9,7 @@ import TopNavUser from '@/components/TopNavUser'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { materialsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
+import { canEditContent } from '@/lib/users'
 import { fetchTag, fetchTagByName } from '@/lib/tags'
 import { fetchMaterial } from '@/lib/materials'
 import { cn } from '@/lib/utils'
@@ -26,10 +27,11 @@ export const menuOutline = (
 	tag?: Tag | null
 	material?: Material | null
 	wikiId: number | null
-	user: User | null,
+	user: User | null
 	pathName: string },
 ): Menu => {
   const postCount = tag?.postCount ?? material?.tag?.postCount ?? 0
+  const editable = canEditContent (user)
 
   const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^/]+/.test (pathName) && wikiId)
   const wikiTitle = pathName.split ('/')[2] ?? ''
@@ -42,7 +44,7 @@ export const menuOutline = (
       { name: '広場', to: '/posts', subMenu: [
 	  { name: '一覧', to: '/posts' },
 	  { name: '検索', to: '/posts/search' },
-	  { name: '追加', to: '/posts/new' },
+	  { name: '追加', to: '/posts/new', visible: editable },
 	  { name: '全体履歴', to: '/posts/changes' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
       { name: 'タグ', to: '/tags', subMenu: [
@@ -58,8 +60,9 @@ export const menuOutline = (
 	    visible: tagFlg && tag?.category !== 'nico' }] },
       { name: '素材', to: '/materials', visible: true, subMenu: [
 	  { name: '一覧', to: '/materials' },
-	  { name: '追加', to: '/materials/new' },
-	  { name: '抑止', to: '/materials/suppressions' },
+	  { name: '追加', to: '/materials/new', visible: editable },
+	  { name: '抑止', to: '/materials/suppressions',
+	    visible: user?.role === 'admin' },
 	  { name: '全体履歴', to: '/materials/changes' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:素材管理' },
 	  { component: <Separator/>, visible: materialFlg },
@@ -70,14 +73,15 @@ export const menuOutline = (
 	    visible: materialFlg }] },
       { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
 	  { name: '検索', to: '/wiki' },
-	  { name: '新規', to: '/wiki/new' },
+	  { name: '新規', to: '/wiki/new', visible: editable },
 	  { name: '全体履歴', to: '/wiki/changes' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:Wiki' },
 	  { component: <Separator/>, visible: wikiPageFlg },
 	  { name: `広場 (${ postCount || 0 })`, to: `/posts?tags=${ wikiTitle }`,
 	    visible: wikiPageFlg },
 	  { name: '履歴', to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
-	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`, visible: wikiPageFlg }] },
+	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`,
+	    visible: wikiPageFlg && editable }] },
       { name: 'おたのしみ', visible: false, subMenu: [
 	  { name: '上映会 (β)', to: '/theatres/1' },
 	  { name: 'グカネータ (β)', to: '/gekanator' }] },

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

@@ -21,7 +21,8 @@ describe ('DateTimeField', () => {
     fireEvent.change (input, { target: { value: '' } })
 
     const first = handleChange.mock.calls[0]?.[0]
-    expect (new Date (first).getFullYear ()).toBe (2026)
+    expect (first).toMatch (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}Z$/)
+    expect (new Date (first).getUTCSeconds ()).toBe (0)
     expect (handleChange).toHaveBeenLastCalledWith (null)
   })
 })

frontend/src/components/common/DateTimeField.tsx

@@ -8,13 +8,27 @@ import type { ComponentPropsWithoutRef, FC, FocusEvent } from 'react'
 const pad = (n: number): string => n.toString ().padStart (2, '0')
 
 
-const toDateTimeLocalValue = (d: Date) => {
-  const y = d.getFullYear ()
-  const m = pad (d.getMonth () + 1)
-  const day = pad (d.getDate ())
-  const h = pad (d.getHours ())
-  const min = pad (d.getMinutes ())
-  return `${ y }-${ m }-${ day }T${ h }:${ min }:00`
+const toDateTimeLocalValue = (value: Date) => {
+  const y = value.getFullYear ()
+  const m = pad (value.getMonth () + 1)
+  const day = pad (value.getDate ())
+  const h = pad (value.getHours ())
+  const min = pad (value.getMinutes ())
+  return `${ y }-${ m }-${ day }T${ h }:${ min }`
+}
+
+
+const toMinutePrecisionIsoUtc = (value: string) => {
+  const date = new Date (value)
+  if (Number.isNaN (date.getTime ()))
+    return value
+
+  const y = date.getUTCFullYear ()
+  const m = pad (date.getUTCMonth () + 1)
+  const day = pad (date.getUTCDate ())
+  const h = pad (date.getUTCHours ())
+  const min = pad (date.getUTCMinutes ())
+  return `${ y }-${ m }-${ day }T${ h }:${ min }Z`
 }
 
 
@@ -47,14 +61,16 @@ const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, invalid,
 			     'focus:ring-2 focus:ring-blue-200']),
 			 className)}
 	  type="datetime-local"
+	  step={60}
 	  value={local}
 	  aria-invalid={invalid}
 	  onChange={ev => {
 	    const v = ev.target.value
 	    setLocal (v)
-	    onChange?.(v ? (new Date (v)).toISOString () : null)
+	    onChange?.(v ? toMinutePrecisionIsoUtc (v) : null)
 	  }}
 	  onBlur={onBlur}/>)
 }
 
 export default DateTimeField
+export { toMinutePrecisionIsoUtc }

frontend/src/components/common/FieldWarning.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react'
+
+type Props = { id?:        string
+	       messages?:  string[] }
+
+
+export const FieldWarning: FC<Props> = ({ id, messages }: Props) => {
+  if (messages == null || messages.length === 0)
+    return null
+
+  return (
+      <ul id={id} className="mt-1 space-y-1 text-amber-700 dark:text-amber-200">
+	{messages.map ((message, i) => <li key={i}>{message}</li>)}
+      </ul>)
+}
+
+
+export default FieldWarning

frontend/src/components/common/Form.tsx

@@ -1,11 +1,15 @@
+import { cn } from '@/lib/utils'
+
 import type { FC, ReactNode } from 'react'
 
-type Props = { children: ReactNode }
+type Props = {
+    children:   ReactNode
+    className?: string }
 
 
-const Form: FC<Props> = ({ children }) => (
-    <div className="max-w-xl mx-auto p-4 space-y-4">
+const Form: FC<Props> = ({ children, className }) => (
+    <div className={cn ('mx-auto max-w-xl space-y-4 p-4', className)}>
       {children}
     </div>)
 
-export default Form
+export default Form

frontend/src/components/common/StatusBadge.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils'
+
+import type { FC, ReactNode } from 'react'
+
+export type StatusBadgeTone =
+    'success'
+    | 'neutral'
+    | 'warning'
+
+type Props = {
+    children: ReactNode
+    tone:     StatusBadgeTone }
+
+const TONES: Record<StatusBadgeTone, string[]> = {
+    success: [
+	'border-emerald-300 bg-emerald-50 text-emerald-700',
+	'dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200'],
+    warning: [
+	'border-amber-300 bg-amber-50 text-amber-700',
+	'dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200'],
+    neutral: [
+	'border-stone-300 bg-stone-50 text-stone-700',
+	'dark:border-stone-700 dark:bg-stone-900 dark:text-stone-200'] }
+
+
+const StatusBadge: FC<Props> = ({ children, tone }) => (
+    <span
+	className={cn (
+	    'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium',
+	    TONES[tone])}>
+      {children}
+    </span>)
+
+export default StatusBadge

frontend/src/components/dialogues/DialogueProvider.test.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useEffect } from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import DialogueProvider from '@/components/dialogues/DialogueProvider'
+import useDialogue from '@/lib/dialogues/useDialogue'
+
+import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
+
+const FormBody = (
+    { controls,
+      onSelect }: { controls: DialogueFormControls
+		    onSelect: () => Promise<boolean> | boolean },
+) => {
+  useEffect (() => {
+    controls.setActions ([{
+      label: '左操作',
+      placement: 'start',
+      onSelect }, {
+      label: '保存',
+      onSelect: () => true }])
+  }, [controls, onSelect])
+
+  return <div>長いフォーム本文</div>
+}
+
+const NestedConfirmFormBody = ({ controls }: { controls: DialogueFormControls }) => {
+  const reset = useCallback (async () => {
+    await controls.confirm ({
+      title: '変更をリセットしますか?',
+      confirmText: 'リセット' })
+    return false
+  }, [controls])
+
+  return <FormBody controls={controls} onSelect={reset}/>
+}
+
+describe ('DialogueProvider', () => {
+  it ('keeps ordinary dialogues in FIFO order', async () => {
+    const Launcher = () => {
+      const dialogue = useDialogue ()
+      return (
+	  <button
+	      onClick={() => {
+		void dialogue.confirm ({ title: '一件目' })
+		void dialogue.confirm ({ title: '二件目' })
+	      }}>
+	    開く
+	  </button>)
+    }
+
+    render (<DialogueProvider><Launcher/></DialogueProvider>)
+    fireEvent.click (screen.getByRole ('button', { name: '開く' }))
+
+    expect (screen.getByText ('一件目')).toBeInTheDocument ()
+    expect (screen.queryByText ('二件目')).not.toBeInTheDocument ()
+    fireEvent.click (screen.getByRole ('button', { name: '確定' }))
+    expect (await screen.findByText ('二件目')).toBeInTheDocument ()
+  })
+
+  it ('keeps a large form open when an action returns false', async () => {
+    const action = vi.fn ().mockResolvedValue (false)
+    const Launcher = () => {
+      const dialogue = useDialogue ()
+      return (
+	  <button
+	      onClick={() => void dialogue.form ({
+		title: '投稿を編輯',
+		description: '説明',
+		size: 'large',
+		body: controls => <FormBody controls={controls} onSelect={action}/> })}>
+	    開く
+	  </button>)
+    }
+
+    render (<DialogueProvider><Launcher/></DialogueProvider>)
+    fireEvent.click (screen.getByRole ('button', { name: '開く' }))
+
+    const dialogue = screen.getByRole ('dialog')
+    expect (dialogue).toHaveClass ('max-h-[calc(100dvh-1rem)]', 'flex-col', 'max-w-3xl')
+    await waitFor (() => expect (screen.getByRole ('button', { name: '左操作' }))
+	.toBeInTheDocument ())
+    expect (screen.getByRole ('button', { name: '左操作' })).toHaveClass (
+	'w-full',
+	'md:w-auto')
+    fireEvent.click (screen.getByRole ('button', { name: '左操作' }))
+
+    await waitFor (() => expect (action).toHaveBeenCalledTimes (1))
+    expect (screen.getByText ('投稿を編輯')).toBeInTheDocument ()
+  })
+
+  it ('opens a nested confirmation over a form and returns to the same form', async () => {
+    const Launcher = () => {
+      const dialogue = useDialogue ()
+      return (
+	  <button
+	      onClick={() => void dialogue.form ({
+		title: '投稿を編輯',
+		body: controls => <NestedConfirmFormBody controls={controls}/> })}>
+	    開く
+	  </button>)
+    }
+
+    render (<DialogueProvider><Launcher/></DialogueProvider>)
+    fireEvent.click (screen.getByRole ('button', { name: '開く' }))
+    const action = await screen.findByRole ('button', { name: '左操作' })
+    fireEvent.click (action)
+
+    expect (await screen.findByText ('変更をリセットしますか?')).toBeInTheDocument ()
+    fireEvent.click (screen.getByRole ('button', { name: 'リセット' }))
+    await waitFor (() => {
+      expect (screen.queryByText ('変更をリセットしますか?')).not.toBeInTheDocument ()
+    })
+    expect (screen.getByText ('投稿を編輯')).toBeInTheDocument ()
+  })
+})

frontend/src/components/dialogues/DialogueProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Dialog,
@@ -7,29 +7,16 @@ import { Dialog,
 	 DialogFooter,
 	 DialogHeader,
 	 DialogTitle } from '@/components/ui/dialog'
+import { DialogueContext } from '@/lib/dialogues/useDialogue'
 
 import type { FC, ReactNode } from 'react'
-
-type DialogueVariant = 'default' | 'danger'
-
-type ConfirmOptions = { title:        string
-			description?: ReactNode
-			confirmText?: string
-			cancelText?:  string
-			variant?:     DialogueVariant }
-
-type AlertOptions = { title:        string
-		      description?: ReactNode
-		      okText?:      string }
-
-type Choice<T extends string> = { value:    T
-				  label:    string
-				  variant?: DialogueVariant }
-
-type ChoiceOptions<T extends string> = { title:         string
-					 description?:  ReactNode
-					 choices:       Choice<T>[]
-					 cancelText?:   string }
+import type { AlertOptions,
+	      ChoiceOptions,
+	      ConfirmOptions,
+	      DialogueAPI,
+	      DialogueFormAction,
+	      DialogueFormControls,
+	      DialogueFormOptions } from '@/lib/dialogues/useDialogue'
 
 type DialogueRequest =
     | { id:       number
@@ -44,13 +31,10 @@ type DialogueRequest =
 	kind:     'choice'
 	options:  ChoiceOptions<string>
 	resolve:  (value: string | null) => void }
-
-type DialogueAPI =
-    { confirm:  (options: ConfirmOptions) => Promise<boolean>
-      alert:    (options: AlertOptions) => Promise<void>
-      choice:   <T extends string> (options: ChoiceOptions<T>) => Promise<T | null> }
-
-const DialogueContext = createContext<DialogueAPI | null> (null)
+    | { id:       number
+	kind:     'form'
+	options:  DialogueFormOptions
+	resolve:  () => void }
 
 let nextDialogueId = 1
 
@@ -59,20 +43,27 @@ type Props = { children: ReactNode }
 
 const DialogueProvider: FC<Props> = ({ children }) => {
   const [queue, setQueue] = useState<DialogueRequest[]> ([])
+  const [pendingIds, setPendingIds] = useState<number[]> ([])
+  const [formActions, setFormActions] = useState<Record<number, DialogueFormAction[]>> ({ })
+  const formControls = useRef<Record<number, DialogueFormControls>> ({ })
+  const [nestedConfirm, setNestedConfirm] = useState<{
+      parentId: number
+      options:  ConfirmOptions
+      resolve:  (value: boolean) => void } | null> (null)
 
   const push = useCallback ((request: Omit<DialogueRequest, 'id'>) => {
     const id = nextDialogueId
     ++nextDialogueId
 
-    setQueue (q => [...q, { ...request, id } as DialogueRequest])
+    setQueue (current => [...current, { ...request, id } as DialogueRequest])
   }, [])
 
-  const closeActive = useCallback ((result?: unknown) => {
-    setQueue (q => {
-      const [active, ...rest] = q
+  const closeRequest = useCallback ((id: number, result?: unknown) => {
+    setQueue (current => {
+      const active = current.find (request => request.id === id)
 
-      if (!(active))
-	return rest
+      if (active == null)
+	return current
 
       switch (active.kind)
       {
@@ -87,9 +78,42 @@ const DialogueProvider: FC<Props> = ({ children }) => {
       case 'choice':
 	active.resolve ((result ?? null) as string | null)
 	break
+
+      case 'form':
+	active.resolve ()
+	break
       }
 
-      return rest
+      return current.filter (request => request.id !== id)
+    })
+    setPendingIds (current => current.filter (pendingId => pendingId !== id))
+    setFormActions (current => {
+	const { [id]: _, ...rest } = current
+	return rest
+    })
+    delete formControls.current[id]
+  }, [])
+
+  const setRequestActions = useCallback (
+      (id: number, actions: DialogueFormAction[]) => {
+	setFormActions (current => ({ ...current, [id]: actions }))
+      },
+      [])
+
+  const openNestedConfirm = useCallback (
+      (parentId: number, options: ConfirmOptions) =>
+	  new Promise<boolean> (resolve => {
+	    setNestedConfirm ({ parentId, options, resolve })
+	  }),
+      [])
+
+  const closeNestedConfirm = useCallback ((result: boolean) => {
+    setNestedConfirm (current => {
+      if (current == null)
+	return current
+
+      current.resolve (result)
+      return null
     })
   }, [])
 
@@ -103,86 +127,229 @@ const DialogueProvider: FC<Props> = ({ children }) => {
       choice: options => new Promise (resolve => {
 	push ({ kind: 'choice',
 		options: options as ChoiceOptions<string>,
-		resolve: resolve as (value: string | null) => void })}) }), [push])
+		resolve: resolve as (value: string | null) => void })
+      }),
+      form: options => new Promise<void> (resolve => {
+	push ({ kind: 'form', options, resolve })
+      }) }), [push])
+
+  const handleFormAction = useCallback (
+      async (id: number, action: DialogueFormAction) => {
+	if (pendingIds.includes (id))
+	  return
+
+	setPendingIds (current => [...current, id])
+	try
+	{
+	  const shouldClose = await action.onSelect ()
+	  if (shouldClose !== false)
+	    closeRequest (id)
+	}
+	finally
+	{
+	  setPendingIds (current => current.filter (pendingId => pendingId !== id))
+	}
+      },
+      [closeRequest, pendingIds])
 
   const active = queue[0]
+  const startActions =
+      active?.kind === 'form'
+      ? (formActions[active.id] ?? []).filter (action => action.placement === 'start')
+      : []
+  const endActions =
+      active?.kind === 'form'
+      ? (formActions[active.id] ?? []).filter (action =>
+	  action.placement == null || action.placement === 'end')
+      : []
 
   return (
       <DialogueContext.Provider value={api}>
 	{children}
 
-	<Dialog
-	    open={Boolean (active)}
-	    onOpenChange={open => {
-	      if (!(open))
-		closeActive (active?.kind !== 'confirm' && null)
-	    }}>
-	  {active && (
+	{active && (
+	    <Dialog
+		open
+		onOpenChange={open => {
+		  const blocked =
+		      nestedConfirm?.parentId === active.id
+		      || pendingIds.includes (active.id)
+		  if (!(open) && !(blocked))
+		    closeRequest (active.id, active.kind !== 'confirm' && null)
+		}}>
+	      <DialogContent
+		  className={
+		      active.kind === 'form'
+		      ? `flex max-h-[calc(100dvh-1rem)] ${ active.options.size === 'large'
+			  ? 'max-w-3xl'
+			  : 'max-w-lg' } flex-col overflow-hidden gap-0`
+		      : 'px-6 pb-6 pt-7'
+		  }
+		  onEscapeKeyDown={event => {
+		    if (nestedConfirm?.parentId === active.id || pendingIds.includes (active.id))
+		      event.preventDefault ()
+		  }}
+		  onPointerDownOutside={event => {
+		    if (nestedConfirm?.parentId === active.id || pendingIds.includes (active.id))
+		      event.preventDefault ()
+		  }}>
+		{active.kind === 'form'
+		 ? (
+		     <>
+		       <DialogHeader className="shrink-0 pb-4 pl-8 pr-0 pt-1 text-left">
+			 <DialogTitle>{active.options.title}</DialogTitle>
+
+			 {active.options.description && (
+			     <DialogDescription asChild>
+			       <div>{active.options.description}</div>
+			     </DialogDescription>)}
+		       </DialogHeader>
+
+		       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+			 {active.options.body (
+			     formControls.current[active.id] ??= {
+				 close: () => closeRequest (active.id),
+				 setActions: actions => setRequestActions (active.id, actions),
+				 confirm: options => openNestedConfirm (active.id, options) })}
+		       </div>
+
+		       <DialogFooter
+			   className="shrink-0 flex-col gap-2 pt-4
+				      md:flex-row md:justify-between md:gap-0 md:space-x-0">
+			 <div className="flex w-full flex-col gap-2 md:w-auto md:flex-row">
+			   {startActions.map (action => (
+			       <Button
+				   key={action.label}
+				   className="w-full md:w-auto"
+				   variant={action.variant === 'danger'
+				       ? 'destructive'
+				       : 'default'}
+				   onClick={() => void handleFormAction (active.id, action)}
+				   disabled={pendingIds.includes (active.id)
+				       || nestedConfirm?.parentId === active.id
+				       || action.disabled}>
+				 {action.label}
+			       </Button>))}
+			 </div>
+
+			 <div className="flex w-full flex-col gap-2 md:w-auto md:flex-row">
+			   <Button
+			       className="w-full md:w-auto"
+			       variant="outline"
+			       onClick={() => closeRequest (active.id)}
+			       disabled={pendingIds.includes (active.id)
+				   || nestedConfirm?.parentId === active.id}>
+			     {active.options.cancelText ?? '取消'}
+			   </Button>
+
+			   {endActions.map (action => (
+			       <Button
+				   key={action.label}
+				   className="w-full md:w-auto"
+				   variant={action.variant === 'danger'
+				       ? 'destructive'
+				       : 'default'}
+				   onClick={() => void handleFormAction (active.id, action)}
+				   disabled={pendingIds.includes (active.id)
+				       || nestedConfirm?.parentId === active.id
+				       || action.disabled}>
+				 {action.label}
+			       </Button>))}
+			 </div>
+		       </DialogFooter>
+		     </>)
+		 : (
+		     <>
+		       <DialogHeader className="pl-8">
+			 <DialogTitle>{active.options.title}</DialogTitle>
+
+			 {active.options.description && (
+			     <DialogDescription asChild>
+			       <div>{active.options.description}</div>
+			     </DialogDescription>)}
+		       </DialogHeader>
+
+		       <DialogFooter>
+			 {active.kind === 'confirm' && (
+			     <>
+			       <Button
+				   variant="outline"
+				   onClick={() => closeRequest (active.id, false)}>
+				 {active.options.cancelText ?? '取消'}
+			       </Button>
+
+			       <Button
+				   variant={(active.options.variant === 'danger')
+					    ? 'destructive'
+					    : 'default'}
+				   onClick={() => closeRequest (active.id, true)}>
+				 {active.options.confirmText ?? '確定'}
+			       </Button>
+			     </>)}
+
+			 {active.kind === 'alert' && (
+			     <Button onClick={() => closeRequest (active.id)}>
+			       {active.options.okText ?? '確定'}
+			     </Button>)}
+
+			 {active.kind === 'choice' && (
+			     <>
+			       <Button
+				   variant="outline"
+				   onClick={() => closeRequest (active.id, null)}>
+				 {active.options.cancelText ?? '取消'}
+			       </Button>
+
+			       {active.options.choices.map (choice => (
+				   <Button
+				       key={choice.value}
+				       variant={(choice.variant === 'danger')
+						? 'destructive'
+						: 'default'}
+				       onClick={() => closeRequest (active.id, choice.value)}>
+				     {choice.label}
+				   </Button>))}
+			     </>)}
+		       </DialogFooter>
+		     </>)}
+	      </DialogContent>
+	    </Dialog>)}
+
+	{nestedConfirm && (
+	    <Dialog
+		open
+		onOpenChange={open => {
+		  if (!(open))
+		    closeNestedConfirm (false)
+		}}>
 	      <DialogContent className="px-6 pb-6 pt-7">
 		<DialogHeader className="pl-8">
-		  <DialogTitle>{active.options.title}</DialogTitle>
+		  <DialogTitle>{nestedConfirm.options.title}</DialogTitle>
 
-		  {active.options.description && (
+		  {nestedConfirm.options.description && (
 		      <DialogDescription asChild>
-			<div>{active.options.description}</div>
+			<div>{nestedConfirm.options.description}</div>
 		      </DialogDescription>)}
 		</DialogHeader>
 
 		<DialogFooter>
-		  {active.kind === 'confirm' && (
-		      <>
-			<Button
-			    variant="outline"
-			    onClick={() => closeActive (false)}>
-			  {active.options.cancelText ?? '取消'}
-			</Button>
+		  <Button
+		      variant="outline"
+		      onClick={() => closeNestedConfirm (false)}>
+		    {nestedConfirm.options.cancelText ?? '取消'}
+		  </Button>
 
-			<Button
-			    variant={(active.options.variant === 'danger')
-				     ? 'destructive'
-				     : 'default'}
-			    onClick={() => closeActive (true)}>
-			  {active.options.confirmText ?? '確定'}
-			</Button>
-		      </>)}
-
-		  {active.kind === 'alert' && (
-		      <Button onClick={() => closeActive ()}>
-			{active.options.okText ?? '確定'}
-		      </Button>)}
-
-		  {active.kind === 'choice' && (
-		      <>
-			<Button
-			    variant="outline"
-			    onClick={() => closeActive (null)}>
-			  {active.options.cancelText ?? '取消'}
-			</Button>
-
-			{active.options.choices.map (choice => (
-			    <Button
-				key={choice.value}
-				variant={(choice.variant === 'danger')
-					 ? 'destructive'
-					 : 'default'}
-				onClick={() => closeActive (choice.value)}>
-			      {choice.label}
-			    </Button>))}
-		      </>)}
+		  <Button
+		      variant={nestedConfirm.options.variant === 'danger'
+			  ? 'destructive'
+			  : 'default'}
+		      onClick={() => closeNestedConfirm (true)}>
+		    {nestedConfirm.options.confirmText ?? '確定'}
+		  </Button>
 		</DialogFooter>
-	      </DialogContent>)}
-	</Dialog>
+	      </DialogContent>
+	    </Dialog>)}
       </DialogueContext.Provider>)
 }
-
-
-export const useDialogue = () => {
-  const dialogue = useContext (DialogueContext)
-
-  if (!(dialogue))
-    throw new Error ('useDialogue must be used inside DialogueProvider')
-
-  return dialogue
-}
-
+export { useDialogue } from '@/lib/dialogues/useDialogue'
 export default DialogueProvider

frontend/src/components/posts/PostCoreDataFields.tsx

@@ -0,0 +1,94 @@
+import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
+import PostTagsField from '@/components/posts/PostTagsField'
+import PostTextField from '@/components/posts/PostTextField'
+
+import type { FC, ReactNode } from 'react'
+
+type TextMessages = string[] | undefined
+
+type CoreField = {
+  value:    string
+  onChange: (value: string) => void
+  errors?:  TextMessages
+  warnings?: TextMessages
+  disabled?: boolean }
+
+type OriginalCreatedField = {
+  originalCreatedAt?:     TextMessages
+  originalCreatedFrom?:   TextMessages
+  originalCreatedBefore?: TextMessages }
+
+type PostCoreDataFieldsProps = {
+  title: {
+    value:     string
+    onChange:  (value: string) => void
+    errors?:   TextMessages
+    warnings?: TextMessages
+    disabled?: boolean
+    after?:    ReactNode }
+  originalCreated: {
+    disabled?:                boolean
+    originalCreatedFrom:      string | null
+    setOriginalCreatedFrom:   (value: string | null) => void
+    originalCreatedBefore:    string | null
+    setOriginalCreatedBefore: (value: string | null) => void
+    errors?:                  OriginalCreatedField }
+  tags: {
+    value:     string
+    onChange:  (value: string) => void
+    errors?:   TextMessages
+    warnings?: TextMessages
+    disabled?: boolean
+    rows?:     number }
+  parentPostIds: CoreField }
+
+const groupedMessages = (...values: (TextMessages | null | undefined)[]): string[] =>
+    [...new Set (values.flatMap (value => value ?? []))]
+
+
+const PostCoreDataFields: FC<PostCoreDataFieldsProps> = (
+    { title,
+      originalCreated,
+      tags,
+      parentPostIds },
+) => (
+    <>
+      <PostTextField
+          label="タイトル"
+          value={title.value}
+          disabled={title.disabled}
+          warnings={title.warnings}
+          errors={title.errors}
+          after={title.after}
+          onChange={title.onChange}/>
+
+      <PostOriginalCreatedTimeField
+          disabled={originalCreated.disabled}
+          originalCreatedFrom={originalCreated.originalCreatedFrom}
+          setOriginalCreatedFrom={originalCreated.setOriginalCreatedFrom}
+          originalCreatedBefore={originalCreated.originalCreatedBefore}
+          setOriginalCreatedBefore={originalCreated.setOriginalCreatedBefore}
+          errors={groupedMessages (
+              originalCreated.errors?.originalCreatedAt,
+              originalCreated.errors?.originalCreatedFrom,
+              originalCreated.errors?.originalCreatedBefore)}/>
+
+      <PostTagsField
+          tags={tags.value}
+          disabled={tags.disabled}
+          setTags={tags.onChange}
+          warnings={tags.warnings}
+          errors={tags.errors}
+          rows={tags.rows}/>
+
+      <PostTextField
+          label="親投稿"
+          value={parentPostIds.value}
+          disabled={parentPostIds.disabled}
+          warnings={parentPostIds.warnings}
+          errors={parentPostIds.errors}
+          onChange={parentPostIds.onChange}/>
+    </>)
+
+export default PostCoreDataFields
+export type { PostCoreDataFieldsProps }

frontend/src/components/posts/PostCreationDataFields.tsx

@@ -0,0 +1,48 @@
+import PostCoreDataFields from '@/components/posts/PostCoreDataFields'
+import PostTextField from '@/components/posts/PostTextField'
+
+import type { FC, ReactNode } from 'react'
+
+import type { PostCoreDataFieldsProps } from '@/components/posts/PostCoreDataFields'
+
+type TextMessages = string[] | undefined
+
+type Props = {
+  url: {
+    value:       string
+    onChange:    (value: string) => void
+    errors?:     TextMessages
+    warnings?:   TextMessages
+    disabled?:   boolean
+    type?:       string
+    placeholder?: string }
+  thumbnailField: ReactNode
+  core:           PostCoreDataFieldsProps
+  extraFields?:   ReactNode }
+
+
+const PostCreationDataFields: FC<Props> = (
+    { url,
+      thumbnailField,
+      core,
+      extraFields },
+) => (
+    <>
+      <PostTextField
+          label="URL"
+          type={url.type}
+          value={url.value}
+          disabled={url.disabled}
+          warnings={url.warnings}
+          errors={url.errors}
+          placeholder={url.placeholder}
+          onChange={url.onChange}/>
+
+      {thumbnailField}
+
+      <PostCoreDataFields {...core}/>
+
+      {extraFields}
+    </>)
+
+export default PostCreationDataFields

frontend/src/components/posts/PostCreationDataFieldsUsage.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { buildPostImportRow } from '@/test/postImportFactories'
+
+import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
+
+const sharedFieldsSpy = vi.hoisted (() => vi.fn (() => <div data-testid="shared-fields"/>))
+
+vi.mock ('@/components/posts/PostCreationDataFields', () => ({
+  default: sharedFieldsSpy,
+}))
+
+describe ('PostCreationDataFields usage', () => {
+  it ('is used by PostImportRowForm', async () => {
+    const { default: PostImportRowForm } = await import (
+        '@/components/posts/import/PostImportRowForm')
+
+    render (
+        <PostImportRowForm
+            row={buildPostImportRow ()}
+            controls={{
+              close: vi.fn (),
+              confirm: vi.fn (),
+              setActions: vi.fn (),
+            } as DialogueFormControls}
+            onSave={vi.fn ()}/>)
+
+    expect (screen.getByTestId ('shared-fields')).toBeInTheDocument ()
+  })
+})

frontend/src/components/posts/PostDurationField.tsx

@@ -0,0 +1,27 @@
+import PostTextField from '@/components/posts/PostTextField'
+
+import type { FC } from 'react'
+
+type Props = {
+  value:     string
+  onChange:  (value: string) => void
+  errors?:   string[]
+  disabled?: boolean }
+
+
+const PostDurationField: FC<Props> = (
+    { value,
+      onChange,
+      errors,
+      disabled },
+) => (
+    <PostTextField
+        label="動画時間"
+        value={value}
+        onChange={onChange}
+        errors={errors}
+        disabled={disabled}
+        type="text"/>
+)
+
+export default PostDurationField

frontend/src/components/posts/PostTagsField.tsx

@@ -0,0 +1,29 @@
+import PostFormTagsArea from '@/components/PostFormTagsArea'
+import FieldWarning from '@/components/common/FieldWarning'
+
+import type { ComponentPropsWithoutRef, FC } from 'react'
+
+type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange'> & {
+  tags:      string
+  setTags:   (tags: string) => void
+  warnings?: string[]
+  errors?:   string[] }
+
+
+const PostTagsField: FC<Props> = (
+    { tags,
+      setTags,
+      warnings,
+      errors,
+      ...rest },
+) => (
+    <div className="space-y-2">
+      <PostFormTagsArea
+          {...rest}
+          tags={tags}
+          setTags={setTags}
+          errors={errors}/>
+      <FieldWarning messages={warnings}/>
+    </div>)
+
+export default PostTagsField

frontend/src/components/posts/PostTextField.tsx

@@ -0,0 +1,52 @@
+import FieldWarning from '@/components/common/FieldWarning'
+import FormField from '@/components/common/FormField'
+import { inputClass } from '@/lib/utils'
+
+import type { FC, ReactNode } from 'react'
+
+type Props = {
+  label:        string
+  value:        string
+  onChange:     (value: string) => void
+  warnings?:    string[]
+  errors?:      string[]
+  disabled?:    boolean
+  type?:        string
+  placeholder?: string
+  className?:   string
+  after?:       ReactNode
+  onBlur?:      () => void }
+
+
+const PostTextField: FC<Props> = (
+    { label,
+      value,
+      onChange,
+      warnings,
+      errors,
+      disabled,
+      type = 'text',
+      placeholder,
+      className,
+      after,
+      onBlur },
+) => (
+    <FormField label={label} messages={errors}>
+      {({ describedBy, invalid }) => (
+          <>
+            <input
+                type={type}
+                value={value}
+                disabled={disabled}
+                placeholder={placeholder}
+                onBlur={onBlur}
+                onChange={ev => onChange (ev.target.value)}
+                aria-describedby={describedBy}
+                aria-invalid={invalid}
+                className={inputClass (invalid, className)}/>
+            <FieldWarning messages={warnings}/>
+            {after}
+          </>)}
+    </FormField>)
+
+export default PostTextField

frontend/src/components/posts/PostThumbnailPreview.test.tsx

@@ -0,0 +1,36 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import PostThumbnailPreview from '@/components/posts/PostThumbnailPreview'
+
+describe ('PostThumbnailPreview', () => {
+  it ('keeps an existing blob preview URL unchanged for normal post forms', () => {
+    render (<PostThumbnailPreview url="blob:preview" className="h-10 w-10"/>)
+
+    expect (screen.getByRole ('img')).toHaveAttribute ('src', 'blob:preview')
+  })
+
+  it ('renders an empty thumbnail frame without text when the URL is empty', () => {
+    const { container } = render (
+        <PostThumbnailPreview url="" className="h-10 w-10"/>)
+
+    expect (screen.queryByRole ('img')).toBeNull ()
+    expect (screen.queryByText ('サムネールを表示できません')).toBeNull ()
+    expect (screen.queryByText ('なし')).toBeNull ()
+    expect (container.querySelector ('div.rounded.border.bg-muted')).not.toBeNull ()
+    expect (container.textContent).toBe ('')
+  })
+
+  it ('renders an empty thumbnail frame without text when image loading fails', () => {
+    const { container } = render (
+        <PostThumbnailPreview url="blob:preview" className="h-10 w-10"/>)
+
+    fireEvent.error (screen.getByRole ('img'))
+
+    expect (screen.queryByRole ('img')).toBeNull ()
+    expect (screen.queryByText ('サムネールを表示できません')).toBeNull ()
+    expect (screen.queryByText ('なし')).toBeNull ()
+    expect (container.querySelector ('div.rounded.border.bg-muted')).not.toBeNull ()
+    expect (container.textContent).toBe ('')
+  })
+})

frontend/src/components/posts/PostThumbnailPreview.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+import type { FC } from 'react'
+
+type Props = {
+  url:        string
+  file?:      File
+  alt?:       string
+  className?: string
+  referrerPolicy?: 'no-referrer' }
+
+
+const PostThumbnailPreview: FC<Props> = (
+    { url,
+      file,
+      alt = 'サムネール',
+      className = 'h-16 w-16',
+      referrerPolicy },
+) => {
+  const [failed, setFailed] = useState (false)
+  const [fileUrl, setFileUrl] = useState<string | null> (null)
+
+  useEffect (() => {
+    setFailed (false)
+  }, [file, url])
+
+  useEffect (() => {
+    if (file == null)
+      {
+        setFileUrl (null)
+        return
+      }
+
+    const nextUrl = URL.createObjectURL (file)
+    setFileUrl (nextUrl)
+
+    return () => {
+      URL.revokeObjectURL (nextUrl)
+    }
+  }, [file])
+
+  const resolvedUrl = url.trim () !== '' ? url : (fileUrl ?? '')
+
+  if (resolvedUrl === '' || failed)
+    {
+      return (
+          <div
+              className={cn (
+                  className,
+                  'rounded border border-border bg-muted')}/>)
+    }
+
+  return (
+      <img
+          src={resolvedUrl}
+          alt={alt}
+          referrerPolicy={referrerPolicy}
+          className={cn (className, 'rounded border border-border object-cover')}
+          onError={() => setFailed (true)}/>)
+}
+
+export default PostThumbnailPreview

frontend/src/components/posts/import/PostImportRowForm.test.tsx

@@ -0,0 +1,278 @@
+import { act, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostImportRowForm from '@/components/posts/import/PostImportRowForm'
+import { buildPostImportRow } from '@/test/postImportFactories'
+
+import type { DialogueFormAction, DialogueFormControls } from '@/lib/dialogues/useDialogue'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('PostImportRowForm', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    globalThis.URL.createObjectURL = vi.fn (() => 'blob:preview')
+    globalThis.URL.revokeObjectURL = vi.fn ()
+    api.apiGet.mockResolvedValue (new Blob (['img'], { type: 'image/png' }))
+  })
+
+  it ('resets only the draft, then saves with resetRequested', async () => {
+    const row = buildPostImportRow ()
+    row.attributes.title = 'manual title'
+    row.provenance.title = 'manual'
+    const actions: DialogueFormAction[][] = []
+    const controls: DialogueFormControls = {
+      close: vi.fn (),
+      confirm: vi.fn ().mockResolvedValue (true),
+      setActions: next => actions.push (next) }
+    const invalidRow = buildPostImportRow ({
+      validationErrors: { title: ['タイトルを確認してください．'] } })
+    const onSave = vi.fn ().mockResolvedValue ({ saved: false, row: invalidRow })
+
+    render (<PostImportRowForm row={row} controls={controls} onSave={onSave}/>)
+    const titleInput = screen.getByDisplayValue ('manual title')
+
+    await waitFor (() => expect (actions.at (-1)?.length).toBe (2))
+    const reset = actions.at (-1)?.find (action => action.label === '変更をリセット')
+    expect (reset).toMatchObject ({ placement: 'start', variant: 'danger', disabled: false })
+    await act (async () => {
+      await reset?.onSelect ()
+    })
+
+    expect (controls.confirm).toHaveBeenCalled ()
+    expect (titleInput).toHaveValue ('')
+    expect (onSave).not.toHaveBeenCalled ()
+
+    const save = actions.at (-1)?.find (action => action.label === '編輯内容を保存')
+    await act (async () => {
+      await save?.onSelect ()
+    })
+
+    expect (onSave).toHaveBeenCalledWith ({
+      draft: expect.objectContaining ({ title: '' }),
+      resetRequested: true })
+    expect (screen.getByText ('タイトルを確認してください．')).toBeInTheDocument ()
+  })
+
+  it ('does not reset the draft when confirmation is cancelled', async () => {
+    const row = buildPostImportRow ({ attributes: { title: 'manual title' } })
+    let actions: DialogueFormAction[] = []
+    const controls: DialogueFormControls = {
+      close: vi.fn (),
+      confirm: vi.fn ().mockResolvedValue (false),
+      setActions: next => {
+	actions = next
+      } }
+
+    render (
+	<PostImportRowForm
+	    row={row}
+	    controls={controls}
+	    onSave={vi.fn ()}/>)
+    await waitFor (() => expect (actions.length).toBe (2))
+
+    await act (async () => {
+      await actions.find (action => action.label === '変更をリセット')?.onSelect ()
+    })
+
+    expect (screen.getByDisplayValue ('manual title')).toBeInTheDocument ()
+  })
+
+  it ('marks edited fields and areas invalid from field errors', () => {
+    const row = buildPostImportRow ({
+      validationErrors: { url: ['URL error'], tags: ['tag error'] },
+      importErrors: { title: ['title error'] },
+      fieldWarnings: { title: ['title warning'] } })
+
+    render (
+	<PostImportRowForm
+	    row={row}
+	    controls={{ close: vi.fn (), confirm: vi.fn (), setActions: vi.fn () }}
+	    onSave={vi.fn ()}/>)
+
+    expect (screen.getByText ('URL error')).toBeInTheDocument ()
+    expect (screen.getByText ('tag error')).toBeInTheDocument ()
+    expect (screen.getByText ('title error')).toBeInTheDocument ()
+    expect (screen.getByText ('title warning')).toBeInTheDocument ()
+    expect (screen.getAllByRole ('textbox').filter (
+	textbox => textbox.getAttribute ('aria-invalid') === 'true')).toHaveLength (3)
+  })
+
+  it ('keeps untouched original created values unchanged in the save payload', async () => {
+    let actions: DialogueFormAction[] = []
+    const row = buildPostImportRow ({
+      attributes: {
+        originalCreatedFrom: '2024-01-01T12:34+09:00',
+        originalCreatedBefore: '2024-01-01T12:35+09:00' } })
+    const controls: DialogueFormControls = {
+      close: vi.fn (),
+      confirm: vi.fn (),
+      setActions: next => {
+        actions = next
+      } }
+    const onSave = vi.fn ().mockResolvedValue ({ saved: true, row: null })
+
+    render (
+        <PostImportRowForm
+            row={row}
+            controls={controls}
+            onSave={onSave}/>)
+    await waitFor (() => expect (actions.length).toBe (2))
+
+    await act (async () => {
+      void actions.find (action => action.label === '編輯内容を保存')?.onSelect ()
+    })
+
+    expect (onSave).toHaveBeenCalledWith ({
+      draft: expect.objectContaining ({
+        originalCreatedFrom: '2024-01-01T12:34+09:00',
+        originalCreatedBefore: '2024-01-01T12:35+09:00' }),
+      resetRequested: false })
+  })
+
+  it (
+      'shows upload input only when the thumbnail URL is blank',
+      async () => {
+    let actions: DialogueFormAction[] = []
+    const controls: DialogueFormControls = {
+      close: vi.fn (),
+      confirm: vi.fn (),
+      setActions: next => {
+        actions = next
+      } }
+    const onSave = vi.fn ().mockResolvedValue ({ saved: true, row: null })
+
+    const { container } = render (
+        <PostImportRowForm
+            row={buildPostImportRow ({
+              attributes: { duration: '2', tags: 'tag1' } })}
+            controls={controls}
+            onSave={onSave}/>)
+    await waitFor (() => expect (actions.length).toBe (2))
+
+    const labels = Array.from (container.querySelectorAll ('label'))
+        .map (node => node.textContent?.trim ())
+
+    expect (labels.slice (0, 6)).toEqual ([
+      'URL',
+      'サムネール',
+      'タイトル',
+      'オリジナルの作成日時',
+      'タグ',
+      '親投稿'])
+    expect (container.querySelector ('input[type="file"]')).toHaveAttribute (
+	'accept',
+	'image/*')
+    expect (screen.queryByPlaceholderText ('例: 2 / 2.5 / 1:23')).not.toBeInTheDocument ()
+    expect (screen.getByDisplayValue ('tag1')).toBeInTheDocument ()
+
+    await act (async () => {
+      await actions.find (action => action.label === '編輯内容を保存')?.onSelect ()
+    })
+
+    expect (onSave).toHaveBeenCalledWith ({
+      draft: expect.objectContaining ({
+        tags: 'tag1' }),
+      resetRequested: false })
+      })
+
+  it ('keeps reset enabled when the value matches but provenance still differs', async () => {
+    const row = buildPostImportRow ({
+      attributes: { title: 'same title' },
+      provenance: { title: 'manual' },
+      resetSnapshot: {
+        url: 'https://example.com/post',
+        attributes: {
+          title: 'same title',
+          thumbnailBase: '',
+          originalCreatedFrom: '',
+          originalCreatedBefore: '',
+          tags: '',
+          parentPostIds: '' },
+        provenance: {
+          url: 'manual',
+          title: 'automatic',
+          thumbnailBase: 'automatic',
+          originalCreatedFrom: 'automatic',
+          originalCreatedBefore: 'automatic',
+          tags: 'automatic',
+          parentPostIds: 'automatic' },
+        tagSources: { automatic: '', manual: '' },
+        fieldWarnings: { },
+        baseWarnings: [] } })
+    let actions: DialogueFormAction[] = []
+
+    render (
+        <PostImportRowForm
+            row={row}
+            controls={{
+              close: vi.fn (),
+              confirm: vi.fn (),
+              setActions: next => {
+                actions = next
+              } }}
+            onSave={vi.fn ()}/>)
+    await waitFor (() => expect (actions.length).toBe (2))
+
+    expect (actions.find (action => action.label === '変更をリセット')?.disabled).toBe (false)
+  })
+
+  it (
+      'disables every field while save validation is pending and re-enables them afterwards',
+      async () => {
+    let actions: DialogueFormAction[] = []
+    let resolveSave:
+        ((value: { saved: boolean
+		   row:   ReturnType<typeof buildPostImportRow> | null }) => void) | null
+        = null
+    const onSave = vi.fn (() =>
+        new Promise<{ saved: boolean
+		      row:   ReturnType<typeof buildPostImportRow> | null }> (resolve => {
+          resolveSave = resolve
+        }))
+
+    render (
+        <PostImportRowForm
+            row={buildPostImportRow ({ attributes: { title: 'draft title' } })}
+            controls={{
+              close: vi.fn (),
+              confirm: vi.fn (),
+              setActions: next => {
+                actions = next
+              } }}
+            onSave={onSave}/>)
+    await waitFor (() => expect (actions.length).toBe (2))
+
+    let savePromise: Promise<boolean | void> | undefined
+    await act (async () => {
+      savePromise = actions.find (action => action.label === '編輯内容を保存')?.onSelect ()
+    })
+
+    await waitFor (() => {
+      screen.getAllByRole ('textbox').forEach (textbox => {
+        expect (textbox).toBeDisabled ()
+      })
+    })
+
+    resolveSave?.({
+      saved: false,
+      row: buildPostImportRow ({
+        attributes: { title: 'draft title' },
+        validationErrors: { title: ['タイトルを確認してください．'] } }) })
+    await act (async () => {
+      await savePromise
+    })
+
+    await waitFor (() => {
+      screen.getAllByRole ('textbox').forEach (textbox => {
+        expect (textbox).not.toBeDisabled ()
+      })
+    })
+    expect (screen.getByDisplayValue ('draft title')).toBeInTheDocument ()
+    expect (screen.getByText ('タイトルを確認してください．')).toBeInTheDocument ()
+      })
+})

frontend/src/components/posts/import/PostImportRowForm.tsx

@@ -0,0 +1,308 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import FieldError from '@/components/common/FieldError'
+import FieldWarning from '@/components/common/FieldWarning'
+import PostCreationDataFields from '@/components/posts/PostCreationDataFields'
+import PostDurationField from '@/components/posts/PostDurationField'
+import PostTextField from '@/components/posts/PostTextField'
+import PostImportThumbnailPreview from '@/components/posts/import/PostImportThumbnailPreview'
+import { hasThumbnailBaseValue, hasVideoTag } from '@/lib/postImportRows'
+
+import type { FC } from 'react'
+
+import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
+import type { PostImportEditableDraft, PostImportRow } from '@/lib/postImportTypes'
+
+type Draft = PostImportEditableDraft
+
+type Props = {
+  row:          PostImportRow
+  controls:     DialogueFormControls
+  onSave:       (args: { draft:          Draft
+			 resetRequested: boolean }) => Promise<{
+			     saved: boolean
+			     row:   PostImportRow | null }> }
+
+const THUMBNAIL_MISSING_WARNING = 'サムネールなし'
+
+const buildDraft = (row: PostImportRow): Draft => ({
+    url: row.url,
+    title: String (row.attributes.title ?? ''),
+    thumbnailBase: String (row.attributes.thumbnailBase ?? ''),
+    originalCreatedFrom: String (row.attributes.originalCreatedFrom ?? ''),
+    originalCreatedBefore: String (row.attributes.originalCreatedBefore ?? ''),
+    tags: String (row.attributes.tags ?? ''),
+    parentPostIds: String (row.attributes.parentPostIds ?? ''),
+    duration: String (row.attributes.duration ?? ''),
+    thumbnailFile: row.thumbnailFile })
+
+const buildResetDraft = (row: PostImportRow): Draft => ({
+    url: row.resetSnapshot.url,
+    title: String (row.resetSnapshot.attributes.title ?? ''),
+    thumbnailBase: String (row.resetSnapshot.attributes.thumbnailBase ?? ''),
+    originalCreatedFrom: String (row.resetSnapshot.attributes.originalCreatedFrom ?? ''),
+    originalCreatedBefore: String (row.resetSnapshot.attributes.originalCreatedBefore ?? ''),
+    tags: String (row.resetSnapshot.attributes.tags ?? ''),
+    parentPostIds: String (row.resetSnapshot.attributes.parentPostIds ?? ''),
+    duration: String (row.resetSnapshot.attributes.duration ?? ''),
+    thumbnailFile: undefined })
+
+const groupedMessages = (...values: (string[] | undefined)[]): string[] =>
+    [...new Set (values.flatMap (value => value ?? []))]
+
+const sameDraft = (left:  Draft, right: Draft): boolean =>
+    left.url === right.url
+    && left.title === right.title
+    && left.thumbnailBase === right.thumbnailBase
+    && left.originalCreatedFrom === right.originalCreatedFrom
+    && left.originalCreatedBefore === right.originalCreatedBefore
+    && left.tags === right.tags
+    && left.parentPostIds === right.parentPostIds
+    && left.duration === right.duration
+    && left.thumbnailFile === right.thumbnailFile
+
+const sameProvenance = (
+    current: PostImportRow['provenance'],
+    reset:   PostImportRow['resetSnapshot']['provenance'],
+): boolean =>
+    Object.keys (reset).every (field => current[field] === reset[field])
+
+const sameTagSources = (
+    current: PostImportRow['tagSources'],
+    reset:   PostImportRow['resetSnapshot']['tagSources'],
+): boolean =>
+    (current?.automatic ?? '') === reset.automatic
+    && (current?.manual ?? '') === reset.manual
+
+const sameWarnings = (
+    current: PostImportRow,
+    reset:   PostImportRow['resetSnapshot'],
+): boolean =>
+    JSON.stringify (current.fieldWarnings) === JSON.stringify (reset.fieldWarnings)
+    && JSON.stringify (current.baseWarnings) === JSON.stringify (reset.baseWarnings)
+
+const thumbnailWarnings = (
+    messages:       string[] | undefined,
+    thumbnailBase:  string,
+    thumbnailFile:  File | undefined,
+): string[] => {
+  const others = (messages ?? []).filter (message => message !== THUMBNAIL_MISSING_WARNING)
+  return hasThumbnailBaseValue (thumbnailBase) || thumbnailFile != null
+      ? others
+      : [...new Set ([...others, THUMBNAIL_MISSING_WARNING])]
+}
+
+
+const PostImportRowForm: FC<Props> = (
+    { row,
+      controls,
+      onSave },
+) => {
+  const [draft, setDraft] = useState<Draft> (() => buildDraft (row))
+  const [messageRow, setMessageRow] = useState<PostImportRow | null> (null)
+  const [saving, setSaving] = useState (false)
+  const [resetRequested, setResetRequested] = useState (false)
+  const [committedThumbnailBase, setCommittedThumbnailBase] = useState (
+      () => String (row.attributes.thumbnailBase ?? ''))
+
+  useEffect (() => {
+    const nextDraft = buildDraft (row)
+    setDraft (nextDraft)
+    setMessageRow (null)
+    setResetRequested (false)
+    setCommittedThumbnailBase (String (row.attributes.thumbnailBase ?? ''))
+  }, [row])
+
+  const displayRow = messageRow ?? row
+  const resetDraft = useMemo (
+      () => buildResetDraft (row),
+      [row])
+  const durationVisible = hasVideoTag (draft.tags)
+  const currentThumbnailWarnings = thumbnailWarnings (
+      displayRow.fieldWarnings.thumbnailBase,
+      draft.thumbnailBase,
+      draft.thumbnailFile)
+  const resetDisabled =
+      saving
+      || (sameDraft (draft, resetDraft)
+          && sameProvenance (row.provenance, row.resetSnapshot.provenance)
+          && sameTagSources (row.tagSources, row.resetSnapshot.tagSources)
+          && row.metadataUrl === row.resetSnapshot.metadataUrl
+          && sameWarnings (displayRow, row.resetSnapshot))
+
+  const update = <Key extends keyof Draft,> (
+      key:   Key,
+      value: Draft[Key],
+  ) => {
+    if (messageRow != null)
+      setMessageRow (null)
+    setDraft (current => ({ ...current, [key]: value }))
+  }
+
+  const reset = useCallback (async (): Promise<boolean> => {
+    if (resetDisabled)
+      return false
+
+    const confirmed = await controls.confirm ({
+	title: '変更をリセットしますか?',
+	confirmText: 'リセット',
+	cancelText: '取消',
+	variant: 'danger' })
+    if (!(confirmed))
+      return false
+
+    setDraft (resetDraft)
+    setResetRequested (true)
+    setMessageRow (null)
+    setCommittedThumbnailBase (resetDraft.thumbnailBase)
+    return false
+  }, [controls, resetDisabled, resetDraft])
+
+  const save = useCallback (async (): Promise<boolean> => {
+    setSaving (true)
+    try
+    {
+      const result = await onSave ({ draft, resetRequested })
+      if (result.saved)
+        return true
+
+      if (result.row != null)
+        setMessageRow (result.row)
+      return false
+    }
+    finally
+    {
+      setSaving (false)
+    }
+  }, [draft, onSave, resetRequested])
+
+  useEffect (() => {
+    controls.setActions ([{
+	label: '変更をリセット',
+	placement: 'start',
+	variant: 'danger',
+	disabled: resetDisabled,
+	onSelect: reset },
+	{
+	  label: '編輯内容を保存',
+	  disabled: saving,
+	  onSelect: save }])
+  }, [controls, resetDisabled, reset, save, saving])
+
+  return (
+      <>
+	<div className="px-6 pb-6">
+	  <div className="space-y-4">
+	    <div className="grid gap-6 md:grid-cols-[7rem_minmax(0,1fr)]">
+	      <div className="space-y-3 md:sticky md:top-0 md:self-start">
+		<PostImportThumbnailPreview
+		    url={committedThumbnailBase}
+		    file={
+			hasThumbnailBaseValue (committedThumbnailBase)
+			? undefined
+			: draft.thumbnailFile}
+		    className="h-28 w-28"/>
+	      </div>
+
+	      <div className="space-y-4">
+		<PostCreationDataFields
+		    url={{
+			value: draft.url,
+			onChange: value => update ('url', value),
+			disabled: saving,
+			warnings: displayRow.fieldWarnings.url,
+			errors: groupedMessages (
+			    displayRow.validationErrors.url,
+			    displayRow.importErrors?.url) }}
+		    thumbnailField={
+			<>
+			  <PostTextField
+			      label="サムネール"
+			      value={draft.thumbnailBase}
+			      disabled={saving}
+			      warnings={currentThumbnailWarnings}
+			      errors={groupedMessages (
+				  displayRow.validationErrors.thumbnailBase,
+				  displayRow.importErrors?.thumbnailBase)}
+			      onBlur={() => {
+				if (draft.thumbnailBase.trim () !== committedThumbnailBase.trim ())
+				  setCommittedThumbnailBase (draft.thumbnailBase)
+			      }}
+			      onChange={value => update ('thumbnailBase', value)}/>
+			  {!(hasThumbnailBaseValue (draft.thumbnailBase)) && (
+			      <input
+				  type="file"
+				  accept="image/*"
+				  disabled={saving}
+				  onChange={event => {
+				    const file = event.target.files?.[0]
+				    update ('thumbnailFile', file)
+				  }}/>)}
+			</>}
+		    core={{
+			title: {
+			    value: draft.title,
+			    onChange: value => update ('title', value),
+			    disabled: saving,
+			    warnings: displayRow.fieldWarnings.title,
+			    errors: groupedMessages (
+				displayRow.validationErrors.title,
+				displayRow.importErrors?.title) },
+			originalCreated: {
+			    disabled: saving,
+			    originalCreatedFrom: draft.originalCreatedFrom || null,
+			    setOriginalCreatedFrom: value =>
+				update ('originalCreatedFrom', value ?? ''),
+			    originalCreatedBefore: draft.originalCreatedBefore || null,
+			    setOriginalCreatedBefore: value =>
+				update ('originalCreatedBefore', value ?? ''),
+			    errors: {
+				originalCreatedAt: groupedMessages (
+				    displayRow.validationErrors.originalCreatedAt,
+				    displayRow.importErrors?.originalCreatedAt),
+				originalCreatedFrom: groupedMessages (
+				    displayRow.validationErrors.originalCreatedFrom,
+				    displayRow.importErrors?.originalCreatedFrom),
+				originalCreatedBefore: groupedMessages (
+				    displayRow.validationErrors.originalCreatedBefore,
+				    displayRow.importErrors?.originalCreatedBefore) } },
+			tags: {
+			    value: draft.tags,
+			    onChange: value => update ('tags', value),
+			    disabled: saving,
+			    warnings: displayRow.fieldWarnings.tags,
+			    errors: groupedMessages (
+				displayRow.validationErrors.tags,
+				displayRow.importErrors?.tags),
+			    rows: 4 },
+			parentPostIds: {
+			    value: draft.parentPostIds,
+			    onChange: value => update ('parentPostIds', value),
+			    disabled: saving,
+			    errors: groupedMessages (
+				displayRow.validationErrors.parentPostIds,
+				displayRow.importErrors?.parentPostIds) } }}
+		    extraFields={
+			durationVisible
+			? (
+			    <PostDurationField
+				value={draft.duration}
+				onChange={value => update ('duration', value)}
+				disabled={saving}
+				errors={groupedMessages (
+				    displayRow.validationErrors.videoMs,
+				    displayRow.importErrors?.videoMs)}/>)
+			: null}/>
+		<FieldWarning messages={displayRow.baseWarnings}/>
+		<FieldError messages={displayRow.validationErrors.base}/>
+		<FieldError messages={displayRow.importErrors?.base}/>
+	      </div>
+	    </div>
+	  </div>
+	</div>
+      </>)
+}
+
+export default PostImportRowForm
+export { buildDraft }
+export type { Draft as PostImportRowDraft }

frontend/src/components/posts/import/PostImportRowSummary.tsx

@@ -0,0 +1,198 @@
+import FieldError from '@/components/common/FieldError'
+import PostImportTagLinks from '@/components/posts/import/PostImportTagLinks'
+import { Button } from '@/components/ui/button'
+import PostImportThumbnailPreview from '@/components/posts/import/PostImportThumbnailPreview'
+import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
+import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
+import {
+    canEditReviewRow,
+    canRetryResultRow,
+    hasVideoTag,
+} from '@/lib/postImportRows'
+import { cn, originalCreatedAtString } from '@/lib/utils'
+
+import type { FC } from 'react'
+
+import type { PostImportRow } from '@/lib/postImportTypes'
+
+type Props = {
+    row:	      PostImportRow
+    displayNumber?:   number
+    onEdit?:	      () => void
+    onRetry?:	      () => void
+    onToggleSkip?:    (checked: boolean) => void
+    rowMessages?:     string[]
+    editDisabled?:    boolean
+    retryDisabled?:   boolean
+    skipDisabled?:    boolean
+    showActions?:     boolean
+    showSkipToggle?:  boolean }
+
+const summaryWarning = (row: PostImportRow): string | null =>
+    Object.values (row.fieldWarnings ?? { }).flat ()[0]
+    ?? row.baseWarnings?.[0]
+    ?? null
+
+const summaryDate = (row: PostImportRow): string =>
+    originalCreatedAtString (
+	row.attributes.originalCreatedFrom?.toString () ?? null,
+	row.attributes.originalCreatedBefore?.toString () ?? null)
+
+
+const PostImportRowSummary: FC<Props> = (
+    { row,
+      displayNumber,
+      onEdit,
+      onRetry,
+      onToggleSkip,
+      rowMessages,
+      editDisabled,
+      retryDisabled,
+      skipDisabled,
+      showActions = true,
+      showSkipToggle = false },
+) => {
+  const warning = summaryWarning (row)
+  const displayStatus = displayPostImportStatus (row)
+  const editVisible = onEdit != null
+  const editAllowed = editVisible && canEditReviewRow (row)
+  const retryAllowed = onRetry != null && canRetryResultRow (row)
+  const skipChecked = row.skipReason === 'manual'
+  const rowNumber = displayNumber ?? row.sourceRow
+  const duration = String (row.attributes.duration ?? '')
+  const showDuration = hasVideoTag (row.attributes.tags) && duration !== ''
+  const skipControl = showSkipToggle
+      ? (
+	  <label className="flex items-center gap-2 text-sm">
+	    <input
+		type="checkbox"
+		checked={skipChecked}
+		onChange={event => onToggleSkip?.(event.target.checked)}
+		disabled={skipDisabled === true}/>
+	    <span>スキップ</span>
+	  </label>)
+      : null
+
+  return (
+      <>
+	<div
+	    className={cn (
+		'hidden items-center gap-4 rounded-lg border p-4 md:grid',
+		'md:grid-cols-[4rem_5rem_minmax(0,1fr)_auto_auto]',
+		'transition-shadow hover:shadow-sm')}>
+	  <div className="space-y-1">
+	    <div className="text-sm font-medium">#{rowNumber}</div>
+	  </div>
+	  <PostImportThumbnailPreview
+	      url={String (row.attributes.thumbnailBase ?? '')}
+	      file={row.thumbnailFile}
+	      className="h-16 w-16"/>
+	  <div className="min-w-0 space-y-1">
+	    <div className="line-clamp-2 text-sm font-medium">
+	      {String (row.attributes.title ?? '')}
+	    </div>
+	    <div className="truncate text-xs text-neutral-600 dark:text-neutral-300">
+	      {row.url}
+	    </div>
+	    <PostImportTagLinks tags={row.displayTags}/>
+	    <div className="text-xs text-neutral-500 dark:text-neutral-400">
+	      {summaryDate (row)}
+	    </div>
+	    {showDuration && (
+		<div className="text-xs text-neutral-500 dark:text-neutral-400">
+		  動画時間 {duration}
+		</div>)}
+	    {warning && (
+		<div className="text-xs text-amber-700 dark:text-amber-200">
+		  {warning}
+		</div>)}
+	    <FieldError messages={rowMessages}/>
+	  </div>
+	  <div className="space-y-1">
+	    {displayStatus != null && <PostImportStatusBadge value={displayStatus}/>}
+	  </div>
+	  <div className="flex justify-end">
+	    <div className="flex items-center gap-2">
+	      {skipControl}
+	      {showActions && editVisible && (
+		  <Button
+		      type="button"
+		      variant="outline"
+		      onClick={onEdit}
+		      disabled={editDisabled === true || !(editAllowed)}>
+		    編輯
+		  </Button>)}
+	      {showActions && retryAllowed && (
+		  <Button
+		      type="button"
+		      variant="outline"
+		      onClick={onRetry}
+		      disabled={retryDisabled === true}>
+		    再試行
+		  </Button>)}
+	    </div>
+	  </div>
+	</div>
+
+	<div
+	    className={cn (
+		'space-y-3 rounded-lg border p-4 md:hidden',
+		'transition-shadow hover:shadow-sm')}>
+	  <div className="text-sm font-medium">#{rowNumber}</div>
+	  <div className="flex items-start gap-3">
+	    <PostImportThumbnailPreview
+		url={String (row.attributes.thumbnailBase ?? '')}
+		file={row.thumbnailFile}
+		className="h-20 w-20 shrink-0"/>
+	    <div className="min-w-0 flex-1 space-y-2">
+	      <div className="line-clamp-2 text-sm font-medium">
+		{String (row.attributes.title ?? '')}
+	      </div>
+	      <div className="truncate text-xs text-neutral-600 dark:text-neutral-300">
+		{row.url}
+	      </div>
+	      <div className="flex flex-wrap gap-2">
+		{displayStatus != null && <PostImportStatusBadge value={displayStatus}/>}
+	      </div>
+	      <PostImportTagLinks tags={row.displayTags}/>
+	      <div className="text-xs text-neutral-500 dark:text-neutral-400">
+		{summaryDate (row)}
+	      </div>
+	      {showDuration && (
+		  <div className="text-xs text-neutral-500 dark:text-neutral-400">
+		    動画時間 {duration}
+		  </div>)}
+	      {warning && (
+		  <div className="text-xs text-amber-700 dark:text-amber-200">
+		    {warning}
+		  </div>)}
+	      <FieldError messages={rowMessages}/>
+	      {skipControl}
+	    </div>
+	  </div>
+	  {showActions && (editVisible || retryAllowed) && (
+	      <div className="flex flex-col gap-2 md:flex-row">
+		{editVisible && (
+		    <Button
+			type="button"
+			className="w-full md:w-auto"
+			variant="outline"
+			onClick={onEdit}
+			disabled={editDisabled === true || !(editAllowed)}>
+		      編輯
+		    </Button>)}
+		{retryAllowed && (
+		    <Button
+			type="button"
+			className="w-full md:w-auto"
+			variant="outline"
+			onClick={onRetry}
+			disabled={retryDisabled === true}>
+		      再試行
+		    </Button>)}
+	      </div>)}
+	</div>
+      </>)
+}
+
+export default PostImportRowSummary

frontend/src/components/posts/import/PostImportStatusBadge.tsx

@@ -0,0 +1,33 @@
+import StatusBadge from '@/components/common/StatusBadge'
+
+import type { FC } from 'react'
+
+import type { StatusBadgeTone } from '@/components/common/StatusBadge'
+import type { PostImportBadgeValue } from '@/components/posts/import/postImportRowStatus'
+
+type Props = {
+    value: PostImportBadgeValue }
+
+const LABELS: Record<PostImportBadgeValue, string> = {
+    ready: '登録可能',
+    error: '登録不可',
+    warning: '警告',
+    skipped: 'スキップ',
+    created: '登録済み',
+    failed: '登録失敗' }
+
+const TONES: Record<PostImportBadgeValue, StatusBadgeTone> = {
+    ready: 'success',
+    error: 'warning',
+    warning: 'warning',
+    skipped: 'neutral',
+    created: 'success',
+    failed: 'warning' }
+
+
+const PostImportStatusBadge: FC<Props> = ({ value }) => (
+    <StatusBadge tone={TONES[value]}>
+      {LABELS[value]}
+    </StatusBadge>)
+
+export default PostImportStatusBadge

frontend/src/components/posts/import/PostImportTagLinks.tsx

@@ -0,0 +1,36 @@
+import TagLink from '@/components/TagLink'
+
+import type { FC } from 'react'
+
+import type { PostImportDisplayTag } from '@/lib/postImportTypes'
+
+type Props = {
+  tags: PostImportDisplayTag[] | undefined }
+
+const PostImportTagLinks: FC<Props> = ({ tags }) => {
+  if (tags == null || tags.length === 0)
+    return null
+
+  return (
+      <div className="flex flex-wrap text-xs gap-x-1">
+	{tags.map (tag => {
+	  const key = `${ tag.category }:${ tag.name }:${ tag.sectionLiterals?.join ('|') ?? '' }`
+	  return (
+	      <span key={key} className="inline-flex flex-nowrap items-baseline gap-1">
+		<TagLink
+		    tag={{
+			name: tag.name,
+			category: tag.category }}
+		    linkFlg={false}
+		    withWiki={false}
+		    withCount={false}/>
+		{tag.sectionLiterals?.map (literal => (
+		    <span key={literal} className="text-xs text-neutral-500 dark:text-neutral-400">
+		      {literal}
+		    </span>))}
+	      </span>)
+	})}
+      </div>)
+}
+
+export default PostImportTagLinks

frontend/src/components/posts/import/PostImportThumbnailPreview.test.tsx

@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostImportThumbnailPreview from '@/components/posts/import/PostImportThumbnailPreview'
+
+describe ('PostImportThumbnailPreview', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    globalThis.URL.createObjectURL = vi.fn (() => 'blob:preview')
+    globalThis.URL.revokeObjectURL = vi.fn ()
+  })
+
+  it ('renders the remote URL directly without a backend proxy', () => {
+    render (
+	<PostImportThumbnailPreview
+	    url="https://example.com/thumbnail.jpg"
+	    className="h-10 w-10"/>)
+
+    expect (screen.getByRole ('img')).toHaveAttribute (
+	'src',
+	'https://example.com/thumbnail.jpg')
+    expect (screen.getByRole ('img')).toHaveAttribute (
+	'referrerpolicy',
+	'no-referrer')
+  })
+
+  it ('shows the empty frame after the remote image fails', () => {
+    const { container } = render (
+	<PostImportThumbnailPreview
+	    url="https://example.com/missing.jpg"
+	    className="h-10 w-10"/>)
+
+    fireEvent.error (screen.getByRole ('img'))
+
+    expect (screen.queryByRole ('img')).toBeNull ()
+    expect (container.querySelector ('div.rounded.border.bg-muted')).not.toBeNull ()
+    expect (container.textContent).toBe ('')
+  })
+
+  it ('uses and revokes an object URL only when the remote URL is blank', () => {
+    const file = new File (['image'], 'thumbnail.png', { type: 'image/png' })
+    const { rerender, unmount } = render (
+	<PostImportThumbnailPreview url="" file={file} className="h-10 w-10"/>)
+
+    expect (screen.getByRole ('img')).toHaveAttribute ('src', 'blob:preview')
+
+    rerender (
+	<PostImportThumbnailPreview
+	    url="https://example.com/remote.jpg"
+	    file={file}
+	    className="h-10 w-10"/>)
+    expect (screen.getByRole ('img')).toHaveAttribute (
+	'src',
+	'https://example.com/remote.jpg')
+
+    unmount ()
+    expect (globalThis.URL.revokeObjectURL).toHaveBeenCalledWith ('blob:preview')
+  })
+})

frontend/src/components/posts/import/PostImportThumbnailPreview.tsx

@@ -0,0 +1,25 @@
+import PostThumbnailPreview from '@/components/posts/PostThumbnailPreview'
+
+import type { FC } from 'react'
+
+type Props = {
+  url:        string
+  file?:      File
+  alt?:       string
+  className?: string }
+
+
+const PostImportThumbnailPreview: FC<Props> = (
+    { url,
+      file,
+      alt = 'サムネール',
+      className = 'h-16 w-16' },
+) => (
+    <PostThumbnailPreview
+        url={url}
+        file={file}
+        alt={alt}
+        className={className}
+        referrerPolicy="no-referrer"/>)
+
+export default PostImportThumbnailPreview

frontend/src/components/posts/import/postImportRowStatus.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+
+import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
+import { buildPostImportRow } from '@/test/postImportFactories'
+
+describe ('displayPostImportStatus', () => {
+  it ('shows only ready, warning, and skipped states', () => {
+    expect (displayPostImportStatus (buildPostImportRow ())).toBe ('ready')
+    expect (displayPostImportStatus (buildPostImportRow ({
+      status: 'warning',
+      fieldWarnings: { title: ['warning'] } }))).toBe ('warning')
+    expect (displayPostImportStatus (buildPostImportRow ({
+      skipReason: 'existing',
+      existingPostId: 2 }))).toBe ('skipped')
+    expect (displayPostImportStatus (buildPostImportRow ({
+      skipReason: 'manual' }))).toBe ('skipped')
+  })
+
+  it ('distinguishes validation, failure, and created states', () => {
+    expect (displayPostImportStatus (buildPostImportRow ({
+      status: 'error',
+      validationErrors: { title: ['invalid'] } }))).toBe ('error')
+    expect (displayPostImportStatus (buildPostImportRow ({
+      importStatus: 'failed' }))).toBe ('failed')
+    expect (displayPostImportStatus (buildPostImportRow ({
+      importStatus: 'created',
+      createdPostId: 3 }))).toBe ('created')
+  })
+})

frontend/src/components/posts/import/postImportRowStatus.ts

@@ -0,0 +1,34 @@
+import type { PostImportRow } from '@/lib/postImportTypes'
+
+export type PostImportDisplayStatus =
+    'ready'
+    | 'error'
+    | 'skipped'
+    | 'warning'
+    | 'created'
+    | 'failed'
+
+export type PostImportBadgeValue = PostImportDisplayStatus
+
+const hasWarnings = (row: PostImportRow): boolean =>
+    Object.values (row.fieldWarnings ?? { }).some (messages => messages.length > 0)
+    || row.baseWarnings.length > 0
+
+export const displayPostImportStatus = (
+    row: PostImportRow,
+): PostImportDisplayStatus | null =>
+    row.status === 'pending'
+    ? null
+    : (row.importStatus === 'failed')
+    ? 'failed'
+    : (row.skipReason != null || row.importStatus === 'skipped')
+    ? 'skipped'
+    : (row.importStatus === 'created')
+      ? 'created'
+      : (row.status === 'error')
+      ? 'error'
+      : (Object.values (row.validationErrors ?? { }).some (messages => messages.length > 0))
+      ? 'error'
+      : ((hasWarnings (row) || row.status === 'warning')
+	 ? 'warning'
+	 : 'ready')

frontend/src/components/ui/dialog.tsx

@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Dialog = DialogPrimitive.Root
 
@@ -15,111 +15,109 @@ const DialogPortal = DialogPrimitive.Portal
 const DialogClose = DialogPrimitive.Close
 
 const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className)}
-    {...props}
-  />))
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(
+    ({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+	    ref={ref}
+	    className={cn (
+		'fixed inset-0 z-50 bg-black/80',
+		'data-[state=open]:animate-in data-[state=closed]:animate-out',
+		'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+		className)}
+	    {...props}/>))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn (
-	  'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg',
-	  'translate-x-[-50%] translate-y-[-50%]',
-	  'gap-5 rounded-2xl border border-border',
-	  'bg-background p-6 text-foreground shadow-2xl',
-	  'duration-200',
-	  'data-[state=open]:animate-in data-[state=closed]:animate-out',
-	  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-	  'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-	  className)}
-      {...props}
-    >
-      {children}
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(
+    ({ className, children, ...props }, ref) => (
+	<DialogPortal>
+	  <DialogOverlay />
+	  <DialogPrimitive.Content
+	      ref={ref}
+	      className={cn (
+		  'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg',
+		  'translate-x-[-50%] translate-y-[-50%]',
+		  'gap-5 rounded-2xl border border-border',
+		  'bg-background p-6 text-foreground shadow-2xl',
+		  'duration-200',
+		  'data-[state=open]:animate-in data-[state=closed]:animate-out',
+		  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+		  'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+		  className)}
+	      {...props}>
+	    {children}
 
-      <DialogPrimitive.Close
-	  className={cn (
-	      'absolute left-4 top-4 rounded-full p-1',
-	      'text-slate-500 transition-colors',
-	      'hover:bg-slate-200 hover:text-slate-900',
-	      'dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-50',
-	      'focus:outline-none focus:ring-2 focus:ring-slate-400')}>
-	<X className="h-4 w-4"/>
-	<span className="sr-only">閉ぢる</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>))
+	    <DialogPrimitive.Close
+		className={cn (
+		    'absolute left-4 top-4 rounded-full p-1',
+		    'text-slate-500 transition-colors',
+		    'hover:bg-slate-200 hover:text-slate-900',
+		    'dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-50',
+		    'focus:outline-none focus:ring-2 focus:ring-slate-400')}>
+	      <X className="h-4 w-4"/>
+	      <span className="sr-only">閉ぢる</span>
+	    </DialogPrimitive.Close>
+	  </DialogPrimitive.Content>
+	</DialogPortal>))
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className)}
-    {...props}
-  />)
-DialogHeader.displayName = "DialogHeader"
+const DialogHeader = (
+    { className, ...props }: React.HTMLAttributes<HTMLDivElement>,
+) => (
+    <div
+	className={cn (
+	    'flex flex-col space-y-1.5 text-center md:text-left',
+	    className)}
+	{...props}/>)
+DialogHeader.displayName = 'DialogHeader'
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className)}
-    {...props}
-  />)
-DialogFooter.displayName = "DialogFooter"
+const DialogFooter = (
+    { className, ...props }: React.HTMLAttributes<HTMLDivElement>,
+) => (
+    <div
+	className={cn (
+	    'flex flex-col-reverse md:flex-row md:justify-end md:space-x-2',
+	    className)}
+	{...props}/>)
+DialogFooter.displayName = 'DialogFooter'
 
 const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className)}
-    {...props}
-  />))
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(
+    ({ className, ...props }, ref) => (
+	<DialogPrimitive.Title
+	    ref={ref}
+	    className={cn (
+		'text-lg font-semibold leading-none tracking-tight',
+		className)}
+	    {...props}/>))
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />))
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(
+    ({ className, ...props }, ref) => (
+	<DialogPrimitive.Description
+	    ref={ref}
+	    className={cn ('text-sm text-muted-foreground', className)}
+	    {...props}/>))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogClose,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
 }

frontend/src/lib/api.ts

@@ -8,6 +8,7 @@ import type { AxiosError, AxiosRequestConfig } from 'axios'
 type Opt = {
     params?:        AxiosRequestConfig['params']
     headers?:       Record<string, string>
+    signal?:        AbortSignal
     responseType?:  'blob' }
 
 const client = axios.create ({ baseURL: API_BASE_URL })

frontend/src/lib/dialogues/useDialogue.ts

@@ -0,0 +1,72 @@
+import { createContext, useContext } from 'react'
+
+import type { ReactNode } from 'react'
+
+type DialogueVariant = 'default' | 'danger'
+
+type ConfirmOptions = { title:        string
+			description?: ReactNode
+			confirmText?: string
+			cancelText?:  string
+			variant?:     DialogueVariant }
+
+type AlertOptions = { title:        string
+		      description?: ReactNode
+		      okText?:      string }
+
+type Choice<T extends string> = { value:    T
+				  label:    string
+				  variant?: DialogueVariant }
+
+type ChoiceOptions<T extends string> = { title:         string
+					 description?:  ReactNode
+					 choices:       Choice<T>[]
+					 cancelText?:   string }
+
+type DialogueFormAction = {
+  label:      string
+  placement?: 'start' | 'end'
+  variant?:   DialogueVariant
+  disabled?:  boolean
+  onSelect:   () => Promise<boolean | void> | boolean | void }
+
+type DialogueFormControls = {
+  close:      () => void
+  setActions: (actions: DialogueFormAction[]) => void
+  confirm:    (options: ConfirmOptions) => Promise<boolean> }
+
+type DialogueFormOptions = { title:         string
+			     description?:  ReactNode
+			     body:          (controls: DialogueFormControls) => ReactNode
+			     cancelText?:   string
+			     size?:         'default' | 'large' }
+
+type DialogueAPI =
+    { confirm:  (options: ConfirmOptions) => Promise<boolean>
+      alert:    (options: AlertOptions) => Promise<void>
+      choice:   <T extends string> (options: ChoiceOptions<T>) => Promise<T | null>
+      form:     (options: DialogueFormOptions) => Promise<void> }
+
+const DialogueContext = createContext<DialogueAPI | null> (null)
+
+const useDialogue = () => {
+  const dialogue = useContext (DialogueContext)
+
+  if (dialogue == null)
+    throw new Error ('useDialogue must be used inside DialogueProvider')
+
+  return dialogue
+}
+
+export { DialogueContext, useDialogue }
+export default useDialogue
+export type {
+    AlertOptions,
+    Choice,
+    ChoiceOptions,
+    ConfirmOptions,
+    DialogueAPI,
+    DialogueFormAction,
+    DialogueFormControls,
+    DialogueFormOptions,
+    DialogueVariant }

frontend/src/lib/postImportRows.test.ts

@@ -0,0 +1,292 @@
+import { describe, expect, it } from 'vitest'
+
+import { creatableImportRows,
+	 buildNextEditedRow,
+	 canEditResultRow,
+	 canEditReviewRow,
+	 canRetryResultRow,
+	 hasExactSourceRows,
+	 initialisePreviewRows,
+	 mergeImportResults,
+	 mergeValidatedImportRow,
+	 mergeValidatedImportRows,
+	 processableImportRows,
+	 replaceImportRow,
+	 resultRepairMode,
+	 resultRowMessages,
+	 resultSummaryCounts,
+	 retryImportRow,
+	 reviewSummaryCounts } from '@/lib/postImportRows'
+import { buildPostImportRow } from '@/test/postImportFactories'
+
+describe ('post import row state', () => {
+  it ('separates processable existing rows from creatable rows', () => {
+    const ready = buildPostImportRow ({ sourceRow: 1 })
+    const existing = buildPostImportRow ({
+      sourceRow: 2,
+      skipReason: 'existing',
+      existingPostId: 20 })
+    const manual = buildPostImportRow ({
+      sourceRow: 3,
+      skipReason: 'manual' })
+    const invalid = buildPostImportRow ({
+      sourceRow: 4,
+      status: 'error',
+      validationErrors: { url: ['invalid'] } })
+    const created = buildPostImportRow ({
+      sourceRow: 5,
+      importStatus: 'created',
+      createdPostId: 40 })
+    const rows = [ready, existing, manual, invalid, created]
+
+    expect (processableImportRows (rows)).toEqual ([ready])
+    expect (creatableImportRows (rows)).toEqual ([ready])
+    expect (reviewSummaryCounts (rows)).toEqual ({
+      creatable: 1,
+      manualSkipped: 1,
+      existingSkipped: 1,
+      pendingOrError: 1 })
+  })
+
+  it ('preserves terminal rows while merging validation results', () => {
+    const created = buildPostImportRow ({
+      sourceRow: 1,
+      importStatus: 'created',
+      createdPostId: 10,
+      attributes: { title: 'created title' } })
+    const pending = buildPostImportRow ({
+      sourceRow: 2,
+      fieldWarnings: { title: ['old warning'] },
+      provenance: { title: 'manual' },
+      attributes: { title: 'manual title' } })
+    const validated = [
+      buildPostImportRow ({ sourceRow: 1, attributes: { title: 'changed' } }),
+      buildPostImportRow ({
+	sourceRow: 2,
+	fieldWarnings: { title: ['fetch warning'], tags: ['tag warning'] },
+	provenance: { title: 'manual' },
+	attributes: { title: 'manual title' } })]
+
+    const result = mergeValidatedImportRows ([created, pending], validated)
+
+    expect (result[0]).toBe (created)
+    expect (result[1]?.fieldWarnings).toEqual ({ tags: ['tag warning'] })
+  })
+
+  it ('updates the reset snapshot only after metadata URL changes', () => {
+    const current = buildPostImportRow ({
+      attributes: { title: 'manual title' },
+      metadataUrl: 'https://example.com/old' })
+    const validated = buildPostImportRow ({
+      attributes: { title: 'new metadata title' },
+      metadataUrl: 'https://example.com/new',
+      fieldWarnings: { title: ['warning'] },
+      baseWarnings: ['base warning'] })
+
+    const result = mergeValidatedImportRows ([current], [validated])[0]
+
+    expect (result?.resetSnapshot).toMatchObject ({
+      attributes: { title: 'new metadata title' },
+      fieldWarnings: { title: ['warning'] },
+      baseWarnings: ['base warning'],
+      metadataUrl: 'https://example.com/new' })
+  })
+
+  it ('merges result states and clears incompatible post identifiers', () => {
+    const created = mergeImportResults ([buildPostImportRow ({
+      skipReason: 'existing',
+      existingPostId: 2,
+      recoverable: true,
+      importStatus: 'pending' })], [{
+      sourceRow: 1,
+      status: 'created',
+      post: { id: 3 } }])[0]
+    const skipped = mergeImportResults ([buildPostImportRow ({
+      createdPostId: 3,
+      importStatus: 'created',
+      recoverable: true })], [{
+      sourceRow: 1,
+      status: 'skipped',
+      existingPostId: 4 }])[0]
+    const failed = mergeImportResults ([buildPostImportRow ({
+      skipReason: 'existing',
+      existingPostId: 4 })], [{
+      sourceRow: 1,
+      status: 'failed',
+      recoverable: true,
+      errors: { base: ['failure'] } }])[0]
+
+    expect (created).toMatchObject ({
+      importStatus: 'created',
+      createdPostId: 3,
+      existingPostId: undefined,
+      recoverable: undefined,
+      skipReason: undefined })
+    expect (skipped).toMatchObject ({
+      importStatus: 'skipped',
+      existingPostId: 4,
+      createdPostId: undefined,
+      recoverable: undefined,
+      skipReason: 'existing' })
+    expect (failed).toMatchObject ({
+      importStatus: 'failed',
+      recoverable: true,
+      createdPostId: undefined,
+      existingPostId: undefined,
+      skipReason: undefined,
+      importErrors: { base: ['failure'] } })
+  })
+
+  it ('retries only the selected failed row and counts results exclusively', () => {
+    const rows = [
+      buildPostImportRow ({ sourceRow: 1, importStatus: 'created', createdPostId: 1 }),
+      buildPostImportRow ({ sourceRow: 2, importStatus: 'skipped',
+	existingPostId: 2, skipReason: 'existing' }),
+      buildPostImportRow ({ sourceRow: 3, importStatus: 'failed',
+	recoverable: true, importErrors: { base: ['failed'] } }),
+      buildPostImportRow ({ sourceRow: 4, importStatus: 'pending',
+	recoverable: true, validationErrors: { base: ['failed'] } })]
+
+    expect (resultSummaryCounts (rows)).toEqual ({ created: 1, skipped: 1, failed: 2 })
+    expect (retryImportRow (rows, 3)[2]).toMatchObject ({
+      importStatus: 'pending',
+      importErrors: undefined })
+    expect (retryImportRow (rows, 4)[3]).toBe (rows[3])
+  })
+
+  it ('deduplicates messages and keeps repair mode only for repairable rows', () => {
+    const repairable = buildPostImportRow ({
+      sourceRow: 1,
+      importStatus: 'pending',
+      validationErrors: { title: ['invalid'], base: ['duplicate'] },
+      importErrors: { base: ['duplicate'], url: ['network'] } })
+    const complete = buildPostImportRow ({
+      sourceRow: 2,
+      importStatus: 'created',
+      createdPostId: 2 })
+
+    expect (resultRowMessages (repairable)).toEqual (['invalid', 'duplicate', 'network'])
+    expect (resultRepairMode ([repairable, complete])).toBe ('failed')
+    expect (resultRepairMode ([complete])).toBe ('all')
+  })
+
+  it ('classifies editable and retryable rows by terminal and recoverable state', () => {
+    const ready = buildPostImportRow ()
+    const skipped = buildPostImportRow ({
+      importStatus: 'skipped',
+      skipReason: 'existing',
+      existingPostId: 2 })
+    const hardFailed = buildPostImportRow ({
+      importStatus: 'failed',
+      importErrors: { base: ['failed'] } })
+    const pendingInvalid = buildPostImportRow ({
+      importStatus: 'pending',
+      recoverable: true,
+      validationErrors: { title: ['invalid'] } })
+    const pendingValid = buildPostImportRow ({
+      importStatus: 'pending',
+      recoverable: true })
+
+    expect (canEditReviewRow (ready)).toBe (true)
+    expect (canEditReviewRow (skipped)).toBe (false)
+    expect (canEditReviewRow (hardFailed)).toBe (false)
+    expect (canEditResultRow (pendingInvalid)).toBe (true)
+    expect (canRetryResultRow (pendingInvalid)).toBe (false)
+    expect (canRetryResultRow (pendingValid)).toBe (true)
+  })
+
+  it ('detects missing, duplicate, and extra source rows exactly', () => {
+    expect (hasExactSourceRows ([1, 2], [{ sourceRow: 1 }, { sourceRow: 2 }])).toBe (true)
+    expect (hasExactSourceRows ([1, 2], [{ sourceRow: 1 }])).toBe (false)
+    expect (hasExactSourceRows ([1, 2], [{ sourceRow: 1 }, { sourceRow: 1 }])).toBe (false)
+    expect (hasExactSourceRows ([1, 2], [{ sourceRow: 1 }, { sourceRow: 3 }])).toBe (false)
+  })
+
+  it ('merges only the validated source row and preserves other row edits', () => {
+    const edited = buildPostImportRow ({
+      sourceRow: 1,
+      attributes: { title: 'edited row' },
+      provenance: { title: 'manual' } })
+    const other = buildPostImportRow ({
+      sourceRow: 2,
+      attributes: { title: 'keep me' },
+      provenance: { title: 'manual' } })
+    const validated = buildPostImportRow ({
+      sourceRow: 1,
+      attributes: { title: 'validated row' } })
+
+    const result = mergeValidatedImportRow ([edited, other], validated)
+
+    expect (result[0]?.attributes.title).toBe ('validated row')
+    expect (result[1]?.attributes.title).toBe ('keep me')
+  })
+
+  it ('replaces only the targeted source row and preserves the others', () => {
+    const original = buildPostImportRow ({
+      sourceRow: 1,
+      importStatus: 'failed',
+      recoverable: true,
+      importErrors: { base: ['failed'] } })
+    const other = buildPostImportRow ({
+      sourceRow: 2,
+      attributes: { title: 'keep edited row' } })
+    const restored = buildPostImportRow ({
+      sourceRow: 1,
+      importStatus: 'failed',
+      recoverable: true,
+      importErrors: { base: ['failed'] } })
+
+    const result = replaceImportRow ([original, other], restored)
+
+    expect (result[0]).toEqual (restored)
+    expect (result[1]?.attributes.title).toBe ('keep edited row')
+  })
+
+  it ('copies reset snapshot values instead of sharing mutable records', () => {
+    const row = buildPostImportRow ({ fieldWarnings: { title: ['warning'] } })
+    const initialised = initialisePreviewRows ([row])[0]
+    expect (initialised).toBeDefined ()
+    if (initialised == null)
+      return
+
+    initialised.attributes.title = 'changed'
+    initialised.fieldWarnings.title?.push ('another')
+
+    expect (initialised.resetSnapshot.attributes.title).toBe ('')
+    expect (initialised.resetSnapshot.fieldWarnings.title).toEqual (['warning'])
+  })
+
+  it ('builds the next edited row with shared repair semantics', () => {
+    const row = buildPostImportRow ({
+      url: 'https://example.com/original',
+      importStatus: 'failed',
+      recoverable: true,
+      importErrors: { base: ['failed'] },
+      attributes: { title: 'old title', tags: 'old-tag', duration: '2' },
+      provenance: { title: 'automatic', tags: 'automatic', url: 'manual' },
+      tagSources: { automatic: 'old-tag', manual: '' } })
+
+    const nextRow = buildNextEditedRow (
+        row,
+        {
+          url: 'https://example.com/edited',
+          title: 'edited title',
+          thumbnailBase: '',
+          originalCreatedFrom: '',
+          originalCreatedBefore: '',
+          duration: '2',
+          tags: 'edited-tag',
+          parentPostIds: '' },
+        true)
+
+    expect (nextRow.importStatus).toBe ('pending')
+    expect (nextRow.importErrors).toBeUndefined ()
+    expect (nextRow.url).toBe ('https://example.com/edited')
+    expect (nextRow.attributes.title).toBe ('edited title')
+    expect (nextRow.attributes.duration).toBe ('2')
+    expect (nextRow.attributes.tags).toBe ('edited-tag')
+    expect (nextRow.provenance.title).toBe ('manual')
+    expect (nextRow.provenance.url).toBe ('manual')
+    expect (nextRow.tagSources?.manual).toBe ('edited-tag')
+  })
+})

frontend/src/lib/postImportRows.ts

@@ -0,0 +1,421 @@
+import type { PostImportEditableDraft,
+	      PostImportResultRow,
+	      PostImportRow } from '@/lib/postImportTypes'
+
+const THUMBNAIL_MISSING_WARNING = 'サムネールなし'
+
+export const hasThumbnailBaseValue = (value: unknown): boolean =>
+    typeof value === 'string' && value.trim () !== ''
+
+export const hasVideoTag = (value: unknown): boolean =>
+    typeof value === 'string'
+    && value.split (/\s+/).includes ('動画')
+
+export const isExistingSkipRow = (row: PostImportRow): boolean =>
+    row.skipReason === 'existing'
+
+
+export const isManualSkipRow = (row: PostImportRow): boolean =>
+    row.skipReason === 'manual'
+
+
+const hasSkipReason = (row: PostImportRow): boolean =>
+    row.skipReason != null
+
+export const compactMessageRecord = (
+    messages: Record<string, string[]>,
+): Record<string, string[]> =>
+    Object.fromEntries (
+	Object.entries (messages).filter (([, values]) => values.length > 0))
+
+
+export const hasErrorMessages = (
+    messages: Record<string, string[]>,
+): boolean =>
+    Object.values (messages).some (values => values.length > 0)
+
+
+const hasValidationErrors = (row: PostImportRow): boolean =>
+    hasErrorMessages (row.validationErrors ?? { })
+
+const isRecoverableRow = (row: PostImportRow): boolean =>
+    row.recoverable === true
+
+const isRepairableImportStatus = (row: PostImportRow): boolean =>
+    isRecoverableRow (row)
+    && (row.importStatus === 'failed' || row.importStatus === 'pending')
+
+
+export const isNonRecoverableFailedRow = (row: PostImportRow): boolean =>
+    row.importStatus === 'failed' && row.recoverable !== true
+
+
+export const isTerminalRow = (row: PostImportRow): boolean =>
+    row.importStatus === 'created'
+    || row.importStatus === 'skipped'
+    || isNonRecoverableFailedRow (row)
+
+
+export const isCompletedReviewRow = (row: PostImportRow): boolean =>
+    row.importStatus === 'created'
+    || row.importStatus === 'skipped'
+    || hasSkipReason (row)
+
+
+export const validatableImportRows = (rows: PostImportRow[]): PostImportRow[] =>
+    rows.filter (row => !(hasSkipReason (row)) && !(isTerminalRow (row)))
+
+const buildResetSnapshot = (row: PostImportRow) => ({
+    url: row.url,
+    attributes: { ...row.attributes },
+    displayTags: row.displayTags?.map (tag => ({
+	name: tag.name,
+	category: tag.category,
+	sectionLiterals: tag.sectionLiterals == null ? undefined : [...tag.sectionLiterals] })) ?? [],
+    provenance: { ...row.provenance },
+    tagSources: {
+	automatic: row.tagSources?.automatic ?? '',
+	manual: row.tagSources?.manual ?? '' },
+    fieldWarnings: Object.fromEntries (
+	Object.entries (row.fieldWarnings).map (([key, values]) => [key, [...values]])),
+    baseWarnings: [...row.baseWarnings],
+    metadataUrl: row.metadataUrl })
+
+const deduped = (values: string[]): string[] =>
+    [...new Set (values)]
+
+
+const thumbnailWarnings = (row: PostImportRow): string[] => {
+    const current = row.fieldWarnings.thumbnailBase ?? []
+    const others = current.filter (message => message !== THUMBNAIL_MISSING_WARNING)
+    return hasThumbnailBaseValue (row.attributes.thumbnailBase) || row.thumbnailFile != null
+        ? others
+        : deduped ([...others, THUMBNAIL_MISSING_WARNING])
+}
+
+
+export const applyThumbnailWarning = (row: PostImportRow): PostImportRow => ({
+    ...row,
+    fieldWarnings: compactMessageRecord ({
+	...row.fieldWarnings,
+	thumbnailBase: thumbnailWarnings (row) }) })
+
+
+export const applyThumbnailWarnings = (rows: PostImportRow[]): PostImportRow[] =>
+    rows.map (row => applyThumbnailWarning (row))
+
+
+export const processableImportRows = (rows: PostImportRow[]): PostImportRow[] =>
+    validatableImportRows (rows).filter (row => {
+      if (row.status === 'pending')
+        return false
+      if (row.importStatus === 'created')
+        return false
+      if (row.importStatus === 'skipped')
+        return false
+      if (row.importStatus === 'failed')
+        return false
+      if (hasValidationErrors (row))
+        return false
+      return row.importStatus == null || row.importStatus === 'pending'
+    })
+
+export const creatableImportRows = (rows: PostImportRow[]): PostImportRow[] =>
+    processableImportRows (rows).filter (row => !(hasSkipReason (row)))
+
+
+export const reviewSummaryCounts = (rows: PostImportRow[]) => ({
+    creatable: rows.filter (row => creatableImportRows ([row]).length > 0).length,
+    manualSkipped: rows.filter (row => isManualSkipRow (row)).length,
+    existingSkipped: rows.filter (row => isExistingSkipRow (row)).length,
+    pendingOrError: rows.filter (row =>
+        !(isCompletedReviewRow (row))
+        && creatableImportRows ([row]).length === 0).length })
+
+
+export const resultSummaryCounts = (rows: PostImportRow[]) =>
+    rows.reduce (
+        (counts, row) => {
+          if (row.importStatus === 'created')
+            {
+              ++counts.created
+              return counts
+            }
+          if (row.importStatus === 'skipped')
+            {
+              ++counts.skipped
+              return counts
+            }
+          if (row.importStatus === 'failed'
+              || (row.recoverable === true && row.importStatus === 'pending'))
+            ++counts.failed
+          return counts
+        },
+        { created: 0, skipped: 0, failed: 0 })
+
+
+export const resultRepairMode = (
+    rows: PostImportRow[],
+): 'all' | 'failed' =>
+    rows.some (row => hasValidationErrors (row) || isRepairableImportStatus (row))
+    ? 'failed'
+    : 'all'
+
+
+export const canEditReviewRow = (row: PostImportRow): boolean =>
+    !(hasSkipReason (row)
+      || row.importStatus === 'created'
+      || row.importStatus === 'skipped'
+      || (row.importStatus === 'failed' && row.recoverable !== true))
+
+
+export const canEditResultRow = (row: PostImportRow): boolean =>
+    row.skipReason == null
+    && row.recoverable === true
+    && (row.importStatus === 'failed'
+        || (row.importStatus === 'pending' && hasValidationErrors (row)))
+
+
+export const canRetryResultRow = (row: PostImportRow): boolean =>
+    row.skipReason == null
+    && row.recoverable === true
+    && (row.importStatus === 'failed'
+        || (row.importStatus === 'pending' && !(hasValidationErrors (row))))
+
+
+export const resultRowMessages = (row: PostImportRow): string[] =>
+    [...new Set ([
+        ...Object.values (row.validationErrors ?? { }).flat (),
+        ...Object.values (row.importErrors ?? { }).flat ()])]
+
+
+export const resultRowWarnings = (row: PostImportRow): string[] =>
+    [...new Set ([
+        ...Object.values (row.fieldWarnings ?? { }).flat (),
+        ...row.baseWarnings])]
+
+
+const isManualChange = (
+    current: unknown,
+    next:    string,
+): boolean =>
+    next !== String (current ?? '')
+
+
+export const buildNextEditedRow = (
+    editingRow:  PostImportRow,
+    draft:       PostImportEditableDraft,
+    urlChanged:  boolean,
+): PostImportRow => {
+    const nextProvenance = { ...editingRow.provenance }
+    const nextAttributes = { ...editingRow.attributes }
+    const nextTagSources = {
+	automatic: editingRow.tagSources?.automatic ?? '',
+	manual: editingRow.tagSources?.manual ?? '' }
+    const draftFields = [
+	['title', draft.title],
+	['thumbnailBase', draft.thumbnailBase],
+	['originalCreatedFrom', draft.originalCreatedFrom],
+	['originalCreatedBefore', draft.originalCreatedBefore],
+	['duration', draft.duration],
+	['parentPostIds', draft.parentPostIds]] as const
+    draftFields.forEach (([field, value]) => {
+	nextAttributes[field] = value
+	nextProvenance[field] =
+	    isManualChange (editingRow.attributes[field], value)
+	    ? 'manual'
+	    : (editingRow.provenance[field] ?? 'automatic')
+    })
+    nextAttributes.tags = draft.tags
+    if (isManualChange (editingRow.attributes.tags, draft.tags))
+      {
+	nextProvenance.tags = 'manual'
+	nextTagSources.manual = draft.tags
+      }
+    else
+      {
+	nextProvenance.tags = editingRow.provenance.tags ?? 'automatic'
+	nextTagSources.manual = editingRow.tagSources?.manual ?? ''
+      }
+
+    return {
+	...editingRow,
+	url: draft.url,
+	attributes: nextAttributes,
+	displayTags:
+	    editingRow.displayTags?.map (tag => ({
+		name: tag.name,
+		category: tag.category,
+		sectionLiterals: tag.sectionLiterals == null ? undefined : [...tag.sectionLiterals] })),
+	thumbnailFile: draft.thumbnailFile,
+	provenance: {
+	    ...nextProvenance,
+	    url: urlChanged ? 'manual' : (editingRow.provenance.url ?? 'manual') },
+	tagSources: nextTagSources,
+	importStatus: editingRow.importStatus === 'created' ? 'created' : 'pending',
+	importErrors: undefined }
+}
+
+
+export const hasExactSourceRows = (
+    expected: number[],
+    actual:   Array<{ sourceRow: number }>,
+): boolean => {
+    if (expected.length !== actual.length)
+      return false
+
+    const expectedSorted = [...expected].sort ((a, b) => a - b)
+    const actualSorted = actual.map (row => row.sourceRow).sort ((a, b) => a - b)
+    return expectedSorted.every ((value, index) => value === actualSorted[index])
+}
+
+
+export const replaceImportRow = (
+    rows:      PostImportRow[],
+    nextRow:   PostImportRow,
+): PostImportRow[] =>
+    rows.map (row => row.sourceRow === nextRow.sourceRow ? nextRow : row)
+
+
+export const mergeValidatedImportRow = (
+    rows:      PostImportRow[],
+    validated: PostImportRow,
+): PostImportRow[] => {
+    const current = rows.find (row => row.sourceRow === validated.sourceRow)
+    if (current == null)
+      return rows
+
+    const [merged] = mergeValidatedImportRows ([current], [validated])
+    return merged == null ? rows : replaceImportRow (rows, merged)
+}
+
+
+export const mergeValidatedImportRows = (
+    current:   PostImportRow[],
+    validated: PostImportRow[],
+): PostImportRow[] => {
+    const validatedMap = new Map (validated.map (row => [row.sourceRow, row]))
+    return current.map (previous => {
+      if (
+          previous.importStatus === 'created'
+          || previous.importStatus === 'skipped'
+          || previous.importStatus === 'failed')
+        return previous
+
+      const row = validatedMap.get (previous.sourceRow)
+      if (row == null)
+        return previous
+
+      const fieldWarnings =
+          hasErrorMessages (row.fieldWarnings) || row.metadataUrl !== previous.metadataUrl
+          ? { ...row.fieldWarnings }
+          : { ...previous.fieldWarnings }
+      for (const [field, origin] of Object.entries (row.provenance))
+        {
+          if (origin === 'manual')
+            delete fieldWarnings[field]
+        }
+
+      return {
+          ...previous,
+          url: row.url,
+          attributes: row.attributes,
+          displayTags:
+              row.displayTags?.map (tag => ({
+                  name: tag.name,
+                  category: tag.category,
+                  sectionLiterals:
+                      tag.sectionLiterals == null ? undefined : [...tag.sectionLiterals] })),
+          provenance: row.provenance,
+          tagSources: row.tagSources,
+          skipReason: row.skipReason,
+          existingPostId: row.existingPostId,
+          existingPost: row.existingPost,
+          fieldWarnings,
+          baseWarnings:
+              row.baseWarnings.length > 0 || row.metadataUrl !== previous.metadataUrl
+              ? row.baseWarnings
+              : previous.baseWarnings,
+          validationErrors: row.validationErrors,
+          status: row.status,
+          metadataUrl: row.metadataUrl,
+          resetSnapshot:
+              row.metadataUrl !== previous.metadataUrl
+              ? buildResetSnapshot (row)
+              : previous.resetSnapshot }
+    })
+}
+
+
+export const mergeImportResults = (
+    rows:    PostImportRow[],
+    results: PostImportResultRow[],
+): PostImportRow[] => {
+    const resultMap = new Map (results.map (row => [row.sourceRow, row]))
+    return rows.map (row => {
+      const result = resultMap.get (row.sourceRow)
+      if (result == null)
+        return row
+
+      switch (result.status)
+        {
+        case 'created':
+          return {
+              ...row,
+              importStatus: 'created',
+              recoverable: undefined,
+              skipReason: undefined,
+              createdPostId: result.post.id,
+              existingPostId: undefined,
+              existingPost: undefined,
+              fieldWarnings: compactMessageRecord (
+		  result.fieldWarnings ?? row.fieldWarnings),
+              baseWarnings: result.baseWarnings ?? row.baseWarnings,
+              importErrors: compactMessageRecord (result.errors ?? { }) }
+        case 'skipped':
+          return {
+              ...row,
+              importStatus: 'skipped',
+              recoverable: undefined,
+              skipReason: 'existing',
+              createdPostId: undefined,
+              existingPostId: result.existingPostId,
+              existingPost: result.existingPost ?? row.existingPost,
+              fieldWarnings: compactMessageRecord (
+		  result.fieldWarnings ?? row.fieldWarnings),
+              baseWarnings: result.baseWarnings ?? row.baseWarnings,
+              importErrors: compactMessageRecord (result.errors ?? { }) }
+        case 'failed':
+          return {
+              ...row,
+              importStatus: 'failed',
+              recoverable: result.recoverable === true ? true : undefined,
+              skipReason: undefined,
+              createdPostId: undefined,
+              existingPostId: undefined,
+              existingPost: undefined,
+              fieldWarnings: compactMessageRecord (
+		  result.fieldWarnings ?? row.fieldWarnings),
+              baseWarnings: result.baseWarnings ?? row.baseWarnings,
+              importErrors: compactMessageRecord (result.errors ?? { }) }
+        }
+    })
+}
+
+
+export const retryImportRow = (
+    rows:      PostImportRow[],
+    sourceRow: number,
+): PostImportRow[] =>
+    rows.map (row =>
+        row.sourceRow === sourceRow
+        && row.importStatus === 'failed'
+        && row.recoverable === true
+        ? { ...row, importStatus: 'pending', importErrors: undefined }
+        : row)
+
+export const initialisePreviewRows = (rows: PostImportRow[]): PostImportRow[] =>
+    applyThumbnailWarnings (
+	rows.map (row => ({
+	    ...row,
+	    resetSnapshot: buildResetSnapshot (row) })))

frontend/src/lib/postImportSourceValidation.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+    countImportSourceLines,
+    validateImportSource,
+} from '@/lib/postImportSourceValidation'
+
+describe ('post import source validation', () => {
+  it ('counts trimmed non-empty CRLF and LF rows', () => {
+    expect (countImportSourceLines (' one \r\n\r\n two\n')).toBe (2)
+  })
+
+  it ('reports invalid protocols and malformed URLs with original line numbers', () => {
+    const issues = validateImportSource (
+        '\nftp://example.com/file\nhttps://exa mple.com/path')
+
+    expect (issues).toEqual ([
+      {
+	sourceRow: 2,
+	message: 'HTTP または HTTPS の URL ではありません．',
+	url: 'ftp://example.com/file' },
+      {
+	sourceRow: 3,
+	message: 'URL の形式が不正です．',
+	url: 'https://exa mple.com/path' }])
+  })
+
+  it ('detects duplicates after frontend URL normalisation', () => {
+    const issues = validateImportSource (
+        'https://EXAMPLE.com/path/\nhttps://example.com/path')
+
+    expect (issues).toEqual ([{
+      sourceRow: 2,
+      message: '1 行目と同じ URL です．',
+      url: 'https://example.com/path' }])
+  })
+
+  it ('rejects oversized URLs and rows beyond the maximum count', () => {
+    const oversized = `https://example.com/${ 'a'.repeat (20 * 1024) }`
+    const tooMany = Array.from (
+        { length: 101 },
+        (_, index) => `https://example.com/${ index }`).join ('\n')
+
+    expect (validateImportSource (oversized)[0]).toMatchObject ({
+      sourceRow: 1,
+      message: 'URL が長すぎます．' })
+    expect (validateImportSource (tooMany).at (-1)).toEqual ({
+      sourceRow: 101,
+      message: '取込件数は 100 件までです．',
+      url: 'https://example.com/100' })
+  })
+})

frontend/src/lib/postImportSourceValidation.ts

@@ -0,0 +1,121 @@
+import type { PostImportSourceIssue } from '@/lib/postImportTypes'
+
+const MAX_ROWS = 100
+const MAX_URL_BYTES = 20 * 1024
+
+
+const truncateUrl = (value: string): string =>
+    value.length > 120 ? `${ value.slice (0, 117) }…` : value
+
+
+const bytesize = (value: string): number =>
+    new TextEncoder ().encode (value).length
+
+
+const parseImportUrl = (value: string): URL | null => {
+    const trimmed = value.trim ()
+    if (!(trimmed))
+      return null
+
+    try
+    {
+      return new URL (trimmed)
+    }
+    catch
+    {
+      return null
+    }
+}
+
+
+const normaliseImportUrl = (url: URL): string => {
+  url.hostname = url.hostname.toLowerCase ()
+  if (url.pathname.endsWith ('/'))
+    url.pathname = url.pathname.replace (/\/+$/, '')
+  return url.toString ()
+}
+
+
+export const extractImportSourceUrls = (source: string): string[] =>
+    source
+        .split (/\r\n|\n|\r/)
+        .map (line => line.trim ())
+        .filter (line => line !== '')
+
+
+export const countImportSourceLines = (source: string): number =>
+    extractImportSourceUrls (source).length
+
+
+export const validateImportSource = (
+    source: string,
+): PostImportSourceIssue[] => {
+    const lines = source.split (/\r\n|\n|\r/)
+    const issues: PostImportSourceIssue[] = []
+    const seen = new Map<string, number> ()
+    let count = 0
+
+    lines.forEach ((rawLine, index) => {
+      const value = rawLine.trim ()
+      if (!(value))
+        return
+
+      ++count
+      const sourceRow = index + 1
+      const displayUrl = truncateUrl (value)
+      if (count > MAX_ROWS)
+        {
+          issues.push ({
+              sourceRow,
+              message: `取込件数は ${ MAX_ROWS } 件までです．`,
+              url: displayUrl })
+          return
+        }
+      if (bytesize (value) > MAX_URL_BYTES)
+        {
+          issues.push ({
+              sourceRow,
+              message: 'URL が長すぎます．',
+              url: displayUrl })
+          return
+        }
+      const parsed = parseImportUrl (value)
+      if (parsed == null)
+        {
+          issues.push ({
+              sourceRow,
+              message: 'URL の形式が不正です．',
+              url: displayUrl })
+          return
+        }
+      if (!(parsed.protocol === 'http:' || parsed.protocol === 'https:'))
+        {
+          issues.push ({
+              sourceRow,
+              message: 'HTTP または HTTPS の URL ではありません．',
+              url: displayUrl })
+          return
+        }
+      if (!(parsed.host))
+        {
+          issues.push ({
+              sourceRow,
+              message: 'URL の形式が不正です．',
+              url: displayUrl })
+          return
+        }
+      const normalised = normaliseImportUrl (parsed)
+      const duplicateRow = seen.get (normalised)
+      if (duplicateRow != null)
+        {
+          issues.push ({
+              sourceRow,
+              message: `${ duplicateRow } 行目と同じ URL です．`,
+              url: displayUrl })
+          return
+        }
+      seen.set (normalised, sourceRow)
+    })
+
+    return issues
+}

frontend/src/lib/postImportStorage.test.ts

@@ -0,0 +1,40 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+    clearPostImportSourceDraft,
+    loadPostImportSourceDraft,
+    savePostImportSourceDraft,
+} from '@/lib/postImportStorage'
+
+describe ('post import source draft storage', () => {
+  beforeEach (() => {
+    sessionStorage.clear ()
+    vi.restoreAllMocks ()
+  })
+
+  it ('round-trips and clears the URL list source draft', () => {
+    expect (savePostImportSourceDraft ('https://example.com')).toBe (true)
+    expect (loadPostImportSourceDraft ()).toEqual ({
+	source: 'https://example.com' })
+
+    clearPostImportSourceDraft ()
+
+    expect (loadPostImportSourceDraft ()).toEqual ({ source: '' })
+  })
+
+  it ('ignores malformed stored drafts', () => {
+    sessionStorage.setItem ('post-import-source-draft', '{')
+
+    expect (loadPostImportSourceDraft ()).toEqual ({ source: '' })
+  })
+
+  it ('reports storage access failures without throwing', () => {
+    const onError = vi.fn ()
+    vi.spyOn (Storage.prototype, 'setItem').mockImplementation (() => {
+      throw new DOMException ('quota')
+    })
+
+    expect (savePostImportSourceDraft ('source', onError)).toBe (false)
+    expect (onError).toHaveBeenCalledWith ('ブラウザへ保存できませんでした．')
+  })
+})

frontend/src/lib/postImportStorage.ts

@@ -0,0 +1,94 @@
+import type { StorageErrorHandler } from '@/lib/postImportTypes'
+
+const SOURCE_DRAFT_KEY = 'post-import-source-draft'
+
+
+const readStorage = (
+    key:       string,
+    onError?:  StorageErrorHandler,
+): string | null => {
+  if (typeof window === 'undefined')
+    return null
+
+  try
+  {
+    return sessionStorage.getItem (key)
+  }
+  catch
+  {
+    onError?.('保存済みデータを読み込めませんでした．')
+    return null
+  }
+}
+
+
+const writeStorage = (
+    key:       string,
+    value:     string,
+    onError?:  StorageErrorHandler,
+): boolean => {
+  if (typeof window === 'undefined')
+    return false
+
+  try
+  {
+    sessionStorage.setItem (key, value)
+    return true
+  }
+  catch
+  {
+    onError?.('ブラウザへ保存できませんでした．')
+    return false
+  }
+}
+
+
+const removeStorage = (
+    key:       string,
+    onError?:  StorageErrorHandler,
+) => {
+  if (typeof window === 'undefined')
+    return
+
+  try
+  {
+    sessionStorage.removeItem (key)
+  }
+  catch
+  {
+    onError?.('保存済みデータを削除できませんでした．')
+  }
+}
+
+
+export const loadPostImportSourceDraft = (
+    onError?: StorageErrorHandler,
+): { source: string } => {
+  const raw = readStorage (SOURCE_DRAFT_KEY, onError)
+  if (raw == null)
+    return { source: '' }
+
+  try
+  {
+    const value = JSON.parse (raw) as { source?: string }
+    return { source: typeof value.source === 'string' ? value.source : '' }
+  }
+  catch
+  {
+    return { source: '' }
+  }
+}
+
+
+export const savePostImportSourceDraft = (
+    source:    string,
+    onError?:  StorageErrorHandler,
+): boolean =>
+    writeStorage (SOURCE_DRAFT_KEY, JSON.stringify ({ source }), onError)
+
+
+export const clearPostImportSourceDraft = (
+    onError?: StorageErrorHandler,
+) => {
+  removeStorage (SOURCE_DRAFT_KEY, onError)
+}

frontend/src/lib/postImportTypes.ts

@@ -0,0 +1,98 @@
+import type { Category } from '@/types'
+
+export type PostImportOrigin = 'automatic' | 'manual'
+export type PostImportRepairMode = 'all' | 'failed'
+export type PostImportStatus =
+    'pending'
+    | 'created'
+    | 'skipped'
+    | 'failed'
+export type PostImportSkipReason = 'existing' | 'manual'
+export type PostImportResultStatus = 'created' | 'skipped' | 'failed'
+export type PostImportAttributeValue = string | number
+
+export type PostImportDisplayTag = {
+    name:            string
+    category:        Category
+    sectionLiterals?: string[] }
+
+export type PostImportResetSnapshot = {
+    url:         string
+    attributes:  Record<string, PostImportAttributeValue>
+    displayTags: PostImportDisplayTag[]
+    provenance:  Record<string, PostImportOrigin>
+    tagSources:  Record<PostImportOrigin, string>
+    fieldWarnings: Record<string, string[]>
+    baseWarnings: string[]
+    metadataUrl?: string }
+
+export type PostImportExistingPost = {
+    id:            number
+    title:         string
+    url:           string
+    thumbnail?:    string | null
+    thumbnailBase?: string | null }
+
+export type PostImportRow = {
+    sourceRow:         number
+    url:               string
+    attributes:        Record<string, PostImportAttributeValue>
+    fieldWarnings:     Record<string, string[]>
+    baseWarnings:      string[]
+    validationErrors:  Record<string, string[]>
+    importErrors?:     Record<string, string[]>
+    provenance:        Record<string, PostImportOrigin>
+    tagSources?:       Record<PostImportOrigin, string>
+    status:            'pending' | 'ready' | 'warning' | 'error'
+    skipReason?:       PostImportSkipReason
+    existingPostId?:   number
+    existingPost?:     PostImportExistingPost
+    metadataUrl?:      string
+    displayTags?:      PostImportDisplayTag[]
+    resetSnapshot:     PostImportResetSnapshot
+    createdPostId?:    number
+    importStatus?:     PostImportStatus
+    recoverable?:      boolean
+    thumbnailFile?:    File }
+
+export type PostImportResultRow =
+    | {
+	sourceRow: number
+	status:    'created'
+	post:      { id: number }
+	fieldWarnings?: Record<string, string[]>
+	baseWarnings?:  string[]
+	errors?:   Record<string, string[]> }
+    | {
+	sourceRow:      number
+	status:         'skipped'
+	existingPostId: number
+	existingPost?:  PostImportExistingPost
+	fieldWarnings?: Record<string, string[]>
+	baseWarnings?:  string[]
+	errors?:        Record<string, string[]> }
+    | {
+	sourceRow: number
+	status:    'failed'
+	fieldWarnings?: Record<string, string[]>
+	baseWarnings?:  string[]
+	errors?:   Record<string, string[]>
+	recoverable?: boolean }
+
+export type PostImportSourceIssue = {
+    sourceRow: number
+    message:   string
+    url:       string }
+
+export type PostImportEditableDraft = {
+    url:                   string
+    title:                 string
+    thumbnailBase:         string
+    originalCreatedFrom:   string
+    originalCreatedBefore: string
+    duration:              string
+    tags:                  string
+    parentPostIds:         string
+    thumbnailFile?:        File }
+
+export type StorageErrorHandler = (message: string) => void

frontend/src/lib/postNewQueryState.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+    buildPostNewReviewPath,
+    hasPostNewReviewState,
+    isPostNewReviewPathWithinLimit,
+    parsePostNewReviewUrls,
+    postNewReviewPathByteLength,
+} from '@/lib/postNewQueryState'
+
+describe ('post new review URL state', () => {
+  it ('encodes each URL separately and preserves literal plus signs', () => {
+    const urls = [
+	'https://example.com/one+a',
+	'https://example.com/two?value=b+c']
+
+    const path = buildPostNewReviewPath (urls)
+
+    expect (path).toBe (
+	'/posts/new?urls=https%3A%2F%2Fexample.com%2Fone%2Ba'
+	+ '+https%3A%2F%2Fexample.com%2Ftwo%3Fvalue%3Db%2Bc')
+    expect (parsePostNewReviewUrls (path.slice ('/posts/new'.length))).toEqual (urls)
+  })
+
+  it ('uses only the raw urls parameter as review state', () => {
+    expect (hasPostNewReviewState ('?session_id=old&meta=old')).toBe (false)
+    expect (hasPostNewReviewState ('?unknown=value&urls=')).toBe (true)
+    expect (parsePostNewReviewUrls ('?unknown=value&urls=one+two&meta=old'))
+	.toEqual (['one', 'two'])
+  })
+
+  it ('allows at most a 6 143 byte request target', () => {
+    const baseUrl = 'https://example.com/'
+    const baseLength = postNewReviewPathByteLength ([baseUrl])
+    const allowed = `${ baseUrl }${ 'a'.repeat (6_143 - baseLength) }`
+    const denied = `${ allowed }a`
+
+    expect (postNewReviewPathByteLength ([allowed])).toBe (6_143)
+    expect (isPostNewReviewPathWithinLimit ([allowed])).toBe (true)
+    expect (postNewReviewPathByteLength ([denied])).toBe (6_144)
+    expect (isPostNewReviewPathWithinLimit ([denied])).toBe (false)
+  })
+})

frontend/src/lib/postNewQueryState.ts

@@ -0,0 +1,58 @@
+const POST_NEW_REVIEW_PATH_PREFIX = '/posts/new?urls='
+const MAX_POST_NEW_REVIEW_TARGET_BYTES = 6_144
+
+const textEncoder = new TextEncoder ()
+
+
+const rawUrlsParam = (search: string): string | null => {
+  const query = search.startsWith ('?') ? search.slice (1) : search
+  if (query === '')
+    return null
+
+  for (const segment of query.split ('&'))
+    {
+      if (segment === 'urls')
+        return ''
+      if (segment.startsWith ('urls='))
+        return segment.slice ('urls='.length)
+    }
+
+  return null
+}
+
+
+export const buildPostNewReviewPath = (urls: string[]): string =>
+    `${ POST_NEW_REVIEW_PATH_PREFIX }${ urls.map (url => encodeURIComponent (url)).join ('+') }`
+
+
+export const postNewReviewPathByteLength = (urls: string[]): number =>
+    textEncoder.encode (buildPostNewReviewPath (urls)).byteLength
+
+
+export const isPostNewReviewPathWithinLimit = (urls: string[]): boolean =>
+    postNewReviewPathByteLength (urls) < MAX_POST_NEW_REVIEW_TARGET_BYTES
+
+
+export const parsePostNewReviewUrls = (search: string): string[] => {
+  const raw = rawUrlsParam (search)
+  if (raw == null)
+    return []
+
+  return raw
+      .split ('+')
+      .filter (segment => segment !== '')
+      .map (segment => {
+        try
+        {
+          return decodeURIComponent (segment)
+        }
+        catch
+        {
+          return segment
+        }
+      })
+}
+
+
+export const hasPostNewReviewState = (search: string): boolean =>
+    rawUrlsParam (search) != null

frontend/src/lib/useKeyboardShortcuts.tsx

@@ -25,7 +25,6 @@ import {
     getEffectiveKeyBindings,
     setClientKeyboardSettings,
 } from '@/lib/settings'
-import { useUnsavedChangesGuard } from '@/lib/useUnsavedChangesGuard'
 
 import type {
     KeyBinding,
@@ -97,7 +96,6 @@ const focusSearchTarget = (): void => {
 export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
   const location = useLocation ()
   const navigate = useNavigate ()
-  const { confirmDiscardNavigation } = useUnsavedChangesGuard ()
 
   const [keyboardSettings, setKeyboardSettingsState] =
       useState<ClientKeyboardSettings> (() => getClientKeyboardSettings ())
@@ -149,11 +147,8 @@ export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
   }, [])
 
   const guardedNavigate = useCallback ((path: string) => {
-    confirmDiscardNavigation ().then (confirmed => {
-      if (confirmed)
-	navigate (path)
-    })
-  }, [confirmDiscardNavigation, navigate])
+    navigate (path)
+  }, [navigate])
 
   const builtinHandlers = useMemo<ShortcutHandlers> (
       () => ({

frontend/src/lib/useUnsavedChangesGuard.test.tsx

@@ -0,0 +1,77 @@
+import { fireEvent, screen, waitFor, within } from '@testing-library/react'
+import { useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+import { useUnsavedChangesGuard } from '@/lib/useUnsavedChangesGuard'
+import { renderWithProviders } from '@/test/render'
+
+const GuardHarness = () => {
+  const [dirty, setDirty] = useState (true)
+  const location = useLocation ()
+  const navigate = useNavigate ()
+  const discard = vi.fn (() => setDirty (false))
+  const { allowNextNavigation } = useUnsavedChangesGuard ({
+    dirty,
+    onDiscard: discard })
+
+  return (
+      <>
+	<output aria-label="location">{location.pathname}{location.search}</output>
+	<button type="button" onClick={() => navigate ('/next?tab=one')}>move</button>
+	<button
+	    type="button"
+	    onClick={() => {
+	      allowNextNavigation ()
+	      navigate ('/allowed')
+	    }}>
+	  allowed move
+	</button>
+      </>)
+}
+
+describe ('useUnsavedChangesGuard', () => {
+  it ('blocks route changes and resets a cancelled transition', async () => {
+    renderWithProviders (<GuardHarness/>, { route: '/current' })
+
+    fireEvent.click (screen.getByRole ('button', { name: 'move' }))
+
+    expect (within (await screen.findByRole ('dialog')).getByText (
+	'変更が破棄してページ移動しますか?')).toBeInTheDocument ()
+    expect (screen.getByLabelText ('location')).toHaveTextContent ('/current')
+
+    fireEvent.click (screen.getByRole ('button', { name: '取消' }))
+
+    await waitFor (() => {
+      expect (screen.queryByRole ('dialog')).not.toBeInTheDocument ()
+    })
+    expect (screen.getByLabelText ('location')).toHaveTextContent ('/current')
+  })
+
+  it ('proceeds with the blocked transition after discard is confirmed', async () => {
+    renderWithProviders (<GuardHarness/>, { route: '/current' })
+
+    fireEvent.click (screen.getByRole ('button', { name: 'move' }))
+    fireEvent.click (await screen.findByRole ('button', {
+      name: '変更を破棄して移動' }))
+
+    await waitFor (() => {
+      expect (screen.getByLabelText ('location')).toHaveTextContent ('/next?tab=one')
+    })
+  })
+
+  it ('allows only the next navigation without leaving a bypass token', async () => {
+    renderWithProviders (<GuardHarness/>, { route: '/current' })
+
+    fireEvent.click (screen.getByRole ('button', { name: 'allowed move' }))
+    await waitFor (() => {
+      expect (screen.getByLabelText ('location')).toHaveTextContent ('/allowed')
+    })
+
+    fireEvent.click (screen.getByRole ('button', { name: 'move' }))
+
+    expect (within (await screen.findByRole ('dialog')).getByText (
+	'変更が破棄してページ移動しますか?')).toBeInTheDocument ()
+    expect (screen.getByLabelText ('location')).toHaveTextContent ('/allowed')
+  })
+})

frontend/src/lib/useUnsavedChangesGuard.tsx

@@ -1,6 +1,15 @@
-import { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+import { useBlocker } from 'react-router-dom'
 
-import { useDialogue } from '@/components/dialogues/DialogueProvider'
+import { useDialogue } from '@/lib/dialogues/useDialogue'
 
 import type { FC, PropsWithChildren } from 'react'
 
@@ -8,12 +17,16 @@ type UnsavedChangesSource = {
     dirty:    boolean
     discard:  () => void | Promise<void> }
 
+type UseUnsavedChangesGuardOptions = {
+    dirty:      boolean
+    onDiscard?: () => void | Promise<void> }
+
 type UnsavedChangesGuardContextValue = {
-    hasUnsavedChanges:             boolean
-    registerUnsavedChangesSource:  (
-	source: UnsavedChangesSource | null,
-    ) => void
-    confirmDiscardNavigation:      () => Promise<boolean> }
+    hasUnsavedChanges:            boolean
+    registerUnsavedChangesSource: (
+        source: UnsavedChangesSource,
+    ) => () => void
+    allowNextNavigation:          () => void }
 
 const UnsavedChangesGuardContext =
     createContext<UnsavedChangesGuardContextValue | null> (null)
@@ -21,49 +34,171 @@ const UnsavedChangesGuardContext =
 
 export const UnsavedChangesGuardProvider: FC<PropsWithChildren> = ({ children }) => {
   const dialogue = useDialogue ()
-  const [source, setSource] = useState<UnsavedChangesSource | null> (null)
+  const sourcesRef = useRef (new Map<symbol, UnsavedChangesSource> ())
+  const bypassNextNavigationRef = useRef<symbol | null> (null)
+  const [revision, setRevision] = useState (0)
+  const dialogueOpenRef = useRef (false)
+  const handlingBlockedTransitionRef = useRef (false)
 
   const registerUnsavedChangesSource = useCallback ((
-      nextSource: UnsavedChangesSource | null,
-  ) => {
-    setSource (nextSource)
+      source: UnsavedChangesSource,
+  ): (() => void) => {
+    const sourceId = Symbol ('unsaved-changes-source')
+    sourcesRef.current.set (sourceId, source)
+    setRevision (current => current + 1)
+
+    return () => {
+      if (!(sourcesRef.current.delete (sourceId)))
+        return
+
+      setRevision (current => current + 1)
+    }
   }, [])
 
-  const confirmDiscardNavigation = useCallback (async (): Promise<boolean> => {
-    if (!(source?.dirty))
+  const allowNextNavigation = useCallback (() => {
+    const token = Symbol ('allowed-navigation')
+    bypassNextNavigationRef.current = token
+
+    queueMicrotask (() => {
+      if (bypassNextNavigationRef.current === token)
+        bypassNextNavigationRef.current = null
+    })
+  }, [])
+
+  const sources = useMemo (
+      () => [...sourcesRef.current.values ()],
+      [revision],
+  )
+  const dirtySources = useMemo (
+      () => sources.filter (source => source.dirty),
+      [sources],
+  )
+  const hasUnsavedChanges = dirtySources.length > 0
+  const hasUnsavedChangesRef = useRef (hasUnsavedChanges)
+  hasUnsavedChangesRef.current = hasUnsavedChanges
+  const shouldBlock = useCallback (() => {
+    if (bypassNextNavigationRef.current != null)
+      {
+        bypassNextNavigationRef.current = null
+        return false
+      }
+
+    return hasUnsavedChangesRef.current
+  }, [])
+  const blocker = useBlocker (shouldBlock)
+
+  const confirmDiscardChanges = useCallback (async (): Promise<boolean> => {
+    if (!(hasUnsavedChanges))
       return true
 
-    const confirmed = await dialogue.confirm ({
-	title: '未保存の変更があります',
-	description: 'このまま移動すると、保存していない変更は失われます。',
-	cancelText: 'このページに残る',
-	confirmText: '変更を破棄して移動',
-	variant: 'danger' })
-    if (!(confirmed))
+    if (dialogueOpenRef.current)
       return false
 
-    await source.discard ()
-    return true
-  }, [dialogue, source])
+    dialogueOpenRef.current = true
+
+    try
+    {
+      const confirmed = await dialogue.confirm ({
+          title: '変更が破棄してページ移動しますか?',
+          confirmText: '変更を破棄して移動',
+          variant: 'danger' })
+      if (!(confirmed))
+        return false
+
+      return true
+    }
+    finally
+    {
+      dialogueOpenRef.current = false
+    }
+  }, [dialogue, hasUnsavedChanges])
+
+  useEffect (() => {
+    if (blocker.state !== 'blocked' || handlingBlockedTransitionRef.current)
+      return
+
+    handlingBlockedTransitionRef.current = true
+    void (async () => {
+      try
+      {
+        const confirmed = await confirmDiscardChanges ()
+        if (!(confirmed))
+          {
+            blocker.reset ()
+            return
+          }
+
+        let discardResults: Array<void | Promise<void>>
+        try
+        {
+	  discardResults = dirtySources.map (source => source.discard ())
+        }
+        catch
+        {
+	  blocker.reset ()
+	  return
+        }
+
+        blocker.proceed ()
+        await Promise.allSettled (discardResults)
+      }
+      finally
+      {
+        handlingBlockedTransitionRef.current = false
+      }
+    }) ()
+  }, [blocker, confirmDiscardChanges, dirtySources])
+
+  useEffect (() => {
+    if (!(hasUnsavedChanges))
+      return
+
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      event.preventDefault ()
+      event.returnValue = ''
+    }
+
+    window.addEventListener ('beforeunload', handleBeforeUnload)
+    return () => {
+      window.removeEventListener ('beforeunload', handleBeforeUnload)
+    }
+  }, [hasUnsavedChanges])
 
   const value = useMemo<UnsavedChangesGuardContextValue> (() => ({
-      hasUnsavedChanges: source?.dirty === true,
+      hasUnsavedChanges,
       registerUnsavedChangesSource,
-      confirmDiscardNavigation,
-  }), [confirmDiscardNavigation, registerUnsavedChangesSource, source?.dirty])
+      allowNextNavigation,
+  }), [
+      allowNextNavigation,
+      hasUnsavedChanges,
+      registerUnsavedChangesSource,
+  ])
 
   return (
       <UnsavedChangesGuardContext.Provider value={value}>
-	{children}
+        {children}
       </UnsavedChangesGuardContext.Provider>)
 }
 
 
-export const useUnsavedChangesGuard = (): UnsavedChangesGuardContextValue => {
+export const useUnsavedChangesGuard = (
+    options?: UseUnsavedChangesGuardOptions,
+): UnsavedChangesGuardContextValue => {
   const context = useContext (UnsavedChangesGuardContext)
 
   if (context == null)
     throw new Error ('UnsavedChangesGuardProvider が必要です．')
 
+  const { registerUnsavedChangesSource } = context
+
+  useEffect (() => {
+    if (options == null)
+      return
+
+    return registerUnsavedChangesSource ({
+        dirty: options.dirty,
+        discard: options.onDiscard ?? (() => undefined) })
+  }, [options?.dirty, options?.onDiscard, registerUnsavedChangesSource])
+
   return context
 }

frontend/src/pages/materials/MaterialListPage.tsx

@@ -13,7 +13,7 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchMaterials, parseMaterialFilter } from '@/lib/materials'
 import { materialsKeys } from '@/lib/queryKeys'
-import { dateString, inputClass } from '@/lib/utils'
+import { cn, dateString, inputClass } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
@@ -113,10 +113,11 @@ const clearedTagSelectionPath = (
 
 const MaterialThumb: FC<{ material: Material }> = ({ material }) => (
     <div
-	className={`flex aspect-square h-[180px] w-[180px] items-center justify-center
-		    overflow-hidden rounded-lg border border-stone-200 bg-white text-center
-		    text-stone-900 shadow-sm dark:border-stone-700 dark:bg-stone-900
-		    dark:text-stone-100`}>
+	className={cn (
+	    'flex aspect-square h-[180px] w-[180px] items-center justify-center',
+	    'overflow-hidden rounded-lg border border-stone-200 bg-white text-center',
+	    'text-stone-900 shadow-sm dark:border-stone-700 dark:bg-stone-900',
+	    'dark:text-stone-100')}>
       {material.thumbnail
        ? <img src={material.thumbnail} alt="" className="block h-full w-full object-cover"/>
        : (
@@ -482,7 +483,7 @@ const MaterialListPage: FC = () => {
 			className={inputClass (invalid)}>
 		      <option value="all">すべて</option>
 		      <option value="tagged">タグあり</option>
-		      <option value="untagged">タグなし</option>
+		      <option value="untagged"></option>
 		    </select>)}
 	      </FormField>
 
@@ -531,30 +532,32 @@ const MaterialListPage: FC = () => {
 
 	  <div className="flex flex-wrap items-center justify-between gap-3">
 	    <div className="flex flex-wrap gap-2">
-	      <button
-		  type="button"
-		  onClick={() => updateQuery ({ view: 'card' })}
-		  className={`rounded-full border px-4 py-2 text-sm ${
-		      view === 'card'
-		      ? [
-			  'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
-			  'dark:bg-sky-950 dark:text-sky-100'].join (' ')
-		      : [
-			  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
-			  'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
+		      <button
+			  type="button"
+			  onClick={() => updateQuery ({ view: 'card' })}
+			  className={cn (
+			      'rounded-full border px-4 py-2 text-sm',
+			      view === 'card'
+			      ? [
+				  'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
+				  'dark:bg-sky-950 dark:text-sky-100']
+			      : [
+				  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
+				  'dark:bg-stone-900 dark:text-stone-100'])}>
 		アイコン
 	      </button>
-	      <button
-		  type="button"
-		  onClick={() => updateQuery ({ view: 'list' })}
-		  className={`rounded-full border px-4 py-2 text-sm ${
-		      view === 'list'
-		      ? [
-			  'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
-			  'dark:bg-sky-950 dark:text-sky-100'].join (' ')
-		      : [
-			  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
-			  'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
+		      <button
+			  type="button"
+			  onClick={() => updateQuery ({ view: 'list' })}
+			  className={cn (
+			      'rounded-full border px-4 py-2 text-sm',
+			      view === 'list'
+			      ? [
+				  'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
+				  'dark:bg-sky-950 dark:text-sky-100']
+			      : [
+				  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
+				  'dark:bg-stone-900 dark:text-stone-100'])}>
 		詳細
 	      </button>
 	    </div>

frontend/src/pages/posts/PostImportReviewPage.test.tsx

@@ -0,0 +1,157 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { useLocation } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostImportReviewPage from '@/pages/posts/PostImportReviewPage'
+import { buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+import type { ReactNode } from 'react'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+  apiPost: vi.fn (),
+  isApiError: vi.fn (() => false) }))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('framer-motion', () => ({
+  AnimatePresence: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  motion: {
+    div: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+    main: ({ children }: { children?: ReactNode }) => <main>{children}</main> } }))
+
+const metadata = (url: string, title: string) => ({
+  url,
+  title,
+  thumbnailBase: 'https://example.com/thumbnail.jpg',
+  originalCreatedFrom: '',
+  originalCreatedBefore: '',
+  duration: '',
+  tags: '',
+  parentPostIds: [],
+  fieldWarnings: { },
+  baseWarnings: [],
+  displayTags: [] })
+
+
+const LocationProbe = () => {
+  const location = useLocation ()
+  return <output aria-label="current-location">{location.pathname}{location.search}</output>
+}
+
+
+const renderReviewPage = (urls: string[]) => {
+  const search = urls.map (url => encodeURIComponent (url)).join ('+')
+  return renderWithProviders (
+      <>
+	<PostImportReviewPage user={buildUser ()}/>
+	<LocationProbe/>
+      </>,
+      { route: `/posts/new?urls=${ search }` })
+}
+
+describe ('PostImportReviewPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    api.isApiError.mockReturnValue (false)
+  })
+
+  it ('fetches metadata with at most four concurrent requests', async () => {
+    const resolvers: Array<(value: ReturnType<typeof metadata>) => void> = []
+    api.apiGet.mockImplementation ((_path, options) =>
+	new Promise (resolve => {
+	  resolvers.push (resolve)
+	  const url = String (options.params.url)
+	  void url
+	}))
+    const urls = Array.from (
+	{ length: 6 },
+	(_, index) => `https://example.com/${ index + 1 }`)
+
+    renderReviewPage (urls)
+
+    await waitFor (() => expect (api.apiGet).toHaveBeenCalledTimes (4))
+
+    resolvers[0]?.(metadata (urls[0]!, 'first'))
+
+    expect (await screen.findAllByText ('first')).toHaveLength (2)
+    await waitFor (() => expect (api.apiGet).toHaveBeenCalledTimes (5))
+    expect (screen.getByRole ('button', { name: '追加' })).toBeDisabled ()
+
+    for (let index = 1; index < resolvers.length; ++index)
+      resolvers[index]?.(metadata (urls[index]!, `post ${ index + 1 }`))
+  })
+
+  it ('keeps successful rows when another metadata request fails', async () => {
+    api.apiGet
+	.mockResolvedValueOnce (metadata ('https://example.com/one', 'first'))
+	.mockRejectedValueOnce (new TypeError ('network'))
+
+    renderReviewPage (['https://example.com/one', 'https://example.com/two'])
+
+    expect (await screen.findAllByText ('first')).toHaveLength (2)
+    await waitFor (() => {
+      expect (screen.getAllByText ('登録不可')).toHaveLength (2)
+    })
+    expect (screen.getAllByRole ('button', { name: '編輯' })[0]).toBeEnabled ()
+  })
+
+  it ('shows existing posts with Active Storage thumbnail precedence', async () => {
+    api.apiGet.mockResolvedValue ({
+      ...metadata ('https://example.com/post', ''),
+      existingPostId: 24,
+      existingPost: {
+	id: 24,
+	title: 'existing post',
+	url: 'https://example.com/post',
+	thumbnail: 'https://example.com/storage.jpg',
+	thumbnailBase: 'https://example.com/base.jpg' } })
+
+    renderReviewPage (['https://example.com/post'])
+
+    const disclosure = await screen.findByRole ('button', {
+      name: '既存投稿による自動スキップ 1件' })
+    expect (screen.getByRole ('button', { name: '追加' })).toBeDisabled ()
+
+    fireEvent.click (disclosure)
+
+    expect ((await screen.findAllByRole ('img', { name: 'サムネール' }))[0])
+	.toHaveAttribute ('src', 'https://example.com/storage.jpg')
+  })
+
+  it ('keeps a recoverable bulk failure on the review screen', async () => {
+    api.apiGet.mockResolvedValue (
+	metadata ('https://example.com/post', 'new post'))
+    api.apiPost.mockResolvedValue ({
+      results: [{
+	status: 'failed',
+	recoverable: true,
+	errors: { title: ['invalid title'] } }] })
+
+    renderReviewPage (['https://example.com/post'])
+
+    fireEvent.click (await screen.findByRole ('button', { name: '追加' }))
+
+    expect (await screen.findAllByText ('登録失敗')).toHaveLength (2)
+    expect (screen.getAllByText ('invalid title')).toHaveLength (2)
+    expect (screen.getAllByRole ('button', { name: '編輯' })[0]).toBeEnabled ()
+    expect (screen.getAllByRole ('button', { name: '再試行' })[0]).toBeEnabled ()
+    expect (screen.getByLabelText ('current-location')).toHaveTextContent ('/posts/new?')
+  })
+
+  it ('navigates to /posts after every submitted row is created', async () => {
+    api.apiGet.mockResolvedValue (
+	metadata ('https://example.com/post', 'new post'))
+    api.apiPost.mockResolvedValue ({
+      results: [{ status: 'created', post: { id: 42 } }] })
+
+    renderReviewPage (['https://example.com/post'])
+
+    fireEvent.click (await screen.findByRole ('button', { name: '追加' }))
+
+    await waitFor (() => {
+      expect (screen.getByLabelText ('current-location')).toHaveTextContent ('/posts')
+    })
+    expect (api.apiPost).toHaveBeenCalledWith ('/posts/bulk', expect.any (FormData))
+  })
+})

frontend/src/pages/posts/PostImportSourcePage.test.tsx

@@ -0,0 +1,67 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostImportSourcePage from '@/pages/posts/PostImportSourcePage'
+import { buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const router = vi.hoisted (() => ({ navigate: vi.fn () }))
+
+vi.mock ('react-router-dom', async importOriginal => ({
+  ...await importOriginal<typeof import('react-router-dom')> (),
+  useNavigate: () => router.navigate }))
+
+describe ('PostImportSourcePage', () => {
+  beforeEach (() => {
+    sessionStorage.clear ()
+    vi.clearAllMocks ()
+  })
+
+  it ('validates an empty source only after Next is pressed', () => {
+    renderWithProviders (<PostImportSourcePage user={buildUser ()}/>)
+
+    expect (screen.queryByText ('URL を入力してください．')).not.toBeInTheDocument ()
+
+    fireEvent.click (screen.getByRole ('button', { name: '次へ' }))
+
+    expect (screen.getByText ('URL を入力してください．')).toBeInTheDocument ()
+    expect (router.navigate).not.toHaveBeenCalled ()
+  })
+
+  it ('reports frontend URL issues with original line numbers', () => {
+    renderWithProviders (<PostImportSourcePage user={buildUser ()}/>)
+    const input = screen.getByRole ('textbox', { name: '' })
+
+    fireEvent.change (input, {
+      target: { value: '\nftp://example.com/file\nhttps://example.com/valid' } })
+    fireEvent.click (screen.getByRole ('button', { name: '次へ' }))
+
+    expect (screen.getByText (/2 行目: HTTP または HTTPS/)).toBeInTheDocument ()
+    expect (screen.getByText ('ftp://example.com/file')).toBeInTheDocument ()
+    expect (input).toHaveAttribute ('aria-invalid', 'true')
+    expect (router.navigate).not.toHaveBeenCalled ()
+  })
+
+  it ('navigates with individually encoded URLs without calling an API', () => {
+    renderWithProviders (<PostImportSourcePage user={buildUser ()}/>)
+
+    fireEvent.change (screen.getByRole ('textbox', { name: '' }), {
+      target: {
+	value: 'https://example.com/one+a\nhttps://example.com/two?value=b+c' } })
+    fireEvent.click (screen.getByRole ('button', { name: '次へ' }))
+
+    expect (router.navigate).toHaveBeenCalledWith (
+	'/posts/new?urls=https%3A%2F%2Fexample.com%2Fone%2Ba'
+	+ '+https%3A%2F%2Fexample.com%2Ftwo%3Fvalue%3Db%2Bc')
+  })
+
+  it ('disables Next when the encoded request target reaches 4096 bytes', () => {
+    renderWithProviders (<PostImportSourcePage user={buildUser ()}/>)
+    const input = screen.getByRole ('textbox', { name: '' })
+
+    fireEvent.change (input, {
+      target: { value: `https://example.com/${ 'a'.repeat (6_200) }` } })
+
+    expect (screen.getByRole ('button', { name: '次へ' })).toBeDisabled ()
+  })
+})

frontend/src/pages/posts/PostImportSourcePage.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useRef, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useNavigate } from 'react-router-dom'
+
+import FieldError from '@/components/common/FieldError'
+import Form from '@/components/common/Form'
+import FormField from '@/components/common/FormField'
+import PageTitle from '@/components/common/PageTitle'
+import TextArea from '@/components/common/TextArea'
+import MainArea from '@/components/layout/MainArea'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { SITE_TITLE } from '@/config'
+import {
+    buildPostNewReviewPath,
+    isPostNewReviewPathWithinLimit,
+} from '@/lib/postNewQueryState'
+import {
+    countImportSourceLines,
+    extractImportSourceUrls,
+    validateImportSource,
+} from '@/lib/postImportSourceValidation'
+import {
+    loadPostImportSourceDraft,
+    savePostImportSourceDraft,
+} from '@/lib/postImportStorage'
+import { canEditContent } from '@/lib/users'
+import Forbidden from '@/pages/Forbidden'
+
+import type { FC } from 'react'
+
+import type { User } from '@/types'
+
+type Props = { user: User | null }
+
+const MAX_ROWS = 100
+const SOURCE_ERROR_ID = 'post-import-source-error'
+const SOURCE_ISSUES_ID = 'post-import-source-issues'
+
+
+const PostImportSourcePage: FC<Props> = ({ user }) => {
+  const editable = canEditContent (user)
+  const navigate = useNavigate ()
+  const [source, setSource] = useState ('')
+  const [loading, setLoading] = useState (false)
+  const [sourceIssues, setSourceIssues] = useState<ReturnType<typeof validateImportSource>> ([])
+  const [sourceError, setSourceError] = useState<string | null> (null)
+  const saveTimer = useRef<number | null> (null)
+  const editedRef = useRef (false)
+
+  const lineCount = countImportSourceLines (source)
+  const sourceUrls = extractImportSourceUrls (source)
+  const withinPathLimit = isPostNewReviewPathWithinLimit (sourceUrls)
+  const messages = sourceError != null ? [sourceError] : []
+  const sourceDescribedBy =
+      [sourceError != null ? SOURCE_ERROR_ID : null,
+       sourceIssues.length > 0 ? SOURCE_ISSUES_ID : null]
+      .filter (value => value != null)
+      .join (' ')
+
+  useEffect (() => {
+    const draft = loadPostImportSourceDraft (message =>
+	toast ({ title: '保存済み入力を復元できませんでした', description: message }))
+
+    if (!(editedRef.current))
+      {
+	setSource (current =>
+	    current === ''
+	    ? draft.source
+	    : current)
+      }
+  }, [])
+
+  useEffect (() => {
+    if (saveTimer.current != null)
+      window.clearTimeout (saveTimer.current)
+
+    saveTimer.current = window.setTimeout (() => {
+      savePostImportSourceDraft (source, message =>
+	  toast ({ title: '入力内容を保存できませんでした', description: message }))
+    }, 300)
+
+    return () => {
+      if (saveTimer.current != null)
+	window.clearTimeout (saveTimer.current)
+    }
+  }, [source])
+
+  const preview = async () => {
+    if (lineCount === 0)
+      {
+	setSourceIssues ([])
+	setSourceError ('URL を入力してください．')
+	return
+      }
+
+    const issues = validateImportSource (source)
+    if (issues.length > 0)
+      {
+	setSourceIssues (issues)
+	setSourceError (null)
+	return
+      }
+    if (!(withinPathLimit))
+      return
+
+    setLoading (true)
+    setSourceIssues ([])
+    setSourceError (null)
+    try
+    {
+      navigate (buildPostNewReviewPath (sourceUrls))
+    }
+    finally
+    {
+      setLoading (false)
+    }
+  }
+
+  if (!(editable))
+	return <Forbidden/>
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{`広場に投稿を追加 | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	<Form className="max-w-4xl">
+	  <PageTitle>広場に投稿を追加</PageTitle>
+	  <FormField label="URL リスト（1 行 1 URL）">
+	    {() => (
+		<TextArea
+		    value={source}
+		    rows={14}
+		    invalid={messages.length > 0 || sourceIssues.length > 0}
+		    aria-describedby={sourceDescribedBy || undefined}
+		    className="h-80 font-mono text-sm"
+		    onBlur={() => {
+		      savePostImportSourceDraft (source, message =>
+			  toast ({
+			      title: '入力内容を保存できませんでした',
+			      description: message }))
+		    }}
+		    onChange={ev => {
+		      editedRef.current = true
+		      setSource (ev.target.value)
+		      setSourceError (null)
+		      setSourceIssues ([])
+		    }}/>)}
+	  </FormField>
+	  <div id={messages.length > 0 ? SOURCE_ERROR_ID : undefined}>
+	    <FieldError messages={messages}/>
+	  </div>
+	  <ul
+	      id={SOURCE_ISSUES_ID}
+	      className="space-y-2 text-sm text-red-700 dark:text-red-300">
+	    {sourceIssues.map (issue => (
+		<li key={`${ issue.sourceRow }-${ issue.message }-${ issue.url }`}>
+		  <div>{issue.sourceRow} 行目: {issue.message}</div>
+		  <div className="break-all font-mono text-xs">{issue.url}</div>
+		</li>))}
+	  </ul>
+
+	  <div className="relative z-10 flex items-center justify-between gap-3">
+	    <div className="text-sm text-neutral-600 dark:text-neutral-300">
+	      入力行数 {lineCount} / {MAX_ROWS}
+	    </div>
+	    <Button
+		type="button"
+		className="pointer-events-auto shrink-0"
+		onClick={preview}
+		disabled={loading || !(withinPathLimit)}>
+	      次へ
+	    </Button>
+	  </div>
+	</Form>
+      </MainArea>)
+}
+
+export default PostImportSourcePage

frontend/src/pages/posts/PostNewPage.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import PostNewPage from '@/pages/posts/PostNewPage'
@@ -6,101 +6,35 @@ import { buildUser } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
 
 const api = vi.hoisted (() => ({
-  apiGet:     vi.fn (),
-  apiPost:    vi.fn (),
-  isApiError: vi.fn (),
-}))
-
-const toastApi = vi.hoisted (() => ({
-  toast: vi.fn (),
-}))
+  apiGet: vi.fn (),
+  apiPost: vi.fn (),
+  isApiError: vi.fn () }))
 
 vi.mock ('@/lib/api', () => api)
-vi.mock ('@/components/ui/use-toast', () => toastApi)
 
 describe ('PostNewPage', () => {
   beforeEach (() => {
     vi.clearAllMocks ()
     api.isApiError.mockReturnValue (false)
+    api.apiGet.mockResolvedValue ({
+      url: 'https://example.com/post',
+      title: 'post',
+      tags: '' })
+    sessionStorage.clear ()
   })
 
-  it ('blocks guests', () => {
-    renderWithProviders (<PostNewPage user={buildUser ({ role: 'guest' })}/>)
+  it ('shows the source page on /posts/new', () => {
+    renderWithProviders (<PostNewPage user={buildUser ()}/>, {
+      route: '/posts/new' })
 
-    expect (screen.getByText ('403')).toBeInTheDocument ()
+    expect (screen.getByRole ('heading', { name: '広場に投稿を追加' })).toBeInTheDocument ()
   })
 
-  it ('submits a new post with manual title and thumbnail fetch UI', async () => {
-    api.apiPost.mockResolvedValueOnce ({})
-    api.apiGet.mockResolvedValue ([])
+  it ('shows the review page when query state is present', () => {
+    renderWithProviders (<PostNewPage user={buildUser ()}/>, {
+      route: '/posts/new?urls=https%3A%2F%2Fexample.com%2Fpost' })
 
-    renderWithProviders (<PostNewPage user={buildUser ({ role: 'member' })}/>)
-
-    const textboxes = screen.getAllByRole ('textbox')
-    fireEvent.change (textboxes[0], { target: { value: 'https://example.com/post' } })
-    fireEvent.change (textboxes[1], { target: { value: '投稿タイトル' } })
-    fireEvent.change (textboxes[2], { target: { value: '1 2' } })
-    fireEvent.change (textboxes[3], { target: { value: 'tag1 tag2' } })
-    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
-
-    await waitFor (() => {
-      expect (api.apiPost).toHaveBeenCalledWith (
-          '/posts',
-          expect.any (FormData),
-          { headers: { 'Content-Type': 'multipart/form-data' } },
-      )
-    })
-    const formData = api.apiPost.mock.calls[0]?.[1] as FormData
-    expect (formData.get ('url')).toBe ('https://example.com/post')
-    expect (formData.get ('title')).toBe ('投稿タイトル')
-    expect (formData.get ('parent_post_ids')).toBe ('1 2')
-    expect (formData.get ('tags')).toBe ('tag1 tag2')
-    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '投稿成功!' })
-  })
-
-  it ('preserves duration while the video tag is temporarily removed', () => {
-    api.apiGet.mockResolvedValue ([])
-
-    renderWithProviders (<PostNewPage user={buildUser ({ role: 'member' })}/>)
-
-    const tags = screen.getAllByRole ('textbox')[3]
-    fireEvent.change (tags, { target: { value: '動画' } })
-    fireEvent.change (screen.getByRole ('spinbutton'), { target: { value: '180.5' } })
-
-    fireEvent.change (tags, { target: { value: 'general-tag' } })
-    expect (screen.queryByRole ('spinbutton')).not.toBeInTheDocument ()
-
-    fireEvent.change (tags, {
-      target: { value: '動画 general-tag' },
-    })
-    expect (screen.getByRole ('spinbutton')).toHaveValue (180.5)
-  })
-
-  it ('shows 422 validation errors for post fields', async () => {
-    api.apiGet.mockResolvedValue ([])
-    api.isApiError.mockReturnValue (true)
-    api.apiPost.mockRejectedValueOnce ({
-      response: {
-        status: 422,
-        data:   {
-          type:        'validation_error',
-          message:     '入力内容を確認してください．',
-          errors:      { tags: ['ニコニコ・タグは直接指定できません．'] },
-          base_errors: ['投稿内容を確認してください．'],
-        },
-      },
-    })
-
-    renderWithProviders (<PostNewPage user={buildUser ({ role: 'member' })}/>)
-
-    const textboxes = screen.getAllByRole ('textbox')
-    fireEvent.change (textboxes[0], { target: { value: 'https://example.com/post' } })
-    fireEvent.change (textboxes[1], { target: { value: '投稿タイトル' } })
-    fireEvent.change (textboxes[3], { target: { value: 'nico:nico_tag' } })
-    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
-
-    expect (await screen.findByText ('投稿内容を確認してください．')).toBeInTheDocument ()
-    expect (screen.getByText ('ニコニコ・タグは直接指定できません．')).toBeInTheDocument ()
-    expect (screen.getAllByRole ('textbox')[3]).toHaveAttribute ('aria-invalid', 'true')
+    expect (screen.getByRole ('heading', { name: '追加内容確認' })).toBeInTheDocument ()
+    expect (screen.queryByText ('広場に投稿を追加')).not.toBeInTheDocument ()
   })
 })

frontend/src/pages/posts/PostNewPage.tsx

@@ -1,22 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
-import { useNavigate } from 'react-router-dom'
+import { useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
 
-import PostFormTagsArea from '@/components/PostFormTagsArea'
-import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
-import FieldError from '@/components/common/FieldError'
-import Form from '@/components/common/Form'
-import FormField from '@/components/common/FormField'
-import PageTitle from '@/components/common/PageTitle'
-import MainArea from '@/components/layout/MainArea'
-import { Button } from '@/components/ui/button'
-import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
-import { apiGet, apiPost } from '@/lib/api'
-import { canEditContent } from '@/lib/users'
-import { inputClass } from '@/lib/utils'
-import { useValidationErrors } from '@/lib/useValidationErrors'
-import Forbidden from '@/pages/Forbidden'
+import PostImportReviewPage from '@/pages/posts/PostImportReviewPage'
+import PostImportSourcePage from '@/pages/posts/PostImportSourcePage'
+import { hasPostNewReviewState } from '@/lib/postNewQueryState'
 
 import type { FC } from 'react'
 
@@ -24,233 +11,16 @@ import type { User } from '@/types'
 
 type Props = { user: User | null }
 
-type PostFormField =
-    'url' | 'title' | 'tags' | 'parentPostIds' | 'videoMs' | 'originalCreatedAt' | 'thumbnail'
-
 
 const PostNewPage: FC<Props> = ({ user }) => {
-  const editable = canEditContent (user)
+  const location = useLocation ()
+  const reviewMode = useMemo (
+      () => hasPostNewReviewState (location.search),
+      [location.search])
 
-  const navigate = useNavigate ()
-
-  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
-      useValidationErrors<PostFormField> ()
-
-  const [originalCreatedBefore, setOriginalCreatedBefore] = useState<string | null> (null)
-  const [originalCreatedFrom, setOriginalCreatedFrom] = useState<string | null> (null)
-  const [parentPostIds, setParentPostIds] = useState ('')
-  const [tags, setTags] = useState ('')
-  const [duration, setDuration] = useState ('')
-  const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
-  const [thumbnailLoading, setThumbnailLoading] = useState (false)
-  const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
-  const [title, setTitle] = useState ('')
-  const [titleLoading, setTitleLoading] = useState (false)
-  const [url, setURL] = useState ('')
-
-  const thumbnailPreviewRef = useRef ('')
-  const videoFlg =
-      useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
-               [tags])
-
-  const handleSubmit = async () => {
-    clearValidationErrors ()
-
-    const formData = new FormData
-    formData.append ('title', title)
-    formData.append ('url', url)
-    formData.append ('tags', tags)
-    formData.append ('parent_post_ids', parentPostIds)
-    if (videoFlg && duration !== '')
-      formData.append ('duration', duration)
-    if (thumbnailFile)
-      formData.append ('thumbnail', thumbnailFile)
-    if (originalCreatedFrom)
-      formData.append ('original_created_from', originalCreatedFrom)
-    if (originalCreatedBefore)
-      formData.append ('original_created_before', originalCreatedBefore)
-
-    try
-    {
-      await apiPost ('/posts', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
-      toast ({ title: '投稿成功!' })
-      navigate ('/posts')
-    }
-    catch (e)
-    {
-      applyValidationError (e)
-      toast ({ title: '投稿失敗', description: '入力を確認してください。' })
-    }
-  }
-
-  const fetchTitle = useCallback (async () => {
-    setTitleLoading (true)
-    try
-    {
-      const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
-      setTitle (data.title || '')
-    }
-    finally
-    {
-      setTitleLoading (false)
-    }
-  }, [url])
-
-  const fetchThumbnail = useCallback (async () => {
-    setThumbnailPreview ('')
-    setThumbnailFile (null)
-    setThumbnailLoading (true)
-    if (thumbnailPreviewRef.current)
-      URL.revokeObjectURL (thumbnailPreviewRef.current)
-    try
-    {
-      const data = await apiGet<Blob> ('/preview/thumbnail',
-				       { params: { url }, responseType: 'blob' })
-      const imageURL = URL.createObjectURL (data)
-      setThumbnailPreview (imageURL)
-      setThumbnailFile (new File ([data],
-				  'thumbnail.png',
-				  { type: data.type || 'image/png' }))
-    }
-    finally
-    {
-      setThumbnailLoading (false)
-    }
-  }, [url])
-
-  useEffect (() => {
-    thumbnailPreviewRef.current = thumbnailPreview
-  }, [thumbnailPreview])
-
-  if (!(editable))
-    return <Forbidden/>
-
-  return (
-      <MainArea>
-	<Helmet>
-	  <title>{`広場に投稿を追加 | ${ SITE_TITLE }`}</title>
-	</Helmet>
-	<Form>
-	  <PageTitle>広場に投稿を追加する</PageTitle>
-	  <FieldError messages={baseErrors}/>
-
-	  {/* URL */}
-	  <FormField label="URL" messages={fieldErrors.url}>
-	    {({ describedBy, invalid }) => (
-		<input type="url"
-		       placeholder="例：https://www.nicovideo.jp/watch/..."
-		       value={url}
-		       onChange={e => setURL (e.target.value)}
-		       aria-describedby={describedBy}
-		       aria-invalid={invalid}
-		       className={inputClass (invalid)}/>)}
-	  </FormField>
-
-	  {/* タイトル */}
-	  <FormField label="タイトル" messages={fieldErrors.title}>
-	    {({ describedBy, invalid }) => (
-		<div className="space-y-2">
-		  <input type="text"
-			 aria-describedby={describedBy}
-			 aria-invalid={invalid}
-			 className={inputClass (invalid)}
-			 value={title}
-			 placeholder={titleLoading ? 'Loading...' : ''}
-			 onChange={ev => setTitle (ev.target.value)}
-			 disabled={titleLoading}/>
-		  <div className="flex flex-wrap items-center gap-2 text-sm">
-		    <span>必要なタイミングで URL から取得できます．</span>
-		    <Button
-			type="button"
-			variant="outline"
-			onClick={() => void fetchTitle ()}
-			disabled={!(url) || titleLoading}>
-		      取得
-		    </Button>
-		  </div>
-		</div>)}
-	  </FormField>
-
-	  {/* サムネール */}
-	  <FormField label="サムネール" messages={fieldErrors.thumbnail}>
-	    {({ describedBy, invalid }) => (
-		<>
-		  <div className="mb-2 flex flex-wrap items-center gap-2 text-sm">
-		    <span>必要なタイミングで URL から取得できます．</span>
-		    <Button
-			type="button"
-			variant="outline"
-			onClick={() => void fetchThumbnail ()}
-			disabled={!(url) || thumbnailLoading}>
-		      取得
-		    </Button>
-		  </div>
-		  {thumbnailLoading && (
-		      <p className="text-gray-500 text-sm">Loading...</p>)}
-		  <input type="file"
-			 accept="image/*"
-			 aria-describedby={describedBy}
-			 aria-invalid={invalid}
-			 onChange={e => {
-			   const file = e.target.files?.[0]
-			   if (file)
-			     {
-			       setThumbnailFile (file)
-			       setThumbnailPreview (URL.createObjectURL (file))
-			     }
-			 }}/>
-		  {thumbnailPreview && (
-		      <img src={thumbnailPreview}
-			   alt="preview"
-			   className="mt-2 max-h-48 rounded border"/>)}
-		</>)}
-	  </FormField>
-
-	  {/* 親投稿 */}
-	  <FormField label="親投稿" messages={fieldErrors.parentPostIds}>
-	    {({ describedBy, invalid }) => (
-		<input
-		    type="text"
-		    value={parentPostIds}
-		    onChange={e => setParentPostIds (e.target.value)}
-		    aria-describedby={describedBy}
-		    aria-invalid={invalid}
-		    className={inputClass (invalid)}/>)}
-	  </FormField>
-
-	  {/* タグ */}
-	  <PostFormTagsArea tags={tags} setTags={setTags} errors={fieldErrors.tags}/>
-
-	  {/* オリジナルの作成日時 */}
-	  <PostOriginalCreatedTimeField
-	      originalCreatedFrom={originalCreatedFrom}
-	      setOriginalCreatedFrom={setOriginalCreatedFrom}
-	      originalCreatedBefore={originalCreatedBefore}
-	      setOriginalCreatedBefore={setOriginalCreatedBefore}
-	      errors={fieldErrors.originalCreatedAt}/>
-
-	  {/* 動画時間 */}
-	  {(videoFlg &&
-	      <FormField label="動画時間" messages={fieldErrors.videoMs}>
-		{({ invalid }) => (
-		    <input
-			type="number"
-			min="0.001"
-			step="0.001"
-			value={duration}
-			onChange={e => setDuration (e.target.value)}
-			aria-invalid={invalid}
-			className={inputClass (invalid)}/>)}
-	      </FormField>)}
-
-	  {/* 送信 */}
-	  <Button onClick={handleSubmit}
-		  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
-		  disabled={titleLoading || thumbnailLoading}>
-	    追加
-	  </Button>
-	</Form>
-      </MainArea>)
+  return reviewMode
+      ? <PostImportReviewPage user={user}/>
+      : <PostImportSourcePage user={user}/>
 }
 
 export default PostNewPage

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

@@ -6,7 +6,6 @@ import { dateString } from '@/lib/utils'
 import { buildTag, buildUser } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
 
-import type { ReactNode } from 'react'
 import type { NicoTag } from '@/types'
 
 const api = vi.hoisted (() => ({
@@ -27,10 +26,10 @@ const scrollIntoView = vi.fn ()
 
 vi.mock ('@/lib/api', () => api)
 vi.mock ('@/components/ui/use-toast', () => toastApi)
-vi.mock ('@/components/dialogues/DialogueProvider', () => ({
-  default: ({ children }: { children: ReactNode }) => <>{children}</>,
-  useDialogue: () => dialogue,
-}))
+vi.mock ('@/components/dialogues/DialogueProvider', async importOriginal => ({
+  ...await importOriginal<
+      typeof import('@/components/dialogues/DialogueProvider')> (),
+  useDialogue: () => dialogue }))
 
 const buildNicoTag = (values: Partial<NicoTag> = {}): NicoTag => ({
     ...buildTag (),

frontend/src/pages/theatres/TheatreDetailPage.test.tsx

@@ -40,10 +40,10 @@ const postEmbed = vi.hoisted (() => ({
 
 vi.mock ('@/lib/api', () => api)
 vi.mock ('@/lib/posts', () => postsApi)
-vi.mock ('@/components/dialogues/DialogueProvider', () => ({
-  default: ({ children }: { children: ReactNode }) => <>{children}</>,
-  useDialogue: () => dialogue,
-}))
+vi.mock ('@/components/dialogues/DialogueProvider', async importOriginal => ({
+  ...await importOriginal<
+      typeof import('@/components/dialogues/DialogueProvider')> (),
+  useDialogue: () => dialogue }))
 vi.mock ('@/components/PostEmbed', () => ({
   default: (props: {
     ref?: { current: unknown }
@@ -262,7 +262,9 @@ describe ('TheatreDetailPage', () => {
     expect (postEmbed.seek).not.toHaveBeenCalledWith (0)
   })
 
-  it ('shows child tags from the post tag tree in both vertical and horizontal layouts', async () => {
+  it (
+      'shows child tags from the post tag tree in both vertical and horizontal layouts',
+      async () => {
     const childTag = buildTag ({ id: 12, name: '子タグ', category: 'general' })
     const parentTag = buildTag ({
       id:       11,
@@ -307,7 +309,7 @@ describe ('TheatreDetailPage', () => {
       expect (within (tagSection ()).getAllByRole ('link', { name: '子タグ' }))
 	.toHaveLength (1)
     })
-  })
+      })
 
   it ('does not advance host post while video length is unknown', async () => {
     api.apiPut.mockImplementation ((path: string) => {

frontend/src/pages/users/SettingPage.tsx

@@ -1197,13 +1197,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
   }, [hasUnsavedThemeChanges, savedThemeSlots])
 
   useEffect (() => {
-    registerUnsavedChangesSource ({
-	dirty: hasPageUnsavedChanges,
-	discard: discardAllDirtyChanges })
-
-    return () => {
-      registerUnsavedChangesSource (null)
-    }
+    return registerUnsavedChangesSource ({
+        dirty: hasPageUnsavedChanges,
+        discard: discardAllDirtyChanges })
   }, [discardAllDirtyChanges, hasPageUnsavedChanges, registerUnsavedChangesSource])
 
   useKeyboardShortcuts ({

frontend/src/test/coverage.todo.test.ts

@@ -1,10 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe ('pending high-level browser coverage', () => {
-  it.todo ('adds MSW-backed API boundary tests in a follow-up issue')
-  it.todo ('covers TheatreDetailPage with timer polling, comment posting, and next-post updates')
-  it.todo ('covers NicoTagListPage linking and pagination against realistic API payloads')
-  it.todo ('covers TagDetailSidebar drag/drop parent-child editing with pointer-event fidelity')
-  it.todo ('covers TopNav desktop and mobile menu flows as browser-level integration tests')
-  it.todo ('covers full App bootstrap for user creation, user verification, and 503 handling')
-})

frontend/src/test/postImportFactories.ts

@@ -0,0 +1,53 @@
+import type { PostImportRow } from '@/lib/postImportTypes'
+
+export const buildPostImportRow = (
+    overrides: Partial<PostImportRow> = {},
+): PostImportRow => {
+  const attributes = {
+    title: '',
+    thumbnailBase: '',
+    originalCreatedFrom: '',
+    originalCreatedBefore: '',
+    duration: '',
+    tags: '',
+    parentPostIds: '',
+    ...overrides.attributes }
+  const provenance = {
+    url: 'manual' as const,
+    title: 'automatic' as const,
+    thumbnailBase: 'automatic' as const,
+    originalCreatedFrom: 'automatic' as const,
+    originalCreatedBefore: 'automatic' as const,
+    duration: 'automatic' as const,
+    tags: 'automatic' as const,
+    parentPostIds: 'automatic' as const,
+    ...overrides.provenance }
+  const fieldWarnings = { ...overrides.fieldWarnings }
+  const baseWarnings = [...(overrides.baseWarnings ?? [])]
+  const tagSources = {
+    automatic: overrides.tagSources?.automatic ?? '',
+    manual: overrides.tagSources?.manual ?? '' }
+  const url = overrides.url ?? 'https://example.com/post'
+
+  return {
+    ...overrides,
+    sourceRow: overrides.sourceRow ?? 1,
+    url,
+    attributes,
+    fieldWarnings,
+    baseWarnings,
+    validationErrors: overrides.validationErrors ?? {},
+    provenance,
+    tagSources,
+    status: overrides.status ?? 'ready',
+    recoverable: overrides.recoverable,
+    resetSnapshot: overrides.resetSnapshot ?? {
+	url,
+	attributes: { ...attributes },
+	provenance: { ...provenance },
+	tagSources: { ...tagSources },
+	fieldWarnings: Object.fromEntries (
+	    Object.entries (fieldWarnings).map (([key, values]) => [key, [...values]])),
+	baseWarnings: [...baseWarnings],
+	metadataUrl: overrides.metadataUrl } }
+}

frontend/src/test/render.tsx

@@ -1,7 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render } from '@testing-library/react'
+import { createContext, useContext, useState } from 'react'
 import { HelmetProvider } from 'react-helmet-async'
-import { MemoryRouter } from 'react-router-dom'
+import { createMemoryRouter, RouterProvider } from 'react-router-dom'
 
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
 import { KeyboardShortcutsProvider } from '@/lib/useKeyboardShortcuts'
@@ -13,6 +14,20 @@ type Options = {
   route?: string
 }
 
+const TestContentContext = createContext<ReactNode> (null)
+
+
+const TestRoute = () => {
+  const children = useContext (TestContentContext)
+
+  return (
+      <UnsavedChangesGuardProvider>
+        <KeyboardShortcutsProvider>
+          {children}
+        </KeyboardShortcutsProvider>
+      </UnsavedChangesGuardProvider>)
+}
+
 export const renderWithProviders = (
     ui:       ReactElement,
     options: Options = {},
@@ -22,20 +37,23 @@ export const renderWithProviders = (
       queries: { retry: false } },
   })
 
-  const Wrapper = ({ children }: { children: ReactNode }) => (
-      <QueryClientProvider client={queryClient}>
-        <HelmetProvider>
-          <MemoryRouter initialEntries={[options.route ?? '/']}>
-            <DialogueProvider>
-              <UnsavedChangesGuardProvider>
-                <KeyboardShortcutsProvider>
-                  {children}
-                </KeyboardShortcutsProvider>
-              </UnsavedChangesGuardProvider>
-            </DialogueProvider>
-          </MemoryRouter>
-        </HelmetProvider>
-      </QueryClientProvider>)
+  const Wrapper = ({ children }: { children: ReactNode }) => {
+    const [router] = useState (() => createMemoryRouter ([{
+        path: '*',
+        element: <TestRoute/> }], {
+        initialEntries: [options.route ?? '/'] }))
+
+    return (
+	<QueryClientProvider client={queryClient}>
+	  <HelmetProvider>
+	    <DialogueProvider>
+	      <TestContentContext.Provider value={children}>
+		<RouterProvider router={router}/>
+	      </TestContentContext.Provider>
+	    </DialogueProvider>
+	  </HelmetProvider>
+	</QueryClientProvider>)
+  }
 
   return {
     queryClient,