@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/src/components/controls/ModelPicker.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import { Check, ChevronLeft, ChevronRight, HardDrive, LoaderCircle, Search, X } from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { modelKey, modelSelection, providerName } from '@aphrody/koharu-ui/lib/translation'
+import type { Model, ModelSelection, ProviderPreference } from '@aphrody/koharu-bridge/protocol'
+import { Button } from '../../internal/components/button'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from '../../internal/components/input-group'
+import { ScrollArea } from '../../internal/components/scroll-area'
+
+export function ModelPicker({
+  value,
+  models,
+  providers,
+  loading = false,
+  disabled = false,
+  busyModel,
+  onBack,
+  onSelect,
+}: {
+  value: ModelSelection | null
+  models: Model[]
+  providers: ProviderPreference[]
+  loading?: boolean
+  disabled?: boolean
+  busyModel?: string | null
+  onBack: () => void
+  onSelect: (model: ModelSelection) => void
+}) {
+  const { t } = useTranslation()
+  const [query, setQuery] = useState('')
+  const [pendingKey, setPendingKey] = useState<string | null>(null)
+  const pendingModel = models.find((model) => modelKey(model) === pendingKey)
+  const selectedKey = value ? modelKey(value) : null
+  const saving = Boolean(busyModel)
+  const normalizedQuery = query.trim().toLocaleLowerCase()
+  const options = pendingModel
+    ? pendingModel.quantizations.map((quantization) => ({ model: pendingModel, quantization }))
+    : models
+        .filter((model) => {
+          if (!normalizedQuery) return true
+          return [model.name, model.model, providerName(providers, model.provider)].some(
+            (candidate) => candidate?.toLocaleLowerCase().includes(normalizedQuery),
+          )
+        })
+        .map((model) => ({ model, quantization: null }))
+
+  return (
+    <div className='min-w-0 overflow-hidden'>
+      <div className='mb-1 flex h-7 items-center border-b border-border/60 px-0.5 pb-1'>
+        <Button
+          type='button'
+          variant='ghost'
+          size='icon-xs'
+          aria-label={t('common.back')}
+          className='rounded-md text-muted-foreground hover:bg-primary/10 hover:text-foreground'
+          disabled={saving}
+          onClick={() => (pendingModel ? setPendingKey(null) : onBack())}
+        >
+          <ChevronLeft className='size-3.5' />
+        </Button>
+        <span className='ml-1 min-w-0 flex-1 truncate text-[11px] font-medium'>
+          {pendingModel?.name ?? t('modelPicker.title')}
+        </span>
+        {pendingModel && busyModel === pendingKey && (
+          <LoaderCircle className='mr-1 size-3.5 shrink-0 animate-spin text-primary' />
+        )}
+      </div>
+
+      {pendingModel ? (
+        <div className='border-b border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground'>
+          {t('settings.translation.selectQuantization')}
+        </div>
+      ) : (
+        <div className='border-b border-border/60 p-1'>
+          <InputGroup className='h-7 border-0 bg-muted/50 shadow-none focus-within:bg-background has-[>[data-align=inline-start]]:[&>input]:pl-0'>
+            <InputGroupAddon className='pr-1 pl-1.5'>
+              <Search className='size-3' />
+            </InputGroupAddon>
+            <InputGroupInput
+              
+              value={query}
+              aria-label={t('modelPicker.search')}
+              placeholder={t('modelPicker.search')}
+              className='h-7 px-0 text-[11px]'
+              onChange={(event) => setQuery(event.currentTarget.value)}
+            />
+            {query && (
+              <InputGroupAddon align='inline-end' className='pr-0.5'>
+                <InputGroupButton aria-label={t('common.clearSearch')} onClick={() => setQuery('')}>
+                  <X />
+                </InputGroupButton>
+              </InputGroupAddon>
+            )}
+          </InputGroup>
+        </div>
+      )}
+
+      <ScrollArea
+        key={pendingKey}
+        className='max-h-64 min-w-0 overflow-hidden'
+        viewportClassName='h-auto max-h-64 min-w-0 overscroll-contain'
+      >
+        <div className='grid min-w-0 gap-0.5 py-0.5'>
+          {options.map(({ model, quantization }, index) => {
+            const key = modelKey(model)
+            const expandable = !quantization && model.quantizations.length > 0
+            const downloaded =
+              quantization?.downloaded ??
+              model.quantizations.some((candidate) => candidate.downloaded)
+            const selected =
+              key === selectedKey &&
+              (!quantization ||
+                quantization.id === (value?.quantization ?? model.quantizations[0]?.id))
+            const provider = providerName(providers, model.provider)
+            return (
+              <Button
+                key={quantization?.id ?? key}
+                
+                type='button'
+                variant='ghost'
+                aria-label={
+                  quantization
+                    ? undefined
+                    : t('modelPicker.useModel', { model: model.name, provider })
+                }
+                aria-pressed={selected}
+                disabled={disabled || saving}
+                className='h-auto min-h-9 w-full max-w-full min-w-0 justify-start gap-2 overflow-hidden rounded-lg px-2 py-1 text-left font-normal hover:bg-primary/10'
+                onClick={() => {
+                  if (expandable) setPendingKey(key)
+                  else onSelect(modelSelection(model, quantization?.id ?? null))
+                }}
+              >
+                <span className='min-w-0 flex-1 overflow-hidden'>
+                  <span className='block truncate text-[11px] text-foreground'>
+                    {quantization?.name ?? model.name}
+                  </span>
+                  {!quantization && (
+                    <span className='block truncate text-[9px] text-muted-foreground'>
+                      {provider}
+                    </span>
+                  )}
+                </span>
+                {downloaded && <HardDrive className='size-3.5 shrink-0 text-muted-foreground' />}
+                {!quantization && busyModel === key ? (
+                  <LoaderCircle className='size-3.5 shrink-0 animate-spin text-primary' />
+                ) : (
+                  selected && <Check className='size-3.5 shrink-0 text-primary' />
+                )}
+                {expandable && <ChevronRight className='size-3.5 shrink-0 text-muted-foreground' />}
+              </Button>
+            )
+          })}
+          {options.length === 0 && (
+            <div className='flex items-center justify-center gap-2 px-2.5 py-5 text-center text-[11px] text-muted-foreground'>
+              {loading && models.length === 0 && <LoaderCircle className='size-3.5 animate-spin' />}
+              {t(
+                models.length > 0
+                  ? 'modelPicker.noResults'
+                  : loading
+                    ? 'modelPicker.loading'
+                    : 'modelPicker.empty',
+              )}
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}

package/src/components/controls/OutputPicker.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import { ChevronLeft } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { orderedLanguageChoices } from '@aphrody/koharu-ui/lib/translation'
+import type { LanguageChoice } from '@aphrody/koharu-bridge/protocol'
+import { Button } from '../../internal/components/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../internal/components/select'
+import { Textarea } from '../../internal/components/textarea'
+
+export type OutputDraft = {
+  targetLanguage: string
+  instructions: string
+}
+
+export function OutputPicker({
+  targetLanguage,
+  instructions,
+  languages,
+  disabled = false,
+  saving = false,
+  onBack,
+  onChange,
+}: {
+  targetLanguage: string
+  instructions: string | null
+  languages: LanguageChoice[]
+  disabled?: boolean
+  saving?: boolean
+  onBack: () => void
+  onChange: (draft: OutputDraft) => void
+}) {
+  const { t } = useTranslation()
+  const [draft, setDraft] = useState<OutputDraft>({
+    targetLanguage,
+    instructions: instructions ?? '',
+  })
+  const changed =
+    draft.targetLanguage !== targetLanguage || draft.instructions !== (instructions ?? '')
+  const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const latest = useRef({ changed, disabled, draft, onChange, saving })
+  const submitted = useRef<OutputDraft | null>(null)
+  latest.current = { changed, disabled, draft, onChange, saving }
+  const languageChoices = useMemo(() => orderedLanguageChoices(languages), [languages])
+
+  const submit = useCallback(
+    (next: OutputDraft) => {
+      submitted.current = next
+      onChange(next)
+    },
+    [onChange],
+  )
+
+  useEffect(() => {
+    if (!changed || saving || disabled || !draft.targetLanguage) return
+    saveTimer.current = setTimeout(() => submit(draft), 350)
+    return () => {
+      clearTimeout(saveTimer.current)
+      saveTimer.current = undefined
+    }
+  }, [changed, disabled, draft, saving, submit])
+
+  useEffect(
+    () => () => {
+      clearTimeout(saveTimer.current)
+      const current = latest.current
+      if (
+        current.changed &&
+        !current.saving &&
+        !current.disabled &&
+        current.draft.targetLanguage &&
+        !sameDraft(submitted.current, current.draft)
+      ) {
+        current.onChange(current.draft)
+      }
+    },
+    [],
+  )
+
+  const back = () => {
+    clearTimeout(saveTimer.current)
+    saveTimer.current = undefined
+    if (
+      changed &&
+      !saving &&
+      !disabled &&
+      draft.targetLanguage &&
+      !sameDraft(submitted.current, draft)
+    ) {
+      submit(draft)
+    }
+    onBack()
+  }
+
+  return (
+    <div className='min-w-0 overflow-hidden'>
+      <div className='mb-1 flex h-7 items-center border-b border-border/60 px-0.5 pb-1'>
+        <Button
+          type='button'
+          variant='ghost'
+          size='icon-xs'
+          aria-label={t('common.back')}
+          className='rounded-md text-muted-foreground hover:bg-primary/10 hover:text-foreground'
+          disabled={saving}
+          onClick={back}
+        >
+          <ChevronLeft className='size-3.5' />
+        </Button>
+        <span className='ml-1 text-[11px] font-medium'>{t('outputPicker.title')}</span>
+      </div>
+
+      <div className='grid gap-2 p-1'>
+        <label className='grid gap-1 text-[9px] text-muted-foreground'>
+          {t('model.targetLanguage')}
+          <Select
+            value={draft.targetLanguage}
+            items={Object.fromEntries(
+              languageChoices.map((language) => [language.tag, language.name]),
+            )}
+            disabled={disabled}
+            onValueChange={(targetLanguage) =>
+              targetLanguage && setDraft((current) => ({ ...current, targetLanguage }))
+            }
+          >
+            <SelectTrigger
+              aria-label={t('outputPicker.targetLanguage')}
+              className='h-7 w-full text-[11px]'
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {languageChoices.map((language) => (
+                <SelectItem key={language.tag} value={language.tag}>
+                  {language.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </label>
+
+        <label className='grid gap-1 text-[9px] text-muted-foreground'>
+          {t('model.instructions')}
+          <Textarea
+            value={draft.instructions}
+            disabled={disabled}
+            aria-label={t('outputPicker.instructions')}
+            placeholder={t('outputPicker.instructionsPlaceholder')}
+            className='max-h-20 min-h-20 resize-none overflow-y-auto text-[11px] leading-4'
+            onChange={(event) => {
+              const instructions = event.currentTarget.value
+              setDraft((current) => ({ ...current, instructions }))
+            }}
+          />
+        </label>
+      </div>
+    </div>
+  )
+}
+
+function sameDraft(left: OutputDraft | null, right: OutputDraft): boolean {
+  return left?.targetLanguage === right.targetLanguage && left.instructions === right.instructions
+}

package/src/components/editor/ActivityCenter.tsx

@@ -0,0 +1,234 @@
+'use client'
+
+import { useMutationState } from '@tanstack/react-query'
+import { CircleAlert, Download, LoaderCircle, Square, X } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+import { call } from '@aphrody/koharu-ui/lib/backend'
+import { usePages } from '@aphrody/koharu-ui/lib/queries'
+import { useKoharuStore } from '@aphrody/koharu-ui/lib/store'
+import { commands, type Download as DownloadState, type Job } from '@aphrody/koharu-bridge/protocol'
+import { Button } from '../../internal/components/button'
+
+export function ActivityCenter() {
+  const { t } = useTranslation()
+  const jobs = useKoharuStore((state) => state.jobs)
+  const downloads = useKoharuStore((state) => state.downloads)
+  const activities = useMutationState({
+    filters: { status: 'pending' },
+    select: (mutation) => ({
+      id: mutation.mutationId,
+      label: mutation.options.meta?.activity,
+    }),
+  }).filter(
+    (activity): activity is { id: number; label: string } => typeof activity.label === 'string',
+  )
+  const visibleJobs = Object.values(jobs).filter(
+    (job) => job.state === 'running' || job.state === 'failed',
+  )
+  const runningDownloads = Object.values(downloads).filter(
+    (download) => download.state === 'running',
+  )
+  const failedDownloads = Object.values(downloads).filter((download) => download.state === 'failed')
+  const visibleDownloads = [...runningDownloads, ...failedDownloads]
+  if (activities.length === 0 && visibleJobs.length === 0 && visibleDownloads.length === 0)
+    return null
+
+  return (
+    <aside
+      aria-label={t('activity.title')}
+      className='absolute right-3 bottom-9 z-30 flex w-72 max-w-[calc(100%-1.5rem)] flex-col rounded-2xl border border-border/50 bg-popover shadow-md'
+    >
+      <div className='border-b px-3 py-2'>
+        <span className='text-[10px] font-semibold tracking-[0.1em] uppercase'>
+          {t('activity.title')}
+        </span>
+      </div>
+      {activities.map((activity) => (
+        <div
+          key={activity.id}
+          role='status'
+          className='grid grid-cols-[1rem_minmax(0,1fr)] items-center gap-x-2.5 border-b p-3 last:border-b-0'
+        >
+          <LoaderCircle
+            className='size-3.5 animate-spin justify-self-center text-primary motion-reduce:animate-none'
+            aria-hidden='true'
+          />
+          <span className='truncate text-[12px] font-medium'>{t(activity.label)}</span>
+        </div>
+      ))}
+      {runningDownloads.length > 1 ? (
+        <DownloadGroup downloads={runningDownloads} />
+      ) : (
+        runningDownloads.map((download) => <DownloadItem key={download.id} download={download} />)
+      )}
+      {failedDownloads.map((download) => (
+        <DownloadItem key={download.id} download={download} />
+      ))}
+      {visibleJobs.map((job) => (
+        <JobItem key={job.id} job={job} />
+      ))}
+    </aside>
+  )
+}
+
+function DownloadGroup({ downloads }: { downloads: DownloadState[] }) {
+  const { t } = useTranslation()
+  const hasKnownTotal = downloads.every((download) => download.total > 0)
+  const percent = hasKnownTotal
+    ? progress(
+        downloads.reduce((sum, download) => sum + download.completed, 0),
+        downloads.reduce((sum, download) => sum + download.total, 0),
+      )
+    : null
+
+  return (
+    <div className='border-b p-3 last:border-b-0'>
+      <div className='grid grid-cols-[1rem_minmax(0,1fr)_2.25rem_1.5rem] items-start gap-x-2.5'>
+        <Download className='mt-0.5 size-3.5 justify-self-center text-primary' />
+        <span className='truncate text-[11px]'>
+          {t('activity.downloadingFiles', { count: downloads.length })}
+        </span>
+        <span className='text-right text-[10px] tabular-nums'>
+          {percent !== null ? `${percent}%` : null}
+        </span>
+        <span aria-hidden='true' />
+        <div className='col-start-2 col-end-4'>
+          <Progress value={percent} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function JobItem({ job }: { job: Job }) {
+  const { t } = useTranslation()
+  const dismiss = useKoharuStore((state) => state.dismissJob)
+  // The pipeline reports which page it is on; the rail has already loaded the
+  // labels, so this resolves from cache rather than fetching.
+  const pages = usePages(job.page !== null).data
+  // Numbered by position in the rail, so the row says where in the run this
+  // is as well as which file: a scan filename alone rarely tells you.
+  const pageIndex = job.page ? (pages?.findIndex((page) => page.id === job.page) ?? -1) : -1
+  const page = pageIndex >= 0 ? pages?.[pageIndex] : undefined
+  const pageLabel = page
+    ? t('activity.pageLabel', { number: pageIndex + 1, label: page.label })
+    : undefined
+  if (job.state === 'failed') {
+    return (
+      <Failure
+        message={job.error || t('activity.processingFailed')}
+        onDismiss={() => dismiss(job.id)}
+      />
+    )
+  }
+  const percent = progress(job.completed, job.total)
+  return (
+    <div className='border-b p-3 last:border-b-0'>
+      <div className='grid grid-cols-[1rem_minmax(0,1fr)_2.25rem_1.5rem] items-start gap-x-2.5'>
+        <span className='mt-1.5 size-1.5 justify-self-center rounded-full bg-primary' />
+        <div className='min-w-0'>
+          <span className='block truncate text-[12px] font-medium capitalize'>
+            {job.stage
+              ? t(`phase.${job.stage}`, { defaultValue: job.stage })
+              : t('activity.processing')}
+          </span>
+        </div>
+        <span className='pt-0.5 text-right text-[10px] tabular-nums'>
+          {percent !== null ? `${percent}%` : null}
+        </span>
+        <Button
+          size='icon-xs'
+          variant='ghost'
+          className='-mt-1'
+          aria-label={t('activity.stop')}
+          onClick={() => void call(commands.stopJob, job.id).catch(() => undefined)}
+        >
+          <Square className='size-2.5 fill-current' />
+        </Button>
+        {pageLabel ? (
+          <p className='col-start-2 col-end-4 mt-0.5 truncate text-[10px] text-muted-foreground'>
+            {pageLabel}
+          </p>
+        ) : null}
+        {job.model ? (
+          <p className='col-start-2 col-end-4 truncate text-[10px] text-muted-foreground'>
+            {job.model}
+          </p>
+        ) : null}
+        <div className='col-start-2 col-end-4'>
+          <Progress value={percent} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DownloadItem({ download }: { download: DownloadState }) {
+  const { t } = useTranslation()
+  const dismiss = useKoharuStore((state) => state.dismissDownload)
+  if (download.state === 'failed') {
+    return (
+      <Failure
+        message={download.error || t('activity.downloadFailed')}
+        onDismiss={() => dismiss(download.id)}
+      />
+    )
+  }
+  const percent = progress(download.completed, download.total)
+  return (
+    <div className='border-b p-3 last:border-b-0'>
+      <div className='grid grid-cols-[1rem_minmax(0,1fr)_2.25rem_1.5rem] items-start gap-x-2.5'>
+        <Download className='mt-0.5 size-3.5 justify-self-center text-primary' />
+        <span className='truncate text-[11px]'>{download.name || t('activity.modelDownload')}</span>
+        <span className='text-right text-[10px] tabular-nums'>
+          {percent !== null ? `${percent}%` : null}
+        </span>
+        <span aria-hidden='true' />
+        <div className='col-start-2 col-end-4'>
+          <Progress value={percent} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Failure({ message, onDismiss }: { message: string; onDismiss: () => void }) {
+  const { t } = useTranslation()
+  return (
+    <div className='grid grid-cols-[1rem_minmax(0,1fr)_2.25rem_1.5rem] items-start gap-x-2.5 border-b p-3 text-[11px] last:border-b-0'>
+      <CircleAlert className='mt-0.5 size-3.5 justify-self-center text-destructive' />
+      <span className='col-start-2 col-end-4 min-w-0 text-destructive'>{message}</span>
+      <Button
+        size='icon-xs'
+        variant='ghost'
+        className='-mt-1'
+        aria-label={t('activity.dismiss')}
+        onClick={onDismiss}
+      >
+        <X />
+      </Button>
+    </div>
+  )
+}
+
+function Progress({ value }: { value: number | null }) {
+  return (
+    <div
+      role='progressbar'
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={value ?? undefined}
+      className='mt-2 h-1 overflow-hidden rounded-full bg-muted'
+    >
+      <div
+        className={`h-full rounded-full bg-primary ${value === null ? 'w-1/2' : ''}`}
+        style={value === null ? undefined : { width: `${value}%` }}
+      />
+    </div>
+  )
+}
+
+function progress(completed: number, total: number): number | null {
+  return total > 0 ? Math.min(100, Math.round((completed / total) * 100)) : null
+}