@allbluecn/web-app 0.12.0 → 0.12.3

package/src/components/harness/dock/resource-preview.tsx

@@ -0,0 +1,274 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { readWorkspaceFileFn } from "@/server/serverFns/harness/workspace-files"
+import { getDocumentFn } from "@/server/serverFns/knowledge"
+import { getPrdDetailFn } from "@/plugins/core/prd/serverFns/detail"
+import { getStoryDetailFn } from "@/server/serverFns/story/story-crud/detail"
+import AIMessage from "@/components/hextaui/ai-message"
+import { parseResourceUri, type ResourceUri } from "./resource-uri"
+import { m } from "@/paraglide/messages.js"
+
+const MAX_CONTENT_CHARS = 5000
+
+function FilePreview({ uri }: { uri: ResourceUri & { kind: "file" } }) {
+  const [content, setContent] = useState<string | null>(null)
+  const [mimeType, setMimeType] = useState<string>("text/plain")
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    readWorkspaceFileFn({ data: { workspaceId: uri.workspaceId, path: uri.relPath } })
+      .then((res) => {
+        if (cancelled) return
+        setContent(res.content ?? null)
+        setMimeType(res.mimeType ?? "text/plain")
+        setError(null)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : String(e))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [uri.workspaceId, uri.relPath])
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        {m.harness_dock_loadingFile()}
+      </div>
+    )
+  }
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-destructive">
+        {error}
+      </div>
+    )
+  }
+  if (content === null) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
+        {m.harness_dock_fileEmpty()}
+      </div>
+    )
+  }
+  const display = content.length > MAX_CONTENT_CHARS ? `${content.slice(0, MAX_CONTENT_CHARS)}…` : content
+  return (
+    <pre className="h-full overflow-auto p-4 text-xs font-mono whitespace-pre-wrap break-all text-foreground">
+      {display}
+    </pre>
+  )
+}
+
+function KbPreview({ uri }: { uri: ResourceUri & { kind: "kb" } }) {
+  const [doc, setDoc] = useState<{ title: string; content: unknown } | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    getDocumentFn({ data: { id: uri.docId } })
+      .then((res) => {
+        if (cancelled) return
+        setDoc(res)
+        setError(null)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : String(e))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [uri.docId])
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        {m.harness_dock_loadingDoc()}
+      </div>
+    )
+  }
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-destructive">
+        {error}
+      </div>
+    )
+  }
+  if (!doc) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
+        {m.harness_dock_docNotFound()}
+      </div>
+    )
+  }
+  const textContent = typeof doc.content === "string" ? doc.content : JSON.stringify(doc.content ?? "")
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {typeof doc.title === "string" && doc.title ? (
+        <div className="border-b px-4 py-2 text-sm font-medium text-foreground">{doc.title}</div>
+      ) : null}
+      <div className="flex-1 overflow-auto">
+        <AIMessage content={textContent.slice(0, MAX_CONTENT_CHARS)} isStreaming={false} />
+      </div>
+    </div>
+  )
+}
+
+function PrdPreview({ uri }: { uri: ResourceUri & { kind: "prd" } }) {
+  const [prd, setPrd] = useState<{ name: string; description: string | null } | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    getPrdDetailFn({ data: { id: uri.id } })
+      .then((res) => {
+        if (cancelled) return
+        if (res.error === "unauthorized" || res.error === "not_found") {
+          setError(res.error === "not_found" ? m.harness_dock_prdNotFound() : m.common_share_loginRequired())
+          return
+        }
+        setPrd({ name: res.prd?.name ?? "", description: res.prd?.description ?? null })
+        setError(null)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : String(e))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [uri.id])
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        {m.harness_dock_loadingDoc()}
+      </div>
+    )
+  }
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-destructive">
+        {error}
+      </div>
+    )
+  }
+  if (!prd) return null
+  const displayContent = prd.description ?? ""
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {prd.name ? (
+        <div className="border-b px-4 py-2 text-sm font-medium text-foreground">{prd.name}</div>
+      ) : null}
+      <div className="flex-1 overflow-auto">
+        <AIMessage content={displayContent.slice(0, MAX_CONTENT_CHARS)} isStreaming={false} />
+      </div>
+    </div>
+  )
+}
+
+function StoryPreview({ uri }: { uri: ResourceUri & { kind: "story" } }) {
+  const [story, setStory] = useState<{ name: string; description: string | null; state?: string } | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    getStoryDetailFn({ data: { storyId: uri.id } })
+      .then((res) => {
+        if (cancelled) return
+        setStory({
+          name: res.name ?? "",
+          description: res.description ?? null,
+          state: res.state,
+        })
+        setError(null)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : String(e))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [uri.id])
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        {m.harness_dock_loadingDoc()}
+      </div>
+    )
+  }
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-destructive">
+        {error}
+      </div>
+    )
+  }
+  if (!story) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
+        {m.harness_dock_storyNotFound()}
+      </div>
+    )
+  }
+  return (
+    <div className="flex h-full flex-col overflow-hidden p-4">
+      <div className="mb-2 text-sm font-semibold text-foreground">{story.name}</div>
+      {story.state ? (
+        <div className="mb-1 text-xs text-muted-foreground">{story.state}</div>
+      ) : null}
+      {story.description ? (
+        <div className="flex-1 overflow-auto text-sm text-foreground">
+          <AIMessage content={story.description.slice(0, MAX_CONTENT_CHARS)} isStreaming={false} />
+        </div>
+      ) : (
+        <div className="flex-1 text-sm text-muted-foreground">{m.harness_dock_storyEmpty()}</div>
+      )}
+    </div>
+  )
+}
+
+export function ResourcePreview({ uri }: { uri: ResourceUri }) {
+  switch (uri.kind) {
+    case "file":
+      return <FilePreview uri={uri} />
+    case "kb":
+      return <KbPreview uri={uri} />
+    case "prd":
+      return <PrdPreview uri={uri} />
+    case "story":
+      return <StoryPreview uri={uri} />
+    default:
+      return (
+        <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+          {m.harness_dock_unknownResource()}
+        </div>
+      )
+  }
+}

