@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/src/components/editor/AgentPanel.tsx

@@ -0,0 +1,352 @@
+'use client'
+
+import { Channel } from '@aphrody/api/core'
+import { Bot, CircleStop, LogOut, Send, Sparkles } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { call } from '@aphrody/koharu-ui/lib/backend'
+import { pageKey, pagesKey, projectKey, refresh } from '@aphrody/koharu-ui/lib/queries'
+import {
+  commands,
+  type AgentStatus,
+  type Config,
+  type Event,
+  type LoginEvent,
+  type Reasoning,
+  type RunId,
+} from '@aphrody/koharu-bridge/protocol'
+import { Badge } from '@aphrody/m3-primitives'
+import { Button } from '../../internal/components/button'
+import { ScrollArea } from '../../internal/components/scroll-area'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../internal/components/select'
+import { Textarea } from '../../internal/components/textarea'
+
+interface ConversationMessage {
+  id: string
+  role: 'user' | 'assistant'
+  text: string
+  error?: boolean
+}
+
+export function AgentPanel() {
+  const { t } = useTranslation()
+  const [status, setStatus] = useState<AgentStatus | null>(null)
+  const [loginEvent, setLoginEvent] = useState<LoginEvent | null>(null)
+  const [loggingIn, setLoggingIn] = useState(false)
+  const [messages, setMessages] = useState<ConversationMessage[]>([])
+  const [prompt, setPrompt] = useState('')
+  const [running, setRunning] = useState<RunId | null>(null)
+  const [activity, setActivity] = useState<string | null>(null)
+
+  useEffect(() => {
+    void call(commands.getAgentStatus)
+      .then(setStatus)
+      .catch(() => undefined)
+  }, [])
+
+  const selectedModel = useMemo(
+    () =>
+      status?.models.find((model) => model.id === status.config.model) ?? status?.models[0] ?? null,
+    [status],
+  )
+
+  if (!status) {
+    return (
+      <div className='grid min-h-0 flex-1 place-items-center p-6 text-[11px] text-muted-foreground'>
+        {t('agent.loading')}
+      </div>
+    )
+  }
+
+  if (!status.account) {
+    const code = loginEvent?.type === 'device_code' ? loginEvent.user_code : null
+    return (
+      <div className='flex min-h-0 flex-1 flex-col items-center justify-center p-6 text-center'>
+        <div className='grid size-11 place-items-center rounded-2xl bg-primary/10 text-primary'>
+          <Sparkles className='size-5' />
+        </div>
+        <h3 className='mt-4 text-sm font-semibold'>{t('agent.signInTitle')}</h3>
+        <p className='mt-1 max-w-64 text-[11px] leading-5 text-muted-foreground'>
+          {t('agent.signInDescription')}
+        </p>
+        {code ? (
+          <div className='mt-4 w-full max-w-64 rounded-xl border bg-muted/40 p-3'>
+            <p className='text-[10px] text-muted-foreground'>{t('agent.deviceCode')}</p>
+            <p className='mt-1 font-mono text-lg font-semibold tracking-[0.18em] select-text'>
+              {code}
+            </p>
+            <p className='mt-1 text-[10px] leading-4 text-muted-foreground'>
+              {t('agent.deviceCodeHint')}
+            </p>
+          </div>
+        ) : null}
+        <Button className='mt-4 w-full max-w-64' disabled={loggingIn} onClick={() => void login()}>
+          {loggingIn ? t('agent.signingIn') : t('agent.signIn')}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex min-h-0 flex-1 flex-col'>
+      <div className='grid shrink-0 gap-2 border-b px-3 py-2.5'>
+        <div className='flex min-w-0 items-center gap-2'>
+          <div className='min-w-0 flex-1'>
+            <p className='truncate text-[11px] font-medium'>{status.account.email ?? 'Codex'}</p>
+            <p className='truncate text-[9px] text-muted-foreground'>
+              {status.account.plan ?? t('agent.account')}
+            </p>
+          </div>
+          <Button
+            variant='ghost'
+            size='icon-sm'
+            aria-label={t('agent.signOut')}
+            disabled={running !== null}
+            onClick={() => void logout()}
+          >
+            <LogOut />
+          </Button>
+        </div>
+        <div className='grid grid-cols-[minmax(0,1fr)_7rem] gap-1.5'>
+          <Select
+            value={status.config.model ?? 'automatic'}
+            onValueChange={(model) => {
+              const selected =
+                status.models.find((candidate) => candidate.id === model) ?? status.models[0]
+              const reasoning =
+                selected &&
+                selected.reasoning.length > 0 &&
+                !selected.reasoning.includes(status.config.reasoning)
+                  ? selected.reasoning[0]
+                  : status.config.reasoning
+              void saveConfig({
+                model: model === 'automatic' ? null : model,
+                reasoning,
+              })
+            }}
+          >
+            <SelectTrigger size='sm' className='w-full min-w-0' aria-label={t('agent.model')}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent align='start'>
+              <SelectItem value='automatic'>{t('agent.automatic')}</SelectItem>
+              {status.models.map((model) => (
+                <SelectItem key={model.id} value={model.id}>
+                  {model.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select
+            value={status.config.reasoning}
+            onValueChange={(reasoning) =>
+              void saveConfig({ ...status.config, reasoning: reasoning as Reasoning })
+            }
+          >
+            <SelectTrigger size='sm' className='w-full min-w-0' aria-label={t('agent.reasoning')}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent align='end'>
+              {(selectedModel?.reasoning ?? [status.config.reasoning]).map((reasoning) => (
+                <SelectItem key={reasoning} value={reasoning}>
+                  {t(`agent.reasoningLevels.${reasoning}`)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <ScrollArea className='min-h-0 flex-1'>
+        {messages.length ? (
+          <div className='grid gap-3 p-3'>
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                data-role={message.role}
+                className='flex data-[role=user]:justify-end'
+              >
+                <div
+                  data-role={message.role}
+                  data-error={message.error || undefined}
+                  className='max-w-[90%] rounded-xl bg-muted px-3 py-2 text-[11px] leading-5 whitespace-pre-wrap select-text data-[error=true]:bg-destructive/10 data-[error=true]:text-destructive data-[role=user]:bg-primary data-[role=user]:text-primary-foreground'
+                >
+                  {message.text || (message.role === 'assistant' ? t('agent.working') : '')}
+                </div>
+              </div>
+            ))}
+            {activity ? (
+              <div className='flex items-center gap-1.5 text-[10px] text-muted-foreground'>
+                <span className='size-1.5 rounded-full bg-primary' />
+                {activity}
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <div className='grid min-h-64 place-items-center p-6 text-center'>
+            <div>
+              <Bot className='mx-auto size-6 text-primary' />
+              <h3 className='mt-3 text-xs font-semibold'>{t('agent.emptyTitle')}</h3>
+              <p className='mt-1 max-w-56 text-[10px] leading-4 text-muted-foreground'>
+                {t('agent.emptyDescription')}
+              </p>
+            </div>
+          </div>
+        )}
+      </ScrollArea>
+
+      <div className='shrink-0 border-t p-2.5'>
+        <div className='rounded-xl border bg-background p-1.5 focus-within:border-ring'>
+          <Textarea
+            id='agent-message'
+            value={prompt}
+            disabled={running !== null}
+            aria-label={t('agent.message')}
+            placeholder={t('agent.placeholder')}
+            className='max-h-36 min-h-16 resize-none border-0 bg-transparent px-1.5 py-1 text-[11px] leading-5 shadow-none focus-visible:ring-0'
+            onChange={(event) => setPrompt(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault()
+                void send()
+              }
+            }}
+          />
+          <div className='flex items-center justify-between gap-2 pt-1'>
+            <Badge
+              variant='outline'
+              className='h-5 max-w-44 truncate px-1.5 text-[9px] font-normal'
+            >
+              {selectedModel?.name ?? t('agent.automatic')}
+            </Badge>
+            {running ? (
+              <Button
+                variant='outline'
+                size='icon-sm'
+                aria-label={t('agent.cancel')}
+                onClick={() => void call(commands.cancelAgent, running).catch(() => undefined)}
+              >
+                <CircleStop />
+              </Button>
+            ) : (
+              <Button
+                size='icon-sm'
+                aria-label={t('agent.send')}
+                disabled={!prompt.trim()}
+                onClick={() => void send()}
+              >
+                <Send />
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  async function login() {
+    setLoggingIn(true)
+    setLoginEvent({ type: 'progress', message: t('agent.signingIn') })
+    const channel = new Channel<LoginEvent>()
+    channel.onmessage = setLoginEvent
+    try {
+      setStatus(await call(commands.loginAgent, channel))
+      setLoginEvent(null)
+    } finally {
+      setLoggingIn(false)
+    }
+  }
+
+  async function logout() {
+    setStatus(await call(commands.logoutAgent))
+    setMessages([])
+    setActivity(null)
+  }
+
+  async function saveConfig(config: Config) {
+    const saved = await call(commands.saveAgentConfig, config)
+    setStatus((current) => (current ? { ...current, config: saved } : current))
+  }
+
+  async function send() {
+    const message = prompt.trim()
+    if (!message || running) return
+    const id = crypto.randomUUID()
+    const assistant = crypto.randomUUID()
+    let settled = false
+    setPrompt('')
+    setMessages((current) => [
+      ...current,
+      { id, role: 'user', text: message },
+      { id: assistant, role: 'assistant', text: '' },
+    ])
+    setActivity(t('agent.working'))
+
+    const channel = new Channel<Event>()
+    channel.onmessage = (event) => {
+      switch (event.type) {
+        case 'started':
+          setRunning(event.run)
+          break
+        case 'text_delta':
+          updateAssistant((text) => text + event.delta)
+          break
+        case 'reasoning_delta':
+          setActivity(t('agent.thinking'))
+          break
+        case 'tool_started':
+          setActivity(t('agent.applying'))
+          break
+        case 'tool_finished':
+          if (event.changed) void refresh(projectKey, pagesKey, pageKey)
+          setActivity(t('agent.working'))
+          break
+        case 'completed':
+          settled = true
+          updateAssistant(() => event.message)
+          setRunning(null)
+          setActivity(null)
+          void refresh(projectKey, pagesKey, pageKey)
+          break
+        case 'failed':
+          settled = true
+          updateAssistant(() => event.message, true)
+          setRunning(null)
+          setActivity(null)
+          break
+        case 'cancelled':
+          settled = true
+          updateAssistant((text) => text || t('agent.cancelled'))
+          setRunning(null)
+          setActivity(null)
+          break
+      }
+    }
+    try {
+      const run = await call(commands.runAgent, message, channel)
+      if (!settled) setRunning(run)
+    } catch (error) {
+      settled = true
+      updateAssistant(() => (error instanceof Error ? error.message : t('agent.failed')), true)
+      setRunning(null)
+      setActivity(null)
+    }
+
+    function updateAssistant(update: (text: string) => string, error = false) {
+      setMessages((current) =>
+        current.map((item) =>
+          item.id === assistant
+            ? { ...item, text: update(item.text), error: error || item.error }
+            : item,
+        ),
+      )
+    }
+  }
+}

package/src/components/editor/CanvasCommandBar.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { InferenceControl } from '@aphrody/koharu-ui/components/editor/InferenceControl'
+import { call } from '@aphrody/koharu-ui/lib/backend'
+import { usePage } from '@aphrody/koharu-ui/lib/queries'
+import { pipelineStages, useKoharuStore, type PipelineScope } from '@aphrody/koharu-ui/lib/store'
+import { commands, type Scope, type Stage } from '@aphrody/koharu-bridge/protocol'
+
+export function CanvasCommandBar() {
+  const page = usePage().data
+  const selectedPages = useKoharuStore((state) => state.selectedPages)
+  const jobs = useKoharuStore((state) => state.jobs)
+  const running = Object.values(jobs).find((job) => job.state === 'running')
+
+  const run = (selection: PipelineScope, stages: Stage[]) => {
+    if (!page) return
+    const scope: Scope =
+      selection === 'project'
+        ? { scope: 'project' }
+        : selection === 'selected-pages'
+          ? { scope: 'pages', value: selectedPages }
+          : { scope: 'pages', value: [page.id] }
+    const operation =
+      stages.length === pipelineStages.length
+        ? ({ operation: 'full' } as const)
+        : stages.length === 1
+          ? ({ operation: 'only', stage: stages[0]! } as const)
+          : ({ operation: 'stages', stages } as const)
+    void call(commands.process, scope, operation).catch(() => undefined)
+  }
+
+  return (
+    <header className='flex h-10 shrink-0 items-center gap-2 border-b border-border/80 bg-[var(--surface-toolbar)] px-2.5'>
+      <div className='min-w-0 flex-1' />
+      <InferenceControl disabled={!page || Boolean(running)} onRun={run} />
+    </header>
+  )
+}

package/src/components/editor/CanvasOverlay.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import { useMemo, useRef } from 'react'
+
+import { SelectionControls } from '@aphrody/koharu-ui/components/editor/SelectionControls'
+import { effectiveLayerVisibility, expandLayerSelection, isTextLayer } from '@aphrody/koharu-ui/lib/document'
+import { controlFrame, cssFrame, selectableLayer, type Camera } from '@aphrody/koharu-ui/lib/geometry'
+import type {
+  EntityId,
+  Frame,
+  Geometry,
+  Page,
+  Point,
+  TransformFrame,
+} from '@aphrody/koharu-bridge/protocol'
+
+interface CanvasOverlayProps {
+  page: Page
+  camera: Camera
+  selected: EntityId[]
+  hovered: EntityId | null
+  frames: Readonly<Record<EntityId, Frame>>
+  previews: Readonly<Record<EntityId, Frame>>
+  draft: Frame | null
+  cursor: Point | null
+  brushSize: number
+  showBrushCursor: boolean
+  onTransformStart: (elements: TransformFrame[]) => void
+  onTransformFrame: (elements: TransformFrame[]) => void
+  onTransformEnd: () => void
+}
+
+export function CanvasOverlay({
+  page,
+  camera,
+  selected,
+  hovered,
+  frames,
+  previews,
+  draft,
+  cursor,
+  brushSize,
+  showBrushCursor,
+  onTransformStart,
+  onTransformFrame,
+  onTransformEnd,
+}: CanvasOverlayProps) {
+  const root = useRef<HTMLDivElement>(null)
+  const expandedSelection = useMemo(
+    () => expandLayerSelection(page.layers, selected),
+    [page.layers, selected],
+  )
+  const selectedIds = useMemo(() => new Set(expandedSelection), [expandedSelection])
+  const multipleSelected = expandedSelection.length > 1
+  const layers = useMemo(
+    () =>
+      page.layers.flatMap((layer) => {
+        const visibility = effectiveLayerVisibility(page.layers, layer)
+        if (!visibility.visible || visibility.opacity <= 0) return []
+        const frame = previews[layer.id] ?? controlFrame(layer, frames)
+        return frame ? [{ layer, frame, opacity: visibility.opacity }] : []
+      }),
+    [page.layers, previews, frames],
+  )
+  const selectedLayer =
+    expandedSelection.length === 1
+      ? page.layers.find((layer) => layer.id === expandedSelection[0])
+      : undefined
+  const selectedTextLayer = selectedLayer && isTextLayer(selectedLayer) ? selectedLayer : undefined
+  const automaticRegion = selectedTextLayer?.automatic_region
+    ? page.regions.find((region) => region.id === selectedTextLayer.automatic_region)
+    : undefined
+  const selectionControl = multipleSelected
+    ? undefined
+    : layers.find(({ layer }) => selectedIds.has(layer.id) && selectableLayer(layer))
+  const scale = camera.zoom / window.devicePixelRatio
+
+  return (
+    <div
+      ref={root}
+      data-testid='canvas-overlay'
+      className='pointer-events-none absolute inset-0 overflow-hidden'
+      aria-hidden
+    >
+      {automaticRegion && (
+        <AutomaticRegionOverlay geometry={automaticRegion.geometry} camera={camera} />
+      )}
+      {layers.map(({ layer, frame, opacity }) => {
+        const position = cssFrame(frame, camera)
+        const selected = selectedIds.has(layer.id) && selectableLayer(layer)
+        const highlighted = !selected && hovered === layer.id
+        return (
+          <div
+            key={layer.id}
+            data-element={layer.id}
+            className='absolute box-border bg-transparent'
+            style={{
+              left: position.left,
+              top: position.top,
+              width: position.width,
+              height: position.height,
+              transform: `rotate(${position.angle}deg)`,
+              transformOrigin: '50% 50%',
+              border:
+                highlighted || (selected && multipleSelected)
+                  ? '1px solid var(--canvas-selection)'
+                  : undefined,
+              opacity,
+              willChange: selected ? 'left, top, width, height, transform' : undefined,
+            }}
+          />
+        )
+      })}
+
+      {draft && <DraftOverlay frame={draft} camera={camera} />}
+      {showBrushCursor && cursor && (
+        <div
+          className='absolute rounded-full border border-white/95 shadow-[0_0_0_1px_rgb(0_0_0/0.9),0_1px_3px_rgb(0_0_0/0.45)]'
+          style={{
+            left: cursor.x / window.devicePixelRatio - (brushSize * scale) / 2,
+            top: cursor.y / window.devicePixelRatio - (brushSize * scale) / 2,
+            width: brushSize * scale,
+            height: brushSize * scale,
+          }}
+        />
+      )}
+
+      {selectionControl && (
+        <SelectionControls
+          container={root}
+          element={selectionControl.layer.id}
+          frame={selectionControl.frame}
+          camera={camera}
+          edgesOnly={Boolean(selectedTextLayer)}
+          onTransformStart={onTransformStart}
+          onTransformFrame={onTransformFrame}
+          onTransformEnd={onTransformEnd}
+        />
+      )}
+    </div>
+  )
+}
+
+function AutomaticRegionOverlay({ geometry, camera }: { geometry: Geometry; camera: Camera }) {
+  const dpr = window.devicePixelRatio
+  const points = geometry.points
+    .map(
+      (point) =>
+        `${(point.x * camera.zoom + camera.translation[0]) / dpr},${(point.y * camera.zoom + camera.translation[1]) / dpr}`,
+    )
+    .join(' ')
+  if (!points) return null
+
+  return (
+    <svg className='absolute inset-0 size-full overflow-hidden' data-testid='text-fit-region'>
+      <polygon
+        points={points}
+        fill='none'
+        stroke='var(--canvas-region-contrast)'
+        strokeWidth='7'
+        strokeDasharray='10 6'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        vectorEffect='non-scaling-stroke'
+      />
+      <polygon
+        points={points}
+        fill='none'
+        stroke='var(--canvas-region-stroke)'
+        strokeWidth='3'
+        strokeDasharray='10 6'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        vectorEffect='non-scaling-stroke'
+      />
+    </svg>
+  )
+}
+
+function DraftOverlay({ frame, camera }: { frame: Frame; camera: Camera }) {
+  const position = cssFrame(frame, camera)
+  return (
+    <div
+      className='absolute border border-dashed border-primary bg-primary/5'
+      style={{
+        left: position.left,
+        top: position.top,
+        width: position.width,
+        height: position.height,
+        transform: `rotate(${position.angle}deg)`,
+      }}
+    />
+  )
+}