oxios 1.12.0

Oxios Agent OS — Agent Operating System powered by oxi-sdk
import { createFileRoute } from '@tanstack/react-router'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { DreamPanel } from '@/components/memory/dream-panel'
import { MemoryBrowser } from '@/components/memory/memory-browser'
import { MemoryDetail } from '@/components/memory/memory-detail'
import { MemoryMap } from '@/components/memory/memory-map'
import { MemoryOverview } from '@/components/memory/memory-overview'
import { MemorySearch } from '@/components/memory/memory-search'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import type { MemoryDetail as MemDetail } from '@/types/memory'

export const Route = createFileRoute('/memory')({ component: MemoryPage })

function MemoryPage() {
  const { t } = useTranslation()
  const [selected, setSelected] = useState<MemDetail | null>(null)
  const [detailOpen, setDetailOpen] = useState(false)

  const handleSelectMemory = useCallback((m: MemDetail) => {
    setSelected(m)
    setDetailOpen(true)
  }, [])

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">{t('memory.title')}</h1>
          <p className="text-muted-foreground">{t('memory.subtitle')}</p>
        </div>
      </div>
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">{t('memory.overview')}</TabsTrigger>
          <TabsTrigger value="browse">{t('memory.browse')}</TabsTrigger>
          <TabsTrigger value="map" data-testid="memory-tab-map">
            {t('memory.map')}
          </TabsTrigger>
          <TabsTrigger value="dream">{t('memory.dream')}</TabsTrigger>
          <TabsTrigger value="search">{t('memory.search')}</TabsTrigger>
        </TabsList>
        <TabsContent value="overview">
          <MemoryOverview />
        </TabsContent>
        <TabsContent value="browse">
          <MemoryBrowser onSelect={handleSelectMemory} />
        </TabsContent>
        <TabsContent value="map">
          <MemoryMap />
        </TabsContent>
        <TabsContent value="dream">
          <DreamPanel />
        </TabsContent>
        <TabsContent value="search">
          <MemorySearch />
        </TabsContent>
      </Tabs>
      <MemoryDetail memory={selected} open={detailOpen} onClose={() => setDetailOpen(false)} />
    </div>
  )
}