package/src/components/harness/dock/resource-uri.ts

@@ -0,0 +1,44 @@
+export type ResourceUri =
+  | { kind: "file"; workspaceId: string; relPath: string }
+  | { kind: "kb"; docId: string }
+  | { kind: "prd"; id: string }
+  | { kind: "story"; id: string }
+
+const SCHEME = "allblue-resource://"
+
+export function parseResourceUri(uri: string): ResourceUri | null {
+  if (!uri.startsWith(SCHEME)) return null
+  const rest = uri.slice(SCHEME.length)
+  const [kind, ...restParts] = rest.split("/")
+  const id = restParts.join("/")
+  switch (kind) {
+    case "file": {
+      const [workspaceId, ...pathParts] = id.split("/")
+      return { kind: "file", workspaceId, relPath: pathParts.join("/") }
+    }
+    case "kb":
+      return { kind: "kb", docId: id }
+    case "prd":
+      return { kind: "prd", id }
+    case "story":
+      return { kind: "story", id }
+    default:
+      return null
+  }
+}
+
+export function buildFileUri(workspaceId: string, relPath: string) {
+  return `${SCHEME}file/${workspaceId}/${relPath}`
+}
+
+export function buildKbUri(docId: string) {
+  return `${SCHEME}kb/${docId}`
+}
+
+export function buildPrdUri(id: string) {
+  return `${SCHEME}prd/${id}`
+}
+
+export function buildStoryUri(id: string) {
+  return `${SCHEME}story/${id}`
+}

package/src/components/harness/gallery/gallery-card.tsx

