nastechai-desktop 18.1.0

package/src/app/artifacts/index.tsx

@@ -0,0 +1,906 @@
+import type * as React from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { ZoomableImage } from '@/components/chat/zoomable-image'
+import { PageLoader } from '@/components/page-loader'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { CopyButton } from '@/components/ui/copy-button'
+import {
+  Pagination,
+  PaginationButton,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious
+} from '@/components/ui/pagination'
+import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
+import { Tip } from '@/components/ui/tooltip'
+import { getSessionMessages, listSessions } from '@/nastech'
+import { type Translations, useI18n } from '@/i18n'
+import { sessionTitle } from '@/lib/chat-runtime'
+import { ExternalLink, ExternalLinkIcon, hostPathLabel, urlSlugTitleLabel, useLinkTitle } from '@/lib/external-link'
+import { FileImage, FileText, FolderOpen, Link2 } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { notifyError } from '@/store/notifications'
+import type { SessionInfo, SessionMessage } from '@/types/nastech'
+
+import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
+import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { PAGE_INSET_NEG_X, PAGE_INSET_X } from '../layout-constants'
+import { PageSearchShell } from '../page-search-shell'
+import { sessionRoute } from '../routes'
+import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
+
+type ArtifactKind = 'image' | 'file' | 'link'
+type ArtifactFilter = 'all' | ArtifactKind
+const ARTIFACT_FILTERS: readonly ArtifactFilter[] = ['all', 'image', 'file', 'link']
+
+interface ArtifactRecord {
+  id: string
+  kind: ArtifactKind
+  value: string
+  href: string
+  label: string
+  sessionId: string
+  sessionTitle: string
+  timestamp: number
+}
+
+const MARKDOWN_IMAGE_RE = /!\[([^\]]*)\]\(([^)\s]+)\)/g
+const MARKDOWN_LINK_RE = /\[([^\]]+)\]\(([^)\s]+)\)/g
+const URL_RE = /https?:\/\/[^\s<>"')]+/g
+const PATH_RE = /(^|[\s("'`])((?:\/|~\/|\.\.?\/)[^\s"'`<>]+(?:\.[a-z0-9]{1,8})?)/gi
+const IMAGE_EXT_RE = /\.(?:png|jpe?g|gif|webp|svg|bmp)(?:\?.*)?$/i
+const FILE_EXT_RE = /\.(?:png|jpe?g|gif|webp|svg|bmp|pdf|txt|json|md|csv|zip|tar|gz|mp3|wav|mp4|mov)(?:\?.*)?$/i
+const KEY_HINT_RE = /(path|file|url|image|artifact|output|download|result|target)/i
+
+const ARTIFACT_TIME_FMT = new Intl.DateTimeFormat(undefined, {
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  month: 'short'
+})
+
+function normalizeValue(value: string): string {
+  return value.trim().replace(/[),.;]+$/, '')
+}
+
+function parseMaybeJson(value: string): unknown {
+  if (!value.trim()) {
+    return null
+  }
+
+  try {
+    return JSON.parse(value)
+  } catch {
+    return null
+  }
+}
+
+function looksLikePathOrUrl(value: string): boolean {
+  return (
+    value.startsWith('http://') ||
+    value.startsWith('https://') ||
+    value.startsWith('file://') ||
+    value.startsWith('data:image/') ||
+    value.startsWith('/') ||
+    value.startsWith('./') ||
+    value.startsWith('../') ||
+    value.startsWith('~/')
+  )
+}
+
+function looksLikeArtifact(value: string): boolean {
+  if (/^(?:https?:\/\/|data:image\/)/.test(value)) {
+    return true
+  }
+
+  if (looksLikePathOrUrl(value) && (IMAGE_EXT_RE.test(value) || FILE_EXT_RE.test(value))) {
+    return true
+  }
+
+  return value.startsWith('/') && value.includes('.')
+}
+
+function artifactKind(value: string): ArtifactKind {
+  if (value.startsWith('data:image/') || IMAGE_EXT_RE.test(value)) {
+    return 'image'
+  }
+
+  if (
+    value.startsWith('/') ||
+    value.startsWith('./') ||
+    value.startsWith('../') ||
+    value.startsWith('~/') ||
+    value.startsWith('file://')
+  ) {
+    return 'file'
+  }
+
+  return 'link'
+}
+
+function artifactHref(value: string): string {
+  if (
+    value.startsWith('http://') ||
+    value.startsWith('https://') ||
+    value.startsWith('file://') ||
+    value.startsWith('data:')
+  ) {
+    return value
+  }
+
+  if (value.startsWith('/')) {
+    return `file://${encodeURI(value)}`
+  }
+
+  return value
+}
+
+function artifactLabel(value: string): string {
+  try {
+    const url = new URL(value)
+    const item = url.pathname.split('/').filter(Boolean).pop()
+
+    return item || value
+  } catch {
+    const parts = value.split(/[\\/]/).filter(Boolean)
+
+    return parts.pop() || value
+  }
+}
+
+function messageText(message: SessionMessage): string {
+  if (typeof message.content === 'string' && message.content.trim()) {
+    return message.content
+  }
+
+  if (typeof message.text === 'string' && message.text.trim()) {
+    return message.text
+  }
+
+  if (typeof message.context === 'string' && message.context.trim()) {
+    return message.context
+  }
+
+  return ''
+}
+
+function collectStringValues(
+  value: unknown,
+  keyPath: string,
+  collector: (value: string, keyPath: string) => void
+): void {
+  if (typeof value === 'string') {
+    collector(value, keyPath)
+
+    return
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((entry, index) => collectStringValues(entry, `${keyPath}.${index}`, collector))
+
+    return
+  }
+
+  if (!value || typeof value !== 'object') {
+    return
+  }
+
+  for (const [key, child] of Object.entries(value as Record<string, unknown>)) {
+    collectStringValues(child, keyPath ? `${keyPath}.${key}` : key, collector)
+  }
+}
+
+function collectArtifactsFromText(text: string, pushValue: (value: string) => void): void {
+  for (const match of text.matchAll(MARKDOWN_IMAGE_RE)) {
+    pushValue(match[2] || '')
+  }
+
+  for (const match of text.matchAll(MARKDOWN_LINK_RE)) {
+    const start = match.index ?? 0
+
+    if (start > 0 && text[start - 1] === '!') {
+      continue
+    }
+
+    const value = match[2] || ''
+
+    if (looksLikeArtifact(value)) {
+      pushValue(value)
+    }
+  }
+
+  for (const match of text.matchAll(URL_RE)) {
+    const value = match[0] || ''
+
+    if (looksLikeArtifact(value)) {
+      pushValue(value)
+    }
+  }
+
+  for (const match of text.matchAll(PATH_RE)) {
+    pushValue(match[2] || '')
+  }
+}
+
+function collectArtifactsFromMessage(message: SessionMessage, pushValue: (value: string) => void): void {
+  const text = messageText(message)
+
+  if (text) {
+    collectArtifactsFromText(text, pushValue)
+  }
+
+  if (message.role !== 'tool' && !Array.isArray(message.tool_calls)) {
+    return
+  }
+
+  if (Array.isArray(message.tool_calls)) {
+    for (const call of message.tool_calls) {
+      collectStringValues(call, 'tool_call', (value, keyPath) => {
+        const normalized = normalizeValue(value)
+
+        if (!normalized) {
+          return
+        }
+
+        if (KEY_HINT_RE.test(keyPath) && (looksLikePathOrUrl(normalized) || FILE_EXT_RE.test(normalized))) {
+          pushValue(normalized)
+        }
+      })
+    }
+  }
+
+  const parsed = parseMaybeJson(text)
+
+  if (parsed !== null) {
+    collectStringValues(parsed, 'tool_result', (value, keyPath) => {
+      const normalized = normalizeValue(value)
+
+      if (!normalized) {
+        return
+      }
+
+      if ((KEY_HINT_RE.test(keyPath) || looksLikePathOrUrl(normalized)) && looksLikeArtifact(normalized)) {
+        pushValue(normalized)
+      }
+    })
+  }
+}
+
+export function collectArtifactsForSession(session: SessionInfo, messages: SessionMessage[]): ArtifactRecord[] {
+  const found = new Map<string, ArtifactRecord>()
+  const title = sessionTitle(session)
+
+  for (const message of messages) {
+    if (message.role !== 'assistant' && message.role !== 'tool') {
+      continue
+    }
+
+    collectArtifactsFromMessage(message, candidate => {
+      const value = normalizeValue(candidate)
+
+      if (!value || !looksLikeArtifact(value)) {
+        return
+      }
+
+      const key = `${session.id}:${value}`
+
+      if (found.has(key)) {
+        return
+      }
+
+      found.set(key, {
+        id: key,
+        kind: artifactKind(value),
+        value,
+        href: artifactHref(value),
+        label: artifactLabel(value),
+        sessionId: session.id,
+        sessionTitle: title,
+        timestamp: message.timestamp || session.last_active || session.started_at || Date.now()
+      })
+    })
+  }
+
+  return Array.from(found.values())
+}
+
+function formatArtifactTime(timestamp: number): string {
+  return ARTIFACT_TIME_FMT.format(new Date(timestamp))
+}
+
+function pageRangeLabel(total: number, page: number, pageSize: number, a: Translations['artifacts']): string {
+  if (total === 0) {
+    return a.zero
+  }
+
+  const start = (page - 1) * pageSize + 1
+  const end = Math.min(total, page * pageSize)
+
+  return a.rangeOf(start, end, total)
+}
+
+function paginationItems(page: number, pageCount: number): Array<number | 'ellipsis'> {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1)
+  }
+
+  const pages: Array<number | 'ellipsis'> = [1]
+  const start = Math.max(2, page - 1)
+  const end = Math.min(pageCount - 1, page + 1)
+
+  if (start > 2) {
+    pages.push('ellipsis')
+  }
+
+  for (let nextPage = start; nextPage <= end; nextPage += 1) {
+    pages.push(nextPage)
+  }
+
+  if (end < pageCount - 1) {
+    pages.push('ellipsis')
+  }
+
+  pages.push(pageCount)
+
+  return pages
+}
+
+type CellCtx = {
+  onOpen: (href: string) => void | Promise<void>
+  onOpenChat: (sessionId: string) => void
+}
+
+interface ArtifactColumn {
+  Cell: (props: { artifact: ArtifactRecord; ctx: CellCtx }) => React.ReactElement
+  bodyClassName: string
+  header: (filter: ArtifactFilter, a: Translations['artifacts']) => string
+  id: 'location' | 'primary' | 'session'
+  width: (filter: ArtifactFilter) => string
+}
+
+const itemsLabel = (f: ArtifactFilter, a: Translations['artifacts']) =>
+  f === 'link' ? a.itemsLink : f === 'file' ? a.itemsFile : a.itemsGeneric
+
+interface ArtifactsViewProps extends React.ComponentProps<'section'> {
+  setStatusbarItemGroup?: SetStatusbarItemGroup
+}
+
+export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...props }: ArtifactsViewProps) {
+  const { t } = useI18n()
+  const a = t.artifacts
+  const navigate = useNavigate()
+  const [artifacts, setArtifacts] = useState<ArtifactRecord[] | null>(null)
+  const [query, setQuery] = useState('')
+  const [refreshing, setRefreshing] = useState(false)
+
+  const [kindFilter, setKindFilter] = useRouteEnumParam('tab', ARTIFACT_FILTERS, 'all')
+
+  const [failedImageIds, setFailedImageIds] = useState<Set<string>>(() => new Set())
+  const [imagePage, setImagePage] = useState(1)
+  const [filePage, setFilePage] = useState(1)
+
+  const refreshArtifacts = useCallback(async () => {
+    setRefreshing(true)
+
+    try {
+      const sessions = (await listSessions(30, 1)).sessions
+      const results = await Promise.allSettled(sessions.map(session => getSessionMessages(session.id)))
+      const nextArtifacts: ArtifactRecord[] = []
+
+      results.forEach((result, index) => {
+        if (result.status !== 'fulfilled') {
+          return
+        }
+
+        const session = sessions[index]
+        nextArtifacts.push(...collectArtifactsForSession(session, result.value.messages))
+      })
+
+      setArtifacts(nextArtifacts.sort((left, right) => right.timestamp - left.timestamp))
+    } catch (err) {
+      notifyError(err, a.failedLoad)
+      setArtifacts([])
+    } finally {
+      setRefreshing(false)
+    }
+  }, [a])
+
+  useRefreshHotkey(refreshArtifacts)
+
+  useEffect(() => {
+    void refreshArtifacts()
+  }, [refreshArtifacts])
+
+  useEffect(() => {
+    setImagePage(1)
+    setFilePage(1)
+  }, [artifacts, kindFilter, query])
+
+  const visibleArtifacts = useMemo(() => {
+    if (!artifacts) {
+      return []
+    }
+
+    const q = query.trim().toLowerCase()
+
+    return artifacts.filter(artifact => {
+      if (kindFilter !== 'all' && artifact.kind !== kindFilter) {
+        return false
+      }
+
+      if (!q) {
+        return true
+      }
+
+      return (
+        artifact.label.toLowerCase().includes(q) ||
+        artifact.value.toLowerCase().includes(q) ||
+        artifact.sessionTitle.toLowerCase().includes(q)
+      )
+    })
+  }, [artifacts, kindFilter, query])
+
+  const visibleImageArtifacts = useMemo(
+    () => visibleArtifacts.filter(artifact => artifact.kind === 'image'),
+    [visibleArtifacts]
+  )
+
+  const visibleFileArtifacts = useMemo(
+    () => visibleArtifacts.filter(artifact => artifact.kind !== 'image'),
+    [visibleArtifacts]
+  )
+
+  const imagePageCount = Math.max(1, Math.ceil(visibleImageArtifacts.length / 24))
+  const filePageCount = Math.max(1, Math.ceil(visibleFileArtifacts.length / 100))
+  const currentImagePage = Math.min(imagePage, imagePageCount)
+  const currentFilePage = Math.min(filePage, filePageCount)
+
+  const pagedImageArtifacts = useMemo(
+    () => visibleImageArtifacts.slice((currentImagePage - 1) * 24, currentImagePage * 24),
+    [currentImagePage, visibleImageArtifacts]
+  )
+
+  const pagedFileArtifacts = useMemo(
+    () => visibleFileArtifacts.slice((currentFilePage - 1) * 100, currentFilePage * 100),
+    [currentFilePage, visibleFileArtifacts]
+  )
+
+  const counts = useMemo(() => {
+    const all = artifacts || []
+
+    return {
+      all: all.length,
+      image: all.filter(artifact => artifact.kind === 'image').length,
+      file: all.filter(artifact => artifact.kind === 'file').length,
+      link: all.filter(artifact => artifact.kind === 'link').length
+    }
+  }, [artifacts])
+
+  const openArtifact = useCallback(async (href: string) => {
+    try {
+      if (window.NASTECHDesktop?.openExternal) {
+        await window.NASTECHDesktop.openExternal(href)
+      } else {
+        window.open(href, '_blank', 'noopener,noreferrer')
+      }
+    } catch (err) {
+      notifyError(err, a.openFailed)
+    }
+  }, [a])
+
+  const markImageFailed = useCallback((id: string) => {
+    setFailedImageIds(current => {
+      if (current.has(id)) {
+        return current
+      }
+
+      return new Set(current).add(id)
+    })
+  }, [])
+
+  const cellCtx: CellCtx = {
+    onOpen: openArtifact,
+    onOpenChat: sessionId => navigate(sessionRoute(sessionId))
+  }
+
+  return (
+    <PageSearchShell
+      {...props}
+      onSearchChange={setQuery}
+      searchHidden={counts.all === 0}
+      searchPlaceholder={a.search}
+      searchTrailingAction={
+        <Button
+          aria-label={refreshing ? a.refreshing : a.refresh}
+          className="text-(--ui-text-tertiary) hover:bg-transparent hover:text-foreground"
+          disabled={refreshing}
+          onClick={() => void refreshArtifacts()}
+          size="icon-xs"
+          title={refreshing ? a.refreshing : a.refresh}
+          type="button"
+          variant="ghost"
+        >
+          <Codicon name="refresh" size="0.875rem" spinning={refreshing} />
+        </Button>
+      }
+      searchValue={query}
+      tabs={
+        <>
+          <TextTab active={kindFilter === 'all'} onClick={() => setKindFilter('all')}>
+            {a.tabAll} <TextTabMeta>({counts.all})</TextTabMeta>
+          </TextTab>
+          <TextTab active={kindFilter === 'image'} onClick={() => setKindFilter('image')}>
+            {a.tabImages} <TextTabMeta>({counts.image})</TextTabMeta>
+          </TextTab>
+          <TextTab active={kindFilter === 'file'} onClick={() => setKindFilter('file')}>
+            {a.tabFiles} <TextTabMeta>({counts.file})</TextTabMeta>
+          </TextTab>
+          <TextTab active={kindFilter === 'link'} onClick={() => setKindFilter('link')}>
+            {a.tabLinks} <TextTabMeta>({counts.link})</TextTabMeta>
+          </TextTab>
+        </>
+      }
+    >
+      {!artifacts ? (
+        <PageLoader label={a.indexing} />
+      ) : visibleArtifacts.length === 0 ? (
+        <div className="grid h-full place-items-center px-6 text-center">
+          <div>
+            <div className="text-sm font-medium">{a.noArtifactsTitle}</div>
+            <div className="mt-1 text-xs text-muted-foreground">{a.noArtifactsDesc}</div>
+          </div>
+        </div>
+      ) : (
+        <div className="h-full overflow-y-auto">
+          <div className={cn('flex flex-col gap-3 pb-2', PAGE_INSET_X)}>
+            {visibleImageArtifacts.length > 0 && (
+              <section className="flex flex-col">
+                <div
+                  className={cn(
+                    'sticky top-0 z-10 flex h-7 items-center gap-3 overflow-x-auto bg-background',
+                    PAGE_INSET_NEG_X,
+                    PAGE_INSET_X
+                  )}
+                >
+                  <ArtifactsPagination
+                    className="ml-auto justify-end px-0"
+                    itemLabel={a.itemsImage}
+                    onPageChange={setImagePage}
+                    page={currentImagePage}
+                    pageSize={24}
+                    total={visibleImageArtifacts.length}
+                  />
+                </div>
+                <div className="grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] items-start gap-2 pt-1.5">
+                  {pagedImageArtifacts.map(artifact => (
+                    <ArtifactImageCard
+                      artifact={artifact}
+                      failedImage={failedImageIds.has(artifact.id)}
+                      key={artifact.id}
+                      onImageError={markImageFailed}
+                      onOpenChat={sessionId => navigate(sessionRoute(sessionId))}
+                    />
+                  ))}
+                </div>
+              </section>
+            )}
+
+            {visibleFileArtifacts.length > 0 && (
+              <section className="flex flex-col">
+                <div
+                  className={cn(
+                    'sticky top-0 z-10 flex h-7 items-center gap-3 overflow-x-auto bg-background',
+                    PAGE_INSET_NEG_X,
+                    PAGE_INSET_X
+                  )}
+                >
+                  <ArtifactsPagination
+                    className="ml-auto justify-end px-0"
+                    itemLabel={itemsLabel(kindFilter, a)}
+                    onPageChange={setFilePage}
+                    page={currentFilePage}
+                    pageSize={100}
+                    total={visibleFileArtifacts.length}
+                  />
+                </div>
+                <div className="overflow-x-auto rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background)">
+                  <ArtifactTable artifacts={pagedFileArtifacts} ctx={cellCtx} filter={kindFilter} />
+                </div>
+              </section>
+            )}
+          </div>
+        </div>
+      )}
+    </PageSearchShell>
+  )
+}
+
+interface ArtifactsPaginationProps {
+  className?: string
+  itemLabel: string
+  onPageChange: (page: number) => void
+  page: number
+  pageSize: number
+  total: number
+}
+
+function ArtifactsPagination({ className, itemLabel, onPageChange, page, pageSize, total }: ArtifactsPaginationProps) {
+  const { t } = useI18n()
+  const a = t.artifacts
+  const pageCount = Math.max(1, Math.ceil(total / pageSize))
+
+  return (
+    <div className={cn('flex h-6 items-center justify-between gap-2 px-1', className)}>
+      <div className="shrink-0 text-[0.62rem] text-muted-foreground">
+        {pageRangeLabel(total, page, pageSize, a)} {itemLabel}
+      </div>
+      {pageCount > 1 && (
+        <Pagination className="mx-0 w-auto min-w-0 justify-end">
+          <PaginationContent className="gap-0.5">
+            <PaginationItem>
+              <PaginationPrevious disabled={page <= 1} onClick={() => onPageChange(Math.max(1, page - 1))} />
+            </PaginationItem>
+            {paginationItems(page, pageCount).map((item, index) => (
+              <PaginationItem key={`${item}-${index}`}>
+                {item === 'ellipsis' ? (
+                  <PaginationEllipsis />
+                ) : (
+                  <PaginationButton
+                    aria-label={a.goToPage(itemLabel, item)}
+                    isActive={page === item}
+                    onClick={() => onPageChange(item)}
+                  >
+                    {item}
+                  </PaginationButton>
+                )}
+              </PaginationItem>
+            ))}
+            <PaginationItem>
+              <PaginationNext
+                disabled={page >= pageCount}
+                onClick={() => onPageChange(Math.min(pageCount, page + 1))}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      )}
+    </div>
+  )
+}
+
+interface ArtifactImageCardProps {
+  artifact: ArtifactRecord
+  failedImage: boolean
+  onImageError: (id: string) => void
+  onOpenChat: (sessionId: string) => void
+}
+
+function ArtifactImageCard({ artifact, failedImage, onImageError, onOpenChat }: ArtifactImageCardProps) {
+  const { t } = useI18n()
+  const a = t.artifacts
+  const kindLabel = artifact.kind === 'image' ? a.kindImage : artifact.kind === 'file' ? a.kindFile : a.kindLink
+
+  return (
+    <article className="group/artifact overflow-hidden rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background)">
+      <div
+        className={cn(
+          'relative flex h-40 w-full items-center justify-center overflow-hidden border-b border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-1.5',
+          failedImage && 'cursor-default'
+        )}
+      >
+        {!failedImage && (
+          <ZoomableImage
+            alt={artifact.label}
+            className="max-h-40 max-w-full cursor-zoom-in rounded-md object-contain"
+            containerClassName="max-h-full"
+            decoding="async"
+            loading="lazy"
+            onError={() => onImageError(artifact.id)}
+            slot="artifact-media"
+            src={artifact.href}
+          />
+        )}
+      </div>
+
+      <div className="space-y-1.5 p-2">
+        <div className="min-w-0">
+          <div className="mb-0.5 flex items-center gap-1 text-[0.625rem] uppercase tracking-[0.08em] text-(--ui-text-tertiary)">
+            <FileImage className="size-3" />
+            {kindLabel}
+          </div>
+          <div className="truncate text-[length:var(--conversation-caption-font-size)] font-medium">
+            {artifact.label}
+          </div>
+          <div className="mt-0.5 truncate text-[0.625rem] text-(--ui-text-tertiary)">{artifact.value}</div>
+        </div>
+
+        <div className="truncate text-[0.625rem] text-(--ui-text-tertiary)">
+          {artifact.sessionTitle} · {formatArtifactTime(artifact.timestamp)}
+        </div>
+
+        <div className="flex flex-wrap gap-1.5">
+          <Button onClick={() => onOpenChat(artifact.sessionId)} size="xs" type="button" variant="textStrong">
+            <FolderOpen className="size-3" />
+            {a.chat}
+          </Button>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+// Single click target for any row cell. External URLs render as <ExternalLink>;
+// local actions render as <button>. Padding lives here, NOT on the <td>, so
+// the entire cell area is hoverable and clickable in both branches.
+function ArtifactCellAction({
+  children,
+  href,
+  onClick,
+  title
+}: {
+  children: React.ReactNode
+  href?: string
+  onClick?: () => void
+  title?: string
+}) {
+  if (href) {
+    return (
+      <ExternalLink
+        className="flex h-full w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) font-normal text-(--ui-text-secondary) no-underline underline-offset-4 decoration-current/20 transition-colors hover:text-foreground hover:underline"
+        href={href}
+        showExternalIcon={false}
+        title={title}
+      >
+        {children}
+      </ExternalLink>
+    )
+  }
+
+  return (
+    <button
+      className="flex h-full w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) font-normal text-(--ui-text-secondary) no-underline underline-offset-4 decoration-current/20 transition-colors hover:text-foreground hover:underline"
+      onClick={onClick}
+      type="button"
+    >
+      {children}
+    </button>
+  )
+}
+
+function PrimaryCell({ artifact, ctx }: { artifact: ArtifactRecord; ctx: CellCtx }) {
+  const isLink = artifact.kind === 'link'
+  const Icon = isLink ? Link2 : FileText
+  const fetchedTitle = useLinkTitle(isLink ? artifact.href : null)
+  const label = isLink ? fetchedTitle || urlSlugTitleLabel(artifact.href) : artifact.label
+
+  return (
+    <ArtifactCellAction
+      href={isLink ? artifact.href : undefined}
+      onClick={isLink ? undefined : () => void ctx.onOpen(artifact.href)}
+      title={label}
+    >
+      <span className="mt-0.5 grid size-6 shrink-0 place-items-center self-start rounded-md bg-(--ui-bg-tertiary) text-(--ui-text-tertiary)">
+        <Icon className="size-3.5" />
+      </span>
+      <span className={cn('min-w-0 flex-1', isLink ? 'wrap-anywhere' : 'truncate')}>
+        {label}
+        {isLink && <ExternalLinkIcon />}
+      </span>
+    </ArtifactCellAction>
+  )
+}
+
+function LocationCell({ artifact }: { artifact: ArtifactRecord; ctx: CellCtx }) {
+  const { t } = useI18n()
+  const isLink = artifact.kind === 'link'
+  const value = isLink ? hostPathLabel(artifact.value) : artifact.value
+  const copyLabel = isLink ? t.artifacts.copyUrl : t.artifacts.copyPath
+
+  return (
+    <div className="group/location flex min-w-0 items-center gap-1.5">
+      <Tip label={artifact.value}>
+        <div
+          className={cn(
+            'min-w-0 flex-1 truncate text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)',
+            isLink ? 'font-normal' : 'font-mono'
+          )}
+        >
+          {value}
+        </div>
+      </Tip>
+      <CopyButton
+        appearance="icon"
+        buttonSize="icon-xs"
+        className="shrink-0 text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover/location:opacity-100"
+        iconClassName="size-3.5"
+        label={copyLabel}
+        text={artifact.value}
+        title={copyLabel}
+      />
+    </div>
+  )
+}
+
+function SessionCell({ artifact, ctx }: { artifact: ArtifactRecord; ctx: CellCtx }) {
+  return (
+    <ArtifactCellAction onClick={() => ctx.onOpenChat(artifact.sessionId)} title={artifact.sessionTitle}>
+      <span className="flex min-w-0 flex-col">
+        <span className="truncate">{artifact.sessionTitle}</span>
+        <span className="truncate text-[0.6875rem] font-normal text-(--ui-text-tertiary)">
+          {formatArtifactTime(artifact.timestamp)}
+        </span>
+      </span>
+    </ArtifactCellAction>
+  )
+}
+
+const ARTIFACT_COLUMNS: readonly ArtifactColumn[] = [
+  {
+    Cell: PrimaryCell,
+    bodyClassName: 'p-0',
+    header: (filter, a) => (filter === 'link' ? a.colTitleLink : filter === 'file' ? a.colTitleFile : a.colTitleDefault),
+    id: 'primary',
+    width: filter => (filter === 'link' ? 'w-[50%]' : 'w-[35%]')
+  },
+  {
+    Cell: LocationCell,
+    bodyClassName: 'px-2.5 py-1.5',
+    header: (filter, a) =>
+      filter === 'link' ? a.colLocationLink : filter === 'file' ? a.colLocationFile : a.colLocationDefault,
+    id: 'location',
+    width: filter => (filter === 'link' ? 'w-[30%]' : 'w-[41%]')
+  },
+  {
+    Cell: SessionCell,
+    bodyClassName: 'p-0',
+    header: (_filter, a) => a.colSession,
+    id: 'session',
+    width: filter => (filter === 'link' ? 'w-[20%]' : 'w-[24%]')
+  }
+]
+
+function ArtifactTable({
+  artifacts,
+  ctx,
+  filter
+}: {
+  artifacts: readonly ArtifactRecord[]
+  ctx: CellCtx
+  filter: ArtifactFilter
+}) {
+  const { t } = useI18n()
+
+  return (
+    <table className="w-full min-w-176 table-fixed text-left text-[length:var(--conversation-caption-font-size)]">
+      <thead className="border-b border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) text-[0.625rem] uppercase tracking-[0.08em] text-(--ui-text-tertiary)">
+        <tr>
+          {ARTIFACT_COLUMNS.map(col => (
+            <th className={cn(col.width(filter), 'px-2.5 py-1.5 font-medium')} key={col.id}>
+              {col.header(filter, t.artifacts)}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {artifacts.map(artifact => (
+          <tr className="group/artifact" key={artifact.id}>
+            {ARTIFACT_COLUMNS.map(col => {
+              const Cell = col.Cell
+
+              return (
+                <td className={cn('align-middle', col.bodyClassName)} key={col.id}>
+                  <Cell artifact={artifact} ctx={ctx} />
+                </td>
+              )
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}