@smartcat/sanity-plugin 1.0.0 → 1.0.1

package/src/tool/ProjectView.tsx

@@ -0,0 +1,975 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {useClient, useRelativeTime, useSchema, useValuePreview} from 'sanity'
+import {applyImportedTranslations, prepareExport, type PendingDeletion} from './processing'
+import {getTranslatableFields, localizationMode} from '../lib/locjson/fields'
+import {serializeToLocjson} from '../lib/locjson/serialize'
+import {buildLocjsonFilename} from '../lib/locjson/filename'
+import {resolveDocumentTitle} from '../lib/documentTitle'
+import type {LocalizationMode} from '../lib/locjson/types'
+import {useIntentLink} from 'sanity/router'
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Dialog,
+  Flex,
+  Heading,
+  Inline,
+  Spinner,
+  Stack,
+  Text,
+  TextInput,
+  useToast,
+} from '@sanity/ui'
+import {
+  ArrowLeftIcon,
+  LaunchIcon,
+  TrashIcon,
+  PublishIcon,
+  CloseIcon,
+  DownloadIcon,
+  SyncIcon,
+  RemoveCircleIcon,
+  JsonIcon,
+} from '@sanity/icons'
+import styled, {css, keyframes} from 'styled-components'
+import {API_VERSION} from '../lib/constants'
+import {UNTITLED} from '../lib/documentTitle'
+import {PROJECT_DETAIL_QUERY, type ProjectDetail, type ProjectItemRef} from './data'
+import {StatusBadge, statusLabel} from './StatusBadge'
+import {ItemProgress, languageTitle} from './ItemProgress'
+import {LogPanel} from './LogPanel'
+import {type DocProgress} from '../progress/core'
+import {parseFunctionLog, type LogLine} from '../lib/log'
+import type {SmartcatLanguage, TranslationProjectStatus} from '../types'
+
+interface ProjectViewProps {
+  projectId: string
+  onBack: () => void
+  languages: SmartcatLanguage[]
+  sourceLanguage: string
+  /** document-internationalization `languageField` (document locale field name). */
+  documentI18nLanguageField: string
+  /** internationalized-array locale key: field name (`'language'`) or `'_key'`. */
+  fieldI18nLanguageField: string
+}
+
+/**
+ * Shows how a language maps to Smartcat: `(fr)` when the codes match, or
+ * `(PL-PL → pl)` when the Sanity id differs from the Smartcat code.
+ */
+function languageMappingLabel(language: SmartcatLanguage): string {
+  const code = language.smartcatLanguage || language.id
+  return code === language.id ? language.id : `${language.id} → ${code}`
+}
+
+/**
+ * Resolve an item's title the way the Studio does — by running the schema type's
+ * `preview.prepare` — so types without a literal `title` field (e.g. field-level
+ * localized docs) show the same label as in the structure tree, not 'Untitled'.
+ */
+function DocTitle({doc}: {doc: ProjectItemRef['doc']}) {
+  const schema = useSchema()
+  const schemaType = doc ? schema.get(doc._type) : undefined
+  const preview = useValuePreview({
+    enabled: Boolean(doc && schemaType),
+    schemaType,
+    value: doc ? {_id: doc._id, _type: doc._type} : undefined,
+  })
+  // String-only: never fall back to the raw projected value, which is an
+  // internationalized-array object for field-level i18n types (renders as React #31).
+  const title = typeof preview.value?.title === 'string' ? preview.value.title : undefined
+  // Placeholder while the async preview resolves, so a real title isn't briefly mislabeled.
+  return <>{title ?? (preview.isLoading ? '…' : UNTITLED)}</>
+}
+
+/**
+ * Statuses during which a Function is actively running, so the project shouldn't
+ * be re-sent until it settles. `translating`/`sent`/`completed` are resting
+ * states (work is happening in Smartcat, or it's done) — re-syncing and importing
+ * are allowed there, so they are deliberately excluded.
+ */
+const IN_FLIGHT: TranslationProjectStatus[] = ['queued', 'importing', 'downloaded']
+
+/**
+ * Statuses during which importing is allowed: the Smartcat project exists and
+ * we're not mid export/import. Import pulls only the targets that are 100%
+ * complete, so it's useful any time translation is underway or finished.
+ */
+const CAN_IMPORT: TranslationProjectStatus[] = ['sent', 'translating', 'completed']
+
+const rotate = keyframes`
+  to { transform: rotate(360deg); }
+`
+/** SyncIcon that spins while a refresh is in flight (keeps the button label visible). */
+const SpinningSyncIcon = styled(SyncIcon)<{$spinning?: boolean}>`
+  ${({$spinning}) =>
+    $spinning &&
+    css`
+      animation: ${rotate} 0.8s linear infinite;
+    `}
+`
+
+/** "Last update: x ago" — relative time, with the absolute timestamp on hover. */
+function LastUpdate({date}: {date: string}) {
+  const relative = useRelativeTime(date, {useTemporalPhrase: true})
+  return (
+    <Text size={1} muted title={new Date(date).toLocaleString()}>
+      Last update: {relative}
+    </Text>
+  )
+}
+
+/** Opens the document in the Studio. */
+function OpenInStudioButton({id, type}: {id: string; type: string}) {
+  const {onClick, href} = useIntentLink({intent: 'edit', params: {id, type}})
+  return (
+    <Button
+      as="a"
+      href={href}
+      onClick={onClick}
+      mode="bleed"
+      icon={LaunchIcon}
+      text="Open in Studio"
+      fontSize={0}
+      padding={2}
+    />
+  )
+}
+
+/** Read-only, monospace, full-height code view for the LocJSON modal. */
+const CodeArea = styled.textarea`
+  width: 100%;
+  height: 70vh;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+  tab-size: 2;
+`
+
+/**
+ * Builds the LocJSON the export would produce for an item — same field selection
+ * and serialize options as {@link prepareExport} — and shows it (pretty-printed)
+ * in a read-only modal, for inspecting exactly what gets sent to Smartcat.
+ */
+function ViewLocjsonButton(props: {
+  docId: string
+  type: string
+  client: {fetch: (query: string, params?: Record<string, unknown>) => Promise<unknown>}
+  schema: {get: (typeName: string) => unknown}
+  sourceLanguage: string
+  documentI18nLanguageField: string
+  fieldI18nLanguageField: string
+}) {
+  const {docId, type, client, schema, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField} = props
+  const [open, setOpen] = useState(false)
+  const [content, setContent] = useState<string | null>(null)
+  const [filename, setFilename] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const build = useCallback(async () => {
+    setOpen(true)
+    setContent(null)
+    setFilename(null)
+    setError(null)
+    try {
+      const doc = await client.fetch('*[_id == $id][0]', {id: docId})
+      if (!doc) throw new Error(`Document not found: ${docId}`)
+      const fields = getTranslatableFields(schema.get(type), {exclude: [documentI18nLanguageField]})
+      const locjson = serializeToLocjson(doc as never, fields, {
+        sourceLanguage,
+        fieldLanguageKey: fieldI18nLanguageField,
+      })
+      // Same name the export sends to Smartcat; the last path segment is the
+      // file's basename (the Smartcat "folder/" prefix can't be a local filename).
+      const smartcatName = buildLocjsonFilename(type, docId, resolveDocumentTitle(schema, doc as never))
+      setFilename(smartcatName.split('/').pop() || smartcatName)
+      setContent(JSON.stringify(locjson, null, 2))
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    }
+  }, [client, schema, docId, type, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField])
+
+  const download = useCallback(() => {
+    if (content == null || !filename) return
+    const url = URL.createObjectURL(new Blob([content], {type: 'application/json'}))
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = filename
+    anchor.click()
+    URL.revokeObjectURL(url)
+  }, [content, filename])
+
+  return (
+    <>
+      <Button
+        mode="bleed"
+        icon={JsonIcon}
+        title="View LocJSON"
+        fontSize={0}
+        padding={2}
+        onClick={build}
+      />
+      {open && (
+        <Dialog
+          id={`locjson-${docId}`}
+          header={
+            <Flex align="center" gap={3}>
+              <Text weight="semibold">LocJSON · {type}</Text>
+              <Button
+                icon={DownloadIcon}
+                text="Download"
+                mode="ghost"
+                fontSize={1}
+                padding={2}
+                disabled={content == null}
+                onClick={download}
+              />
+            </Flex>
+          }
+          onClose={() => setOpen(false)}
+          width={3}
+        >
+          <Box padding={4}>
+            {error ? (
+              <Text size={1} muted>
+                {error}
+              </Text>
+            ) : content === null ? (
+              <Flex align="center" justify="center" padding={5}>
+                <Spinner muted />
+              </Flex>
+            ) : (
+              <CodeArea
+                readOnly
+                spellCheck={false}
+                value={content}
+                onFocus={(e) => e.currentTarget.select()}
+              />
+            )}
+          </Box>
+        </Dialog>
+      )}
+    </>
+  )
+}
+
+export function ProjectView({
+  projectId,
+  onBack,
+  languages,
+  sourceLanguage,
+  documentI18nLanguageField,
+  fieldI18nLanguageField,
+}: ProjectViewProps) {
+  const client = useClient({apiVersion: API_VERSION})
+  const schema = useSchema()
+  const toast = useToast()
+  const [project, setProject] = useState<ProjectDetail | null | undefined>(undefined)
+  const [name, setName] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [sending, setSending] = useState(false)
+  const [importing, setImporting] = useState(false)
+  const [cancelling, setCancelling] = useState(false)
+  const [refreshing, setRefreshing] = useState(false)
+  const [targets, setTargets] = useState<string[]>([])
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  // Local-only: which items the editor has marked for deletion. Reset on reload;
+  // committed to Smartcat + the project only when the user re-syncs.
+  const [markedForDeletion, setMarkedForDeletion] = useState<Set<string>>(new Set())
+  // Session-only live trace of the current export/import run (never persisted).
+  const [logs, setLogs] = useState<LogLine[]>([])
+  // Controlled so a partial-failure export can auto-expand the panel.
+  const [logExpanded, setLogExpanded] = useState(false)
+  const appendLog = useCallback((line: LogLine) => setLogs((prev) => [...prev, line]), [])
+  // Merge a Function's server-side log (from the project doc) as an indented
+  // group under a header, mirroring how per-document client lines are grouped.
+  const appendServerLog = useCallback(
+    (raw: string | null | undefined, header: string) => {
+      const lines = parseFunctionLog(raw)
+      // Our Functions always emit ≥1 line by this point, so an empty log here
+      // means an outdated Function is deployed — surface that instead of nothing.
+      setLogs((prev) =>
+        lines.length === 0
+          ? [...prev, {level: 'info', message: `${header}: no server log returned — deploy the latest Functions to see server-side steps`}]
+          : [...prev, {level: 'info', message: header}, ...lines.map((l) => ({...l, indent: true}))],
+      )
+    },
+    [],
+  )
+  const seeded = useRef(false)
+
+  const toggleMark = useCallback((key: string) => {
+    setMarkedForDeletion((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }, [])
+
+  const load = useCallback(() => {
+    return client
+      .fetch<ProjectDetail | null>(PROJECT_DETAIL_QUERY, {id: projectId})
+      .then((res) => {
+        setProject(res)
+        if (res) setName(res.name)
+        // Seed the target-language selection once, so live updates don't clobber edits.
+        if (res && !seeded.current) {
+          setTargets(res.targetLanguages ?? [])
+          seeded.current = true
+        }
+      })
+      .catch((err) => toast.push({status: 'error', title: 'Failed to load project', description: String(err)}))
+  }, [client, projectId, toast])
+
+  useEffect(() => {
+    load()
+    const sub = client
+      .listen(PROJECT_DETAIL_QUERY, {id: projectId}, {visibility: 'query'})
+      .subscribe({next: () => load(), error: () => {}})
+    return () => sub.unsubscribe()
+  }, [client, projectId, load])
+
+  // When the import Function has downloaded translations (status "downloaded"),
+  // process them here in the browser: build locale variants + metadata links.
+  const processingDownload = useRef(false)
+  useEffect(() => {
+    // Each import cycle starts at "importing"; clear the guard there so the next
+    // "downloaded" is processed (otherwise a second import in the same session is
+    // blocked, leaving the project stuck at "downloaded").
+    if (project?.status === 'importing') processingDownload.current = false
+    if (project?.status !== 'downloaded' || processingDownload.current) return
+    processingDownload.current = true
+    // Targets the download Function deferred (size/time caps); after applying
+    // this batch we auto-continue the import so nobody has to click through.
+    const remaining = project.importRemaining ?? 0
+    appendLog({level: 'info', message: 'Translations downloaded — applying to documents'})
+    // The import Function's download log lands on the doc; show it before the
+    // browser-side apply log so the import reads top-to-bottom.
+    appendServerLog(project.functionLog, 'Import function')
+    applyImportedTranslations({
+      client,
+      schema,
+      projectId,
+      documentLanguageField: documentI18nLanguageField,
+      fieldLanguageKey: fieldI18nLanguageField,
+      onLog: appendLog,
+    })
+      .then(async ({imported, status}) => {
+        // Auto-continue only while each cycle makes progress — a cycle that
+        // applied nothing would defer the same targets forever, so it stops
+        // and leaves the button to the user.
+        if (remaining > 0 && imported > 0) {
+          appendLog({level: 'success', message: `Imported ${imported} localized version(s)`})
+          appendLog({level: 'info', message: `${remaining} target(s) still on Smartcat — continuing import automatically`})
+          processingDownload.current = false
+          await client.patch(projectId).set({status: 'importing', lastError: null}).commit()
+          return
+        }
+        const description =
+          status === 'completed'
+            ? 'All targets are fully translated — project completed.'
+            : 'Some targets are still translating — import again later to pull the rest.'
+        appendLog({level: 'success', message: `Imported ${imported} localized version(s)`})
+        appendLog({level: status === 'completed' ? 'success' : 'info', message: description})
+        toast.push({status: 'success', title: `Imported ${imported} localized version(s)`, description})
+      })
+      .catch((err) => {
+        // Leave the guard set so we don't auto-retry in a loop (status stays
+        // "downloaded"); a fresh import (status "importing") clears it to retry.
+        appendLog({level: 'error', message: `Failed to apply translations: ${String(err)}`})
+        toast.push({status: 'error', title: 'Failed to apply translations', description: String(err)})
+      })
+  }, [project?.status, client, schema, projectId, toast, documentI18nLanguageField, fieldI18nLanguageField, appendLog, appendServerLog])
+
+  // After handing the outbox to the export Function, log its response (observed
+  // via listen()): status flips to "sent" (+ project URL) on success, or "error"
+  // (+ lastError) on failure. Guarded by a ref so it only fires for a send we
+  // started this session, not on initial load of an already-sent project.
+  const exportInFlight = useRef(false)
+  useEffect(() => {
+    if (!exportInFlight.current) return
+    if (project?.status === 'sent') {
+      appendServerLog(project.functionLog, 'Export function')
+      appendLog({level: 'success', message: 'Sent to Smartcat'})
+      if (project.smartcatProjectUrl) appendLog({level: 'info', message: `Smartcat project: ${project.smartcatProjectUrl}`})
+      // Partial failure: the sync completed (status "sent") but some documents
+      // failed to upload/update. Flag it and open the log so the errors are seen.
+      if (parseFunctionLog(project.functionLog).some((l) => l.level === 'error')) {
+        toast.push({status: 'warning', title: 'There were errors sending content into Smartcat — check the log'})
+        setLogExpanded(true)
+      }
+      exportInFlight.current = false
+    } else if (project?.status === 'error') {
+      appendServerLog(project.functionLog, 'Export function')
+      appendLog({level: 'error', message: `Export failed: ${project.lastError ?? 'unknown error'}`})
+      exportInFlight.current = false
+    }
+  }, [project?.status, project?.smartcatProjectUrl, project?.lastError, project?.functionLog, appendLog, appendServerLog, toast])
+
+  // Refresh per-document progress from Smartcat. The browser only bumps the
+  // `progressRequestedAt` trigger; the smartcat-progress Function reacts (it
+  // holds the API key), fetches the Smartcat project, and writes the stage
+  // percentages back — which `listen()` above re-renders.
+  const requestProgress = useCallback(() => {
+    return client.patch(projectId).set({progressRequestedAt: new Date().toISOString()}).commit()
+  }, [client, projectId])
+
+  // Track the latest synced timestamp in a ref so a refresh can detect when
+  // fresh progress has actually arrived. We can't tie the spinner to the patch
+  // commit: on a warm client it resolves in a few ms (before paint), so the
+  // spinner was only visible after a cold hard-reload.
+  const syncedAtRef = useRef<string | null | undefined>(undefined)
+  useEffect(() => {
+    syncedAtRef.current = project?.progressSyncedAt
+  }, [project?.progressSyncedAt])
+
+  const refreshBaseline = useRef<string | null | undefined>(undefined)
+  const refreshTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(
+    () => () => {
+      if (refreshTimeout.current) clearTimeout(refreshTimeout.current)
+    },
+    [],
+  )
+
+  const handleRefreshProgress = useCallback(async () => {
+    // Spin until the progress Function writes a new progressSyncedAt (cleared by
+    // the effect below), with a safety timeout in case nothing comes back.
+    refreshBaseline.current = syncedAtRef.current
+    setRefreshing(true)
+    if (refreshTimeout.current) clearTimeout(refreshTimeout.current)
+    refreshTimeout.current = setTimeout(() => setRefreshing(false), 30000)
+    try {
+      await requestProgress()
+    } catch (err) {
+      setRefreshing(false)
+      if (refreshTimeout.current) clearTimeout(refreshTimeout.current)
+      toast.push({status: 'error', title: 'Failed to refresh progress', description: String(err)})
+    }
+  }, [requestProgress, toast])
+
+  // Stop spinning once fresh progress has landed (progressSyncedAt changed).
+  useEffect(() => {
+    if (!refreshing) return
+    if (project?.progressSyncedAt !== refreshBaseline.current) {
+      setRefreshing(false)
+      if (refreshTimeout.current) clearTimeout(refreshTimeout.current)
+      // The progress Function stamps progressSyncedAt on failure too (and sets
+      // lastError). When it did, surface its log so a timeout/error is visible
+      // instead of the refresh just quietly not updating.
+      if (project?.lastError) {
+        appendServerLog(project.functionLog, 'Progress function')
+        appendLog({level: 'error', message: `Progress refresh failed: ${project.lastError}`})
+        toast.push({status: 'error', title: 'Failed to refresh progress', description: project.lastError})
+        setLogExpanded(true)
+      }
+    }
+  }, [project?.progressSyncedAt, project?.lastError, project?.functionLog, refreshing, appendServerLog, appendLog, toast])
+
+  // Auto-refresh once on page load, as soon as a Smartcat project exists. Runs
+  // the same handler as the button, so the loading state matches.
+  const progressRequested = useRef(false)
+  useEffect(() => {
+    if (progressRequested.current || !project?.smartcatProjectId) return
+    progressRequested.current = true
+    handleRefreshProgress()
+  }, [project?.smartcatProjectId, handleRefreshProgress])
+
+  const handleRename = useCallback(async () => {
+    const trimmed = name.trim()
+    if (!trimmed || trimmed === project?.name) return
+    setBusy(true)
+    try {
+      await client.patch(projectId).set({name: trimmed}).commit()
+      toast.push({status: 'success', title: 'Renamed project'})
+    } catch (err) {
+      toast.push({status: 'error', title: 'Failed to rename', description: String(err)})
+    } finally {
+      setBusy(false)
+    }
+  }, [name, project, client, projectId, toast])
+
+  const handleDelete = useCallback(async () => {
+    setBusy(true)
+    try {
+      await client.delete(projectId)
+      toast.push({status: 'success', title: 'Deleted project'})
+      onBack()
+    } catch (err) {
+      toast.push({status: 'error', title: 'Failed to delete', description: String(err)})
+      setBusy(false)
+    }
+  }, [client, projectId, toast, onBack])
+
+  const toggleTarget = useCallback((id: string) => {
+    setTargets((prev) => (prev.includes(id) ? prev.filter((t) => t !== id) : [...prev, id]))
+  }, [])
+
+  const handleImport = useCallback(async () => {
+    setImporting(true)
+    try {
+      // Clear the download-processing guard up front (race-free), so this import's
+      // "downloaded" state is processed even if we never observe the "importing"
+      // transition via listen().
+      processingDownload.current = false
+      await client.patch(projectId).set({status: 'importing', lastError: null}).commit()
+      // Clear here (not when the download lands) so these lines lead the import log.
+      setLogs([])
+      appendLog({level: 'info', message: 'Importing from Smartcat'})
+      appendLog({level: 'info', message: 'The import function will download translations and create localized versions.'})
+      toast.push({
+        status: 'success',
+        title: 'Importing from Smartcat',
+        description: 'The import function will download translations and create localized versions.',
+      })
+    } catch (err) {
+      toast.push({status: 'error', title: 'Failed to start import', description: String(err)})
+    } finally {
+      setImporting(false)
+    }
+  }, [client, projectId, toast, appendLog])
+
+  const handleCancel = useCallback(async () => {
+    setCancelling(true)
+    try {
+      // Reset to draft so the project can be edited and re-sent. This is a local
+      // undo — it does not delete an already-created Smartcat project.
+      await client.patch(projectId).set({status: 'draft'}).commit()
+      toast.push({status: 'success', title: 'Cancelled — project reset to draft'})
+    } catch (err) {
+      toast.push({status: 'error', title: 'Failed to cancel', description: String(err)})
+    } finally {
+      setCancelling(false)
+    }
+  }, [client, projectId, toast])
+
+  const handleSend = useCallback(async () => {
+    if (targets.length === 0) {
+      toast.push({status: 'warning', title: 'Select at least one target language'})
+      return
+    }
+    setSending(true)
+    setLogs([])
+    try {
+      // Translate marked items into deletion instructions for the export Function:
+      // pair each with one of its Smartcat document ids (one id deletes the whole doc).
+      const deletions: PendingDeletion[] = []
+      for (const item of project?.items ?? []) {
+        if (!markedForDeletion.has(item._key) || !item.doc?._id) continue
+        const dp = (project?.progress ?? []).find((p) => p.sourceDocId === item.doc!._id)
+        // Any one target id deletes the whole document, so pick the first target
+        // that actually has one (matches the `isLinked` check in the item list —
+        // targets[0] may not be the one carrying the id).
+        const smartcatDocumentId = dp?.targets?.find((t) => t.smartcatDocumentId)?.smartcatDocumentId
+        deletions.push({
+          itemKey: item._key,
+          sourceDocId: item.doc._id,
+          smartcatDocumentId,
+        })
+      }
+
+      // Serialize content to LocJSON here in the Studio (real schema + DOM),
+      // then queue it; the thin export Function uploads, updates and deletes.
+      const {prepared, deleting} = await prepareExport({
+        client,
+        schema,
+        projectId,
+        targetLanguages: targets,
+        sourceLanguage,
+        languages,
+        exclude: [documentI18nLanguageField],
+        fieldLanguageKey: fieldI18nLanguageField,
+        deletions,
+        onLog: appendLog,
+      })
+      setMarkedForDeletion(new Set())
+      // Hand-off: the outbox is queued; the export Function now uploads it. Arm
+      // the response watcher so its result ("sent"/"error") lands in the log.
+      exportInFlight.current = true
+      appendLog({level: 'info', message: 'Uploading to Smartcat via the export function…'})
+      toast.push({
+        status: 'success',
+        title: 'Queued for Smartcat',
+        description:
+          `Prepared ${prepared} file(s)` +
+          (deleting ? ` and ${deleting} for deletion` : '') +
+          '; the export function will sync them.',
+      })
+    } catch (err) {
+      appendLog({level: 'error', message: `Failed to queue: ${String(err)}`})
+      toast.push({status: 'error', title: 'Failed to queue', description: String(err)})
+    } finally {
+      setSending(false)
+    }
+  }, [targets, client, projectId, toast, schema, sourceLanguage, languages, documentI18nLanguageField, fieldI18nLanguageField, project, markedForDeletion, appendLog])
+
+  const handleRemoveItem = useCallback(
+    async (item: ProjectItemRef) => {
+      try {
+        await client.patch(projectId).unset([`items[_key=="${item._key}"]`]).commit()
+        toast.push({status: 'success', title: 'Removed item'})
+      } catch (err) {
+        toast.push({status: 'error', title: 'Failed to remove item', description: String(err)})
+      }
+    },
+    [client, projectId, toast],
+  )
+
+  if (project === undefined) {
+    return (
+      <Flex align="center" justify="center" padding={5}>
+        <Spinner muted />
+      </Flex>
+    )
+  }
+
+  if (project === null) {
+    return (
+      <Stack space={4}>
+        <Button icon={ArrowLeftIcon} text="Back" mode="bleed" onClick={onBack} />
+        <Card padding={5} radius={2} tone="critical" border>
+          <Text>This project no longer exists.</Text>
+        </Card>
+      </Stack>
+    )
+  }
+
+  const items = project.items ?? []
+  const nameChanged = name.trim() !== project.name && name.trim().length > 0
+  // Smartcat doesn't allow non-destructive target-language changes after a project
+  // exists, so lock the picker once the project has been sent.
+  const languagesLocked = Boolean(project.smartcatProjectId)
+
+  const progress = project.progress ?? []
+  const progressByDoc = new Map<string, DocProgress>()
+  for (const p of progress) {
+    if (p.sourceDocId) progressByDoc.set(p.sourceDocId, p)
+  }
+  const markedCount = items.filter((i) => markedForDeletion.has(i._key)).length
+
+  // Localization mode is per-type; compute once per distinct type for the labels.
+  const modeByType = new Map<string, LocalizationMode>()
+  for (const item of items) {
+    const t = item.doc?._type
+    if (t && !modeByType.has(t)) modeByType.set(t, localizationMode(schema.get(t)))
+  }
+
+  return (
+    <Stack space={5}>
+      <Flex align="center" gap={2}>
+        <Button icon={ArrowLeftIcon} text="Projects" mode="bleed" onClick={onBack} />
+        <Box flex={1} />
+        <StatusBadge status={project.status} />
+        <Button
+          icon={TrashIcon}
+          title="Delete project…"
+          tone="critical"
+          mode="bleed"
+          fontSize={1}
+          padding={2}
+          onClick={() => setConfirmDelete(true)}
+          disabled={busy}
+        />
+      </Flex>
+
+      <Card padding={4} radius={2} shadow={1}>
+        <Stack space={4}>
+          <Flex gap={2} align="flex-end">
+            <Box flex={1}>
+              <Stack space={2}>
+                <Text size={1} weight="semibold" muted>
+                  Project name
+                </Text>
+                <TextInput
+                  value={name}
+                  onChange={(e) => setName(e.currentTarget.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleRename()
+                  }}
+                  disabled={busy}
+                />
+              </Stack>
+            </Box>
+            <Button text="Save" onClick={handleRename} disabled={!nameChanged || busy} loading={busy} />
+          </Flex>
+
+          <Text size={1} muted>
+            Source: <strong>{languageTitle(languages, project.sourceLanguage || sourceLanguage)}</strong>
+          </Text>
+
+          <Stack space={2}>
+            <Text size={1} muted>
+              Target languages
+            </Text>
+            <Flex gap={6} align="center">
+              <Stack space={3} padding={3}>
+                {languages
+                  .filter((l) => l.id !== (project.sourceLanguage || sourceLanguage))
+                  .map((l) => {
+                    const selected = targets.includes(l.id)
+                    const disabled = sending || languagesLocked
+                    return (
+                      <Flex key={l.id} align="center" gap={2} as="label" style={{cursor: disabled ? 'default' : 'pointer'}}>
+                        <Checkbox
+                          checked={selected}
+                          disabled={disabled}
+                          onChange={() => toggleTarget(l.id)}
+                        />
+                        <Text size={1}>
+                          {l.title}
+                          <span
+                            title={`Sanity language code: '${l.id}'\nSmartcat language code: '${l.smartcatLanguage || l.id}'`}
+                            style={{color: 'var(--card-muted-fg-color)', opacity: 0.6, marginLeft: '1em'}}
+                          >
+                            {languageMappingLabel(l)}
+                          </span>
+                        </Text>
+                      </Flex>
+                    )
+                  })}
+              </Stack>
+              {project.smartcatProjectUrl ? (
+                <Box flex={1} style={{maxWidth: 500}}>
+                  <Stack space={4}>
+                    <Text size={1} muted>
+                      Smartcat project:{' '}
+                      <a
+                        href={project.smartcatProjectUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title="Open project in Smartcat"
+                      >
+                        {project.name}
+                      </a>
+                    </Text>
+                    {languagesLocked && (
+                      <Text size={1} muted>
+                        Target languages are locked once the project has been sent to Smartcat.
+                      </Text>
+                    )}
+                  </Stack>
+                </Box>
+              ) : (
+                targets.length === 0 && (
+                  <Box flex={1} style={{maxWidth: 500}}>
+                    <Text size={1} muted>
+                      Select one or more languages to translate your content into before you can
+                      send it to Smartcat for translation.
+                    </Text>
+                  </Box>
+                )
+              )}
+            </Flex>
+          </Stack>
+        </Stack>
+      </Card>
+
+      {project.lastError && (
+        <Card padding={3} radius={2} tone="critical" border>
+          <Text size={1}>{project.lastError}</Text>
+        </Card>
+      )}
+
+      <Flex align="center" gap={3} wrap="wrap">
+        <Button
+          icon={PublishIcon}
+          text="Send to Smartcat"
+          // Primary only when it's actually actionable (unsent, with items to
+          // send); otherwise it's a secondary action (ghost, like Import) and
+          // "Import translations" becomes primary.
+          mode={!languagesLocked && items.length > 0 ? undefined : 'ghost'}
+          tone={!languagesLocked && items.length > 0 ? 'primary' : undefined}
+          onClick={handleSend}
+          loading={sending}
+          disabled={sending || items.length === 0 || targets.length === 0 || IN_FLIGHT.includes(project.status)}
+        />
+        <Button
+          icon={DownloadIcon}
+          text="Import translations"
+          mode={languagesLocked ? undefined : 'ghost'}
+          tone={languagesLocked ? 'primary' : undefined}
+          onClick={handleImport}
+          loading={importing}
+          disabled={importing || !project.smartcatProjectId || !CAN_IMPORT.includes(project.status)}
+        />
+        {project.smartcatProjectId && (
+          <Button
+            icon={<SpinningSyncIcon $spinning={refreshing} />}
+            text="Refresh progress"
+            mode="bleed"
+            onClick={handleRefreshProgress}
+            disabled={refreshing}
+          />
+        )}
+        {project.progressSyncedAt && <LastUpdate date={project.progressSyncedAt} />}
+        {markedCount > 0 && (
+          <Text size={1} muted>
+            {markedCount} marked for deletion — applied on re-sync
+          </Text>
+        )}
+        {IN_FLIGHT.includes(project.status) && (
+          <Inline space={2}>
+            <Text size={1} muted>
+              Project is <strong>{statusLabel(project.status)}</strong> — wait for it to finish before re-sending.
+            </Text>
+            <Button
+              icon={CloseIcon}
+              text="Cancel"
+              mode="bleed"
+              tone="critical"
+              fontSize={1}
+              padding={2}
+              onClick={handleCancel}
+              loading={cancelling}
+              disabled={cancelling}
+            />
+          </Inline>
+        )}
+      </Flex>
+
+      <LogPanel logs={logs} expanded={logExpanded} onExpandedChange={setLogExpanded} />
+
+      <Stack space={3}>
+        <Flex align="center" gap={2}>
+          <Heading size={1}>
+            {items.length} {items.length === 1 ? 'Item' : 'Items'}
+          </Heading>
+        </Flex>
+
+        {items.length > 0 && (
+          <Stack space={2}>
+            {items.map((item) => {
+              const docProgress = item.doc ? progressByDoc.get(item.doc._id) : undefined
+              // Linked = the item already has document(s) in Smartcat.
+              const isLinked = Boolean(docProgress?.targets?.some((t) => t.smartcatDocumentId))
+              const isMarked = markedForDeletion.has(item._key)
+              return (
+                <Card
+                  key={item._key}
+                  padding={3}
+                  radius={2}
+                  shadow={1}
+                  tone={isMarked ? 'critical' : undefined}
+                >
+                  <Stack space={3}>
+                    <Flex align="center" gap={3}>
+                      <Flex align="center" gap={2}>
+                        <Text weight="medium">
+                          <span style={isMarked ? {textDecoration: 'line-through'} : undefined}>
+                            <DocTitle doc={item.doc} />
+                          </span>
+                        </Text>
+                        {item.doc?._type && <Badge tone="primary">{item.doc._type}</Badge>}
+                        {item.doc?._type && modeByType.has(item.doc._type) && (
+                          <Badge
+                            tone="default"
+                            fontSize={0}
+                            title={
+                              modeByType.get(item.doc._type) === 'field'
+                                ? 'This item is translated in field mode; translations will be stored as language variants of each field'
+                                : 'This item is translated in document mode; translations will be stored as linked documents'
+                            }
+                          >
+                            {modeByType.get(item.doc._type) === 'field' ? 'fields' : 'document'}
+                          </Badge>
+                        )}
+                        {item.doc && <OpenInStudioButton id={item.doc._id} type={item.doc._type} />}
+                        {item.doc && (
+                          <ViewLocjsonButton
+                            docId={item.doc._id}
+                            type={item.doc._type}
+                            client={client}
+                            schema={schema}
+                            sourceLanguage={sourceLanguage}
+                            documentI18nLanguageField={documentI18nLanguageField}
+                            fieldI18nLanguageField={fieldI18nLanguageField}
+                          />
+                        )}
+                      </Flex>
+                      <Box flex={1} />
+                      {isLinked ? (
+                        <Button
+                          mode={isMarked ? 'default' : 'bleed'}
+                          tone="critical"
+                          icon={RemoveCircleIcon}
+                          title={isMarked ? 'Unmark for deletion' : 'Mark for deletion'}
+                          padding={2}
+                          onClick={() => toggleMark(item._key)}
+                        />
+                      ) : (
+                        <Button
+                          mode="bleed"
+                          tone="critical"
+                          icon={TrashIcon}
+                          title="Remove from project"
+                          onClick={() => handleRemoveItem(item)}
+                        />
+                      )}
+                    </Flex>
+                    {docProgress && (
+                      <ItemProgress
+                        doc={docProgress}
+                        languages={languages}
+                        smartcatProjectUrl={project.smartcatProjectUrl}
+                        variants={
+                          item.doc
+                            ? {
+                                type: item.doc._type,
+                                byLanguage: Object.fromEntries(
+                                  (item.translations ?? []).map((t) => [t.language, t.id]),
+                                ),
+                              }
+                            : undefined
+                        }
+                      />
+                    )}
+                  </Stack>
+                </Card>
+              )
+            })}
+          </Stack>
+        )}
+
+        <Card padding={4} radius={2} tone="transparent" border>
+          <Text muted align="center" size={1}>
+            Add content from a document’s “⋯ → Add to translation project” menu.
+          </Text>
+        </Card>
+      </Stack>
+
+      {confirmDelete && (
+        <Dialog
+          id="confirm-delete"
+          header="Delete translation project?"
+          onClose={() => setConfirmDelete(false)}
+          width={1}
+        >
+          <Box padding={4}>
+            <Stack space={4}>
+              <Text>
+                Delete <strong>{project.name}</strong>? This removes the project only — the referenced
+                content documents are not deleted.
+                {project.smartcatProjectId && ' The Smartcat project is not deleted either and will remain in your Smartcat workspace.'}
+              </Text>
+              <Flex justify="flex-end" gap={2}>
+                <Button mode="bleed" text="Cancel" onClick={() => setConfirmDelete(false)} disabled={busy} />
+                <Button tone="critical" text="Delete" icon={TrashIcon} onClick={handleDelete} loading={busy} />
+              </Flex>
+            </Stack>
+          </Box>
+        </Dialog>
+      )}
+    </Stack>
+  )
+}