@@ -0,0 +1,63 @@
+import { RefreshCw, Copy, Share2 } from "lucide-react"
+import { formatTimestamp } from "@/lib/datetime"
+import { KIND_ICONS, getKindLabel, getArtifactUrl, getPrompt } from "./gallery-types"
+export type { GalleryItem } from "./gallery-types"
+import type { GalleryItem } from "./gallery-types"
+import { m } from "@/paraglide/messages.js"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+interface GalleryCardProps {
+  item: GalleryItem
+  onOpen?: () => void
+  onVariant?: (id: string) => void
+  variantPending?: boolean
+  onCopyPrompt?: (prompt: string) => void
+  onAttach?: (target: "story" | "kb" | "prd") => void
+  attachDisabled?: boolean
+}
+
+export function GalleryCard({ item, onOpen, onVariant, variantPending, onCopyPrompt, onAttach, attachDisabled }: GalleryCardProps) {
+  const { kind, status, artifacts, startedAt, id, linkedTarget } = item
+  const Icon = KIND_ICONS[kind] ?? KIND_ICONS.image
+  const label = getKindLabel(kind)
+  const url = getArtifactUrl(artifacts)
+  const prompt = getPrompt(item.result)
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2 rounded-lg border bg-muted/50 p-2">
+      <Button variant="ghost" className="relative h-auto w-full overflow-hidden p-0" disabled={!url} onClick={onOpen} aria-label={m.gallery_previewItem({ name: artifacts?.[0]?.name || id })}>
+        <span className="flex aspect-square w-full items-center justify-center">
+          {url && kind === "video" ? <video src={url} preload="metadata" muted className="size-full object-cover" /> : url && kind === "image" ? <img src={url} alt={label} className="size-full object-cover" /> : <Icon className="size-8 text-muted-foreground" />}
+        </span>
+      </Button>
+      <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground"><span>{label}</span>{status === "failed" && <span>{m.gallery_failed()}</span>}</div>
+      <p className="text-xs text-muted-foreground">{formatTimestamp(startedAt, "yyyy-MM-dd HH:mm")}</p>
+      <div className="flex flex-wrap gap-1">
+        {onVariant && <Button size="sm" variant="outline" disabled={variantPending} onClick={() => onVariant(id)}><RefreshCw />{m.gallery_createVariant()}</Button>}
+        {prompt && onCopyPrompt && <Button size="sm" variant="ghost" onClick={() => onCopyPrompt(prompt)}><Copy />{m.gallery_copyPrompt()}</Button>}
+        {onAttach && (
+          <Select disabled={attachDisabled} onValueChange={(value) => { if (value) onAttach(value as "story" | "kb" | "prd") }}>
+            <SelectTrigger className="h-7 w-auto text-xs" aria-label={m.gallery_attachTo()}>
+              <Share2 className="size-3" />
+              <SelectValue placeholder={m.gallery_attachTo()} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="story">{m.gallery_attachToStory()}</SelectItem>
+              <SelectItem value="kb">{m.gallery_attachToKb()}</SelectItem>
+              <SelectItem value="prd">{m.gallery_attachToPrd()}</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+      {linkedTarget && <Badge variant="secondary" className="self-start">{m.gallery_linked()} · {linkedTarget.kind}</Badge>}
+    </div>
+  )
+}

package/src/components/harness/gallery/gallery-grid.tsx

@@ -0,0 +1,169 @@
+import { useState } from "react"
+import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { GalleryCard } from "./gallery-card"
+import { getArtifactUrl, getPrompt, type GalleryItem } from "./gallery-types"
+import { LightboxViewer, type LightboxData } from "./lightbox-viewer"
+import { listGenerationRunsFn, createVariantFn } from "@/server/serverFns/harness/gallery"
+import { attachToStoryFn } from "@/server/serverFns/harness/attach-to-story"
+import { attachToKbFn } from "@/server/serverFns/harness/attach-to-kb"
+import { attachPrototypeToPrdFn } from "@/server/serverFns/harness/attach-prototype"
+import { listStoriesFn } from "@/server/serverFns/story/story-crud"
+import { listKnowledgeFn } from "@/server/serverFns/knowledge"
+import { listPrdFn } from "@/plugins/core/prd/serverFns/prd"
+import { FeatureGate } from "@/components/billing/feature-gate"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Button } from "@/components/ui/button"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { toast } from "@/components/ui/toast"
+import { m } from "@/paraglide/messages.js"
+import { cn } from "@/lib/utils"
+import { formatTimestamp } from "@/lib/datetime"
+
+type AttachKind = "story" | "kb" | "prd"
+
+function attachDialogTitle(kind: AttachKind): string {
+  if (kind === "story") return m.gallery_pickStory()
+  if (kind === "kb") return m.gallery_pickKb()
+  return m.gallery_pickPrd()
+}
+
+interface GalleryGridProps {
+  kind?: "image" | "video" | "speech" | "transcription" | "prototype"
+  threadId?: string
+  className?: string
+  compact?: boolean
+}
+
+export function GalleryGrid({ kind, threadId, className, compact = false }: GalleryGridProps) {
+  const queryClient = useQueryClient()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [copyFailed, setCopyFailed] = useState(false)
+  const [attachTarget, setAttachTarget] = useState<{ id: string; kind: AttachKind; item: GalleryItem } | null>(null)
+  const [attachOptions, setAttachOptions] = useState<{ id: string; name: string }[]>([])
+  const [attachPicked, setAttachPicked] = useState<string | null>(null)
+  const [attachListLoading, setAttachListLoading] = useState(false)
+  const query = useInfiniteQuery({
+    queryKey: ["generationRuns", kind, threadId, compact],
+    initialPageParam: undefined as string | undefined,
+    queryFn: ({ pageParam }) => listGenerationRunsFn({ data: { kind, threadId, cursor: pageParam, limit: compact ? 12 : 24 } }),
+    getNextPageParam: (page) => page.nextCursor ?? undefined,
+  })
+  const items: GalleryItem[] = Array.from(new Map((query.data?.pages.flatMap((page) => page.runs) ?? []).map((run) => [run.id, run])).values())
+  const variant = useMutation({
+    mutationFn: (item: GalleryItem) => createVariantFn({ data: { sourceRunId: item.id, threadId: item.threadId } }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["generationRuns"] }),
+  })
+  const attach = useMutation({
+    mutationFn: async ({ id, kind, targetId, title }: { id: string; kind: AttachKind; targetId: string; title?: string }) => {
+      if (kind === "story") return attachToStoryFn({ data: { generationRunId: id, storyId: targetId } })
+      if (kind === "kb") return attachToKbFn({ data: { generationRunId: id, kbId: targetId, title: title ?? "" } })
+      return attachPrototypeToPrdFn({ data: { generationRunId: id, prdId: targetId } })
+    },
+    onSuccess: () => {
+      toast.success(m.gallery_attachSuccess())
+      setAttachTarget(null)
+      void queryClient.invalidateQueries({ queryKey: ["generationRuns"] })
+    },
+    onError: () => toast.error(m.gallery_attachFailed()),
+  })
+
+  const openAttachDialog = async (item: GalleryItem, attachKind: AttachKind) => {
+    setAttachTarget({ id: item.id, kind: attachKind, item })
+    setAttachPicked(null)
+    setAttachOptions([])
+    setAttachListLoading(true)
+    try {
+      if (attachKind === "story") {
+        const res = await listStoriesFn({ data: {} })
+        setAttachOptions(res.items.map((story) => ({ id: story.id, name: story.name })))
+      } else if (attachKind === "kb") {
+        const res = await listKnowledgeFn({ data: undefined })
+        setAttachOptions(res.map((kb) => ({ id: kb.id, name: kb.name })))
+      } else {
+        const res = await listPrdFn({ data: {} })
+        setAttachOptions(res.map((prd) => ({ id: prd.id, name: prd.name })))
+      }
+    } catch {
+      toast.error(m.gallery_pickOptionsFailed())
+      setAttachTarget(null)
+    } finally {
+      setAttachListLoading(false)
+    }
+  }
+
+  const confirmAttach = () => {
+    if (!attachTarget || !attachPicked) return
+    const { id, kind, item } = attachTarget
+    const fallbackTitle = item.artifacts?.[0]?.name?.slice(0, 100) || `attachment-${item.id}`
+    const title = (getPrompt(item.result) || fallbackTitle).slice(0, 100)
+    attach.mutate({ id, kind, targetId: attachPicked, ...(kind === "kb" ? { title } : {}) })
+  }
+  const previewItems = items.filter((item) => getArtifactUrl(item.artifacts))
+  const selectedIndex = previewItems.findIndex((item) => item.id === selectedId)
+  const selected = previewItems[selectedIndex]
+  const artifact = selected?.artifacts?.find((entry) => entry.url || entry.sourceUrl)
+  const data: LightboxData | null = selected && artifact ? {
+    type: selected.kind === "speech" ? "audio" : selected.kind === "image" || selected.kind === "video" ? selected.kind : "unknown",
+    url: getArtifactUrl(selected.artifacts)!,
+    name: artifact.name,
+    mimeType: artifact.mimeType,
+    prompt: getPrompt(selected.result),
+    model: selected.model,
+    provider: selected.provider,
+    createdAt: formatTimestamp(selected.startedAt, "yyyy-MM-dd HH:mm"),
+    size: artifact.size ? m.gallery_bytes({ size: artifact.size }) : undefined,
+  } : null
+  const columns = compact ? "grid-cols-2 xl:grid-cols-3" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6"
+
+  return (
+    <div className={cn("flex min-h-0 flex-col gap-4", className)}>
+      {query.isError && <Alert variant="destructive"><AlertDescription>{m.gallery_loadError()}<Button variant="outline" onClick={() => { void (query.isFetchNextPageError ? query.fetchNextPage() : query.refetch()) }}>{m.gallery_retry()}</Button></AlertDescription></Alert>}
+      {variant.isError && <Alert variant="destructive"><AlertDescription>{m.gallery_variantError()}</AlertDescription></Alert>}
+      {copyFailed && <Alert variant="destructive"><AlertDescription>{m.gallery_copyError()}</AlertDescription></Alert>}
+      {query.isPending ? (
+        <div className={cn("grid gap-4", columns)} aria-label={m.gallery_loading()}>{Array.from({ length: compact ? 6 : 12 }, (_, i) => <Skeleton key={i} className="aspect-square rounded-lg" />)}</div>
+      ) : items.length === 0 && !query.isError ? (
+        <p className="p-8 text-center text-muted-foreground">{m.gallery_noItems()}</p>
+      ) : (
+        <div className={cn("grid gap-4", columns)}>
+          {items.map((item) => <GalleryCard key={item.id} item={item} onOpen={() => setSelectedId(item.id)} variantPending={variant.isPending} onVariant={["image", "video", "speech"].includes(item.kind) && item.threadId && item.status === "completed" ? () => variant.mutate(item) : undefined} onCopyPrompt={async (prompt) => {
+            try { await navigator.clipboard.writeText(prompt); setCopyFailed(false) } catch { setCopyFailed(true) }
+          }} onAttach={(target) => { void openAttachDialog(item, target) }} attachDisabled={attach.isPending} />)}
+        </div>
+      )}
+      {query.hasNextPage && <Button variant="outline" disabled={query.isFetching} onClick={() => { void query.fetchNextPage() }}>{query.isFetchingNextPage ? m.gallery_loading() : m.gallery_loadMore()}</Button>}
+      <FeatureGate feature="mediaGeneration" mode="disable" fallback={null}>
+        <Dialog open={!!attachTarget} onOpenChange={(open) => { if (!open) setAttachTarget(null) }}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{attachTarget ? attachDialogTitle(attachTarget.kind) : ""}</DialogTitle>
+            </DialogHeader>
+            {attachListLoading ? (
+              <div className="flex flex-col gap-2">{Array.from({ length: 4 }, (_, i) => <Skeleton key={i} className="h-9 rounded-md" />)}</div>
+            ) : attachOptions.length === 0 ? (
+              <p className="py-4 text-center text-sm text-muted-foreground">{m.gallery_pickEmpty()}</p>
+            ) : (
+              <div className="flex max-h-72 flex-col gap-1 overflow-y-auto">
+                {attachOptions.map((option) => (
+                  <Button key={option.id} variant={attachPicked === option.id ? "default" : "outline"} className="justify-start" onClick={() => setAttachPicked(option.id)}>
+                    {option.name}
+                  </Button>
+                ))}
+              </div>
+            )}
+            <div className="flex justify-end">
+              <Button disabled={!attachPicked || attach.isPending} onClick={confirmAttach}>{m.gallery_pickConfirm()}</Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </FeatureGate>
+      <LightboxViewer open={!!data} onOpenChange={(open) => { if (!open) setSelectedId(null) }} data={data} onPrevious={selectedIndex > 0 ? () => setSelectedId(previewItems[selectedIndex - 1].id) : undefined} onNext={selectedIndex >= 0 && selectedIndex < previewItems.length - 1 ? () => setSelectedId(previewItems[selectedIndex + 1].id) : undefined} />
+    </div>
+  )
+}

package/src/components/harness/gallery/gallery-types.ts

@@ -0,0 +1,40 @@
+import { Image as ImageIcon, Video, Mic, FileText } from "lucide-react"
+import type { GenerationRun, LinkedTarget } from "./types"
+import { m } from "@/paraglide/messages.js"
+
+export type { LinkedTarget }
+
+export const KIND_ICONS: Record<string, typeof ImageIcon> = {
+  image: ImageIcon,
+  video: Video,
+  speech: Mic,
+  transcription: FileText,
+  prototype: ImageIcon,
+}
+
+export function getKindLabel(kind: string): string {
+  switch (kind) {
+    case "image": return m.gallery_image()
+    case "video": return m.gallery_video()
+    case "speech": return m.gallery_speech()
+    case "transcription": return m.gallery_transcription()
+    case "prototype": return m.gallery_prototype()
+    default: return m.gallery_preview()
+  }
+}
+
+export function getArtifactUrl(artifacts: GenerationRun["artifacts"]): string | undefined {
+  if (!Array.isArray(artifacts)) return undefined
+  const artifact = artifacts.find((entry) => entry.url || entry.sourceUrl)
+  return artifact?.url || artifact?.sourceUrl
+}
+
+export function getPrompt(result: unknown): string | undefined {
+  return result && typeof result === "object" && "prompt" in result && typeof result.prompt === "string" ? result.prompt : undefined
+}
+
+export type GalleryItem = GenerationRun
+
+export function getThumbnailAspect(kind: string): string {
+  return kind === "video" ? "aspect-video" : "aspect-square"
+}

package/src/components/harness/gallery/lightbox-viewer.tsx

@@ -0,0 +1,73 @@
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { X, SkipBack, SkipForward } from "lucide-react"
+import type { PersistedArtifactRef } from "./types"
+import { m } from "@/paraglide/messages.js"
+
+export type MediaType = "image" | "video" | "audio" | "unknown"
+
+export interface LightboxData {
+  type: MediaType
+  url: string
+  name?: string
+  mimeType?: string
+  artifacts?: PersistedArtifactRef[]
+  prompt?: string
+  model?: string
+  provider?: string
+  createdAt?: string
+  size?: string
+}
+
+interface LightboxViewerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  data: LightboxData | null
+  onNext?: () => void
+  onPrevious?: () => void
+}
+
+function detectMediaType(url: string, mimeType?: string): MediaType {
+  if (mimeType?.startsWith("video/")) return "video"
+  if (mimeType?.startsWith("audio/")) return "audio"
+  if (mimeType?.startsWith("image/")) return "image"
+  const ext = url.split(/[?#]/)[0].split(".").pop()?.toLowerCase() ?? ""
+  if (["mp4", "webm"].includes(ext)) return "video"
+  if (["mp3", "wav", "ogg", "m4a"].includes(ext)) return "audio"
+  if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) return "image"
+  return "unknown"
+}
+
+export function LightboxViewer({ open, onOpenChange, data, onNext, onPrevious }: LightboxViewerProps) {
+  if (!data) return null
+  const mediaType = data.type === "unknown" ? detectMediaType(data.url, data.mimeType) : data.type
+  const parameters = [
+    [m.gallery_prompt(), data.prompt],
+    [m.gallery_model(), data.model],
+    [m.gallery_provider(), data.provider],
+    [m.gallery_size(), data.size],
+    [m.gallery_created(), data.createdAt],
+  ]
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-dvh overflow-y-auto sm:max-w-4xl" showCloseButton={false}>
+        <DialogTitle>{data.name ?? m.gallery_preview()}</DialogTitle>
+        <DialogDescription className="sr-only">{m.gallery_preview()}</DialogDescription>
+        <div className="flex justify-end gap-2">
+          {onPrevious && <Button variant="outline" size="icon" aria-label={m.gallery_previous()} onClick={onPrevious}><SkipBack /></Button>}
+          {onNext && <Button variant="outline" size="icon" aria-label={m.gallery_next()} onClick={onNext}><SkipForward /></Button>}
+          <Button variant="ghost" size="icon" aria-label={m.gallery_close()} onClick={() => onOpenChange(false)}><X /></Button>
+        </div>
+        <div key={data.url}>
+          {mediaType === "image" && <img src={data.url} alt={data.name ?? m.gallery_image()} className="max-h-96 w-full rounded-lg object-contain" />}
+          {mediaType === "video" && <video src={data.url} controls className="max-h-96 w-full rounded-lg" />}
+          {mediaType === "audio" && <audio src={data.url} controls className="w-full" />}
+          {mediaType === "unknown" && <p>{m.gallery_unsupported()}</p>}
+        </div>
+        <dl className="flex flex-col gap-2 border-t pt-4 text-sm">
+          {parameters.map(([label, value]) => value ? <div key={label}><dt className="font-medium">{label}</dt><dd className="break-words text-muted-foreground">{value}</dd></div> : null)}
+        </dl>
+      </DialogContent>
+    </Dialog>
+  )
+}